/* Afred Trockenbau – afred-trockenbau.at · Gestaltung „Ständerwerk“ (_pruefung/design.md)
   Mobile-first; Breakpoints 360 · 600 · 768 · 1024 · 1100 · 1280. Keine Inline-Styles:
   Zustände nur über Klassen und Attribute. Abschnitte: 1 Tokens · 2 Grundlagen · 3 Raster,
   Signatures · 4 Typografie · 5 Buttons, Status · 6 Header, Menü · 7 Sektionen · 8 Formular ·
   9 Footer, Leiste · 10 Lightbox · 11 Unterseiten · 12 Bewegung */

/* ------------------------------------------------------------ 1  Tokens */
:root {
  color-scheme: light;

  /* Farben: Flächen hell */
  --gips-50:  #f6f4f0;
  --gips-100: #eeebe5;
  --weiss:    #ffffff;

  /* Farben: Flächen dunkel */
  --graphit-800: #2a2e32;
  --graphit-900: #1e2124;
  --graphit-950: #15181c;

  /* Farben: Text auf hell */
  --text-stark:       #1e2124;
  --text:             #2b2f33;
  --text-leise:       #5c6166;
  --text-platzhalter: #6b7075;

  /* Farben: Text auf dunkel */
  --auf-dunkel-stark: #f6f4f0;
  --auf-dunkel:       #e6e2da;
  --auf-dunkel-leise: #a3a7ab;

  /* Akzent Bernstein */
  --akzent:      #e08a2e;
  --akzent-hell: #eea552;
  --akzent-tief: #d27d22;
  --akzent-text: #96560f;

  /* Status */
  --offen:        #1d7846;
  --offen-dunkel: #6fcf97;
  --zu:           var(--text-leise);
  --zu-dunkel:    var(--auf-dunkel-leise);
  --fehler:       #b3261e;

  /* Linien, Rahmen, Fokus */
  --rahmen-feld:  #85817a;
  --linie:        #dcd7ce;
  --linie-dunkel: #3a3f44;
  --raster:        rgb(30 33 36 / .07);
  --raster-dunkel: rgb(246 244 240 / .07);  --fokus:        #96560f;
  --fokus-dunkel: #eea552;
  --auswahl:      #eea552;
  --marker-offen: #fbe3bf;

  /* Schriften */
  --schrift-titel: 'Outfit', 'Outfit Fallback', 'Segoe UI', Arial, sans-serif;
  --schrift-text:  'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, Arial, sans-serif;

  /* Typo-Skala (320 → 1440 px) */
  --t-display: clamp(2.25rem, 1.607rem + 3.214vw, 4.5rem);
  --t-h2:      clamp(1.875rem, 1.482rem + 1.964vw, 3.25rem);
  --t-h3:      clamp(1.25rem, 1.143rem + 0.536vw, 1.625rem);
  --t-h4:      clamp(1.125rem, 1.089rem + 0.179vw, 1.25rem);
  --t-zahl:    clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
  --t-lead:    clamp(1.125rem, 1.071rem + 0.268vw, 1.3125rem);  --t-body:    clamp(1rem, 0.982rem + 0.089vw, 1.0625rem);
  --t-klein:   clamp(0.875rem, 0.857rem + 0.089vw, 0.9375rem);  --t-kicker:  0.8125rem;
  --t-echo:    0.9375rem;
  --t-menue:   1.75rem;

  /* Abstände (4er-Basis) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-abschnitt: clamp(4rem, 2.714rem + 6.429vw, 8.5rem);
  --s-kopf:      clamp(2rem, 1.429rem + 2.857vw, 4rem);
  --s-karte:     clamp(1.5rem, 1.071rem + 2.143vw, 2.5rem);
  /* Raster und Breiten */
  --rand:   clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --breite: 77.5rem;
  --breite-text: 44rem;
  --mass-lead: 52ch;
  --mass-text: 68ch;
  --spalten: 4;
  --gutter: 1rem;
  --kopf-h: 4rem;
  --leiste-h: 4rem;

  /* Radien */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-rund: 50%;

  /* Linienstärken */
  --linie-haar: 1px;
  --linie-profil: 1.5px;
  --linie-kante: 2px;

  /* Schatten */
  --schatten-kopf:   0 1px 0 var(--linie), 0 8px 24px -16px rgb(30 33 36 / .18);
  --schatten-bild:   0 24px 48px -24px rgb(30 33 36 / .28);
  --schatten-dialog: 0 32px 80px -24px rgb(0 0 0 / .5);
  --schatten-leiste: 0 -8px 24px -12px rgb(0 0 0 / .35);

  /* Z-Ebenen */
  --z-raster: 0;
  --z-inhalt: 1;
  --z-ueberlapp: 2;
  --z-sticky: 10;
  --z-leiste: 40;
  --z-kopf: 50;
  --z-menue: 60;
  --z-skip: 70;
  --z-dialog: 80;

  /* Bewegung */
  --dauer-hover: 150ms;
  --dauer-ui: 240ms;
  --dauer-einblenden: 600ms;
  --dauer-linie: 900ms;
  --dauer-lightbox: 200ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kurve-raus: cubic-bezier(.4, 0, 1, 1);

  /* abgeleitet */
  --rand-l: max(var(--rand), env(safe-area-inset-left));
  --rand-r: max(var(--rand), env(safe-area-inset-right));
}

@media (min-width: 600px)  { :root { --t-echo: 1.125rem } }
@media (min-width: 768px)  { :root { --spalten: 8;  --gutter: 1.5rem } }
@media (min-width: 1024px) { :root { --spalten: 12 } }
@media (min-width: 1100px) { :root { --kopf-h: 4.5rem } }

/* ------------------------------------------------------- 2  Grundlagen */
*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); scrollbar-gutter: stable }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
}
html.gesperrt { overflow: hidden; overscroll-behavior: none }

body {
  margin: 0;
  min-width: 320px;
  background: var(--gips-50);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-stark); text-wrap: balance }
h1, h2, h3 { font-family: var(--schrift-titel) }
h1 { font-weight: 600; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.015em }
h2 { font-weight: 600; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.015em; max-width: 22ch }
h3 { font-weight: 500; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.005em }
h4 { font-family: var(--schrift-text); font-weight: 600; font-size: var(--t-h4); line-height: 1.35 }
p, ul, ol, dl, dd, figure, address { margin: 0 }
p { text-wrap: pretty }
ul, ol { padding: 0 }
address { font-style: normal }
strong { font-weight: 600; color: var(--text-stark) }
img, svg, picture { display: block }
img { max-width: 100%; height: auto }
a { color: inherit }
a[href^="tel:"]:not(.btn) { white-space: nowrap }
button, input, select, textarea { font: inherit; color: inherit }
table { border-collapse: collapse }
[hidden] { display: none !important }

::selection { background: var(--auswahl); color: var(--text-stark) }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px }
.dunkel :focus-visible { outline-color: var(--fokus-dunkel) }
main:focus { outline: none }

.dunkel { background: var(--graphit-900); color: var(--auf-dunkel) }
.dunkel :is(h1, h2, h3, h4, strong) { color: var(--auf-dunkel-stark) }

/* ------------------------------------ 3  Hilfsklassen, Raster, Signatures */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }

.i, .i-profil, .leistung-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; flex: none }
.i { width: 24px; height: 24px }
.i-klein { width: 16px; height: 16px }
:is(.i, .i-profil, .leistung-icon) :is(path, use) { vector-effect: non-scaling-stroke }

