/* CarveRoute Landingpage — statisch, keine Abhaengigkeiten.

   Farben: Richtung A, Kobalt, entschieden 09.09.2026. Die Werte stammen aus
   design/system/tokens.css und sind hier bewusst kopiert, damit die Seite auf
   dem Webspace ohne Bauschritt liegt. Aendert sich eine Farbe, aendert sie
   sich dort zuerst.

   Schrift: Systemschriften. Archivo und Source Sans 3 kommen, sobald sie
   selbst gehostet werden -- nicht ueber Google Fonts, das waere eine
   Uebermittlung von IP-Adressen ohne Rechtsgrundlage. */

:root{
  --grund:#F2F4F8;
  --flaeche:#FFFFFF;
  --linie:#DCE1E9;
  --linie-kraeftig:#B9C2D0;
  --text:#0E141F;
  --text-zweit:#46505F;
  --text-dritt:#697487;
  --akzent:#1240DD;
  --akzent-hover:#0E32AE;
  --auf-akzent:#FFFFFF;
  --dunkel:#0E141F;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* B-670: Kein Bild und kein Film ist breiter als seine Spalte, auch wenn
   eine eigene Regel fehlt. Die Klassenregeln unten gehen vor. */
img,video{max-width:100%;height:auto}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* --- Kopf (B-712c) ---
   Gleiche Masse wie die Kopfzeile der App (web/src/style.css: .cr-kopfzeile,
   .cr-kopfnav button, .cr-konto; nur gelesen): 64 px hoch, 24 px Seitenrand,
   Lücke 12 px, Wortmarke 20 px/600, Menüpunkte 16 px/600 mit 9x12 px Polster
   und 6 px Rundung, Konto-Kreis 44 px. Bis 880 px zweizeilig (Marke oben,
   Menüstreifen darunter), bis 420 px 12 px Rand. Der Kopf steht wie in der App
   als volle Leiste mit Linie darunter, nicht in der 1080-px-Spalte. */

.wrap:has(>.kopf){
  max-width:none;padding:0;
  background:var(--flaeche);border-bottom:1px solid var(--linie);
}
.kopf{
  display:flex;align-items:center;gap:12px;
  height:63px;padding:0 24px; /* 63 + 1 px Linie der Leiste = 64 px wie .cr-kopfzeile */
}
.marke{
  display:inline-flex;align-items:center;gap:12px;
  font-size:20px;font-weight:600;letter-spacing:-.012em;line-height:1.45;
  text-decoration:none;color:var(--text);
  min-height:44px;flex-shrink:0;
}
.marke img{width:32px;height:32px;display:block}
.hinweis{
  display:inline-flex;align-items:center;
  min-height:28px;padding:3px 11px;
  border:1px solid var(--linie-kraeftig);border-radius:999px;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dritt);
}
.nav-preise,
.app-menue__link,
.app-hallo{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 12px;border:0;border-radius:6px;
  background:transparent;color:var(--text-zweit);text-decoration:none;
  font-size:16px;font-weight:600;white-space:nowrap;flex-shrink:0;
  transition:background-color .15s ease,color .15s ease;
}
.nav-preise{margin-left:auto}
.app-hallo{padding-left:0}
.nav-preise:hover,
.app-menue__link:hover{background:var(--grund);color:var(--text-zweit)}
.nav-preise:focus-visible,
.app-menue__link:focus-visible,
.app-konto:focus-visible,
.anmelden:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
/* "hidden" muss gewinnen (B-688d): jede per Skript ausgeblendete Klasse */
.nav-preise[hidden]{display:none}
.app-menue__link[hidden]{display:none}
.anmelden{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 12px;
  border:1px solid var(--linie-kraeftig);border-radius:6px;
  color:var(--text-zweit);text-decoration:none;
  font-size:16px;font-weight:600;flex-shrink:0;
  transition:border-color .15s ease,color .15s ease;
}
.anmelden:hover{border-color:var(--akzent);color:var(--akzent)}
/* "hidden" muss gewinnen, sonst steht "Anmelden" auch angemeldet da */
.anmelden[hidden]{display:none}
/* Angemeldet: Menü, Streifen und Konto sind Kinder der Kopfzeile wie in der
   App (.cr-kopfzeile__mitte). "hidden" muss gewinnen. */
