@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}

/* ---------- Farben und Schrift ---------- */
:root{
  --bg:#FFFFFF;--bg2:#F0F6F2;--karte:#FFFFFF;--text:#22313A;--muted:#55636B;--linie:#DFE8E3;
  --akzent:#E2692B;--akzent-h:#C9591F;--gruen:#3C7A55;--gruen-h:#316648;--auf-akzent:#fff;--gruen-hell:#CFE8D8;
  --kopf-schrift:"Nunito","Inter",system-ui,sans-serif;--kopf-gewicht:800;--kopf-spacing:-.02em;
  --radius:26px;--radius-s:18px;--schatten:0 2px 6px rgba(34,49,58,.05),0 14px 36px rgba(34,49,58,.08);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;interpolate-size:allow-keywords}
/* Ohne JS: Anker landen am Überschriftenblock statt an der Abschnittskante (mit JS misst app.js genau) */
section[id]:not(.kontakt){scroll-margin-top:calc(-1*clamp(72px,10vw,136px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--kopf-schrift);font-weight:var(--kopf-gewicht);letter-spacing:var(--kopf-spacing);line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,5vw,58px)}
h3{font-size:clamp(25px,2.6vw,32px);line-height:1.15}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.augenbraue{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);margin-bottom:18px}
.augenbraue::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.einleitung{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:640px}
section{padding-block:clamp(72px,10vw,136px)}
.ico{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-voll{fill:currentColor;stroke:none}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font:600 16px/1 "Inter",sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .18s,box-shadow .18s,color .18s,border-color .18s}
.knopf-akzent{background:var(--akzent);color:var(--auf-akzent);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--akzent) 70%,transparent)}
.knopf-akzent:hover{background:var(--akzent-h)}
.knopf-rand{background:transparent;border:1.5px solid var(--linie);color:var(--text)}
.knopf-rand:hover{border-color:var(--text)}
.knopf-gruen{background:var(--gruen);color:#fff}
.knopf-gruen:hover{background:var(--gruen-h)}
.knopf-klein{height:42px;padding:0 18px;font-size:15px}
.knopf-wa{background:#25D366;color:#0B3D1F;box-shadow:0 8px 22px -10px rgba(37,211,102,.8)}
.knopf-wa:hover{background:#1FBE5C}
:focus:not(:focus-visible){outline:none}
.knopf:focus-visible,.chip:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid color-mix(in srgb,var(--akzent) 55%,transparent);outline-offset:3px}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:50;color:var(--text)}
/* Hintergrund als eigene Ebene: beim Wechsel ändert sich nur die Deckkraft (kein Neuzeichnen, kein Blur-Umschalten) */
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;box-shadow:0 1px 0 var(--linie);opacity:0;transition:opacity .25s ease}
.kopf.fest::before,.kopf.offen::before{opacity:1}
.kopf .wrap{display:flex;align-items:center;gap:20px;height:76px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.marke svg{width:36px;height:40px;flex:none}
.marke b{display:block;font:600 21px/1 var(--kopf-schrift);letter-spacing:-.01em}
.marke small{display:block;font:500 11.5px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-top:5px}
.nav{display:flex;gap:4px}
.nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15.5px;white-space:nowrap;transition:background-color .18s}
.nav a:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.sprache{display:inline-grid;place-items:center;min-width:44px;height:40px;padding:0 10px;border-radius:999px;border:1.5px solid color-mix(in srgb,currentColor 30%,transparent);font:700 14px/1 "Inter",sans-serif;letter-spacing:.06em;text-decoration:none;transition:background-color .18s,border-color .18s}
.sprache:hover{background:color-mix(in srgb,currentColor 10%,transparent);border-color:currentColor}
.kopf-tel{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;text-decoration:none;font-size:15.5px;padding:10px 12px;border-radius:999px}
.kopf-tel:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.marke span{white-space:nowrap}
/* Schmale Desktops (vor allem EN): Telefonnummer steht im Kontaktbereich, die Leiste bleibt einzeilig */
@media (min-width:981px) and (max-width:1199px){.kopf-tel{display:none}.nav a{padding:10px 11px}.kopf .wrap{gap:14px}}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:color-mix(in srgb,currentColor 12%,transparent);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,top .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.kopf.offen .burger span{background:transparent}
.kopf.offen .burger span::before{top:0;transform:rotate(45deg)}
.kopf.offen .burger span::after{top:0;transform:rotate(-45deg)}
.menue{display:none}
@media (max-width:980px){
  .nav,.kopf-tel,.kopf .wrap>.knopf{display:none}
  .burger{display:inline-flex}
  .menue{display:grid;position:fixed;inset:76px 0 0;background:var(--bg);padding:24px clamp(20px,5vw,48px) 120px;align-content:start;gap:6px;
    opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .22s,transform .22s;overflow:auto}
  .kopf.offen .menue{opacity:1;pointer-events:auto;transform:none}
  .menue a:not(.knopf,.sprache-menue){font:500 30px/1.2 var(--kopf-schrift);letter-spacing:var(--kopf-spacing);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--linie);color:var(--text)}
  .menue .knopf{margin-top:12px;font:600 17px/1 "Inter",sans-serif;padding:0 26px}
  .menue .knopf-akzent{margin-top:22px}
  .menue .sprache-menue{margin-top:14px;border:0;font:600 17px/1.2 "Inter",sans-serif;text-align:center;color:var(--gruen)}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:0;background:linear-gradient(180deg,#E8F3EF 0%,#F6FAF8 70%,#fff 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;padding-top:120px;padding-bottom:96px}
.hero h1{font-size:clamp(44px,6.2vw,88px);max-width:12ch;letter-spacing:-.03em;line-height:.98}
.hero h1 em{font-style:normal;color:var(--gruen)}
.hero .einleitung{margin-top:22px;max-width:560px}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-fuss{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:15px;color:var(--muted)}
.hero-fuss span{display:inline-flex;align-items:center;gap:8px}
.hero-fuss .direkt{color:var(--gruen);font-weight:600}
.hero-fuss .bewertungen{display:flex;flex-wrap:wrap;gap:10px 22px;width:100%}
.hero-fuss .bewertung span{display:inline}
.hero-fuss .bewertung strong{color:var(--text);font-weight:700}
.bewertung.bewertung-airbnb{gap:6px}
.bewertung-airbnb .ico{width:17px;height:17px;color:var(--text)}
.bewertung{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.bewertung b{display:inline-grid;place-items:center;min-width:42px;height:32px;padding:0 8px;border-radius:9px 9px 9px 2px;background:#003B95;color:#fff;font:700 15px/1 "Inter",sans-serif}
.hero-bilder-box{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);border:8px solid #fff;background:var(--bg2)}
/* Wischbare Fotoleiste: natives Scroll-Snapping, senkrechtes Scrollen der Seite bleibt frei */
.hero-bilder{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;transition:opacity .3s ease}
.hero-bilder::-webkit-scrollbar{display:none}
.hero-bilder.blende{opacity:0}
.hero-bilder figure{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.hero-bilder img{width:100%;height:100%;object-fit:cover}
.hero-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.72);color:var(--text);cursor:pointer;opacity:.85;transition:opacity .2s,background-color .2s}
.hero-pfeil:hover{background:#fff;opacity:1}
.hero-pfeil .ico{width:20px;height:20px;stroke-width:2.2}
.hero-zurueck{left:12px}.hero-weiter{right:12px}
.hero-punkte{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;padding:0 6px;border-radius:999px;background:rgba(20,32,26,.32)}
.hero-punkte button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hero-punkte i{display:block;width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.6);transition:width .3s,background-color .3s}
.hero-punkte button.an i{width:18px;background:#fff}
@media (hover:none){.hero-pfeil{width:34px;height:34px;opacity:.6}.hero-pfeil .ico{width:17px;height:17px}.hero-zurueck{left:8px}.hero-weiter{right:8px}}
.knopf-hell{background:#fff;border:1.5px solid var(--linie);color:var(--text)}
.knopf-hell:hover{border-color:var(--text)}
@media (min-width:981px){.hero-bilder-box{order:2}}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;padding-top:100px}
  .hero-bilder-box{aspect-ratio:4/3}
}

/* ---------- Fakten ---------- */
.fakten{padding-block:0;position:relative;z-index:2}
.fakten-liste{list-style:none;margin:-48px 0 0;padding:10px;display:grid;grid-template-columns:repeat(6,1fr);background:var(--karte);border-radius:var(--radius);box-shadow:var(--schatten);border:1px solid var(--linie)}
.fakten-liste li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 20px;border-right:1px solid var(--linie)}
.fakten-liste li:last-child{border-right:0}
.fakten-liste .ico{width:26px;height:26px;color:var(--akzent);margin-bottom:8px}
.fakten-liste b{font:600 22px/1.1 var(--kopf-schrift)}
.fakten-liste span{font-size:14px;color:var(--muted);line-height:1.3}
@media (max-width:980px){.fakten-liste{grid-template-columns:repeat(3,1fr)}.fakten-liste li:nth-child(3){border-right:0}.fakten-liste li:nth-child(-n+3){border-bottom:1px solid var(--linie)}}
@media (max-width:560px){.fakten-liste{grid-template-columns:repeat(2,1fr);margin-top:-32px}.fakten-liste li{padding:14px}.fakten-liste li:nth-child(3){border-right:1px solid var(--linie)}.fakten-liste li:nth-child(2n){border-right:0}.fakten-liste li:nth-child(-n+4){border-bottom:1px solid var(--linie)}}

/* ---------- Willkommen ---------- */
.willkommen-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,96px);align-items:center}
.willkommen-text p{font-size:18.5px}
.willkommen-text .unterschrift{font:italic 400 28px/1.2 "Fraunces",Georgia,serif;color:var(--akzent);margin-top:10px}
.collage{position:relative;aspect-ratio:1/1.05}
.collage figure{margin:0;position:absolute;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.collage figure img{width:100%;height:100%;object-fit:cover}
.collage .c1{inset:0 18% 22% 0}
.collage .c2{width:52%;aspect-ratio:1/1.1;right:0;bottom:0;border:6px solid var(--bg)}
.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(56px,7vw,88px)}
.vorteil{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:28px}
.vorteil .ico{width:30px;height:30px;color:var(--gruen);margin-bottom:16px}
.vorteil h3{font-size:24px;margin-bottom:8px}
.vorteil p{color:var(--muted);margin:0;font-size:16px}
@media (max-width:860px){.willkommen-raster{grid-template-columns:1fr}.vorteile{grid-template-columns:1fr}}

