/* Grundstil aus dem Entwurf (Startseite, Kopf, Fuß, Formular). Nicht von Hand ändern: theme/bauen.py */
@font-face { font-family: 'Open Sans'; src: url('../schriften/open-sans-latin-var.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../schriften/barlow-condensed-1.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../schriften/barlow-condensed-2.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Dancing Script'; src: url('../schriften/dancing-script.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@property --wisch { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

/* ---------------------------------------------------------------- Grundlagen */
:root {
  --schiefer: #0e1418; --schiefer-2: #141d23; --schiefer-3: #1b262d;
  --logo-rot: #a42423; --rot: #c4342d;
  /* dunkle Abschnitte (Standard) */
  --grund: #141d23; --flaeche: #0e1418; --flaeche-2: #22303a; --feld: #0b1114;
  --text: #eef1f2; --text-2: #a8b3b9; --text-3: #78868e; --linie: rgba(255,255,255,.1);
  --akzent: #e5574e; --akzent-rgb: 229,87,78; --knopf-schatten: #0b1013;
  --titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text-font: 'Open Sans', system-ui, sans-serif;
  --giebel: clamp(28px, 4.5vw, 72px);
  --rand: clamp(16px, 5vw, 64px);
  --ease: cubic-bezier(.2,.8,.2,1);
}
html { background: var(--schiefer); overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; max-width: 100%; color: var(--text); font: 400 1rem/1.62 var(--text-font); -webkit-font-smoothing: antialiased; }
.dvm *, .dvm *::before, .dvm *::after { box-sizing: border-box; }
.dvm :where(h1,h2,h3,p,ul,ol,figure,blockquote) { margin: 0; }
.dvm :where(h1,h2,h3) { text-wrap: balance; hyphens: none; }
.dvm :where(p,li,span,a,td,summary) { hyphens: none; }
.dvm img { max-width: 100%; height: auto; display: block; }
.dvm a { color: var(--akzent); text-underline-offset: .2em; }
.dvm :focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.dvm [hidden] { display: none !important; }
.innen { width: min(100% - 2 * var(--rand), 1200px); margin-inline: auto; }

/* Überschriften: schmal und groß wie das Logo (umschaltbar) */
.dvm .titel { font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.schrift-open .dvm .titel { font-family: var(--text-font); font-weight: 800; text-transform: none; letter-spacing: -.03em; line-height: 1.05; }
.dvm .h1 { font-size: clamp(2.9rem, 1.2rem + 6.2vw, 6.6rem); }
.dvm .h2 { font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.4rem); }
.dvm .h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); }
.schrift-open .dvm .h1 { font-size: clamp(2.3rem, 1rem + 4.4vw, 4.6rem); }
.schrift-open .dvm .h2 { font-size: clamp(1.8rem, 1rem + 2.8vw, 3.4rem); }
.dvm .dach-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 .8rem/1 var(--text-font); letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
.dvm .dach-kicker::before { content: ""; width: 30px; height: 14px; background: linear-gradient(to top right, transparent 46%, var(--akzent) 47% 55%, transparent 56%) left/50% 100% no-repeat, linear-gradient(to top left, transparent 46%, var(--akzent) 47% 55%, transparent 56%) right/50% 100% no-repeat; }
.dvm .gold { color: var(--akzent); }
.hero { --akzent: #ef6a60; }
.dvm .lead { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; color: var(--text-2); max-width: 38em; }
.dvm .klein { font-size: .88rem; color: var(--text-3); }
.dvm .fehlt { background: rgba(176,48,44,.25); outline: 1px dashed #e0716b; border-radius: 3px; padding: 0 4px; color: #ffcfcb; font-size: .9em; }

/* Knöpfe: sichtbar, beim Antippen eingedrückt */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; font: 700 1rem/1.15 var(--text-font); text-align: center;
  background: linear-gradient(#cf3b33, #a42423); color: #fff !important; box-shadow: 0 4px 0 #6b1412, 0 14px 26px -12px rgba(164,36,35,.7); transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.knopf:hover { filter: brightness(1.05); }
.knopf:active { transform: translateY(4px); box-shadow: 0 0 0 #6b1412, inset 0 3px 8px rgba(0,0,0,.35); }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf--dunkel { background: #2a3740; color: #fff !important; box-shadow: 0 4px 0 #0b1013, 0 12px 24px -14px #000; }
.knopf--dunkel:active { box-shadow: 0 0 0 #0b1013, inset 0 3px 8px rgba(0,0,0,.5); }
.knopf--wa { background: linear-gradient(#2db36a, #1f8f53); color: #fff !important; box-shadow: 0 4px 0 #136339, 0 12px 24px -14px #1f8f53; }
.knopf--wa:active { box-shadow: 0 0 0 #136339, inset 0 3px 8px rgba(0,0,0,.35); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------------------------------------------------------- Giebel-Abschnitte: Jeder Abschnitt beginnt wie ein flaches Satteldach */
.giebel { position: relative; background: var(--grund); margin-top: calc(-1 * var(--giebel)); padding-block: calc(var(--giebel) + clamp(48px, 8vh, 110px)) clamp(56px, 9vh, 120px);
  clip-path: polygon(0 var(--giebel), 50% 0, 100% var(--giebel), 100% 100%, 0 100%); }
.giebel--dunkel { --grund: #0e1418; --flaeche: #172128; }
.giebel--hell, .giebel--weiss { --grund: #f3efe8; --flaeche: #ffffff; --flaeche-2: #e9e3d9; --feld: #ffffff;
  --text: #1b2227; --text-2: #4d5960; --text-3: #6f7a80; --linie: rgba(27,34,39,.12);
  --akzent: #a42423; --akzent-rgb: 164,36,35; --knopf-schatten: #cfc6b8; color: var(--text); }
.giebel--weiss { --grund: #ffffff; --flaeche: #f6f3ee; }
.ganz-dunkel .giebel--hell, .ganz-dunkel .giebel--weiss { --grund: #1b262d; --flaeche: #0e1418; --flaeche-2: #22303a; --feld: #0b1114;
  --text: #eef1f2; --text-2: #a8b3b9; --text-3: #78868e; --linie: rgba(255,255,255,.1); --akzent: #e5574e; --akzent-rgb: 229,87,78; --knopf-schatten: #0b1013; }
.ganz-dunkel .giebel--weiss { --grund: #141d23; }
.giebel::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 0; }
/* Abschnittsköpfe über vollbreiten Inhalten (Kacheln, Rechner, Vergleiche, Fragen) stehen zentriert */
.kopf { max-width: 760px; margin-inline: auto; text-align: center; }
.kopf .h2 { margin-top: 14px; }
.kopf .lead { margin-top: 16px; margin-inline: auto; }
/* Kopf neben einem Element (Baustellentafel) bleibt linksbündig */
.ablauf-kopf .kopf { margin-inline: 0; text-align: left; }
.ablauf-kopf .kopf .lead { margin-inline: 0; }
.zentral { text-align: center; margin-inline: auto; }
.zentral .lead { margin-inline: auto; }

/* ---------------------------------------------------------------- Entwurfsleiste */
.entwurf { position: fixed; z-index: 60; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: #fff; color: #111; border-radius: 12px; font: 600 .78rem/1 var(--text-font); box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: calc(100vw - 24px); }
.entwurf b { margin-right: 4px; }
.entwurf button { font: inherit; border: 1px solid #ccc; background: #f3f3f3; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.entwurf button[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopfzeile { position: fixed; z-index: 40; inset: 0 0 auto 0; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); transition: box-shadow .3s; }
.kopfzeile.fest { box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); }
.kopfzeile .innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.logo img { height: 46px; width: auto; }
.menue { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menue a { color: #1b2227; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .85; }
.menue a:hover { opacity: 1; color: #a42423; }
.kopf-r { display: flex; align-items: center; gap: 16px; }
.kopf-r .tel { color: #1b2227; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kopf-r .knopf { min-height: 46px; padding: 10px 18px; font-size: .92rem; }

/* ---------------------------------------------------------------- Hero mit Reinigungsstreifen */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; padding: 120px 0 calc(var(--giebel) + 90px); }
.hero .dach { position: absolute; inset: -4% -2%; background: url('../bilder/dachziegel-hero.jpg') center/cover; z-index: -3; }
.hero .alt { filter: sepia(.75) hue-rotate(38deg) saturate(1.5) brightness(.62) contrast(.9); }
.hero .alt::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(40% 30% at 70% 30%, rgba(80,110,40,.55), transparent 70%), radial-gradient(30% 25% at 85% 70%, rgba(70,95,35,.6), transparent 70%),
  radial-gradient(25% 20% at 55% 85%, rgba(95,120,45,.45), transparent 70%), radial-gradient(35% 30% at 95% 15%, rgba(60,80,30,.5), transparent 70%); mix-blend-mode: multiply; }
.hero .neu { filter: grayscale(1) brightness(.5) contrast(1.35); z-index: -2;
  clip-path: polygon(0 0, var(--wisch) 0, calc(var(--wisch) - 18%) 100%, 0 100%); animation: wischen 2.6s .3s var(--ease) both; }
.hero .neu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(var(--akzent-rgb),.18) 52%, transparent 60%); }
.hero .lanze { position: absolute; inset: 0; z-index: -1; pointer-events: none; animation: wischen 2.6s .3s var(--ease) both;
  background: linear-gradient(to right, transparent calc(var(--wisch) - 3%), rgba(255,255,255,.28) var(--wisch), transparent calc(var(--wisch) + 4%));
  -webkit-mask: linear-gradient(to bottom, #000, #000); clip-path: polygon(calc(var(--wisch) - 6%) 0, calc(var(--wisch) + 6%) 0, calc(var(--wisch) - 12%) 100%, calc(var(--wisch) - 24%) 100%); filter: blur(10px); }
.hero .schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,20,24,.92) 0%, rgba(14,20,24,.75) 38%, rgba(14,20,24,.15) 70%), linear-gradient(to top, rgba(14,20,24,.85), transparent 45%); }
@keyframes wischen { from { --wisch: -20%; } to { --wisch: 78%; } }
.hero .etiketten { position: absolute; right: var(--rand); top: 120px; display: flex; gap: 10px; font: 700 .78rem/1 var(--text-font); letter-spacing: .12em; text-transform: uppercase; }
.hero .etiketten span { padding: 8px 12px; border-radius: 6px; background: rgba(14,20,24,.7); }
.hero .etiketten .n { color: var(--akzent); }
.hero h1 { margin-top: 18px; }
.hero .lead { margin-top: 22px; color: #cfd6da; }
.hero .knoepfe { margin-top: 32px; }

/* Faktenleiste */
.fakten { position: relative; z-index: 2; margin-top: calc(-1 * (var(--giebel) + 64px)); }
.fakten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: #182228; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px #000; }
.fakten li { min-width: 0; padding: 22px 24px; border-left: 1px solid var(--linie); }
.fakten li:first-child { border-left: 0; }
.fakten b { display: block; font: 700 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1 var(--titel); color: var(--akzent); }
.schrift-open .fakten b { font-family: var(--text-font); font-weight: 800; letter-spacing: -.03em; }
.fakten span { display: block; margin-top: 6px; font-size: .88rem; color: var(--text-2); line-height: 1.35; }

/* ---------------------------------------------------------------- Eignungs-Check */
.check { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: 8px; }
.frage { margin-top: 22px; }
.frage p { font-weight: 700; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 600 .95rem/1.2 var(--text-font); color: var(--text); background: var(--flaeche-2); border: 1px solid transparent; border-radius: 999px; padding: 11px 16px; min-height: 44px; cursor: pointer; box-shadow: 0 3px 0 var(--knopf-schatten); transition: transform .1s, box-shadow .1s; }
.chips button:active { transform: translateY(3px); box-shadow: none; }
.chips button[aria-pressed="true"] { background: var(--logo-rot); color: #fff; box-shadow: 0 3px 0 #6b1412; }
.ergebnis { position: sticky; top: 100px; padding: 30px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.ergebnis .ampel { display: flex; gap: 8px; margin-bottom: 18px; }
.ergebnis .ampel i { width: 14px; height: 14px; border-radius: 50%; background: var(--flaeche-2); }
.ergebnis[data-stufe="gut"] .ampel i:nth-child(1) { background: #3ccf7f; }
.ergebnis[data-stufe="pruefen"] .ampel i:nth-child(2) { background: #f0b84a; }
.ergebnis[data-stufe="neu"] .ampel i:nth-child(3) { background: #e2584f; }
.ergebnis .h3 { margin-bottom: 10px; }
.ergebnis p { color: var(--text-2); }
.ergebnis .knoepfe { margin-top: 22px; }

/* ---------------------------------------------------------------- Leistungen mit Farbwähler */
.haupt { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 44px; }
.haupt .preis { display: inline-block; margin-top: 18px; padding: 10px 14px; border-radius: 8px; background: rgba(var(--akzent-rgb),.1); font-size: .95rem; }
.haus { position: relative; }
.haus svg { width: 100%; height: auto; display: block; }
.haus .dachflaeche { transition: fill .6s var(--ease); }
.farben { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.farben button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--f); cursor: pointer; transition: transform .2s; }
.farben button:hover { transform: scale(1.08); }
.farben button[aria-pressed="true"] { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(var(--akzent-rgb),.35); }
.farbname { margin-top: 12px; font-weight: 700; }
.neben { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 56px; }
.neben a { position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 20px; align-items: center; padding: 22px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text) !important; text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.neben a:hover { border-color: rgba(var(--akzent-rgb),.5); transform: translateY(-3px); }
.neben img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.neben p { color: var(--text-2); font-size: .95rem; margin-top: 6px; }
.neben .mehr { display: inline-block; margin-top: 8px; color: var(--akzent); font-weight: 700; font-size: .9rem; }
.liste { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.liste a { display: inline-flex; gap: 8px; align-items: baseline; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text) !important; text-decoration: none; font-weight: 700; font-size: .95rem; }
.liste a span { font-weight: 400; color: var(--text-3); font-size: .85rem; }
.liste a:hover { border-color: var(--akzent); }

/* ---------------------------------------------------------------- Vorher/Nachher */
.vn-raster { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.5fr); gap: 18px; margin-top: 40px; }
.vn { --pos: 50%; position: relative; aspect-ratio: 6/5; border-radius: 14px; overflow: hidden; background: #000; touch-action: pan-y; }
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vn .n { clip-path: inset(0 0 0 var(--pos)); }
.vn .linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--akzent); pointer-events: none; }
.vn .tropfen { position: absolute; top: 50%; left: var(--pos); width: 54px; height: 68px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.vn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.vn .e { position: absolute; top: 14px; padding: 6px 12px; border-radius: 6px; background: rgba(14,20,24,.8); font: 700 .75rem/1 var(--text-font); letter-spacing: .12em; text-transform: uppercase; }
.vn .e1 { left: 14px; } .vn .e2 { right: 14px; color: var(--akzent); }
.daumen { display: grid; gap: 12px; grid-template-rows: repeat(4, minmax(0,1fr)); }
.daumen button { position: relative; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: none; }
.daumen button[aria-pressed="true"] { border-color: var(--akzent); }
.daumen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.daumen span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 4px; background: rgba(14,20,24,.8); color: var(--text); font: 600 .75rem/1.2 var(--text-font); }
.vn-info { margin-top: 14px; }

/* ---------------------------------------------------------------- Preis-Schieber */
.preis-box { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items: center; margin-top: 8px; }
.rechner { padding: 32px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.rechner label { font-weight: 700; display: flex; justify-content: space-between; }
.rechner output { color: var(--akzent); }
.rechner input[type=range] { width: 100%; margin: 18px 0 6px; accent-color: var(--akzent); height: 32px; }
.rechner .betrag { font: 700 clamp(2.6rem, 1.6rem + 3vw, 4.2rem)/1 var(--titel); color: var(--text); margin-top: 22px; }
.schrift-open .rechner .betrag { font-family: var(--text-font); font-weight: 800; letter-spacing: -.03em; }
.rechner .betrag small { font: 600 1rem/1 var(--text-font); color: var(--text-2); }
.rechner .zeile { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linie); font-size: .95rem; }
.rechner .zeile:first-of-type { margin-top: 18px; }

/* ---------------------------------------------------------------- Ablauf */
.ablauf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 0; list-style: none; padding: 0; margin: 44px 0 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.ablauf li { position: relative; scroll-snap-align: start; padding: 64px 18px 0 0; min-width: 0; }
.ablauf li::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 2px; background: rgba(var(--akzent-rgb),.35); }
.ablauf li::after { content: ""; position: absolute; left: 0; top: 10px; width: 30px; height: 30px; background: var(--schiefer-2); border: 2px solid var(--akzent); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.ablauf b { display: block; font: 700 1.35rem/1.1 var(--titel); text-transform: uppercase; }
.schrift-open .ablauf b { font: 700 1.05rem/1.3 var(--text-font); text-transform: none; }
.ablauf span { display: block; margin-top: 6px; font-size: .9rem; color: var(--text-2); }

/* ---------------------------------------------------------------- Matthias */
.person { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px,5vw,72px); align-items: center; }
.person figure { position: relative; }
.person figure img { border-radius: 16px; aspect-ratio: 1; object-fit: cover; }
.person figure::after { content: "Illustration"; position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; border-radius: 4px; background: rgba(14,20,24,.8); font-size: .72rem; color: var(--text-2); }
.unterschrift { font: 600 clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem)/1.25 'Dancing Script', cursive; color: var(--akzent); margin-top: 26px; }
.unterschrift + p { margin-top: 6px; }
.sterne { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 20px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); }
.sterne b { font: 700 2.2rem/1 var(--titel); }
.sterne i { color: #f4c542; font-style: normal; letter-spacing: .12em; font-size: 1.2rem; }

/* ---------------------------------------------------------------- Einsatzgebiet */
.gebiet { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items: center; }
.karte svg { width: 100%; height: auto; }
.karte .land { fill: #22303a; stroke: rgba(var(--akzent-rgb),.5); stroke-width: 1.5; transition: fill .3s; }
.karte .land:hover { fill: #2c3c47; }
.karte .heim { fill: rgba(var(--akzent-rgb),.22); }
.karte text { fill: var(--text-2); font: 600 13px var(--text-font); }
.karte .punkt { fill: var(--rot); }
.karte .strahl { stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; opacity: .7; }

/* ---------------------------------------------------------------- FAQ */
.faq { margin-top: 36px; max-width: 880px; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-weight: 700; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 12px; margin-top: 7px; background: linear-gradient(to top right, transparent 44%, var(--akzent) 45% 58%, transparent 59%) left/50% 100% no-repeat, linear-gradient(to top left, transparent 44%, var(--akzent) 45% 58%, transparent 59%) right/50% 100% no-repeat; transform: rotate(180deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: none; }
.faq p { padding-bottom: 20px; color: var(--text-2); max-width: 64ch; }

/* ---------------------------------------------------------------- Anfrage */
.anfrage { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(24px,4vw,56px); margin-top: 36px; align-items: start; }
.formular { padding: clamp(22px,3vw,38px); border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.balken { display: flex; gap: 8px; margin-bottom: 22px; }
.balken i { flex: 1; height: 5px; border-radius: 4px; background: var(--flaeche-2); }
.balken i.an { background: var(--akzent); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font: 700 1.6rem/1.1 var(--titel); text-transform: uppercase; margin-bottom: 16px; padding: 0; }
.schrift-open legend { font: 800 1.3rem/1.2 var(--text-font); text-transform: none; }
.wahl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.wahl label { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border-radius: 10px; background: var(--flaeche-2); cursor: pointer; font-weight: 600; font-size: .95rem; box-shadow: 0 3px 0 var(--knopf-schatten); transition: transform .1s, box-shadow .1s; }
.wahl label:active { transform: translateY(3px); box-shadow: none; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { background: rgba(var(--akzent-rgb),.16); color: var(--akzent); box-shadow: 0 3px 0 #6b1412; }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--akzent); }
.feld { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.feld label { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.feld input, .feld select, .feld textarea { font: 400 1rem/1.4 var(--text-font); color: var(--text); background: var(--feld); border: 1px solid var(--linie); border-radius: 10px; padding: 13px 14px; min-height: 50px; width: 100%; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; }
.foto { display: block; margin-top: 14px; padding: 18px; border: 2px dashed rgba(var(--akzent-rgb),.45); border-radius: 12px; text-align: center; color: var(--text-2); cursor: pointer; }
.foto b { color: var(--akzent); }
.foto input { display: block; margin: 10px auto 0; max-width: 100%; color: var(--text-2); }
.einw { display: flex; gap: 10px; margin-top: 16px; font-size: .88rem; color: var(--text-2); }
.einw input { width: 22px; height: 22px; flex: none; accent-color: var(--akzent); }
.fk { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.farbwunsch { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(var(--akzent-rgb),.1); font-size: .92rem; }
.wege { display: grid; gap: 12px; }
.weg { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text) !important; text-decoration: none; }
.weg svg { width: 28px; height: 28px; color: var(--akzent); flex: none; }
.weg b { display: block; } .weg span { font-size: .88rem; color: var(--text-2); }
.danke { text-align: center; padding: 30px 0; }

/* ---------------------------------------------------------------- Fuß */
.fuss { padding-block: calc(var(--giebel) + 48px) 110px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,1fr)); gap: 32px; }
.fuss h3 { font: 700 .8rem/1 var(--text-font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li + li { margin-top: 8px; }
.fuss a { color: var(--text-2); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: var(--akzent); }
.fuss .logo-f { width: 150px; }
.fuss .schild-logo { display: inline-block; padding: 16px 20px; border-radius: 10px; background: #fff; box-shadow: 0 4px 0 #0b1013; }
.fuss .schild-logo img { width: 220px; }
.fuss-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--text-3); }
.fuss-unten a { font-size: .85rem; }

/* ---------------------------------------------------------------- Handy-Leiste */
.leiste { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: none; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(14,20,24,.96); border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform .35s var(--ease); }
.leiste.zeigen { transform: none; }
.leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 10px; text-decoration: none; font: 700 .78rem/1.1 var(--text-font); color: var(--text) !important; background: var(--flaeche-2); box-shadow: 0 3px 0 var(--knopf-schatten); }
.leiste a:active { transform: translateY(3px); box-shadow: none; }
.leiste svg { width: 20px; height: 20px; }
.leiste .g { background: linear-gradient(#cf3b33, #a42423); color: #fff !important; box-shadow: 0 3px 0 #6b1412; }
.leiste .w { background: #1f8f53; color: #fff !important; box-shadow: 0 3px 0 #136339; }

/* ---------------------------------------------------------------- Einblenden beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rein { animation: rein linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .giebel { animation: giebel-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@media (prefers-reduced-motion: reduce) { .hero .neu, .hero .lanze { animation: none; --wisch: 78%; } }
@keyframes rein { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes giebel-auf { from { clip-path: polygon(0 var(--giebel), 50% var(--giebel), 100% var(--giebel), 100% 100%, 0 100%); } to { clip-path: polygon(0 var(--giebel), 50% 0, 100% var(--giebel), 100% 100%, 0 100%); } }

/* ---------------------------------------------------------------- Tablet */
@media (max-width: 960px) {
  .menue, .kopf-r .tel { display: none; }
  .check, .haupt, .preis-box, .person, .gebiet, .anfrage { grid-template-columns: 1fr; }
  .ergebnis { position: static; }
  .fakten ul { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fakten li:nth-child(3) { border-left: 0; }
  .fakten li:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .vn-raster { grid-template-columns: 1fr; }
  .daumen { grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: none; }
  .daumen button { aspect-ratio: 6/5; }
  .neben { grid-template-columns: 1fr; }
  .person figure { max-width: 360px; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .leiste { display: grid; }
  .wege { display: none; }
}
/* ---------------------------------------------------------------- Handy */
@media (max-width: 600px) {
  .hero { min-height: 92svh; padding-top: 100px; }
  .hero .etiketten { top: 88px; left: var(--rand); right: auto; }
  .hero h1 { max-width: calc(100vw - 40px); }
  .hero .knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .knoepfe .knopf:first-child { grid-column: span 2; }
  .hero .knoepfe .knopf { padding: 12px 8px; font-size: .9rem; }
  .lang { display: none; }
  .giebel { padding-block: calc(var(--giebel) + 40px) 52px; }
  .fakten li { padding: 16px; }
  .ergebnis { padding: 22px; }
  .neben a { grid-template-columns: 72px minmax(0,1fr); gap: 14px; padding: 16px; }
  .neben img { width: 72px; height: 72px; }
  .neben p { display: none; }
  .rechner { padding: 22px; }
  .person { gap: 20px; }
  .person figure { max-width: 170px; }
  .wahl, .zwei { grid-template-columns: 1fr 1fr; }
  .wahl label { font-size: .85rem; padding: 10px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 24px; }
  .fuss-raster > div:first-child { grid-column: span 2; }
  .knopf { width: 100%; }
  .fk .knopf { width: auto; flex: 1; }
  .entwurf { top: 84px; right: 8px; left: auto; padding: 5px 6px; gap: 4px; font-size: .7rem; }
  .entwurf b, .entwurf span { display: none; }
  .entwurf button { padding: 5px 7px; }
  .hero .etiketten { display: none; }
  .hero .lead { font-size: 1rem; }
  .check .lead .mehr-text { display: none; }
  .chips button { padding: 9px 12px; min-height: 42px; font-size: .88rem; }
  .frage { margin-top: 16px; }
  .ergebnis { padding: 18px; }
  .haupt { margin-top: 24px; gap: 20px; }
  .haus { order: -1; max-width: 300px; margin-inline: auto; }
  .haus .klein { display: none; }
  .farben button { width: 38px; height: 38px; }
  .neben { margin-top: 32px; gap: 10px; }
  .karte { max-width: 280px; margin-inline: auto; }
  .fuss { padding-block: calc(var(--giebel) + 24px) 96px; }
  .fuss .logo-f { width: 90px; }
  .fuss li + li { margin-top: 4px; }
}
.kurz { display: none; }
@media (max-width: 600px) { .kurz { display: inline; } }

/* ---------------------------------------------------------------- Ziegelreihe: Fakten auf Biberschwanz-Ziegeln, die beim Hereinscrollen beschichtet werden */
.fakten { margin-top: calc(-1 * (var(--giebel) + 40px)); }
.ziegelreihe::before { content: ""; position: absolute; left: -2%; right: -2%; top: -38px; height: 70px; z-index: -1; background: radial-gradient(52% 100% at 50% 0, #232f36 0 96%, transparent 100%) 0 0/calc(25% - 3px) 100% repeat-x; opacity: .9; transform: translateX(12.5%); }
.ziegelreihe { position: relative; list-style: none; margin: 0; padding: 0 0 26px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; perspective: 900px; }
.ziegel { position: relative; z-index: 1; min-width: 0; margin-right: -14px; padding: 30px 26px 54px; min-height: 230px; isolation: isolate; overflow: hidden;
  border-radius: 4px 4px 50% 50% / 4px 4px 36% 36%; transform: rotateX(8deg); transform-origin: top;
  background: linear-gradient(90deg, rgba(0,0,0,.35) 0, transparent 9%, transparent 91%, rgba(0,0,0,.35) 100%), radial-gradient(120% 70% at 30% 0%, #3d4e58 0%, #1e282e 55%, #141b20 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -10px 22px rgba(0,0,0,.5), 0 22px 30px -18px #000; }
.ziegel:nth-child(even) { transform: rotateX(8deg) translateY(26px); }
.ziegel:last-child { margin-right: 0; }
.ziegel::after { content: ""; position: absolute; left: 50%; top: 12px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #0b1013; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.12); } /* Nagelloch */
.ziegel b { position: relative; display: block; margin-top: 12px; font: 700 clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem)/1 var(--titel); text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.schrift-open .ziegel b { font-family: var(--text-font); font-weight: 800; text-transform: none; letter-spacing: -.03em; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); }
.ziegel .was { position: relative; display: block; margin-top: 8px; font-size: .9rem; line-height: 1.35; color: #c4cdd2; max-width: 16em; }
/* Moos, das weggespritzt wird, und Lackglanz, der darüber läuft */
.ziegel .moos { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(30% 22% at 20% 30%, #5d7a2c 0 40%, transparent 70%), radial-gradient(26% 20% at 75% 60%, #4f6b25 0 40%, transparent 72%), radial-gradient(34% 26% at 45% 85%, #6b8a33 0 35%, transparent 70%), radial-gradient(20% 16% at 85% 18%, #587428 0 40%, transparent 70%), linear-gradient(#3d4a2a, #2d3820);
  clip-path: inset(0 0 0 0); }
.ziegel .glanz { position: absolute; inset: -20% -40%; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,240,205,.0) 44%, rgba(255,240,205,.55) 50%, rgba(255,240,205,0) 56%, transparent 58%); transform: translateX(-70%); }
.ziegel.beschichtet .moos { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s cubic-bezier(.6,.05,.3,1); }
.ziegel.beschichtet .glanz { transform: translateX(70%); transition: transform 1.3s .25s var(--ease); }
.ziegel:nth-child(2).beschichtet .moos, .ziegel:nth-child(2).beschichtet .glanz { transition-delay: .18s, .43s; }
.ziegel:nth-child(3).beschichtet .moos, .ziegel:nth-child(3).beschichtet .glanz { transition-delay: .36s, .61s; }
.ziegel:nth-child(4).beschichtet .moos, .ziegel:nth-child(4).beschichtet .glanz { transition-delay: .54s, .79s; }
/* kleine Details je Ziegel */
.stempel { position: relative; display: block; width: 46px; height: 46px; color: rgba(var(--akzent-rgb),.55); animation: drehen 26s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.dampf { position: relative; display: flex; gap: 9px; height: 46px; align-items: flex-end; padding-left: 4px; }
.dampf i { width: 6px; height: 30px; border-radius: 6px; background: linear-gradient(to top, rgba(255,255,255,.55), transparent); filter: blur(2px); animation: dampf 2.4s ease-in infinite; }
.dampf i:nth-child(2) { animation-delay: .7s; } .dampf i:nth-child(3) { animation-delay: 1.4s; }
@keyframes dampf { 0% { transform: translateY(14px) scaleY(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-16px) scaleY(1.1) translateX(4px); opacity: 0; } }
.schild { position: relative; display: block; width: 40px; height: 46px; color: var(--akzent); }
.schild .haken { stroke-dasharray: 40; stroke-dashoffset: 40; }
.ziegel.beschichtet .schild .haken { stroke-dashoffset: 0; transition: stroke-dashoffset .7s 1.4s var(--ease); }
.sternreihe { position: relative; display: flex; gap: 3px; height: 46px; align-items: center; color: #f4c542; font-size: 1.35rem; }
.sternreihe i { font-style: normal; opacity: .2; transform: scale(.6); }
.ziegel.beschichtet .sternreihe i { opacity: 1; transform: none; transition: opacity .3s, transform .4s var(--ease); }
.ziegel.beschichtet .sternreihe i:nth-child(1) { transition-delay: 1.3s; } .ziegel.beschichtet .sternreihe i:nth-child(2) { transition-delay: 1.45s; } .ziegel.beschichtet .sternreihe i:nth-child(3) { transition-delay: 1.6s; } .ziegel.beschichtet .sternreihe i:nth-child(4) { transition-delay: 1.75s; } .ziegel.beschichtet .sternreihe i:nth-child(5) { transition-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) { .ziegel .moos { display: none; } .stempel, .dampf i { animation: none; } .schild .haken { stroke-dashoffset: 0; } .sternreihe i { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .ziegelreihe { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 0; padding-bottom: 10px; }
  .ziegel { margin-right: -10px; min-height: 200px; }
  .ziegel:nth-child(2) { margin-right: 0; }
  .ziegel:nth-child(n+3) { margin-top: -34px; }
}
@media (max-width: 600px) {
  .fakten { margin-top: calc(-1 * (var(--giebel) + 70px)); }
  .ziegel { padding: 26px 16px 44px; min-height: 178px; }
  .ziegel b { font-size: 1.75rem; }
  .ziegel .was { font-size: .8rem; }
  .stempel, .schild { width: 34px; height: 34px; }
  .dampf, .sternreihe { height: 34px; }
  .sternreihe { font-size: .95rem; }
}

/* Entwurf: nur noch Farbwelt-Umschalter */
.vn .e2 { color: #ff8a80; }
.karte text.ort { fill: var(--akzent); font-weight: 700; }
@media (max-width: 960px) { .menue, .kopf-r .tel { display: none; } }
.giebel--hell .fehlt, .giebel--weiss .fehlt { color: #8c1d1a; background: rgba(164,36,35,.1); outline-color: #a42423; }
.logo img { height: 52px; }

/* Farbwähler auf echtem Foto: Dach wird umgefärbt (Graustufen + Farbe im Modus „color“) */
.foto-dach { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.foto-dach img { width: 100%; height: auto; display: block; }
.foto-dach .grau, .foto-dach .farbschicht { position: absolute; inset: 0; clip-path: polygon(0 58%, 40.6% 12%, 44% 13.3%, 73.8% 26.7%, 75% 51.7%, 86.3% 53.3%, 89% 56.7%, 89% 83.6%, 86.3% 85.8%, 0 89.2%); }
.foto-dach .grau { filter: grayscale(1) contrast(1.12) brightness(var(--hell)); transition: filter .6s var(--ease); }
.foto-dach .farbschicht { background: var(--f); mix-blend-mode: color; transition: background-color .6s var(--ease); }
.foto-dach figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(14,20,24,.78); color: #e6eaec; font-size: .8rem; }
/* Einsatzgebiet mit Foto */
.einsatzfoto { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.einsatzfoto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.einsatzfoto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(14,20,24,.92)); color: #dfe5e8; font-size: .9rem; }
.einsatzfoto b { color: #ff8a80; }
.laender { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; }
.laender li { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linie); font-weight: 600; font-size: .92rem; }
.laender .heim { border-color: var(--akzent); color: var(--akzent); }
/* Preisschilder */
.preise { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 22px; margin-top: 40px; align-items: stretch; }
.preisschild { position: relative; padding: 30px; border-radius: 18px; background: #172128; color: #eef1f2; box-shadow: 0 8px 0 #0b1013, 0 30px 50px -28px rgba(0,0,0,.6); }
.preisschild--hell { background: #fff; color: #1b2227; border: 2px solid #a42423; box-shadow: 0 8px 0 #e3d9cb, 0 30px 50px -30px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.schild-kopf { display: inline-block; padding: 7px 12px; border-radius: 6px; background: #a42423; color: #fff; font: 700 .78rem/1.1 var(--text-font); letter-spacing: .1em; text-transform: uppercase; }
.schild-preis { margin-top: 16px; font: 700 clamp(2.4rem, 1.5rem + 2.6vw, 3.6rem)/1 var(--titel); text-transform: uppercase; }
.schild-preis small { font: 600 1rem/1 var(--text-font); text-transform: none; opacity: .75; }
.preisschild label { display: flex; justify-content: space-between; margin-top: 26px; font-weight: 700; }
.preisschild output { color: #ff8a80; }
.preisschild input[type=range] { width: 100%; margin: 14px 0 4px; accent-color: #c4342d; height: 34px; }
.schild-ergebnis { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: #0e1418; border: 1px dashed rgba(255,255,255,.25); }
.schild-ergebnis span { font-size: .95rem; color: #c4cdd2; }
.schild-ergebnis strong { font: 700 2rem/1 var(--titel); color: #fff; }
.schild-hinweis { margin-top: 14px; font-size: .85rem; opacity: .75; }
.haken-liste { list-style: none; padding: 0; margin: 18px 0 0; }
.haken-liste li { position: relative; padding-left: 28px; margin-top: 8px; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 9px; border-left: 3px solid #a42423; border-bottom: 3px solid #a42423; transform: rotate(-45deg); }
.preisschild--hell .knoepfe { margin-top: auto; padding-top: 18px; }
/* Knöpfe: dicker Sockel, versinken beim Klick */
.knopf { position: relative; transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 6px 0 #6b1412, 0 8px 0 #4a0d0c, 0 18px 24px -10px rgba(0,0,0,.55) !important; transition: transform .14s cubic-bezier(.3,.7,.4,1), box-shadow .14s, filter .2s; }
.knopf:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 8px 0 #6b1412, 0 10px 0 #4a0d0c, 0 24px 28px -12px rgba(0,0,0,.55) !important; }
.knopf:active { transform: translateY(7px) scale(.985); filter: brightness(.94); box-shadow: inset 0 3px 10px rgba(0,0,0,.45), 0 0 0 #6b1412, 0 1px 0 #4a0d0c, 0 4px 8px -4px rgba(0,0,0,.4) !important; transition-duration: .06s; }
.knopf--dunkel { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 0 #11181c, 0 8px 0 #070b0d, 0 18px 24px -10px rgba(0,0,0,.55) !important; }
.knopf--dunkel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 0 #11181c, 0 10px 0 #070b0d, 0 24px 28px -12px rgba(0,0,0,.55) !important; }
.knopf--wa { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 0 #136339, 0 8px 0 #0b4226, 0 18px 24px -10px rgba(0,0,0,.5) !important; }
.knopf--wa:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 0 #136339, 0 10px 0 #0b4226, 0 24px 28px -12px rgba(0,0,0,.5) !important; }
.knoepfe { padding-bottom: 8px; }
@media (max-width: 960px) { .preise { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .preisschild { padding: 22px; } .schild-ergebnis strong { font-size: 1.7rem; } }

/* Ablauf als Dach-Bühne: das Foto verwandelt sich mit jedem Schritt */
.buehne { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(24px,4vw,56px); margin-top: 40px; align-items: start; --p: 0; }
.buehne-bild { position: sticky; top: 100px; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: #0e1418; box-shadow: 0 30px 60px -30px #000; isolation: isolate; }
.b-schicht { position: absolute; inset: -3%; background: url('../bilder/dachziegel-hero.jpg') center/cover; transition: clip-path 1.1s var(--ease), opacity .8s var(--ease), filter .8s var(--ease); }
.b-alt { filter: sepia(.75) hue-rotate(38deg) saturate(1.5) brightness(.62) contrast(.9); }
.b-alt::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; background: radial-gradient(40% 30% at 30% 30%, rgba(80,110,40,.6), transparent 70%), radial-gradient(30% 25% at 75% 65%, rgba(70,95,35,.65), transparent 70%), radial-gradient(28% 22% at 55% 90%, rgba(95,120,45,.5), transparent 70%); }
.b-sauber { filter: grayscale(.4) brightness(.78) contrast(1.05) saturate(.6); clip-path: inset(0 100% 0 0); }
.b-grund { filter: grayscale(1) brightness(1.15) contrast(.75); opacity: 0; }
.b-neu { filter: grayscale(1) brightness(.48) contrast(1.4); opacity: 0; }
.b-dampf { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.b-dampf i { position: absolute; bottom: -10%; width: 26%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); filter: blur(12px); animation: b-dampf 3.2s ease-in infinite; }
.b-dampf i:nth-child(1) { left: 2%; } .b-dampf i:nth-child(2) { left: 20%; animation-delay: .6s; } .b-dampf i:nth-child(3) { left: 38%; animation-delay: 1.2s; } .b-dampf i:nth-child(4) { left: 52%; animation-delay: 1.8s; } .b-dampf i:nth-child(5) { left: 66%; animation-delay: 2.4s; }
@keyframes b-dampf { 0% { transform: translateY(30%) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-60%) scale(1.2); opacity: 0; } }
.b-ziegel { position: absolute; left: 58%; top: 34%; width: 15%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #ff6b60; box-shadow: 0 0 0 6px rgba(255,107,96,.25); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--feder); }
.b-ziegel::after { content: "getauscht"; position: absolute; left: 50%; top: 105%; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: #a42423; color: #fff; font: 700 .72rem/1 var(--text-font); white-space: nowrap; }
.b-glanz { position: absolute; inset: -20% -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,245,220,.35) 50%, transparent 60%); transform: translateX(-80%); opacity: 0; }
.b-tagebuch { position: absolute; right: 16px; top: 16px; padding: 12px 16px; border-radius: 10px; background: #fff; color: #1b2227; box-shadow: 0 10px 24px rgba(0,0,0,.4); transform: translateY(-20px) rotate(4deg); opacity: 0; transition: opacity .4s, transform .6s var(--feder); }
.b-tagebuch b { display: block; font: 700 1.2rem/1 var(--titel); text-transform: uppercase; color: #a42423; }
.b-tagebuch span { font-size: .8rem; }
.b-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.15); }
.b-fortschritt i { display: block; height: 100%; width: calc(var(--p) * 100%); background: #e5574e; transition: width .8s var(--ease); }
.b-text { position: absolute; left: 16px; bottom: 20px; padding: 8px 12px; border-radius: 8px; background: rgba(14,20,24,.82); color: #fff; font-weight: 700; font-size: .95rem; }
/* Zustände */
.buehne[data-stufe="1"] .b-sauber { clip-path: inset(0 45% 0 0); } .buehne[data-stufe="1"] .b-dampf { opacity: 1; }
.buehne[data-stufe="2"] .b-sauber, .buehne[data-stufe="3"] .b-sauber { clip-path: inset(0 0 0 0); filter: grayscale(.6) brightness(.85) contrast(1.05) saturate(.4) hue-rotate(-10deg); }
.buehne[data-stufe="3"] .b-ziegel { opacity: 1; transform: none; }
.buehne[data-stufe="4"] .b-sauber, .buehne[data-stufe="5"] .b-sauber, .buehne[data-stufe="6"] .b-sauber { clip-path: inset(0 0 0 0); }
.buehne[data-stufe="4"] .b-grund { opacity: 1; }
.buehne[data-stufe="5"] .b-neu, .buehne[data-stufe="6"] .b-neu { opacity: 1; }
.buehne[data-stufe="5"] .b-glanz, .buehne[data-stufe="6"] .b-glanz { opacity: 1; animation: b-glanz 2.4s var(--ease) infinite; }
.buehne[data-stufe="6"] .b-tagebuch { opacity: 1; transform: none; }
@keyframes b-glanz { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
/* Schritt-Liste */
.schritte-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.schritte-liste::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: rgba(255,255,255,.12); }
.schritte-liste button { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; align-items: start; width: 100%; padding: 12px 12px 12px 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; border-radius: 12px; transition: background .25s; }
.schritte-liste .ic { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1b262d; border: 2px solid rgba(255,255,255,.14); color: #a8b3b9; transition: background .3s, border-color .3s, color .3s, transform .35s var(--feder); }
.schritte-liste .ic svg { width: 24px; height: 24px; }
.schritte-liste b { display: block; font: 700 1.35rem/1.1 var(--titel); text-transform: uppercase; padding-top: 4px; }
.schritte-liste .tx > span { display: block; max-height: 0; overflow: hidden; opacity: 0; color: var(--text-2); font-size: .92rem; transition: max-height .45s var(--ease), opacity .35s, margin .35s; }
.schritte-liste button:hover .ic { transform: scale(1.08); border-color: #e5574e; color: #fff; }
.schritte-liste button:hover { background: rgba(255,255,255,.03); }
.schritte-liste button[aria-pressed="true"] .ic { background: #a42423; border-color: #a42423; color: #fff; box-shadow: 0 0 0 6px rgba(164,36,35,.25); }
.schritte-liste button[aria-pressed="true"] .tx > span { max-height: 6em; opacity: 1; margin-top: 6px; }
.schritte-liste button.erledigt .ic { border-color: #e5574e; color: #e5574e; }
@media (max-width: 960px) {
  .buehne { grid-template-columns: 1fr; }
  .buehne-bild { position: relative; top: 0; }
  .schritte-liste { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .schritte-liste::before { display: none; }
  .schritte-liste li { flex: 0 0 78%; scroll-snap-align: start; }
  .schritte-liste button { grid-template-columns: 44px minmax(0,1fr); background: #1b262d; padding: 12px; }
  .schritte-liste .ic { width: 44px; height: 44px; }
  .schritte-liste .tx > span { max-height: none; opacity: 1; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .b-dampf i, .b-glanz { animation: none !important; } }

/* Karte */
.karte { margin: 0; }
.karte-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gebiet > div:first-child { position: relative; z-index: 2; }
.karte { position: relative; z-index: 1; min-width: 0; }
.karte-svg .land { fill: #1d2930; stroke: rgba(255,255,255,.14); stroke-width: .8; transition: fill .3s; }
.karte-svg .land.ziel { fill: url(#glut); stroke: #ff8a80; stroke-width: 1.1; }
.karte-svg .land.ziel:hover { fill: rgba(229,87,78,.65); }
.karte-svg .lt { fill: #f1f3f4; font: 700 11px var(--text-font); letter-spacing: .02em; pointer-events: none; paint-order: stroke; stroke: rgba(14,20,24,.75); stroke-width: 3px; stroke-linejoin: round; }
.karte-svg .berlin { fill: #fff; stroke: #a42423; stroke-width: 2; }
.karte-svg .leit { stroke: rgba(255,255,255,.5); stroke-width: 1; fill: none; }
.karte-svg .pin { fill: #fff; stroke: #a42423; stroke-width: 4; }
.karte-svg .pin-text { fill: #fff; font: 700 15px var(--titel); text-transform: uppercase; letter-spacing: .04em; }
.karte-svg .wellen circle { fill: none; stroke: #ff8a80; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: welle 3s ease-out infinite; }
.karte-svg .wellen circle:nth-child(2) { animation-delay: 1s; } .karte-svg .wellen circle:nth-child(3) { animation-delay: 2s; }
@keyframes welle { from { transform: scale(.6); opacity: .9; } to { transform: scale(9); opacity: 0; } }
.karte figcaption { margin-top: 6px; text-align: right; }
/* Zitat-Band */
.zitatband { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 160px) 0; margin-top: calc(-1 * var(--giebel)); clip-path: polygon(0 var(--giebel), 50% 0, 100% var(--giebel), 100% 100%, 0 100%); }
.zitatband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.3) brightness(.45); transform: scale(1.08); }
.zitatband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,20,24,.92) 0%, rgba(14,20,24,.55) 55%, rgba(164,36,35,.35) 100%); }
.zitatband blockquote { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 3vw, 40px); }
.zitatband p { margin: 0; padding: clamp(22px, 3vw, 40px); border-radius: 16px; }
.zitatband p span { display: block; font: 700 .9rem/1 var(--text-font); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.zitatband p strong { display: block; margin-top: 12px; font: 700 clamp(2.4rem, 1.2rem + 4.2vw, 5.4rem)/.92 var(--titel); text-transform: uppercase; }
.z-gut { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.z-schlecht { background: #a42423; color: #fff; transform: rotate(-1.5deg); box-shadow: 0 8px 0 #6b1412, 0 30px 50px -20px rgba(0,0,0,.6); }
.z-schlecht strong { text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: rgba(255,255,255,.5); }
.z-sign { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 6px; color: #fff; }
.z-sign .sign { font: 600 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1 'Dancing Script', cursive; color: #ff8a80; transform: rotate(-3deg); display: inline-block; }
.z-sign .klein { color: #c4cdd2; }
/* FAQ als Chat */
.chat-raster { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items: center; }
.fragen-chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fragen-chips button { font: 600 .98rem/1.25 var(--text-font); text-align: left; color: var(--text); background: #fff; border: 1px solid var(--linie); border-radius: 18px 18px 18px 4px; padding: 12px 16px; cursor: pointer; box-shadow: 0 4px 0 #ded5c7; transition: transform .12s, box-shadow .12s, background .2s; }
.fragen-chips button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #ded5c7; }
.fragen-chips button:active { transform: translateY(4px); box-shadow: 0 0 0 #ded5c7; }
.fragen-chips button[aria-pressed="true"] { background: #a42423; color: #fff; border-color: #a42423; box-shadow: 0 4px 0 #6b1412; }
.handy { position: relative; max-width: 420px; justify-self: center; width: 100%; padding: 14px; border-radius: 42px; background: #0e1418; box-shadow: 0 0 0 2px #2a363e, 0 40px 80px -30px rgba(0,0,0,.6); }
.handy-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 30px 30px 0 0; background: #1b262d; color: #fff; }
.handy-kopf img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.handy-kopf b { display: block; } .handy-kopf span { font-size: .78rem; color: #8fe0b0; }
.chat { min-height: 340px; padding: 18px 14px; background: #e9e1d4 radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0/14px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.blase { margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; color: #1b2227; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.frage-b { align-self: flex-end; margin-left: auto; background: #d9fdd3; border-bottom-right-radius: 4px; }
.antwort-zeile { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.antwort-zeile img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.antwort-b { background: #fff; border-bottom-left-radius: 4px; }
.chat-paar:not([hidden]) .frage-b { animation: blase .35s var(--feder) both; }
.chat-paar:not([hidden]) .antwort-zeile { animation: blase .4s var(--feder) both; animation-delay: var(--verzug, 0s); }
@keyframes blase { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.tippt { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; margin-left: 38px; border-radius: 16px; background: #fff; }
.tippt i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5ab; animation: tippen 1s infinite; }
.tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-knopf { width: 100%; margin-top: 14px; border-radius: 0 0 28px 28px; }
@media (max-width: 960px) { .chat-raster { grid-template-columns: 1fr; } .zitatband blockquote { grid-template-columns: 1fr; } .z-schlecht { transform: none; } }

/* Kontrast in hellen Abschnitten (WCAG: Rahmen von Bedienelementen >= 3:1, Text >= 4,5:1) */
.giebel--hell, .giebel--weiss { --text-3: #556066; --rahmen: #857b6e; --flaeche-2: #ffffff; --knopf-schatten: #b9ad9c; }
.ganz-dunkel .giebel--hell, .ganz-dunkel .giebel--weiss { --rahmen: rgba(255,255,255,.28); --flaeche-2: #22303a; --knopf-schatten: #0b1013; }
.giebel--hell :is(.formular, .ergebnis, .sterne, .weg), .giebel--weiss :is(.formular, .ergebnis, .sterne, .weg, .neben a) { background: #fff; border: 2px solid #d3c9ba; box-shadow: 0 18px 40px -26px rgba(40,30,20,.45); }
.giebel--weiss .formular { border-color: #c2b7a7; }
.giebel--hell .chips button, .giebel--weiss .chips button { background: #fff; border: 2px solid var(--rahmen); color: #1b2227; }
.giebel--hell .chips button[aria-pressed="true"], .giebel--weiss .chips button[aria-pressed="true"] { background: #a42423; border-color: #a42423; color: #fff; }
.giebel--weiss .wahl label, .giebel--hell .wahl label { background: #fff; border: 2px solid var(--rahmen); color: #1b2227; }
.giebel--weiss .wahl label:hover { border-color: #a42423; }
.giebel--weiss .wahl label:has(input:checked), .giebel--hell .wahl label:has(input:checked) { background: #fbeceb; border-color: #a42423; color: #8c1d1a; box-shadow: 0 3px 0 #a42423; }
.wahl label::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 5px; border: 2px solid currentColor; opacity: .7; }
.wahl label:has(input:checked)::before { opacity: 1; background: #a42423 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; border-color: #a42423; }
.giebel--weiss .feld label, .giebel--hell .feld label { color: #1b2227; }
.giebel--weiss .feld input, .giebel--weiss .feld select, .giebel--weiss .feld textarea { background: #fff; border: 2px solid var(--rahmen); color: #1b2227; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid rgba(164,36,35,.35); border-color: #a42423 !important; }
.giebel--weiss .foto { border-color: #a42423; color: #1b2227; background: #fdf8f7; }
.giebel--weiss .foto b { color: #a42423; }
.giebel--weiss .balken i { background: #d3c9ba; }
.giebel--weiss .balken i.an { background: #a42423; }
.giebel--weiss legend { color: #1b2227; }
.giebel--weiss .einw { color: #333d43; }
.giebel--weiss .farbwunsch { background: #fbeceb; color: #8c1d1a; }
.farben button { border: 3px solid #fff; box-shadow: 0 0 0 1px #857b6e; }
.farben button[aria-pressed="true"] { box-shadow: 0 0 0 3px #a42423; }

/* Dach-Diagnose */
.diagnose { --i: 0; margin-top: 36px; border-radius: 22px; background: #141d23; color: #eef1f2; box-shadow: 0 10px 0 #0b1013, 0 40px 80px -40px rgba(0,0,0,.7); overflow: hidden; }
.d-kopf { display: flex; align-items: center; gap: 18px; padding: 18px 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.d-giebel { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.d-giebel li { width: 46px; height: 22px; background: rgba(255,255,255,.12); clip-path: polygon(0 100%, 50% 0, 100% 100%, 86% 100%, 50% 26%, 14% 100%); transition: background .4s; }
.d-giebel li.an { background: #e5574e; }
.d-giebel li.fertig { clip-path: polygon(0 100%, 50% 0, 100% 100%); background: #a42423; }
.d-zaehler { margin: 0; font: 700 .85rem/1 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: #a8b3b9; }
.d-zurueck, .d-neu { margin-left: auto; font: 600 .9rem/1 var(--text-font); color: #fff; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.d-neu { margin: 18px 0 0; }
.d-fenster { overflow: hidden; }
.d-band { display: grid; grid-template-columns: repeat(4, 100%); transform: translateX(calc(var(--i) * -100%)); transition: transform .6s cubic-bezier(.65,0,.25,1); }
.d-schritt { border: 0; margin: 0; padding: 26px; min-width: 0; }
.d-schritt legend { float: left; width: 100%; margin-bottom: 20px; padding: 0; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1; color: #fff; }
.d-karten { clear: both; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.d-karten--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.d-karte { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 0 16px; border: 2px solid rgba(255,255,255,.12); border-radius: 16px; background: #1b262d; color: #fff; text-align: left; cursor: pointer; font: inherit; overflow: hidden; box-shadow: 0 6px 0 #0b1013; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.d-karte:hover { transform: translateY(-4px); border-color: #e5574e; box-shadow: 0 10px 0 #0b1013; }
.d-karte:active { transform: translateY(5px); box-shadow: 0 1px 0 #0b1013; }
.d-bild { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.d-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: saturate(.85); }
.d-karte:hover .d-bild img { transform: scale(1.08); filter: saturate(1.1); }
.d-bild em { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 4px; background: rgba(14,20,24,.85); color: #fff; font: 600 .68rem/1.2 var(--text-font); font-style: normal; }
.d-titel { display: block; padding: 14px 16px 0; font: 700 1.4rem/1.05 var(--titel); text-transform: uppercase; }
.d-hint { display: block; padding: 4px 16px 0; font-size: .88rem; color: #a8b3b9; }
.d-stempel { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; background: #a42423 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat; box-shadow: 0 0 0 4px rgba(255,255,255,.9); transform: scale(0) rotate(-30deg); transition: transform .35s var(--feder); }
.d-karte.gewaehlt { border-color: #e5574e; box-shadow: 0 0 0 3px rgba(229,87,78,.35), 0 6px 0 #0b1013; }
.d-karte.gewaehlt .d-stempel { transform: none; }
.d-karte--zahl { justify-content: flex-end; min-height: 200px; padding-top: 24px; background: linear-gradient(90deg, rgba(0,0,0,.3), transparent 12%, transparent 88%, rgba(0,0,0,.3)), radial-gradient(120% 80% at 30% 0, #33434c, #1b262d 60%); border-radius: 16px 16px 50% 50% / 16px 16px 22% 22%; padding-bottom: 34px; }
.d-karte--zahl .d-titel { font-size: 1.1rem; color: #c4cdd2; }
.d-karte--zahl .d-titel strong { display: block; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); color: #fff; line-height: .95; }
.d-ergebnis { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; align-items: center; }
.d-erg-bild { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.d-erg-bild img { width: 100%; height: 100%; object-fit: cover; }
.d-ampel { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.85); }
.diagnose[data-stufe="gut"] .d-ampel { background: #3ccf7f; } .diagnose[data-stufe="pruefen"] .d-ampel { background: #f0b84a; } .diagnose[data-stufe="neu"] .d-ampel { background: #e2584f; }
.d-erg-kicker { margin: 0; font: 700 .85rem/1 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: #ff8a80; }
.d-erg-titel { margin-top: 10px; font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); color: #fff; }
.d-erg-text { margin-top: 14px; color: #c4cdd2; }
.d-erg-hinweis { margin-top: 10px; font-size: .85rem; color: #8b979d; }
.d-ergebnis .knoepfe { margin-top: 22px; }
@media (max-width: 960px) { .d-karten { grid-template-columns: repeat(2, minmax(0,1fr)); } .d-karten--3 { grid-template-columns: 1fr 1fr 1fr; } .d-ergebnis { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .d-schritt { padding: 18px; } .d-kopf { padding: 14px 18px; } .d-karten { gap: 10px; } .d-titel { font-size: 1.15rem; padding: 10px 12px 0; } .d-hint { padding: 2px 12px 0; font-size: .78rem; } .d-karten--3 { grid-template-columns: 1fr; } .d-karte--zahl { min-height: 0; flex-direction: row; align-items: baseline; gap: 10px; border-radius: 16px; padding: 16px; } .d-karte--zahl .d-titel { padding: 0; } .d-karte--zahl .d-titel strong { display: inline; font-size: 2rem; } .d-karte--zahl .d-hint { padding: 0; } }
.anfrage > *, .formular form, .schritt, .wahl > * { min-width: 0; }
.wahl label { overflow-wrap: normal; }
/* Sehr schmale Handys: Auswahl und Footer-Links einspaltig, damit kein Wort über die Kachel ragt */
@media (max-width: 359px) { .wahl { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .wahl label { gap: 8px; font-size: .82rem; line-height: 1.2; } .logo img { height: 38px; max-width: 52vw; object-fit: contain; } }
.menue a { white-space: nowrap; }
@media (max-width: 1140px) { .kopf-r .tel { display: none; } .menue { gap: 20px; } }

/* Ablauf: ein Dach von First bis Traufe, jede Ziegelreihe ist ein Arbeitsschritt */
.dach-ablauf { position: relative; margin-top: 44px; }
.da-first, .da-traufe { margin: 0; font: 700 .78rem/1 var(--text-font); letter-spacing: .3em; text-transform: uppercase; color: #78868e; text-align: center; }
.da-first { margin-bottom: 0; }
.da-first::before { content: ""; display: block; width: 64px; height: 18px; margin: 0 auto 8px; background: linear-gradient(to top right, transparent 45%, #e5574e 46% 56%, transparent 57%) left/50% 100% no-repeat, linear-gradient(to top left, transparent 45%, #e5574e 46% 56%, transparent 57%) right/50% 100% no-repeat; }
.da-traufe { margin-top: 10px; }
.reihen { list-style: none; margin: 10px 0 0; padding: 0; transform: perspective(1400px) rotateX(16deg); transform-origin: top; }
.reihe { position: relative; height: 104px; margin-top: -10px; border-radius: 4px 4px 14px 14px; overflow: hidden; box-shadow: 0 10px 18px -8px rgba(0,0,0,.8); z-index: calc(10 - var(--n)); transition: transform .4s var(--ease); }
.reihe:first-child { margin-top: 0; }
.reihe:hover { transform: translateY(-6px) scale(1.01); z-index: 20; }
.r-bild { position: absolute; inset: 0; background: url('../bilder/dachziegel-hero.jpg') 50% calc(var(--n) * -96px) / 100% auto; }
/* Ausgangszustand jeder Reihe: bemoost */
.r-bild::before { content: ""; position: absolute; inset: 0; background: inherit; filter: sepia(.75) hue-rotate(38deg) saturate(1.5) brightness(.6) contrast(.9); }
.r-bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient(30% 60% at 20% 40%, rgba(80,110,40,.6), transparent 70%), radial-gradient(25% 70% at 70% 60%, rgba(70,95,35,.6), transparent 70%); mix-blend-mode: multiply; transition: opacity .9s var(--ease) .3s; }
/* Zustand nach dem Schritt, wischt von links herein */
.r-zustand { position: absolute; inset: 0; background: url('../bilder/dachziegel-hero.jpg') 50% calc(var(--n) * -96px) / 100% auto; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.6,.05,.3,1); }
.reihe.bearbeitet .r-zustand { clip-path: inset(0 0 0 0); }
.reihe.bearbeitet .r-bild::after { opacity: 0; }
.r0 .r-zustand { filter: sepia(.6) hue-rotate(38deg) saturate(1.3) brightness(.62); }
.r1 .r-zustand { filter: grayscale(.5) brightness(.8) contrast(1.05); }
.r2 .r-zustand { filter: grayscale(.7) brightness(.86) contrast(1.05); }
.r3 .r-zustand { filter: grayscale(1) brightness(1.18) contrast(.72); }
.r4 .r-zustand, .r5 .r-zustand { filter: grayscale(1) brightness(.46) contrast(1.45); }
/* Details je Reihe */
.r0 .r-zustand::after { content: "Angebot schriftlich"; position: absolute; right: 18%; top: 50%; transform: translateY(-50%) rotate(-4deg); padding: 8px 12px; border-radius: 4px; background: #fff; color: #1b2227; font: 700 .78rem/1 var(--text-font); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.r1 .r-zustand::after { content: ""; position: absolute; inset: -40% -10%; background: radial-gradient(20% 50% at 20% 70%, rgba(255,255,255,.55), transparent 70%), radial-gradient(18% 45% at 45% 60%, rgba(255,255,255,.45), transparent 70%), radial-gradient(22% 50% at 75% 65%, rgba(255,255,255,.5), transparent 70%); filter: blur(10px); animation: r-dampf 3s ease-in-out infinite; }
@keyframes r-dampf { 0%, 100% { transform: translateY(10%); opacity: .6; } 50% { transform: translateY(-14%); opacity: 1; } }
.r2 .r-zustand::after { content: "getauscht"; position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%); padding: 30px 14px 6px; border: 3px solid #ff6b60; border-radius: 50%; color: #fff; font: 700 .72rem/1 var(--text-font); text-shadow: 0 1px 3px #000; box-shadow: 0 0 0 6px rgba(255,107,96,.25); }
.r4 .r-zustand::after, .r5 .r-zustand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,245,220,.4) 50%, transparent 60%); transform: translateX(-80%); animation: r-glanz 3.2s var(--ease) infinite; }
.r5 .r-zustand::before { content: "Bautagebuch · Fotos"; position: absolute; right: 18%; top: 50%; z-index: 2; transform: translateY(-50%) rotate(3deg); padding: 8px 12px; border-radius: 4px; background: #a42423; color: #fff; font: 700 .78rem/1 var(--text-font); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
@keyframes r-glanz { to { transform: translateX(80%); } }
/* Text auf der Reihe */
.r-text { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 22px; width: min(560px, 62%); background: linear-gradient(90deg, rgba(14,20,24,.92) 0%, rgba(14,20,24,.78) 70%, transparent 100%); }
.r-ic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); color: #fff; transition: background .5s, border-color .5s, transform .4s var(--feder); }
.reihe.bearbeitet .r-ic { background: #a42423; border-color: #a42423; transform: scale(1.05); }
.r-ic svg { width: 24px; height: 24px; }
.r-text h3 { font-size: 1.5rem; line-height: 1; color: #fff; }
.r-text p { margin-top: 4px; font-size: .9rem; line-height: 1.4; color: #c9d1d5; }
.da-hinweis { margin-top: 18px; text-align: center; }
@media (max-width: 960px) { .r-text { width: calc(100% - 180px); } }
@media (max-width: 600px) {
  .reihen { transform: none; }
  .reihe { height: auto; min-height: 96px; margin-top: -8px; }
  .r-text { width: 100%; padding: 14px 16px; gap: 12px; background: linear-gradient(90deg, rgba(14,20,24,.9), rgba(14,20,24,.6)); }
  .r-ic { width: 40px; height: 40px; }
  .r-text h3 { font-size: 1.25rem; }
  .r-text p { font-size: .82rem; }
  .r0 .r-zustand::after, .r5 .r-zustand::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .r-zustand { clip-path: none !important; transition: none; } .r1 .r-zustand::after, .r4 .r-zustand::after, .r5 .r-zustand::after { animation: none; } }

/* ===== Zollstock: Fakten klappen beim Scrollen Glied für Glied auf ===== */
.zollstock { --w: calc(min(100vw - 2 * var(--rand), 1200px) / 4); --h: 150px; position: relative; height: calc(var(--h) + 30px); padding-top: 10px; }
.glied { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform-origin: 0 50%; }
.zollstock > .glied { position: relative; }
.glied .glied { left: calc(100% - 4px); transform: rotate(var(--r, 0deg)); transition: transform .12s linear; }
.gl-in { position: absolute; inset: 0; padding: 34px 26px 16px 30px; border-radius: 6px; color: #fff; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 22%, transparent 78%, rgba(0,0,0,.25)), #b3242a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 18px 30px -16px rgba(0,0,0,.8); }
.gl-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 2px, transparent 2px 40px);
  -webkit-mask: linear-gradient(#000, #000) top/100% 9px no-repeat, linear-gradient(#000, #000) top/100% 16px no-repeat; mask: linear-gradient(#000, #000) top/100% 9px no-repeat; opacity: .85; }
.gl-in::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 2px, transparent 2px 40px); -webkit-mask: linear-gradient(#000,#000) top/100% 16px no-repeat; mask: linear-gradient(#000,#000) top/100% 16px no-repeat; }
.glied .glied > .gl-in { border-left: 2px solid rgba(0,0,0,.35); }
.glied .glied::before { content: ""; position: absolute; z-index: 3; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c4, #c9a24a 55%, #7a5a1c); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.gl-in b { display: block; font: 700 clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem)/1 var(--titel); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.gl-in b .st { font-style: normal; color: #ffd75e; }
.gl-in span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.35; color: #ffe3e0; max-width: 17em; }
.zollstock > .glied > .gl-in { border-radius: 10px 6px 6px 10px; }
.zollstock .glied .glied .glied .glied > .gl-in { border-radius: 6px 10px 10px 6px; }
@media (max-width: 760px) {
  .zollstock { --w: calc(100vw - 2 * var(--rand)); --h: 118px; height: calc(4 * var(--h) + 20px); }
  .glied .glied { left: 0; top: calc(100% - 4px); transform-origin: 50% 0; }
  .glied .glied > .gl-in { border-left: 0; border-top: 2px solid rgba(0,0,0,.35); }
  .glied .glied::before { left: 50%; top: -9px; margin: 0 0 0 -9px; }
  .gl-in { padding: 28px 20px 12px; }
}
/* ===== Rechnungen aus dem Drucker ===== */
.rechnungen { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 4vw, 56px); align-items: start; }
.drucker { position: relative; min-width: 0; padding-top: 22px; }
.schlitz { position: absolute; left: -10px; right: -10px; top: 0; height: 30px; z-index: 3; border-radius: 10px; background: linear-gradient(#2a363e, #10161a); box-shadow: 0 10px 20px -8px #000, inset 0 -6px 0 #070a0c; }
.schlitz::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 4px; border-radius: 2px; background: #000; }
.bon { position: relative; margin: 0 6px; padding: 26px 24px 34px; color: #1f2326; font: 500 .95rem/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: #faf7f0;
  clip-path: inset(0 0 calc(100% - var(--druck, 0%)) 0); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7);
  -webkit-mask: linear-gradient(#000, #000) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/16px 10px repeat-x;
  mask: linear-gradient(#000, #000) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/16px 10px repeat-x; }
.bon-kopf { margin: 0; padding-bottom: 12px; border-bottom: 2px dashed #b9b1a3; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bon-kopf span { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #6c6458; }
.bon-kopf b { font: 700 1.3rem/1 var(--titel); text-transform: uppercase; }
.bon ul { list-style: none; margin: 12px 0 0; padding: 0; }
.bon li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted #d8d0c2; }
.bon li em { font-style: normal; color: #1f8f53; font-weight: 800; }
.bon--schlecht li::after { content: "€ ? ? ?"; flex: none; color: #a42423; font-weight: 800; }
.bon-summe { margin: 14px 0 0; padding-top: 12px; border-top: 3px double #1f2326; }
.bon-summe span { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #6c6458; }
.bon-summe strong { display: block; margin-top: 4px; font: 700 clamp(2rem, 1.3rem + 2.2vw, 3.2rem)/.95 var(--titel); text-transform: uppercase; }
.bon--schlecht .bon-summe strong { color: #a42423; }
.bon-fuss { margin: 8px 0 0; font-size: .8rem; color: #5a5348; }
.bon-stempel { position: absolute; right: 18px; bottom: 54px; padding: 6px 16px; border: 4px solid #a42423; border-radius: 8px; color: #a42423; font: 700 2rem/1 var(--titel); text-transform: uppercase; letter-spacing: .08em; opacity: 0; transform: rotate(-14deg) scale(2.4); mix-blend-mode: multiply; }
.bon-stempel.drauf { opacity: .9; transform: rotate(-14deg) scale(1); transition: transform .35s cubic-bezier(.2,1.6,.4,1), opacity .2s; }
.rechnungen .z-sign { grid-column: 1 / -1; }
@media (max-width: 760px) { .rechnungen { grid-template-columns: 1fr; } }
/* ===== Direktleitung ===== */
.leitung { position: relative; padding: 24px; border-radius: 18px; color: #eef1f2; background: radial-gradient(80% 60% at 0 0, rgba(164,36,35,.35), transparent 70%), linear-gradient(180deg, #172128, #0e1418); box-shadow: 0 10px 0 #070a0c, 0 40px 60px -30px rgba(0,0,0,.6); overflow: hidden; }
.leitung::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#e5574e, rgba(229,87,78,.1)); }
.lt-kopf { display: flex; gap: 14px; align-items: center; }
.lt-kopf img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #a42423; }
.lt-kopf b { display: block; font: 700 1.35rem/1 var(--titel); text-transform: uppercase; }
.lt-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .85rem; color: #c4cdd2; }
.lt-status i { width: 10px; height: 10px; border-radius: 50%; background: #78868e; }
.lt-status.an i { background: #3ccf7f; box-shadow: 0 0 0 0 rgba(60,207,127,.6); animation: lt-puls 1.8s infinite; }
.lt-status.an em { color: #8fe0b0; }
.lt-status em { font-style: normal; }
@keyframes lt-puls { 70% { box-shadow: 0 0 0 10px rgba(60,207,127,0); } 100% { box-shadow: 0 0 0 0 rgba(60,207,127,0); } }
.lt-nummer { display: block; margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: #070a0c; color: #ff6b60 !important; text-decoration: none; font: 700 clamp(1.8rem, 1.4rem + 1vw, 2.3rem)/1 var(--titel); letter-spacing: .06em; text-shadow: 0 0 14px rgba(255,107,96,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 5px 0 #a42423; transition: transform .12s, box-shadow .12s; }
.lt-nummer span { display: block; font: 700 .72rem/1 var(--text-font); letter-spacing: .2em; text-transform: uppercase; color: #78868e; text-shadow: none; margin-bottom: 8px; }
.lt-nummer:hover { box-shadow: inset 0 0 0 1px rgba(255,107,96,.4), 0 5px 0 #a42423; }
.lt-nummer:active { transform: translateY(5px); box-shadow: inset 0 0 0 1px rgba(255,107,96,.4), 0 0 0 #a42423; }
.lt-zeit { margin: 10px 0 0; font-size: .82rem; color: #8b979d; }
.lt-wa { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 18px; padding: 14px; border-radius: 12px; background: rgba(31,143,83,.14); border: 1px solid rgba(60,207,127,.35); color: #fff !important; text-decoration: none; transition: background .2s; }
.lt-wa:hover { background: rgba(31,143,83,.25); }
.lt-wa-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1f8f53; }
.lt-wa-ic svg { width: 20px; height: 20px; }
.lt-wa b { display: block; } .lt-wa small { display: block; font-size: .8rem; color: #b6e9cb; }
.lt-pfeil { font-weight: 800; transition: transform .3s var(--ease); }
.lt-wa:hover .lt-pfeil { transform: translateX(4px); }
.lt-48 { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.15); font-size: .9rem; color: #c4cdd2; }
.lt-48 b { font: 700 1.6rem/1 var(--titel); color: #fff; margin-right: 6px; }
/* ===== Fächer: weitere Leistungen ===== */
.faecher { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; height: 340px; }
.faecher li { flex: 1; min-width: 0; transition: flex .6s cubic-bezier(.3,.7,.2,1); }
.faecher li:hover, .faecher li:focus-within { flex: 3.4; }
.faecher a { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; color: #fff !important; text-decoration: none; background: var(--bild) center/cover; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.faecher a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,20,24,.15), rgba(14,20,24,.85)); transition: background .4s; }
.faecher li:hover a::before { background: linear-gradient(180deg, rgba(14,20,24,0) 30%, rgba(14,20,24,.9)); }
.f-senk { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 700 1.5rem/1 var(--titel); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; transition: opacity .3s; }
.f-voll { position: absolute; left: 22px; right: 22px; bottom: 22px; opacity: 0; transform: translateY(14px); transition: opacity .35s .1s, transform .45s .1s var(--ease); }
.f-voll b { display: block; font-size: 2rem; line-height: 1; }
.f-voll span { display: block; margin-top: 8px; font-size: .95rem; color: #dfe5e8; max-width: 26em; }
.f-voll em { display: inline-block; margin-top: 12px; font-style: normal; font-weight: 700; color: #ff8a80; }
.faecher li:hover .f-senk, .faecher li:focus-within .f-senk { opacity: 0; }
.faecher li:hover .f-voll, .faecher li:focus-within .f-voll { opacity: 1; transform: none; }
.faecher a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #e5574e; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.faecher li:hover a::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .faecher { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .faecher li, .faecher li:hover { flex: 0 0 78%; scroll-snap-align: start; }
  .faecher a { height: 240px; }
  .f-senk { display: none; }
  .f-voll { opacity: 1; transform: none; }
}
.fakten .gl-in b { color: #fff; font-family: var(--titel); }
.fakten .gl-in span { color: #ffe3e0; margin-top: 8px; }

/* Zitat als Überschrift, Unterschrift auf dem Bon */
.z-titel { margin: 0 0 clamp(28px, 4vw, 48px); text-align: center; color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: .98; text-wrap: balance; }
.z-titel span { color: #ff8a80; }
.bon-unterschrift { position: relative; margin-top: 26px; padding-top: 34px; }
.linie-u { display: block; padding-top: 6px; border-top: 1px solid #1f2326; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #6c6458; }
.sign-tinte { position: absolute; left: 6px; bottom: 16px; font: 600 2.1rem/1 'Dancing Script', cursive; color: #a42423; transform: rotate(-4deg); clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.5,.1,.3,1) .2s; }
.bon--gut.unterschrieben .sign-tinte { clip-path: inset(0 0 0 0); }
/* Zustandsschilder je Ziegelreihe */
.r0 .r-zustand::after, .r5 .r-zustand::before { content: none !important; }
.r-schild { position: absolute; z-index: 4; right: 20px; top: 50%; padding: 8px 14px 8px 30px; border-radius: 999px; background: rgba(14,20,24,.85); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 700 .78rem/1 var(--text-font); letter-spacing: .12em; text-transform: uppercase; transform: translate(12px, -50%); opacity: 0; transition: opacity .4s 1s, transform .5s 1s var(--ease); }
.r-schild::before { content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #3ccf7f; box-shadow: 0 0 0 3px rgba(60,207,127,.25); }
.r0 .r-schild::before { background: #8aa33a; box-shadow: 0 0 0 3px rgba(138,163,58,.3); }
.r5 .r-schild { background: #a42423; border-color: #a42423; }
.r5 .r-schild::before { background: #fff; box-shadow: none; }
.reihe.bearbeitet .r-schild { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 600px) { .r-schild { top: 12px; right: 10px; transform: none; padding: 6px 10px 6px 24px; font-size: .65rem; } .r-schild::before { left: 9px; width: 8px; height: 8px; margin-top: -4px; } .reihe.bearbeitet .r-schild { transform: none; } }
.zitatband .z-titel span { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; opacity: 1; color: #ff8a80; }
.zitatband .z-titel { padding: 0; }

/* ===== Glas-Knöpfe: Glanzstreifen, Lichtrand, Lichtreflex, Sockel zum Einsinken ===== */
.knopf { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; text-shadow: 0 1px 1px rgba(0,0,0,.35); letter-spacing: .01em;
  background: linear-gradient(180deg, #ea5a51 0%, #c73530 46%, #a42423 54%, #8f1c1a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 0 #5e1110, 0 8px 0 #3d0a09, 0 20px 28px -12px rgba(164,36,35,.75) !important;
  transition: transform .16s cubic-bezier(.3,.7,.4,1), box-shadow .16s, filter .2s; }
.knopf > * { position: relative; z-index: 2; }
.knopf::before { content: ""; position: absolute; z-index: 1; left: 5px; right: 5px; top: 2px; height: 46%; border-radius: 9px 9px 40% 40% / 9px 9px 100% 100%; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.1)); pointer-events: none; transition: opacity .16s; }
.knopf::after { content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: 0; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-160%) skewX(-12deg); pointer-events: none; }
.knopf:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 8px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 0 #5e1110, 0 10px 0 #3d0a09, 0 26px 32px -12px rgba(164,36,35,.8) !important; }
.knopf:hover::after { transform: translateX(330%) skewX(-12deg); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.knopf:active { transform: translateY(8px) scale(.99); filter: brightness(.95);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 #5e1110, 0 1px 0 #3d0a09, 0 6px 10px -6px rgba(0,0,0,.5) !important; transition-duration: .06s; }
.knopf:active::before { opacity: .45; }
.knopf--dunkel { background: linear-gradient(180deg, #4a5963 0%, #2f3c45 46%, #222d34 54%, #182127 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.35), 0 6px 0 #0d1215, 0 8px 0 #050709, 0 20px 28px -12px rgba(0,0,0,.7) !important; }
.knopf--dunkel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.35), 0 8px 0 #0d1215, 0 10px 0 #050709, 0 26px 32px -12px rgba(0,0,0,.75) !important; }
.knopf--dunkel::before { background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04)); }
.knopf--wa { background: linear-gradient(180deg, #45d487 0%, #27a862 46%, #1f8f53 54%, #187847 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.25), 0 6px 0 #0f5530, 0 8px 0 #093a20, 0 20px 28px -12px rgba(31,143,83,.7) !important; }
.knopf--wa:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 8px rgba(0,0,0,.25), 0 8px 0 #0f5530, 0 10px 0 #093a20, 0 26px 32px -12px rgba(31,143,83,.75) !important; }
.knopf--dunkel:active, .knopf--wa:active { box-shadow: inset 0 3px 10px rgba(0,0,0,.45), 0 0 0 transparent, 0 1px 0 rgba(0,0,0,.6) !important; }
.knopf svg { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .knopf::after { display: none; } }

/* ===== Fuß: die Seite endet an der Traufe ===== */
.fuss2 { position: relative; isolation: isolate; margin-top: 0; padding: 90px 0 110px; color: #c4cdd2; background: #0b1013; overflow: hidden; }
.fuss2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('../bilder/dachziegel-hero.jpg') center/cover; opacity: .07; filter: grayscale(1); -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); }
.traufe { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.rinne { position: absolute; left: -2%; right: -2%; top: 0; height: 26px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #e0574f 0%, #b52c27 40%, #8c1b19 75%, #5e1110 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.35), 0 10px 22px -6px rgba(0,0,0,.8); }
.rinne::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 20%, rgba(255,255,255,.15) 60%, transparent); }
.tropfen-f { position: absolute; top: 24px; width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 35%, #fff, #9fc9e6 60%, #5d8fb0); opacity: 0; animation: tropfen-fall 5.5s ease-in infinite; }
.t1 { left: 18%; } .t2 { left: 57%; animation-delay: 2.1s; } .t3 { left: 83%; animation-delay: 3.7s; }
@keyframes tropfen-fall { 0% { transform: translateY(0) scale(.4); opacity: 0; } 12% { transform: translateY(0) scale(1); opacity: .95; } 22% { transform: translateY(0) scale(1, 1.15); opacity: .95; } 55% { transform: translateY(140px) scale(.9, 1.25); opacity: 0; } 100% { opacity: 0; } }
.f-oben { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fuss2 .schild-logo { display: inline-block; padding: 14px 18px; border-radius: 12px; background: #fff; box-shadow: 0 6px 0 #c9bfb0, 0 20px 30px -16px rgba(0,0,0,.7); transform: rotate(-1.5deg); }
.fuss2 .schild-logo img { width: 240px; }
.f-slogan { margin-top: 26px; color: #fff; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.5rem); line-height: .98; white-space: nowrap; }
@media (max-width: 600px) { .f-slogan { white-space: normal; } }
.f-slogan span { color: #ff6b60; }
.f-unter { margin-top: 14px; font-size: 1.05rem; color: #a8b3b9; }
.f-cta { position: relative; padding: 28px; border-radius: 20px; background: radial-gradient(90% 70% at 100% 0, rgba(164,36,35,.4), transparent 70%), linear-gradient(180deg, #172128, #10171b); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -30px #000; }
.f-cta-titel { color: #fff; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1; }
.f-cta-text { margin-top: 10px; color: #c4cdd2; }
.f-cta .knoepfe { margin-top: 20px; }
.f-tel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.15); color: #fff !important; text-decoration: none; }
.f-tel b { font: 700 1.7rem/1 var(--titel); letter-spacing: .05em; color: #ff6b60; text-shadow: 0 0 12px rgba(255,107,96,.45); }
.f-plaketten { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.f-plaketten li { min-width: 0; padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.08); }
.f-plaketten li:first-child { border-left: 0; padding-left: 0; }
.f-plaketten b { display: block; font: 700 1.7rem/1 var(--titel); text-transform: uppercase; color: #fff; }
.f-plaketten span { display: block; margin-top: 6px; font-size: .85rem; color: #8b979d; }
.f-raster { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; margin-top: 48px; }
.f-raster h3 { margin: 0 0 14px; font: 700 .78rem/1 var(--text-font); letter-spacing: .18em; text-transform: uppercase; color: #ff6b60; }
.f-raster ul { list-style: none; margin: 0; padding: 0; }
.f-raster li + li { margin-top: 8px; }
.f-raster a { color: #c4cdd2; text-decoration: none; background: linear-gradient(#ff6b60, #ff6b60) left bottom/0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.f-raster a:hover { color: #fff; background-size: 100% 1px; }
.f-raster address { font-style: normal; line-height: 1.6; color: #e1e6e8; }
.f-raster p { margin: 12px 0 0; }
.f-zeit { font-size: .88rem; color: #8b979d; }
.f-laender { display: flex; flex-wrap: wrap; gap: 6px; }
.f-laender li + li { margin-top: 0; }
.f-laender li { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: .82rem; }
.f-laender .heim { border-color: #ff6b60; color: #ff8a80; }
.f-mehr { display: inline-block; margin-top: 12px; font-weight: 700; color: #ff8a80 !important; }
.f-unten { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #78868e; }
.f-unten a { color: #a8b3b9; }
.f-credit { opacity: .8; }
@media (max-width: 960px) { .f-oben { grid-template-columns: 1fr; } .f-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } .f-plaketten { grid-template-columns: repeat(2, minmax(0,1fr)); } .f-plaketten { position: relative; grid-auto-rows: 1fr; } .f-plaketten li, .f-plaketten li:first-child { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 26px 14px; text-align: center; } .f-plaketten li:nth-child(3) { border-left: 0; } .f-plaketten li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); } .f-plaketten li::before { content: ""; width: 22px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: #a42423; } .f-plaketten::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #a42423; transform: rotate(45deg); box-shadow: 0 0 0 5px #0b1013; } }
@media (max-width: 600px) { .fuss2 { padding: 70px 0 100px; } .fuss2 .schild-logo img { width: 190px; } .f-raster { gap: 26px 18px; } .f-unten { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .tropfen-f { display: none; } }
.leist-foto { margin: 0; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.leist-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.leist-foto figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(14,20,24,.8); color: #e6eaec; font-size: .82rem; }

/* ===== Zweizeilige Aktions-Knöpfe: einheitlich für alles, was zur Anfrage führt ===== */
.knopf-2z { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px 12px 12px; text-align: center; width: 100%; }
/* Text mittig zwischen gleich breiten Spalten für Symbol und Pfeil */
.knopf-2z .k-pfeil { justify-self: end; }
.k-ic { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.25); }
.k-ic svg { width: 22px; height: 22px; }
.k-tx { position: relative; z-index: 2; min-width: 0; }
.k-tx b { display: block; font: 700 1.25rem/1.05 var(--titel); text-transform: uppercase; letter-spacing: .03em; }
.k-tx small { display: block; margin-top: 3px; font: 600 .82rem/1.25 var(--text-font); opacity: .9; text-transform: none; letter-spacing: 0; }
.k-pfeil { position: relative; z-index: 2; font-weight: 800; font-size: 1.2rem; transition: transform .3s var(--ease); }
.knopf-2z:hover .k-pfeil { transform: translateX(4px); }
.knopf--dunkel .k-tx small { color: #ffb4ad; font-family: var(--titel); font-size: 1.15rem; letter-spacing: .05em; }
/* Fuß-Karte */
.f-cta-kopf { display: flex; align-items: center; gap: 14px; }
.f-av { position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ff6b60, #7a1513); }
.f-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.f-cta-kopf .lt-status { margin-top: 6px; }
.aktionen { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 12px; margin-top: 20px; padding-bottom: 8px; }
.aktionen .k-voll { grid-column: 1 / -1; min-height: 76px; }
.aktionen .k-voll .k-tx b { font-size: 1.5rem; }
.f-cta { padding: 26px; }
/* Direktleitung */
.leitung .lt-knopf { margin-top: 16px; }
.leitung .lt-knopf + .lt-knopf { margin-top: 14px; }
@media (max-width: 600px) { .aktionen { grid-template-columns: 1fr; } }
.f-oben { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.knopf-2z .k-tx small { white-space: nowrap; }
.aktionen .knopf-2z:not(.k-voll) { grid-template-columns: 44px minmax(0,1fr); padding-right: 58px; gap: 10px; }
.aktionen .knopf-2z:not(.k-voll) .k-pfeil { display: none; }
.aktionen .knopf--dunkel .k-tx small { font-size: 1.02rem; }

/* ================================================================ Handy kompakt (Inhalt bleibt im HTML, nur Darstellung wird gestrafft) */
@media (max-width: 600px) {
  :root { --giebel: 22px; }
  .giebel { padding-block: calc(var(--giebel) + 30px) 40px; }
  .dvm .h2 { font-size: 2rem; }
  .kopf .lead, .dvm .lead { font-size: .98rem; line-height: 1.5; }
  .kopf .lead { margin-top: 10px; }
  .dach-kicker { font-size: .7rem; }
  /* Hero */
  .hero { min-height: 0; padding: 96px 0 calc(var(--giebel) + 40px); }
  .dvm .h1 { font-size: 2.55rem; }
  .hero .lead { margin-top: 14px; font-size: .96rem; }
  .hero .knoepfe { margin-top: 20px; }
  /* Zollstock */
  .zollstock { --h: 92px; }
  .gl-in { padding: 22px 16px 8px; }
  .fakten .gl-in b { font-size: 1.6rem; }
  .fakten .gl-in span { margin-top: 4px; font-size: .78rem; }
  .fakten { margin-top: calc(-1 * (var(--giebel) + 24px)); }
  /* Diagnose */
  .check .lead .mehr-text, #check .mehr-text { display: none; }
  .diagnose { margin-top: 20px; }
  .d-schritt { padding: 14px; }
  .d-schritt legend { font-size: 1.5rem; margin-bottom: 12px; }
  .d-bild { aspect-ratio: 16/10; }
  .d-titel { font-size: 1rem; padding: 8px 10px 0; }
  .d-hint { display: none; }
  .d-karte { padding-bottom: 10px; }
  .d-karte--zahl { padding: 12px 14px; }
  .d-erg-titel { font-size: 1.7rem; }
  .d-erg-bild { aspect-ratio: 16/9; }
  /* Leistungen */
  #leistungen .haupt { margin-top: 18px; gap: 16px; }
  .leist-foto img { aspect-ratio: 16/9; }
  .leist-foto figcaption { display: none; }
  .haupt .preis { font-size: .85rem; }
  .neben { margin-top: 18px; gap: 10px; }
  .neben a { grid-template-columns: 56px minmax(0,1fr); padding: 12px; gap: 12px; }
  .neben img { width: 56px; height: 56px; }
  .neben .h3 { font-size: 1.2rem; }
  .faecher { margin-top: 14px; }
  .faecher a { height: 190px; }
  .f-voll b { font-size: 1.5rem; }
  .f-voll span { font-size: .82rem; }
  /* Referenzen */
  .vn-raster { margin-top: 18px; gap: 10px; }
  .daumen { gap: 8px; }
  .daumen span { font-size: .65rem; }
  /* Farbe */
  #farbe .haupt { margin-top: 16px; }
  /* Ablauf */
  .dach-ablauf { margin-top: 20px; }
  .da-first, .da-traufe, .da-hinweis { display: none; }
  .reihe { min-height: 0; }
  .r-text { padding: 10px 12px; gap: 10px; align-items: flex-start; }
  .r-ic { width: 34px; height: 34px; }
  .r-ic svg { width: 18px; height: 18px; }
  .r-text h3 { font-size: 1.08rem; }
  .r-text p { font-size: .76rem; line-height: 1.35; margin-top: 2px; }
  .r-schild { top: 8px; right: 8px; font-size: .58rem; padding: 4px 8px 4px 20px; }
  /* Matthias */
  .person figure { max-width: 120px; }
  .sterne { margin-top: 16px; padding: 10px 14px; }
  #matthias .knoepfe { margin-top: 14px; }
  /* Einsatzgebiet */
  .gebiet { gap: 14px; }
  .gebiet .laender { display: none; }
  .karte { max-width: 300px; margin-inline: auto; }
  .karte figcaption { font-size: .7rem; }
  /* Kosten: Preisschilder nebeneinander zum Wischen */
  .preise { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 20px; padding: 4px 2px 14px; }
  .preisschild { flex: 0 0 86%; scroll-snap-align: start; padding: 18px; }
  .schild-preis { font-size: 2rem; }
  .haken-liste li { margin-top: 4px; font-size: .88rem; }
  /* Rechnungen: zum Wischen */
  .zitatband { padding: 50px 0 40px; }
  .z-titel { font-size: 1.7rem; margin-bottom: 18px; }
  .rechnungen { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .drucker { flex: 0 0 86%; scroll-snap-align: start; }
  .bon { padding: 18px 16px 26px; font-size: .8rem; }
  .bon li { padding: 3px 0; }
  .bon-summe strong { font-size: 1.8rem; }
  .bon-stempel { right: 10px; bottom: 40px; font-size: 1.4rem; }
  /* Fragen-Chat */
  .fragen-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 16px; padding-bottom: 8px; }
  .fragen-chips li { flex: 0 0 auto; scroll-snap-align: start; }
  .fragen-chips button { white-space: nowrap; font-size: .88rem; padding: 10px 14px; }
  .chat { min-height: 230px; padding: 12px 10px; }
  .handy { padding: 10px; border-radius: 32px; }
  .chat-raster { gap: 16px; }
  /* Anfrage */
  .anfrage { margin-top: 18px; }
  /* Fuß */
  .fuss2 { padding: 54px 0 96px; }
  .f-plaketten { margin-top: 40px; }
  .f-plaketten li, .f-plaketten li:first-child { padding: 20px 8px; }
  .f-plaketten b { font-size: 1.4rem; }
  .f-plaketten span { font-size: .78rem; }
  .f-slogan { font-size: 1.75rem; margin-top: 16px; }
  .f-unter { font-size: .9rem; }
  .f-cta { padding: 18px; }
  .f-cta-kopf { gap: 10px; align-items: flex-start; }
  .f-cta-kopf > div { min-width: 0; }
  .f-cta-titel { font-size: 1.5rem; }
  .f-av { width: 48px; height: 48px; }
  .aktionen { grid-template-columns: 1fr 1fr; }
  .aktionen .knopf-2z:not(.k-voll) .k-ic { display: none; }
  .aktionen .knopf-2z:not(.k-voll) { grid-template-columns: 1fr; padding: 10px 12px; }
  .aktionen .knopf--dunkel .k-tx small { font-size: .88rem; }
  .f-raster { grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 30px; font-size: .88rem; }
  .f-raster > div:nth-child(3) { display: none; }
  .f-raster li + li { margin-top: 4px; }
  .f-unten { margin-top: 28px; gap: 6px; font-size: .78rem; }
}
.chat-raster > *, .gebiet > *, .check > *, .preis-box > * { min-width: 0; }
@media (max-width: 600px) {
  .leist-foto { display: none; }
  .f-raster ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .f-raster li + li { margin-top: 0; }
  .f-raster > nav, .f-raster > div { grid-column: 1 / -1; }
  .f-raster h3 { margin-bottom: 8px; }
}
.d-band { align-items: start; }
.d-fenster { transition: height .5s cubic-bezier(.65,0,.25,1); }
@media (max-width: 600px) {
  .kopf-r .knopf { width: auto; min-height: 40px; padding: 8px 12px; font-size: .78rem; }
  .kopf-r .knopf::after { display: none; }
  .kopfzeile .innen { min-height: 64px; }
}
@media (max-width: 960px) { .f-oben { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .zitatband .rechnungen { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .zitatband .bon li { font-size: .78rem; }
  .bon-fuss { display: none; }
  .bon-unterschrift { margin-top: 14px; padding-top: 28px; }
  .sign-tinte { font-size: 1.7rem; }
  #farbe .farbname { margin-top: 6px; }
}
@media (max-width: 600px) {
  .dvm .h1 { font-size: 2.25rem; }
  .wahl label { font-size: .78rem; gap: 7px; padding: 8px; }
  .wahl label::before { width: 18px; height: 18px; }
  .f-cta-text { display: none; }
  .f-cta-kopf .lt-status { font-size: .78rem; }
  .aktionen { margin-top: 14px; gap: 10px; }
  .aktionen .k-voll { min-height: 62px; }
  .aktionen .k-voll .k-tx b { font-size: 1.2rem; }
  .f-marke .schild-logo { padding: 10px 12px; }
  .f-unten span { display: block; }
}
@media (max-width: 600px) { .r-text h3 { padding-right: 96px; } }

/* ===== Leistungen: Diptychon „Erst reinigen, dann beschichten“ ===== */
@property --s { syntax: '<percentage>'; inherits: true; initial-value: 52%; }
.diptychon { --s: 52%; position: relative; height: 480px; margin-top: 36px; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); transition: --s .6s cubic-bezier(.3,.7,.2,1); }
.diptychon:has(.dip--rein:hover) { --s: 62%; }
.diptychon:has(.dip--besch:hover) { --s: 42%; }
.dip { position: absolute; inset: 0; background: var(--bild) center/cover; color: #fff; }
.dip::before { content: ""; position: absolute; inset: 0; }
.dip--rein { clip-path: polygon(0 0, calc(var(--s) + 8%) 0, calc(var(--s) - 8%) 100%, 0 100%); }
.dip--rein::before { background: linear-gradient(90deg, rgba(14,20,24,.9) 0%, rgba(14,20,24,.55) 45%, rgba(14,20,24,.15) 70%); }
.dip--besch { clip-path: polygon(calc(var(--s) + 8%) 0, 100% 0, 100% 100%, calc(var(--s) - 8%) 100%); }
.dip--besch::before { background: linear-gradient(270deg, rgba(14,20,24,.9) 0%, rgba(14,20,24,.55) 45%, rgba(14,20,24,.15) 70%); }
.dip-in { position: absolute; top: 50%; transform: translateY(-50%); width: min(340px, 34%); }
.dip--rein .dip-in { left: 40px; }
.dip--besch .dip-in { right: 40px; text-align: right; }
.dip-schritt { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #a42423; font: 700 .72rem/1 var(--text-font); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.dip h3 { margin-top: 12px; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); line-height: .9; }
.dip h3 a { color: #fff !important; text-decoration: none; }
.dip ul { list-style: none; margin: 14px 0 22px; padding: 0; font-size: 1rem; color: #e6eaec; }
.dip li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.dip li b { color: #ff8a80; }
.dip-dann { position: absolute; z-index: 3; left: var(--s); top: 50%; transform: translate(-50%, -50%) rotate(-17deg); padding: 12px 18px; border-radius: 999px; background: #fff; color: #a42423; font: 700 1.3rem/1 var(--titel); text-transform: uppercase; box-shadow: 0 0 0 6px rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.45); }
.dip-unter { margin-top: 22px; max-width: 70ch; color: var(--text-2); }
.gewerbe { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 30px; padding: 30px 34px; border-radius: 18px; overflow: hidden; color: #fff; background: linear-gradient(90deg, rgba(14,20,24,.95) 0%, rgba(14,20,24,.75) 55%, rgba(14,20,24,.3) 100%), var(--bild) center 30%/cover; }
.gewerbe h3 { margin-top: 10px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); color: #fff; }
.gewerbe p { margin-top: 6px; color: #c9d1d5; max-width: 52ch; }
.gewerbe .knopf { flex: none; width: auto; }
.weitere-titel { margin: 34px 0 0; font: 700 .78rem/1 var(--text-font); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
/* ===== Farbfächer ===== */
.farbe-buehne { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: clamp(24px,4vw,60px); align-items: center; margin-top: 36px; }
.farb-etikett { position: absolute; right: 16px; top: 16px; z-index: 3; padding: 10px 16px; border-radius: 12px; background: #fff; color: #1b2227; box-shadow: 0 10px 24px rgba(0,0,0,.35); text-align: right; }
.farb-etikett small { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #6f7a80; }
.farb-etikett b { font: 700 1.5rem/1 var(--titel); text-transform: uppercase; color: #a42423; }
.faecher-box { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* Ablauf: Kopf mit Baustellentafel */
.ablauf-kopf { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,400px); gap: clamp(28px,5vw,72px); align-items: end; }
.ablauf-kopf > * { min-width: 0; }
.bautafel { padding: 22px 24px; border-radius: 16px; background: linear-gradient(160deg, #1f2a31, #141d23); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); position: relative; overflow: hidden; }
.bautafel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, #a42423 0 10px, #fff 10px 20px); }
.bt-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 0; font: 700 .72rem/1 var(--text-font); letter-spacing: .2em; text-transform: uppercase; color: #78868e; }
.bt-kopf b { font: 700 1rem/1 var(--titel); letter-spacing: .06em; color: #fff; }
.bt-zustand { margin: 14px 0 0; color: #a8b3b9; font-size: .95rem; }
.bt-zustand strong { display: inline-block; font: 700 1.6rem/1 var(--titel); text-transform: uppercase; color: #e5574e; margin-left: 4px; transition: color .4s; }
.bautafel.fertig .bt-zustand strong { color: #3ccf7f; }
.bt-balken { height: 8px; margin-top: 14px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bt-balken i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a42423, #e5574e); transition: width .6s var(--ease); }
.bautafel.fertig .bt-balken i { background: linear-gradient(90deg, #2e9e62, #3ccf7f); }
.bt-schritte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 14px; }
.bt-schritte button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: none; color: #a8b3b9; font: 600 .86rem/1.2 var(--text-font); text-align: left; cursor: pointer; transition: color .3s; }
.bt-schritte button:hover { color: #fff; }
.bt-schritte i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); transition: background .3s, border-color .3s; }
.bt-schritte .erledigt button { color: #fff; }
.bt-schritte .erledigt i { border-color: #a42423; background: #a42423 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.bt-fuss { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.14); font: 500 .74rem/1.3 var(--text-font); color: #78868e; }
.bt-fuss span::before { content: "● "; color: #e5574e; }
@media (max-width: 960px) { .ablauf-kopf { grid-template-columns: 1fr; align-items: start; } .bautafel { max-width: 520px; } }
@media (max-width: 600px) { .bautafel { display: none; } }
/* Farbwahl: Dachsteine zum Anklicken */
.stein-frage { margin: 0 0 14px; font: 700 1.05rem/1.2 var(--titel); letter-spacing: .06em; text-transform: uppercase; color: #1b2227; text-align: center; }
.st-zeiger { display: inline-block; vertical-align: -3px; color: #a42423; animation: st-tipp 1.6s ease-in-out infinite; }
@keyframes st-tipp { 50% { transform: translateY(4px); } }
.dachsteine { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px 12px; width: 100%; max-width: 400px; container-type: inline-size; }
.stein { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.st-form { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 7px 7px 46% 46% / 7px 7px 20% 20%;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0 9%, rgba(255,255,255,.12) 9% 12%, transparent 12%), linear-gradient(90deg, rgba(255,255,255,.24) 0, transparent 22%, transparent 48%, rgba(0,0,0,.28) 52%, rgba(255,255,255,.14) 58%, transparent 74%, rgba(0,0,0,.22) 100%), var(--f);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 14px -6px rgba(0,0,0,.45); transition: transform .3s cubic-bezier(.3,.7,.2,1), box-shadow .3s; }
.st-form::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a42423' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,.35); opacity: 0; transform: scale(.5); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
/* Name passt sich der Steinbreite an (längster Name „Blauschwarz“ ≈ 6,2 em), nie breiter als der Stein */
.st-name { font: 600 min(.78rem, calc((100cqi - 36px) / 4 / 6.9))/1.15 var(--text-font); color: #3c4a52; text-align: center; white-space: nowrap; }
.stein:hover .st-form { transform: translateY(-5px) rotate(-2deg); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 20px -8px rgba(0,0,0,.5); }
.stein:active .st-form { transform: translateY(1px) scale(.94); }
.stein[aria-pressed="true"] .st-form { transform: translateY(-5px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #a42423, 0 16px 22px -8px rgba(0,0,0,.5); }
.stein[aria-pressed="true"] .st-form::after { opacity: 1; transform: none; }
.stein[aria-pressed="true"] .st-name { color: #a42423; font-weight: 700; }
.stein:focus-visible { outline: none; }
.stein:focus-visible .st-form { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0e1418; }
@media (prefers-reduced-motion: reduce) { .st-zeiger { animation: none; } }
@media (max-width: 600px) { .dachsteine { gap: 14px 10px; max-width: none; } .st-name { font-size: min(.72rem, calc((100cqi - 30px) / 4 / 6.9)); } .stein-frage { font-size: .95rem; } }
.faecher-hinweis { margin-top: 12px; text-align: center; }
.faecher-box .knopf-2z { margin-top: 18px; max-width: 340px; }
/* ===== Matthias: Visitenkarte in 3D ===== */
.person2 { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(28px,5vw,80px); align-items: center; }
.person2 > * { min-width: 0; }
.karte-3d { perspective: 1200px; }
.vk { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: grid; grid-template-columns: 44% 56%; border-radius: 22px; overflow: hidden; background: #fff; color: #1b2227; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; box-shadow: 0 2px 0 #e3d9cb, 0 50px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.06); }
.vk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2; background: repeating-linear-gradient(90deg, #a42423 0 24px, #c4342d 24px 48px); }
.vk-bild { position: relative; }
.vk-bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.vk-bild em { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border-radius: 4px; background: rgba(14,20,24,.75); color: #fff; font: 600 .68rem/1.2 var(--text-font); font-style: normal; }
.vk-text { position: relative; display: flex; flex-direction: column; padding: 34px 26px 22px; min-width: 0; }
.vk-logo { width: 150px; }
.vk-text > b { margin-top: 22px; font-size: 2.3rem; line-height: .95; }
.vk-text > span { margin-top: 6px; font-size: .9rem; color: #4d5960; }
.vk dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 20px 0 0; container-type: inline-size; }
.vk dl div { padding: 10px 6px; border-radius: 10px; background: #f3efe8; text-align: center; min-width: 0; }
.vk dt { font-size: min(.62rem, calc((100cqi - 16px) / 3 / 8)); letter-spacing: .14em; text-transform: uppercase; color: #6f7a80; }
/* Wert passt sich der Feldbreite an (längster Wert „Bützow“), nie breiter als das Feld */
.vk dd { margin: 4px 0 0; font: 700 min(1.15rem, calc((100cqi - 16px) / 3 / 4.4))/1 var(--titel); color: #a42423; white-space: nowrap; }
.vk-sign { margin-top: auto; padding-top: 18px; font: 600 2rem/1 'Dancing Script', cursive; color: #a42423 !important; transform: rotate(-4deg); }
.vk-glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(40% 50% at var(--mx) var(--my), rgba(255,255,255,.55), transparent 70%), linear-gradient(115deg, transparent 30%, rgba(255,215,200,.25) 45%, rgba(190,230,255,.22) 55%, transparent 70%); mix-blend-mode: soft-light; opacity: .8; }
.person-zitat { margin-top: 18px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.05; color: #a42423; }
.person-text > p:not(.dach-kicker):not(.person-zitat):not(.sterne-zeile) { margin-top: 14px; }
.versprechen { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.versprechen li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f6f3ee; border: 1px dashed #c9bfb0; }
.stempel-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #a42423; color: #a42423; font-weight: 900; transform: rotate(-12deg); }
.versprechen b { display: block; font: 700 1.15rem/1.1 var(--titel); text-transform: uppercase; }
.versprechen div > span { display: block; margin-top: 2px; font-size: .88rem; color: #4d5960; }
.sterne-zeile { margin: 18px 0 0; font-size: .9rem; color: #4d5960; }
.sterne-zeile b { font: 700 1.6rem/1 var(--titel); color: #1b2227; margin-right: 4px; }
.sterne-zeile i { color: #f4b400; font-style: normal; letter-spacing: .1em; }
.aktionen--2 { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 20px; }
.aktionen--2 .knopf-2z:not(.k-voll) { padding-right: 18px; }
@media (max-width: 960px) {
  .farbe-buehne, .person2 { grid-template-columns: 1fr; }
  .karte-3d { max-width: 520px; }
  .dip-in { width: 42%; }
}
@media (max-width: 600px) {
  .diptychon { height: auto; display: grid; gap: 10px; box-shadow: none; overflow: visible; border-radius: 0; margin-top: 18px; }
  .dip { position: relative; inset: auto; clip-path: none !important; border-radius: 16px; overflow: hidden; min-height: 290px; }
  .dip--rein::before, .dip--besch::before { background: linear-gradient(0deg, rgba(14,20,24,.92) 20%, rgba(14,20,24,.35)); }
  .dip-in { position: absolute; left: 18px !important; right: 18px !important; top: auto; bottom: 18px; transform: none; width: auto; text-align: left !important; }
  .dip h3 { font-size: 2.3rem; }
  .dip ul { margin: 8px 0 14px; font-size: .86rem; }
  .dip li { padding: 3px 0; }
  .dip-dann { display: none; }
  .dip-unter { font-size: .88rem; margin-top: 14px; }
  .gewerbe { flex-direction: column; align-items: flex-start; padding: 20px; margin-top: 16px; }
  .weitere-titel { margin-top: 20px; }
  .farbe-buehne { margin-top: 18px; gap: 14px; }
  .farb-etikett { padding: 8px 12px; right: 10px; top: 10px; }
  .farb-etikett b { font-size: 1.1rem; }
  .karte-3d { max-width: none; }
  .vk { grid-template-columns: 38% 62%; }
  .vk-text { padding: 20px 12px 12px; }
  .vk-logo { width: 104px; }
  .vk-text > b { font-size: 1.5rem; margin-top: 10px; }
  .vk-text > span { font-size: .76rem; }
  .vk dl { gap: 4px; margin-top: 10px; }
  .vk dl div { padding: 6px 2px; }
  .vk dd { font-size: min(.9rem, calc((100cqi - 8px) / 3 / 4.4)); }
  .vk dt { font-size: min(.52rem, calc((100cqi - 8px) / 3 / 8)); }
  .vk-sign { font-size: 1.35rem; padding-top: 10px; }
  .person-zitat { font-size: 1.35rem; }
  .aktionen--2 { grid-template-columns: 1fr; }
  .versprechen li { padding: 9px 10px; gap: 10px; }
  .stempel-ic { width: 32px; height: 32px; }
  .versprechen b { font-size: .98rem; }
  .versprechen div > span { font-size: .8rem; }
}
.dip ul { font-size: .95rem; } .dip-unter, .person-text p { font-size: 1rem; }
.person-text .person-zitat { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
@media (max-width: 600px) { .person-text .person-zitat { font-size: 1.35rem; } }

/* ===== Fuß: Gruppen und Kontakt-Schild ===== */
.f-gruppe summary { list-style: none; cursor: default; }
.f-gruppe summary::-webkit-details-marker { display: none; }
.f-gruppe summary h3 { pointer-events: none; }
.f-schild { padding: 20px; border-radius: 16px; background: #fff; color: #1b2227; box-shadow: 0 6px 0 #c9bfb0, 0 24px 40px -24px rgba(0,0,0,.7); }
.f-schild h3 { color: #a42423 !important; }
.f-schild address { font-style: normal; font-size: .9rem; color: #4d5960; line-height: 1.5; }
.f-schild address b { display: block; font: 700 1.35rem/1.1 var(--titel); text-transform: uppercase; color: #1b2227; }
.f-schild .as-inhaber { display: block; margin-top: 4px; font-size: .8rem; letter-spacing: .04em; color: #6f7a80; }
.f-schild .as-ort { display: block; margin-top: 2px; font-size: .95rem; color: #3c4a52; }
.f-schild .nw { white-space: nowrap; }
.f-zeiten { margin: 12px 0 0 !important; font-size: .85rem; }
/* Status als fester Chip, Öffnungszeiten in eigener Zeile: beim Umschalten verrutscht nichts */
.f-zeiten .lt-status { color: #1b2227; margin: 0; }
.f-zeiten .f-chip { display: inline-flex; padding: 5px 12px 5px 10px; border-radius: 999px; background: #eef1f2; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.f-zeiten .f-chip.an { background: #e3f5ea; }
.f-zeiten .f-uhr { display: block; margin-top: 8px; font-weight: 600; color: #26313a; }
.f-zeiten .lt-status em { color: #1b2227; }
.f-zeiten .lt-status.an em { color: #1f8f53; }
.f-zeiten small { display: block; color: #6f7a80; margin-top: 2px; }
.f-mini { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 16px; padding-bottom: 6px; }
.f-mini .knopf { flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 6px; font-size: .8rem; width: auto; background: linear-gradient(180deg, #4a5963 0%, #2f3c45 46%, #222d34 54%, #182127 100%); }
.f-mini .knopf svg { width: 20px; height: 20px; }
.f-mini .knopf span { font-size: .74rem; letter-spacing: 0; }
.f-mini .knopf--wa { background: linear-gradient(180deg, #45d487 0%, #27a862 46%, #1f8f53 54%, #187847 100%); }
.f-raster a { background-image: none; }
.f-raster .f-gruppe a:hover { color: #fff; }
@media (max-width: 600px) {
  .f-raster { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .f-raster > .f-gebiet { display: none; }
  .f-schild { order: -1; margin-bottom: 8px; }
  .f-gruppe { border-radius: 12px; background: linear-gradient(180deg, #1b262d, #141d23); border: 1px solid rgba(255,255,255,.08); border-left: 4px solid #a42423; overflow: hidden; }
  .f-gruppe summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px; cursor: pointer; }
  .f-gruppe summary h3 { margin: 0 !important; font: 700 1.2rem/1 var(--titel) !important; letter-spacing: .04em !important; color: #fff !important; }
  .f-gruppe summary::after { content: ""; width: 22px; height: 12px; background: linear-gradient(to top right, transparent 44%, #ff6b60 45% 58%, transparent 59%) left/50% 100% no-repeat, linear-gradient(to top left, transparent 44%, #ff6b60 45% 58%, transparent 59%) right/50% 100% no-repeat; transform: none; transition: transform .3s var(--ease); }
  .f-gruppe[open] summary::after { transform: rotate(180deg); }
  .f-gruppe ul { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px !important; padding: 0 12px 14px; }
  .f-gruppe li { margin: 0 !important; }
  .f-gruppe a { display: block; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: .86rem; color: #e1e6e8 !important; }
}
@media (max-width: 600px) { .knopf-2z { grid-template-columns: 36px minmax(0,1fr) 36px; gap: 8px; padding: 10px 12px; } .knopf-2z .k-ic { width: 36px; height: 36px; } .knopf-2z .k-ic svg { width: 18px; height: 18px; } .knopf-2z .k-tx b { font-size: 1.12rem; } .knopf-2z .k-tx small { white-space: normal; font-size: .78rem; } .aktionen .k-voll { grid-template-columns: 36px minmax(0,1fr); padding-right: 56px; } .aktionen .k-voll .k-pfeil { display: none; } }

/* Sehr schmale Handys: Footer-Links einspaltig, damit „Bodenversiegelung“ nicht über die Kachel ragt */
@media (max-width: 359px) { .f-gruppe ul { grid-template-columns: 1fr !important; } }
/* ===== Bauschild: Hinweis auf die Agentur ===== */
.f-unten { align-items: flex-end; }
.bauschild { position: relative; display: grid; gap: 6px; width: 290px; padding: 26px 18px 16px; border-radius: 6px; background: #fbfaf7; color: #1b2227 !important; text-decoration: none !important; box-shadow: 0 0 0 3px #1b2227, 0 6px 0 3px #0b1013, 0 26px 40px -18px rgba(0,0,0,.8); transform: rotate(-1.2deg); transition: transform .35s var(--feder), box-shadow .3s; font-size: .82rem; }
.bauschild::before, .bauschild::after { content: ""; position: absolute; bottom: -34px; width: 8px; height: 34px; background: linear-gradient(90deg, #8a9399, #c9d0d4 40%, #6c757b); z-index: -1; }
.bauschild::before { left: 28px; } .bauschild::after { right: 28px; }
.bauschild:hover { transform: rotate(0deg) translateY(-6px); }
.bs-band { position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-45deg, #a42423 0 12px, #fff 12px 24px); background-size: 34px 34px; }
.bauschild:hover .bs-band { animation: bs-band .8s linear infinite; }
@keyframes bs-band { to { background-position: 34px 0; } }
.bs-kopf { font: 700 .68rem/1 var(--text-font); letter-spacing: .2em; text-transform: uppercase; color: #a42423; }
.bs-zeile { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; align-items: baseline; padding-top: 6px; border-top: 1px solid #e3ddd2; color: #2c353b; }
.bs-zeile small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #6f7a80; }
.bs-zeile b { font: 700 1.05rem/1.1 var(--titel); text-transform: uppercase; color: #1b2227; }
.bs-mess { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: #0e1418; color: #c9d1d5; font-size: .78rem; }
.bs-mess i { width: 8px; height: 8px; border-radius: 50%; background: #3ccf7f; box-shadow: 0 0 0 0 rgba(60,207,127,.6); animation: lt-puls 1.8s infinite; flex: none; }
.bs-mess b { margin-left: auto; font: 700 1.1rem/1 var(--titel); color: #3ccf7f; letter-spacing: .03em; }
.bs-cta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-weight: 700; color: #1b2227; }
.bs-cta em { font-style: normal; color: #a42423; transition: transform .3s var(--ease); }
.bauschild:hover .bs-cta em { transform: translateX(4px); }
@media (max-width: 600px) { .bauschild { width: 100%; margin: 6px 0 34px; transform: none; } }


/* Dezente Bauschild-Plakette */
.bauschild { display: none; }
.bauschild-mini { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 18px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #a8b3b9 !important; text-decoration: none !important; font-size: .78rem; overflow: hidden; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.bm-band { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(-45deg, #a42423 0 5px, #fff 5px 10px); background-size: 14px 14px; }
.bauschild-mini:hover { border-color: rgba(255,107,96,.5); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.bauschild-mini:hover .bm-band { animation: bs-band .6s linear infinite; }
.bm-text b { color: #fff; font: 700 .9rem/1 var(--titel); letter-spacing: .06em; }
.bm-mess { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: #0e1418; }
.bm-mess i { width: 6px; height: 6px; border-radius: 50%; background: #3ccf7f; animation: lt-puls 1.8s infinite; }
.bm-mess b { font: 700 .82rem/1 var(--titel); color: #3ccf7f; letter-spacing: .03em; }
.bauschild-mini::after { content: "Diese Seite lud in so vielen Sekunden. Auch so eine Website? →"; position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; width: 240px; padding: 8px 10px; border-radius: 6px; background: #fff; color: #1b2227; font-size: .75rem; line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,.4); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s; }
.bauschild-mini { overflow: visible; }
.bauschild-mini:hover::after { opacity: 1; transform: none; }
@media (max-width: 600px) { .bauschild-mini { margin: 4px 0 8px; } .bauschild-mini::after { display: none; } }
/* shot-modus: für Bildschirmaufnahmen der ganzen Seite */
.shot .hero { min-height: 860px !important; }
.shot.handy-shot .hero { min-height: 0 !important; }
.shot .entwurf, .shot .leiste { display: none !important; }
/* KOPF-START (aus _teile/kopf-entwuerfe.py, nicht hier ändern) */
/* ===== Neuer Kopf: gemeinsam (Entwurf) ===== */
.kk { --kk-h: 76px; }
.kk .innen { min-width: 0; }
.kk .logo { flex: none; display: block; }
.kk-nav { flex: 1; min-width: 0; display: flex; justify-content: safe center; }
.kk .knopf-2z { width: 100%; grid-template-columns: 40px minmax(0,1fr); gap: 10px; min-height: 58px; padding: 8px 14px 8px 8px; text-align: left; }
.kk .knopf-2z .k-ic { width: 40px; height: 40px; }
.kk-menue { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kk-menue > li { position: relative; }
.kk-menue > li > a, .kk-auf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 600 .95rem/1 var(--text-font); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.kk-pfeil { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.kk-auf[aria-expanded="true"] .kk-pfeil { transform: rotate(180deg); }
.kk-rechts { flex: none; display: flex; align-items: center; gap: 12px; }
.kk .kk-angebot { min-height: 46px; padding: 10px 18px; font-size: .92rem; white-space: nowrap; }
.kk-burger { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 10px; cursor: pointer; font: 700 .85rem/1 var(--text-font); }
.kk-burger svg { width: 22px; height: 22px; }
.kk-burger path { transition: transform .3s var(--ease), opacity .2s; transform-origin: 12px 12px; }
.kk-burger[aria-expanded="true"] .kk-s1 { transform: translateY(5px) rotate(45deg); }
.kk-burger[aria-expanded="true"] .kk-s2 { opacity: 0; }
.kk-burger[aria-expanded="true"] .kk-s3 { transform: translateY(-5px) rotate(-45deg); }
.kk-zwischen { margin: 0 0 10px; font: 700 .72rem/1 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: #a42423; }
.kk-klein { position: absolute; top: 100%; margin-top: 10px; left: 50%; width: 300px; margin-left: -150px; padding: 8px; border-radius: 14px; }
.kk-klein ul { list-style: none; margin: 0; padding: 0; }
.kk-klein a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.kk-klein b { display: block; font: 700 1.05rem/1.1 var(--titel); letter-spacing: .03em; text-transform: uppercase; }
.kk-klein small { display: block; margin-top: 3px; font-size: .8rem; }
.kk-alle { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: .92rem; text-decoration: none; }
.kk-alle::after { content: "→"; transition: transform .2s; }
.kk-alle:hover::after { transform: translateX(4px); }
.kk [hidden] { display: none !important; }
/* Handy und Tablet */
.kk-handy { position: fixed; left: 0; right: 0; top: var(--kk-h); bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
.kk-handy-innen { max-width: 960px; margin: 0 auto; padding: 22px var(--rand) calc(110px + env(safe-area-inset-bottom)); }
.kk-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.kk-kachel { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; aspect-ratio: 16 / 10; }
.kk-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kk-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(8,12,15,.88)); }
.kk-kachel span { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; }
.kk-kachel b { display: block; font: 700 1.05rem/1.05 var(--titel); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.kk-kachel small { display: block; margin-top: 2px; font-size: .7rem; color: #c3ccd1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-handy-spalten { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 26px; }
.kk-liste { list-style: none; margin: 0; padding: 0; }
.kk-liste a { display: block; padding: 10px 0; font: 700 1.3rem/1.1 var(--titel); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--kk-linie); }
.kk-handy-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 26px; }
.kk-handy-knoepfe .knopf { width: 100%; min-width: 0; }
.kk-zeiten { margin: 14px 0 0; font-size: .85rem; text-align: center; }
html.kk-offen, html.kk-offen body { overflow: hidden; }
@media (min-width: 700px) { .kk-kacheln { grid-template-columns: repeat(4, minmax(0,1fr)); } .kk-handy-spalten { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; } }
@media (min-width: 1360px) { .kk-a .kk-kontakt { display: none; } }
@media (max-width: 1359px) { .kk-a .kk-tel { display: none; } }
@media (max-width: 1180px) {
  .kk-nav { display: none; }
  .kk-burger { display: inline-flex; }
  .kk-rechts { margin-left: auto; }
}
@media (max-width: 520px) {
  .kk { --kk-h: 64px; }
  .kk .kk-angebot { min-height: 40px; padding: 8px 12px; font-size: .78rem; }
  .kk-burger { padding: 0 10px; min-height: 40px; }
  .kk-burger span { display: none; }
  .kk-handy-knoepfe { grid-template-columns: 1fr; }
  .kk .innen { gap: 10px; } .kk-rechts { gap: 8px; }
  .kk-lang { display: none; }
}
@media (max-width: 374px) { .kk .kk-angebot { display: none; } }
@media (prefers-reduced-motion: reduce) { .kk *, .kk *::after { transition: none !important; } }

/* ===== Entwurf A: dunkel mit Mega-Menü ===== */
.kk-a { --kk-linie: rgba(255,255,255,.1); background: rgba(14,20,24,.97); box-shadow: 0 1px 0 rgba(255,255,255,.06); color: #eef1f2; }
.kk-a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #a42423 20%, #a42423 80%, transparent); opacity: .9; }
.kk-a.fest { box-shadow: 0 10px 30px -14px #000; }
.kk-a .innen { min-height: var(--kk-h); }
.kk-a .logo { padding: 8px 12px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px -10px #000; }
.kk-a .logo img { height: 36px; width: auto; }
.kk-a .kk-menue > li > a, .kk-a .kk-auf { color: #dfe5e8; }
.kk-a .kk-menue > li > a:hover, .kk-a .kk-auf:hover, .kk-a .kk-auf[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
.kk-a .kk-menue > li > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #e5574e; border-radius: 0; }
.kk-a .kk-tel { width: auto; grid-template-columns: 30px auto; min-height: 46px; padding: 4px 14px 4px 6px; }
.kk-a .kk-tel .k-ic { width: 30px; height: 30px; }
.kk-a .kk-tel .k-ic svg { width: 16px; height: 16px; }
.kk-a .kk-tel .k-tx b { font-size: 1.15rem; line-height: 1; } .kk-a .kk-tel .k-tx small { margin-top: 1px; font: 600 .68rem/1.2 var(--text-font); letter-spacing: 0; color: #a8b3b9; }
.kk-a .kk-burger { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.kk-a .kk-klein { background: #141d23; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 40px -20px #000; }
.kk-a .kk-klein a { color: #eef1f2; } .kk-a .kk-klein a:hover { background: rgba(255,255,255,.06); }
.kk-a .kk-klein small { color: #a8b3b9; }
.kk-mega { position: absolute; left: 0; right: 0; top: 100%; background: #0e1418; border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 60px -30px #000; animation: kk-rein .28s var(--ease); }
@keyframes kk-rein { from { opacity: 0; transform: translateY(-8px); } }
.kk .kk-mega-innen { display: grid; min-height: 0; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; padding-block: 28px 32px; }
.kk-mega-karten { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.kk-mk { display: block; height: 100%; border-radius: 12px; overflow: hidden; background: #141d23; border: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
.kk-mk:hover { transform: translateY(-3px); border-color: #a42423; }
.kk-mk img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.kk-mk span { display: block; padding: 10px 12px 12px; }
.kk-mk b { display: block; font: 700 1.1rem/1.05 var(--titel); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.kk-mk small { display: block; margin-top: 3px; font-size: .74rem; color: #a8b3b9; }
.kk-mega-seite { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.08); }
.kk-mega-text { margin: 0 0 18px; color: #c3ccd1; font-size: .92rem; line-height: 1.55; }
.kk-mega-text b { color: #fff; }
.kk-mega-seite .knopf { width: 100%; }
.kk-a .kk-alle { color: #fff; }
.kk-a .kk-handy { background: #0e1418; color: #eef1f2; }
.kk-a .kk-liste a { color: #fff; } .kk-a .kk-zeiten { color: #a8b3b9; } .kk-a .kk-alle { color: #fff; }
@media (max-width: 1280px) { .kk .kk-mega-innen { grid-template-columns: minmax(0,1fr); } .kk-mega-seite { padding-left: 0; border-left: 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 18px; } .kk-mega-seite .kk-zwischen { display: none; } .kk-mega-text { margin: 0; } .kk-mega-seite .knopf { width: auto; } .kk-mega-seite .kk-alle { margin: 0; } }
@media (max-width: 520px) { .kk-a .logo { padding: 6px 9px; } .kk-a .logo img { height: 26px; } }
/* KOPF-ENDE */

/* ===== Nur im Theme: Formular-Meldungen ===== */
.foto-tipp { display: block; margin-top: 8px; font-size: .8rem; color: var(--text-3); }
.form-meldung { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(164,36,35,.1); border: 1px solid rgba(164,36,35,.35); color: #8c1d1a; font-size: .9rem; }
.fk .knopf[disabled] { opacity: .6; cursor: wait; }

/* ===== Nur im Theme: offene Angaben („Infos folgen“, Liste in offene-stellen.md) ===== */
.dvm .fehlt[data-offen] { display: inline-flex; align-items: center; gap: 6px; vertical-align: .08em; margin: 0 2px; padding: 1px 10px 1px 8px; border-radius: 999px; background: none; outline: 0; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); color: inherit; opacity: .8; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.dvm .fehlt[data-offen]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a42423; box-shadow: 0 0 0 0 rgba(164,36,35,.5); animation: offen-puls 2.4s ease-out infinite; }
@keyframes offen-puls { 0% { box-shadow: 0 0 0 0 rgba(164,36,35,.5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(164,36,35,0); } }
@media (prefers-reduced-motion: reduce) { .dvm .fehlt[data-offen]::before { animation: none; } }