/* =====================================================================
   Schwarze Glas – Startseite
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { --linie: var(--akzent-hell); position: relative; min-height: max(760px, 100svh); color: var(--weiss); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; background: var(--tief); }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.04); }
.js .hero-bild img { animation: heroZoom 2.4s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1.04); filter: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,18,18,.86) 0%, rgba(14,18,18,.62) 38%, rgba(14,18,18,.12) 70%, rgba(14,18,18,.25) 100%),
    linear-gradient(0deg, rgba(14,18,18,.42) 0%, rgba(14,18,18,.12) 18%, rgba(14,18,18,0) 40%),
    linear-gradient(180deg, rgba(14,18,18,.45) 0%, rgba(14,18,18,0) 22%);
}
.hero-inhalt { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 2.5rem; align-items: end; padding-top: 190px; padding-bottom: 4.5rem; }
.hero h1 { font-size: clamp(2.1rem, 1.1rem + 3.1vw, 4.1rem); line-height: 1.04; letter-spacing: -0.025em; font-variation-settings: "wdth" 104; text-wrap: balance; }
.hero h1 .zeile { display: block; white-space: nowrap; }
@media (max-width: 420px) { .hero h1 .zeile { white-space: normal; } }
.js .hero h1 .zeile { animation: zeileRein 1s var(--ease) both; }
.js .hero h1 .zeile:nth-child(2) { animation-delay: .12s; }
@keyframes zeileRein { from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } }

/* Bemaßungslinie unter der H1 */
.bemassung { position: relative; display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0 1.4rem; max-width: 560px; color: var(--linie); }
.bemassung svg { flex: 1; height: 22px; overflow: visible; }
.bemassung .bm-linie { stroke: currentColor; stroke-width: 1.5; }
.bemassung .bm-ende { stroke: currentColor; stroke-width: 1.5; }
.bemassung .bm-ticks line { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.bemassung .bm-text { font-size: .95rem; font-weight: 600; color: var(--weiss); white-space: nowrap; font-variation-settings: "wdth" 108; }
.js .bemassung .bm-linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bmZiehen 1.3s .55s var(--ease) forwards; }
.js .bemassung .bm-ticks line { opacity: 0; animation: bmTick .3s forwards; }
.js .bemassung .bm-text { opacity: 0; animation: bmText .6s 1.5s forwards; }
@keyframes bmZiehen { to { stroke-dashoffset: 0; } }
@keyframes bmTick { to { opacity: 1; } }
@keyframes bmText { to { opacity: 1; } }

.hero .lead { max-width: 34rem; color: rgba(255,255,255,.88); margin-bottom: 2rem; }
.hero-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.bewertung { display: flex; align-items: center; gap: .75rem; color: var(--weiss); text-decoration: none; }
.bewertung strong { font-size: 2.5rem; line-height: 1; font-variation-settings: "wdth" 115; letter-spacing: -.02em; }
.bewertung .sterne { display: flex; gap: 2px; color: var(--linie); }
.bewertung .sterne .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.bewertung small { display: block; font-size: .92rem; color: rgba(255,255,255,.8); }