.skip { position: absolute; top: 8px; left: 8px; z-index: var(--z-skip); transform: translateY(-200%) }
.skip:focus { transform: none }

.wrap { width: 100%; max-width: calc(var(--breite) + var(--rand-l) + var(--rand-r)); margin-inline: auto; padding-inline: var(--rand-l) var(--rand-r) }

.raster { display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); column-gap: var(--gutter) }
.raster > * { grid-column: 1 / -1; min-width: 0 }

.staenderwerk { position: relative }
.staenderwerk::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--rand-l) - var(--gutter) / 2);
  right: calc(var(--rand-r) - var(--gutter) / 2);
  z-index: var(--z-raster);
  pointer-events: none;
  background: linear-gradient(to right, var(--raster) 1px, transparent 1px) 0 0 / calc(100% / var(--spalten)) 100% repeat-x;
  border-right: 1px solid var(--raster);
  transform-origin: top;
}
.dunkel .staenderwerk::before, .staenderwerk.dunkel::before { background-image: linear-gradient(to right, var(--raster-dunkel) 1px, transparent 1px); border-right-color: var(--raster-dunkel) }
.staenderwerk > * { position: relative; z-index: var(--z-inhalt) }

.mk {
  --mk-farbe: rgb(92 97 102 / .6);
  --mk-akzent: var(--akzent-text);
  --mk-l: linear-gradient(var(--mk-farbe), var(--mk-farbe));
  --mk-t: linear-gradient(-45deg, transparent calc(50% - .9px), var(--mk-akzent) calc(50% - .9px), var(--mk-akzent) calc(50% + .9px), transparent calc(50% + .9px));
  /* waagrecht: Knoten links bzw. links und rechts */
  --mk-h: var(--mk-t) 0 0 / 9px 9px no-repeat, var(--mk-l) 4px 0 / 1px 9px no-repeat, var(--mk-l) 4px 4px / 100% 1px no-repeat;
  --mk-h2: var(--mk-t) 0 0 / 9px 9px no-repeat, var(--mk-t) 100% 0 / 9px 9px no-repeat, var(--mk-l) 4px 0 / 1px 9px no-repeat, var(--mk-l) calc(100% - 4px) 0 / 1px 9px no-repeat, var(--mk-l) 4px 4px / calc(100% - 8px) 1px no-repeat;
}
.dunkel .mk { --mk-farbe: rgb(163 167 171 / .6); --mk-akzent: var(--akzent-hell) }

.masskette { list-style: none; display: flex; flex-direction: column }
.masskette li {
  position: relative;
  padding: 0 0 14px 24px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-kicker);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-stark);
}
.masskette li:last-child { padding-bottom: 0 }
.masskette li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9px;
  background:
    var(--mk-t) 0 calc(.7em - 4.5px) / 9px 9px no-repeat,
    var(--mk-l) 0 .7em / 9px 1px no-repeat,
    var(--mk-l) 4px 0 / 1px 100% no-repeat;
}
.masskette li:first-child::before { top: calc(.7em - 4.5px); background-position: 0 0, 0 4.5px, 4px 4.5px }
.masskette li:last-child::before { bottom: auto; height: calc(.7em + 4.5px) }
.masskette li:only-child::before { height: 9px }

@media (min-width: 600px) {
  .masskette { flex-direction: row }
  .masskette li { flex: 1 1 0; padding: 0 20px 22px 0 }
  .masskette li:last-child { padding-bottom: 22px }
  .masskette li::before,
  .masskette li:first-child::before,
  .masskette li:last-child::before { left: -4.5px; right: -4.5px; top: auto; bottom: 0; width: auto; height: 9px; background: var(--mk-h) }
  .masskette li:last-child::before { background: var(--mk-h2);
  }
}

/* ---------------------------------------------- 4  Typografie-Bausteine */
.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-kicker);
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-stark);
}
.i-profil { width: 8px; height: 14px; margin-right: 2px; color: var(--akzent-text) }
.kicker-nr { color: var(--akzent-text) }
.dunkel .kicker { color: var(--auf-dunkel-stark) }
.dunkel :is(.i-profil, .kicker-nr) { color: var(--akzent-hell) }

.echo {
  margin-bottom: 16px;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--t-echo);
  line-height: 1.2;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-stark);
}
@media (min-width: 600px) { .echo { font-weight: 300; letter-spacing: .32em } }

.lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--mass-lead); color: var(--text) }
.dunkel .lead { color: var(--auf-dunkel) }
.intro { max-width: var(--mass-lead); font-size: var(--t-body); line-height: 1.65 }
.kopfgruppe h2 + .intro { margin-top: 20px }

.abschnitt { padding-block: var(--s-abschnitt) }
.abschnitt-innen { padding-block: var(--s-abschnitt) }
.kopfgruppe { margin-bottom: var(--s-kopf) }

.knopfreihe { display: flex; flex-direction: column; gap: 12px }
@media (min-width: 600px) {
  .knopfreihe { flex-direction: row; flex-wrap: wrap; align-items: center }
}

.strichliste { list-style: none; display: grid; gap: 6px }
.strichliste li { position: relative; padding-left: 20px }
.strichliste li::before { content: ""; position: absolute; left: 0; top: .82em; width: 8px; height: 1.5px; background: var(--akzent-text) }

.text-kurz { display: inline }
.text-lang { display: none }
@media (min-width: 600px) {
  .text-kurz { display: none }
  .text-lang { display: inline }
}

/* ---------------------------- 5  Buttons, Textlinks, Status-Pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dauer-hover), color var(--dauer-hover), box-shadow var(--dauer-hover);
}
.btn .i { width: 20px; height: 20px }
.btn .i-pfeil { transition: transform var(--dauer-hover) var(--kurve) }
.btn-klein { min-height: 44px; padding: 0 18px; font-size: .9375rem }

.btn-primaer { background: var(--akzent); color: var(--text-stark); box-shadow: inset 0 0 0 1px var(--akzent-text) }
.dunkel .btn-primaer { box-shadow: none }
.btn-primaer:active { background: var(--akzent-tief); transform: translateY(1px) }

.btn-sekundaer { color: var(--text-stark); box-shadow: inset 0 0 0 1.5px var(--text-stark) }
.btn-sekundaer:active { background: var(--graphit-800); color: var(--gips-50) }

.btn-sekundaer-dunkel { color: var(--auf-dunkel-stark); box-shadow: inset 0 0 0 1.5px var(--auf-dunkel) }
.btn-sekundaer-dunkel:active { background: var(--auf-dunkel); color: var(--text-stark) }

.btn:disabled, .btn[aria-disabled="true"] { background: var(--gips-100); color: var(--text-leise); box-shadow: inset 0 0 0 1px var(--linie); cursor: not-allowed; transform: none }

@media (hover: hover) {
  .btn-primaer:hover { background: var(--akzent-hell) }
  .btn:hover .i-pfeil { transform: translateX(4px) }
  .btn-sekundaer:hover { background: var(--graphit-900); color: var(--gips-50) }
  .btn-sekundaer-dunkel:hover { background: var(--gips-50); color: var(--text-stark) }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--gips-100); color: var(--text-leise) }
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-stark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--akzent-text);
  text-underline-offset: 4px;
  transition: color var(--dauer-hover);
}
.textlink .i { width: 20px; height: 20px }
.textlink .i-pfeil { transition: transform var(--dauer-hover) var(--kurve) }
.textlink-inline { color: var(--text-stark); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--akzent-text); text-underline-offset: 4px }
.dunkel :is(.textlink, .textlink-inline) { color: var(--auf-dunkel-stark); text-decoration-color: var(--akzent-hell) }
@media (hover: hover) {
  :is(.textlink, .textlink-inline):hover { color: var(--akzent-text); text-decoration-thickness: 2px }
  .textlink:hover .i-pfeil { transform: translateX(3px) }
  .dunkel :is(.textlink, .textlink-inline):hover { color: var(--akzent-hell) }
}
:is(.textlink, .textlink-inline):focus-visible { outline-offset: 2px }

/* Status-Pill: ohne JS stehen die Zeiten darin, site.js setzt den Live-Status */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--linie);
  font-weight: 500;
  font-size: var(--t-klein);
  line-height: 1.35;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.status .status-uhr { width: 16px; height: 16px; color: var(--text-leise) }
