[hidden]{display:none!important}
/* Layout: Schild-Look der Marke. Weißer Grund, Navy-Flächen mit Wellenkante, roter Pinselstrich als einziger Akzent. */
@font-face{font-family:'HPR Montserrat';src:url(fonts/montserrat-latin-var.woff) format('woff');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'HPR Montserrat';src:url(fonts/montserrat-latin-700i.woff) format('woff');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'HPR Source Sans';src:url(fonts/sourcesans3-latin-var.woff) format('woff');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'HPR Marker';src:url(fonts/permanentmarker-latin.woff) format('woff');font-weight:400;font-display:swap}
:root{
  --navy:#01245a; --navy-deep:#011a42; --blau:#0871b4; --hell:#e6f1f9;
  --rot:#c5140e; --rot-dunkel:#9e0f0b;
  --ink:#0d1b33; --leise:#5a6880; --linie:#d7deea; --grund:#eef2f7; --weiss:#ffffff;
  --auf-navy:#cfe1f5;
  --f-titel:'HPR Montserrat','Arial Black',Arial,sans-serif;
  --f-pinsel:'HPR Marker','Comic Sans MS',cursive;
  --f-text:'HPR Source Sans','Segoe UI',Roboto,Arial,sans-serif;
  --breite:1160px;
  color-scheme:light;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--weiss);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.6}
a{color:var(--blau)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--breite);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-titel);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;margin:0;text-wrap:balance;color:var(--navy)}
h2{font-size:clamp(28px,4.2vw,44px)}
h3{font-size:19px}
p{margin:0}

/* Pinselstrich-Etikett wie auf dem Banner */
.pinsel{position:relative;display:inline-block;padding:3px 18px 5px;color:var(--weiss);font-family:var(--f-pinsel);font-size:clamp(17px,2.2vw,22px);letter-spacing:.03em;line-height:1.25;transform:rotate(-1.5deg)}
.pinsel::before{content:"";position:absolute;inset:0;background:var(--rot);filter:url(#ausgefranst);border-radius:3px}
.pinsel span{position:relative}
.marker{font-family:var(--f-pinsel);color:var(--rot);font-size:18px;display:block;margin-bottom:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-titel);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;text-decoration:none;border-radius:12px;padding:15px 22px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn-rot{background:var(--rot);color:var(--weiss);box-shadow:0 4px 0 var(--rot-dunkel)}
.btn-rot:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--rot-dunkel)}
.btn-hell{background:transparent;color:var(--weiss);border-color:rgba(255,255,255,.7)}
.btn-hell:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--weiss);color:var(--navy);border-color:var(--navy)}

/* Kopfzeile */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:20px;padding-block:10px}
.kopf .logo img{height:48px;width:auto;display:block}
.kopf .hauptnav{display:flex;gap:4px;margin-left:auto}
.kopf .hauptnav a{font-family:var(--f-titel);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);text-decoration:none;padding:8px 10px;border-radius:8px}
.kopf .hauptnav a:hover{background:var(--grund)}
.kopf .btn{padding:11px 16px;font-size:13px}
@media (max-width:900px){.kopf .hauptnav{display:none}.kopf .res{margin-left:auto}.kopf .logo img{height:40px}}
@media (max-width:420px){.kopf .res span{display:none}.kopf .res{padding:11px 13px}}

