/* Ems Floßfahrt – Öffentliches Designsystem
   Übernommen aus prototype/index.html (Phase 4), jetzt als eigenständige
   Datei für die echte Anwendung (siehe docs/konzept.md, Abschnitt F). */

/* Schriftarten werden selbst gehostet (Dateien unter /assets/fonts/) statt
   extern über fonts.googleapis.com/fonts.gstatic.com eingebunden – so wird
   beim Seitenaufruf keine IP-Adresse an Google/USA übertragen (siehe
   Abmahnungen wegen extern eingebundener Google Fonts, z. B. LG München I,
   Urt. v. 20.01.2022 – 3 O 17493/20). Beide Dateien sind "Variable Fonts"
   und decken jeweils den kompletten auf der Website genutzten
   Schriftschnitt-Bereich in einer einzigen Datei ab. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
}

:root{
  --bg:#FAF7F1;
  --surface:#FFFFFF;
  --surface-alt:#F1E8D7;
  --border:#E4D8C1;
  --ink:#1B2B33;
  --ink-muted:#5B6B72;
  --navy:#0B2A3D;
  --navy-deep:#071B23;
  --petrol:#1C5A63;
  --ocher:#C97D3D;
  --ocher-deep:#A8622E;
  --ok:#3E7A5E;
  --warn:#B5502A;
  --shadow: 0 10px 28px rgba(11,42,61,0.10);
  --radius: 14px;
  --maxw: 1220px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
h1,h2,h3{
  font-family:"Fraunces","Georgia",serif;
  font-weight:560;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  color:var(--navy);
}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:600;
  color:var(--petrol);
  margin:0 0 10px;
}
.lede{
  font-size:1.05rem;
  color:var(--ink-muted);
  max-width:56ch;
  margin-top:12px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--petrol);}
.btn-ghost-light{border-color:rgba(255,255,255,.65); color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,.14); border-color:#fff;}
.btn-outline{border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-warm{background:var(--ocher); color:#fff;}
.btn-warm:hover{background:var(--ocher-deep);}

/* ---------- Photo placeholder (bis echte Fotos hochgeladen sind) ---------- */
.photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    linear-gradient(160deg, rgba(11,42,61,.72), rgba(28,90,99,.55)),
    repeating-linear-gradient(100deg, #9FC3C7 0 3px, #8FB6BB 3px 6px);
  min-height:220px;
}
.photo::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q 30 10 60 30 T 120 30 T 180 30 T 240 30' fill='none' stroke='white' stroke-opacity='0.14' stroke-width='3'/%3E%3Cpath d='M0 45 Q 30 25 60 45 T 120 45 T 180 45 T 240 45' fill='none' stroke='white' stroke-opacity='0.10' stroke-width='3'/%3E%3C/svg%3E");
  background-size:240px 60px;
  background-repeat:repeat;
  mix-blend-mode:overlay;
}
.photo.has-image{background-size:cover; background-position:center;}
.photo.has-image::after{display:none;}
.photo-tag{
  position:absolute; left:12px; bottom:12px;
  font-size:.72rem;
  color:#fff;
  background:rgba(7,27,35,.55);
  padding:5px 10px;
  border-radius:999px;
  letter-spacing:.02em;
}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:"Fraunces",serif;
  font-weight:600;
  font-size:1.3rem;
  color:var(--navy);
  text-decoration:none;
  letter-spacing:.01em;
}
.logo span{color:var(--ocher);}
nav.primary{display:flex; align-items:center; gap:34px;}
nav.primary a{
  font-size:.94rem; font-weight:500;
  text-decoration:none; color:var(--ink);
  position:relative;
}
nav.primary a:hover{color:var(--petrol);}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.burger span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none; position:fixed; inset:76px 0 0 0; z-index:49; background:var(--bg); padding:8px 24px 24px; overflow-y:auto;}
body.menu-open .mobile-menu{display:block;}
body.menu-open{overflow:hidden;}
.mobile-menu ul{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column;}
.mobile-menu a{display:block; padding:16px 2px; font-size:1.1rem; font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--border);}
/* .mobile-menu a (oben) ist spezifischer als .btn-primary allein und würde
   sonst Textfarbe, Innenabstand und die Trennlinie der Menülinks auf den
   "Termin anfragen"-Button durchdrücken (unsichtbarer Text auf dunklem
   Grund) – hier alles wieder auf die Button-Optik zurücksetzen. */