.status-punkt { position: relative; flex: none; width: 8px; height: 8px; border-radius: var(--radius-rund); box-shadow: inset 0 0 0 1.5px var(--zu) }
.status[data-zustand="offen"] .status-punkt { background: var(--offen); box-shadow: none }
.status[data-zustand="offen"] .status-punkt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--offen); opacity: 0 }
.status-wort { color: var(--text-stark) }
.status[data-zustand="offen"] .status-wort { color: var(--offen) }
.dunkel .status { box-shadow: inset 0 0 0 1px var(--linie-dunkel); color: var(--auf-dunkel) }
.dunkel .status .status-uhr { color: var(--auf-dunkel-leise) }
.dunkel .status-punkt { box-shadow: inset 0 0 0 1.5px var(--zu-dunkel) }
.dunkel .status[data-zustand="offen"] .status-punkt,
.dunkel .status[data-zustand="offen"] .status-punkt::after { background: var(--offen-dunkel) }
.dunkel .status-wort, .dunkel .status[data-zustand="offen"] .status-wort { color: var(--auf-dunkel-stark) }

/* ------------------------------- 6  Header, Navigation, mobiles Menü */
.kopf-sentinel { position: absolute; top: 8px; left: 0; width: 1px; height: 1px; pointer-events: none }

.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: var(--gips-50); transition: background-color 200ms var(--kurve), box-shadow 200ms var(--kurve) }
.kopf.gescrollt { background: rgb(246 244 240 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--schatten-kopf) }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf.gescrollt { background: var(--gips-50) }
}
html.menue-offen .kopf { background: var(--gips-50); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--linie) }

.kopf-innen { display: flex; align-items: center; gap: 16px; height: var(--kopf-h) }

.kopf-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  border-radius: var(--radius-1);
  transform-origin: left center;
  transition: transform 200ms var(--kurve), opacity var(--dauer-hover);
}
.kopf-logo img { width: auto; height: 40px }
.kopf.gescrollt .kopf-logo { transform: scale(.9) }
@media (hover: hover) { .kopf-logo:hover { opacity: .8 } }
@media (min-width: 1100px) { .kopf-logo img { height: 48px } }

.nav { display: none }
.nav-liste { list-style: none; display: flex; gap: 28px }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dauer-hover);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 7px;
  height: 2px;
  background: var(--akzent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-hover) var(--kurve);
}
.nav a[aria-current="true"] { color: var(--text-stark) }
.nav a[aria-current="true"]::after { transform: scaleX(1) }
.nav a:active { color: var(--akzent-text) }
@media (hover: hover) {
  .nav a:hover { color: var(--text-stark) }
  .nav a:hover::after { transform: scaleX(1) }
}
@media (min-width: 1100px) {
  .nav { display: block; margin-inline: auto }
}

.kopf-aktionen { display: flex; align-items: center; gap: 4px; margin-left: auto }
@media (min-width: 1100px) { .kopf-aktionen { margin-left: 0; gap: 12px } }

.kopf-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-1);
  color: var(--text-stark);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color var(--dauer-hover);
}
.kopf-tel .i { width: 22px; height: 22px }
.kopf-tel:active { background: var(--linie) }
.kopf-tel-nummer { display: none }
@media (hover: hover) { .kopf-tel:hover { background: var(--gips-100) } }
@media (min-width: 1280px) {
  .kopf-tel { padding: 0 10px }
  .kopf-tel .i { width: 20px; height: 20px }
  .kopf-tel-nummer { display: inline }
}

.kopf-cta { display: none }
@media (min-width: 600px) { .kopf-cta { display: inline-flex; margin-left: 4px } }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  margin-right: -12px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--text-stark);
  font-weight: 500;
  font-size: .9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dauer-hover);
}
html:not(.js) .menue-knopf { visibility: hidden }
@media (max-width: 1099px) { html:not(.js) .kopf { position: relative } }
@media (hover: hover) { .menue-knopf:hover { background: var(--gips-100) } }
.menue-linien { position: relative; width: 20px; height: 7.5px }
.menue-linien::before, .menue-linien::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dauer-ui) var(--kurve) }
.menue-linien::before { top: 0 }
.menue-linien::after { bottom: 0 }
.menue-knopf[aria-expanded="true"] .menue-linien::before { transform: translateY(3px) rotate(45deg) }
.menue-knopf[aria-expanded="true"] .menue-linien::after { transform: translateY(-3px) rotate(-45deg) }
.menue-wort { display: none }
@media (min-width: 360px) { .menue-wort { display: inline } }
@media (min-width: 600px) { .menue-knopf { margin-left: 4px } }
@media (min-width: 1100px) { .menue-knopf { display: none } }

.nav-ohne-js ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 20px; padding-bottom: 8px }
.nav-ohne-js a { display: flex; align-items: center; min-height: 44px; font-weight: 500; font-size: .9375rem; color: var(--text-stark) }
@media (min-width: 1100px) { .nav-ohne-js { display: none } }

.menue {
  position: fixed;
  top: var(--kopf-h);
  left: 0; right: 0;
  height: calc(100vh - var(--kopf-h));
  height: calc(100dvh - var(--kopf-h));
  z-index: var(--z-menue);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gips-50);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms var(--kurve-raus), transform 180ms var(--kurve-raus);
}
.menue.offen { opacity: 1; transform: none; transition: opacity var(--dauer-ui) var(--kurve), transform var(--dauer-ui) var(--kurve) }
@media (min-width: 1100px) { .menue { display: none !important } }
.menue-innen { min-height: 100%; padding-top: 8px; padding-bottom: calc(32px + env(safe-area-inset-bottom)) }
.menue-liste { list-style: none }
.menue-liste a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-left: 16px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-menue);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-stark);
  text-decoration: none;
  transition: color var(--dauer-hover), background-color var(--dauer-hover);
}
.menue-liste a::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px; background: var(--akzent); transform: scaleY(0); transition: transform var(--dauer-hover) }
.menue-nr { width: 22px; font-size: .875rem; color: var(--text-leise); letter-spacing: 0 }
.menue-liste a[aria-current="true"]::before { transform: none }
.menue-liste a[aria-current="true"] .menue-nr { color: var(--akzent-text) }
.menue-liste a:active { background: var(--gips-100) }
.menue-liste a:focus-visible { outline-offset: -3px }
@media (hover: hover) { .menue-liste a:hover { color: var(--akzent-text) } }
.menue-fuss { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px }
.menue-fuss .status { align-self: flex-start; margin-bottom: 4px }
.menue-fuss .textlink { align-self: flex-start }
@media (min-width: 600px) {
  .menue-fuss { flex-direction: row; flex-wrap: wrap; align-items: center }
  .menue-fuss .status { flex-basis: 100%; align-self: auto; margin-right: auto; max-width: max-content }
}