/* ---------- Wohnung / Räume ---------- */
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.raum-nav{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.97);margin-bottom:24px;border-bottom:1px solid var(--linie)}
.raum-nav .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.raum-nav .wrap::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linie);background:var(--karte);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.chip:hover{border-color:var(--text)}
.chip.an{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.raum{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--linie);scroll-margin-top:calc(65px - clamp(40px,5vw,64px))}
.raum:first-of-type{border-top:0}
.raum-text{position:sticky;top:157px;align-self:start}
.raum-nr{font:500 14px/1 "Inter",sans-serif;color:var(--muted);letter-spacing:.1em;display:block;margin-bottom:14px}
.raum-text h3{margin-bottom:14px}
.raum-text p{color:var(--muted)}
.merkmale{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.merkmale li{display:inline-flex;align-items:center;gap:7px;font-size:14px;line-height:1.3;padding:6px 13px 6px 10px;border-radius:999px;background:var(--bg2);color:var(--text)}
.merkmale .ico{width:17px;height:17px;color:var(--gruen);stroke-width:1.8}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,11vw,160px);gap:12px}
.galerie button{position:relative;padding:0;border:0;border-radius:var(--radius-s);overflow:hidden;cursor:zoom-in;background:var(--bg2);isolation:isolate}
.galerie button img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.galerie button:hover img{transform:scale(1.045)}
.galerie button:first-child{grid-column:span 4;grid-row:span 3}
.galerie button:nth-child(n+6){display:none}
.galerie .mehr::after{content:attr(data-mehr);position:absolute;inset:0;display:grid;place-items:center;background:rgba(31,58,44,.55);color:#fff;font:600 20px/1 "Inter",sans-serif;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.galerie[data-anzahl="2"] button:nth-child(2){grid-column:span 4;grid-row:span 2}
.galerie[data-anzahl="3"] button:nth-child(n+2){grid-column:span 2}
@media (max-width:860px){
  .raum{grid-template-columns:1fr;gap:18px}
  .raum-text{position:static}
  .galerie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(-1*clamp(20px,5vw,48px));padding-inline:clamp(20px,5vw,48px);scrollbar-width:none;scroll-padding-inline:clamp(20px,5vw,48px)}
  .galerie::-webkit-scrollbar{display:none}
  .galerie button,.galerie button:first-child,.galerie[data-anzahl] button:nth-child(n){flex:0 0 84%;aspect-ratio:4/3;scroll-snap-align:start;display:block;grid-column:auto;grid-row:auto}
  .galerie .mehr::after{display:none}
}
.wisch-hinweis{display:none;font-size:13.5px;color:var(--muted);margin-top:10px;align-items:center;gap:8px}
@media (max-width:860px){.wisch-hinweis{display:flex}}