.app-menue{display:contents}
.app-menue[hidden]{display:none}
.app-menue__streifen{display:flex;align-items:center;gap:4px;min-width:0}
/* Rundes Kürzel wie .cr-konto der App; Ziel /app#garage öffnet dort das Konto */
.app-konto{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-left:auto;min-width:44px;height:44px;border-radius:999px;
  background:#E3EAFD;color:var(--akzent-hover);text-decoration:none;
  font-size:16px;font-weight:700;
}
@media(max-width:880px){
  .kopf{flex-wrap:wrap;height:auto;padding:6px 16px;column-gap:10px;row-gap:4px}
  .app-konto{order:2}
  .app-menue__streifen{
    order:6;width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;
  }
}
@media(max-width:479px){
  .hinweis{display:none}
}
@media(max-width:420px){
  .kopf{padding:6px 12px;column-gap:6px}
  .marke{font-size:17px}
}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* --- Startbild (B-658) ---
   Volle Breite, Text unten links darueber. Lesbar wird der Text durch einen
   dunklen Verlauf am Text, nicht durch Weichzeichnen des Bildes. */

.held{
  position:relative;overflow:hidden;
  background:var(--dunkel);color:#fff;
  min-height:min(78vh,760px);
  display:flex;align-items:flex-end;
}
.held-bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 55%;display:block;
}
.held::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,20,.86) 0%,rgba(8,12,20,.78) 50%,rgba(8,12,20,.55) 80%,rgba(8,12,20,.22) 100%);
}
@media(min-width:900px){
  .held::after{
    background:
      linear-gradient(90deg,rgba(8,12,20,.82) 0%,rgba(8,12,20,.70) 45%,rgba(8,12,20,.18) 75%,rgba(8,12,20,0) 100%),
      linear-gradient(to top,rgba(8,12,20,.45) 0%,rgba(8,12,20,0) 45%);
  }
}
.held-rahmen{position:relative;z-index:2;width:100%}
/* Telefon: Bild oben unverdeckt als Ganzes (die Serpentine bleibt sichtbar),
   der Text darunter auf dunklem Grund; der Uebergang ist ein Verlauf. */