/* ------------------------------------------ 7  Sektionen der Startseite */

/* ----- Hero ----- */
.hero { overflow-x: clip }
.hero-raster { padding-top: clamp(2rem, 1rem + 5vw, 5.5rem); padding-bottom: var(--s-8); row-gap: var(--s-7) }
.hero h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.02em; max-width: 16ch }
.hero .lead { margin-top: 24px }
.hero-knoepfe { margin-top: 32px }
.hero-status { margin-top: 16px }
.hero-masskette { margin-top: 48px }

.hero-bilder { display: flex; flex-direction: column }
.hero-haupt { width: 100%; max-width: 551px }
.hero-haupt img { width: 100%; background: var(--linie) }
.hero-neben {
  align-self: flex-end;
  width: 50%;
  max-width: 294px;
  margin-top: -48px;
  padding: 6px;
  background: var(--gips-50);
  box-shadow: var(--schatten-bild);
  position: relative;
  z-index: var(--z-ueberlapp);
}
.hero-neben img { width: 100%; background: var(--linie) }

@media (max-width: 599px) {
  .hero-knoepfe .btn { width: 100% }
}
@media (min-width: 600px) {
  .hero-bilder { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end }
  .hero-haupt { grid-column: 1 / 6; grid-row: 1 }
  .hero-neben { grid-column: 5 / 9; grid-row: 2; align-self: start; width: 100%; margin-top: -96px; padding: 8px }
}
@media (min-width: 1024px) {
  .hero-raster { align-items: start; padding-bottom: var(--s-8) }
  .hero-text { grid-column: 1 / 7; grid-row: 1; padding-top: 8px }
  .hero-bilder { grid-column: 7 / 13; grid-row: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch }
  .hero-haupt { grid-column: 2 / 7; grid-row: 1; justify-self: end }
  .hero-neben { grid-column: 1 / 4; grid-row: 1; align-self: end; margin: 0 0 -96px }
  .hero-masskette { max-width: 36rem }
  .hero-knoepfe .btn-sekundaer .text-lang { display: none }
  .hero-knoepfe .btn-sekundaer .text-kurz { display: inline }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-knoepfe .btn-primaer .text-lang { display: none }
  .hero-knoepfe .btn-primaer .text-kurz { display: inline }
  .hero-bilder { align-self: center }
}

/* ----- Vorteile ----- */
.vorteile { padding-top: var(--s-7); padding-bottom: calc(var(--s-abschnitt) * .5) }
.vorteile .wrap { position: relative }
.vorteile-liste { list-style: none; display: grid; gap: 1px; background: var(--linie); border-top: 1px solid var(--linie) }
.vorteil { background: var(--gips-50); padding: 24px 0 }
.vorteil .index { display: block; margin-bottom: 12px; font-family: var(--schrift-titel); font-weight: 500; font-size: var(--t-kicker); letter-spacing: .12em; color: var(--akzent-text) }
.vorteil h3 { font-size: var(--t-h4); line-height: 1.3; margin-bottom: 8px }
.vorteil p { font-size: var(--t-klein); line-height: 1.6 }
@media (min-width: 768px) {
  .vorteile-liste { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .vorteil { padding: 28px 24px 28px 0 }
  .vorteil:nth-child(even) { padding: 28px 0 28px 24px }
}
@media (min-width: 1024px) {
  .vorteile-liste { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .vorteil, .vorteil:nth-child(even) { padding: 32px 24px }
  .vorteil:first-child { padding-left: 0 }
  .vorteil:last-child { padding-right: 0 }
}

/* ----- Leistungen ----- */
.leistungen { background: var(--gips-100) }
.kopfgruppe-geteilt .intro { margin-top: 20px }
@media (min-width: 1024px) {
  .kopfgruppe-geteilt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end }
  .kopfgruppe-geteilt > div { grid-column: 1 / 7 }
  .kopfgruppe-geteilt .intro { grid-column: 8 / 13; margin-top: 0; padding-bottom: 4px }
}

.felder { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie) }
@media (min-width: 768px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .felder { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

.leistung {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-karte) 0;
  background: var(--gips-100);
  transition: background-color var(--dauer-ui) var(--kurve);
}
@media (min-width: 768px) { .leistung { padding: var(--s-karte) } }
.leistung::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-ui) var(--kurve);
}
.leistung:focus-within { background: var(--gips-50) }
.leistung:focus-within::before { transform: scaleX(1) }
@media (hover: hover) {
  .leistung:hover { background: var(--gips-50) }
  .leistung:hover::before { transform: scaleX(1) }
}
.leistung:target::before { animation: kante-ziel 2.4s var(--kurve) both }
@keyframes kante-ziel {
  0%, 80% { transform: scaleX(1) }
  100% { transform: scaleX(0) }
}

.leistung-kopf { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px }
.leistung-icon { width: 40px; height: 40px; color: var(--text-stark) }
.i-akzent { stroke: var(--akzent-text) }
.leistung-nr { font-weight: 500; font-size: .875rem; color: var(--text-leise) }
.leistung h3 { margin-bottom: 12px }
@media (min-width: 768px) { .leistung h3 { min-height: 2.5em } }
.anwendungen-titel {
  margin: 20px 0 8px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-kicker);
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.leistung .strichliste { font-size: var(--t-klein); line-height: 1.5; margin-bottom: 24px }
.leistung-link { margin-top: auto; align-self: flex-start }

/* ----- Über uns ----- */
.ueber-raster { row-gap: var(--s-7) }
.ueber-foto { order: 2 }
.planrahmen { position: relative; max-width: 294px; margin: 0 16px 16px 0 }
.planrahmen::after { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); border: 1px solid var(--linie-dunkel); pointer-events: none }
.planrahmen img { position: relative; z-index: 1; width: 100%; background: var(--graphit-800) }
.ueber-text .kopfgruppe { margin-bottom: 24px }
.fliesstext { display: grid; gap: 1em; max-width: var(--mass-text) }
.kennzeichen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-7); border-top: 1px solid var(--linie-dunkel) }
.kennzeichen-eintrag { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--linie-dunkel) }
.kennzeichen-eintrag:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linie-dunkel) }
.kennzeichen dt { font-size: var(--t-klein); line-height: 1.45; color: var(--auf-dunkel-leise) }
.kennzeichen dd { font-family: var(--schrift-titel); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; color: var(--auf-dunkel-stark) }
.kennzeichen-gross dd { font-size: var(--t-h3) }
.kennzeichen dd { text-wrap: balance }
.kennzeichen .zahl { display: inline-block; font-weight: 300; font-size: var(--t-zahl); line-height: .9; letter-spacing: -.02em; margin-right: 2px }
.kennzeichen .plus { color: var(--akzent-hell) }
@media (min-width: 768px) {
  .ueber-foto { order: 0; grid-column: 1 / 4 }
  .ueber-text { grid-column: 4 / 9 }
  .ueber-text { display: contents }
  .ueber-text > .kopfgruppe, .ueber-text > .fliesstext { grid-column: 4 / 9 }
  .ueber-text > .kopfgruppe { grid-row: 1 }
  .ueber-text > .fliesstext { grid-row: 2; align-self: start }
  .ueber-foto { grid-row: 1 / 3 }
  .kennzeichen { grid-column: 1 / -1; grid-row: 3; margin-top: 0 }
  .ueber-raster { row-gap: 0 }
  .kennzeichen { margin-top: var(--s-7) }
  .kennzeichen-eintrag { padding: 24px 24px 24px 0 }
  .kennzeichen-eintrag:nth-child(even) { padding: 24px 0 24px 24px }
  .planrahmen { margin: 0 }
}
@media (min-width: 1024px) {
  .ueber-foto { grid-column: 2 / 5; grid-row: 1 / 3; align-self: start; padding-top: 4px }
  .ueber-text > .kopfgruppe, .ueber-text > .fliesstext { grid-column: 6 / 12 }
  .kennzeichen { grid-column: 2 / 12; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr) }
  .kennzeichen-eintrag, .kennzeichen-eintrag:nth-child(even) { padding: 24px 20px 24px 24px; border-left: 1px solid var(--linie-dunkel) }
  .kennzeichen-eintrag:first-child { padding-left: 0; border-left: 0 }
}