/* ---------- Inklusive ---------- */
.inklusive{background:var(--gruen);color:#fff;border-radius:var(--radius);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.inklusive h3{font-size:clamp(28px,3.4vw,42px)}
.inklusive ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.inklusive li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px}
.inklusive li .ico{color:var(--gruen-hell);margin-top:3px}
@media (max-width:760px){.inklusive{grid-template-columns:1fr}.inklusive ul{grid-template-columns:1fr}}

/* ---------- ERIKA ---------- */
.erika{background:var(--bg2)}
.erika-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.erika .galerie button:first-child{grid-column:span 4;grid-row:span 3}
.preis-kurz{display:flex;align-items:baseline;gap:8px;margin:20px 0 26px}
.preis-kurz b{font:600 44px/1 var(--kopf-schrift);white-space:nowrap}
.erika .merkmale li{background:#fff}
.preis-kurz span{color:var(--muted)}
@media (max-width:860px){.erika-raster{grid-template-columns:1fr}.erika-raster>div:first-child{order:2}}

/* ---------- Preise ---------- */
.preis-raster{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.preis-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(24px,3vw,40px);box-shadow:var(--schatten)}
.preis-karte h3{margin-bottom:6px}
.preis-karte .unter{color:var(--muted);font-size:15px;margin-bottom:22px}
.tabelle{width:100%;border-collapse:collapse;font-size:16px}
.tabelle th,.tabelle td{text-align:left;padding:14px 8px;border-bottom:1px solid var(--linie)}
.tabelle th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;vertical-align:bottom}
.tabelle th small{display:block;font-size:11.5px;letter-spacing:.02em;text-transform:none;font-weight:500;margin-top:3px}
.tabelle td b{font-size:20px;font-family:var(--kopf-schrift);font-weight:600}
.tabelle-huelle{overflow-x:auto}
.rabatte{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.rabatt{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--akzent) 10%,transparent);color:var(--akzent);font-weight:600;font-size:15px}
.preis-hinweis{font-size:14.5px;color:var(--muted);margin-top:18px}
@media (max-width:860px){.preis-raster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.preis-karte{padding:20px 16px}.tabelle th,.tabelle td{padding:12px 5px}.tabelle td b{font-size:18px}}