.mobile-menu .btn{
  width:100%; margin-top:22px;
  display:inline-flex; justify-content:center;
  padding:14px 26px; color:#fff; border-bottom:none;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:flex-end;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(7,27,35,.35) 0%, rgba(7,27,35,.72) 78%, rgba(7,27,35,.88) 100%),
    linear-gradient(160deg, #123B4C, #1C5A63 55%, #2D6E71);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='80' viewBox='0 0 300 80'%3E%3Cpath d='M0 40 Q 37.5 10 75 40 T 150 40 T 225 40 T 300 40' fill='none' stroke='white' stroke-opacity='0.10' stroke-width='4'/%3E%3Cpath d='M0 60 Q 37.5 34 75 60 T 150 60 T 225 60 T 300 60' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='4'/%3E%3C/svg%3E");
  background-size:300px 80px;
}
/* Sobald im Admin-Bereich (/admin/einstellungen/) ein Startbild ausgewählt
   wurde, überschreibt eine Inline-style den Hintergrund (siehe home.php) –
   die Wellen-Musterung darüber wird dann ausgeblendet, das eigene Foto
   übernimmt und wird über die volle Fläche zugeschnitten. */
.hero.has-image{background-size:cover; background-position:center;}
.hero.has-image::before{display:none;}
/* padding-top/-bottom statt der Kurzschreibweise "padding:120px 0 64px" –
   sonst setzt das links/rechts auf 0 und überschreibt (gleiche Spezifität,
   späterer Code gewinnt) das padding:0 24px von .container auf demselben
   Element (<div class="container hero-inner">) – Text klebt dann am
   Bildschirmrand, besonders auffällig auf Mobilgeräten. */
.hero-inner{position:relative; padding-top:120px; padding-bottom:64px; text-align:center;}
.hero-tag{
  display:inline-block;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  padding:6px 14px; border-radius:999px;
  margin-bottom:20px;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem,6vw,4.4rem);
  max-width:16ch;
  margin-left:auto; margin-right:auto;
}
.hero-sub{
  font-size:1.2rem;
  max-width:44ch;
  margin-top:18px;
  margin-left:auto; margin-right:auto;
  color:rgba(255,255,255,.88);
}
.hero-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px;}
.facts-bar{
  margin-top:56px;
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.22);
}
.fact{font-size:.92rem; color:rgba(255,255,255,.85);}
.fact strong{display:block; font-family:"Fraunces",serif; font-size:1.5rem; font-weight:560; color:#fff;}

/* ---------- Sections generic ---------- */
section{padding:96px 0;}
section.alt{background:var(--surface-alt);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
  margin-bottom:44px;
}
.empty-note{
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:24px;
  color:var(--ink-muted);
  font-size:.94rem;
}

/* ---------- Häufige Fragen (/haeufige-fragen/) ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:760px;}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2px 24px; box-shadow:var(--shadow);}
.faq-item summary{
  cursor:pointer; padding:19px 0; font-weight:600; font-size:1.02rem; color:var(--navy);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.5rem; line-height:1; color:var(--ink-muted); flex:none; transition:transform .2s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 0 20px; color:var(--ink); font-size:.96rem; line-height:1.7;}
.faq-item .faq-answer p{margin:0 0 12px;}
.faq-item .faq-answer p:last-child{margin-bottom:0;}
@media (prefers-reduced-motion: reduce){
  .faq-item summary::after{transition:none;}
}

/* ---------- Erlebnis ---------- */
.erlebnis-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}
.erlebnis-text p.lede{margin-top:16px;}
.erlebnis-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.erlebnis-photos .photo:first-child{grid-column:1 / span 2; min-height:180px;}
.erlebnis-photos .photo{min-height:150px;}