.hero-karten { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; align-self: end; }
.tuer-karte { position: relative; aspect-ratio: 4/3.15; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 25px 60px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.25); }
.tuer-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--ease); }
.tuer-karte img.offen { opacity: 0; }
.tuer-karte.ist-offen img.offen { opacity: 1; }
.tuer-karte .schalter {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: var(--r); border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--weiss);
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  transition: transform .3s var(--ease), background .3s;
}
.tuer-karte .schalter:hover { transform: scale(1.06); background: rgba(255,255,255,.32); }
.tuer-karte .schalter .ic { width: 30px; height: 30px; transition: transform .6s var(--ease); }
.tuer-karte.ist-offen .schalter .ic { transform: scaleX(-1); }
.tuer-karte .unter { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .65rem .9rem; border-radius: var(--r-m); font-size: .9rem; line-height: 1.3; }
.info-karte { padding: 1.6rem 1.6rem 1.5rem; display: flex; flex-direction: column; }
.info-karte .kopfzeile { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.info-karte .rund { width: 48px; height: 48px; border-radius: var(--r); flex: none; display: grid; place-items: center; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.info-karte .rund .ic { width: 28px; height: 28px; }
.info-karte h2 { font-size: 1.15rem; line-height: 1.2; letter-spacing: 0; font-variation-settings: "wdth" 104; }
.info-karte p { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.5; margin-bottom: 1rem; }
.info-karte a.weiter { margin-top: auto; color: var(--weiss); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.info-karte a.weiter .ic { width: 18px; height: 18px; color: var(--linie); transition: transform .3s var(--ease); }
.info-karte a.weiter:hover .ic { transform: translateX(4px); }
.js .hero-karten > * { animation: karteRein 1s var(--ease) both; }
.js .hero-karten > *:nth-child(1) { animation-delay: .6s; }
.js .hero-karten > *:nth-child(2) { animation-delay: .75s; }
@keyframes karteRein { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* Partner-Leiste */
.partner { position: relative; background: rgba(18,24,24,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.12); }
.partner-inner { display: flex; align-items: center; gap: 2.5rem; padding-block: 1.8rem 2rem; }
.partner p { margin: 0; flex: none; color: rgba(255,255,255,.7); font-size: .92rem; max-width: 10rem; line-height: 1.35; }
.marken { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.25rem; flex: 1; margin: 0; padding: 0; list-style: none; }
.marken li { color: rgba(255,255,255,.62); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; font-variation-settings: "wdth" 120; white-space: nowrap; transition: color .25s; }
.marken li:hover { color: var(--weiss); }

@media (max-width: 1100px) {
  .hero-inhalt { grid-template-columns: 1fr; padding-top: 160px; }
  .hero-karten { max-width: 760px; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero::after { background: linear-gradient(180deg, rgba(14,18,18,.55) 0%, rgba(14,18,18,.55) 40%, rgba(14,18,18,.9) 100%); }
  .hero-karten { grid-template-columns: 1fr; }
  .partner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .partner p { max-width: none; }
  .marken { justify-content: flex-start; gap: .6rem 1.4rem; }
  .marken li { font-size: 1.05rem; }
}

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding-block: clamp(4.5rem, 9vw, 8rem); }
.abschnitt-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt-kopf p { margin: 0; color: var(--grau-500); font-size: 1.12rem; max-width: 36rem; }
@media (max-width: 860px) { .abschnitt-kopf { grid-template-columns: 1fr; } }
.dunkel { --linie: var(--akzent-hell); background: var(--tief); color: #dfe5e5; }
.dunkel h2, .dunkel h3 { color: var(--weiss); }
.grau { background: var(--grau-50); }

/* ---------- Leistungen (Bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; gap: 1rem; }
.kachel { position: relative; overflow: hidden; border-radius: var(--r-l); color: var(--weiss); text-decoration: none; isolation: isolate; background: var(--anthrazit); }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,18,18,0) 40%, rgba(14,18,18,.55) 100%); }
.kachel:hover img { transform: scale(1.05); }
/* Lichtreflex über die Kachel */
.kachel .reflex { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%); transform: translateX(-120%); }
.kachel:hover .reflex, .kachel:focus-visible .reflex { transition: transform 1s var(--ease); transform: translateX(120%); }
.kachel .glas { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; border-radius: var(--r-m); z-index: 2; }
.kachel .glas .ic { width: 44px; height: 44px; padding: 8px; border-radius: var(--r); background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.kachel h3 { font-size: 1.2rem; }
.kachel .glas p { margin: .2rem 0 0; font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.35; }
.kachel .glas .pfeil-rund { margin-left: auto; width: 40px; height: 40px; flex: none; border-radius: var(--r); display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); transition: transform .35s var(--ease); }
.kachel .glas .pfeil-rund .ic { width: 20px; height: 20px; padding: 0; background: none; box-shadow: none; stroke-width: 2; }
.kachel:hover .pfeil-rund { transform: scale(1.06); }
.k-dusche { grid-column: span 4; grid-row: span 2; }
.k-kueche { grid-column: span 5; grid-row: span 1; }
.k-gelaender { grid-column: span 3; grid-row: span 2; }
.k-tueren { grid-column: span 5; grid-row: span 1; }
.k-spiegel { grid-column: span 4; grid-row: span 1; }
.k-aussen { grid-column: span 4; grid-row: span 1; }
.k-insekt { grid-column: span 4; grid-row: span 1; }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 230px; }
  .k-dusche, .k-gelaender { grid-column: span 3; grid-row: span 2; }
  .k-kueche, .k-tueren { grid-column: span 3; }
  .k-spiegel, .k-aussen, .k-insekt { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .bento > * { grid-column: auto !important; grid-row: auto !important; }
}

/* Weitere Leistungen als Icon-Liste */
.weitere { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 1rem; border-radius: var(--r-l); overflow: hidden; background: var(--grau-50); }
.weitere a { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.5rem; text-decoration: none; border-right: 1px solid var(--grau-150); border-bottom: 1px solid var(--grau-150); transition: background .25s; }
.weitere a:hover { background: var(--weiss); }
.weitere .ic { width: 46px; height: 46px; padding: 8px; border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--grau-150); }
.weitere a:hover .ic { background: var(--anthrazit); color: var(--weiss); box-shadow: none; }
.weitere strong { display: block; font-variation-settings: "wdth" 106; }
.weitere a > span > span { font-size: .92rem; color: var(--grau-500); line-height: 1.3; display: block; }
.weitere strong { font-size: 1.05rem; }
@media (max-width: 900px) { .weitere { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .weitere { grid-template-columns: 1fr; } }

/* ---------- Klar oder satiniert ---------- */
.satinato { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.satinato-bild { position: relative; aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; background: var(--grau-150); --pos: 50%; touch-action: pan-y; }
.satinato-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.satinato-bild .milch { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.satinato-bild .milch img { filter: blur(14px) brightness(1.18) saturate(.55); transform: scale(1.08); }
.satinato-bild .milch::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.32); }
.satinato-bild .kante { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--linie); box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.satinato-bild .griff { position: absolute; top: 50%; left: var(--pos); translate: -50% -50%; width: 60px; height: 60px; border-radius: var(--r); background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); pointer-events: none; }
.satinato-bild .griff .ic { width: 28px; height: 28px; stroke-width: 2; }
.satinato-bild input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.satinato-bild input[type="range"]:focus-visible + .griff { outline: 3px solid var(--weiss); outline-offset: 3px; }
.satinato-bild .marke { position: absolute; top: 16px; padding: .4rem .8rem; border-radius: var(--r); font-size: .85rem; font-weight: 700; color: var(--anthrazit); background: rgba(255,255,255,.85); pointer-events: none; }
.satinato-bild .marke.links { left: 16px; }
.satinato-bild .marke.rechts { right: 16px; }
.satinato-bild .hinweis { position: absolute; left: 16px; bottom: 14px; font-size: .78rem; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.glasarten { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .75rem; }
.glasarten li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: center; }
.glasarten .muster { width: 56px; height: 56px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(41,51,51,.15); }
.m-klar { background: linear-gradient(135deg, #eef6f5, #d9e6e4 60%, #f6fbfa); }
.m-satin { background: radial-gradient(circle at 30% 30%, #fff, #e6eaea); filter: blur(.3px); }
.m-teil { background: repeating-linear-gradient(180deg, #e7ecec 0 8px, #f7fafa 8px 14px); }
.m-farbe { background: linear-gradient(135deg, #12807f, #0a4f50); }
.glasarten strong { display: block; }
.glasarten li > span > span { display: block; color: var(--grau-500); font-size: .95rem; }
@media (max-width: 900px) { .satinato { grid-template-columns: 1fr; } .satinato-bild { aspect-ratio: 4/4.4; } }

/* ---------- Sonderformen / Sorgen ---------- */
.sorgen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sorgen-bild { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3/4; }
.sorgen-bild img { width: 100%; height: 100%; object-fit: cover; }
.sorgen-bild .zitat { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 1.3rem 1.4rem; }
.sorgen-bild .zitat p { font-size: 1.05rem; line-height: 1.45; margin-bottom: .6rem; }
.sorgen-bild .zitat footer { font-size: .88rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: .5rem; }
.sorgen-bild .zitat .sterne { color: var(--linie); display: inline-flex; gap: 1px; }
.sorgen-bild .zitat .sterne .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }
/* Bemaßung an der Dachschräge */
.sorgen-bild .schraege { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sorgen-bild .schraege path, .sorgen-bild .schraege line { stroke: var(--linie); stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; }
.sorgen-bild .schraege text { fill: var(--weiss); font: 700 15px var(--schrift); paint-order: stroke; stroke: rgba(14,18,18,.75); stroke-width: 4px; }
.js .sorgen-bild .schraege path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sorgen-bild.sichtbar .schraege path { transition: stroke-dashoffset 1.4s var(--ease); stroke-dashoffset: 0; }
.js .sorgen-bild .schraege text { opacity: 0; }
.sorgen-bild.sichtbar .schraege text { transition: opacity .6s 1.2s; opacity: 1; }
.sorgen-liste { display: grid; gap: 1rem; margin-top: 2rem; }
.sorge { padding: 1.5rem 1.6rem; border-radius: var(--r-l); background: var(--weiss); box-shadow: 0 0 0 1px var(--grau-150); }
.sorge h3 { display: flex; align-items: flex-start; gap: .8rem; font-size: 1.15rem; margin-bottom: .6rem; font-variation-settings: "wdth" 104; }
.sorge h3 .ic { width: 28px; height: 28px; margin-top: -2px; color: var(--grau-500); }
.sorge p { margin: 0; color: var(--grau-700); }
.sorge p strong { color: var(--anthrazit); }
@media (max-width: 900px) { .sorgen { grid-template-columns: 1fr; } .sorgen-bild { aspect-ratio: 4/4.5; } }

/* ---------- Ablauf ---------- */
.ablauf-wrap { position: relative; margin-top: 3rem; }
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf-wrap .verbindung { position: absolute; left: 34px; width: calc(75% + 1rem - 34px); top: 34px; height: 2px; z-index: 0; overflow: visible; }
.ablauf-wrap .verbindung line { stroke: var(--linie); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ablauf-wrap.sichtbar .verbindung line { transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset: 0; }
.schritt { position: relative; z-index: 1; counter-increment: schritt; }
.schritt .knopf { width: 68px; height: 68px; border-radius: var(--r); display: grid; place-items: center; background: var(--tief); color: var(--weiss); box-shadow: 0 0 0 6px var(--tief), 0 0 0 7px rgba(255,255,255,.18); margin-bottom: 1.5rem; position: relative; }
.schritt .knopf .ic { width: 34px; height: 34px; }
.schritt .knopf::after { content: counter(schritt); position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: var(--r); background: var(--akzent); color: var(--auf-akzent); font-size: .82rem; font-weight: 800; display: grid; place-items: center; }
.schritt h3 { margin-bottom: .5rem; }
.schritt p { color: #b9c2c2; margin: 0; font-size: 1rem; }
.zeichnung { position: relative; margin-top: 4rem; border-radius: var(--r-xl); background: var(--weiss); padding: clamp(1rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center; color: var(--anthrazit); }
.zeichnung figure { margin: 0; position: relative; }
.zeichnung figure img { width: 100%; height: auto; border-radius: var(--r-m); }
.zeichnung .text h3 { color: var(--anthrazit); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.zeichnung .text p { color: var(--grau-700); }
.zeichnung .massband { margin-top: 1.2rem; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .ablauf-wrap .verbindung { display: none; }
  .zeichnung { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* ---------- Seit 1896: Maßband-Zeitleiste ---------- */
.familie { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.familie-foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--anthrazit); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.familie-foto img { display: block; width: 100%; height: auto; aspect-ratio: 700 / 241; object-fit: cover; }
.familie-foto figcaption { display: grid; gap: .15rem; padding: 1rem 1.25rem 1.1rem; color: rgba(255,255,255,.8); font-size: .95rem; }
.familie-foto figcaption strong { color: var(--weiss); font-size: 1.05rem; }
.zeitband { position: relative; margin-top: 4rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .5rem; }
.zeitband-inner { position: relative; min-width: 900px; }
.band {
  position: relative; height: 66px; border-radius: var(--r);
  background:
    linear-gradient(90deg, rgba(255,255,255,.95) 0 1.5px, transparent 1.5px) 0 0 / calc((100% - 1.5px) / 13) 30px repeat-x,
    linear-gradient(90deg, rgba(255,255,255,.75) 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 26) 20px repeat-x,
    linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 130) 11px repeat-x,
    linear-gradient(180deg, #0e6567, var(--akzent) 60%, #05393a);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 14px 30px -18px rgba(8,74,75,.7);
  clip-path: inset(0 100% 0 0 round 6px);
}
.zeitband.sichtbar .band { transition: clip-path 2.2s var(--ease); clip-path: inset(0 0 0 0 round 6px); }
.band-zahlen span { position: absolute; bottom: 6px; padding-left: 5px; }
.band-zahlen span:last-child { transform: translateX(-100%); padding: 0 5px 0 0; }
.band-zahlen { position: absolute; inset: 0; font-weight: 800; font-size: .85rem; color: rgba(255,255,255,.95); font-variant-numeric: tabular-nums; pointer-events: none; }
.marken-zeit { position: relative; height: 150px; }
.zeitpunkt { position: absolute; top: 0; transform: translateX(-50%); width: 220px; text-align: center; opacity: 0; transition: opacity .6s; }
.zeitband.sichtbar .zeitpunkt { opacity: 1; }
.zeitband.sichtbar .zeitpunkt:nth-child(2) { transition-delay: .9s; }
.zeitband.sichtbar .zeitpunkt:nth-child(3) { transition-delay: 1.6s; }
.zeitpunkt::before { content: ""; display: block; width: 2px; height: 26px; margin: 0 auto 10px; background: var(--anthrazit); }
.zeitpunkt strong { display: block; font-size: 1.9rem; line-height: 1; font-variation-settings: "wdth" 118; letter-spacing: -.02em; }
.zeitpunkt span { display: block; font-size: .95rem; color: var(--grau-500); margin-top: .35rem; line-height: 1.35; }
.zeitpunkt:first-child { transform: none; text-align: left; }
.zeitpunkt:first-child::before { margin-left: 0; }
.zeitpunkt:nth-child(2) { transform: translateX(-100%); text-align: right; }
.zeitpunkt:nth-child(2)::before { margin-right: 0; }
.zeitpunkt:last-child { transform: translateX(-100%); text-align: right; width: 200px; }
.zeitpunkt:last-child::before { margin-right: 0; }
@media (max-width: 900px) { .familie { grid-template-columns: 1fr; } }

/* ---------- Ausstellung ---------- */
.ausstellung { --linie: var(--akzent-hell); position: relative; isolation: isolate; color: var(--weiss); overflow: hidden; }
.ausstellung > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ausstellung::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,18,18,.82), rgba(14,18,18,.35)); }
.ausstellung-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; align-items: stretch; }
.ausstellung h2 { color: var(--weiss); margin-bottom: 1.2rem; }
.ausstellung .lead { color: rgba(255,255,255,.88); max-width: 34rem; }
.aus-liste { list-style: none; margin: 2rem 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.aus-liste li { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--r-m); font-weight: 600; font-size: .98rem; line-height: 1.25; }
.aus-liste .ic { width: 30px; height: 30px; }
.oeffnung { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.oeffnung h3 { display: flex; align-items: center; gap: .7rem; color: var(--weiss); }
.oeffnung h3 .ic { color: var(--linie); }
.oeffnung dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; }
.oeffnung dt { color: rgba(255,255,255,.75); }
.oeffnung dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.oeffnung .trenner { height: 1px; background: rgba(255,255,255,.2); }
.oeffnung address { font-style: normal; line-height: 1.6; }
.oeffnung .park { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.9); }
.oeffnung .park .ic { width: 26px; height: 26px; }
.oeffnung .btn { align-self: flex-start; }
@media (max-width: 900px) { .ausstellung-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .aus-liste { grid-template-columns: 1fr; } }

/* ---------- Referenz Dom ---------- */
.dom { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dom-bild { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; }
.dom-bild img { width: 100%; height: 100%; object-fit: cover; }
.dom-bild .glas { position: absolute; left: 16px; bottom: 16px; padding: .75rem 1rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.dom-bild .glas .ic { width: 20px; height: 20px; color: var(--linie); }
@media (max-width: 900px) { .dom { grid-template-columns: 1fr; } }

/* ---------- Bewertungen ---------- */
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stimme { margin: 0; padding: 0 1.75rem 1.75rem; border-radius: var(--r-l); background: var(--weiss); box-shadow: 0 0 0 1px var(--grau-150); display: flex; flex-direction: column; overflow: hidden; }
.stimme .massband { margin: 0 -1.75rem 1.5rem; width: calc(100% + 3.5rem); }
.stimme .sterne { display: flex; gap: 2px; color: var(--linie); margin-bottom: 1rem; }
.stimme .sterne .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.stimme blockquote { margin: 0 0 1.25rem; font-size: 1.08rem; line-height: 1.55; }
.stimme figcaption { margin-top: auto; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.stimme figcaption span { color: var(--grau-500); font-weight: 400; }
.stimmen-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.stimmen-fuss .wert { display: flex; align-items: center; gap: 1rem; }
.stimmen-fuss .wert strong { font-size: 3rem; line-height: 1; font-variation-settings: "wdth" 118; }
@media (max-width: 900px) { .stimmen { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-liste details { border-bottom: 1px solid var(--grau-150); }
.faq-liste details:first-child { border-top: 1px solid var(--grau-150); }
.faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font-weight: 700; font-size: 1.12rem; font-variation-settings: "wdth" 104; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary .plus { width: 40px; height: 40px; flex: none; border-radius: var(--r); display: grid; place-items: center; background: var(--grau-50); transition: transform .35s var(--ease), background .25s; }
.faq-liste summary .plus .ic { width: 18px; height: 18px; stroke-width: 2; }
.faq-liste details[open] summary .plus { transform: rotate(45deg); background: var(--akzent); }
.faq-liste .antwort { padding: 0 3.5rem 1.5rem 0; color: var(--grau-700); }
.faq-liste .antwort p:last-child { margin: 0; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq-liste .antwort { padding-right: 0; } }

/* ---------- Abschluss ---------- */
.abschluss { --linie: var(--akzent-hell); position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--anthrazit); color: var(--weiss); padding: clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; isolation: isolate; }
.abschluss::before { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; z-index: -1; background: radial-gradient(closest-side, rgba(77,188,178,.25), transparent); }
.abschluss h2 { color: var(--weiss); }
.abschluss p { color: rgba(255,255,255,.85); margin: 1rem 0 0; max-width: 34rem; }
.abschluss-aktion { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.abschluss-aktion .tel-gross { color: var(--weiss); text-decoration: none; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); font-variation-settings: "wdth" 115; display: flex; align-items: center; gap: .75rem; }
.abschluss-aktion .tel-gross .ic { color: var(--linie); }
.abschluss .massband { position: absolute; left: 0; right: 0; top: 0; --mb-farbe: rgba(77,188,178,.6); }
@media (max-width: 860px) { .abschluss { grid-template-columns: 1fr; } }

/* ---------- Karte: Projektfarben ---------- */
#einsatzgebiet {
  --linie: var(--akzent-hell);
  --lk-bg: var(--tief); --lk-surface: #1f2727; --lk-map-bg: #1a2121;
  --lk-text: #e3e8e8; --lk-heading: #ffffff; --lk-muted: #a9b3b3; --lk-dim: #8b9595;
  --lk-accent: #3c9e96; --lk-accent-2: #9aa7a7; --lk-accent-3: #9aa7a7;
  --lk-time: #ffffff; --lk-hub: #3c9e96; --lk-on-accent: #0b1414;
  --lk-font-head: var(--schrift); --lk-case: none; --lk-radius: var(--r);
}
#einsatzgebiet .lseo-title { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; font-variation-settings: "wdth" 112; letter-spacing: -.015em; font-weight: 700; }
#einsatzgebiet .lseo-title em { color: var(--weiss); }
#einsatzgebiet .lseo-panel { background: linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12); border: 0; }
#einsatzgebiet .lseo-kicker, #einsatzgebiet .readout-label, #einsatzgebiet .readout-unit { letter-spacing: .02em; text-transform: none; font-size: .85rem; }
#einsatzgebiet .lseo-link { border-radius: var(--r); background: var(--akzent); color: var(--auf-akzent); border: 0; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1rem; }
#einsatzgebiet .lseo-link:hover { background: var(--akzent-tief); color: var(--auf-akzent); }
#einsatzgebiet .lseo-btn { border-radius: var(--r); text-transform: none; letter-spacing: 0; font-size: .92rem; }
#einsatzgebiet .lseo-bar { background: transparent; border: 0; padding: 0; }
#einsatzgebiet .m-city .label, #einsatzgebiet .m-hub .label { letter-spacing: 0; }
#einsatzgebiet .section-label { display: none; }
#einsatzgebiet .lseo-map { border-color: rgba(255,255,255,.12); }
#einsatzgebiet .lseo-panel .massband { margin: -2.4rem -2.2rem 1.6rem; width: calc(100% + 4.4rem); --mb-farbe: rgba(77,188,178,.65); }
@media (max-width: 640px) { #einsatzgebiet .lseo-panel .massband { margin: -1.6rem -1.2rem 1.2rem; width: calc(100% + 2.4rem); } }

/* Einblenden beim Scrollen: nur einzelne, bewusste Momente (Klasse .sichtbar via JS) */
@media (max-width: 520px) {
  .oeffnung { padding: 1.5rem; }
  .oeffnung dl { grid-template-columns: 1fr; gap: 0; }
  .oeffnung dd { margin-bottom: .6rem; }
}

/* =====================================================================
   v2 – Petrol, Logo-Slider, Dusch-Konfigurator, Zeichnung → Glas
   ===================================================================== */
.faq-liste details[open] summary .plus { color: var(--auf-akzent); }

/* ---------- Partner: Milchglas-Leiste mit laufenden Logos ---------- */
/* Milchglas-Band unter dem Hero: Foto scheint durch */
.partner { background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.09) 60%, rgba(255,255,255,.06)), rgba(20,28,28,.16);
  -webkit-backdrop-filter: blur(26px) saturate(165%) brightness(1.04); backdrop-filter: blur(26px) saturate(165%) brightness(1.04);
  border-top: 1px solid rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 18px 40px -30px rgba(255,255,255,.5); }
.partner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(255,255,255,.08)); }
.partner p { color: rgba(255,255,255,.92); font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.laufband img { filter: drop-shadow(0 1px 6px rgba(0,0,0,.22)); }
.partner .massband { --mb-farbe: rgba(255,255,255,.4); }
.partner-inner { gap: 2rem; padding-block: 1.6rem 1.8rem; }
.laufband { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband-spur { display: flex; width: max-content; animation: laufen 48s linear infinite; }
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur { animation-play-state: paused; }
.laufband ul { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); margin: 0; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; }
.laufband li { flex: none; }
.laufband img { height: 34px; width: auto; opacity: .92; transition: opacity .3s; }
.laufband li.hoch img { height: 44px; }
.laufband li.flach img { height: 24px; }
.laufband li:hover img { opacity: 1; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband { -webkit-mask: none; mask: none; }
  .laufband-spur { animation: none; width: auto; }
  .laufband ul[aria-hidden] { display: none; }
  .laufband ul { flex-wrap: wrap; row-gap: 1.25rem; }
}

/* ---------- Bento: Licht folgt der Maus ---------- */
.kachel { --mx: 50%; --my: 30%; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.kachel .licht { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 45%); }
@media (hover: hover) { .kachel:hover .licht { opacity: 1; } }

/* ---------- Dusch-Konfigurator ---------- */
.konfig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.konfig-buehne { position: sticky; top: 120px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/4.4;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff, #e9eeee 70%, #dfe6e6); box-shadow: inset 0 0 0 1px var(--grau-150); }
.konfig-buehne .massband { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.konfig-render { position: absolute; inset: 6% 8% 16%; display: grid; place-items: center; }
.konfig-render img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .45s var(--ease), filter .5s var(--ease), transform .6s var(--ease); }
.konfig-render img.weg { opacity: 0; transform: translateY(10px) scale(.98); }
.konfig-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; color: var(--anthrazit);
  background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); }
.konfig-info .muster-b { width: 54px; height: 54px; border-radius: var(--r); flex: none; background: #fff center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(41,51,51,.12); }
.konfig-info strong { display: block; font-variation-settings: "wdth" 106; font-size: 1.05rem; line-height: 1.25; }
.konfig-info span { font-size: .9rem; color: var(--grau-700); }
.konfig-hinweis { position: absolute; right: 16px; top: 26px; z-index: 3; font-size: .78rem; color: var(--grau-500); }
.konfig-schritte { display: grid; gap: 2rem; }
.konfig fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.konfig legend { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.1rem; font-variation-settings: "wdth" 106; margin-bottom: .9rem; padding: 0; }
.konfig legend .nr { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); font-size: .85rem; font-weight: 800; }
.wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.wahl label { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .5rem .75rem; border-radius: var(--r-m); cursor: pointer; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.2;
  background: var(--weiss); box-shadow: inset 0 0 0 1px var(--grau-150); transition: box-shadow .25s, transform .25s var(--ease), background .25s; }
.wahl label:hover { box-shadow: inset 0 0 0 1.5px var(--grau-300); transform: translateY(-2px); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl input:checked + label { box-shadow: inset 0 0 0 2px var(--akzent); background: #f1f8f7; }
.wahl input:focus-visible + label { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.wahl label img { width: 64px; height: 80px; object-fit: contain; mix-blend-mode: multiply; }
.wahl.glasart label { flex-direction: row; justify-content: flex-start; padding: .8rem; gap: .7rem; }
.wahl.glasart .muster { width: 34px; height: 34px; border-radius: var(--r); flex: none; box-shadow: inset 0 0 0 1px rgba(41,51,51,.15); }
.m-grau { background: linear-gradient(135deg, #8e9696, #5d6767); }
.wahl.beschlag { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.wahl.beschlag label { padding: .5rem .4rem .6rem; font-size: .82rem; }
.wahl.beschlag label img { width: 60px; height: 60px; border-radius: var(--r); object-fit: cover; mix-blend-mode: normal; box-shadow: 0 0 0 1px var(--grau-150); }
.konfig-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: .5rem; }
.konfig-aktion p { margin: 0; font-size: .92rem; color: var(--grau-500); max-width: 26rem; }
@media (max-width: 900px) { .konfig { grid-template-columns: 1fr; } .konfig-buehne { position: relative; top: 0; aspect-ratio: 4/4; } }

/* ---------- Von der Zeichnung zum Glas ---------- */
.zg { margin-top: 4.5rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.zg-reiter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.75rem; }
.zg-reiter button { border: 0; cursor: pointer; padding: .7rem 1.1rem; border-radius: var(--r); font: 600 .95rem/1 var(--schrift); font-variation-settings: "wdth" 104; color: #dfe5e5; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: background .25s, color .25s; }
.zg-reiter button[aria-selected="true"] { background: var(--weiss); color: var(--anthrazit); }
.zg-buehne { position: relative; aspect-ratio: 4/4.4; border-radius: var(--r-xl); overflow: hidden; background: #fff; --pos: 50%; touch-action: pan-y; user-select: none; }
.zg-buehne .ebene { position: absolute; inset: 0; }
.zg-buehne .ebene img { width: 100%; height: 100%; object-fit: cover; }
.zg-buehne .ebene.plan { background: #fff; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.zg-buehne .ebene.plan img { object-fit: cover; padding: 0; }
.zg-buehne .kante { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--akzent); pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.zg-buehne .griff { position: absolute; top: 50%; left: var(--pos); translate: -50% -50%; width: 58px; height: 58px; border-radius: var(--r); background: var(--akzent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.7); pointer-events: none; }
.zg-buehne .griff .ic { width: 26px; height: 26px; stroke-width: 2; }
.zg-buehne input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.zg-buehne input[type="range"]:focus-visible ~ .griff { outline: 3px solid var(--akzent-hell); outline-offset: 4px; }
.zg-buehne .marke { position: absolute; top: 14px; z-index: 2; padding: .4rem .8rem; border-radius: var(--r); font-size: .82rem; font-weight: 700; pointer-events: none; }
.zg-buehne .marke.links { left: 14px; background: var(--anthrazit); color: #fff; }
.zg-buehne .marke.rechts { right: 14px; background: rgba(255,255,255,.88); color: var(--anthrazit); }
.zg-text h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.zg-text p { color: #b9c2c2; }
.zg-text .massband { margin-top: 1.5rem; --mb-farbe: rgba(77,188,178,.6); }
@media (max-width: 900px) { .zg { grid-template-columns: 1fr; } }
.zg-buehne.nur-zeichnung .kante, .zg-buehne.nur-zeichnung .griff, .zg-buehne.nur-zeichnung .marke.rechts, .zg-buehne.nur-zeichnung input { display: none; }
@media (max-width: 560px) {
  .bemassung { flex-wrap: wrap; gap: .4rem; }
  .bemassung svg { flex: 1 1 100%; }
}

/* ---------- Glaserei in Braunschweig (SEO-Text) ---------- */
.glaserei-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.glaserei-kopf { position: sticky; top: 130px; }
.glaserei-kopf .massband { max-width: 220px; margin-bottom: 1.6rem; }
.glaserei-kopf h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); line-height: 1.08; text-wrap: balance; margin-bottom: 1.4rem; }
.glaserei-kopf p { color: var(--grau-700); font-size: 1.08rem; max-width: 34rem; }
.glaserei-kopf .btn { margin-top: 1rem; }
.glaserei-text { display: grid; gap: 0; border-top: 1px solid var(--grau-300); }
.glaserei-text article { padding: 1.7rem 0 1.8rem; border-bottom: 1px solid var(--grau-300); }
.glaserei-text h3 { display: flex; align-items: center; gap: .85rem; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .7rem; }
.glaserei-text h3 .ic { width: 40px; height: 40px; padding: 7px; border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--grau-150); color: var(--anthrazit); }
.glaserei-text p { margin: 0; color: var(--grau-700); line-height: 1.65; padding-left: calc(40px + .85rem); }
@media (max-width: 900px) {
  .glaserei-raster { grid-template-columns: 1fr; }
  .glaserei-kopf { position: static; }
  .glaserei-text p { padding-left: 0; }
}

/* ---------- Kicker (kleine Zeile über H2) ---------- */
.kicker { margin: 0 0 .8rem; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--linie); font-variation-settings: "wdth" 110; }

/* ---------- Erinnerungsmoment: Der Flur wird hell ---------- */
.licht { --linie: var(--akzent-hell); background: var(--tief); color: #dfe5e5; position: relative; }
.licht-bahn { position: relative; }
.js .licht-bahn { height: 240vh; }
.licht-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(4rem, 8vw, 6rem); }
.js .licht-raster { position: sticky; top: 0; min-height: 100svh; padding-top: 120px; padding-bottom: 40px; }
.licht-text h2 { color: var(--weiss); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.05; text-wrap: balance; margin-bottom: 1.2rem; }
.licht-text > p:not(.kicker) { color: #b9c2c2; font-size: 1.08rem; max-width: 32rem; }
.licht-text .textlink { color: var(--weiss); }
.licht-schritte { list-style: none; margin: 2rem 0 1.8rem; padding: 0; display: grid; gap: .6rem; max-width: 22rem; }
.licht-schritte li { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: var(--r); color: #8d9898; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: color .4s, background .4s, box-shadow .4s; font-weight: 600; }
.licht-schritte .nr { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: rgba(255,255,255,.08); transition: background .4s, color .4s; }
.licht-schritte li.an { color: var(--weiss); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(60,158,150,.55); }
.licht-schritte li.an .nr { background: var(--akzent); color: var(--weiss); }
.licht-knopf { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem 1.1rem; border: 0; border-radius: var(--r); cursor: pointer; font: 700 .95rem/1 var(--schrift); color: var(--weiss); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .25s; }
.licht-knopf:hover { background: rgba(255,255,255,.16); }
.licht-knopf .ic { width: 22px; height: 22px; }

.licht-buehne { --p1: 1; --p2: 1; --p3: 1; --wpos: 120%; position: relative; margin: 0; height: min(78svh, 860px); aspect-ratio: 800 / 1067; border-radius: var(--r); overflow: hidden; background: #0e1212;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 120px -30px rgba(255, 236, 200, calc(var(--p3) * .38)); }
.licht-buehne img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(.38 + .62 * var(--p2))) saturate(calc(.6 + .4 * var(--p2))); }
.licht-buehne .wand { position: absolute; left: 17.6%; top: 10%; width: 68.4%; height: 76.6%;
  background: #e9e4dc;
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--wpos) - 18%), #000 var(--wpos)); mask-image: linear-gradient(100deg, transparent calc(var(--wpos) - 18%), #000 var(--wpos)); }
.wand-mass { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wand-mass line { stroke: var(--akzent-hell); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p1)); }
.wand-label { position: absolute; padding: .3rem .55rem; border-radius: var(--r); background: rgba(14,18,18,.75); color: var(--weiss); font-size: .78rem; font-weight: 700; white-space: nowrap; opacity: var(--p1); }
.wand-label.b { left: 50%; top: 12%; translate: -50% -50%; }
.wand-label.h { right: 12%; top: 56%; translate: 50% -50%; rotate: -90deg; }
.licht-buehne .schein { position: absolute; inset: 0; pointer-events: none; opacity: var(--p3); mix-blend-mode: screen;
  background: radial-gradient(60% 30% at 50% 92%, rgba(255,240,215,.55), transparent 70%), radial-gradient(45% 55% at 50% 45%, rgba(255,250,235,.18), transparent 70%); }
.licht-buehne figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .65rem .9rem; font-size: .88rem; line-height: 1.3; opacity: var(--p3); }
@media (max-width: 900px) {
  .licht-raster { grid-template-columns: 1fr; }
  .js .licht-bahn { height: auto; }
  .js .licht-raster { position: static; min-height: 0; padding-top: 4.5rem; display: block; }
  .js .licht-raster::after { content: ""; display: block; height: 80svh; }
  .licht-schritte { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 1.5rem 0 1.2rem; }
  .licht-schritte li { flex-direction: column; align-items: flex-start; font-size: .82rem; line-height: 1.2; padding: .6rem; }
  .licht-buehne { height: auto; width: min(100%, 52svh); margin: 1.5rem auto 0; }
  .js .licht-buehne { position: sticky; top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .licht-bahn { height: auto; }
  .js .licht-raster { position: static; min-height: 0; }
  .js .licht-raster::after { display: none; }
  .js .licht-buehne { position: relative; top: 0; }
}

/* ---------- v03b: Hero wie Referenz ---------- */
.hero::after { background:
  linear-gradient(90deg, rgba(14,18,18,.62) 0%, rgba(14,18,18,.38) 42%, rgba(14,18,18,.12) 75%, rgba(14,18,18,.2) 100%),
  linear-gradient(180deg, rgba(14,18,18,.35) 0%, rgba(14,18,18,0) 20%),
  rgba(14,18,18,.12); }
.hero-inhalt { align-items: end; padding-top: 170px; padding-bottom: 4rem; }
/* Beide Karten gleich hoch, Unterkante auf Höhe des Buttons */
.hero-karten { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 1.5rem; }
.tuer-karte { aspect-ratio: auto; min-height: 270px; }
.info-karte { padding: 1.6rem 1.6rem 1.4rem; }
.info-karte .daumen-bild { width: 64px; height: 64px; flex: none; border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.info-karte .daumen-bild img { width: 100%; height: 100%; object-fit: cover; }
.info-karte h2 { font-size: 1.2rem; }
/* Bewertung in einer Zeile: 4,9 ★ 67 Google-Bewertungen */
.bewertung { gap: .55rem; }
.bewertung strong { font-size: 2.9rem; }
.bewertung .stern { width: 26px; height: 26px; fill: var(--linie); stroke: none; }
.bewertung small { font-size: 1rem; font-weight: 600; color: var(--weiss); }
/* Logoband: dunkles Rauchglas über dem weiterlaufenden Foto, eine Reihe */
.partner { background: rgba(16,22,22,.42); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.partner::before { display: none; }
.partner .massband { --mb-farbe: rgba(255,255,255,.22); }
.partner-inner { padding-block: 2.1rem 2.3rem; }
.laufband img { opacity: .72; filter: grayscale(1) brightness(1.6); }
.laufband li:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .laufband ul { flex-wrap: nowrap; overflow-x: auto; justify-content: space-between; }
}
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(180deg, rgba(14,18,18,.5) 0%, rgba(14,18,18,.42) 45%, rgba(14,18,18,.7) 100%); }
  .tuer-karte { min-height: 240px; }
}
.hero-aktion { flex-wrap: nowrap; gap: 1.6rem; }
.bewertung strong { font-size: 2.6rem; }
.bewertung small { white-space: nowrap; }
@media (max-width: 520px) { .hero-aktion { flex-wrap: wrap; } }
.hero-aktion .btn { white-space: nowrap; flex: none; }
@media (max-width: 760px) { .hero-karten { grid-template-columns: 1fr; } }
.hero-inhalt, .hero .partner-inner { width: 100%; }
/* Mindest-Schriftgröße auf dem Handy */
#einsatzgebiet .map-zoom-hint { font-size: .75rem; }
#einsatzgebiet .lseo-btn small, #einsatzgebiet small { font-size: .75rem; }

/* ---------- Konfigurator: Beschlag-Lupe ---------- */
.lupe { position: absolute; z-index: 4; right: 16px; top: 56px; width: clamp(108px, 26%, 150px); margin: 0; padding: 6px 6px 8px; border-radius: var(--r); background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px -18px rgba(22,28,28,.45), 0 0 0 1px rgba(22,28,28,.08); transition: opacity .3s; }
.lupe img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r) - 4px); background: #f3f3f3; transition: opacity .3s; }
.lupe img.weg { opacity: 0; }
.lupe figcaption { margin-top: .4rem; font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--anthrazit); }
.lupe-punkt { position: absolute; z-index: 4; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--akzent); box-shadow: 0 0 0 4px rgba(255,255,255,.7); pointer-events: none; transition: left .5s var(--ease), top .5s var(--ease); }
.lupe-punkt::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--akzent); opacity: 0; animation: lupePuls 2.2s ease-out infinite; }
@keyframes lupePuls { 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.4); } }
.lupe-linie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.lupe-linie line { stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: reduce) { .lupe-punkt::after { animation: none; } }
@media (max-width: 520px) { .lupe { top: 46px; right: 10px; width: 96px; } .lupe figcaption { font-size: .7rem; } }

/* ---------- CTA in der Seitenmitte ---------- */
.cta-mitte { --linie: var(--akzent-hell); position: relative; isolation: isolate; overflow: hidden; color: var(--weiss); padding-block: clamp(5rem, 10vw, 8.5rem); }
.cta-bild { position: absolute; inset: 0; z-index: -2; }
.cta-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.05); transition: transform 1.6s var(--ease); }
.cta-mitte.sichtbar .cta-bild img { transform: scale(1); }
.cta-mitte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,18,18,.82), rgba(14,18,18,.5) 55%, rgba(14,18,18,.35)); }
.cta-karte { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(1.8rem, 4vw, 3.4rem); max-width: 1080px; }
.cta-text h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.04; text-wrap: balance; margin-bottom: 1rem; color: var(--weiss); }
.cta-text > p:not(.kicker) { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 34rem; margin-bottom: 1.4rem; }
.cta-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cta-punkte li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.cta-punkte .ic { width: 30px; height: 30px; padding: 5px; border-radius: var(--r); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: var(--weiss); }
.cta-aktion { display: grid; gap: 1rem; justify-items: start; }
.btn-gross { min-height: 64px; font-size: 1.08rem; padding-left: 1.8rem; }
.btn-gross .dot { width: 48px; height: 48px; }
.cta-tel { display: flex; align-items: center; gap: .9rem; color: var(--weiss); text-decoration: none; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; font-variation-settings: "wdth" 110; }
.cta-tel small { display: block; font-size: .85rem; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.75); margin-bottom: .2rem; }
.cta-tel .ic { width: 52px; height: 52px; padding: 13px; border-radius: var(--r); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: var(--linie); }
.cta-tel:hover .ic { background: var(--akzent); color: var(--weiss); }
.cta-klein { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); font-weight: 600; text-decoration: none; }
.cta-klein .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.cta-klein:hover .ic { transform: translateX(4px); }
/* Bemaßung um die Karte: zeichnet sich beim Erscheinen */
.cta-mass { position: absolute; pointer-events: none; transition: transform 1.4s var(--ease); }
.cta-mass.o { left: 0; right: 0; top: -20px; height: 11px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(var(--linie), var(--linie)) 0 50% / 100% 1.5px no-repeat, linear-gradient(var(--linie), var(--linie)) 0 0 / 1.5px 100% no-repeat, linear-gradient(var(--linie), var(--linie)) 100% 0 / 1.5px 100% no-repeat; }
.cta-mass.r { top: 0; bottom: 0; right: -20px; width: 11px; transform: scaleY(0); transform-origin: top; transition-delay: .8s;
  background: linear-gradient(var(--linie), var(--linie)) 50% 0 / 1.5px 100% no-repeat, linear-gradient(var(--linie), var(--linie)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--linie), var(--linie)) 0 100% / 100% 1.5px no-repeat; }