/* ----- Ablauf ----- */
.kopfgruppe-schmal { max-width: 38rem }
.schritte { list-style: none; display: grid; gap: 40px }
.schritt { position: relative; padding-left: 40px }
.schritt::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: -40px;
  width: 9px;
  background:
    var(--mk-t) 0 calc(var(--nr-mitte) - 4.5px) / 9px 9px no-repeat,
    var(--mk-l) 0 var(--nr-mitte) / 9px 1px no-repeat,
    var(--mk-l) 4px 0 / 1px 100% no-repeat;
}
.schritt:first-child::before { top: calc(var(--nr-mitte) - 4.5px); background-position: 0 0, 0 4.5px, 4px 4.5px }
.schritt:last-child::before { bottom: auto; height: calc(var(--nr-mitte) + 4.5px) }
.schritt { --nr-mitte: calc(var(--t-zahl) * .75 * .5) }
.schritt-nr {
  display: block;
  margin-bottom: 16px;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: calc(var(--t-zahl) * .75);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text-stark);
}
.schritt h3 { margin-bottom: 10px }
.schritt p { max-width: 42ch }
.ablauf-cta { margin-top: var(--s-7) }
@media (max-width: 599px) { .ablauf-cta .btn { width: 100% } }

@media (min-width: 768px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7) }
  .schritt { padding: 28px 16px 0 0 }
  /* waagrechte Maßkette über den Nummern, je Reihe durchgehend */
  .schritt::before,
  .schritt:first-child::before,
  .schritt:last-child::before { left: calc(var(--gutter) / -2 - 4.5px); right: calc(var(--gutter) / -2 - 4.5px); top: 0; bottom: auto; width: auto; height: 9px; background: var(--mk-h) }
  .schritt:nth-child(2n)::before { background: var(--mk-h2) }
}
@media (min-width: 1024px) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .schritt:nth-child(2n)::before { background: var(--mk-h) }
  .schritt:last-child::before { background: var(--mk-h2) }
  /* DESIGN-04: Nummer, Titel und Text je Reihe auf gleicher Höhe */
  .schritte { grid-template-rows: auto auto auto; row-gap: 0 }
  .schritt { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start }
}

/* ----- Einblicke ----- */
.einblicke { background: var(--gips-100) }
.einblicke-raster { row-gap: var(--s-6) }
.einblicke-kopf { margin-bottom: 0 }
.foto { min-width: 0 }
.foto figcaption { margin-top: 8px; font-size: var(--t-klein); line-height: 1.5; color: var(--text-leise); max-width: 48ch }
.kachel { position: relative; display: block; overflow: hidden; background: var(--linie); -webkit-tap-highlight-color: transparent }
.kachel img { width: 100%; transition: transform 400ms var(--kurve) }
.foto-a .kachel { max-width: 551px }
.foto-d .kachel { max-width: 683px }
.schnittmarken {
  --m: linear-gradient(var(--gips-50), var(--gips-50));
  position: absolute;
  inset: 12px;
  opacity: 0;
  pointer-events: none;
  background:
    var(--m) 0 0 / 16px 1.5px, var(--m) 0 0 / 1.5px 16px,
    var(--m) 100% 0 / 16px 1.5px, var(--m) 100% 0 / 1.5px 16px,
    var(--m) 0 100% / 16px 1.5px, var(--m) 0 100% / 1.5px 16px,
    var(--m) 100% 100% / 16px 1.5px, var(--m) 100% 100% / 1.5px 16px;
  background-repeat: no-repeat;
  transition: opacity var(--dauer-hover);
}
.kachel-lupe {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--graphit-900);
  color: var(--gips-50);
  opacity: 0;
  transition: opacity var(--dauer-hover);
}
.kachel-lupe .i { width: 20px; height: 20px }
@media (hover: none) { .kachel-lupe { opacity: 1 } }
@media (hover: hover) {
  .kachel:hover img { transform: scale(1.03) }
  .kachel:hover :is(.schnittmarken, .kachel-lupe) { opacity: 1 }
}
.kachel:focus-visible :is(.schnittmarken, .kachel-lupe) { opacity: 1 }
.kachel:active img { transform: scale(.99) }

.bildkette { position: relative; padding-left: 20px }
.bildkette::before {
  content: "";
  position: absolute;
  left: 0; top: .75em;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background:
    var(--mk-t) 0 0 / 9px 9px no-repeat,
    var(--mk-l) 0 4px / 14px 1px no-repeat;
}

@media (max-width: 599px) {
  .foto-b .kachel, .foto-c .kachel { max-width: 352px }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .einblicke-raster { grid-template-columns: repeat(2, minmax(0, 308px)); column-gap: var(--gutter) }
  .einblicke-kopf { grid-column: 1 / -1 }
  .foto { grid-column: auto }
  .foto .kachel { aspect-ratio: 441 / 478; max-width: 308px }
  .foto .kachel picture { height: 100% }
  .foto .kachel img { height: 100%; object-fit: cover; object-position: 50% 0 }
}
@media (min-width: 1024px) {
  .einblicke-raster { row-gap: var(--s-7); align-items: start; grid-template-rows: auto auto 1fr }
  .einblicke-kopf { grid-column: 1 / 6; grid-row: 1; align-self: start }
  .foto-a { grid-column: 1 / 6; grid-row: 2 / 4 }
  .foto-b { grid-column: 7 / 10; grid-row: 1 / 3 }
  .foto-c { grid-column: 10 / 13; grid-row: 1 / 3 }
  .foto-d { grid-column: 7 / 13; grid-row: 3; align-self: start }
  .foto-a .kachel { max-width: 503px }
  .foto-b .kachel, .foto-c .kachel { max-width: 292px }
  .foto-d .kachel { max-width: 608px }
}

