/* ============================================================
   farbschema.css  -  Heller und dunkler Modus (18.09.2026)

   Wie das funktioniert
   -------------------
   Die Seiten waren durchgehend auf Dunkel gebaut: heller Text auf
   Anthrazit, dazu hunderte halbdurchsichtige Weisstoene fuer Karten,
   Linien und Knoepfe. Statt jede dieser Stellen zu verdoppeln, sind
   die beiden Grundfarben jetzt austauschbar:

     --snow / --snow-rgb   = die Tinte (Schrift, Linien, helle Flaechen)
     --night / --night-rgb = der Grund (Seitenhintergrund)

   Im dunklen Modus ist die Tinte weiss und der Grund schwarz; im
   hellen Modus genau andersherum. Alle rgba()-Angaben in den Seiten
   wurden auf diese beiden Variablen umgestellt, deshalb kippen sie
   automatisch mit.

   Umgeschaltet wird ueber das Attribut data-thema am <html>-Element
   (siehe thema.js). Ohne Attribut bleibt es beim dunklen Modus.
   ============================================================ */

:root{
  --snow-rgb:251,250,247;
  --night-rgb:23,25,26;
  --karte:#212425;    /* Kachel/Karte, eine Stufe ueber dem Grund */
  --tief:#0E0F10;     /* noch dunkler als der Grund (Ladebild, Showroom) */
  color-scheme:dark;
}

html[data-thema="hell"]{
  /* Grund und Tinte tauschen die Rollen */
  --night:#F4F2ED;          /* Seitengrund - warmes Papier, nicht Reinweiss */
  --surface:#FFFFFF;        /* erhoehte Flaechen (Karten) */
  --snow:#17191A;           /* Schrift */
  --ink:#17191A;
  --ink-soft:#4A4D4E;
  --bone:#E6E2D6;
  --stone:#5E6465;          /* Nebentext - dunkler als im Dunkelmodus, sonst zu blass */
  --snow-rgb:23,25,26;
  --night-rgb:251,250,247;

  /* Gold bei 3,0:1 auf Papier zu schwach - die dunklere Stufe aus den
     Markenrichtlinien uebernimmt die Rolle des Akzents. */
  --karte:#ECEAE3;   /* Kacheln leicht grau gegen den Papiergrund abgesetzt */
  --tief:#EAE7DF;
  --gold:#8A6415;
  --sage:#566044;
  --sage-hell:#3F4A33;
  color-scheme:light;
}

/* ---------- Grundflaechen ---------- */
html[data-thema="hell"] body{ background:var(--night); color:var(--snow) }

/* Abschnitte, die ihren Grund fest gesetzt hatten */
html[data-thema="hell"] .price-wrap,
html[data-thema="hell"] .plan-wrap,
html[data-thema="hell"] .flow-wrap,
html[data-thema="hell"] .card-wrap,
html[data-thema="hell"] .page-head,
html[data-thema="hell"] .intro,
html[data-thema="hell"] .process,
html[data-thema="hell"] .benefits-wrap,
html[data-thema="hell"] .quickbook{ background-color:var(--night) }

/* Punktraster im Hintergrund: im Hellen dunkle statt heller Punkte */
html[data-thema="hell"] .price-wrap,
html[data-thema="hell"] .process,
html[data-thema="hell"] .benefits-wrap{
  background-image:radial-gradient(rgba(23,25,26,.08) 1px, transparent 1px);
}


/* ============================================================
   Umschalter in der Kopfleiste
   Uebertragung eines React/Tailwind-Bausteins ("theme-toggle") in das
   CSS dieser Seite: eine Pille mit zwei Feldern, in der der Knopf von
   links nach rechts wandert. Mond = dunkel, Sonne = hell.
   ============================================================ */