.cta-mitte.sichtbar .cta-mass { transform: none; }
.cta-mass-text { position: absolute; top: -44px; left: 50%; translate: -50% 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--linie); opacity: 0; transition: opacity .6s 1.1s; }
.cta-mitte.sichtbar .cta-mass-text { opacity: 1; }
@media (max-width: 860px) {
  .cta-karte { grid-template-columns: 1fr; }
  .cta-mitte::after { background: linear-gradient(180deg, rgba(14,18,18,.7), rgba(14,18,18,.55)); }
  .cta-mass.r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cta-mass { transform: none; transition: none; } .cta-mass-text { opacity: 1; } }
.btn-gross { white-space: nowrap; } @media (max-width: 420px) { .btn-gross { font-size: 1rem; padding-left: 1.3rem; } }

/* ---------- Karte: ohne Breiten-/Längengrade, im Glas-Look ---------- */
#einsatzgebiet #lseoGrid { display: none; }
#einsatzgebiet { position: relative; isolation: isolate; overflow: hidden; }
#einsatzgebiet::before { content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 35%, rgba(60,158,150,.28), transparent 70%), radial-gradient(35% 45% at 85% 70%, rgba(214,170,110,.16), transparent 70%),
    url(../bilder/runder-spiegel-braunschweiger-dom-1200.webp) 70% 40% / cover no-repeat;
  filter: blur(34px) saturate(.9); opacity: .55; }