/* ---------- Tour cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;
}
.tour-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.tour-card .photo{min-height:190px; border-radius:0;}
.tour-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.tour-meta{display:flex; gap:14px; font-size:.84rem; color:var(--ink-muted);}
.tour-desc{font-size:.92rem; color:var(--ink-muted);}
.tour-price{
  margin-top:auto;
  display:flex; flex-direction:column; gap:14px;
  padding-top:14px; border-top:1px solid var(--border);
}
.tour-price .amount{font-family:"Fraunces",serif; font-size:1.35rem; color:var(--navy); font-weight:560;}
.tour-price .amount small{font-family:"Inter",sans-serif; font-size:.7rem; color:var(--ink-muted); font-weight:500;}
.tour-links{display:flex; gap:10px; flex-wrap:wrap;}
.tour-links .btn{padding:9px 16px; font-size:.84rem; white-space:nowrap;}

/* ---------- Flöße split ---------- */
.boats-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.boat-panel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:420px;
  display:flex; align-items:flex-end;
  color:#fff;
}
.boat-panel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,27,35,.15) 0%, rgba(7,27,35,.85) 100%);
}
.boat-panel.tone-a{background:linear-gradient(160deg,#123B4C,#1C5A63);}
.boat-panel.tone-b{background:linear-gradient(160deg,#2C4A2E,#3E7A5E);}
.boat-panel-content{position:relative; padding:32px; z-index:1;}
.boat-panel h3{color:#fff; font-size:1.9rem;}
.boat-cap{
  display:inline-block; margin-top:10px;
  font-size:.86rem; letter-spacing:.03em;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  padding:5px 12px; border-radius:999px;
}
.boat-panel p.lede{color:rgba(255,255,255,.85); margin-top:14px;}

/* ---------- Themenfahrten ---------- */
.theme-note{
  margin-top:24px;
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:20px 24px;
  font-size:.92rem;
  color:var(--ink-muted);
}
.theme-note strong{color:var(--ink);}

/* ---------- Timeline ---------- */
.timeline{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute; top:11px; left:0; right:0; height:2px;
  background:var(--border);
}
.timeline-item{position:relative; padding-top:34px;}
.timeline-item::before{
  content:"";
  position:absolute; top:0; left:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface-alt);
  border:3px solid var(--ocher);
}
.timeline-year{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:1.5rem; color:var(--navy);
  display:block; margin-bottom:8px;
}
.timeline-item p{color:var(--ink-muted); font-size:.95rem; max-width:36ch;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(160deg, var(--navy), var(--navy-deep));
  color:#fff;
  border-radius:24px;
  padding:64px 48px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.82); max-width:52ch;}

/* ---------- Footer ---------- */
footer.site{
  background:var(--navy-deep);
  color:rgba(255,255,255,.82);
  padding:72px 0 32px;
  font-size:.92rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
footer.site h3{color:#fff; font-size:1rem; font-family:"Inter",sans-serif; font-weight:600; margin-bottom:16px;}
footer.site .logo{color:#fff;}
footer.site .logo span{color:var(--ocher);}
footer.site p.foot-tagline{margin-top:14px; color:rgba(255,255,255,.65); max-width:32ch;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer.site a{text-decoration:none; color:rgba(255,255,255,.82);}
footer.site a:hover{color:var(--ocher);}
.footer-bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.82rem; color:rgba(255,255,255,.55);
}

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(11,42,61,.96);
  backdrop-filter:blur(6px);
}
.sticky-cta a{
  display:block; text-align:center;
  background:var(--ocher); color:#fff;
  padding:13px; border-radius:999px;
  font-weight:600; text-decoration:none;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .erlebnis-grid{grid-template-columns:1fr;}
  .boats-split{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  nav.primary .nav-links{display:none;}
  .burger{display:block;}
  /* Der CTA-Button in der Kopfzeile verschwindet auf Mobilgeräten – sonst
     drängen sich Logo, Button und Hamburger-Menü auf zu wenig Platz
     zusammen. Dieselbe Anfrage-Schaltfläche steckt schon oben im
     aufgeklappten Menü (.mobile-menu) und unten in der .sticky-cta-Leiste,
     ist also nicht verloren. */
  .nav-cta .btn-primary{display:none;}
  section{padding:64px 0;}
  .hero-inner{padding-top:96px; padding-bottom:48px;}
  .timeline{grid-template-columns:1fr; gap:28px;}
  .timeline::before{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .sticky-cta{display:block;}
  body{padding-bottom:74px;}
  .cta-band{padding:48px 24px;}
  /* Ohne diese Verschiebung läge der Barrierefreiheit-Schalter genau auf
     der .sticky-cta-Leiste am unteren Bildschirmrand (siehe Screenshot). */
  .a11y-widget{bottom:calc(74px + 14px);}
}

/* =======================================================================
   Unterseiten: /flossfahrten/, /flossfahrten/{slug}/, /floesse/
   ======================================================================= */

/* ---------- Breadcrumb & Seiten-Banner ---------- */
.breadcrumb{font-size:.84rem; color:var(--ink-muted); display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px;}
.breadcrumb a{text-decoration:none; color:var(--ink-muted);}
.breadcrumb a:hover{color:var(--petrol);}
.page-banner{padding:56px 0 48px; border-bottom:1px solid var(--border); background:var(--surface-alt);}

/* ---------- Filter (Floßfahrten-Übersicht) ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink-muted); font-size:.86rem; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.filter-btn:hover{border-color:var(--petrol); color:var(--petrol);}
.filter-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.tour-card:hover{transform:translateY(-3px);}
.tour-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ocher-deep); font-weight:700;}
.hint{margin-top:40px; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:18px 22px; font-size:.9rem; color:var(--ink-muted);}

/* ---------- Fahrt-Detailseite ---------- */
.detail-hero{position:relative; margin-top:20px; border-radius:var(--radius); overflow:hidden; min-height:46vh;
  background:linear-gradient(160deg, rgba(7,27,35,.55), rgba(7,27,35,.72)), linear-gradient(160deg,#123B4C,#1C5A63 60%,#2D6E71);
  display:flex; align-items:flex-end; color:#fff;}
/* Sobald der Fahrt im Admin-Bereich ein Titelbild zugewiesen ist, überschreibt
   eine Inline-style (siehe tour_detail.php) den Farbverlauf-Hintergrund mit
   demselben Verlauf + Foto – siehe .hero.has-image auf der Startseite. */
.detail-hero.has-image{background-size:cover; background-position:center;}
.detail-hero-inner{position:relative; padding:44px;}
.chip-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.chip{font-size:.82rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); padding:6px 14px; border-radius:999px;}
.detail-hero h1{color:#fff; font-size:clamp(2rem,4.5vw,2.9rem);}

.detail-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:52px; padding:64px 0 88px; align-items:start;}
.detail-main h2{margin-bottom:14px;}
.feature-list{list-style:none; margin:0 0 40px; padding:0; display:grid; gap:12px;}
.feature-list li{display:flex; gap:12px; font-size:.96rem;}
.feature-list li::before{content:"✓"; color:var(--petrol); font-weight:700; flex:none;}
.option-list{list-style:none; margin:0; padding:0; display:grid; gap:0;}
.option-list li{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); font-size:.94rem;}
.option-list li:first-child{border-top:1px solid var(--border);}
.option-list .opt-price{color:var(--ink-muted); font-variant-numeric:tabular-nums;}

.gallery-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px;}
.gallery-strip .photo{min-height:150px;}

.summary-card{position:sticky; top:100px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;}
.summary-price{display:flex; align-items:baseline; gap:8px; margin-bottom:4px;}
.summary-price .amount{font-family:"Fraunces",serif; font-size:2rem; color:var(--navy); font-weight:560;}
.summary-price .unit{color:var(--ink-muted); font-size:.86rem;}
.summary-note{font-size:.84rem; color:var(--ink-muted); margin-bottom:22px;}
.summary-facts{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; border-top:1px solid var(--border); padding-top:20px;}
.summary-facts li{display:flex; justify-content:space-between; font-size:.9rem;}
.summary-facts li span:first-child{color:var(--ink-muted);}
.summary-facts li span:last-child{font-weight:600;}
.summary-card .btn{width:100%; justify-content:center;}
.summary-callout{margin-top:18px; font-size:.8rem; color:var(--ink-muted); text-align:center;}

/* Nur padding-bottom (siehe .hero-inner oben für den Grund) – dieses Element
   trägt ebenfalls die Klasse .container (<div class="container related">). */
.related{padding-bottom:88px;}
.related h2{margin-bottom:28px;}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px;}
.related-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); text-decoration:none; display:block; color:inherit;}
.related-card .photo{min-height:140px; border-radius:0;}
.related-body{padding:18px;}
.related-body h3{font-size:1.05rem; margin-bottom:6px;}
.related-body span{font-size:.86rem; color:var(--ink-muted);}

/* ---------- Flöße-Übersicht ---------- */
.boat-section{padding:88px 0; border-bottom:1px solid var(--border);}
.boat-section:last-of-type{border-bottom:none;}
.boat-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.boat-section.reverse .boat-grid{direction:rtl;}
.boat-section.reverse .boat-grid > *{direction:ltr;}
.boat-photo-main{min-height:360px;}
.boat-photo-sub{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.boat-photo-sub .photo{min-height:130px;}
.boat-cap-badge{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; padding:7px 16px; border-radius:999px; margin:14px 0 18px;}
.badge-a{background:rgba(28,90,99,.12); color:var(--petrol);}
.badge-b{background:rgba(62,122,94,.14); color:#3E7A5E;}
.feature-grid{list-style:none; margin:26px 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.feature-grid li{display:flex; gap:10px; font-size:.94rem; color:var(--ink);}
.feature-grid li::before{content:"✓"; color:var(--petrol); font-weight:700; flex:none;}

@media (max-width:980px){
  .detail-layout{grid-template-columns:1fr;}
  .summary-card{position:static;}
  .gallery-strip{grid-template-columns:1fr 1fr;}
  .boat-grid{grid-template-columns:1fr;}
  .boat-section.reverse .boat-grid{direction:ltr;}
}
@media (max-width:760px){
  .detail-hero{min-height:34vh;}
  .detail-hero-inner{padding:26px;}
  .detail-layout{padding:44px 0 56px; gap:36px;}
  .page-banner{padding:40px 0;}
  .boat-section{padding:56px 0;}
  .feature-grid{grid-template-columns:1fr;}
}

/* ---------- Verfügbarkeitsübersicht (/floesse/) ---------- */
.avail-boats{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px;}
.avail-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}
.avail-card h3{margin-bottom:2px;}
.avail-card .avail-month-current{
  font-family:"Fraunces",serif; font-weight:560; font-size:.95rem; color:var(--ink-muted);
  margin:0 0 18px;
}
.avail-calendar-row{display:flex; align-items:center; gap:10px;}
.avail-arrow{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); color:var(--navy); text-decoration:none; font-size:1rem;
  transition:border-color .15s ease, background .15s ease;
}
.avail-arrow:hover{border-color:var(--petrol); background:var(--surface-alt);}
.avail-arrow-disabled{visibility:hidden;}
.avail-grid{flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-width:0;}
.avail-weekday{font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); text-align:center; padding-bottom:4px;}
.avail-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; border-radius:6px; color:var(--ink);
}
.avail-day.empty{visibility:hidden;}
.avail-day.free{background:rgba(62,122,94,.10); color:var(--ok);}
.avail-day.unavailable{background:rgba(181,80,42,.14); color:var(--warn); font-weight:600; text-decoration:line-through;}
.avail-day.past{color:var(--ink-muted); opacity:.45;}
.avail-legend{display:flex; gap:20px; margin-top:24px; font-size:.84rem; color:var(--ink-muted); flex-wrap:wrap;}
.avail-legend span{display:inline-flex; align-items:center; gap:6px;}
.avail-dot{width:9px; height:9px; border-radius:50%;}
.dot-free{background:var(--ok);}
.dot-unavailable{background:var(--warn);}
.dot-past{background:var(--ink-muted); opacity:.5;}

/* ---------- Barrierefreiheit: Anzeige-Optionen (siehe assets/js/accessibility.js) ---------- */
.a11y-widget{position:fixed; left:18px; bottom:18px; z-index:1000;}
.a11y-toggle{
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(11,42,61,.3); transition:background .15s ease, transform .15s ease;
}
.a11y-toggle:hover{background:var(--petrol); transform:translateY(-1px);}
.a11y-toggle svg{width:24px; height:24px; display:block;}
.a11y-panel{
  position:absolute; left:0; bottom:64px; width:250px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}
.a11y-panel h2{font-size:.92rem; font-family:"Fraunces",serif; font-weight:600; margin:0 0 12px; color:var(--navy);}
.a11y-option{display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:400; margin-bottom:10px; cursor:pointer;}
.a11y-option:last-of-type{margin-bottom:16px;}
.a11y-option input{width:auto; margin:0;}
.a11y-reset{width:100%; padding:9px; border-radius:8px; border:1.5px solid var(--border); background:transparent; color:var(--ink-muted); font-size:.82rem; font-family:inherit; cursor:pointer;}
.a11y-reset:hover{border-color:var(--navy); color:var(--navy);}

/* Zustände, die über den Schalter aktiviert werden – gelten seitenweit,
   solange keine JavaScript-Ausnahme greift. */
html.a11y-large-text{font-size:118%;}
html.a11y-underline-links a{text-decoration:underline;}
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}

html.a11y-contrast{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#EDEDED; --border:#000000;
  --ink:#000000; --ink-muted:#1A1A1A; --navy:#000000; --navy-deep:#000000;
  --petrol:#00474D; --ocher:#7A3D00; --ocher-deep:#5C2D00; --ok:#0B5C33; --warn:#8A0000;
}
html.a11y-contrast .hero{background:#000 !important;}
html.a11y-contrast .hero::before{display:none;}
html.a11y-contrast .a11y-toggle{background:#000; border:2px solid #fff;}