.thema-schalter{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  width:64px;height:34px;padding:4px;
  border-radius:999px;border:1px solid rgba(var(--snow-rgb),.22);
  background:rgba(var(--night-rgb),.45);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  cursor:pointer;
  transition:background .45s var(--lux,ease),border-color .45s var(--lux,ease);
}
.thema-schalter:hover{border-color:rgba(var(--snow-rgb),.45)}
.thema-schalter:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.thema-schalter .ts-feld{
  position:relative;width:100%;height:100%;
}
/* Der wandernde Knopf */
.thema-schalter .ts-knopf{
  position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(var(--snow-rgb),.16);
  transition:transform .45s var(--lux,ease),background .45s var(--lux,ease);
}
.thema-schalter.ist-hell .ts-knopf{
  transform:translateX(28px);
  background:var(--gold);
}
.thema-schalter svg{
  width:16px;height:16px;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Mond liegt im Knopf, Sonne dahinter - und umgekehrt */
.thema-schalter .ts-mond{stroke:var(--snow)}
.thema-schalter .ts-sonne{
  position:absolute;top:5px;right:5px;stroke:rgba(var(--snow-rgb),.45);
  transition:opacity .3s var(--lux,ease);
}
.thema-schalter.ist-hell .ts-mond{display:none}
.thema-schalter.ist-hell .ts-sonne{
  position:absolute;top:50%;left:0;right:auto;transform:translateY(-50%) translateX(31px);
  stroke:#FFFFFF;
}
.thema-schalter.ist-hell .ts-mond-hinten{
  display:block;position:absolute;top:5px;left:5px;stroke:rgba(var(--snow-rgb),.5);
}
.thema-schalter .ts-mond-hinten{display:none}
@media (prefers-reduced-motion:reduce){
  .thema-schalter,.thema-schalter *{transition:none}
}
@media (max-width:900px){
  /* Die Kopfleiste ordnet ihre Teile auf dem Telefon neu (mobil.css):
     Logo, Burger, "Buchen". Der Umschalter reiht sich dahinter ein,
     statt links vor dem Logo zu stehen. */
  .site-nav .thema-schalter{order:4}
  .thema-schalter{width:58px;height:32px}
  .thema-schalter .ts-knopf{width:24px;height:24px}
  .thema-schalter.ist-hell .ts-knopf{transform:translateX(26px)}
}


/* ============================================================
   Nacharbeiten fuer den hellen Modus
   Stellen, die sich nicht allein durch den Farbtausch erledigen.
   ============================================================ */

/* Zeichen in gefuellten Pine-Kreisen bleiben hell - der Kreis ist in
   beiden Modi dunkelgruen. */
html[data-thema="hell"] .ink-liste svg,
html[data-thema="hell"] .fakten .zeichen,
html[data-thema="hell"] .fakten .zeichen svg,
html[data-thema="hell"] .km-kreis,
html[data-thema="hell"] .km-kreis svg,
html[data-thema="hell"] .ptile-kaution svg,
html[data-thema="hell"] .qb-sub .qb-ic{ color:#FFFFFF; stroke:#FFFFFF }
html[data-thema="hell"] .fakten .zeichen{ color:#FFFFFF }

/* Ladebild und Bildsequenz bleiben dunkel - das Material ist auf
   Schwarz gerechnet. */
html[data-thema="hell"] #preload{ background:var(--tief) }

/* Die Kachel-Fuellung beim Ueberfahren nutzt Stone als Farbe; im
   hellen Modus muss die Schrift darauf hell werden. */
html[data-thema="hell"] .ptile.is-voll .ptile-in h2,
html[data-thema="hell"] .ptile.is-voll .ptile-staffel b{ color:#FFFFFF }
html[data-thema="hell"] .ptile.is-voll .ptile-modelle,
html[data-thema="hell"] .ptile.is-voll .ptile-fakten,
html[data-thema="hell"] .ptile.is-voll .ptile-staffel i,
html[data-thema="hell"] .ptile.is-voll .ptile-staffel b small{ color:rgba(255,255,255,.8) }

/* Buchungsmaske auf der Startseite: sie war schon im dunklen Modus
   eine helle Karte - sie bleibt hell, nur der Rahmen wird ruhiger. */
html[data-thema="hell"] .qb-inner{
  background:#FFFFFF;
  box-shadow:0 24px 60px -40px rgba(23,25,26,.35);
}
html[data-thema="hell"] .qb-titel,
html[data-thema="hell"] .qb-feld select,
html[data-thema="hell"] .qb-feld input{ color:#17191A }
html[data-thema="hell"] .qb-sub span,
html[data-thema="hell"] .qb-note{ color:rgba(23,25,26,.75) }
html[data-thema="hell"] .qb-inner::after{ --glas-licht:rgba(23,25,26,.22) }

/* Hero-Hinweis: im hellen Modus dunkle Schrift auf heller Scheibe. */
html[data-thema="hell"] .scroll-hint{
  color:#17191A;text-shadow:none;
  background:linear-gradient(180deg,rgba(23,25,26,.10) 0%,rgba(23,25,26,.05) 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.6),inset 0 0 2px 4px rgba(255,255,255,.35);
}
html[data-thema="hell"] .scroll-hint .hint-maus{ border-color:rgba(23,25,26,.55) }
html[data-thema="hell"] .scroll-hint .hint-maus i{ background:#17191A }
html[data-thema="hell"] .scroll-hint .hint-sub{ color:rgba(23,25,26,.7) }
html[data-thema="hell"] .scroll-hint.glas{ --glas-licht:rgba(23,25,26,.45);--glas-wisch:rgba(255,255,255,.5) }

/* Kopfleiste: auf hellem Grund braucht die Reiter-Pille dunkle
   Schrift statt heller. */
html[data-thema="hell"] .nav-tabs{ background:rgba(23,25,26,.06);border-color:rgba(23,25,26,.12) }
html[data-thema="hell"] .nav-tabs .tab{ color:rgba(23,25,26,.75) }
html[data-thema="hell"] .nav-tabs .tab:hover{ background:rgba(23,25,26,.08);color:#17191A }
html[data-thema="hell"] .nav-tabs .tab.is-active{ background:#17191A;color:#FBFAF7 }
html[data-thema="hell"] .nav-cta{
  background:rgba(23,25,26,.04);border-color:rgba(23,25,26,.55);color:#17191A;
}
html[data-thema="hell"] .nav-cta .cta-text{ color:#17191A }
html[data-thema="hell"] .site-nav .nav-logo img{ filter:none }
html[data-thema="hell"] .nav-burger span{ background:#17191A }

/* ---------- Buchungsmaske: bleibt in beiden Modi eine helle Karte ----
   Ihre Innenfarben sind deshalb fest gesetzt und nicht getauscht. */
html[data-thema="hell"] .qb-feld label{ color:rgba(23,25,26,.68) }
html[data-thema="hell"] .qb-kopf{ border-bottom-color:rgba(23,25,26,.10) }
html[data-thema="hell"] .qb-feld select,
html[data-thema="hell"] .qb-feld input{
  background:#FFFFFF;border-color:rgba(23,25,26,.16);color:#17191A;
  box-shadow:0 1px 2px rgba(23,25,26,.04);
}
html[data-thema="hell"] .qb-feld select:hover,
html[data-thema="hell"] .qb-feld input:hover{ border-color:rgba(23,25,26,.3) }
html[data-thema="hell"] .qb-feld select option{ background:#FFFFFF;color:#17191A }
html[data-thema="hell"] .qb-hinweis{ color:rgba(23,25,26,.68) }
html[data-thema="hell"] .qb-label{ color:var(--clay) }
html[data-thema="hell"] .qb-btn{ color:#FFFFFF }

/* ---------- Vorteilskarten kippen bewusst ins Dunkle ----------
   Auf hellem Grund wirken die Karten als dunkle Flaechen - dieselbe
   Umkehrung wie im dunklen Modus, nur andersherum. Nur der Schatten
   muss leichter werden, sonst wirkt er schmutzig. */
html[data-thema="hell"] .bk{
  box-shadow:0 2px 4px rgba(23,25,26,.10),
             0 18px 34px -16px rgba(23,25,26,.18),
             0 40px 70px -40px rgba(23,25,26,.22);
}

/* ---------- Schatten allgemein: auf Papier deutlich leichter ---------- */
html[data-thema="hell"] .ptile,
html[data-thema="hell"] .ptile-km,
html[data-thema="hell"] .vcard,
html[data-thema="hell"] .step-glas{
  box-shadow:0 14px 34px -26px rgba(23,25,26,.4);
}


/* ============================================================
   Film und Fusszeile bleiben dunkel (18.09.2026)
   Die Bildsequenz im Hero ist nachts aufgenommen und traegt weisse
   Schrift; die Fusszeile hat ohnehin ihr eigenes Farbset. Beides
   bleibt im hellen Modus unveraendert - der Rest der Seite wird hell.
   ============================================================ */
html[data-thema="hell"] .hero,
html[data-thema="hell"] .hero-pin{ background:#17191A }

/* Schriftzug, Schleier und Auslauf wie im dunklen Modus */
html[data-thema="hell"] .hero-title,
html[data-thema="hell"] .hero-title .hero-wort{ color:#FBFAF7 }
html[data-thema="hell"] .hero-scrim{
  background:linear-gradient(180deg,rgba(23,25,26,.30) 0%,rgba(23,25,26,.08) 40%,transparent 62%);
}
html[data-thema="hell"] .hero-overlay::before{
  background:linear-gradient(180deg,rgba(23,25,26,.16) 0%,transparent 38%);
}
/* Unten laeuft der Film nicht ins Schwarze, sondern ins Papier aus -
   sonst haette es eine harte Kante zur hellen Buchungsleiste gegeben. */
html[data-thema="hell"] .hero-overlay::after{
  background:linear-gradient(180deg,
    rgba(244,242,237,0) 0%, rgba(244,242,237,.08) 25%, rgba(244,242,237,.28) 45%,
    rgba(244,242,237,.58) 62%, rgba(244,242,237,.86) 78%, rgba(244,242,237,.96) 90%,
    #F4F2ED 100%);
}

/* Hinweis auf dem Film: wieder hell wie im dunklen Modus */
html[data-thema="hell"] .scroll-hint{
  color:#FBFAF7;
  background:linear-gradient(180deg,rgba(251,250,247,.16) 0%,rgba(251,250,247,.07) 100%);
  text-shadow:0 1px 8px rgba(23,25,26,.45);
  box-shadow:inset 0 2px 2px rgba(251,250,247,.16),inset 0 0 2px 4px rgba(251,250,247,.08);
  --glas-licht:rgba(251,250,247,.55);--glas-wisch:rgba(251,250,247,.24);
}
html[data-thema="hell"] .scroll-hint .hint-maus{ border-color:rgba(251,250,247,.65) }
html[data-thema="hell"] .scroll-hint .hint-maus i{ background:#FBFAF7 }
html[data-thema="hell"] .scroll-hint .hint-sub{ color:rgba(251,250,247,.72) }

/* Die Sterne hinter der Buchungsmaske stehen jetzt auf hellem Grund */
html[data-thema="hell"] .frueh-star,
html[data-thema="hell"] .bg-star{ opacity:.45 }

/* Kopfleiste ueber dem dunklen Film: dort wieder helle Schrift */
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled) .nav-tabs{
  background:rgba(23,25,26,.55);border-color:rgba(251,250,247,.14);
}
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled) .nav-tabs .tab{
  color:rgba(251,250,247,.8);
}
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled) .nav-cta{
  background:rgba(23,25,26,.55);border-color:rgba(251,250,247,.7);color:#FBFAF7;
}
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled) .nav-cta .cta-text{ color:#FBFAF7 }
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled) .nav-burger span{ background:#FBFAF7 }


/* ============================================================
   Deutschlandkarte (Kontaktseite)
   Die Karte ist eine helle Strichzeichnung auf durchsichtigem Grund -
   auf Papier waere sie nicht zu sehen. Sie bekommt im hellen Modus
   ihre eigene dunkle Flaeche, wie ein eingelassenes Fenster.
   ============================================================ */
html[data-thema="hell"] .karte{
  background:#17191A;
  border-radius:22px;
  box-shadow:0 20px 50px -34px rgba(23,25,26,.55);
  --snow-rgb:251,250,247;
  --night-rgb:23,25,26;
  --snow:#FBFAF7;
}
html[data-thema="hell"] .karte-ort{ color:#FBFAF7 }


/* ============================================================
   Kopfleiste im hellen Modus sichtbar machen (18.09.2026)
   Im dunklen Modus ist die Leiste bewusst voellig durchsichtig - dort
   traegt jedes Teil seinen eigenen Kontrast. Auf Papier verliert sich
   die Leiste dagegen im Grund. Sie bekommt deshalb im hellen Modus
   eine eigene helle Flaeche mit feiner Unterkante.
   Ausnahme: solange sie auf der Startseite ueber dem Film liegt,
   bleibt sie durchsichtig - dort ist der Film ihr Hintergrund.
   ============================================================ */
html[data-thema="hell"] .site-nav{
  background:rgba(251,250,247,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(23,25,26,.10);
}
html[data-thema="hell"] body:has(.hero) .site-nav:not(.is-scrolled){
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;
}
/* Auf der hellen Flaeche braucht "Camper buchen" keinen dunklen Schleier
   mehr, und das Logo keinen Schlagschatten. */
html[data-thema="hell"] .site-nav.is-scrolled .nav-cta,
html[data-thema="hell"] body:not(:has(.hero)) .site-nav .nav-cta{
  background:rgba(23,25,26,.03);
}
html[data-thema="hell"] .site-nav .nav-logo img{ filter:none }


/* ============================================================
   Seiten, die immer dunkel bleiben (18.09.2026)
   "Ueber uns" lebt von Film, Fotos und dunklen Kapitelflaechen - die
   Seite bleibt deshalb in beiden Modi genau so, wie sie im dunklen
   Modus aussieht. Dafuer werden alle Farbtoken innerhalb des Koerpers
   auf die dunklen Werte zurueckgesetzt; alles darunter erbt sie.
   ============================================================ */
html[data-thema="hell"] body.immer-dunkel{
  --night:#17191A;
  --surface:#1E2122;
  --karte:#212425;
  --tief:#0E0F10;
  --snow:#FBFAF7;
  --ink:#17191A;
  --ink-soft:#4A4D4E;
  --bone:#E7E3D8;
  --stone:#9AA0A1;
  --gold:#D6A23E;
  --sage:#8C9C7A;
  --sage-hell:#AEBC9A;
  --snow-rgb:251,250,247;
  --night-rgb:23,25,26;
  background:#17191A;
  color:#FBFAF7;
  color-scheme:dark;
}
/* Die Nacharbeiten fuer den hellen Modus gelten hier nicht */
html[data-thema="hell"] body.immer-dunkel .site-nav{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;
}
html[data-thema="hell"] body.immer-dunkel .nav-tabs{
  background:rgba(23,25,26,.55);border-color:rgba(251,250,247,.14);
}
html[data-thema="hell"] body.immer-dunkel .nav-tabs .tab{ color:rgba(251,250,247,.8) }
html[data-thema="hell"] body.immer-dunkel .nav-tabs .tab:hover{
  background:rgba(251,250,247,.1);color:#FBFAF7;
}
html[data-thema="hell"] body.immer-dunkel .nav-tabs .tab.is-active{
  background:#FBFAF7;color:#17191A;
}
html[data-thema="hell"] body.immer-dunkel .site-nav .nav-cta{
  background:rgba(23,25,26,.55);border-color:rgba(251,250,247,.7);color:#FBFAF7;
}
html[data-thema="hell"] body.immer-dunkel .site-nav .nav-cta .cta-text{ color:#FBFAF7 }
html[data-thema="hell"] body.immer-dunkel .nav-burger span{ background:#FBFAF7 }


/* ============================================================
   Reiter-Pille mittig (18.09.2026)
   Bisher standen Logo, Pille und die rechte Gruppe in einer Reihe mit
   gleichmaessigen Abstaenden - weil die rechte Gruppe breiter ist als
   das Logo, sass die Pille sichtbar links der Bildschirmmitte. Jetzt
   haengt sie unabhaengig davon genau in der Mitte.
   (Layout, keine Farbe - steht hier, weil diese Datei ohnehin auf
   allen Seiten geladen wird.)
   ============================================================ */
/* Erst ab 1200 px ist genug Platz: darunter wuerde die mittig
   gesetzte Pille unter den Umschalter laufen, deshalb bleibt sie dort
   in der normalen Reihe. */
@media (min-width:1200px){
  .site-nav{ position:fixed }
  .site-nav .nav-tabs{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    margin:0;
  }
  /* Da die Pille aus der Reihe genommen ist, wuerde der Umschalter
     nach links in ihre Mitte rutschen - er wird deshalb zusammen mit
     "Camper buchen" nach rechts geschoben. */
  .site-nav .thema-schalter{ margin-left:auto }
}