/* ---------- Anfrage / Kalender ---------- */
.anfrage{background:var(--bg2)}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.kal-karte,.auswahl-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(18px,2.6vw,32px);box-shadow:var(--schatten)}
.umschalter{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg2);margin-bottom:20px;max-width:100%}
.umschalter button{height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-weight:600;font-size:15px;color:var(--muted);transition:background-color .2s,color .2s;white-space:nowrap}
.umschalter button.an{background:var(--karte);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Pfeile liegen auf Höhe der Monatsüberschrift (keine eigene Zeile) */
.kal-kopf{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:-42px;pointer-events:none}
.kal-kopf .kal-pfeil{pointer-events:auto}
.kal-pfeil{width:42px;height:42px;border-radius:50%;border:1px solid var(--linie);background:transparent;cursor:pointer;display:grid;place-items:center;transition:border-color .18s,background-color .18s}
.kal-pfeil:hover:not(:disabled){border-color:var(--text)}
.kal-pfeil:disabled{opacity:.35;cursor:default}
.kal-monate{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.kal-monat h4{display:grid;place-items:center;height:42px;margin:0 0 6px;text-align:center;font:600 17px/1 "Inter",sans-serif}
.kal-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.kal-wt{font-size:12px;text-align:center;color:var(--muted);padding:6px 0;font-weight:600}
.kal-tag{position:relative;aspect-ratio:1;border:0;background:transparent;font-size:15px;cursor:pointer;border-radius:12px;display:grid;place-items:center;transition:background-color .15s,color .15s;padding:0}
.kal-tag:hover:not(:disabled){background:var(--bg2)}
.kal-tag:disabled{cursor:default;color:color-mix(in srgb,var(--muted) 55%,transparent)}
.kal-tag.belegt{color:color-mix(in srgb,var(--muted) 70%,transparent);text-decoration:line-through;background:repeating-linear-gradient(-45deg,transparent 0 5px,color-mix(in srgb,var(--muted) 12%,transparent) 5px 6px)}
.kal-tag.im-bereich{background:color-mix(in srgb,var(--akzent) 13%,transparent);border-radius:0}
.kal-tag.start,.kal-tag.ende{background:var(--akzent)!important;color:#fff;border-radius:12px;font-weight:700}
.kal-tag.heute::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--akzent)}
.kal-legende{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.kal-legende span{display:inline-flex;align-items:center;gap:7px}
.kal-legende i{width:16px;height:16px;border-radius:5px;display:inline-block}
.kal-legende .l-frei{border:1px solid var(--linie)}
.kal-legende .l-belegt{background:repeating-linear-gradient(-45deg,transparent 0 3px,color-mix(in srgb,var(--muted) 30%,transparent) 3px 4px);border:1px solid var(--linie)}
.kal-legende .l-wahl{background:var(--akzent)}
.kal-status{font-size:13.5px;color:var(--muted);margin-top:10px;min-height:1.2em}
.demo-hinweis{display:inline-block;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;background:#FFF1C2;color:#6B4E00;margin-left:8px;vertical-align:middle}
@media (max-width:720px){.kal-monate{grid-template-columns:1fr}.kal-monat+.kal-monat{display:none}}
.auswahl-karte{position:sticky;top:96px}
.auswahl-karte h3{font-size:26px;margin-bottom:16px}
.daten-zeile{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linie);border-radius:var(--radius-s);overflow:hidden;margin-bottom:12px}
.daten-zeile button{padding:12px 14px;border:0;background:transparent;text-align:left;cursor:pointer;transition:background-color .18s;min-width:0}
.daten-zeile button:hover{background:var(--bg2)}
.daten-zeile button+button{border-left:1px solid var(--linie)}
.daten-zeile small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.daten-zeile b{display:block;font-size:16px;margin-top:4px;font-weight:600}
.personen{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--linie);border-radius:var(--radius-s);padding:10px 10px 10px 14px;margin-bottom:14px}
.personen small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.personen b{font-size:16px;font-weight:600}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--linie);background:transparent;cursor:pointer;display:grid;place-items:center;transition:border-color .18s}
.stepper .ico{width:18px;height:18px;stroke-width:2.2}
.stepper button:hover:not(:disabled){border-color:var(--text)}
.stepper button:disabled{opacity:.35;cursor:default}
.zusammenfassung{font-size:15.5px;color:var(--muted);margin:4px 0 16px;min-height:3em}
.zusammenfassung b{color:var(--text)}
.zusammenfassung .warn{color:var(--akzent);font-weight:600}
.anfrage-knoepfe{display:grid;gap:10px}
.anfrage-knoepfe .knopf{width:100%}
.portale{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)}
.portale p{font-size:14.5px;color:var(--muted);margin:0 0 10px}
.portal-knoepfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.portal{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:8px 14px;border-radius:14px;text-decoration:none;color:#fff;transition:filter .18s,box-shadow .18s}
.portal:hover{filter:brightness(1.08);box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.portal b{font:700 15.5px/1.1 "Inter",sans-serif}
.portal small{font-size:12.5px;opacity:.9;line-height:1.2}
.portal-booking{background:#003B95}.portal-airbnb{background:#D70466}.portal-fewo{background:#1E4FD8}
.direkt-vorteil{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;background:color-mix(in srgb,var(--gruen) 10%,transparent);color:var(--text);padding:12px 14px;border-radius:12px;margin-bottom:16px}
.direkt-vorteil .ico{color:var(--gruen);margin-top:2px}
@media (max-width:980px){.anfrage-raster{grid-template-columns:minmax(0,1fr)}.auswahl-karte{position:static}}
@media (max-width:560px){.umschalter{display:flex;width:100%}.umschalter button{flex:1 1 0;min-width:0;padding:6px 8px;font-size:14px;white-space:normal;height:auto;min-height:44px;line-height:1.15}.kal-tag{font-size:14.5px;border-radius:10px}}

/* ---------- Lage ---------- */
.lage-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.karte{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--karte);border:1px solid var(--linie);box-shadow:var(--schatten);aspect-ratio:1000/860}
.karte svg{width:100%;height:100%;display:block}
.karte .quelle{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--muted);background:color-mix(in srgb,var(--karte) 85%,transparent);padding:2px 6px;border-radius:6px}
.karte .quelle a{color:inherit}
.route{fill:none;stroke:var(--akzent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;transition:stroke-width .25s,opacity .25s}
.karte.sichtbar .route{animation:zeichnen 1.6s cubic-bezier(.45,.05,.2,1) forwards;animation-delay:calc(var(--i)*.14s + .2s)}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.karte.fokus .route{opacity:.18}
.karte.fokus .route.hl{opacity:1;stroke-width:5.5}
.ziel-punkt circle{fill:var(--karte);stroke:var(--akzent);stroke-width:3}
.ziel-punkt text{font:600 19px/1 "Inter",sans-serif;fill:var(--text);paint-order:stroke;stroke:var(--karte);stroke-width:5px;stroke-linejoin:round}
.ziel-punkt text tspan.min{font-weight:500;fill:var(--muted)}
.ziel-punkt{opacity:0;transition:opacity .5s}
.karte.sichtbar .ziel-punkt{opacity:1;transition-delay:calc(var(--i)*.14s + 1.2s)}
.karte.fokus .ziel-punkt{opacity:.35;transition-delay:0s}
.karte.fokus .ziel-punkt.hl{opacity:1}
.haus-puls{fill:var(--akzent);opacity:.25;transform-origin:center;transform-box:fill-box;animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{transform:scale(.4);opacity:.45}100%{transform:scale(2.4);opacity:0}}
.lage-rechts{display:grid;gap:14px;min-width:0}
.wetter{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-s);padding:16px 18px;box-shadow:var(--schatten)}
.wetter[hidden]{display:none}
.wetter-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.wetter-kopf b{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.wetter-kopf b .ico{color:var(--akzent)}
.wetter-kopf small{font-size:12.5px;color:var(--muted)}
.wetter-tage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wetter-tag{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 4px;border-radius:12px;background:var(--bg2)}
.wetter-tag small{font-size:13px;font-weight:600}
.wetter-tag .ico{width:30px;height:30px;color:var(--gruen)}
.wetter-tag span{font-size:12px;color:var(--muted);line-height:1.2;min-height:2.4em}
.wetter-tag b{font:700 17px/1 var(--kopf-schrift)}
.wetter-tag b i{font-style:normal;font-weight:500;font-size:14px;color:var(--muted);margin-left:5px}
.ziele{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ziele button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--radius-s);border:1px solid var(--linie);background:var(--karte);cursor:pointer;text-align:left;transition:border-color .18s,background-color .18s}
.ziele button:hover,.ziele button.hl{border-color:var(--akzent)}
.ziele .zeit{font:600 20px/1 var(--kopf-schrift);color:var(--akzent);min-width:66px}
.ziele .zeit small{font:500 12px/1 "Inter",sans-serif;color:var(--muted);display:block;margin-top:4px}
.ziele b{display:block;font-weight:600;font-size:16px}
.ziele span{display:block;font-size:14px;color:var(--muted);line-height:1.35}
.zu-fuss{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.zu-fuss div{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-s);padding:18px}
.zu-fuss b{display:block;font:600 21px/1.1 var(--kopf-schrift);margin-bottom:2px}
.zu-fuss strong{display:block;font-size:15px;margin-bottom:6px}
.zu-fuss span{font-size:14px;color:var(--muted);line-height:1.4;display:block}
.anfahrt-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:980px){.lage-raster{grid-template-columns:minmax(0,1fr)}.zu-fuss{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.zu-fuss{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-raster{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,5vw,80px);align-items:start}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:500 19px/1.35 "Inter",sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:3px solid color-mix(in srgb,var(--akzent) 55%,transparent);outline-offset:3px;border-radius:8px}
.faq summary .plus{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--linie);display:grid;place-items:center;transition:transform .3s,background-color .2s}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--bg2)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{color:var(--muted);padding:0 50px 22px 0;margin:0}
@media (max-width:860px){.faq-raster{grid-template-columns:1fr}.faq details p{padding-right:0}}