/* ----- Ratgeber ----- */
.ratgeber-raster { display: grid; gap: var(--s-7); align-items: start }
@media (min-width: 768px) { .ratgeber-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter) } }
@media (min-width: 1024px) { .ratgeber-raster { column-gap: calc(var(--gutter) * 3) } }
.beitrag { border-top: 2px solid var(--text-stark); padding-top: 24px }
.beitrag-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; font-size: var(--t-klein); color: var(--text-leise) }
.beitrag-label { font-family: var(--schrift-titel); font-weight: 500; font-size: var(--t-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--text-stark); align-self: center }
.beitrag h3 { margin-bottom: 12px }
.beitrag-teaser { max-width: var(--mass-text) }
.aufklappen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-stark);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--akzent-text);
  text-underline-offset: 4px;
  cursor: pointer;
}
.aufklappen .i { width: 20px; height: 20px; transition: transform var(--dauer-ui) var(--kurve) }
.aufklappen[aria-expanded="true"] .i, .aufklappen-unten .i { transform: rotate(180deg) }
.aufklappen:active .i { translate: 0 2px }
@media (hover: hover) { .aufklappen:hover { color: var(--akzent-text); text-decoration-thickness: 2px } }
.aufklappen:focus-visible { outline-offset: 2px }
.volltext { max-width: var(--mass-text); margin-top: 20px; hyphens: auto }
.volltext > p + p, .volltext > ul + p, .volltext > p + ul { margin-top: 1em }
.volltext h4 { margin: 28px 0 10px }
.volltext .strichliste { gap: 8px }
.volltext.oeffnet { animation: einblenden-leicht var(--dauer-ui) var(--kurve) both }
@keyframes einblenden-leicht { from { opacity: 0 } to { opacity: 1 } }
.beitrag-hinweis { margin-top: 24px !important; font-size: var(--t-klein); color: var(--text-leise) }
.beitrag-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 8px }
.beitrag-aktionen .aufklappen { margin-top: 0 }

/* ----- FAQ ----- */
.faq { background: var(--gips-100) }
.faq-liste { max-width: 52rem; border-top: 1px solid var(--linie) }
.faq-kopf .kopfgruppe { margin-bottom: var(--s-6) }
.faq-kopf .intro .textlink-inline { font-variant-numeric: tabular-nums }
@media (min-width: 1024px) {
  .faq-kopf { grid-column: 1 / 5 }
  .faq-kopf .kopfgruppe { position: sticky; top: calc(var(--kopf-h) + 32px); margin-bottom: 0 }
  .faq-liste { grid-column: 6 / 13 }
}
.frage { border-bottom: 1px solid var(--linie) }
.frage summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 20px 56px 20px 10px;
  margin-left: -10px;
  list-style: none;
  cursor: pointer;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--text-stark);
  transition: color var(--dauer-hover);
}
.frage summary::-webkit-details-marker { display: none }
.frage summary::marker { content: "" }
.frage summary:focus-visible { outline-offset: -2px }
.frage .plus { position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; transition: transform var(--dauer-hover) }
.frage .plus::before, .frage .plus::after {
  content: "";
  position: absolute;
  left: 12px; top: 19.25px;
  width: 16px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dauer-ui) var(--kurve);
}
.frage .plus::after { transform: rotate(90deg) }
.frage[open] .plus::after { transform: rotate(90deg) scaleX(0) }
.frage summary:active .plus { transform: scale(.9) }
@media (hover: hover) { .frage summary:hover { color: var(--akzent-text) } }
.antwort { max-width: 60ch; margin: 0 0 24px; padding-left: 20px; border-left: 2px solid var(--akzent) }
@supports (interpolate-size: allow-keywords) {
  .frage { interpolate-size: allow-keywords }
  .frage::details-content { height: 0; overflow: clip; transition: height var(--dauer-ui) var(--kurve), content-visibility var(--dauer-ui) allow-discrete }
  .frage[open]::details-content { height: auto }
}

/* ----- CTA-Band ----- */
.cta-raster { padding-block: var(--s-8); row-gap: var(--s-6); align-items: center }
.cta h2 { max-width: 20ch }
.cta .lead { margin-top: 20px }
@media (max-width: 599px) { .cta-knoepfe .btn { width: 100% } }
@media (max-width: 359px) { .cta-knoepfe .btn { padding-inline: 16px } }
@media (min-width: 768px) { .cta-raster { padding-block: var(--s-9) } }
@media (min-width: 1024px) {
  .cta-text { grid-column: 1 / 8 }
  .cta-knoepfe { grid-column: 9 / 13; flex-direction: column; align-items: stretch }
}

/* ----- Kontakt ----- */
.kontakt-raster { row-gap: var(--s-7) }
.kontakt-links .kopfgruppe { margin-bottom: var(--s-7) }
.kontakt-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) }
.info-block h3 { margin-bottom: 16px }
.adresse { display: grid; gap: 4px }
.adresse-zeile { display: flex; align-items: center; gap: 12px; min-height: 44px }
.adresse-zeile:first-child { align-items: flex-start; padding-block: 6px }
.adresse-zeile .i { color: var(--text-leise) }
.adresse-zeile a { display: inline-flex; align-items: center; min-height: 44px }
.adresse-stark a { font-weight: 600; font-size: var(--t-lead); color: var(--text-stark); text-decoration: none; overflow-wrap: anywhere }
.adresse-stark a[href^="tel:"] { font-variant-numeric: tabular-nums }
@media (hover: hover) { .adresse-stark a:hover { color: var(--akzent-text); text-decoration: underline; text-underline-offset: 4px } }
.kontakt-status { margin-bottom: 16px }
.zeiten { width: 100%; max-width: 26rem; font-variant-numeric: tabular-nums }
.zeiten tr { border-bottom: 1px solid var(--linie) }
.zeiten tr:first-child { border-top: 1px solid var(--linie) }
.zeiten th, .zeiten td { height: 44px; padding: 8px 0; font-weight: 400; text-align: left; vertical-align: middle }
.zeiten th { padding-left: 12px }
.zeiten td { text-align: right; padding-right: 4px; white-space: nowrap }
@media (max-width: 399px) { .zeiten td { white-space: normal } }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; color: var(--text-stark) }
.zeiten tr.heute th { box-shadow: inset 2px 0 0 var(--akzent) }
.heute-marke { margin-left: 10px; font-family: var(--schrift-titel); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-text) }
.zeiten-hinweis { margin-top: 12px; font-size: var(--t-klein); color: var(--text-leise) }

@media (min-width: 768px) {
  .kontakt-info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter) }
}
@media (min-width: 1024px) {
  .kontakt-links { grid-column: 1 / 6 }
  .kontakt-info { grid-template-columns: minmax(0, 1fr); gap: var(--s-7) }
  .formular-karte { grid-column: 7 / 13; align-self: start }
}