/* Hero */
.hero{position:relative;background:var(--navy-deep) url(img/hero-sonnenuntergang.jpg) center 62%/cover no-repeat;color:var(--weiss);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,26,66,.92) 0%,rgba(1,26,66,.72) 45%,rgba(1,26,66,.15) 100%)}
.hero .wrap{position:relative;padding-block:clamp(56px,9vw,120px) clamp(90px,11vw,140px)}
.hero-text{max-width:620px;display:grid;gap:22px}
.hero h1{color:var(--weiss);font-size:clamp(36px,6.4vw,70px)}
.hero h1 em{font-style:normal;color:#7fc0ee;display:block}
.hero .lead{font-size:clamp(18px,2vw,21px);color:var(--auf-navy);max-width:52ch}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.welle{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(36px,5vw,64px);display:block}
@media (max-width:640px){.hero::before{background:linear-gradient(180deg,rgba(1,26,66,.55) 0%,rgba(1,26,66,.88) 60%)}.hero{background-position:70% center}}

/* Vorteile wie auf dem Bus */
.vorteile{padding-block:28px 56px}
.vorteile ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vorteile li{display:flex;gap:14px;align-items:flex-start;min-width:0}
.vorteile .ico{width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--weiss);display:grid;place-items:center;flex:none}
.vorteile .ico svg{width:28px;height:28px}
.vorteile b{display:block;font-family:var(--f-titel);font-weight:800;color:var(--navy);font-size:15px;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;margin-bottom:4px}
.vorteile span{color:var(--leise);font-size:15px;line-height:1.45;display:block}
@media (max-width:900px){.vorteile ul{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:520px){.vorteile ul{grid-template-columns:1fr}}

/* Abschnitte */
.abschnitt{padding-block:clamp(56px,8vw,96px)}
.abschnitt.grau{background:var(--grund)}
.kopfzeile{display:grid;gap:10px;margin-bottom:36px;max-width:720px}
.kopfzeile p{color:var(--leise);font-size:18px}

/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.schritt{background:var(--weiss);border-radius:18px;overflow:hidden;border:1px solid var(--linie);display:flex;flex-direction:column;min-width:0}
.schritt img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.schritt .inhalt{padding:22px 22px 26px;display:grid;gap:10px}
.schritt .nr{font-family:var(--f-titel);font-weight:900;font-size:15px;color:var(--weiss);background:var(--navy);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.schritt p{color:var(--leise);font-size:16px}
.tipp{margin-top:26px;background:var(--navy);color:var(--auf-navy);border-radius:18px;padding:22px 26px;display:flex;gap:18px;align-items:center}
.tipp .pinsel{flex:none;font-size:18px}
.tipp b{color:var(--weiss)}
@media (max-width:900px){.schritte{grid-template-columns:1fr}.schritt{flex-direction:row}.schritt img{width:40%;aspect-ratio:auto;min-height:100%}}
@media (max-width:560px){.schritt{flex-direction:column}.schritt img{width:100%;aspect-ratio:16/10}.tipp{flex-direction:column;align-items:flex-start}}

/* Schiffe-Band */
.schiffe{position:relative;background:var(--navy-deep) url(img/halunder-jet-nacht.jpg) center 58%/cover;color:var(--auf-navy)}
.schiffe::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,26,66,.94) 0%,rgba(1,26,66,.55) 100%)}
.schiffe .wrap{position:relative;padding-block:clamp(70px,10vw,130px) clamp(48px,6vw,72px);display:grid;gap:18px}
.schiffe h2{color:var(--weiss);max-width:16ch}
.schiffe p{max-width:58ch;font-size:18px}
.schiffliste{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.schiffliste span{font-family:var(--f-titel);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--weiss);border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 14px}
.ziele{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ziele div{border-top:2px solid var(--rot);padding-top:10px;min-width:0}
.ziele b{color:var(--weiss);font-family:var(--f-titel);text-transform:uppercase;font-size:15px;letter-spacing:.03em;display:block}
.ziele span{font-size:15px}
@media (max-width:640px){.ziele{grid-template-columns:1fr}}

/* Preise */
.preise-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.preistafel{background:var(--weiss);border:2px solid var(--navy);border-radius:18px;overflow:hidden}
.preistafel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.preistafel th{background:var(--navy);color:var(--weiss);font-family:var(--f-titel);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:14px 20px}
.preistafel th:last-child,.preistafel td:last-child{text-align:right}
.preistafel td{padding:14px 20px;border-bottom:1px solid var(--linie);font-size:17px}
.preistafel td:last-child{font-family:var(--f-titel);font-weight:900;color:var(--navy);font-size:20px;white-space:nowrap}
.preistafel td small{display:block;color:var(--leise);font-size:14px}
.preistafel tr.gebuehr td{background:var(--hell);border-bottom:none}
.preistafel tr.gebuehr td:last-child{font-size:17px}
.preis-hinweise{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;color:var(--leise);font-size:15.5px}
.preis-hinweise li{display:flex;gap:10px}
.preis-hinweise li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--rot);margin-top:9px}

