/* Jost (Google-Fonts-Fallback für Neutra) wird lokal aus /fonts geladen
   (DSGVO-konform, keine Verbindung zu Google-Servern). Eine Variable-Font-
   Datei deckt alle Gewichte 100–900 ab. Bis die lizenzierten Neutra-Webfonts
   in /fonts liegen, springt Jost ein. */
@font-face{
  font-family:'Jost';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('../fonts/Jost-Variable.woff2') format('woff2');
}

/* ------------------------------------------------------------
   CI-Schrift "Neutra" (House Industries, lizenzpflichtig)
   Die lizenzierten Webfont-Dateien bitte in den Ordner /fonts
   legen (Dateinamen siehe fonts/SCHRIFTEN-HINWEISE.md).
   Solange die Dateien fehlen, greift automatisch die
   geometrische Ersatzschrift "Jost".
   ------------------------------------------------------------ */
/* auskommentiert bis lizenzierte Neutra-Dateien vorliegen — bis dahin greift Jost ohne 404.
   'Neutra' bleibt im --font/--font-display-Stack; ohne @font-face macht der Browser keinen Request.
@font-face{
  font-family:'Neutra';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/Neutra-Book.woff2') format('woff2'),
      url('../fonts/Neutra-Book.woff') format('woff');
}
@font-face{
  font-family:'Neutra';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/Neutra-Demi.woff2') format('woff2'),
      url('../fonts/Neutra-Demi.woff') format('woff');
}
@font-face{
  font-family:'Neutra';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/Neutra-Bold.woff2') format('woff2'),
      url('../fonts/Neutra-Bold.woff') format('woff');
}
*/

/* ============================================================
   Schäfer Tours — Designsystem "Modern Coastal"
   Busunternehmen aus St. Peter-Ording · Nordseeküste
   Hell, luftig, modern · Logo-Navy #314f70 · Meerblau-Akzent
   Typo: Bricolage Grotesque (Display) + Plus Jakarta Sans (Text)
   ============================================================ */

:root{
  /* Marke / Maritim */
  --blue:        #314f70;
  --blue-700:    #2a4361;
  --blue-900:    #1f3349;
  --blue-soft:   #586f8b; /* WCAG-AA (≈5.0:1 auf --bg #f4f6f7) — vorher #5f7793 (4.4:1) */
  --blue-tint:   #eaf0f4;
  --blue-tint-2: #d4e2ea;

  /* Meerblau-Akzent */
  --sea:         #3f8fb5;
  --sea-light:   #dcebf1;
  --accent:      #3f8fb5;
  --accent-deep: #2f7395;
  --accent-soft: #dcebf1;

  /* Sand / warm (sparsam) */
  --sand:        #f0e6d2;
  --sand-light:  #f8f3e8;
  --sand-deep:   #e3d4b4;
  --foam:        #eef3f5;
  --gold:        #9a6410; /* WCAG-AA (weißer Text ≥4.5:1, „Beliebt"-Badge) — vorher #d68f3a (2.4:1) */

  /* Flächen */
  --paper:       #ffffff;
  --bg:          #f4f6f7;
  --ink:         #1f2c38;
  --ink-soft:    #54616c;
  --ink-mute:    #636d78; /* WCAG-AA (≈4.6:1 auf --bg #f4f6f7) — vorher #6c7681 (4.0:1) */
  --line:        #e5e9ec;
  --line-soft:   #eef1f3;

  /* Status */
  --ok:          #2f8059;
  --ok-bg:       #e4f1ea;
  --warn:        #8f5c0e; /* WCAG-AA (≈4.6:1 auf --bg #f4f6f7) — vorher #ab6f12 (3.2:1) */
  --warn-bg:     #f9eccf;

  /* Maße */
  --maxw: 1240px;
  --radius:    18px;
  --radius-lg: 30px;
  --radius-sm: 12px;
  --shadow:    0 18px 44px -20px rgba(31,51,73,.32);
  --shadow-lg: 0 36px 80px -28px rgba(31,51,73,.44);
  --shadow-sm: 0 6px 20px -12px rgba(31,51,73,.30);

  --font:        "Neutra", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display:"Neutra", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.66;
  font-size:17.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-deep)}
ul{list-style:none}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  color:var(--blue-900);
  font-weight:700;
  line-height:1.13;
  letter-spacing:-.022em;
}
h1{font-size:clamp(2.3rem,1.5rem + 2.6vw,3.3rem)}
h2{font-size:clamp(1.9rem,1.35rem + 1.8vw,2.6rem)}
h3{font-size:1.36rem;line-height:1.22}
h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft);font-weight:400}
.muted{color:var(--ink-mute)}
.center{text-align:center}

.eyebrow{
  display:inline-block;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1rem;
}
.eyebrow::before{display:none}