#einsatzgebiet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(22,28,28,.55), rgba(22,28,28,.72)); }
#einsatzgebiet .lseo-panel, #einsatzgebiet .lseo-map {
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 55%, rgba(255,255,255,.06)), rgba(16,22,22,.32);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px -35px rgba(0,0,0,.7); }
#einsatzgebiet .readout, #einsatzgebiet .readout.km { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
#einsatzgebiet .lseo-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#einsatzgebiet .lseo-btn.is-active, #einsatzgebiet .lseo-btn[aria-pressed="true"] { background: var(--akzent); border-color: transparent; color: var(--weiss); }
#einsatzgebiet .map-zoom button, #einsatzgebiet .map-zoom-hint { background: rgba(16,22,22,.45); border: 1px solid rgba(255,255,255,.2); color: #e3e8e8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#einsatzgebiet .m-ring { stroke: rgba(255,255,255,.16); }
#einsatzgebiet .lseo-btn[aria-pressed="true"] small { color: #fff; }
#einsatzgebiet .map-zoom-hint { font-size: .68rem; letter-spacing: .06em; white-space: nowrap; padding: .3rem .6rem; }
#einsatzgebiet .lseo-panel .massband { --mb-farbe: rgba(255,255,255,.35); }
/* Kachel-Label: Text darf umbrechen, Pfeil bleibt immer innerhalb */
.kachel .glas > span:not(.pfeil-rund) { flex: 1 1 auto; min-width: 0; }
.kachel .glas h3 { overflow-wrap: break-word; hyphens: auto; }
.kachel { container-type: inline-size; }
@container (max-width: 420px) { .kachel h3 { font-size: 1.05rem; } .kachel .glas .ic-draw { width: 36px; height: 36px; padding: 7px; } .kachel .glas { gap: .7rem; } }
@container (max-width: 330px) { .kachel .glas > .ic-draw { display: none; } .kachel .glas { gap: .6rem; } }
.k-gelaender .glas { gap: .7rem; padding: .9rem .9rem .9rem 1rem; }
.k-gelaender .glas .ic:not(.pf1):not(.pf2) { width: 40px; height: 40px; padding: 7px; }