/* ------------------------------------------------------- 8  Formular */
.formular-karte { background: var(--weiss); border: 1px solid var(--linie); padding: var(--s-karte) }
@media (max-width: 767px) { .formular-karte { margin-inline: calc(var(--rand-l) * -0.4) } }
.formular { scroll-margin-top: calc(var(--s-karte) + 1px) }
.formular h3 { margin-bottom: 6px }
.pflicht-hinweis { font-size: var(--t-klein); color: var(--text-leise); margin-bottom: 24px }
.felder-raster { display: grid; gap: 20px var(--gutter) }
@media (min-width: 768px) {
  .felder-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .feld-breit { grid-column: 1 / -1 }
}
.feld { display: flex; flex-direction: column; min-width: 0 }
.feld label { margin-bottom: 6px; font-weight: 500; font-size: .9375rem; line-height: 1.4; color: var(--text-stark) }
.pflicht { color: var(--text-stark) }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--rahmen-feld);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-stark);
  transition: box-shadow var(--dauer-hover);
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea { min-height: 160px; padding: 12px 14px; resize: vertical }
.feld ::placeholder { color: var(--text-platzhalter); opacity: 1 }
@media (hover: hover) { .feld :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1px var(--text-leise) } }
.feld :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--text-stark) }
.feld :is(input, select, textarea):focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px }
.feld :is(input, select, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--fehler) }
.auswahl { position: relative; display: block }
.auswahl select { padding-right: 44px; cursor: pointer }
.auswahl .i { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; color: var(--text-stark) }
.feld select.hervorgehoben { box-shadow: inset 0 0 0 2px var(--akzent); transition: box-shadow var(--dauer-ui) }
.feld-hinweis { margin-top: 6px; font-size: var(--t-klein); line-height: 1.45; color: var(--text-leise) }
.feld-fuss { display: flex; justify-content: space-between; gap: 16px }
.zaehler { margin-top: 6px; font-size: var(--t-klein); color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap }
.feld-fehler { display: flex; gap: 6px; font-weight: 500; font-size: var(--t-klein); line-height: 1.45; color: var(--fehler) }
.feld-fehler:not(:empty) { margin-top: 6px }
.feld-fehler:not(:empty)::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  background: linear-gradient(var(--fehler), var(--fehler)) 7.25px 5px / 1.5px 5px no-repeat,
              linear-gradient(var(--fehler), var(--fehler)) 7.25px 11px / 1.5px 1.5px no-repeat;
  border: 1.5px solid var(--fehler);
  border-radius: 50%;
}

.fehlerliste { margin-bottom: 24px; padding: 16px 16px 16px 18px; background: var(--gips-50); box-shadow: inset 2px 0 0 var(--fehler) }
.fehlerliste:focus-visible { outline-offset: 2px }
.fehlerliste-titel { font-weight: 600; color: var(--text-stark); margin-bottom: 6px }
.fehlerliste ul { list-style: none; display: grid; gap: 2px }
.fehlerliste a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fehler); font-weight: 500; text-underline-offset: 3px }

.formular-info { margin-top: 28px; padding: 16px; background: var(--gips-50); box-shadow: inset 2px 0 0 var(--linie); font-size: var(--t-klein); line-height: 1.55 }
.formular-datenschutz { margin-top: 16px; font-size: var(--t-klein); line-height: 1.55; color: var(--text-leise) }
.formular-senden { width: 100%; margin-top: 24px }
@media (min-width: 768px) { .formular-senden { width: auto } }

.statusbox { display: flex; gap: 12px; margin-top: 20px; padding: 16px; background: var(--gips-50); box-shadow: inset 2px 0 0 var(--offen); font-size: var(--t-klein); line-height: 1.55 }
.statusbox-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--offen) }
.statusbox.fehlschlag { box-shadow: inset 2px 0 0 var(--fehler) }
.statusbox.fehlschlag .statusbox-icon { color: var(--fehler) }
.statusbox-inhalt { display: grid; gap: 12px; min-width: 0; flex: 1 }
.statusbox-text { color: var(--text-stark); font-weight: 500 }
.statusbox-rueckfall { display: grid; gap: 12px }
.statusbox-knoepfe { gap: 8px }
.statusbox-textfeld {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--rahmen-feld);
  background: var(--weiss);
  font-size: .9375rem;
  resize: vertical;
}

/* -------------------------------------------- 9  Footer, Aktionsleiste */
.fuss { background: var(--graphit-950) }
.fuss-raster { display: grid; gap: var(--s-7) var(--gutter); padding-top: var(--s-8); padding-bottom: var(--s-7) }
.fuss-marke img { width: auto; height: 48px; margin-bottom: 20px }
.fuss-marke p { max-width: 36ch; font-size: var(--t-klein); line-height: 1.6; color: var(--auf-dunkel-leise) }
.fuss-titel {
  margin-bottom: 12px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: var(--t-kicker);
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auf-dunkel-leise);
}
.fuss-spalte ul { list-style: none }
.fuss-spalte li { font-size: var(--t-klein) }
.fuss-spalte a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--auf-dunkel); text-decoration: none; transition: color var(--dauer-hover) }
.fuss-text, .fuss-zeiten li { padding-block: 11px; line-height: 1.5; font-variant-numeric: tabular-nums }
.fuss-zeiten li { padding-block: 4px }
.fuss-zeiten { margin-bottom: 12px }
.fuss .status { align-items: flex-start; padding: 0; box-shadow: none; line-height: 1.5 }
.fuss .status .status-punkt, .fuss .status .status-uhr { margin-top: .45em }
.fuss .status .status-uhr { margin-top: .15em }
.fuss .zahlen { font-variant-numeric: tabular-nums }
.fuss a:active { color: var(--auf-dunkel-stark) }
@media (hover: hover) {
  .fuss-spalte a:hover, .fuss-recht a:hover { color: var(--akzent-hell); text-decoration: underline; text-underline-offset: 4px }
}
.fuss-unten { display: flex; flex-direction: column; gap: 4px; padding-block: 24px; border-top: 1px solid var(--linie-dunkel); font-size: var(--t-klein); color: var(--auf-dunkel-leise) }
.fuss-recht { list-style: none; display: flex; flex-wrap: wrap; column-gap: 24px }
.fuss-recht a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--auf-dunkel); text-decoration: none }
@media (min-width: 768px) {
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .fuss-marke { grid-column: 1 / -1 }
  .fuss-unten { flex-direction: row; align-items: center; justify-content: space-between }
}
@media (min-width: 1024px) {
  .fuss-raster { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .fuss-marke img { height: 56px }
}
@media (min-width: 1280px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem) }
  .fuss-marke { grid-column: auto }
}

.leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-leiste);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--graphit-900);
  border-top: 1px solid var(--linie-dunkel);
  box-shadow: var(--schatten-leiste);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--dauer-ui) var(--kurve), visibility 0s linear var(--dauer-ui);
}
.leiste.sichtbar { transform: none; visibility: visible; transition: transform var(--dauer-ui) var(--kurve), visibility 0s }
.leiste .btn { min-height: 48px; padding: 0 12px }
.leiste .btn:focus-visible { outline-offset: -4px }
.leiste .btn-primaer:focus-visible { outline-color: var(--graphit-950) }
@media (min-width: 768px) { .leiste { display: none !important } }
@media (max-width: 767px) {
  /* fokussierte Elemente nicht unter der Leiste verstecken */
  html:has(.leiste.sichtbar) { scroll-padding-bottom: calc(var(--leiste-h) + 16px + env(safe-area-inset-bottom)) }
}
@media (max-width: 767px) and (max-height: 500px) { .leiste { display: none !important } }

