/* AsN Objektbetreuung · LP B „Hell mit Kachel-Hero" · Entwurf 14.10.2026
   Familie B: Kalkstein / Petrol / Kupfer · Source Serif 4 + Onest (lokal) */

@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --grund:#F5F2EC;          /* Kalkstein */
  --flaeche:#EAE5DB;        /* Fläche hell */
  --karte:#FBFAF6;          /* Karte auf Kalkstein */
  --text:#1E2A28;
  --text-2:#4A5654;         /* Nebentext, 7:1 auf Kalkstein */
  --petrol:#1F4D4A;
  --petrol-dunkel:#163633;
  --kupfer:#B5643C;         /* nur Linien, Ringe, Punkte */
  --kupfer-text:#9A4F2C;    /* Kupfer als Schrift auf hell, 5,3:1 */
  --kupfer-hell:#E7AE8C;    /* Kupfer als Schrift auf Petrol-dunkel */
  --wa:#25D366;
  --wa-text:#0B2B18;
  --linie:#D9D2C4;
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-text:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-10:10px; --r-14:14px; --r-20:20px; --r-26:26px; --r-pill:999px;
  --schatten:0 1px 2px rgba(30,42,40,.05), 0 8px 24px -12px rgba(30,42,40,.12);
  --schatten-hoch:0 2px 4px rgba(30,42,40,.06), 0 18px 40px -18px rgba(31,77,74,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --t-kurz:180ms; --t-mittel:420ms; --t-lang:700ms;
  --rand:clamp(16px, 4vw, 40px);
}

/* Platzhalter: genau eine Regel, sonst kein Gelb im Design */
[data-platzhalter]{background:#FFE14D;color:#1a1a1a;padding:0 .3em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.6 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
::selection{background:var(--petrol);color:#fff}
:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}
input,button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}