/* ---------- Licht-Moment auf dem Handy: ohne Sticky, Knopf unter dem Bild ---------- */
@media (max-width: 900px) {
  .js .licht-raster::after { display: none; }
  .js .licht-buehne { position: relative; top: 0; }
  .licht-raster { display: flex !important; flex-direction: column; }
  .licht-text { display: contents; }
  .licht-text > * { order: 1; }
  .licht-buehne { order: 2; margin-top: .5rem; }
  .licht-knopf { order: 3; align-self: center; margin-top: 1rem; min-width: 200px; justify-content: center; background: var(--akzent); box-shadow: none; }
  .licht-schritte { margin-bottom: .5rem; }
}
.licht-knopf[aria-pressed="true"] { background: rgba(255,255,255,.12); }
@media (max-width: 900px) { .licht-knopf[aria-pressed="true"] { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } }

/* ---------- Konfigurator auf dem Handy: Bild bleibt im Blick ---------- */
.konfig-tabs, .konfig-nav { display: none; }
@media (max-width: 900px) {
  .konfig { gap: 0; background: var(--weiss); border-radius: var(--r); box-shadow: 0 0 0 1px var(--grau-150), 0 30px 60px -40px rgba(22,28,28,.35); overflow: hidden; }
  .konfig-buehne { aspect-ratio: auto; height: min(56svh, 470px); border-radius: 0; box-shadow: none; }
  .konfig-render { inset: 9% 12% 24%; }
  .konfig-hinweis { top: 22px; right: 12px; font-size: .7rem; }
  .konfig-info { left: 10px; right: 10px; bottom: 10px; padding: .6rem .75rem; gap: .7rem; }
  .konfig-info .muster-b { width: 40px; height: 40px; }
  .konfig-info strong { font-size: .95rem; }
  .konfig-info span { font-size: .82rem; }
  .konfig-nav { display: grid; place-items: center; position: absolute; z-index: 4; top: 45%; width: 40px; height: 40px; border: 0; border-radius: var(--r); cursor: pointer; color: var(--anthrazit);
    background: rgba(255,255,255,.85); box-shadow: 0 6px 18px -8px rgba(22,28,28,.4), 0 0 0 1px rgba(22,28,28,.08); }
  .konfig-nav .ic { width: 20px; height: 20px; stroke-width: 2; }
  .konfig-nav.zurueck { left: 8px; } .konfig-nav.zurueck .ic { transform: scaleX(-1); }
  .konfig-nav.vor { right: 8px; }
  .lupe { top: auto; bottom: 74px; right: 10px; width: 78px; padding: 4px 4px 5px; }
  .lupe figcaption { font-size: .62rem; margin-top: .2rem; }
  .konfig-schritte { gap: 0; padding: 0 0 1rem; }
  .konfig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--grau-150); position: relative; }
  .konfig-tabs button { display: flex; align-items: center; gap: .5rem; min-height: 60px; padding: .55rem .6rem; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--grau-500);
    box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .3s, color .3s; }
  .konfig-tabs button .nr { width: 24px; height: 24px; flex: none; border-radius: var(--r); display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--grau-50); color: var(--grau-500); transition: background .3s, color .3s; }
  .konfig-tabs button b { display: block; font-size: .9rem; color: inherit; }
  .konfig-tabs button small { display: block; font-size: .72rem; line-height: 1.15; color: var(--grau-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18vw; }
  .konfig-tabs button[aria-selected="true"] { color: var(--anthrazit); box-shadow: inset 0 -3px 0 var(--akzent); }
  .konfig-tabs button[aria-selected="true"] .nr { background: var(--akzent); color: var(--weiss); }
  .konfig fieldset { display: none; padding: .9rem 0 .2rem; }
  .konfig[data-tab="form"] fieldset[data-schritt="form"], .konfig[data-tab="glas"] fieldset[data-schritt="glas"], .konfig[data-tab="beschlag"] fieldset[data-schritt="beschlag"] { display: block; animation: schrittRein .35s var(--ease); }
  @keyframes schrittRein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .konfig legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wahl, .wahl.beschlag, .wahl.glasart { display: flex; gap: .55rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem 1rem .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wahl::-webkit-scrollbar { display: none; }
  .wahl label { flex: none; width: 92px; scroll-snap-align: center; padding: .5rem .3rem .55rem; font-size: .8rem; }
  .wahl label img { width: 52px; height: 64px; }
  .wahl.glasart label { width: auto; min-width: 128px; flex-direction: row; padding: .7rem .8rem; }
  .wahl.beschlag label { width: 84px; }
  .wahl.beschlag label img { width: 52px; height: 52px; }
  .wahl label:hover { transform: none; }
  .konfig-aktion { padding: .6rem 1rem 0; gap: .7rem; }
  .konfig-aktion .btn { width: 100%; justify-content: space-between; }
  .konfig-aktion p { font-size: .82rem; }
  .btn.lockt { animation: lockt 1.4s var(--ease); }
  @keyframes lockt { 0%, 100% { transform: none; box-shadow: none; } 30% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(10,82,84,.18); } 60% { transform: none; box-shadow: 0 0 0 0 rgba(10,82,84,0); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .konfig fieldset { animation: none !important; } .btn.lockt { animation: none; } }
@media (max-width: 900px) {
  .konfig-buehne { height: min(46svh, 400px); }
  .lupe { bottom: 66px; width: 70px; }
}
/* Daumen-Leiste ausblenden, solange der Konfigurator im Bild ist (er hat seinen eigenen Button) */
.daumen.im-konfig { opacity: 0; transform: translateY(120%); pointer-events: none; }
/* Hero auf dem Handy: keine Schiebetür-Karte, nur die Ausstellungs-Karte */
@media (max-width: 760px) {
  .hero-karten .tuer-karte { display: none; }
  .hero-karten { margin-top: .5rem; }
}
@media (max-width: 900px) {
  .lupe { top: 34px; bottom: auto; right: 10px; width: 68px; }
  .konfig-hinweis { right: auto; left: 12px; }
  .konfig-nav { top: 50%; }
}
/* Handy: Beschreibung unter das Duschbild statt darüber – nichts wird verdeckt oder abgeschnitten */
@media (max-width: 900px) {
  .konfig-buehne { height: auto; display: flex; flex-direction: column; }
  .konfig-render { position: relative; inset: auto; height: min(40svh, 340px); margin: 34px 56px 8px; }
  .konfig-info { position: relative; left: auto; right: auto; bottom: auto; margin: 0 10px 10px; }
  .konfig-nav { top: calc(34px + min(20svh, 170px)); translate: 0 -50%; }
}
/* Desktop: Bildfläche endet über der Beschreibung */
@media (min-width: 901px) { .konfig-render { inset: 7% 9% 21%; } }
.konfig-render { display: block; } .konfig-render img { display: block; width: 100%; height: 100%; max-height: 100%; }
@media (min-width: 901px) { .lupe { width: clamp(96px, 21%, 124px); right: 14px; } .konfig-render { inset: 7% 22% 21% 8%; } }
@media (max-width: 900px) { .konfig-render { margin-bottom: 30px; } }
/* Alle Größen: Bildfläche und Beschreibung untereinander, immer 30px Abstand */
@media (min-width: 901px) {
  .konfig-buehne { display: flex; flex-direction: column; }
  .konfig-render { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; margin: 44px 19% 30px 6%; }
  .konfig-info { position: relative; left: auto; right: auto; bottom: auto; margin: 0 14px 14px; }
}
.konfig-render img { object-position: 50% 100%; }
/* Logoband ziehbar */
.laufband.zieh .laufband-spur { animation: none; will-change: transform; }
.laufband.zieh { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.laufband.zieh.zieht { cursor: grabbing; }
.laufband img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* =====================================================================
   Handy-Optimierung (Runde 4): kürzer, wischbar, weniger Scrollen
   ===================================================================== */
@media (max-width: 760px) {
  .abschnitt { padding-block: 3.5rem; }
  .abschnitt-kopf { margin-bottom: 1.6rem; gap: .8rem; }
  .abschnitt-kopf p { font-size: 1rem; }
  /* Wischreihen: gemeinsame Optik, rechts angeschnitten = "da kommt noch mehr" */
  .stimmen, .sorgen-liste, .ablauf-wrap ol {
    display: flex !important; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--rand) * -1); padding: .2rem var(--rand) 1rem; -webkit-overflow-scrolling: touch; }
  .stimmen::-webkit-scrollbar, .sorgen-liste::-webkit-scrollbar, .ablauf-wrap ol::-webkit-scrollbar { display: none; }
  .stimme, .sorge { flex: 0 0 84%; scroll-snap-align: start; }
  .stimme { padding: 0 1.3rem 1.3rem; }
  .sorge { padding: 1.2rem 1.25rem; }
  .ablauf-wrap ol .schritt { flex: 0 0 72%; scroll-snap-align: start; padding: 1.2rem; border-radius: var(--r); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
  .schritt .knopf { width: 54px; height: 54px; margin-bottom: 1rem; box-shadow: none; }
  .schritt .knopf .ic { width: 28px; height: 28px; }
  .wisch-hinweis { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 0; font-size: .82rem; font-weight: 600; color: var(--grau-500); }
  .dunkel .wisch-hinweis, .ablauf .wisch-hinweis { color: #9aa7a7; }
  .wisch-hinweis .ic { width: 18px; height: 18px; animation: wischen 1.8s var(--ease) infinite; }
  @keyframes wischen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  /* Weitere Leistungen: 2 Spalten, kompakt */
  .weitere { grid-template-columns: 1fr 1fr !important; }
  .weitere a { flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1rem .9rem; }
  .weitere a strong { font-size: .92rem; line-height: 1.2; }
  .weitere a > span > span { font-size: .8rem; }
  .weitere .ic { width: 40px; height: 40px; padding: 7px; }
  /* Ausstellung: Ausstattung 2-spaltig */
  .aus-liste { grid-template-columns: 1fr 1fr !important; gap: .5rem; margin: 1.4rem 0; }
  .aus-liste li { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .8rem; font-size: .85rem; }
  .aus-liste .ic { width: 26px; height: 26px; }
  /* Karte: Orte als eine Wischreihe statt langer Liste */
  #einsatzgebiet .lseo-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding: .2rem var(--rand) .8rem; gap: .5rem; }
  #einsatzgebiet .lseo-bar::-webkit-scrollbar { display: none; }
  #einsatzgebiet .lseo-btn { flex: none; white-space: nowrap; }
  #einsatzgebiet .lseo-panel { padding: 1.4rem 1.2rem; }
  /* Kleinere Überschriften auf dem Handy */
  .abschnitt h2, .licht-text h2, .cta-text h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
}
@media (min-width: 761px) { .wisch-hinweis { display: none; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .wisch-hinweis .ic { animation: none; } }
@media (max-width: 900px) { .sorgen { grid-template-columns: minmax(0, 1fr); } .sorgen > *, .stimmen-wrap, .ablauf-wrap { min-width: 0; } }
.info-karte .karte-titel { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--weiss); font-variation-settings: "wdth" 104; }

/* Holztür im Licht-Moment */
.licht-buehne .holztuer { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-karten { grid-template-columns: minmax(0, 440px) !important; justify-content: end; }
@media (max-width: 760px) { .hero-karten { justify-content: stretch; grid-template-columns: 1fr !important; } }