.rechner{background:var(--navy);color:var(--auf-navy);border-radius:18px;padding:26px;display:grid;gap:16px}
.rechner h3{color:var(--weiss);font-size:20px}
.rechner .felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rechner label{display:grid;gap:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:var(--auf-navy);min-width:0}
.rechner select,.rechner input{font:inherit;font-size:16px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);background:var(--weiss);border:2px solid transparent;border-radius:10px;padding:11px 12px;width:100%;min-width:0}
.rechner select:focus,.rechner input:focus{outline:none;border-color:#7fc0ee}
.rechner .voll{grid-column:1/-1}
.ergebnis{border-top:1px solid rgba(255,255,255,.2);padding-top:16px;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.ergebnis .zeile{display:flex;justify-content:space-between;gap:12px;font-size:15.5px}
.ergebnis .summe{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.ergebnis .summe b{font-family:var(--f-titel);font-weight:900;font-size:38px;color:var(--weiss);line-height:1}
.ergebnis .fehler{color:#ffb3ad;font-weight:600}
.rechner .btn{justify-content:center}
@media (max-width:900px){.preise-grid{grid-template-columns:1fr}}
@media (max-width:420px){.rechner .felder{grid-template-columns:1fr}}

/* Über uns */
.ueber{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ueber figure{margin:0;position:relative}
.ueber figure img{border-radius:20px;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.ueber figure .pinsel{position:absolute;left:18px;bottom:22px}
.ueber .text{display:grid;gap:18px;max-width:60ch;min-width:0}
.ueber .text p{font-size:18px;color:var(--ink)}
.ueber .text p.leise{color:var(--leise);font-size:17px}
.fakten{display:flex;flex-wrap:wrap;gap:10px}
.fakten span{background:var(--hell);color:var(--navy);font-weight:700;border-radius:999px;padding:7px 14px;font-size:14.5px}
@media (max-width:800px){.ueber{grid-template-columns:1fr}.ueber figure img{aspect-ratio:4/3.4}}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:0 22px}
.faq details[open]{border-color:var(--navy)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-family:var(--f-titel);font-weight:800;color:var(--navy);font-size:16.5px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:26px;font-weight:900;color:var(--rot);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--leise);font-size:16.5px;max-width:68ch}

/* Anfahrt & Kontakt */
.kontakt-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.karte{background:var(--grund);border-radius:18px;padding:28px;display:grid;gap:16px;min-width:0}
.karte .adresse{font-family:var(--f-titel);font-weight:900;color:var(--navy);font-size:clamp(22px,3vw,28px);text-transform:uppercase;line-height:1.15}
.karte .adresse small{display:block;font-family:var(--f-text);text-transform:none;font-weight:600;color:var(--leise);font-size:16px;margin-top:6px}
.weg{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:w}
.weg li{display:flex;gap:12px;color:var(--ink);font-size:16px;counter-increment:w}
.weg li::before{content:counter(w);flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--weiss);font-family:var(--f-titel);font-weight:900;font-size:13px;display:grid;place-items:center;margin-top:1px}
.kontaktwege{display:grid;gap:12px;align-content:start}
.kw{display:flex;gap:16px;align-items:center;background:var(--weiss);border:2px solid var(--navy);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);min-width:0}
.kw:hover{background:var(--hell)}
.kw .ico{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--weiss);display:grid;place-items:center;flex:none}
.kw .ico svg{width:24px;height:24px}
.kw small{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;color:var(--leise)}
.kw b{font-family:var(--f-titel);font-weight:800;color:var(--navy);font-size:17px;overflow-wrap:anywhere}
.kw.rot{background:var(--rot);border-color:var(--rot)}
.kw.rot .ico{background:var(--weiss);color:var(--rot)}
.kw.rot small{color:#ffd9d6}.kw.rot b{color:var(--weiss)}
.kw.rot:hover{background:var(--rot-dunkel)}
@media (max-width:860px){.kontakt-grid{grid-template-columns:1fr}}

/* Abschluss-Band */
.cta{position:relative;background:var(--navy);color:var(--auf-navy);overflow:hidden}
.cta .wrap{position:relative;padding-block:clamp(64px,8vw,96px) clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.cta h2{color:var(--weiss);max-width:18ch}
.cta p{margin-top:12px;font-size:18px;max-width:46ch}
.welle-oben{position:absolute;top:-1px;left:0;width:100%;height:clamp(30px,4vw,52px);transform:scaleY(-1)}

/* Fuß */
.fuss{background:var(--navy-deep);color:var(--auf-navy);font-size:15px}
.fuss .wrap{padding-block:40px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.fuss .marke{background:var(--weiss);border-radius:14px;padding:10px 14px;display:inline-block}
.fuss .marke img{height:54px;width:auto;display:block}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center}
.fuss a{color:var(--auf-navy);text-decoration:none}
.fuss a:hover{color:var(--weiss);text-decoration:underline}
.fuss .klein{text-align:right;line-height:1.5}
@media (max-width:800px){.fuss .wrap{grid-template-columns:1fr;text-align:left}.fuss nav{justify-content:flex-start}.fuss .klein{text-align:left}}

/* ---------- Mehrseitig: Menü, Seitenköpfe, Kacheln ---------- */
.kopf .hauptnav a[aria-current="page"]{color:var(--rot);background:var(--grund)}
.kopf .res[aria-current="page"]{box-shadow:0 4px 0 var(--rot-dunkel),0 0 0 3px var(--hell)}
.burger{display:none;background:var(--navy);color:var(--weiss);border:none;border-radius:12px;width:46px;height:46px;place-items:center;cursor:pointer;flex:none}
.burger svg{width:24px;height:24px}
.mobilnav{border-top:1px solid var(--linie);background:var(--weiss)}
.mobilnav .wrap{display:grid;padding-block:8px 16px}
.mobilnav a{font-family:var(--f-titel);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--linie)}
.mobilnav a:last-child{border-bottom:none}
.mobilnav a[aria-current="page"]{color:var(--rot)}
@media (max-width:900px){.burger{display:grid}}
@media (min-width:901px){.mobilnav{display:none!important}}

.seitenkopf{position:relative;background:var(--navy);color:var(--auf-navy);overflow:hidden}
.seitenkopf .wrap{position:relative;padding-block:clamp(40px,6vw,72px) clamp(64px,8vw,100px);display:grid;gap:16px;justify-items:start}
.seitenkopf h1{color:var(--weiss);font-size:clamp(32px,5.4vw,56px)}
.seitenkopf p{font-size:clamp(17px,1.8vw,20px);max-width:58ch}
.seitenkopf + .abschnitt{padding-top:clamp(28px,4vw,48px)}

.marker.hell{color:#ffb3ad}
.abschnitt.kurz{padding-block:clamp(36px,5vw,56px) clamp(70px,9vw,110px)}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kachel{position:relative;display:flex;gap:16px;align-items:flex-start;background:var(--weiss);border:2px solid var(--navy);border-radius:16px;padding:20px 52px 22px 20px;text-decoration:none;color:var(--ink);min-width:0;transition:box-shadow .15s,transform .15s}
.kachel:hover{box-shadow:0 8px 20px rgba(1,36,90,.15);transform:translateY(-2px)}
.kachel .ico{width:50px;height:50px;border-radius:12px;background:var(--navy);color:var(--weiss);display:grid;place-items:center;flex:none}
.kachel .ico svg{width:26px;height:26px}
.kachel .txt{display:grid;gap:3px;min-width:0}
.kachel small{font-family:var(--f-pinsel);color:var(--rot);font-size:15px}
.kachel b{font-family:var(--f-titel);font-weight:900;text-transform:uppercase;color:var(--navy);font-size:20px;line-height:1.1}
.kachel .txt > span{color:var(--leise);font-size:15.5px;line-height:1.45}
.kachel .pfeil{position:absolute;right:16px;top:20px;color:var(--rot)}
.kachel .pfeil svg{width:24px;height:24px}
.kachel.navy{background:var(--navy)}
.kachel.navy b{color:var(--weiss)}
.kachel.navy .txt > span{color:var(--auf-navy)}
.kachel.navy small{color:#ffb3ad}
.kachel.navy .pfeil{color:var(--weiss)}
.kachel .ico.rot{background:var(--rot)}
@media (max-width:900px){.kacheln{grid-template-columns:1fr}}

/* Reservierung */
.res-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.res-haupt{min-width:0}
.formular-rahmen{border:2px solid var(--navy);border-radius:18px;overflow:hidden;background:var(--weiss)}
.formular-rahmen iframe{display:block;width:100%;height:1500px;border:0}
.formular-alt{margin-top:12px;color:var(--leise);font-size:15px}
.vorschau-hinweis{border:2px dashed var(--navy);border-radius:18px;padding:28px;display:grid;gap:16px;justify-items:start;background:var(--hell)}
.vorschau-hinweis .ico{width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--weiss);display:grid;place-items:center}
.vorschau-hinweis .ico svg{width:28px;height:28px}
.vorschau-hinweis b{font-family:var(--f-titel);font-weight:900;color:var(--navy);font-size:20px;text-transform:uppercase}
.vorschau-hinweis p{color:var(--leise);margin-top:6px}
.res-info{background:var(--grund);border-radius:18px;padding:24px;display:grid;gap:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px)}
.res-info .preis-hinweise{margin:0}
@media (max-width:900px){.res-grid{grid-template-columns:1fr}.res-info{position:static}}

/* Über uns: Platzhalter bis der Originaltext da ist */
.platzhalter{border:2px dashed var(--rot);border-radius:16px;padding:24px;background:var(--weiss);display:grid;gap:8px}
.platzhalter b{font-family:var(--f-titel);color:var(--rot);text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.platzhalter p{color:var(--leise)}

.kontakt-foto{width:100%;border-radius:16px;aspect-ratio:16/10;object-fit:cover;display:block}

/* Rechtstexte */
.rechtstext{max-width:760px;display:grid;gap:14px;font-size:16.5px;line-height:1.65;color:var(--ink)}
.rechtstext h2{font-size:clamp(19px,2.4vw,23px);margin-top:22px;text-transform:none;letter-spacing:0}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p,.rechtstext li{overflow-wrap:anywhere}
.rechtstext ul{margin:0;padding-left:20px;display:grid;gap:8px}
.rechtstext strong{color:var(--navy)}
.rechtstext .untertitel{font-family:var(--f-titel);font-weight:800;color:var(--leise)}
.seitenkopf h1{hyphens:manual}

/* Korrekturen Handy: Proportionen */
*,*::before,*::after{box-sizing:border-box}
.hero-text,.hero-text > *{min-width:0;max-width:100%}
.hero h1{font-size:clamp(28px,7.2vw,70px)}
h1,h2{overflow-wrap:break-word}
.rechner select,.rechner input{height:50px;line-height:1.2;display:block;max-width:100%;-webkit-appearance:none;appearance:none}
.rechner select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301245a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.rechner input[type=date]::-webkit-date-and-time-value{text-align:left}

/* Ablauf als Zeitleiste */
.ablauf{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.zeitleiste{list-style:none;margin:0;padding:0;display:grid;min-width:0}
.zeitleiste li{position:relative;display:grid;grid-template-columns:92px 1fr;gap:22px;padding-bottom:34px;min-width:0}
.zeitleiste li:last-child{padding-bottom:0}
.zeitleiste li:not(:last-child)::before{content:"";position:absolute;left:44px;top:100px;bottom:8px;width:3px;border-radius:2px;background:repeating-linear-gradient(to bottom,var(--navy) 0 7px,transparent 7px 13px)}
.zeitleiste .foto{position:relative;width:92px;height:92px;flex:none}
.zeitleiste .foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--navy);display:block;background:var(--hell)}
.zeitleiste .nr{position:absolute;right:-4px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:var(--rot);color:var(--weiss);border:3px solid var(--grund);font-family:var(--f-titel);font-weight:900;font-size:15px;display:grid;place-items:center}
.zeitleiste li > div{padding-top:14px;display:grid;gap:6px;min-width:0}
.zeitleiste p{color:var(--leise);font-size:16.5px;max-width:46ch}
.ablauf-seite{display:grid;gap:18px;min-width:0}
.eckdaten{list-style:none;margin:0;padding:0;background:var(--weiss);border:2px solid var(--navy);border-radius:18px;display:grid}
.eckdaten li{display:flex;align-items:baseline;gap:14px;padding:16px 20px;border-bottom:1px solid var(--linie)}
.eckdaten li:last-child{border-bottom:none}
.eckdaten b{font-family:var(--f-titel);font-weight:900;color:var(--navy);font-size:20px;min-width:96px;white-space:nowrap}
.eckdaten span{color:var(--leise);font-size:15.5px}
.ablauf-seite .tipp{margin-top:0;flex-direction:column;align-items:flex-start}
@media (max-width:860px){.ablauf{grid-template-columns:1fr}}
@media (max-width:480px){
  .zeitleiste li{grid-template-columns:72px 1fr;gap:16px}
  .zeitleiste .foto{width:72px;height:72px}
  .zeitleiste li:not(:last-child)::before{left:34px;top:80px}
  .zeitleiste li > div{padding-top:6px}
  .zeitleiste .nr{width:30px;height:30px;font-size:13px}
}

/* Fuß: alles zentriert */
.fuss .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-block:40px 34px;grid-template-columns:none}
.fuss .marke{display:inline-block;width:auto;padding:12px 18px;border-radius:14px;background:var(--weiss)}
.fuss .marke img{height:58px;width:auto}
.fuss .klein{text-align:center;display:grid;gap:4px}
.fuss nav{justify-content:center;gap:6px 22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);width:100%;max-width:420px}
.fuss nav a{font-size:14px}

