@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --grund:#FFFFFF;--text:#22252B;--text-2:#4A4F5C;--marke:#2344D6;--marke-tief:#1A33A8;
  --handlung:#C8125F;--handlung-tief:#A20D4C;--flaeche2:#E9EEFB;--graphit:#4A4A4A;--linie:#C9D3F2;--auf-blau:#DDE4FF;
  --nacht:#14172A;--papier:#FAF7F4;
  --raster:rgba(35,68,214,.08);
  --karo:linear-gradient(var(--raster) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--raster) 1px,transparent 1px) 0 0/24px 24px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;
  --r:8px;--r-s:4px;
  --schrift:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--hand:"Caveat","Comic Sans MS",cursive;
  --breit:1200px;--rand:24px;
  --fokus:0 0 0 3px #fff,0 0 0 6px var(--marke);
  --zeit:.25s;--kurve:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 17px/1.6 var(--schrift);font-variation-settings:"wdth" 100}
img{max-width:100%;display:block;height:auto}
a{color:var(--marke)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:var(--r-s)}
.huelle{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,.ue2,.ue3{margin:0;line-height:1.1}.ue2.ue2,.ue3.ue3,.ue4.ue4{color:inherit;letter-spacing:inherit;text-transform:inherit;font-style:inherit;text-align:inherit;font-variation-settings:inherit;display:block;max-width:none;padding:0;border:0;background:none;line-height:1.1;font-weight:700}.ue2.ue2{font-size:1.5em;margin:0}.ue3.ue3{font-size:1.17em;margin:0}.ue4.ue4{font-size:1em;margin:1.33em 0;line-height:inherit}
p:where(:not(.ue2,.ue3,.ue4)){margin:0 0 var(--s2)}
/* Ueberschriften-Muster: SEO-Zeile klein, Verkaufssatz gross */
.zeile{display:block;font-size:15px;font-weight:600;color:var(--marke);margin:0 0 var(--s1);letter-spacing:.01em}
.gross{font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.04;font-variation-settings:"wdth" 82;letter-spacing:-.01em;margin:0 0 var(--s3);max-width:20ch}
.gross--mittel{font-size:clamp(26px,3.4vw,40px)}
.lead{font-size:19px;color:var(--text-2);max-width:60ch}
.hand{font-family:var(--hand);font-weight:600;font-size:24px;line-height:1.1;color:var(--marke)}
/* Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r);font:700 17px/1 var(--schrift);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background var(--zeit),transform var(--zeit),border-color var(--zeit);touch-action:manipulation}
.knopf svg{width:20px;height:20px;flex:none}
.knopf-haupt{background:var(--handlung);color:#fff}
.knopf-haupt:hover{background:var(--handlung-tief)}
.knopf-haupt:active{transform:scale(.98)}
.knopf-neben{background:#fff;color:var(--marke);border-color:var(--marke)}
.knopf-neben:hover{background:var(--flaeche2)}
.auf-blau .knopf-neben{background:transparent;color:#fff;border-color:#fff}
.auf-blau .knopf-neben:hover{background:rgba(255,255,255,.12)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.mikro{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;color:var(--text-2)}
.mikro li{display:flex;align-items:center;gap:6px}
.mikro svg{width:16px;height:16px;color:var(--marke);flex:none}
.auf-blau .mikro{color:var(--auf-blau)}.auf-blau .mikro svg{color:#fff}
/* offen-Markierung (Vorschau) */
.offen{background:#FFE9A8;color:#3A2D00;border-radius:3px;padding:1px 6px;font-size:13px;font-weight:600;display:inline-block;line-height:1.5}
.vorschau-band{background:#FFE9A8;color:#3A2D00;font-size:14px;padding:8px var(--rand);text-align:center}
/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid transparent;transition:border-color var(--zeit)}
.kopf.ist-gescrollt{border-color:var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:var(--s3);min-height:72px}
.wortmarke-svg{width:230px;height:auto;display:block}
.wortmarke{display:flex;align-items:center;min-height:44px;font-weight:800;font-size:22px;letter-spacing:.08em;color:var(--marke);text-decoration:none;font-variation-settings:"wdth" 112;white-space:nowrap}
.menue{display:flex;gap:4px;margin-left:auto;align-items:center}
.menue>a,.menue>.auf>button{font:600 16px/1 var(--schrift);color:var(--text);text-decoration:none;padding:14px 12px;border-radius:var(--r-s);background:none;border:0;cursor:pointer;position:relative}
.menue>a::after,.menue>.auf>button::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--marke);transform:scaleX(0);transform-origin:left;transition:transform var(--zeit) var(--kurve)}
.menue>a:hover::after,.menue>.auf>button:hover::after,.menue>.auf>button[aria-expanded="true"]::after{transform:scaleX(1)}
.auf{position:relative}
.auf-liste{position:absolute;top:calc(100% + 8px);left:-12px;width:560px;background:#fff;border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 18px 40px rgba(20,23,42,.12);padding:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:4px var(--s3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.auf-liste.offen-menue{opacity:1;visibility:visible;transform:none}
.auf-liste h3,.auf-liste .ue3{font-size:14px;color:var(--text-2);font-weight:600;margin:0 0 4px}
.auf-liste a{display:block;padding:8px 8px;border-radius:var(--r-s);color:var(--text);text-decoration:none;font-weight:600;font-size:16px}
.auf-liste a span{display:block;font-weight:400;font-size:14px;color:var(--text-2)}
.auf-liste a:hover{background:var(--flaeche2)}
.kopf-tel{min-height:44px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;display:flex;gap:6px;align-items:center}
.kopf-tel svg{width:18px;height:18px;color:var(--marke)}
.kopf .knopf{min-height:44px;padding:0 18px;font-size:16px}
.menue-knopf{display:none;margin-left:auto;background:none;border:2px solid var(--marke);border-radius:var(--r);min-height:44px;padding:0 14px;font:700 16px var(--schrift);color:var(--marke);cursor:pointer}
.handymenue{display:none}
/* Buehne */
.buehne{background:var(--karo),var(--grund);padding:var(--s6) 0 var(--s10)}
.buehne .huelle{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.buehne .gross{font-size:clamp(38px,5.6vw,68px);max-width:14ch}
.buehne .lead{margin-bottom:var(--s4)}
.marken{margin-top:var(--s5);font-size:15px;color:var(--text-2)}
.marken strong{color:var(--text);font-weight:700}
/* Schieber */
.schieber-rahmen{position:relative}
.schieber{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 50px rgba(20,23,42,.18);background:var(--papier);touch-action:pan-y;user-select:none;--pos:50%}
.schieber img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.schieber .oben{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.schieber .griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.schieber .griff::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--marke) 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='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 0 0 4px #fff}
.schieber input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.schieber input:focus-visible~.griff::after{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--marke)}
.etikett{position:absolute;top:14px;background:#fff;color:var(--text);font-size:14px;font-weight:700;padding:4px 10px;border-radius:var(--r-s);pointer-events:none}
.etikett.l{left:14px}.etikett.r{right:14px;background:var(--text);color:#fff}
.schieber-wahl{display:flex;gap:var(--s1);margin-top:var(--s2);flex-wrap:wrap}
.schieber-wahl button{font:600 15px var(--schrift);min-height:44px;padding:0 16px;border-radius:var(--r);border:2px solid var(--linie);background:#fff;color:var(--text);cursor:pointer}
.schieber-wahl button[aria-pressed="true"]{border-color:var(--marke);background:var(--flaeche2);color:var(--marke-tief)}
.schieber-text{font-size:15px;color:var(--text-2);margin-top:var(--s1)}
.notiz-zeile{order:3;margin-left:auto;align-self:center;transform:rotate(-3deg)}
/* Abschnitte */
.abschnitt{padding:var(--s12) 0}
.abschnitt--hell{background:var(--flaeche2)}
.abschnitt--blau{background:var(--marke);color:#fff}
.abschnitt--blau .zeile{color:var(--auf-blau)}
.abschnitt--blau .lead{color:var(--auf-blau)}
.abschnitt--nacht{background:var(--nacht);color:#fff}
.abschnitt--nacht .zeile{color:#9DB0FF}.abschnitt--nacht .lead{color:#C9CFE6}
.kopfzeile{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:end;margin-bottom:var(--s6)}
.kopfzeile .lead{margin:0}
/* Wandwahl: Haus */
.haus-raster{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s5);align-items:start}
.haus{background:#fff;border-radius:var(--r);padding:var(--s3);box-shadow:0 1px 0 var(--linie)}
.haus svg{width:100%;height:auto;display:block}
.haus .flaeche{cursor:pointer;outline:none}
.haus .flaeche .rand{fill:var(--papier);stroke:var(--graphit);stroke-width:2;stroke-dasharray:6 6;transition:stroke var(--zeit),fill var(--zeit)}
.haus .flaeche:hover .rand{stroke:var(--marke);stroke-dasharray:none;stroke-width:2}
.haus .flaeche:focus-visible .rand{stroke:var(--handlung);stroke-dasharray:3 4;stroke-width:4}
.haus .flaeche .farbe{clip-path:circle(0% at 50% 50%);transition:clip-path .7s var(--kurve)}
.haus .flaeche[aria-pressed="true"] .farbe{clip-path:circle(75% at 50% 50%)}
.haus .flaeche[aria-pressed="true"] .rand{stroke:var(--marke);stroke-dasharray:none;stroke-width:6;fill:none}
.haus .flaeche[aria-pressed="true"]:focus-visible .rand{stroke:var(--handlung);stroke-dasharray:none}
.haus-bild{position:relative}
.nur-handy{display:none}
.haus-schild{position:absolute;transform:translate(-50%,-50%);background:#fff;color:var(--text);font-weight:700;font-size:14px;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid var(--graphit);pointer-events:none;white-space:nowrap}
.haus .linie{fill:none;stroke:var(--graphit);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.haus .duenn{fill:none;stroke:var(--graphit);stroke-width:1.3;stroke-linecap:round}
.haus-tipp{display:flex;gap:10px;align-items:center;margin:0 0 var(--s2)}
.betrieb-wahl{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.betrieb-wahl button{font:600 15px var(--schrift);min-height:44px;padding:0 16px;border-radius:var(--r);border:2px solid var(--linie);background:#fff;color:var(--text);cursor:pointer}
.betrieb-wahl button[aria-pressed="true"]{border-color:var(--marke);background:var(--flaeche2);color:var(--marke-tief)}
.wand-tafel{background:#fff;border-radius:var(--r);padding:var(--s4);border-top:6px solid var(--marke);position:sticky;top:96px}
.wand-tafel h3,.wand-tafel .ue3{font-size:26px;font-variation-settings:"wdth" 88;margin-bottom:var(--s1)}
.wand-tafel .satz{font-family:var(--hand);font-size:24px;color:var(--marke);line-height:1.15;margin-bottom:var(--s2)}
.wand-tafel ul{margin:0 0 var(--s3);padding-left:20px}
.wand-tafel li{margin-bottom:6px}
.wand-tafel .preis{font-weight:700;margin-bottom:var(--s3)}
.wand-tafel .bild{aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;margin-bottom:var(--s2);background:var(--papier)}
.wand-tafel .bild img{width:100%;height:100%;object-fit:cover}
.bild-unter{font-size:14px;color:var(--text-2);margin:-8px 0 var(--s2)}
.wand-tafel .links{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.tafel-wechsel{animation:tafel .35s var(--kurve)}
@keyframes tafel{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Ablauf */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative;margin-top:var(--s4)}
.ablauf::before{content:"";position:absolute;left:0;right:0;top:27px;height:3px;background:var(--linie)}
.ablauf .fuellung{position:absolute;left:0;top:27px;height:3px;background:var(--marke);width:0;transition:width 1.4s var(--kurve)}
.ablauf.sichtbar .fuellung{width:100%}
.schritt{position:relative;padding:0 var(--s3) 0 0}
.schritt .nr{width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid var(--marke);display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--marke);position:relative;z-index:1;margin-bottom:var(--s2)}
.schritt.frei .nr{background:var(--handlung);border-color:var(--handlung);color:#fff}
.schritt h3,.schritt .ue3{font-size:20px;margin-bottom:var(--s1)}
.schritt p:where(:not(.ue2,.ue3,.ue4)){color:var(--text-2);font-size:16px}
.zusage{margin-top:var(--s6);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;background:var(--papier);border-radius:var(--r);padding:var(--s3) var(--s4);border-left:6px solid var(--handlung)}
.zusage strong{font-size:20px}
/* Entstehung */
.entstehung{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.bühne-bild{position:sticky;top:96px;height:calc(100vh - 140px);max-height:760px;border-radius:var(--r);overflow:hidden;background:#000}
.bühne-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s,transform 1.4s var(--kurve)}
.bühne-bild img.an{opacity:1;transform:scale(1)}
.bühne-bild figcaption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(20,23,42,.82);color:#fff;padding:10px 14px;border-radius:var(--r-s);font-size:15px}
.stationen{padding:12vh 0 6vh}
.station{min-height:44vh;display:flex;flex-direction:column;justify-content:center;color:#A9AFC8;transition:color .4s}
.station.an{color:#fff}
.station.an p:where(:not(.ue2,.ue3,.ue4)){color:#E3E7F5}
.station h3,.station .ue3{font-size:clamp(26px,3vw,36px);font-variation-settings:"wdth" 85;margin-bottom:var(--s2)}
.station p:where(:not(.ue2,.ue3,.ue4)){color:#A9AFC8;transition:color .4s;font-size:18px;max-width:42ch}
.station .handy-bild{display:none}
/* Stimmen */
.stimme-gross{font-size:clamp(28px,3.6vw,46px);font-weight:700;line-height:1.15;font-variation-settings:"wdth" 85;max-width:26ch;margin:0 0 var(--s2)}
.stimme-gross::before{content:"„"}.stimme-gross::after{content:"“"}
.stimme-wer{color:var(--text-2);margin-bottom:var(--s6)}
.stimmen-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);border-top:2px solid var(--text);padding-top:var(--s4)}
.stimmen-reihe blockquote{margin:0}
.stimmen-reihe blockquote p:where(:not(.ue2,.ue3,.ue4)){font-size:17px}
.stimmen-reihe cite{font-style:normal;font-size:15px;color:var(--text-2)}
.sterne{color:#8A6100;letter-spacing:2px;font-size:16px}
.stimmen-quelle{margin-top:var(--s4);font-size:15px;color:var(--text-2)}
/* Motive */
.filter{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s4)}
.filter button{font:600 16px var(--schrift);min-height:44px;padding:0 18px;border-radius:var(--r);border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;transition:background var(--zeit),color var(--zeit)}
.filter button[aria-pressed="true"]{background:#fff;color:var(--marke-tief)}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.galerie figure{margin:0;background:#fff;padding:10px 10px 12px;border-radius:var(--r-s);transform:rotate(var(--dreh,0deg));box-shadow:0 10px 24px rgba(0,0,0,.2);transition:transform var(--zeit),opacity .3s}
.galerie figure:nth-child(odd){--dreh:-1.2deg}.galerie figure:nth-child(3n){--dreh:1deg}
.galerie figure.weg{display:none}
.galerie img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:2px}
.galerie figcaption{color:var(--text);font-size:14px;font-weight:600;margin-top:8px}
.gemerkt{margin-top:var(--s4);min-height:28px;font-size:16px;color:#fff}
/* Kosten */
.kosten{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.preis-gross{font-weight:800;font-size:clamp(56px,8vw,104px);line-height:.95;font-variation-settings:"wdth" 75;color:var(--marke);margin:0 0 var(--s2)}
.preis-unter{font-weight:700;font-size:22px;margin:0 0 var(--s3)}
.band{position:relative;height:20px;margin:var(--s1) 0 var(--s1);border-radius:var(--r-s);background:var(--flaeche2);overflow:hidden}
.band .meist{position:absolute;inset:0;background:var(--marke)}
.band-zahlen{display:flex;justify-content:space-between;font-weight:800;font-size:20px;margin-top:var(--s4)}
.band{height:20px;margin-top:var(--s1)}
.band-text{font-size:15px;color:var(--text-2)}
.hebel{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.hebel li{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);align-items:start}
.hebel svg{width:44px;height:44px;color:var(--marke)}
.hebel strong{display:block;font-size:19px}
.hebel p:where(:not(.ue2,.ue3,.ue4)){margin:0;color:var(--text-2)}
.live-preis{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linie)}
/* Klaeren */
.klaeren{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border-radius:var(--r);overflow:hidden}
.klaeren>div{padding:var(--s5) var(--s4);border-right:1px solid var(--linie)}
.klaeren>div:last-child{border-right:0}
.klaeren h3,.klaeren .ue3{font-size:22px;margin-bottom:var(--s2);display:flex;gap:10px;align-items:center}
.klaeren h3 svg,.klaeren .ue3 svg{width:28px;height:28px;color:var(--marke)}
.klaeren ul{margin:0;padding-left:20px}.klaeren li{margin-bottom:10px}
.ehrlich{margin-top:var(--s4);display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s5);align-items:center}
.ehrlich img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.ehrlich blockquote{margin:0;font-size:22px;line-height:1.4;font-weight:600}
/* Betriebe */
.betriebe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.betriebe img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.betriebe .wege{display:grid;gap:var(--s3);margin-top:var(--s4)}
.betriebe .weg{padding:var(--s2) 0 0;border-top:2px solid var(--text)}
.betriebe .weg h3,.betriebe .weg .ue3{font-size:20px;margin-bottom:6px}
.betriebe .weg p:where(:not(.ue2,.ue3,.ue4)){margin:0 0 var(--s1);color:var(--text-2)}
.link-ziel{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8)}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-child{border-top:2px solid var(--text)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-9px;border-right:3px solid var(--marke);border-bottom:3px solid var(--marke);transform:rotate(45deg);transition:transform var(--zeit)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p:where(:not(.ue2,.ue3,.ue4)){color:var(--text-2);padding-right:var(--s4)}
/* Anfrage */
.anfrage{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.anfrage ol{padding-left:22px;margin:var(--s3) 0}
.anfrage ol li{margin-bottom:10px;color:var(--auf-blau)}
.anfrage ol strong{color:#fff}
.formular{background:#fff;color:var(--text);border-radius:var(--r);padding:var(--s5);box-shadow:0 24px 50px rgba(0,0,0,.25)}
.formular .zettel{background:var(--papier);border-radius:var(--r-s);padding:12px 16px;margin-bottom:var(--s3);font-size:16px;display:none}
.formular .zettel.da{display:block}
.feld{margin-bottom:var(--s3)}
.feld label{display:block;font-weight:700;font-size:16px;margin-bottom:6px}
.feld label span{font-weight:400;color:var(--text-2)}
.feld input,.feld select,.feld textarea{width:100%;min-height:48px;border:2px solid var(--linie);border-radius:var(--r-s);padding:10px 12px;font:400 17px var(--schrift);color:var(--text);background:#fff}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--marke)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.foto-feld:focus-within,.foto-feld:hover{background:#E9EEFB;border-style:solid}
.foto-feld{display:block;border:2px dashed var(--marke);border-radius:var(--r);padding:var(--s3);text-align:center;background:#F6F8FF;cursor:pointer;position:relative}
.foto-feld input{position:absolute;inset:0;opacity:0;cursor:pointer}
.foto-feld svg{width:36px;height:36px;color:var(--marke);margin:0 auto 6px}
.foto-feld strong{display:block}
.foto-feld span{font-size:15px;color:var(--text-2)}
.datenschutz{font-size:14px;color:var(--text-2)}
.fehler{color:#B00020;font-size:15px;margin-top:6px;display:none}
.feld.ist-fehler input{border-color:#B00020}.feld.ist-fehler .fehler{display:block}
.danke{display:none;padding:var(--s3);background:#E8F6EE;border-radius:var(--r-s);color:#0E5A2E;font-weight:600}
/* Ratgeber, SEO */
.ratgeber-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.ratgeber-liste a{display:block;text-decoration:none;color:var(--text);border-top:3px solid var(--marke);padding-top:var(--s2)}
.ratgeber-liste strong{display:block;font-size:19px;margin-bottom:6px}
.ratgeber-liste span{color:var(--text-2);font-size:15px}
.seo-text{columns:2;column-gap:var(--s8);margin-top:var(--s6)}
.seo-text p:where(:not(.ue2,.ue3,.ue4)){break-inside:avoid}
/* Fuss */
.fuss{background:var(--nacht);color:#C9CFE6;padding:var(--s10) 0 var(--s5);font-size:15px}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s5)}
.fuss-raster>div{min-width:0}
.fuss h3,.fuss .ue3{color:#fff;font-size:16px;margin-bottom:var(--s2)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss .staedte{columns:2;column-gap:var(--s3)}.fuss li{margin-bottom:8px}
.fuss-unten{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between}
/* Handyleiste */
.handyleiste{display:none}
/* Einblenden */
.js .ein{opacity:0;transform:translateY(16px);transition:opacity .6s var(--kurve),transform .6s var(--kurve)}
.js .ein.sichtbar{opacity:1;transform:none}
@media (max-width:1080px){
  .menue,.kopf-tel{display:none}
  .menue-knopf{display:inline-flex;align-items:center}
  .kopf .knopf-haupt{display:none}
  .handymenue.offen-menue{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--menue-top,72px);background:#fff;z-index:49;overflow:auto;padding:var(--s3) var(--rand) 120px}
  .handymenue h3,.handymenue .ue3{font-size:14px;color:var(--text-2);margin:var(--s3) 0 var(--s1)}
  .handymenue a{display:block;padding:12px 0;font-weight:700;font-size:19px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--flaeche2)}
}
@media (max-width:900px){
  :root{--rand:16px}
  body{font-size:16px}
  .abschnitt{padding:var(--s8) 0}
  .buehne{padding:var(--s3) 0 var(--s6)}
  .buehne .huelle,.haus-raster,.kopfzeile,.entstehung,.kosten,.betriebe,.faq,.anfrage,.ehrlich{grid-template-columns:1fr;gap:var(--s4)}
  .buehne .gross{font-size:36px;margin-bottom:var(--s2)}
  .buehne .huelle>div:first-child{display:contents}
  .buehne .huelle{gap:0}
  .buehne .zeile{order:1}.buehne .gross{order:2}.schieber-rahmen{order:3;margin-bottom:var(--s3)}.buehne .knopfreihe{order:4}.buehne .mikro{order:5}.buehne .lead{order:6;margin-top:var(--s3)}.buehne .marken{order:7}
  .schieber{aspect-ratio:16/9}
  .schieber img{object-position:center 18%}
  .schieber-wahl{margin-top:var(--s1)}
  .schieber-wahl button{min-height:44px;padding:0 14px}
  #schieber-text{font-size:14px;margin:var(--s1) 0 0}
  .schieber-rahmen .schieber-text:last-child{display:none}
  .handyleiste{transform:translateY(110%);transition:transform .25s var(--kurve)}
  .handyleiste.da{transform:none}
  .lead{font-size:17px}
  .notiz-zeile{display:none}
  .wortmarke-svg{width:184px}
  .wand-tafel{position:static}
  .haus-schild{display:none}
  .nur-handy{display:inline-flex;align-items:center}
  .ablauf{grid-template-columns:1fr;gap:var(--s3)}
  .ablauf::before,.ablauf .fuellung{left:27px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .ablauf .fuellung{height:0;transition:height 1.4s var(--kurve)}.ablauf.sichtbar .fuellung{width:3px;height:100%}
  .schritt{display:grid;grid-template-columns:56px 1fr;gap:var(--s2);padding:0}
  .schritt .nr{margin:0}
  .bühne-bild{display:none}
  .stationen{padding:0}
  .station{min-height:0;opacity:1;margin-bottom:var(--s5)}
  .station .handy-bild{display:block;border-radius:var(--r);margin-bottom:var(--s2);aspect-ratio:16/10;object-fit:cover;width:100%}
  .station[data-station="1"]{display:none}
  .galerie.kurz figure:nth-child(n+7){display:none}
  .mehr-motive{display:inline-flex!important}
  .stimmen-reihe,.klaeren{grid-template-columns:1fr}
  .klaeren>div{border-right:0;border-bottom:1px solid var(--linie)}
  .galerie{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .ratgeber-liste{grid-template-columns:1fr 1fr}
  .seo-text{columns:1}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .zwei{grid-template-columns:1fr}
  .formular{padding:var(--s3)}
  .zusage{grid-template-columns:1fr}
  .handyleiste{display:grid;grid-template-columns:1fr auto;gap:var(--s1);position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(20,23,42,.12)}
  .handyleiste .knopf{min-height:48px}
  .handyleiste .wa{width:52px;padding:0}
  .fuss{padding-bottom:110px}
}
@media (max-width:520px){
  .fuss-raster{grid-template-columns:1fr}
  .ratgeber-liste{grid-template-columns:1fr}
  .galerie figcaption{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ein{opacity:1;transform:none}
  .haus .flaeche .farbe{clip-path:none!important;opacity:0}
  .haus .flaeche[aria-pressed="true"] .farbe{opacity:1}
}

/* Handy: Knöpfe einer Reihe untereinander und volle Breite (13.11.) */
@media (max-width:640px){.knopfreihe{flex-direction:column;align-items:stretch}.knopfreihe>.knopf,.knopfreihe>a.knopf{width:100%;justify-content:center}}

/* QA 13.11.: Formularabstände gleich, Fußzeile ohne Umbruch, Tippziele am Handy */
.zwei{gap:var(--s3) var(--s2);margin-bottom:var(--s3)}.zwei>.feld{margin-bottom:0}
@media (min-width:901px){.fuss .staedte li{white-space:nowrap}.fuss-raster{grid-template-columns:1.2fr 1fr 1.25fr 1fr}}
@media (max-width:900px){.fuss li{margin-bottom:0}.fuss li a{display:inline-block;padding:10px 0}}

@media (max-width:640px){.abschnitt a.knopf,.abschnitt button.knopf{width:100%;justify-content:center}}