/* ---------- Kontakt ---------- */
.kontakt-karte{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--radius);overflow:hidden;background:var(--gruen);color:#fff}
.kontakt-text{padding:clamp(28px,5vw,72px)}
.kontakt-text h2{font-size:clamp(34px,4.6vw,56px);margin-bottom:16px}
.kontakt-text p{opacity:.88;font-size:18px}
.kontakt-wege{display:grid;gap:10px;margin-top:28px}
.kontakt-weg{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-s);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-decoration:none;transition:background-color .18s}
.kontakt-weg:hover{background:rgba(255,255,255,.16)}
button.kontakt-weg{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.kontakt-weg .ico{width:24px;height:24px;color:var(--gruen-hell)}
.kontakt-weg small{display:block;font-size:12.5px;opacity:.7;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.kontakt-weg b{display:block;font-size:18px;font-weight:600;word-break:break-word}
.kontakt-bild{position:relative;min-height:320px}
.kontakt-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.kontakt-karte{grid-template-columns:1fr}.kontakt-bild{min-height:260px;order:-1}}

/* ---------- Fuß ---------- */
.fuss{padding-block:56px 40px;font-size:15px;color:var(--muted)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap}
.fuss a{text-decoration:none}
.fuss a:hover,.fuss button:hover{color:var(--text)}
.fuss-teilen{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.sprache-fuss{font-weight:600}

/* ---------- Mobile Leiste ---------- */
.leiste{display:none}
@media (max-width:860px){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .leiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .leiste.zeigen{transform:none}
  .leiste a{height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;font-weight:600;font-size:12.5px;line-height:1;background:var(--karte);border:1px solid var(--linie);min-width:0}
  .leiste a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .leiste a .ico{width:22px;height:22px}
  .leiste a.l-wa{background:#25D366;color:#0B3D1F;border-color:#25D366}
  .leiste a.haupt{background:var(--akzent);color:#fff;border-color:var(--akzent)}
}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(26,44,34,.97);color:#fff;opacity:0;transition:opacity .22s,display .22s allow-discrete,overlay .22s allow-discrete}
.lb[open]{opacity:1;display:grid;grid-template-rows:auto 1fr auto}
@starting-style{.lb[open]{opacity:0}}
.lb::backdrop{background:transparent}
.lb-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,3vw,28px)}
.lb-titel{font-weight:600;font-size:15.5px}
.lb-titel span{opacity:.6;font-weight:400;margin-left:8px}
.lb-knopf{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .18s}
.lb-knopf:hover{background:rgba(255,255,255,.2)}
.lb-buehne{position:relative;display:grid;place-items:center;overflow:hidden;touch-action:pan-y;min-height:0}
.lb-buehne img{max-width:min(94vw,1600px);max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .32s;user-select:none;-webkit-user-drag:none}
.lb-buehne img.raus-l{transform:translateX(-6%);opacity:0}
.lb-buehne img.raus-r{transform:translateX(6%);opacity:0}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:clamp(8px,2vw,24px)}.lb-next{right:clamp(8px,2vw,24px)}
.lb-fuss{display:flex;gap:8px;overflow-x:auto;padding:12px clamp(14px,3vw,28px) calc(14px + env(safe-area-inset-bottom));scrollbar-width:none;justify-content:center}
.lb-fuss::-webkit-scrollbar{display:none}
.lb-fuss button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.8);cursor:pointer;font-size:14px;white-space:nowrap;transition:background-color .18s,color .18s}
.lb-fuss button.an{background:#fff;color:var(--gruen)}
@media (max-width:860px){.lb-fuss{justify-content:flex-start}.lb-prev,.lb-next{display:none}}

/* ---------- Buchungsdialog ---------- */
/* Desktop: zentriert mit fade + zoom-95; mobil: Vollbild-Sheet, das von unten hereinfährt. app.js setzt .auf */
.bd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(26,44,34,0);color:var(--text);overflow:hidden;transition:background-color .2s ease}
.bd[open]{display:grid;place-items:center}
.bd::backdrop{background:transparent}
.bd.auf{background:rgba(26,44,34,.48)}
.bd-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(860px,94vw);max-height:min(880px,92dvh);background:var(--bg);border-radius:var(--radius);box-shadow:0 30px 80px -20px rgba(20,35,28,.45);overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
.bd.auf .bd-panel{opacity:1;transform:none}
.bd-kopf{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:14px clamp(14px,3vw,24px);border-bottom:1px solid var(--linie)}
.bd-rund{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--linie);background:var(--karte);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .18s,background-color .18s}
.bd-rund:hover{border-color:var(--text)}
.bd-rund .ico{width:20px;height:20px}
.bd-zurueck.weg{visibility:hidden}
.bd-schritte{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;gap:6px;min-width:0}
.bd-schritte li{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.bd-schritte li+li::before{content:"";width:clamp(12px,4vw,40px);height:2px;border-radius:2px;background:var(--linie);margin-right:2px;transition:background-color .2s}
.bd-schritte i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--bg2);color:var(--muted);transition:background-color .2s,color .2s}
.bd-schritte .an{color:var(--text)}
.bd-schritte .an i{background:var(--akzent);color:#fff}
.bd-schritte .fertig i{background:var(--gruen);color:#fff}
.bd-schritte .an::before,.bd-schritte .fertig::before{background:var(--gruen)}
.bd-inhalt{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(18px,3vw,28px) clamp(16px,3.4vw,32px) 20px}
.bd-schritt:not([hidden]){animation:bd-rein .22s ease}
@keyframes bd-rein{from{opacity:0;transform:translateX(14px)}}
.bd-schritt h2{font-size:clamp(25px,3vw,32px);margin-bottom:18px;outline:none}
.bd .kal-monate{gap:32px}
@media (min-width:721px){.bd .kal-tag{aspect-ratio:auto;height:40px}.bd .kal-monat h4{margin-bottom:2px}.bd .kal{display:grid;grid-template-columns:auto 1fr;column-gap:16px}.bd .kal>*{grid-column:1/-1}.bd .kal-legende{grid-column:1;margin-top:12px}.bd .kal-status{grid-column:2;text-align:right;margin-top:12px;align-self:center}.bd-schritt h2{margin-bottom:14px}}
.bd-unten{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin-top:6px;align-items:start}
.bd-unten .direkt-vorteil{margin:0}
.bd-preis{border:1px solid var(--linie);border-radius:var(--radius-s);padding:14px 16px;font-size:15px;line-height:1.4}
.bd-preis h3{font:600 12px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bd-preis .z{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.bd-preis .z b{font-weight:600;white-space:nowrap}
.bd-preis .z small{display:block;color:var(--muted);font-size:13px}
.bd-preis .rabatt-z{color:var(--gruen);font-weight:600}
.bd-preis .summe{border-top:1px solid var(--linie);margin-top:8px;padding-top:10px;font-weight:700;font-size:17px}
.bd-preis .summe b{font-weight:800}
.bd-preis p{font-size:13px;color:var(--muted);margin:8px 0 0}
.bd-preis .bd-preis-ab{font-size:15px;margin:0}
.bd-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 14px 14px 18px;border:1px solid var(--linie);border-radius:var(--radius-s);margin-bottom:12px}
.bd-zeile b{display:block;font-size:17px;font-weight:600}
.bd-zeile small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:2px}
.bd-zeile .stepper{gap:10px}
.bd-zeile .stepper button{width:44px;height:44px}
.bd-zahl{min-width:2ch;text-align:center;font-size:19px!important}
.bd-hinweis{font-size:14.5px;color:var(--akzent-h);margin:-4px 2px 14px}
.bd-schalter{position:relative;flex:none;width:54px;height:32px;padding:0;border-radius:999px;border:0;background:#C9D4CE;cursor:pointer;transition:background-color .2s}
.bd-schalter::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bd-schalter[aria-checked="true"]{background:var(--gruen)}
.bd-schalter[aria-checked="true"]::after{transform:translateX(22px)}
.bd-feld{display:block;margin-top:18px}
.bd-feld span{display:block;font-size:14.5px;font-weight:600;margin-bottom:8px}
.bd-feld input{width:100%;height:52px;padding:0 18px;border:1px solid var(--linie);border-radius:14px;background:var(--karte);color:var(--text);font:400 17px "Inter",sans-serif;-webkit-appearance:none;appearance:none;transition:border-color .18s,box-shadow .18s}
.bd-feld input::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.bd-feld input:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}
.bd-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,28px);align-items:start}
.bd-zus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;margin:0 0 14px;padding:16px 18px;border-radius:var(--radius-s);background:var(--bg2);font-size:15.5px;line-height:1.35}
.bd-zus dt{color:var(--muted)}
.bd-zus dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.bd-text{font-size:14.5px;color:var(--muted);margin:0}
.bd-knoepfe{display:grid;gap:10px}
.bd .knopf{height:48px}
.bd-knoepfe .knopf{width:100%;height:52px}
.bd-portal{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
.bd-portal p{font-size:14.5px;color:var(--muted);margin:0 0 10px}
.bd-portal .portal{flex-direction:row;align-items:center;justify-content:space-between;min-height:52px;padding:8px 18px;border-radius:999px}
.bd-neu{display:block;margin:22px auto 0;padding:10px 14px;border:0;background:none;color:var(--muted);font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .18s}
.bd-neu:hover{color:var(--text)}
.bd-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(16px,3.4vw,32px);border-top:1px solid var(--linie);background:var(--bg)}
.bd-mini{min-width:0;font-size:14px;line-height:1.35;color:var(--muted)}
.bd-mini b{color:var(--text);font-size:16.5px}
.bd-weiter{flex:none}
.bd-weiter .ico{width:18px;height:18px}
.bd-weiter:disabled{background:#D9DFDB;color:#7A8680;box-shadow:none;cursor:not-allowed}
.bd[data-schritt="3"] .bd-fuss{display:none}
.kal-tag.zu-kurz{color:color-mix(in srgb,var(--muted) 45%,transparent)}
@media (max-width:720px){
  .bd[open]{place-items:stretch}
  .bd-panel{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;opacity:1;transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.7,.2,1)}
  .bd.auf .bd-panel{transform:none}
  .bd-kopf{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  .bd-fuss{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .bd-unten,.bd-raster{grid-template-columns:minmax(0,1fr)}
  .bd .kal-legende{margin-top:10px}
}
@media (max-width:420px){.bd-schritte li:not(.an) span{display:none}.bd-schritte{gap:4px}}
/* Weite Sprünge: Seite kurz aus- und wieder einblenden statt durchzufahren */
main,.fuss{transition:opacity .16s ease}
html.blende-seite main,html.blende-seite .fuss{opacity:0}

/* ---------- Einblenden ---------- */
.rein{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rein.da{opacity:1;transform:none}
.keine-js .rein{opacity:1;transform:none}

/* ---------- Rechtstexte ---------- */
.recht{max-width:780px;padding-top:140px}
.recht h1{font-size:clamp(38px,5vw,56px);margin-bottom:28px}
.recht h2{font-size:24px;margin:34px 0 10px;font-family:"Inter",sans-serif;font-weight:700;letter-spacing:0}
.recht p,.recht li{color:var(--muted)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;max-width:min(92vw,420px);padding:14px 20px;border-radius:14px;background:var(--gruen);color:#fff;font-weight:600;font-size:15.5px;box-shadow:0 12px 30px -10px rgba(31,58,44,.6);opacity:0;transform:translate(-50%,12px) scale(.96);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.zeigen{opacity:1;transform:translate(-50%,0) scale(1)}