/* Karte auf der Anfahrtsseite */
.kartenfeld{position:relative;margin-top:24px;border-radius:18px;overflow:hidden;border:2px solid var(--navy);aspect-ratio:16/9;max-width:100%;background:var(--navy)}
.kartenfeld > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:grayscale(.4)}
.karten-hinweis{position:relative;height:100%;display:grid;place-content:center;justify-items:center;gap:10px;padding:20px;text-align:center;color:var(--weiss)}
.karten-hinweis .ico{width:52px;height:52px;border-radius:50%;background:var(--rot);display:grid;place-items:center}
.karten-hinweis .ico svg{width:28px;height:28px}
.karten-hinweis b{font-family:var(--f-titel);font-weight:900;text-transform:uppercase;font-size:20px}
.karten-hinweis p{max-width:46ch;font-size:14.5px;color:var(--auf-navy)}
.karten-hinweis a{color:var(--weiss)}
.kartenfeld.geladen{background:var(--grund)}
.kartenfeld iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.kartenfeld{aspect-ratio:4/5}}

/* Erklärfilm auf der Startseite */
.abschnitt.film{padding-block:clamp(28px,5vw,64px) clamp(48px,7vw,88px)}
.film-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,6vw,80px);align-items:center}
.film-text{display:grid;gap:16px;max-width:520px;min-width:0}
.film-text p{color:var(--leise);font-size:18px}
.film-punkte{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.film-punkte li{background:var(--hell);color:var(--navy);font-weight:700;border-radius:999px;padding:7px 14px;font-size:14.5px}
.film-rahmen{position:relative;width:min(320px,100%);aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:4px solid var(--navy);background:var(--navy);box-shadow:0 18px 40px rgba(1,36,90,.22);justify-self:center}
.film-rahmen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-start{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--rot);color:var(--weiss);border:none;border-radius:999px;padding:10px 20px 10px 12px;cursor:pointer;box-shadow:0 4px 0 var(--rot-dunkel);font-family:var(--f-titel);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px;white-space:nowrap}
.film-start svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--weiss);color:var(--rot);flex:none}
.film-start span{display:grid;text-align:left;line-height:1.15}
.film-start small{font-family:var(--f-text);text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px;opacity:.9}
@media (max-width:760px){.film-grid{grid-template-columns:1fr}.film-rahmen{width:min(300px,100%)}}