.rahmen{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--rand)}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Typo */
.kicker{font:600 .9375rem/1.4 var(--f-text);color:var(--kupfer-text);letter-spacing:.01em}
.kicker--hell{color:var(--kupfer-hell)}
.ansage,.h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.ansage em,.h2 em{font-style:italic;color:var(--petrol);display:inline-block;padding-bottom:.06em}
.h2{font-size:clamp(1.9rem,1.25rem + 2.4vw,3rem);line-height:1.1}
.h2--hell{color:#F5F2EC}
.vergleich .h2,.gebiet .h2,.faq .h2{font-size:clamp(1.9rem,1.3rem + 1.9vw,2.6rem);text-wrap:wrap}
.h2--hell em{color:var(--kupfer-hell)}
.h3{font:600 1.375rem/1.25 var(--f-display)}
.klein{font-size:.8125rem;color:var(--text-2);font-weight:500}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.75em 1.25em;border-radius:var(--r-pill);border:0;font:600 1rem/1.2 var(--f-text);text-decoration:none;cursor:pointer;transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease),background-color var(--t-kurz)}
.knopf:active{transform:translateY(1px) scale(.985)}
.knopf--petrol{background:var(--petrol);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -8px rgba(22,54,51,.55)}
.knopf--petrol:hover{background:var(--petrol-dunkel)}
.knopf--wa{background:var(--wa);color:var(--wa-text)}
.knopf--wa:hover{background:#1FBF5B}
.knopf--hell{background:#F5F2EC;color:var(--petrol-dunkel)}
.knopf--hell:hover{background:#fff}
.knopf--rand{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.knopf--rand:hover{background:var(--petrol);color:#fff}
.knopf--klein{min-height:42px;padding:.55em 1em;font-size:.9375rem}
.knopf--gross{min-height:56px;padding:.9em 1.4em;font-size:1.0625rem;width:100%}
.knopf [data-platzhalter]{font-weight:600}
.nur-klein{display:none}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(245,242,236,.86);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t-mittel)}
.kopf.ist-gescrollt{border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.wortmarke{font:600 1.25rem/1 var(--f-display);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.kopf__rechts{display:flex;align-items:center;gap:18px}
.kopf__hinweis{font-size:.875rem;color:var(--text-2);font-weight:500}

/* Hero */
.hero{padding-block:clamp(16px,2.2vw,30px) clamp(28px,3.4vw,48px)}
.hero__kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
.hero__text{display:grid;gap:12px;min-width:0}
.ansage{font-size:clamp(2.05rem,1.2rem + 3.5vw,4.15rem);line-height:1.04}
.hero__sub{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);color:var(--text-2);max-width:44ch}
.hero__mensch{display:flex;align-items:center;gap:14px;max-width:300px;font-size:.9375rem;line-height:1.4;padding-bottom:6px}
.portrait{display:grid;place-items:center;text-align:center;font-size:.75rem;font-weight:600;line-height:1.2}
.portrait--rund{width:60px;height:60px;border-radius:var(--r-pill);flex:none;padding:6px}

/* Auswahl-Karte */
.wahl{margin-top:clamp(20px,2.6vw,32px);background:var(--karte);border-radius:var(--r-26);box-shadow:var(--schatten);padding:clamp(16px,2.2vw,28px);position:relative}
.wahl__schritte{list-style:none;padding:0;display:flex;gap:8px 22px;flex-wrap:wrap;font-size:.875rem;font-weight:500;color:var(--text-2);margin-bottom:14px}
.wahl__schritte li{display:flex;align-items:center;gap:8px}
.wahl__schritte .punkt{width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;font-size:.75rem;font-weight:600;background:var(--flaeche);color:var(--text-2);transition:background-color var(--t-mittel),color var(--t-mittel)}
.wahl__schritte li.ist-aktiv{color:var(--text)}
.wahl__schritte li.ist-aktiv .punkt{background:var(--petrol);color:#fff}
.wahl__schritte li.ist-fertig .punkt{background:var(--kupfer);color:#fff;font-size:0}
.wahl__schritte li.ist-fertig .punkt::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.wahl__frage{font:600 clamp(1.3rem,1.1rem + .8vw,1.75rem)/1.2 var(--f-display);margin-bottom:16px}

.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:8px 8px 14px;background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-20);cursor:pointer;transition:border-color var(--t-kurz),box-shadow var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
.kachel:hover{border-color:var(--petrol);box-shadow:var(--schatten-hoch);transform:translateY(-2px)}
.kachel:active{transform:translateY(0) scale(.99)}
.kachel__bild{display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-14);overflow:hidden;background:var(--flaeche);margin-bottom:10px}
.kachel__bild img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lang) var(--ease)}
.kachel:hover .kachel__bild img{transform:scale(1.04)}
.kachel__titel{font:600 1.0625rem/1.25 var(--f-text);padding-inline:6px}
.kachel__satz{font-size:.9375rem;line-height:1.35;color:var(--text-2);padding-inline:6px}
.kachel__haken{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:var(--r-pill);background:var(--kupfer);color:#fff;display:grid;place-items:center;transform:scale(.4);opacity:0;transition:transform var(--t-mittel) var(--ease),opacity var(--t-kurz)}
.kachel__haken .ic{stroke-width:2.5;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 380ms var(--ease) 120ms}
.kachel[aria-pressed="true"]{border-color:var(--kupfer);box-shadow:0 0 0 3px rgba(181,100,60,.18)}
.kachel[aria-pressed="true"] .kachel__haken{transform:scale(1);opacity:1}
.kachel[aria-pressed="true"] .kachel__haken .ic{stroke-dashoffset:0}
.wahl__direkt{margin-top:16px;font-size:.9375rem;color:var(--text-2)}
.wahl__direkt a{color:var(--petrol);font-weight:600}

/* Ansicht 2 */
.wahl__ansicht{animation:einblenden var(--t-mittel) var(--ease) both}
@keyframes einblenden{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kontakt__kopf{display:grid;gap:8px;margin-bottom:18px}
.zurueck{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;color:var(--petrol);font-weight:500;font-size:.9375rem;cursor:pointer}
.zurueck:hover{text-decoration:underline}
.kontakt__titel{font:600 clamp(1.5rem,1.2rem + 1.2vw,2.1rem)/1.15 var(--f-display);outline:none}
.kontakt__tipp{color:var(--text-2);max-width:60ch}
.wege{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.weg{background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-20);padding:16px;display:grid;gap:12px;font-size:.9375rem;line-height:1.45;color:var(--text-2)}
.weg--anruf{border-color:var(--petrol)}
.weg__titel{font:600 1.0625rem/1.3 var(--f-text);color:var(--text)}
.felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.feld{display:grid;gap:4px;font-size:.8125rem;font-weight:500;color:var(--text)}
.feld--breit{grid-column:1/-1}
.feld input{width:100%;min-height:46px;padding:.6em .8em;border:1.5px solid #B9B1A2;border-radius:var(--r-10);background:#fff;font-size:1rem;caret-color:var(--petrol);transition:border-color var(--t-kurz),box-shadow var(--t-kurz)}
.feld input::placeholder{color:#6B7472}
.feld input:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(31,77,74,.16)}
.feld input.ist-falsch{border-color:#A3352B}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;line-height:1.45}
.zustimmung input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--petrol)}
.zustimmung a{color:var(--petrol)}
.fehler{color:#A3352B;font-size:.875rem;font-weight:500}
.weg--danke{grid-column:3;border-color:var(--petrol)}

/* Vertrauensleiste */
.leiste{background:var(--flaeche);border-block:1px solid var(--linie)}
.leiste__liste{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding-block:18px}
.leiste__liste li{display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:500;line-height:1.3;padding:6px 16px;border-left:1px solid var(--linie)}
.leiste__liste li:first-child{border-left:0;padding-left:0}
.leiste__liste .ic{color:var(--petrol);width:22px;height:22px}

/* Abschnitte */
.abschnitt{padding-block:clamp(56px,7vw,104px)}

/* Notfälle */
.notfall-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;margin-top:clamp(28px,3.5vw,48px);padding-top:28px;border-top:1px solid var(--linie)}
.notfall-liste dt{font:600 1.25rem/1.25 var(--f-display);margin-bottom:6px}
.notfall-liste dd{color:var(--text-2);max-width:34ch}
.leistungen__titel{margin-top:clamp(48px,6vw,80px);margin-bottom:18px}
.leistungen{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
.leistung{background:var(--karte);border-radius:var(--r-26);overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);box-shadow:var(--schatten)}
.leistung img{width:100%;height:100%;object-fit:cover;min-height:180px}
.leistung__text{padding:20px 22px;display:grid;align-content:center;gap:8px}
.leistung h4{font:600 1.375rem/1.2 var(--f-display)}
.leistung p{color:var(--text-2);font-size:.9875rem}
.leistung--gross{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.leistung--gross img{aspect-ratio:16/10;height:100%}
.leistung--gross .leistung__text{padding:24px 28px 28px}
.leistung--gross h4{font-size:1.75rem}
.mitte{margin-top:36px;text-align:center}

/* Vergleich (einzige dunkle Fläche) */
.vergleich{background:var(--petrol-dunkel);color:#E9E4DA}
.vergleich__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:start}
.vergleich__kopf{display:grid;gap:14px;position:sticky;top:100px}
.vergleich__einl{color:#C9D3CF;max-width:40ch}
.vergleich__mensch{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:.9375rem;color:#C9D3CF}
.portrait--eckig{width:96px;height:120px;border-radius:var(--r-14);padding:8px;flex:none}
.tabelle{display:grid}
.tabelle__kopf,.zeile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:20px;padding-block:16px}
.tabelle__kopf{font-size:.8125rem;font-weight:600;color:#AFC0BB;border-bottom:1px solid rgba(233,228,218,.22);padding-top:0}
.tabelle__kopf span:nth-child(2){color:var(--kupfer-hell)}
.zeile{border-bottom:1px solid rgba(233,228,218,.12)}
.zeile__frage{font-weight:600;color:#fff}
.zeile__asn{color:#fff;position:relative;padding-left:26px}
.zeile__asn::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:var(--r-pill);background:var(--kupfer)}
.zeile__asn::after{content:"";position:absolute;left:5px;top:calc(.35em + 4px);width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.zeile__andere{color:#AFC0BB}
.tabelle__knopf{margin-top:28px}

/* Ablauf */
.schritte{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(28px,3.5vw,48px);position:relative}
.schritte::before{content:"";position:absolute;left:22px;right:calc((100% - 72px) / 4 - 22px);top:22px;height:2px;background:var(--linie)}
.schritte::after{content:"";position:absolute;left:22px;right:calc((100% - 72px) / 4 - 22px);top:22px;height:2px;background:var(--petrol);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.schritte.ist-sichtbar::after{transform:scaleX(1)}
.schritte li{position:relative;z-index:1;display:grid;gap:8px;align-content:start}
.schritte__nr{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--grund);border:2px solid var(--petrol);color:var(--petrol);font:600 1.125rem/1 var(--f-display);margin-bottom:6px}
.schritte h3{font:600 1.25rem/1.25 var(--f-display)}
.schritte p{color:var(--text-2);max-width:30ch}

/* Einzugsgebiet */
.gebiet{background:var(--flaeche)}
.gebiet__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.gebiet__bild img{border-radius:var(--r-26);aspect-ratio:4/3;object-fit:cover;width:100%}
.gebiet__text{display:grid;gap:16px}
.gebiet__text p:not(.kicker){color:var(--text-2);max-width:48ch}

/* FAQ */
.faq__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq__titel{position:sticky;top:100px}
.fragen{display:grid;gap:10px}
.fragen details{background:var(--karte);border-radius:var(--r-20);box-shadow:var(--schatten);overflow:hidden}
.fragen summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:1.0625rem;cursor:pointer}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary .ic{color:var(--petrol);transition:transform var(--t-mittel) var(--ease)}
.fragen details[open] summary .ic{transform:rotate(180deg)}
.antwort{padding:0 22px 20px;color:var(--text-2);max-width:68ch}
.fragen details[open] .antwort{animation:einblenden var(--t-mittel) var(--ease)}

/* Final-CTA */
.schluss{padding-top:0}
.schluss__karte{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--karte);border-radius:var(--r-26);overflow:hidden;box-shadow:var(--schatten);border:1px solid var(--linie)}
.schluss__text{padding:clamp(24px,4vw,56px);display:grid;gap:16px;align-content:center}
.schluss__text>p{color:var(--text-2);max-width:42ch}
.schluss__knoepfe{display:grid;gap:10px;max-width:420px;margin-top:6px}
.schluss__bild img{width:100%;height:100%;object-fit:cover;min-height:260px}

/* Fuß */
.fuss{background:var(--petrol-dunkel);color:#C9D3CF;font-size:.9375rem;padding-block:40px 48px}
.fuss__raster{display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px 40px}
.fuss__marke{font:600 1.25rem/1 var(--f-display);margin-bottom:12px}
.fuss__links{display:flex;gap:20px}
.fuss__links a{color:#E9E4DA}

/* Mobil-Leiste */
.mobil-leiste{display:none}

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{opacity:0;transform:translateY(14px);transition:opacity var(--t-lang) var(--ease),transform var(--t-lang) var(--ease);transition-delay:var(--rv-d,0ms)}
  .js [data-rv].ist-sichtbar{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}

/* Tablet */
@media (max-width:1023px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wege{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .weg--rueckruf,.weg--danke{grid-column:1/-1}
  .leiste__liste{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .leiste__liste li:nth-child(4){border-left:0;padding-left:0}
  .notfall-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistungen{grid-template-columns:1fr}
  .leistung--gross{grid-row:auto}
  .vergleich__raster,.faq__raster,.gebiet__raster{grid-template-columns:1fr}
  .vergleich__kopf,.faq__titel{position:static}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .schritte::before,.schritte::after{display:none}
}

/* Mobil */
@media (max-width:767px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html{scroll-padding-top:72px}
  .kopf__innen{min-height:58px}
  .wortmarke{font-size:1.0625rem}
  .kopf__hinweis,.nur-gross{display:none}
  .nur-klein{display:inline}
  .hero{padding-top:14px}
  .hero__kopf{grid-template-columns:1fr}
  .hero__text{gap:8px}
  .hero__sub{font-size:1rem;line-height:1.5}
  .hero__mensch{display:none}
  .wahl{margin-top:16px;padding:12px;border-radius:var(--r-20)}
  .wahl__schritte{font-size:.8125rem;gap:6px 14px;margin-bottom:8px}
  .wahl__frage{font-size:1.25rem;margin-bottom:10px}
  .kacheln{gap:8px}
  .kachel{padding:5px 5px 10px;border-radius:var(--r-14)}
  .kachel__bild{aspect-ratio:16/10;border-radius:var(--r-10);margin-bottom:6px}
  .kachel__titel{font-size:.9375rem;padding-inline:4px}
  .kachel__satz{font-size:.8125rem;padding-inline:4px}
  .kachel__haken{top:10px;right:10px;width:26px;height:26px}
  .wahl__direkt{margin-top:10px;font-size:.875rem}
  .wege{grid-template-columns:1fr}
  .felder{grid-template-columns:1fr}
  .leiste__liste{grid-template-columns:1fr;padding-block:14px}
  .leiste__liste li{border-left:0;padding:6px 0}
  .notfall-liste{grid-template-columns:1fr;gap:20px}
  .leistung{grid-template-columns:1fr}
  .leistung img{aspect-ratio:16/9;height:auto;min-height:0}
  .tabelle__kopf{display:none}
  .zeile{grid-template-columns:1fr;gap:6px;padding-block:18px}
  .zeile__andere{padding-left:26px;font-size:.9375rem}
  .zeile__andere::before{content:"Hotline: ";font-weight:600}
  .tabelle__knopf .knopf{width:100%}
  .schritte{grid-template-columns:1fr;row-gap:22px;padding-left:0}
  .schritte li{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .schritte__nr{grid-row:1/3;margin:0}
  .schluss__karte{grid-template-columns:1fr}
  .schluss__bild{order:-1}
  .schluss__bild img{min-height:0;aspect-ratio:16/9;height:auto}
  .fuss__raster{grid-template-columns:1fr}
  .mobil-leiste{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(245,242,236,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--linie)}
  .mobil-leiste .knopf{min-height:52px;width:100%}
  .knopf--gross{padding:.8em 1.1em;font-size:1rem}
}
@media (max-width:359px){
  .kachel__satz{display:none}
  .wortmarke{font-size:1rem}
}