/* In-Text-Links */
.text-pad a,.acc-body a,.callout a,p a{
  color:var(--accent-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--blue-tint-2);
}
.text-pad a:hover,.acc-body a:hover,p a:hover{text-decoration-color:var(--accent)}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.container-narrow{max-width:850px;margin:0 auto;padding:0 26px}
.container-booking{max-width:1500px;margin:0 auto;padding:0 26px}
.section{padding:96px 0}
.section--tight{padding:58px 0}
.section--sand{background:#eef1f3}
.section--blue{background:var(--blue-900);color:#dfe7ee}
.section--tint{background:var(--blue-tint)}
.section--foam{background:var(--paper)}
.section--blue h2,.section--blue h3{color:#fff}
.section-head{max-width:680px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto}
.stack>*+*{margin-top:14px}

/* ---------- Topbar ---------- */
.topbar{background:var(--blue-900);color:#aebccb;font-size:.84rem}
.topbar .container{
  display:flex;gap:22px;align-items:center;justify-content:flex-end;
  min-height:42px;flex-wrap:wrap;
}
.topbar a{color:#e4ebf1;font-weight:600;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .tb-left{margin-right:auto;color:#aebccb} /* vorher #8294a6 (3.6:1) → #aebccb (~6.8:1 auf --blue-900) */

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(170%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:14px 26px;
}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{height:46px;width:auto;display:block}
.brand-logo--footer{height:42px}
/* dekoratives Markenquadrat (z. B. Login) */
.brand-mark{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:var(--blue);display:grid;place-items:center;
}
.brand-name{font-family:var(--font-display);font-weight:700;color:var(--blue-900);font-size:1.25rem}
.brand-sub{font-size:.7rem;color:var(--ink-mute);font-weight:600;letter-spacing:.04em}

.nav-menu{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{
  color:var(--ink);font-weight:600;font-size:.96rem;padding:10px 15px;
  border-radius:999px;transition:background .15s ease,color .15s ease;
  text-decoration:none;
}
.nav-links a:hover{background:var(--blue-tint);color:var(--blue-900)}
.nav-links a.active{background:var(--blue);color:#fff}
.nav-cta{display:flex;gap:9px;align-items:center;margin-left:10px}
.nav-toggle{
  display:none;margin-left:auto;background:var(--blue-tint);border:none;
  width:50px;height:48px;border-radius:14px;cursor:pointer;
}
.nav-toggle span{display:block;width:21px;height:2.4px;background:var(--blue);margin:4px auto;border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:700;font-size:1rem;cursor:pointer;
  padding:14px 27px;border-radius:999px;border:2px solid transparent;
  transition:transform .14s ease,box-shadow .2s ease,background .16s ease,color .16s ease;
  text-align:center;line-height:1.2;text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -12px rgba(49,79,112,.7)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(49,79,112,.7)}
.btn-secondary{background:#fff;color:var(--blue);border-color:var(--blue-tint-2)}
.btn-secondary:hover{border-color:var(--blue);background:var(--blue-tint)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#bd7a2c}
.btn-ghost{background:transparent;color:var(--blue);padding:14px 14px}
.btn-ghost:hover{color:var(--accent-deep)}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:var(--blue-tint);transform:translateY(-2px)}

/* ---------- Eigener Dialog (ersetzt native alert/confirm) ---------- */
.site-dialog-back{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(20,34,52,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:sd-fade .16s ease}
.site-dialog{background:#fff;border-radius:var(--radius);max-width:440px;width:100%;
  box-shadow:0 30px 70px -24px rgba(20,34,52,.6);overflow:hidden;
  animation:sd-pop .18s cubic-bezier(.2,.8,.3,1)}
.site-dialog-head{padding:22px 26px 0}
.site-dialog-head h3{margin:0;font-size:1.2rem;color:var(--blue-900);font-family:var(--font-display,var(--font))}
.site-dialog-body{padding:12px 26px 4px;color:var(--ink-soft);line-height:1.55;font-size:1rem}
.site-dialog-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:20px 26px 24px}
.site-dialog-foot .btn{padding:12px 24px;font-size:.98rem}
@keyframes sd-fade{from{opacity:0}to{opacity:1}}
@keyframes sd-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site-dialog-back,.site-dialog{animation:none}}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-lg{padding:17px 34px;font-size:1.06rem}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 70% at 88% 8%,rgba(63,143,181,.16) 0%,rgba(63,143,181,0) 70%),
    radial-gradient(50% 60% at 6% 100%,rgba(49,79,112,.10) 0%,rgba(49,79,112,0) 70%),
    var(--paper);
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:54px;align-items:center;
  padding:80px 0 96px;
}
.hero h1{
  font-size:clamp(2.6rem,1.6rem + 3.2vw,4.05rem);
  line-height:1.07;margin-bottom:22px;font-weight:800;letter-spacing:-.03em;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-bottom:30px;max-width:520px}
.hero-points{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:30px}
.hero-point{
  display:flex;align-items:center;gap:8px;font-weight:600;font-size:.93rem;
  color:var(--blue-900);background:var(--paper);border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.hero-scene{
  position:relative;height:460px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* ---------- Vollbild-Foto-Hero (index.html) ---------- */
.hero-full{
  position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden;
}
.hero-full-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero-full::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Links abgedunkelter "Scrim" fuer die Textlesbarkeit, rechts bleibt das Bild (Bus) sichtbar;
     darunter der vertikale Verlauf, der den unten verankerten Inhalt traegt. */
  background:
    linear-gradient(90deg,
      rgba(13,27,43,.82) 0%,
      rgba(13,27,43,.58) 34%,
      rgba(13,27,43,.16) 64%,
      rgba(13,27,43,0) 88%),
    linear-gradient(176deg,
      rgba(31,79,112,.06) 0%,
      rgba(31,51,73,.40) 46%,
      rgba(16,30,46,.88) 100%);
}
.hero-full .container{position:relative;z-index:2;padding-top:110px;padding-bottom:110px}
.hero-full .eyebrow{color:#eaf4fa}
.hero-full .eyebrow::before{background:#9fd0e4}
.hero-full h1{
  color:#fff;max-width:840px;font-weight:800;margin-bottom:0;
  font-size:clamp(2.7rem,1.5rem + 3.8vw,4.6rem);
  line-height:1.12;letter-spacing:-.022em;
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 34px rgba(0,0,0,.45);
}
.hero-full h1 em{font-style:normal;color:#86cdee}
.hero-full .lead{
  color:#eef4f8;max-width:560px;margin:24px 0 36px;font-size:1.22rem;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 1px 16px rgba(0,0,0,.5);
}
.hero-full .hero-points{margin-top:30px}
.hero-full .hero-point{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
  color:#eaf4fa;box-shadow:none;backdrop-filter:blur(4px);
}
.hero-full .btn-secondary{background:#fff;color:var(--blue-900);border-color:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.hero-full .btn-secondary:hover{background:#eaf0f4;border-color:#eaf0f4;color:var(--blue-900)}

.hero-full .eyebrow{animation:rise .7s ease both}
.hero-full h1{animation:rise .85s ease .08s both}
.hero-full .lead{animation:rise .85s ease .2s both}
.hero-full .btn-row{animation:rise .85s ease .32s both}
.hero-full .hero-points{animation:rise .85s ease .44s both}

@media (max-width:760px){
  .hero-full{min-height:78vh}
  .hero-full .container{padding-top:64px;padding-bottom:54px}
}

/* Küsten-Szene */
.scene{position:relative;width:100%;height:100%;overflow:hidden;background:#dce8ee}
.scene-sky{position:absolute;inset:0;background:linear-gradient(180deg,#d6e8f0 0%,#e9f1f1 60%,#eef2ec 100%)}
.scene-sun{
  position:absolute;top:46px;right:60px;width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle,#fdf3d6 0%,#f6e2ab 70%,rgba(246,226,171,0) 100%);
}
.scene-sea{
  position:absolute;left:0;right:0;bottom:38%;height:16%;
  background:linear-gradient(180deg,#5fa3c2 0%,#6fb0c9 100%);
}
.scene-dune{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,#ece0c2 0%,#e0cfa4 100%);
  border-radius:60% 42% 0 0/100% 80% 0 0;
}
.scene-dune.two{
  bottom:0;height:30%;left:-12%;right:42%;
  background:linear-gradient(180deg,#f3ead2 0%,#e6d8b5 100%);
  border-radius:50% 50% 0 0/100% 100% 0 0;
}
.scene-bus{position:absolute;left:50%;bottom:19%;transform:translateX(-50%);width:44%}
.scene-cap{
  position:absolute;left:18px;bottom:18px;background:var(--blue-900);color:#eaf0f4;
  font-size:.76rem;font-weight:600;padding:8px 15px;border-radius:999px;
}

/* ---------- Trust-Leiste ---------- */
.trust-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:40px 0}
/* Variante mit 4 Trust-Items (z. B. ausflugsfahrten); Mobile-Umbruch erben die
   .trust-grid-Media-Queries weiter unten (3 Spalten ≤1000px, 2 Spalten ≤760px). */
.trust-grid--4{grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:8px 12px}
.trust-item .ico{
  width:58px;height:58px;border-radius:50%;background:var(--blue-tint);
  color:var(--accent-deep);display:grid;place-items:center;
}
.trust-item strong{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--blue-900)}
.trust-item span{font-size:.83rem;color:var(--ink-mute)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-trips{grid-template-columns:repeat(3,1fr)}

/* ---------- Karten ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.card-pad{padding:30px}
.card-pad h3{margin-bottom:8px}

.svc-card{
  position:relative;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .22s ease;
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
/* Ganze Kachel klickbar: card-link spannt eine unsichtbare Overlay-Fläche auf */
.svc-card:has(.card-link){cursor:pointer}
.svc-card .card-link::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
}
.svc-ico{
  width:62px;height:62px;border-radius:18px;
  background:linear-gradient(150deg,#eef4f8 0%,#dce8f0 100%);
  display:grid;place-items:center;color:var(--blue);margin-bottom:20px;
  box-shadow:inset 0 0 0 1px rgba(49,79,112,.08);
}
.svc-ico svg{width:28px;height:28px;display:block}
.svc-card h3{margin-bottom:9px}
.svc-card p{color:var(--ink-soft);font-size:.98rem;flex-grow:1;text-wrap:balance}
.svc-card .card-link{
  font-weight:700;font-size:.95rem;margin-top:14px;display:inline-flex;gap:7px;
  align-items:center;color:var(--accent-deep);
}
.svc-card:hover .card-link{gap:11px}

/* ---------- Ausflugs-Buchungskarte ---------- */
.trip-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .22s ease;
}
.trip-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.media{position:relative;height:210px;overflow:hidden}
.media-label{
  position:absolute;left:18px;bottom:16px;color:#fff;font-weight:700;
  font-family:var(--font-display);font-size:1.2rem;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.media--sea{background:linear-gradient(150deg,#314f70 0%,#5f9bb8 55%,#bfe0e6 100%)}
.media--dune{background:linear-gradient(150deg,#3f6f86 0%,#9fae9a 55%,#e6d6ad 100%)}
.media--sand{background:linear-gradient(150deg,#4f7f96 0%,#a9b196 50%,#e2cf9f 100%)}
.media--sky{background:linear-gradient(150deg,#2a4866 0%,#5f9bb8 58%,#cfe6df 100%)}
.media--town{background:linear-gradient(150deg,#2a4866 0%,#6f93a6 55%,#d6c7a0 100%)}
.media--winter{background:linear-gradient(150deg,#1f3349 0%,#5b86a0 55%,#dde7ec 100%)}
.media-wave{position:absolute;left:0;right:0;bottom:0;height:38px;opacity:.45}
.trip-badges{position:absolute;left:14px;top:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:82%}
.trip-body{padding:24px;display:flex;flex-direction:column;flex-grow:1}
.trip-body h3{font-size:1.28rem;margin-bottom:7px}
.trip-desc{color:var(--ink-soft);font-size:.95rem;margin-bottom:16px}
.trip-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:16px;
  font-size:.88rem;color:var(--ink-soft);
}
.trip-meta .mi{display:flex;align-items:center;gap:7px}
.trip-meta .mi svg{color:var(--accent);flex-shrink:0}
.trip-foot{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:16px}
.price-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-bottom:13px}
.price{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--blue-900);white-space:nowrap}
.price small{font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--ink-mute)}
.seats{font-size:.85rem;font-weight:700;margin-left:auto;text-align:right}
.seats.few{color:var(--warn)}
.seats.ok{color:var(--ok)}
.pay-hint{font-size:.83rem;color:var(--ink-mute);margin:9px 0 13px;display:flex;gap:6px;align-items:center}
.trip-actions{display:flex;gap:9px}
.trip-actions .btn{flex:1;padding:12px 12px;font-size:.93rem}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  padding:5px 12px;border-radius:999px;letter-spacing:.01em;
}
.badge-sand{background:var(--sand);color:#7a6328}
.badge-blue{background:var(--blue-tint);color:var(--blue)}
.badge-sea{background:var(--sea-light);color:var(--accent-deep)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-light{background:rgba(255,255,255,.94);color:var(--blue)}
.badge-pop{background:var(--gold);color:#fff}
.badge-soldout{background:var(--warn-bg);color:var(--warn);border:1px solid var(--sand-deep)}
/* "Bald verfügbar": Trip hat (noch) keinen kommenden Termin — informativ (blau),
   nicht warnend wie ausgebucht. Ersetzt den "Jetzt Platz sichern"-Button. */
.badge-soon{background:var(--blue-tint);color:var(--blue);border:1px solid var(--sea-light)}

/* Sold-out-State auf Trip-Cards: gelber Banner, kein Buchen-Button.
   Wird per JS gesetzt (tripsMarkSoldOut in js/site.js), wenn der Trip in
   Supabase existiert und kein zukünftiger Termin mehr buchbar ist. */
.trip-card.is-sold-out .media{opacity:.85;filter:saturate(.85)}
.trip-card.is-sold-out .price-row .seats{color:var(--warn);font-weight:700}
.trip-card.is-sold-out .trip-actions .btn-primary{display:none}
.trip-card.is-sold-out .trip-actions .btn-secondary{flex:1}

/* ---------- Formulare ---------- */
.field{margin-bottom:18px}
.field label,.lbl{display:block;font-weight:700;font-size:.92rem;color:var(--blue-900);margin-bottom:7px}
.req{color:#c0492f}
.field .hint{font-size:.84rem;color:var(--ink-mute);margin-top:6px}
.hint.hint-warn{color:#c0492f;font-weight:600}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=number],input[type=password],select,textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  padding:13px 16px;border:1.6px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);transition:border-color .14s ease,box-shadow .14s ease;
}
textarea{resize:vertical;min-height:120px}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%232f7395' stroke-width='2.4'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(63,143,181,.16);
}
input.is-error,select.is-error,textarea.is-error{border-color:#c0492f;box-shadow:0 0 0 4px rgba(192,73,47,.13)}
.err-msg{display:none;color:#b4452f;font-size:.85rem;font-weight:600;margin-top:6px}
.field.show-error .err-msg{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
fieldset{border:none}
.choice{
  display:flex;gap:12px;align-items:flex-start;padding:16px 17px;
  border:1.6px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;
  margin-bottom:10px;transition:border-color .14s,background .14s;background:var(--paper);
}
.choice:hover{border-color:var(--blue-soft)}
.choice input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.choice.selected{border-color:var(--accent);background:var(--accent-soft)}
.choice .ch-title{font-weight:700;color:var(--blue-900)}
.choice .ch-desc{font-size:.88rem;color:var(--ink-soft)}
.checkbox{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);cursor:pointer;min-height:44px;padding:6px 0}
.checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow-sm);
}
.form-note{
  font-size:.86rem;color:var(--ink-soft);background:var(--blue-tint);
  border-radius:var(--radius-sm);padding:14px 16px;
}

/* Passwort-Feld mit Sichtbarkeits-Umschalter */
.pw-field{position:relative}
.pw-field input{padding-right:52px}
.pw-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:grid;place-items:center;width:40px;height:40px;
  background:transparent;border:none;border-radius:50%;cursor:pointer;
  color:var(--ink-mute);
}
.pw-toggle:hover{color:var(--accent-deep);background:var(--blue-tint)}
.pw-toggle svg{width:20px;height:20px;display:block;pointer-events:none}
/* offenes Auge ausblenden, wenn Passwort sichtbar (aria-pressed=true) */
.pw-toggle .pw-eye-off{display:none}
.pw-toggle[aria-pressed="true"] .pw-eye{display:none}
.pw-toggle[aria-pressed="true"] .pw-eye-off{display:block}

/* ---------- Custom Dropdown (cs-select) ----------
   Ersetzt jedes <select> visuell durch ein eigenes Dropdown im
   CI-Design. Das native <select> bleibt im DOM erhalten (visuell
   versteckt), damit Formulare, .value, onchange & Validierung
   unverändert weiterfunktionieren. Aktiviert per JS in js/site.js. */
.cs-select{position:relative;width:100%;font-family:inherit;font-size:1rem}
.cs-select.cs-inline{display:inline-block;width:auto;min-width:170px}
.cs-select select.cs-native{
  position:absolute;left:0;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none;clip:rect(0 0 0 0);
  padding:0;margin:0;border:0;
}
.cs-trigger{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 16px;border:1.6px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;
  text-align:left;cursor:pointer;line-height:1.25;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.cs-trigger:hover{border-color:var(--blue-soft)}
.cs-trigger .cs-label{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs-trigger .cs-label.is-placeholder{color:var(--ink-mute)}
.cs-trigger .cs-caret{
  flex:none;width:14px;height:14px;color:var(--accent-deep);
  transition:transform .18s ease;
}
.cs-select.is-open .cs-trigger .cs-caret{transform:rotate(180deg)}
.cs-trigger:focus-visible{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(63,143,181,.16);
}
.cs-select.is-open .cs-trigger{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(63,143,181,.16);
}
.cs-select.is-error .cs-trigger,
.field.show-error .cs-select .cs-trigger,
.cs-select select.cs-native.is-error ~ .cs-trigger{
  border-color:#c0492f;box-shadow:0 0 0 4px rgba(192,73,47,.13);
}
.cs-select.is-disabled .cs-trigger{
  cursor:not-allowed;opacity:.6;background:var(--bg);
}
.cs-listbox{
  position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;
  background:var(--paper);
  border:1.6px solid var(--accent);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  max-height:280px;overflow-y:auto;padding:6px;
  display:none;
}
.cs-listbox.cs-up{top:auto;bottom:calc(100% + 6px)}
.cs-select.is-open .cs-listbox{display:block;animation:cs-fade .14s ease}
@keyframes cs-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cs-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;color:var(--ink);
  cursor:pointer;font-size:.97rem;line-height:1.25;
  transition:background .12s ease,color .12s ease;
}
.cs-option + .cs-option{margin-top:2px}
.cs-option:hover,.cs-option.is-active{
  background:var(--accent-soft);color:var(--accent-deep);
}
.cs-option.is-selected{
  background:var(--blue);color:var(--paper);font-weight:600;
}
.cs-option.is-selected:hover,.cs-option.is-selected.is-active{
  background:var(--blue-700);color:var(--paper);
}
.cs-option.is-disabled{
  color:var(--ink-mute);cursor:not-allowed;background:transparent;opacity:.7;
}
.cs-option .cs-check{
  flex:none;width:14px;height:14px;color:currentColor;opacity:0;
}
.cs-option.is-selected .cs-check{opacity:1}
.cs-group-label{
  padding:8px 12px 4px;color:var(--ink-mute);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  pointer-events:none;
}
/* ---------- Custom Datepicker (cs-date) ----------
   Kalender-Popover im CI-Design. Ersetzt visuell ein <input type=date
   data-cs-date>; das native Input bleibt versteckt im DOM erhalten. */
.cs-date{position:relative;width:100%;font-family:inherit}
.cs-date .cs-date-native{
  position:absolute;left:0;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none;clip:rect(0 0 0 0);
  padding:0;margin:0;border:0;
}
.cs-date-trigger{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 16px;border:1.6px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;
  text-align:left;cursor:pointer;line-height:1.25;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.cs-date-trigger:hover{border-color:var(--blue-soft)}
.cs-date-trigger .cs-date-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-date-trigger.is-placeholder .cs-date-text{color:var(--ink-mute)}
.cs-date-trigger .cs-date-ic{
  flex:none;width:16px;height:16px;color:var(--accent-deep);
  background:currentColor;
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.cs-date-trigger:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(63,143,181,.16);
}
.cs-date.is-open .cs-date-trigger{border-color:var(--accent);box-shadow:0 0 0 4px rgba(63,143,181,.16)}
.field.show-error .cs-date .cs-date-trigger{
  border-color:#c0492f;box-shadow:0 0 0 4px rgba(192,73,47,.13);
}
.cs-date-pop{
  position:absolute;z-index:80;top:calc(100% + 6px);left:0;
  width:300px;max-width:calc(100vw - 40px);
  background:var(--paper);border:1.6px solid var(--accent);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:12px;display:none;
}
.cs-date.is-open .cs-date-pop{display:block;animation:cs-fade .14s ease}
.cs-date-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cs-date-title{font-weight:700;color:var(--blue-900);font-size:.98rem}
.cs-date-nav{
  flex:none;width:32px;height:32px;border-radius:10px;border:1.6px solid var(--line);
  background:var(--paper);color:var(--accent-deep);font-size:1.2rem;line-height:1;
  cursor:pointer;transition:background .12s ease,border-color .12s ease;
}
.cs-date-nav:hover{background:var(--accent-soft);border-color:var(--accent)}
.cs-date-nav:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,143,181,.16)}
.cs-date-wd{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
}
.cs-date-wd span{
  text-align:center;font-size:.72rem;font-weight:700;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.03em;padding:4px 0;
}
.cs-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cs-date-cell{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:9px;color:var(--ink);
  font:inherit;font-size:.9rem;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.cs-date-cell.is-empty{cursor:default}
.cs-date-cell:not(.is-disabled):not(.is-empty):hover{background:var(--accent-soft);color:var(--accent-deep)}
.cs-date-cell.is-today{box-shadow:inset 0 0 0 1.6px var(--accent)}
.cs-date-cell.is-selected{background:var(--blue);color:var(--paper);font-weight:600}
.cs-date-cell.is-selected:hover{background:var(--blue-700);color:var(--paper)}
.cs-date-cell.is-disabled{color:var(--ink-mute);opacity:.4;cursor:not-allowed}
.cs-date-cell:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(63,143,181,.3)}

/* Googles Places-Vorschlagsliste (.pac-container) ans CI angleichen */
.pac-container{
  border:1.6px solid var(--accent);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);margin-top:6px;font-family:inherit;
  background:var(--paper);overflow:hidden;
}
.pac-container:after{display:none}
.pac-item{
  padding:9px 14px;border-top:1px solid #f0f3f5;cursor:pointer;
  font-size:.9rem;line-height:1.35;color:var(--ink);
}
.pac-item:first-child{border-top:none}
.pac-item:hover,.pac-item-selected{background:var(--blue-tint)}
.pac-item-query{font-size:.9rem;color:var(--ink)}
.pac-matched{font-weight:700}

/* ---------- Stepper / Buchung ---------- */
.stepper{display:flex;justify-content:center;gap:8px;margin-bottom:34px;flex-wrap:wrap}
.step-pill{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  background:var(--paper);border:1.6px solid var(--line);font-size:.85rem;font-weight:700;
  color:var(--ink-mute);
}
.step-pill .num{
  width:23px;height:23px;border-radius:50%;background:var(--line);color:var(--paper);
  display:grid;place-items:center;font-size:.78rem;
}
.step-pill.active{border-color:var(--accent);color:var(--blue-900);background:var(--accent-soft)}
.step-pill.active .num{background:var(--accent-deep)}
.step-pill.done{border-color:var(--ok);color:var(--ok)}
.step-pill.done .num{background:var(--ok)}
.booking-step{display:none}
.booking-step.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.step-actions .btn{min-height:44px}

/* Kompakter Mobile-Stepper: Pills ausblenden, Progress-Bar einblenden */
.stepper-mobile{display:none}
@media (max-width:720px){
  .stepper{display:none}
  .stepper-mobile{
    display:block;margin-bottom:24px;
  }
  .stepper-mobile .sm-label{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:6px;
  }
  .stepper-mobile .sm-label .sm-current{color:var(--accent-deep)}
  .stepper-mobile .sm-label .sm-step-name{color:var(--ink-soft);font-weight:500}
  .stepper-mobile .sm-bar{
    height:6px;background:var(--line-soft);border-radius:999px;overflow:hidden;
  }
  .stepper-mobile .sm-fill{
    height:100%;background:var(--accent);border-radius:999px;
    transition:width .3s ease;
  }
}

/* Buchungs-Layout
   - <1100px: 1-spaltig, Sidebar unter der Form
   - 1100-1439px: 2-spaltig, Form+Sidebar-Group horizontal zentriert
   - ≥1440px: 3-spaltig mit Phantom-Spalte links, Form ECHT page-mittig,
              Sidebar rechts daneben */
.bk-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.bk-main{min-width:0}
.bk-side{min-width:0}
@media (min-width:1100px){
  .bk-layout{
    grid-template-columns:minmax(0,850px) 240px;
    justify-content:center;
    gap:28px;
  }
  .bk-side{position:sticky;top:90px}
}
@media (min-width:1440px){
  .bk-layout{
    grid-template-columns:240px minmax(0,850px) 240px;
  }
  .bk-main{grid-column:2}
  .bk-side{grid-column:3}
}

/* Permanente Preisübersicht-Kachel (klein, dezent) */
.bk-running-total{
  padding:14px 18px;background:var(--blue-tint);
  border-radius:var(--radius-sm);border:1px solid var(--blue-tint-2);
}
.bk-side > .bk-running-total{margin-top:0}
@media (max-width:899px){
  .bk-side > .bk-running-total{margin-top:18px}
}
.bk-rt-title{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.bk-rt-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 0;font-size:.95rem;color:var(--ink);
}
.bk-rt-label{color:var(--ink-soft)}
.bk-rt-val{font-variant-numeric:tabular-nums}
.bk-rt-total{
  margin-top:6px;padding-top:10px;border-top:1px solid var(--blue-tint-2);
  font-weight:700;
}
.bk-rt-total .bk-rt-label{color:var(--ink);font-weight:700}
.bk-rt-total .bk-rt-val{color:var(--blue);font-size:1.15rem}

/* Inline-Fehlerbanner im Submit-Step */
.bk-submit-error{
  margin-top:18px;
}
.bk-submit-error a{color:var(--blue);font-weight:700}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion:reduce){
  .booking-step.active{animation:none}
  .stepper-mobile .sm-fill{transition:none}
  *,*::before,*::after{animation-duration:0.001ms !important;transition-duration:0.001ms !important}
}

/* Touch-Feedback / Press-State auf primären Buttons */
.btn-primary:active,.btn-secondary:active{transform:scale(0.98);transition:transform .08s}

/* ---------- Accordion / FAQ ---------- */
.accordion{display:flex;flex-direction:column;gap:12px}
.acc-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;transition:box-shadow .18s ease;
}
.acc-item.open{box-shadow:var(--shadow-sm)}
.acc-head{
  width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
  padding:20px 24px;font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  color:var(--blue-900);display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.acc-head:hover{color:var(--accent-deep)}
.acc-head .pm{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--blue-tint);
  color:var(--accent-deep);display:grid;place-items:center;font-size:1.3rem;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.acc-item.open .pm{transform:rotate(45deg);background:var(--accent);color:#fff}
.acc-body{display:none;padding:0 24px 22px;color:var(--ink-soft)}
.acc-item.open .acc-body{display:block}
.faq-group{margin-bottom:42px}
.faq-group h3{margin-bottom:16px}

/* ---------- Callouts ---------- */
.callout{border-radius:var(--radius);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.callout .ico{flex-shrink:0;margin-top:2px;font-size:1.15rem}
.callout-blue{background:var(--blue-tint);color:var(--blue-900)}
.callout-sand{background:var(--sand-light);border:1px solid var(--sand-deep);color:#6f5c2f}
.callout-ok{background:var(--ok-bg);color:#1f5a3f}
.callout h4{margin-bottom:3px}

.pay-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.pay-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.pay-chip{
  background:var(--blue-tint);border-radius:999px;
  padding:7px 14px;font-size:.84rem;font-weight:600;color:var(--blue);
}

/* ---------- Listen ---------- */
.check-list li,.x-list li{
  position:relative;padding-left:37px;margin-bottom:12px;
  color:var(--ink-soft);font-size:1rem;
}
.check-list li::before{
  content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%232f8059' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l3.5 3.5L11 3'/%3E%3C/svg%3E") center/13px no-repeat;
}
.x-list li::before{
  content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:#f4e3df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23b4452f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3l7 7M10 3l-7 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* Titel + Beschreibung gestapelt, ohne Trennstriche */
.check-list--stacked li{margin-bottom:18px}
.check-list--stacked li b{display:block;color:var(--blue-900);font-weight:700;margin-bottom:2px}
.check-list--stacked li span{display:block;color:var(--ink-mute);font-size:.95rem;line-height:1.5}

/* ---------- Detailseite ---------- */
.detail-hero{
  position:relative;height:400px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);margin-bottom:8px;
  background:var(--bg); /* neutrale Ladefläche, bis JS das Titelbild setzt */
}
/* Titelbild wird per JS gesetzt und dann eingeblendet – kein Flash eines
   falschen Standardbilds mehr (s. fahrt-detail.html / site-data.js). */
#d-hero{opacity:0;transition:opacity .4s ease}
#d-hero.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){#d-hero{transition:none}}
.detail-grid{display:grid;grid-template-columns:1fr 384px;gap:46px;align-items:start}
.booking-box{
  position:sticky;top:108px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;
}
.booking-box .price{font-size:2.2rem}
.fact-list{display:grid;gap:0}
.fact-list .fact{
  display:flex;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;
}
.fact-list .fact:last-child{border-bottom:none}
.fact .fl{color:var(--ink-mute);font-weight:600}
.fact .fv{font-weight:700;color:var(--blue-900);text-align:right}
.timeline{border-left:2px solid var(--blue-tint-2);padding-left:24px;margin-left:8px}
.timeline li{position:relative;padding-bottom:22px}
.timeline li::before{
  content:"";position:absolute;left:-31px;top:3px;width:14px;height:14px;
  border-radius:50%;background:var(--paper);border:3px solid var(--accent);
}
.timeline li:last-child{padding-bottom:0}
.timeline .tl-time{font-family:var(--font-display);font-weight:700;color:var(--accent-deep);font-size:.95rem}
.timeline .tl-title{font-weight:700;color:var(--blue-900)}
.timeline .tl-text{font-size:.94rem;color:var(--ink-soft)}

/* ---------- Fuhrpark ---------- */
.vehicle{
  display:grid;grid-template-columns:330px 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);
}
.vehicle .v-media{min-height:250px;position:relative}
.vehicle .v-body{padding:32px}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:16px}
.spec{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:8px 0;font-size:.93rem}
.spec .sv{font-weight:700;color:var(--blue-900)}
.ph{color:var(--ink-mute);font-style:italic}

/* ---------- Bus-Galerie (Fuhrpark) ---------- */
.bus-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bus-gallery figure{
  margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--blue-tint);box-shadow:var(--shadow-sm);
}
.bus-gallery img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bus-gallery figure:hover img{transform:scale(1.04)}
@media (max-width:820px){.bus-gallery{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bus-gallery{grid-template-columns:1fr}.bus-gallery img{height:210px}}

/* ---------- Ablauf / Flow ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flow-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.flow-step .fn{
  width:44px;height:44px;border-radius:14px;background:var(--blue);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  display:grid;place-items:center;margin-bottom:14px;
}
.flow-step h4{margin-bottom:6px}
.flow-step p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- Testimonials ---------- */
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow-sm);
}
.quote .stars{color:var(--gold);font-size:1rem;letter-spacing:3px;margin-bottom:11px}
.quote p{font-size:1.06rem;line-height:1.55;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.quote .av{
  width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;flex-shrink:0;
}
.quote .who b{display:block;font-size:.94rem;color:var(--blue-900)}
.quote .who span{font-size:.82rem;color:var(--ink-mute)}

/* ---------- Split / CTA ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cta-band{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-900) 100%);
  color:#dbe4ec;border-radius:var(--radius-lg);padding:60px;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;top:-90px;right:-70px;width:300px;height:300px;
  border-radius:50%;background:rgba(63,143,181,.22);pointer-events:none;
}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#bccbd8}
.cta-band .eyebrow{color:#cfe6f0}
.cta-band .eyebrow::before{background:#9fd0e4}
.illu-block{
  border-radius:var(--radius-lg);min-height:360px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;color:var(--ink-mute);padding:18px 0}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--accent-deep)}
.breadcrumb span{margin:0 8px;color:var(--blue-tint-2)}

/* ---------- Pagehead ---------- */
.pagehead{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-900) 100%);
  color:#dbe4ec;padding:62px 0 70px;position:relative;overflow:hidden;
}
.pagehead::after{
  content:"";position:absolute;top:-120px;right:-60px;width:340px;height:340px;
  border-radius:50%;background:rgba(63,143,181,.2);pointer-events:none;
}
.pagehead .container{position:relative;z-index:1}
.pagehead h1{color:#fff;max-width:800px}
.pagehead p{color:#c2cfdb;max-width:680px;font-size:1.14rem;margin-top:14px}
.pagehead .eyebrow{color:#cfe6f0}
.pagehead .eyebrow::before{background:#9fd0e4}
/* Pagehead mit echtem Foto-Hintergrund: Bild über die Variable --ph-img setzen
   (z. B. style="--ph-img:url('bilder/busse/reisebus-kueste.png')").
   Zwei dunkle Verläufe darüber halten die Textlesbarkeit. */
.pagehead--photo{
  padding-top:74px;padding-bottom:84px;
  background-image:
    linear-gradient(90deg,rgba(13,27,43,.88) 0%,rgba(13,27,43,.62) 42%,rgba(13,27,43,.28) 72%,rgba(13,27,43,.08) 100%),
    linear-gradient(180deg,rgba(31,51,73,.18) 0%,rgba(16,30,46,.60) 100%),
    var(--ph-img);
  background-size:cover,cover,cover;
  background-position:center,center,center 38%;
  background-repeat:no-repeat;
}
.pagehead--photo h1{text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 24px rgba(0,0,0,.4)}
.pagehead--photo p{text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Pagehead mit Hintergrundfoto (z. B. Fahrten-Planer): Foto liegt hinter einem
   dunklen Verlauf, damit die weiße Schrift gut lesbar bleibt. Bild über die
   Inline-Variable --ph-img setzen, z. B. style="--ph-img:url('bilder/busse/…')". */
.pagehead--photo{
  background:
    linear-gradient(135deg,rgba(31,51,73,.9) 0%,rgba(31,51,73,.62) 55%,rgba(31,51,73,.8) 100%),
    var(--ph-img,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- Tabelle ---------- */
.tbl{
  width:100%;border-collapse:collapse;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);font-size:.93rem;box-shadow:var(--shadow-sm);
}
.tbl th{background:var(--blue-tint);text-align:left;padding:14px 16px;color:var(--blue-900);font-size:.83rem}
.tbl td{padding:14px 16px;border-top:1px solid var(--line-soft);color:var(--ink-soft)}

/* ---------- Stat ---------- */
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);
}
.stat .sn{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:var(--blue);line-height:1}
.stat .sl{font-size:.89rem;color:var(--ink-mute);font-weight:600;margin-top:6px}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-900);color:#a9b8c6;padding:66px 0 26px;font-size:.93rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;margin-bottom:40px}
.site-footer h3,.site-footer h4{color:#fff;font-size:1rem;margin-bottom:15px;font-family:var(--font-display)}
.site-footer a{color:#a9b8c6;display:block;padding:5px 0;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-brand p{color:#8294a6;font-size:.92rem;margin-top:16px;max-width:330px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.85rem;color:#7c8c9c;
}
.footer-bottom a{display:inline;color:#7c8c9c}
.footer-bottom a:hover{color:#fff}
.footer-bottom a.footer-admin{font-size:.92em}
.footer-contact li{display:flex;gap:9px;margin-bottom:10px;align-items:flex-start}
/* Icon-Box exakt auf Zeilenhöhe (body line-height 1.66) – so zentriert die Maske
   (center/contain) das Glyph vertikal auf der ERSTEN Textzeile, bei ein- wie
   zweizeiligen Einträgen gleich sauber. 1.64em als Fallback, 1lh wenn unterstützt. */
.footer-contact li .ic{margin-top:0;height:1.64em;height:1lh}
/* Kontakt-Links (Tel/E-Mail) erben sonst .site-footer a{display:block;padding:5px 0};
   das Padding schiebt den Link-Text in der Flex-Zeile nach unten und lässt die Icons
   zu hoch wirken. In der Kontaktspalte daher zurücksetzen. */
.footer-contact li a{display:inline;padding:0}

/* ---------- Inline-Icons (SVG-Masken, erben currentColor) ----------
   Ersetzen die alten Dingbat-/Emoji-Glyphen (☎ ✉ 📍 🕐 ✓ ℹ ⚠ …).
   Skalieren mit der Schriftgröße, sind dark-mode-fest und strichkonsistent
   zum übrigen Lucide-Icon-Satz der Seite. */
.ic{
  display:inline-block;width:1.08em;height:1.08em;vertical-align:-.17em;flex:none;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
.ic-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.ic-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
.ic-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.ic-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.ic-info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}
.ic-warn{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
.ic-bus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6'/%3E%3Cpath d='M15 6v6'/%3E%3Cpath d='M2 12h19.6'/%3E%3Cpath d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6'/%3E%3Cpath d='M15 6v6'/%3E%3Cpath d='M2 12h19.6'/%3E%3Cpath d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E")}
.ic-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.ic-bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E")}
.ic-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}

/* ---------- Sticky Mobile-CTA ---------- */
.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);border-top:1px solid var(--line);padding:10px 12px;
  gap:9px;box-shadow:0 -10px 30px -12px rgba(31,51,73,.4);
}
.sticky-cta .btn{flex:1;padding:14px 8px;font-size:.95rem}

/* ---------- Hilfsklassen ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:22px}.mt-3{margin-top:36px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:22px}
.tag-note{
  background:var(--warn-bg);color:var(--warn);font-size:.74rem;font-weight:700;
  padding:3px 9px;border-radius:6px;display:inline-block;
}
.divider{height:1px;background:var(--line);margin:26px 0}
.text-pad p{margin-bottom:1rem}
.anchor-nav{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.anchor-nav a{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:8px 17px;font-size:.86rem;font-weight:600;color:var(--ink-soft);
}
.anchor-nav a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- Karte / Fahrtverlauf ---------- */
/* `position:relative` + `z-index:0` sind Pflicht, nicht Kosmetik: Leaflet
   vergibt intern hohe z-index-Werte (Panes 400, Controls 800, Popups 700).
   Ohne eigenen Stacking-Context landen die im Wurzel-Kontext und schieben
   sich beim Scrollen über den Sticky-Header (`.site-header`, z-index 50).
   Der Kontext hier sperrt sie in die Karte ein. */
#route-map{
  position:relative;z-index:0;
  height:420px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.leaflet-div-icon{background:transparent;border:none}
/* Karten-Pin der Abfahrtsorte (Detailseite): reine Markierung ohne Text —
   Zeit und Name stehen im Popup bzw. in der Liste unter der Karte. */
.route-pin{display:block;width:28px;height:38px;line-height:0}
.route-pin svg{display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.route-pin svg path{fill:var(--blue);stroke:#fff;stroke-width:2}
.route-pin svg circle{fill:#fff}
/* Abfahrtsorte unter der Karte: vorne die Abfahrtszeit (= Beschriftung des
   zugehörigen Karten-Pins); ohne gepflegte Zeit fällt das Badge auf die
   laufende Nummer zurück. */
.stop-list{list-style:none;margin:18px 0 0;padding:0}
.stop-list li{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:14px;row-gap:1px;align-items:start;
  padding:11px 0;border-top:1px solid var(--line);
}
.stop-list li:first-child{border-top:none}
.stop-list .stop-time{
  grid-column:1;grid-row:1 / span 2;align-self:start;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:64px;padding:5px 12px;border-radius:999px;
  background:var(--blue);color:#fff;
  font-family:var(--font);font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stop-list .stop-time--num{min-width:0;width:30px;padding:5px 0;border-radius:50%;font-size:.9rem}
.stop-list .stop-name{grid-column:2;padding-top:4px;font-weight:600;color:var(--blue-900)}
.stop-list .stop-meta{grid-column:2;color:var(--ink-mute);font-size:.9rem}
@media (max-width:560px){
  .stop-list li{column-gap:10px}
  .stop-list .stop-time{min-width:58px;padding:4px 9px;font-size:.95rem}
}
@media (max-width:760px){#route-map{height:320px}}

/* ============================================================
   Fahrten-Planer (fahrtenplaner.html)
   ============================================================ */
/* So funktioniert's */
.planner-how .how-step{
  display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
}
.how-num{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--blue-tint);
  color:var(--blue);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;
}
.planner-how .how-step strong{display:block;color:var(--blue-900);font-family:var(--font-display);margin-bottom:3px}

/* Zweispaltiges Layout: Formular + mitlaufende Übersicht */
/* ---------- Fahrten-Planer: Schritt-für-Schritt-Wizard ---------- */
/* Einspaltig & zentriert – immer nur ein Modul (.planner-step) sichtbar. */
#planner-flow{max-width:760px;margin:0 auto}

/* Fortschrittsanzeige (Desktop: klickbare Punkte / Mobile: Balken) */
.planner-progress{margin-bottom:30px}
.pstep-list{
  list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
}
.pstep{flex:0 0 auto}
.pstep-btn{
  display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:var(--paper);border:1.6px solid var(--line);font:inherit;font-size:.82rem;font-weight:700;
  color:var(--ink-mute);cursor:not-allowed;transition:border-color .14s,background .14s,color .14s;
}
.pstep-num{
  width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--paper);
  display:grid;place-items:center;font-size:.76rem;flex:0 0 auto;
}
.pstep.is-done .pstep-btn{border-color:var(--ok);color:var(--ok);cursor:pointer}
.pstep.is-done .pstep-btn:hover{background:var(--ok-bg)}
.pstep.is-done .pstep-num{background:var(--ok)}
.pstep.is-active .pstep-btn{border-color:var(--accent);color:var(--blue-900);background:var(--accent-soft);cursor:default}
.pstep.is-active .pstep-num{background:var(--accent-deep)}

/* Kompakter Mobile-Fortschritt: Punkte aus, Balken + „X von 7" an */
.pstep-mobile{display:none}
.pstep-bar{height:6px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-bottom:7px}
.pstep-bar span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.pstep-mobile-text{font-size:.85rem;font-weight:700;color:var(--ink)}
.pstep-mobile-text #pstep-title{color:var(--ink-soft);font-weight:500}

/* Schritte: nur der aktive ist sichtbar */
.planner-step{display:none}
.planner-step.is-active{display:block;animation:fade .25s ease}

/* Navigationszeile je Schritt */
.planner-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.planner-nav .btn{min-height:46px}

/* „Ändern"-Links in der Übersicht */
.sum-edit{
  border:none;background:none;font:inherit;font-size:.76rem;font-weight:700;color:var(--sea);
  cursor:pointer;padding:0 0 0 6px;text-decoration:underline;text-underline-offset:2px;
}
.sum-edit:hover{color:var(--accent-deep)}

.planner-card{margin-bottom:24px}
.planner-card:last-child{margin-bottom:0}
.planner-card-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.planner-card-head h2{font-size:1.4rem;margin:0}
.planner-num{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.05rem;
}

/* Routen-Builder */
.route-builder{margin-top:8px}
.route-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:12px}
.route-dot{width:16px;height:16px;border-radius:50%;margin-top:36px;background:var(--blue-soft);border:3px solid var(--paper);box-shadow:0 0 0 1.5px var(--blue-soft)}
.route-row--fixed .route-dot{margin-top:38px}
.route-dot--start{background:var(--sea);box-shadow:0 0 0 1.5px var(--sea)}
.route-dot--end{background:var(--blue);box-shadow:0 0 0 1.5px var(--blue)}
.route-dot--stop{background:var(--paper);box-shadow:0 0 0 2px var(--blue-soft)}
.route-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.route-fields > .field{flex:1 1 100%;margin-bottom:0}
.route-fields > .route-stop-addr{flex:1 1 220px;min-width:0;margin-top:30px}
.route-stay{flex:0 0 118px;display:flex;flex-direction:column}
.route-stay label{font-size:.78rem;font-weight:700;color:var(--blue-900);margin-bottom:5px}
.route-row-actions{display:flex;gap:5px;margin-top:30px}
.route-mini{
  width:34px;height:34px;border-radius:9px;border:1.6px solid var(--line);background:var(--paper);
  color:var(--blue);cursor:pointer;font-size:1rem;line-height:1;transition:all .14s;
}
.route-mini:hover{border-color:var(--blue);background:var(--blue-tint)}
.route-remove:hover{border-color:#c0492f;background:#f4e3df;color:#b4452f}
.route-add{
  display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;margin:4px 0 14px;
  padding:12px;border:1.6px dashed var(--blue-tint-2);border-radius:var(--radius-sm);background:var(--blue-tint);
  color:var(--blue);font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .14s;
}
.route-add:hover{border-color:var(--accent);background:var(--accent-soft)}
.route-map-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px}
.route-map-actions .is-disabled{opacity:.45;pointer-events:none}
.route-map-figures{display:flex;gap:26px;align-items:center;margin-left:auto}
.route-fig{display:flex;flex-direction:column;line-height:1.15}
.route-fig-num{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--blue-900);font-variant-numeric:tabular-nums}
.route-fig-lbl{font-size:.74rem;color:var(--ink-mute);font-weight:600}
.route-note-warn{margin-top:12px;padding:9px 13px;background:var(--warn-bg);color:var(--warn);border-radius:var(--radius-sm);font-size:.84rem;font-weight:600;line-height:1.4}

/* Personen-Zähler */
.counter{display:flex;align-items:stretch;max-width:170px}
.counter-btn{
  flex:0 0 46px;min-height:44px;border:1.6px solid var(--line);background:var(--blue-tint);color:var(--blue-900);
  font-size:1.25rem;font-weight:700;cursor:pointer;line-height:1;transition:all .14s;
}
.counter-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.counter-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.counter-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.counter-btn:disabled{opacity:.4;cursor:not-allowed}
.counter input{border-radius:0;border-left:none;border-right:none;text-align:center;max-width:74px;padding-left:6px;padding-right:6px}

/* Auswahl-Kästchen (Besonderes Gepäck / Zubuchbar) – ordentliches, anklickbares Raster.
   Unter .optgrid gescopt, damit die Regeln die globale .field-label-Regel sicher überschreiben. */
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:2px}
.optgrid .optbox{
  display:flex;align-items:center;gap:12px;margin:0;padding:13px 15px;border:1.6px solid var(--line);
  border-radius:var(--radius-sm);cursor:pointer;font-size:.92rem;font-weight:600;line-height:1.3;
  color:var(--ink-soft);background:var(--paper);transition:border-color .14s,background .14s,color .14s;
}
.optgrid .optbox:hover{border-color:var(--blue-soft)}
.optgrid .optbox input{flex:0 0 auto;width:19px;height:19px;margin:0;accent-color:var(--blue);cursor:pointer}
.optgrid .optbox span{flex:1 1 auto}
.optgrid .optbox:has(input:checked){border-color:var(--blue);background:var(--blue-tint);color:var(--blue-900)}

/* Übersicht / Rechner in der Seitenspalte */
.summary-list .fv{text-align:right;font-size:.92rem;overflow-wrap:anywhere}
.calc-readout{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-top:18px;
}
.calc-item{background:var(--paper);padding:14px;text-align:center;display:flex;flex-direction:column;gap:2px}
.calc-num{font-family:var(--font-display);font-weight:800;font-size:1.18rem;color:var(--blue-900);font-variant-numeric:tabular-nums}
.calc-lbl{font-size:.76rem;color:var(--ink-mute);font-weight:600}
.calc-item--price{background:var(--blue-tint)}
.calc-item--price .calc-num{color:var(--accent-deep)}

/* Homepage-Hinweis auf den Planer */
.planner-teaser{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--blue-tint);border:1px solid var(--blue-tint-2);
  border-radius:var(--radius-lg);padding:24px 30px;
}
.planner-teaser .pt-ico{
  flex:0 0 56px;width:56px;height:56px;border-radius:16px;background:var(--blue);
  color:#fff;display:grid;place-items:center;
}
.planner-teaser .pt-body{flex:1 1 320px}
.planner-teaser h3{margin:0 0 4px}
.planner-teaser p{margin:0;color:var(--ink-soft);font-size:.96rem}
.planner-teaser .pt-cta{flex:0 0 auto}

@media (max-width:720px){
  .pstep-list{display:none}
  .pstep-mobile{display:block}
}
@media (max-width:560px){
  .route-stay{flex:1 1 100%}
  .planner-teaser{padding:22px;gap:16px}
}

/* ---------- Echte Fotos ---------- */
.photo{width:100%;height:100%;object-fit:cover;display:block}
.hero-scene .photo,.illu-block .photo,.media .photo,.v-media .photo{
  position:absolute;inset:0;z-index:0;
}
/* Dunkler Verlauf nur, wenn ein Label/Badge auf dem Bild sitzt (Lesbarkeit) –
   reine Bild-Kacheln ohne Label bleiben unverfälscht hell. */
.media:has(.photo):has(.media-label)::after,
.media:has(.photo):has(.trip-badges)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(transparent,rgba(15,28,42,.6));z-index:1;pointer-events:none;
}
.media .media-label,.media .trip-badges,.v-media .media-label{z-index:2}

/* ---------- Einblend-Animationen ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero h1{animation:rise .7s ease both}
.hero .lead{animation:rise .7s ease .1s both}
.hero .btn-row{animation:rise .7s ease .2s both}
.hero-points{animation:rise .7s ease .3s both}
.hero-scene{animation:rise .9s ease .15s both}
.pagehead .eyebrow{animation:rise .6s ease both}
.pagehead h1{animation:rise .7s ease .08s both}
.pagehead p{animation:rise .7s ease .18s both}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}

/* ---------- Ladeindikator / Spinner ---------- */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);padding:24px}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Icon-Größen-Tokens ---------- */
.icon{width:1.5rem;height:1.5rem;flex:0 0 auto}
.icon-sm{width:1.15rem;height:1.15rem}
.icon-lg{width:2rem;height:2rem}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .spinner{animation:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:56px 0 76px}
  .hero-scene{height:340px}
  .grid-3,.grid-trips,.grid-4{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px}
  .detail-grid{grid-template-columns:1fr;gap:32px}
  .booking-box{position:static}
  .flow{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .vehicle{grid-template-columns:1fr}
  .vehicle .v-media{min-height:200px}
  .split{gap:40px}
  .section{padding:72px 0}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .section{padding:58px 0}
  .brand-logo{height:38px}
  .nav-menu{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-menu{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    position:absolute;top:79px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:16px;
    box-shadow:var(--shadow);
  }
  .nav.open .nav-links{flex-direction:column;gap:2px;width:100%}
  .nav.open .nav-links a{padding:14px}
  .nav.open .nav-cta{flex-direction:column;width:100%;margin-left:0}
  .nav.open .nav-cta .btn{width:100%;padding:14px}
  .grid-2,.grid-3,.grid-trips,.grid-4{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .form-row,.form-row-3,.split,.flow,.footer-grid,.spec-grid{grid-template-columns:1fr}
  .cta-band{padding:38px 26px}
  .form-card{padding:24px}
  .hero-scene{height:260px}
  .detail-hero{height:240px}
  .sticky-cta{display:flex}
  body{padding-bottom:74px}
  .site-footer{padding-bottom:92px}
  .topbar .tb-left{display:none}
}

/* ============================================================
   Feinschliff 2026 — Zugänglichkeit, Politur, Touch
   Zentral gepflegt, wirkt auf allen Seiten.
   ============================================================ */

/* Sichtbarer Tastatur-Fokus (Mausklicks bleiben unauffällig) */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
.btn:focus-visible{outline:3px solid var(--blue-900);outline-offset:3px}
.hero-full .btn:focus-visible,.cta-band .btn:focus-visible,
.pagehead a:focus-visible,.site-footer a:focus-visible,
.btn-light:focus-visible,.btn-outline-light:focus-visible{outline-color:#fff}
.nav-links a:focus-visible{outline-offset:-2px}
/* Formularfelder haben bereits einen eigenen Fokus-Ring */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* Auswahl-Markierung in Markenfarbe */
::selection{background:var(--sea);color:#fff}

/* Nur für Screenreader sichtbar */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Sprunglink zum Inhalt (per JS eingefügt) */
.skip-link{
  position:fixed;top:-70px;left:14px;z-index:200;
  background:var(--blue-900);color:#fff;font-weight:700;text-decoration:none;
  padding:12px 20px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:var(--shadow);transition:top .18s ease;
}
.skip-link:focus{top:0}
/* Sprungziel selbst soll keinen Rahmen zeigen */
[role="main"]:focus,main:focus,[tabindex="-1"]:focus{outline:none}

/* Schönere, ausgewogene Zeilenumbrüche */
h1,h2,h3,h4{text-wrap:balance}
.lead,.trip-desc,.svc-card p,.muted,.acc-body{text-wrap:pretty}
/* Kontaktkarten: kurze 2-Zeiler ausbalancieren statt nur Hurenkinder vermeiden
   (sonst hängt z. B. bei den DB-Öffnungszeiten „… 08:00 bis" allein in Zeile 1) */
.contact-cards .svc-card p{text-wrap:balance}

/* Tabellenziffern: kein Springen bei Preisen & Kennzahlen */
.price,.stat .sn,.booking-box .price,.tbl td,.spec .sv,.fact .fv{font-variant-numeric:tabular-nums}

/* Touch-Ziele zuverlässig groß genug (Apple HIG / Material) */
.btn{min-height:46px}
.btn-sm{min-height:40px}
.nav-links a{min-height:40px;display:inline-flex;align-items:center}
.topbar a{min-height:36px;display:inline-flex;align-items:center;gap:.4em}

/* Karten-Politur: Bild zoomt sanft, Service-Icon färbt sich beim Hover */
.media,.v-media,.illu-block,.hero-scene{background:var(--blue-tint)}
/* Alleinstehende Bilder eckig – damit der Look nicht zu rund wirkt */
.illu-block,.hero-scene,.detail-hero,.bus-gallery figure{border-radius:0}
.trip-card .photo,.card .photo,.illu-block .photo{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.trip-card:hover .photo,.card:hover .photo,.illu-block:hover .photo{transform:scale(1.05)}
.svc-ico{transition:background .2s ease,color .2s ease,transform .2s ease}
.svc-card:hover .svc-ico{background:var(--accent);color:#fff;transform:translateY(-2px)}

/* Aktiver Navigationspunkt (per JS gesetzt) */
.nav-links a[aria-current="page"]{background:var(--blue);color:#fff}

/* Sticky-CTA: iPhone-Sicherheitsbereich beachten */
@supports(padding:max(0px)){
  .sticky-cta{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* Anker nicht hinter der klebenden Navigation verstecken */
:target{scroll-margin-top:100px}

/* Volle Viewporthöhe stabil auf Mobilgeräten (Adressleiste) */
@supports(height:100svh){
  .hero-full{min-height:84svh}
}

/* ---------- Schwebende „Beliebte Fahrten"-Kachel (Startseite) ---------- */
.featured-trips{position:relative;z-index:5;margin-top:-56px;padding-bottom:6px}
.featured-card{
  max-width:1060px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:24px 26px;
}
.featured-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.featured-head .eyebrow{margin-bottom:7px}
.featured-title{font-size:1.28rem;line-height:1.18;margin:0}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Vertikale Karte: großes Bild oben, Infos darunter, Preis als Fußzeile */
.ftrip{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .16s ease,box-shadow .2s ease,transform .16s ease;
}
.ftrip:hover{border-color:var(--blue-soft);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.ftrip-thumb{position:relative;width:100%;height:128px;overflow:hidden;flex-shrink:0;background:var(--blue-tint)}
.ftrip-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ftrip:hover .ftrip-thumb img{transform:scale(1.05)}
/* Hinweis-Badge auf dem Bild (z. B. „Nur noch wenige Plätze") */
.ftrip-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--gold);color:#fff;font-size:.74rem;font-weight:700;
  padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(0,0,0,.45);
}
.ftrip-badge-soldout{background:var(--blue-900)}
.ftrip-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:5px;padding:13px 15px 11px}
.ftrip-title{
  font-family:var(--font-display);font-weight:700;color:var(--blue-900);
  font-size:1.1rem;line-height:1.2;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ftrip-meta{
  font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.35;
}
.ftrip-price{
  font-family:var(--font-display);font-weight:800;color:var(--blue-900);
  font-size:1.4rem;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:9px;padding:10px 15px 13px;
  border-top:1px solid var(--line-soft);
}
.ftrip-old{font-size:1rem;font-weight:600;color:#9aa6b2;text-decoration:line-through}
/* Aktionspreis hebt sich ab (Marken-Navy, etwas größer) */
.ftrip-sale{color:var(--blue-900);font-weight:800;font-size:1.55rem}
.featured-foot{display:flex;justify-content:center;margin-top:20px}
@media (max-width:1000px){
  .featured-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .featured-trips{margin-top:-32px}
  .featured-card{padding:18px 15px;border-radius:var(--radius)}
  .featured-grid{grid-template-columns:1fr}
}

/* ================================================================
   Buchung: Extras-Kacheln (Snacks & Getränke)
   ================================================================ */
/* Extras als aufgeräumte Menü-Liste (eine Zeile je Produkt) */
.extras-grid{
  display:flex;
  flex-direction:column;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  overflow:hidden;
}
.extras-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto auto;
  grid-template-areas:"visual text price stepper";
  align-items:center;
  gap:4px 16px;
  padding:14px 16px;
  transition:background .15s;
}
.extras-card + .extras-card{border-top:1px solid var(--line)}
/* aktive Zeile (Menge > 0) dezent hervorheben */
.extras-card.is-active{background:color-mix(in srgb,var(--sea) 8%,#fff)}
.extras-card .ex-emoji{
  grid-area:visual;
  font-size:1.7rem;line-height:1;text-align:center;
}
.extras-card .ex-image{
  grid-area:visual;
  width:44px;height:44px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
  background:#eef1f4;
}
.extras-card .ex-text{grid-area:text;min-width:0}
.extras-card .ex-name{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.extras-card .ex-desc{font-size:.85rem;color:var(--ink-mute);margin-top:2px}
.extras-card .ex-price{
  grid-area:price;
  font-weight:700;
  color:var(--blue);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .extras-card{
    grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:
      "visual text  stepper"
      "visual price stepper";
    row-gap:2px;
  }
  .extras-card .ex-price{align-self:start}
}
.qty-stepper{
  grid-area:stepper;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 6px;
  background:var(--bg);
}
.qty-stepper .qty-btn{
  width:44px;height:44px;
  border-radius:50%;
  border:0;
  background:#fff;
  cursor:pointer;
  font-size:1.3rem;
  font-weight:600;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  color:var(--ink);
  transition:background .15s,color .15s,transform .08s;
}
.qty-stepper .qty-btn:hover{background:var(--blue);color:#fff}
.qty-stepper .qty-btn:active{transform:scale(0.92)}
.qty-stepper .qty-btn:disabled{opacity:.4;cursor:not-allowed}
.qty-stepper .qty-val{
  min-width:32px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.extras-summary{
  margin-top:14px;
  padding:10px 14px;
  background:var(--blue-tint);
  border-radius:var(--radius-sm);
  text-align:right;
  color:var(--ink);
}
.extras-summary strong{color:var(--blue);font-variant-numeric:tabular-nums}

/* === Fahrt-Detail: Termine-Liste ===================================== */
.termine-liste{list-style:none;padding:0;margin:0 0 16px}
.termine-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
  font-size:.94rem;min-height:44px;
}
.termine-item:last-child{border-bottom:none}
.termine-date{font-weight:700;color:var(--ink);min-width:140px}
.termine-seats{font-size:.85rem;flex-basis:100%;text-align:left}
.termine-item .btn{margin-left:auto;min-height:44px}

@media (max-width:520px){
  .termine-item{flex-direction:column;align-items:stretch;gap:6px;padding:14px 0}
  .termine-date{min-width:0}
  .termine-item .btn{margin-left:0;width:100%;text-align:center}
}

/* =========================================================================
   COOKIE-CONSENT (Banner · Einstellungs-Dialog · Karten-Platzhalter)
   DSGVO-konform: Google Maps lädt erst nach Einwilligung. Nutzt die
   Marken-Tokens aus :root, adaptiert damit automatisch die Homepage-Varianten.
   Markup wird von js/cookie-consent.js erzeugt.
   ========================================================================= */
:root{
  --cc-z-banner: 1000;
  --cc-z-modal:  1100;
}

/* ---------- Einstiegs-Banner (Floating Card, unten zentriert) ---------- */
.cc-banner{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  z-index:var(--cc-z-banner);
  width:min(940px, calc(100vw - 32px));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:26px 30px;
  opacity:0; visibility:hidden;
  transition:opacity .32s ease, transform .38s cubic-bezier(.2,.7,.2,1), visibility .32s;
}
.cc-banner.is-open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.cc-banner__inner{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.cc-banner__icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--sea-light); color:var(--accent-deep);
}
.cc-banner__icon svg{ width:28px; height:28px; }
.cc-banner__body{ flex:1 1 340px; min-width:0; }
.cc-banner__title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.22rem; line-height:1.25; color:var(--blue-900);
  margin:0 0 7px;
}
.cc-banner__text{ font-size:.97rem; line-height:1.6; color:var(--ink-soft); margin:0; }
.cc-banner__text a{ color:var(--accent-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.cc-banner__text a:hover{ color:var(--blue); }
.cc-banner__actions{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  width:100%; margin-top:20px; justify-content:flex-end;
}

/* ---------- Buttons (kompakte Pill-Variante der .btn-Familie) ---------- */
.cc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; font-size:.97rem; cursor:pointer;
  min-height:46px; padding:11px 24px; border-radius:999px;
  border:2px solid transparent; white-space:nowrap; text-decoration:none;
  transition:transform .14s ease, box-shadow .2s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.cc-btn:active{ transform:translateY(1px); }
.cc-btn--primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -12px rgba(49,79,112,.7); }
.cc-btn--primary:hover{ background:var(--blue-700); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(49,79,112,.7); }
.cc-btn--outline{ background:#fff; color:var(--blue); border-color:var(--blue-tint-2); }
.cc-btn--outline:hover{ border-color:var(--blue); background:var(--blue-tint); }
.cc-btn--ghost{ background:transparent; color:var(--ink-soft); border-color:transparent; padding-left:14px; padding-right:14px; }
.cc-btn--ghost:hover{ color:var(--blue); background:var(--blue-tint); }
.cc-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ---------- Einstellungs-Dialog (Modal) ---------- */
.cc-modal{
  position:fixed; inset:0; z-index:var(--cc-z-modal);
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(31,51,73,.52); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
}
.cc-modal.is-open{ opacity:1; visibility:visible; }
.cc-dialog{
  width:min(560px, 100%); max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  transform:translateY(18px) scale(.98); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  -webkit-overflow-scrolling:touch;
}
.cc-modal.is-open .cc-dialog{ transform:translateY(0) scale(1); }
.cc-dialog__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:26px 28px 14px;
}
.cc-dialog__title{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--blue-900); margin:0; }
.cc-dialog__close{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.cc-dialog__close:hover{ background:var(--blue-tint); color:var(--blue); border-color:var(--blue-tint-2); }
.cc-dialog__close svg{ width:18px; height:18px; }
.cc-dialog__intro{ padding:0 28px; font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
.cc-dialog__intro a{ color:var(--accent-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.cc-dialog__body{ padding:0 28px; display:flex; flex-direction:column; gap:14px; }
.cc-dialog__foot{
  position:sticky; bottom:0; margin-top:6px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
  padding:20px 28px 26px;
  background:linear-gradient(to top, var(--paper) 72%, rgba(255,255,255,0));
}

/* ---------- Kategorie-Zeile mit Toggle ---------- */
.cc-cat{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; background:var(--foam);
}
.cc-cat__title{ font-weight:700; color:var(--blue-900); font-size:1.02rem; margin:0 0 4px; display:flex; align-items:center; gap:9px; }
.cc-cat__tag{
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:3px 9px;
}
.cc-cat__desc{ font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin:0; }

/* Toggle-Switch */
.cc-switch{ flex:0 0 auto; position:relative; display:inline-flex; align-items:center; margin-top:2px; }
.cc-switch input{ position:absolute; opacity:0; width:52px; height:30px; margin:0; cursor:pointer; }
.cc-switch__track{
  width:52px; height:30px; border-radius:999px; background:var(--blue-tint-2);
  transition:background .2s ease; position:relative; display:inline-block;
}
.cc-switch__track::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 2px 6px -1px rgba(31,51,73,.4);
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.cc-switch input:checked + .cc-switch__track{ background:var(--accent); }
.cc-switch input:checked + .cc-switch__track::after{ transform:translateX(22px); }
.cc-switch input:focus-visible + .cc-switch__track{ outline:3px solid var(--accent); outline-offset:3px; }
.cc-switch input:disabled{ cursor:not-allowed; }
.cc-switch input:disabled + .cc-switch__track{ background:var(--ok); opacity:.55; }

/* ---------- Karten-Platzhalter (Consent-Gate für Google Maps) ---------- */
.cc-mapgate{
  position:relative; width:100%; height:100%; min-height:280px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:28px 24px;
  color:var(--ink-soft);
  background:
    linear-gradient(rgba(234,240,244,.86), rgba(234,240,244,.86)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(63,143,181,.14) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(63,143,181,.14) 38px 39px),
    var(--blue-tint);
  border-radius:var(--radius-sm);
}
.cc-mapgate__icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:#fff; color:var(--accent-deep); box-shadow:var(--shadow-sm);
}
.cc-mapgate__icon svg{ width:28px; height:28px; }
.cc-mapgate__title{ font-weight:700; color:var(--blue-900); font-size:1.05rem; margin:2px 0 0; }
.cc-mapgate__text{ font-size:.9rem; line-height:1.55; max-width:44ch; margin:0; }
.cc-mapgate__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ---------- Footer-Link „Cookie-Einstellungen" (per JS injiziert) ---------- */
.footer-bottom .cc-footer-link{ background:none; border:0; padding:0; font:inherit; cursor:pointer; color:#7c8c9c; display:inline; }
.footer-bottom .cc-footer-link:hover{ color:#fff; text-decoration:underline; }

/* ---------- Responsiv ---------- */
@media (max-width:640px){
  .cc-banner{
    left:0; right:0; bottom:0; transform:translateY(100%);
    width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    max-height:88vh; overflow-y:auto;
  }
  .cc-banner.is-open{ transform:translateY(0); }
  .cc-banner__actions{ justify-content:stretch; }
  .cc-banner__actions .cc-btn{ flex:1 1 100%; }
  .cc-dialog__foot{ justify-content:stretch; }
  .cc-dialog__foot .cc-btn{ flex:1 1 100%; }
  .cc-cat{ flex-direction:row; }
}

/* Wenn die mobile Sticky-CTA sichtbar ist, Banner darüber anheben */
@media (max-width:860px){
  body.has-sticky-cta .cc-banner.is-open{ bottom:0; }
}

@media (prefers-reduced-motion: reduce){
  .cc-banner, .cc-modal, .cc-dialog, .cc-switch__track::after{ transition:none !important; }
}

/* ---------- Listen-Werkzeugleiste (Partnerbereich: Zeitraum + Ansicht) ----------
   Segment-Schalter für „Diese Woche/Dieser Monat/Zeitraum" und den Wechsel
   zwischen Kachel- und Tabellenansicht. Zustand steckt in aria-pressed, damit
   Screenreader ihn mitbekommen — die Optik hängt an genau diesem Attribut. */
.list-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:20px 0 0}
.seg{display:inline-flex;align-items:center;gap:2px;background:var(--foam);
  border:1px solid var(--line);border-radius:999px;padding:3px}
.seg>button{font:inherit;font-size:.88rem;font-weight:600;line-height:1;cursor:pointer;border:0;
  background:none;color:var(--ink-mute);padding:10px 16px;border-radius:999px;
  transition:background .16s ease,color .16s ease;white-space:nowrap}
.seg>button:hover{color:var(--blue-900)}
.seg>button[aria-pressed="true"]{background:var(--blue);color:#fff}
.seg>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.range-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:14px;
  background:var(--foam);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.range-row .field{margin:0;min-width:180px}

/* ---------- Datumsauswahl im CI (js/datepicker.js) ----------
   Ersetzt den nativen Kalender von <input type="date">: der wird vom Browser
   außerhalb des Dokuments gerendert, ist per CSS nicht erreichbar und folgt
   der Browsersprache statt der Seitensprache. */
.dp{position:relative;display:block}
.dp input{cursor:pointer;padding-right:44px}
.dp-ico{position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--accent-deep);pointer-events:none;display:flex}
.dp-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:296px;max-width:calc(100vw - 40px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:14px}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dp-title{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--blue-900)}
.dp-nav{appearance:none;border:1.4px solid var(--line);background:var(--paper);color:var(--blue);
  width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.dp-nav:hover{border-color:var(--sea);color:var(--sea-deep);background:var(--foam)}
.dp-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:.7rem;font-weight:700;color:var(--ink-mute);text-align:center;
  padding:4px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.dp-day{appearance:none;border:0;background:none;font:inherit;font-size:.9rem;color:var(--ink);
  height:34px;border-radius:9px;cursor:pointer;transition:background .12s ease,color .12s ease}
.dp-day:hover{background:var(--foam);color:var(--blue-900)}
.dp-day:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dp-day.is-out{color:#b3bdc7}
.dp-day.is-today{box-shadow:inset 0 0 0 1.4px var(--sea)}
.dp-day.is-sel{background:var(--blue);color:#fff;font-weight:700;box-shadow:none}
.dp-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line-soft)}
.dp-link{appearance:none;border:0;background:none;font:inherit;font-size:.85rem;font-weight:600;
  color:var(--accent-deep);cursor:pointer;padding:4px 2px;border-radius:6px}
.dp-link:hover{text-decoration:underline}
.dp-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){
  /* Zweites Feld: Popup rechts ausrichten, damit es nicht aus dem Bild läuft. */
  .range-row .field:nth-of-type(2) .dp-pop{left:auto;right:0}
}
.list-count{font-size:.9rem;color:var(--ink-mute);margin:16px 0 0}
@media (max-width:640px){
  .list-toolbar{gap:10px}
  .seg{width:100%}
  .seg>button{flex:1;padding:10px 8px;font-size:.84rem}
}