/* Die Robbe: Frage-Antwort-Helfer */
.robbe{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.robbe > *{pointer-events:auto}
.robbe-knopf{width:66px;height:66px;border-radius:50%;background:var(--weiss);border:3px solid var(--navy);padding:0;overflow:hidden;cursor:pointer;box-shadow:0 8px 22px rgba(1,36,90,.28);transition:transform .15s}
.robbe-knopf:hover{transform:scale(1.05)}
.robbe-knopf img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12) translateY(6%)}
.robbe-knopf[aria-expanded="true"]{border-color:var(--rot)}
.robbe-blase{background:var(--weiss);color:var(--navy);border:2px solid var(--navy);border-radius:16px 16px 4px 16px;padding:8px 14px;font-family:var(--f-titel);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(1,36,90,.18)}
.robbe-fenster{width:min(370px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--weiss);border:2px solid var(--navy);border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(1,36,90,.3)}
.robbe-kopf{display:flex;align-items:center;gap:12px;background:var(--navy);color:var(--weiss);padding:12px 12px 12px 14px}
.robbe-bild{width:44px;height:44px;border-radius:50%;background:var(--weiss);object-fit:cover;flex:none}
.robbe-kopf div{display:grid;line-height:1.2;flex:1;min-width:0}
.robbe-kopf b{font-family:var(--f-titel);font-weight:900;text-transform:uppercase;font-size:16px}
.robbe-kopf span{font-size:13px;color:var(--auf-navy)}
.robbe-kopf button{background:transparent;border:none;color:var(--weiss);font-size:28px;line-height:1;width:40px;height:40px;border-radius:10px;cursor:pointer}
.robbe-kopf button:hover{background:rgba(255,255,255,.12)}
.robbe-verlauf{flex:1;overflow-y:auto;padding:16px 14px 6px;display:grid;gap:12px;align-content:start;background:var(--grund);min-height:120px}
.robbe-zeile{display:flex;gap:8px;align-items:flex-end;min-width:0}
.robbe-zeile.gast{justify-content:flex-end}
.robbe-mini{width:30px;height:30px;border-radius:50%;background:var(--weiss);border:1.5px solid var(--navy);object-fit:cover;flex:none}
.robbe-sprech{max-width:82%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.robbe-zeile.bot .robbe-sprech{background:var(--weiss);color:var(--ink);border-bottom-left-radius:4px;border:1px solid var(--linie)}
.robbe-zeile.gast .robbe-sprech{background:var(--navy);color:var(--weiss);border-bottom-right-radius:4px;font-weight:600}
.robbe-sprech b{color:var(--navy)}
.robbe-sprech a{color:var(--blau);font-weight:700}
.robbe-link{display:block;margin-top:8px;color:var(--rot)!important;font-family:var(--f-titel);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.robbe-auswahl{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 14px;background:var(--grund);border-top:1px solid var(--linie);max-height:46%;overflow-y:auto}
.robbe-auswahl:empty{display:none}
.robbe-auswahl button{background:var(--weiss);color:var(--navy);border:2px solid var(--navy);border-radius:999px;padding:7px 13px;font-family:var(--f-text);font-weight:700;font-size:14px;cursor:pointer}
.robbe-auswahl button:hover{background:var(--navy);color:var(--weiss)}
@media (max-width:480px){.robbe-knopf{width:58px;height:58px}}

/* Robbe: Fragen als Liste, alles sichtbar */
.robbe-fenster{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}
.robbe-verlauf{padding:14px;gap:12px}
.robbe-liste{display:grid;gap:6px;padding-left:38px}
.robbe-liste button{display:block;width:100%;text-align:left;background:var(--weiss);color:var(--navy);border:2px solid var(--navy);border-radius:12px;padding:8px 12px;font-family:var(--f-text);font-weight:700;font-size:14.5px;line-height:1.25;cursor:pointer}
.robbe-liste button:hover,.robbe-liste button:focus-visible{background:var(--navy);color:var(--weiss)}
.robbe-zurueck{justify-self:start;margin-left:38px;background:var(--navy);color:var(--weiss);border:none;border-radius:999px;padding:9px 16px;font-family:var(--f-titel);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.robbe-zurueck:hover{background:var(--navy-deep)}
@media (max-height:640px){.robbe-liste button{padding:6px 10px;font-size:14px}}

/* Handy: Abschluss-Band mittig wie der Fuß, Platz für die Robbe */
@media (max-width:760px){
  .fuss .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* PC: Filmrahmen feste Breite (sonst fällt er in der Auto-Spalte auf 0) */
.film-grid{grid-template-columns:minmax(0,1fr) 320px}
.film-rahmen{width:100%;max-width:320px}
@media (max-width:760px){.film-grid{grid-template-columns:1fr}.film-rahmen{max-width:300px}}
.ueber .unterschrift{font-family:var(--f-pinsel);color:var(--rot);font-size:22px}

/* ---------- Weihnachts-Look (nur aktiv mit HPR_WEIHNACHTEN=1) ---------- */
.xmas-band{background:var(--rot);color:var(--weiss);text-align:center;font-family:var(--f-titel);font-weight:800;font-size:13px;letter-spacing:.03em;padding:8px 16px;line-height:1.35}
.weihnachten .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1.6px,transparent 2.4px),
    radial-gradient(circle,rgba(255,255,255,.75) 0 1.1px,transparent 1.8px),
    radial-gradient(circle,rgba(255,255,255,.55) 0 2.4px,transparent 3.2px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 1.3px,transparent 2px);
  background-size:131px 113px,79px 97px,173px 149px,61px 71px;
  background-position:0 0,37px 23px,91px 57px,13px 41px;
  animation:schnee 16s linear infinite}
@keyframes schnee{to{background-position:40px 452px,77px 411px,131px 504px,33px 467px}}
@media (prefers-reduced-motion:reduce){.weihnachten .hero::after{animation:none}}
.weihnachten .robbe::after{content:"";position:absolute;right:-6px;bottom:44px;width:52px;height:46px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M8 40 C14 22 26 8 44 6 C50 6 54 12 52 18 C46 16 40 20 38 28 L36 40 Z' fill='%23c5140e'/%3E%3Cpath d='M44 6 C50 6 54 12 52 18 C48 17 45 18 43 20 C45 14 45 9 44 6Z' fill='%239e0f0b'/%3E%3Crect x='4' y='37' width='38' height='11' rx='5.5' fill='%23fff' stroke='%23d7deea'/%3E%3Ccircle cx='52' cy='20' r='6' fill='%23fff' stroke='%23d7deea'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(12deg)}
.robbe{position:fixed}
.weihnachten .robbe-knopf{border-color:var(--rot)}
@media (max-width:480px){.weihnachten .robbe::after{bottom:38px;width:46px;height:40px}}

/* Social-Media-Knöpfe im Fuß */
.fuss .social{display:flex;justify-content:center;gap:14px}
.fuss .social a{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);color:var(--weiss);display:grid;place-items:center;transition:background .15s}
.fuss .social a:hover{background:var(--rot);border-color:var(--rot)}
.fuss .social svg{width:22px;height:22px}

/* Robbe auffälliger: Sprechblasen-Symbol am Knopf, kurzes Wackeln */
.robbe::before{content:"";position:absolute;right:42px;bottom:42px;width:30px;height:30px;border-radius:50%;pointer-events:none;z-index:1;
  background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/16px no-repeat;
  border:2px solid var(--weiss);box-shadow:0 2px 6px rgba(1,36,90,.3)}
.robbe:has(.robbe-fenster:not([hidden]))::before{display:none}
.robbe-knopf{animation:robbe-wackeln 1s ease-in-out 3s 2}
@keyframes robbe-wackeln{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.robbe-knopf{animation:none}}
@media (max-width:480px){.robbe::before{right:36px;bottom:36px}}