@media(max-width:599px){
  .held{display:block;min-height:0}
  .held-bild{position:relative;height:auto;aspect-ratio:4/3;object-position:50% 50%}
  .held::after{
    background:linear-gradient(to bottom,rgba(14,20,31,0) 0,rgba(14,20,31,0) 38vw,rgba(14,20,31,.92) 75vw,var(--dunkel) 75vw);
  }
  .held-text{padding:0 0 36px;margin-top:-40px}
}
.held-text{padding:120px 0 40px;max-width:36em}
@media(min-width:900px){.held-text{padding:140px 0 72px}}
.held h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.held h1 em{color:#B4C6FF}
.held .kernsatz{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.held .kernsatz strong{color:#fff}
.held .knopf-fussnote{color:rgba(255,255,255,.80)}
.held .knopf:focus-visible{outline-color:#fff}

h1{
  font-size:clamp(2rem,5vw,3.3rem);
  line-height:1.1;letter-spacing:-.03em;font-weight:700;
  margin:0 0 20px;
}
h1 em{font-style:normal;color:var(--akzent)}

.kernsatz{
  font-size:clamp(1.05rem,2vw,1.2rem);
  color:var(--text-zweit);
  margin:0 0 28px;max-width:34em;
}
.kernsatz strong{color:var(--text);font-weight:650}

/* Bildschirmfoto der Tagesuebersicht direkt unter dem Startbild */
.app-blick{padding:44px 0}
.app-blick .bildschirm{max-width:860px;margin:0 auto}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;
  background:var(--akzent);color:var(--auf-akzent);
  border-radius:10px;
  font-weight:650;font-size:1rem;text-decoration:none;
  transition:background .15s ease;
}
.knopf:hover{background:var(--akzent-hover)}
.knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.knopf-fussnote{display:block;margin-top:14px;font-size:.88rem;color:var(--text-dritt);max-width:34em}

/* Bildschirmfotos aus der App. Kein Kartenausschnitt darin, deshalb ohne
   ODbL-Quellenangabe. */
.bildschirm{margin:0;min-width:0}
.bildschirm img{
  width:100%;height:auto;display:block;
  border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);
  box-shadow:0 1px 2px rgba(14,20,31,.05),0 8px 24px rgba(14,20,31,.06);
}
.bildschirm figcaption{margin-top:10px;font-size:.88rem;color:var(--text-dritt);max-width:40em}

/* --- Film --- */

.video{
  border-top:1px solid var(--linie);
  padding:44px 0;
}
.video h2{font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em;margin:0 0 20px}
.video .film{margin:0}
.video video{
  width:100%;height:auto;aspect-ratio:16/9;display:block;
  border:1px solid var(--linie);border-radius:12px;background:var(--dunkel);
  box-shadow:0 1px 2px rgba(14,20,31,.05),0 8px 24px rgba(14,20,31,.06);
}
@media(max-width:479px){
  .video{padding:32px 0}
  .video .film{margin:0 -20px}
  .video video{border-radius:0;border-left:none;border-right:none}
}

/* --- Der Unterschied --- */

.unterschied{
  border-top:1px solid var(--linie);
  padding:44px 0;
}
.unterschied h2{
  font-size:clamp(1.35rem,3vw,1.8rem);
  letter-spacing:-.025em;margin:0 0 14px;
}
.unterschied p{color:var(--text-zweit);max-width:44em;margin:0 0 28px}

.gegenueber{
  display:grid;gap:16px;grid-template-columns:1fr;
}
@media(min-width:760px){.gegenueber{grid-template-columns:1fr 1.25fr;gap:20px}}

.karte{
  background:var(--flaeche);
  border:none;
  border-radius:12px;
  padding:22px;
}
/* B-699b: "Anderswo" wieder wie vor B-699 -- weisse Flaeche mit hellem
   Rahmen, kein Hervorheben. "Bei uns" ist die einzige flaechig getoente
   Karte: Markenblau als Hintergrund, weisser Text, sichtbar groesser
   (mehr Innenabstand, groessere Zitat-Schrift, breitere Spalte ab 760px). */
.gegenueber .karte{background:#fff;border:1px solid var(--linie)}
.karte.hervor{
  background:var(--akzent);
  border:none;
  padding:30px;
  box-shadow:0 8px 24px rgba(18,64,221,.18);
  cursor:default;
}
.karte h3{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dritt);margin:0 0 12px;font-weight:650;
}
.karte.hervor h3{color:var(--auf-akzent)}
.karte p{margin:0;color:var(--text);font-size:1.02rem;max-width:none}
.karte.hervor p{color:var(--auf-akzent)}
.karte .zitat{font-size:1.1rem;line-height:1.45;letter-spacing:-.01em}
.karte.hervor .zitat{font-size:1.28rem}
.karte .karte-zusatz{margin-top:12px;color:var(--text-zweit);font-size:.97rem}
.karte.hervor .karte-zusatz{color:rgba(255,255,255,.92)}

/* --- Drei Zusagen --- */

.zusagen{
  border-top:1px solid var(--linie);
  padding:44px 0;
  display:grid;gap:32px;grid-template-columns:1fr;
}
@media(min-width:760px){.zusagen{grid-template-columns:repeat(2,1fr);gap:36px 48px;padding:56px 0}}
.zusagen h2{
  grid-column:1/-1;
  font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em;margin:0;
}
.zusage .nummer{
  display:block;font-size:.75rem;letter-spacing:.1em;
  color:var(--akzent);margin-bottom:12px;font-weight:650;
  font-variant-numeric:tabular-nums;
}
.zusage h3{font-size:1.05rem;font-weight:650;margin:0 0 10px;letter-spacing:-.01em}
.zusage p{margin:0;color:var(--text-zweit);font-size:.97rem}

/* --- Landschaftsbilder (B-658) --- */

.landschaft{margin:32px 0 0}
.landschaft img,.unterwegs img{
  width:100%;height:auto;display:block;border-radius:12px;background:var(--linie);
}
.landschaft img{aspect-ratio:5/2;object-fit:cover;object-position:50% 60%}
@media(max-width:599px){.landschaft img{aspect-ratio:3/2}}

/* Ruhige Bildleiste, keine Galerie: drei Bilder, auf dem Telefon eins breit
   und zwei darunter nebeneinander. */
.unterwegs{
  border-top:1px solid var(--linie);
  padding:44px 0;
  display:grid;gap:16px;grid-template-columns:1fr 1fr;
}
.unterwegs figure{margin:0;min-width:0}
.unterwegs figure:first-child{grid-column:1/-1}
.unterwegs img{aspect-ratio:4/3;object-fit:cover}
.unterwegs figcaption{margin-top:8px;font-size:.88rem;color:var(--text-dritt)}
@media(min-width:760px){
  .unterwegs{grid-template-columns:repeat(3,1fr);gap:20px;padding:56px 0}
  .unterwegs figure:first-child{grid-column:auto}
}

/* --- Bilder aus der App --- */

.bilder{
  border-top:1px solid var(--linie);
  padding:44px 0;
}
.bilder h2{font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em;margin:0 0 8px}
.bilder > p{color:var(--text-dritt);font-size:.92rem;margin:0 0 24px}
.bilder-reihe{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
.bildschirm.schmal{max-width:447px}
@media(min-width:900px){
  .bilder-reihe{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px}
}

/* --- Preise (B-674b) --- */

.preise{
  border-top:1px solid var(--linie);
  padding:44px 0;
  scroll-margin-top:16px;
}
.preise h2{font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em;margin:0 0 16px}
.preise-intro{color:var(--text);max-width:44em;margin:0 0 14px;font-size:1.02rem}
.preise-ehrlich{max-width:44em;margin:0 0 32px}
.preise-ehrlich h3{font-size:.95rem;font-weight:650;margin:0 0 10px;letter-spacing:-.01em}
.preise-ehrlich p{color:var(--text-zweit);font-size:.95rem;margin:0 0 12px}
.preise-ehrlich p:last-child{margin-bottom:0}

.preis-karten{
  display:grid;gap:16px;grid-template-columns:1fr;
  margin:0 0 24px;
}
@media(min-width:760px){.preis-karten{grid-template-columns:repeat(3,1fr);gap:20px}}

.preis-karte{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:12px;
  padding:22px;
  min-width:0;
}
.preis-karte h3{font-size:1.05rem;font-weight:650;margin:0 0 8px;letter-spacing:-.01em}
.preis-betrag{font-size:1.3rem;font-weight:700;color:var(--akzent);margin:0 0 14px;letter-spacing:-.01em}
.preis-monat{display:block;font-size:.82rem;font-weight:500;color:var(--text-dritt);margin-top:2px}
.preis-dazu{margin:0 0 10px;color:var(--text-zweit);font-size:.9rem;font-weight:650}
.preis-karte ul{margin:0;padding:0;list-style:none}
.preis-karte li{padding:4px 0 4px 20px;position:relative;font-size:.92rem;color:var(--text-zweit)}
.preis-karte li::before{
  content:"";position:absolute;left:2px;top:.75em;
  width:6px;height:6px;border-radius:50%;background:var(--linie-kraeftig);
}

.preise-reisepass{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:12px;
  padding:16px 20px;
  color:var(--text-zweit);
  font-size:.95rem;
  margin:0 0 20px;
}
.preise-reisepass strong{color:var(--text)}

.preise-zusagen{color:var(--text-zweit);max-width:44em;margin:0;font-size:.95rem}
.preise-zusagen strong{color:var(--text)}

/* --- Stand --- */

.stand{
  border-top:1px solid var(--linie);
  padding:44px 0 52px;
}
.stand h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 14px}
.stand p{color:var(--text-zweit);max-width:46em;margin:0 0 16px}
.stand ul{
  margin:0 0 26px;padding:0;list-style:none;
  color:var(--text-zweit);max-width:46em;
}
.stand li{padding:5px 0 5px 24px;position:relative;font-size:.97rem}
.stand li::before{
  content:"";position:absolute;left:4px;top:.85em;
  width:7px;height:7px;border-radius:50%;background:var(--linie-kraeftig);
}
.stand li.laeuft::before{background:var(--akzent)}

/* --- Fuss --- */

.fuss{
  border-top:1px solid var(--linie);
  padding:16px 0 36px;
  display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;
  font-size:.88rem;color:var(--text-dritt);
}
.fuss a{
  color:var(--text-zweit);text-decoration:none;
  border-bottom:1px solid var(--linie-kraeftig);
  display:inline-flex;align-items:center;min-height:44px;
}
.fuss a:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
.fuss .luecke{flex:1 1 auto}
.fuss span{display:inline-flex;align-items:center;min-height:44px}
/* B-892: Instagram/TikTok als eigene Zeile im Fuss, Symbole inline (currentColor) */
.fuss .folge{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.fuss a.sozial{gap:6px;min-width:44px}
.fuss a.sozial svg{flex:none}

/* B-775: Knopf zu /preise im Preisabschnitt (Klasse knopf, eigener Abstand) */
.preise-knopfzeile{margin:22px 0}