/* ------------------------------------------------------- 10  Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: var(--auf-dunkel);
  opacity: 0;
  transition: opacity 150ms var(--kurve-raus);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
.lightbox.sichtbar { opacity: 1; transition: opacity var(--dauer-lightbox) var(--kurve) }
.lightbox::backdrop { background: rgb(21 24 28 / .94) }
.lightbox :focus-visible { outline-color: var(--fokus-dunkel) }
.lb-figur { display: flex; align-items: center; justify-content: center; height: 100%; padding: 72px 16px 88px }
.lb-rahmen { display: flex; flex-direction: column; max-width: 100%; max-height: 100% }
.lb-bild {
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 168px);
  max-height: calc(100dvh - 168px);
  margin-inline: auto;
  box-shadow: var(--schatten-dialog);
  transition: opacity var(--dauer-lightbox);
}
.lb-bild.wechselt { opacity: 0 }
.lb-fuss { display: flex; justify-content: space-between; gap: 16px; width: 0; min-width: 100%; margin-top: 16px; font-size: var(--t-klein); line-height: 1.5 }
.lb-zaehler { flex: none; color: var(--auf-dunkel-leise); font-variant-numeric: tabular-nums }
.lb-knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--auf-dunkel-stark);
  cursor: pointer;
  transition: background-color var(--dauer-hover);
}
.lb-knopf:active { background: var(--linie-dunkel) }
@media (hover: hover) { .lb-knopf:hover { background: var(--graphit-800) } }
.lb-zu { top: 16px; right: 16px }
.lb-zurueck, .lb-weiter { bottom: 20px }
.lb-zurueck { left: calc(50% - 56px) }
.lb-weiter { right: calc(50% - 56px) }
@media (min-width: 768px) {
  .lb-figur { padding: 72px 68px 96px }
  .lb-zurueck, .lb-weiter { top: 50%; bottom: auto; margin-top: -24px }
  .lb-zurueck { left: 12px }
  .lb-weiter { right: 12px }
}
@media (max-height: 500px) {
  .lightbox { overflow-y: auto }
  .lb-figur { height: auto; min-height: 100%; padding: 64px 16px 80px }
  .lb-rahmen { width: 100% }
  .lb-bild { max-height: max(120px, calc(100vh - 144px)); max-height: max(120px, calc(100dvh - 144px)) }
  .lb-fuss { width: auto; min-width: 0 }
  .lb-knopf { position: fixed; background: rgb(21 24 28 / .85) }
}
@media (max-height: 500px) and (min-width: 600px) {
  .lb-figur { padding: 16px 68px }
  .lb-rahmen { width: auto; flex-direction: row; align-items: flex-end; gap: 20px }
  .lb-bild { max-width: calc(100vw - 136px - 16rem - 20px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin-inline: 0 }
  .lb-fuss { flex: none; flex-direction: column; justify-content: flex-end; width: 16rem; margin-top: 0 }
  .lb-zurueck, .lb-weiter { top: 50%; bottom: auto; margin-top: -24px }
  .lb-zurueck { left: 12px }
  .lb-weiter { right: 12px }
}

/* ------------------------------------- 11  Unterseiten (Rechtliches, 404) */
.seitenkopf { padding-top: clamp(2.5rem, 1.5rem + 5vw, 5rem); padding-bottom: var(--s-7) }
.seitenkopf h1 { max-width: 20ch }
.seitenkopf .unterzeile { margin-top: 16px; max-width: var(--breite-text); font-size: var(--t-klein); color: var(--text-leise) }
.rechtstext-raster { padding-bottom: var(--s-abschnitt) }
.rechtstext { max-width: 40rem; border-top: 1px solid var(--linie); padding-top: 8px; hyphens: auto }
@media (min-width: 768px) { .rechtstext { hyphens: manual } }
@media (min-width: 1024px) {
  .seitenkopf-inhalt, .rechtstext { grid-column: 3 / 11 }
}
.rechtstext h2 { margin: 48px 0 12px; max-width: none; font-weight: 500; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.005em }
.rechtstext h3 { margin: 28px 0 8px; font-family: var(--schrift-text); font-weight: 600; font-size: var(--t-h4); line-height: 1.35 }
.rechtstext p + p, .rechtstext p + ul, .rechtstext ul + p, .rechtstext dl + p { margin-top: 1em }
.rechtstext .strichliste { gap: 6px }
.rechtstext a:not(.btn) { color: var(--text-stark); text-decoration: underline; text-decoration-color: var(--akzent-text); text-underline-offset: 4px; overflow-wrap: anywhere }
@media (hover: hover) { .rechtstext a:not(.btn):hover { color: var(--akzent-text); text-decoration-thickness: 2px } }
.angaben { display: grid; gap: 0; border-top: 1px solid var(--linie) }
.angaben > div { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--linie) }
.angaben dt { font-weight: 500; color: var(--text-stark) }
@media (min-width: 600px) {
  .angaben > div { grid-template-columns: minmax(10rem, 14rem) 1fr }
}
.rechtstext .stand { margin-top: 48px; font-size: var(--t-klein); color: var(--text-leise) }
mark.offen {
  padding: 0 .2em;
  background: var(--marker-offen);
  color: var(--text-stark);
  border-bottom: 1px dashed var(--akzent-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fehlerseite .staenderwerk { overflow: hidden }
.fehler-raster { padding-top: clamp(3rem, 2rem + 5vw, 6rem); padding-bottom: var(--s-abschnitt) }
.fehlende-platte {
  grid-column: -2 / -1;
  grid-row: 1 / span 6;
  margin: calc(clamp(3rem, 2rem + 5vw, 6rem) * -1) calc(var(--gutter) / -2 + 1px) calc(var(--s-abschnitt) * -1);
  background: var(--gips-100);
}
.fehler-inhalt { grid-column: 1 / -2; grid-row: 1 }
@media (max-width: 767px) { .fehler-inhalt { grid-column: 1 / -1 } }
@media (min-width: 1024px) {
  .fehlende-platte { grid-column: 9 / 11 }
  .fehler-inhalt { grid-column: 1 / 8 }
}
.fehler-zahl { font-family: var(--schrift-titel); font-weight: 300; font-size: calc(var(--t-zahl) * 2); line-height: .9; letter-spacing: -.03em; color: var(--text-stark) }
.fehler-kette { margin: 24px 0 32px; max-width: 16rem }
@media (min-width: 600px) { .fehler-kette li:last-child { padding-bottom: 22px } }
.fehler-inhalt h1 { margin-bottom: 20px }
.fehler-inhalt > p { max-width: var(--mass-lead) }
.fehler-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px }
.fehler-tel { margin-top: 24px; color: var(--text-leise) }

/* ------------------------------------------------------- 12  Bewegung */

html.bewegung [data-einblenden]:not(.sichtbar) { opacity: 0; transform: translateY(16px) }
html.bewegung [data-einblenden] { transition: opacity var(--dauer-einblenden) var(--kurve), transform var(--dauer-einblenden) var(--kurve) }
html.bewegung [data-einblenden].stufe-1 { transition-delay: 60ms }
html.bewegung [data-einblenden].stufe-2 { transition-delay: 120ms }
html.bewegung [data-einblenden].stufe-3 { transition-delay: 180ms }

html.bewegung .hero .staenderwerk::before { animation: staender-zeichnen var(--dauer-linie) var(--kurve) both }
html.bewegung .hero-masskette li::before { animation: kette-zeichnen var(--dauer-linie) var(--kurve) 200ms both }
html.bewegung .ablauf .staenderwerk:not(.gezeichnet)::before { transform: scaleY(0) }
html.bewegung .ablauf .staenderwerk::before { transition: transform var(--dauer-linie) var(--kurve) }
@keyframes staender-zeichnen { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes kette-zeichnen { from { opacity: 0; clip-path: inset(0 100% 0 0) } to { opacity: 1; clip-path: inset(0 0 0 0) } }

@media (prefers-reduced-motion: no-preference) {
  .status[data-zustand="offen"]:not(.bald-zu) .status-punkt::after { animation: puls 2s var(--kurve) infinite }
}
@keyframes puls {
  from { transform: scale(1); opacity: .5 }
  to { transform: scale(2.5); opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .kachel:hover img, .kachel:active img { transform: none }
}