/* Shop-Thema „Blaupause“ – überschreibt die Basistokens aus app.css */
body.shop {
  --bg: #f2f6fa; --panel: #ffffff; --text: #0f2236; --muted: #55697f; --line: #dbe4ec;
  --accent: #1593d0; --accent-text: #fff; --accent-soft: #e2f2fb;
  --grid: rgba(15, 34, 54, .09); --glanz1: rgba(21, 147, 208, .10); --glanz2: rgba(120, 140, 160, .10); --stahl1: #f7f9fb; --stahl2: #dfe6ee; --tief: #0f2236;
  --schatten: 0 1px 2px rgba(15, 34, 54, .06), 0 8px 24px rgba(15, 34, 54, .06);
  --radius: 12px;
  background-color: var(--bg);
  /* modern: weiche Farbflächen oben + feines Punktraster statt Karomuster, beim Scrollen fest */
  background-image: radial-gradient(60rem 30rem at 85% -10%, var(--glanz1), transparent 70%), radial-gradient(50rem 28rem at -10% 10%, var(--glanz2), transparent 70%),
    radial-gradient(var(--grid) 1px, transparent 1.2px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body.shop {
    --bg: #0a1520; --panel: #101e2c; --text: #e4edf5; --muted: #93a8bc; --line: #213446;
    --accent: #45b8ee; --accent-text: #06131e; --accent-soft: #11314a;
    --grid: rgba(228, 237, 245, .06); --glanz1: rgba(69, 184, 238, .10); --glanz2: rgba(120, 150, 180, .07); --stahl1: #132435; --stahl2: #1c3247; --tief: #e4edf5;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}
body.shop a { color: var(--accent); }
.shop h1, .shop h2, .shop h3 { letter-spacing: -.01em; }

/* Kopf */
.kopfleiste { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.kopfleiste .wrap { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text) !important; text-decoration: none; font-weight: 800; letter-spacing: .01em; }
.marke .logo { width: 112px; height: 61px; object-fit: contain; flex: none; border-radius: 8px; background: #fff; padding: 2px 4px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .marke .logo { width: 76px; height: 44px; } }
.marke small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.suche-feld { flex: 1; position: relative; max-width: 520px; margin: 0 auto; }
.suche-feld input { border-radius: 999px; padding: 10px 16px 10px 40px; background: var(--stahl1); border-color: var(--line); }
.suche-feld svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.umschalter { display: inline-flex; background: var(--stahl1); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.umschalter button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.umschalter button.aktiv { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--schatten); }
.korb-knopf { position: relative; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px;
  padding: 8px 14px; font: inherit; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.korb-knopf .zahl { background: var(--accent); color: var(--accent-text); border-radius: 999px; min-width: 22px; height: 22px;
  display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; padding: 0 6px; }

@media (max-width: 760px) {
  .kopfleiste .wrap { flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .marke { flex: 1; min-width: 0; font-size: .92rem; }
  .marke > span { min-width: 0; }
  .marke small { display: none; }
  .suche-feld { order: 3; flex-basis: 100%; max-width: none; }
  .umschalter button { padding: 6px 9px; font-size: .8rem; }
  .welten { position: static; }
  .mega { position: fixed; top: auto; max-height: 70vh; overflow-y: auto; }
}

/* Produktwelt-Leiste + Mega-Dropdown */
.welten { border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 64px; z-index: 25; }
.welten .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.welten .wrap::-webkit-scrollbar { display: none; }
.welt-knopf { border: 0; background: none; font: inherit; color: var(--text); padding: 12px 14px; display: flex; gap: 8px; align-items: center;
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; font-weight: 600; font-size: .93rem; }
.welt-knopf svg { width: 20px; height: 20px; color: var(--accent); }
.welt-knopf:hover, .welt-knopf.offen, .welt-knopf.aktiv { border-bottom-color: var(--accent); }
.welt-knopf .pfeil { width: 12px; height: 12px; color: var(--muted); transition: transform .2s; }
.welt-knopf.offen .pfeil { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(15, 34, 54, .14); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; }
.mega.offen { opacity: 1; transform: none; pointer-events: auto; }
.mega .wrap { padding: 20px 16px 24px; display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.mega-intro > svg { width: 40px; height: 40px; color: var(--accent); }
.mega-intro h3 { margin: 6px 0 6px; font-size: 1.2rem; }
.mega-intro p { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.mega-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mega-kachel { text-align: left; border: 1px solid var(--line); background: var(--stahl1); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  font: inherit; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: border-color .15s, transform .15s; }
.mega-kachel:hover { border-color: var(--accent); transform: translateY(-1px); }
.mega-kachel b { font-weight: 600; font-size: .92rem; }
.mega-kachel span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.mega-kachel span svg { width: 26px; height: 26px; display: block; }
@media (max-width: 760px) { .mega .wrap { grid-template-columns: 1fr; } .mega-intro p { display: none; } }

/* Start */
.held { padding: 40px 0 24px; }
.held .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; }
.held h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.05; margin: 0 0 14px; }
.held h1 em { font-style: normal; color: var(--accent); }
.held p { color: var(--muted); font-size: 1.05rem; max-width: 520px; }
.held img { width: 100%; max-width: 480px; justify-self: end; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .held img { mix-blend-mode: normal; border-radius: 16px; opacity: .92; } }
.vorteile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vorteil { display: inline-flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; font-size: .86rem; box-shadow: var(--schatten); }
.vorteil i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
@media (max-width: 800px) { .held .wrap { grid-template-columns: 1fr; } .held img { justify-self: center; max-width: 360px; } }
.welt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 10px 0 30px; }
.welt-karte { position: relative; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 18px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--schatten); overflow: hidden; transition: transform .18s, border-color .18s; }
.welt-karte:hover { transform: translateY(-3px); border-color: var(--accent); }
.welt-karte svg { width: 44px; height: 44px; color: var(--accent); }
.welt-karte h3 { margin: 12px 0 4px; font-size: 1.05rem; }
.welt-karte p { margin: 0; color: var(--muted); font-size: .86rem; }
.welt-karte .anz { position: absolute; top: 14px; right: 14px; font-size: .75rem; color: var(--muted); }
.welt-karte.hervor { background: linear-gradient(135deg, var(--tief), #1d4a6b); color: #fff; border-color: transparent; }
.welt-karte.hervor p, .welt-karte.hervor .anz { color: rgba(255, 255, 255, .75); }
.welt-karte.hervor svg { color: #7fd3fb; }
@media (prefers-color-scheme: dark) { .welt-karte.hervor { background: linear-gradient(135deg, #12405f, #0d2a40); } }

/* Bühne: wechselnde Gruppenbilder (Foto oder Metalloberfläche) */
.buehne { position: relative; overflow: hidden; color: #fff; min-height: 430px; display: flex; align-items: center; background: #0b1724; }
.buehne.gruppe { min-height: 230px; }
.buehnen-bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.buehnen-bild.sichtbar { opacity: 1; }
.buehnen-bild.foto { background: var(--bild) center / cover no-repeat; animation: kamerafahrt 26s ease-in-out infinite alternate; }
.metall, .buehnen-bild.metall {
  background:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .20) 47%, transparent 59%) 0 0 / 260% 100%,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .06) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    radial-gradient(120% 95% at 78% 30%, var(--m1, #5d7387), var(--m2, #1c2c3b));
  animation: glanz 10s linear infinite;
}
@keyframes glanz { from { background-position: 160% 0, 0 0, 0 0, 0 0; } to { background-position: -160% 0, 0 0, 0 0, 0 0; } }
@keyframes kamerafahrt { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.5%, -1%); } }
.riesen-symbol { position: absolute; right: 5%; top: 50%; width: min(40vw, 360px); color: rgba(255, 255, 255, .17);
  transform: translateY(-50%) rotate(-8deg); }
.riesen-symbol svg { width: 100%; height: auto; stroke-width: 1.1; }
.buehnen-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 13, 21, .85) 0%, rgba(5, 13, 21, .55) 48%, rgba(5, 13, 21, .08) 100%); }
.buehnen-inhalt { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 48px; width: 100%; }
.buehne.gruppe .buehnen-inhalt { padding-top: 18px; padding-bottom: 30px; }
.buehne h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; margin: 0 0 12px; }
.buehne.gruppe h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.buehne h1 em { font-style: normal; color: #6fcaf6; }
.buehne p { color: rgba(255, 255, 255, .86); max-width: 560px; font-size: 1.05rem; margin: 0; }
.buehne .vorteile { margin-top: 20px; }
.buehne .vorteil { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(6px); box-shadow: none; }
.buehnen-punkte { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.buehnen-punkte button { border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .07); color: #fff; border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; transition: background .3s, color .3s; }
.buehnen-punkte button.aktiv { background: #fff; color: #0f2236; font-weight: 600; }
.buehnen-punkte button.aktiv::after { content: " →"; }
.krumen.hell { margin-top: 0; }
.krumen.hell, .krumen.hell button { color: rgba(255, 255, 255, .8); }
.welt-karten.bilder { margin-top: 22px; }
.welt-karte.mit-bild { padding: 0; }
.karten-bild { height: 130px; display: grid; place-items: center; color: rgba(255, 255, 255, .88); transition: transform .5s ease; }
.karten-bild.foto { background: var(--bild) center / cover no-repeat; }
.welt-karte .karten-bild svg { width: 64px; height: 64px; color: rgba(255, 255, 255, .9); }
.welt-karte.mit-bild:hover .karten-bild { transform: scale(1.05); }
.karten-text { position: relative; padding: 14px 16px 16px; background: var(--panel); }
.welt-karte.mit-bild .anz { top: -26px; right: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .buehnen-bild, .metall, .karten-bild { animation: none !important; transition: none !important; } }
@media (max-width: 760px) { .buehne { min-height: 380px; } .riesen-symbol { opacity: .6; width: 60vw; right: -8%; } }

/* Einstieg „Was haben Sie vor?“ auf der Bühne */
.einstieg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; max-width: 1180px; }
@media (max-width: 1100px) { .einstieg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einstieg-karte { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; align-items: start;
  text-align: left; font: inherit; color: #fff; cursor: pointer; padding: 16px 16px 16px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(8px);
  transition: transform .18s, background .18s, border-color .18s; }
.einstieg-karte:hover, .einstieg-karte:focus-visible { transform: translateY(-3px); background: rgba(255, 255, 255, .18); border-color: #6fcaf6; outline: none; }
.einstieg-karte .e-symbol { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: rgba(111, 202, 246, .16); color: #6fcaf6; }
.einstieg-karte .e-symbol svg { width: 32px; height: 32px; }
.einstieg-karte b { font-size: 1.08rem; line-height: 1.2; padding-right: 22px; }
.einstieg-karte small { color: rgba(255, 255, 255, .78); font-size: .84rem; line-height: 1.35; margin-top: 4px; }
.einstieg-karte .e-nr { position: absolute; top: 10px; right: 12px; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .55); }
.einstieg-karte.top { border-color: rgba(227, 38, 47, .7); }
.einstieg-karte.top .e-symbol { background: rgba(227, 38, 47, .22); color: #ff8a8f; }
.einstieg-sonst { margin-top: 14px !important; font-size: .9rem !important; }
.einstieg-sonst button { background: none; border: 0; padding: 0; font: inherit; color: #9adcfb; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .einstieg { grid-template-columns: 1fr; } }

/* Fallenfeld für Bots – für Menschen unsichtbar */
.falle { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* Liefergebiet */
.liefer-leiste { background: var(--bad-soft); border-bottom: 1px solid var(--line); font-size: .88rem; }
.liefer-leiste .wrap { padding-top: 7px; padding-bottom: 7px; }
.liefer-hinweis { background: var(--bad-soft); border-radius: 8px; padding: 8px 10px; margin: 0; }
#plz-pruefung { margin-top: 4px; }
#plz-pruefung.ok { color: var(--ok, #2e7d32); }
#plz-pruefung.fehler { color: var(--bad); }
/* Kasse: fehlende Pflichtfelder */
#kasse-form [aria-invalid="true"] { border-color: var(--bad) !important; background: var(--bad-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 25%, transparent); }
#kasse-form .check.fehlt { outline: 2px solid var(--bad); outline-offset: 4px; border-radius: 6px; }
.kasse-fehler { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); border-radius: 8px; padding: 10px 12px; font-size: .9rem; }

/* Planen & bauen lassen */
.planung-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.planung-weg { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; text-align: left; font: inherit; color: var(--text);
  cursor: pointer; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--schatten);
  transition: transform .18s, border-color .18s; }
.planung-weg:hover, .planung-weg:focus-visible { transform: translateY(-3px); border-color: var(--accent); outline: none; }
.planung-weg .e-symbol { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.planung-weg .e-symbol svg { width: 34px; height: 34px; }
.planung-weg b { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.planung-weg span:not(.e-symbol) { display: block; color: var(--muted); font-size: .9rem; }
.planung-weg em { display: block; font-style: normal; color: var(--accent); font-weight: 600; margin-top: 8px; }
.pa-formular { scroll-margin-top: 90px; }
.pa-formular textarea { width: 100%; }
.pa-danke { border-color: var(--accent); }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
@media (max-width: 760px) { .planung-wege { grid-template-columns: 1fr; } }

/* Geländer selbst bauen: Schritte, Werkstoff, Profile */
.schrittleiste { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .82rem; }
.schrittleiste span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.schrittleiste .fertig { color: var(--accent); border-color: var(--accent); }
.schrittleiste .aktiv { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.schrittleiste button { font: inherit; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); cursor: pointer; }
.schrittleiste button.fertig { color: var(--accent); border-color: var(--accent); }
.schrittleiste button.aktiv { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
/* Geländer-Planer (planer.js): maßstäbliche Skizze mit ziehbaren Maßen */
.planer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; margin-bottom: 40px; }
.planer-vorschau { position: sticky; top: 140px; }
.planer-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.vorschau3d.planer-3d { margin: 0 0 12px; height: 300px; border-radius: 10px; overflow: hidden; }
@media (max-width: 920px) { .planer { grid-template-columns: 1fr; } .planer-vorschau { position: static; order: -1; } .vorschau3d.planer-3d { height: 240px; }
  #g-summe { position: static; order: -1; } }  /* Konfigurator: 3D-Ansicht und Preis oben statt erst nach allen Schritten */
.plan-skizze { margin: 0 0 12px; }
.plan-svg { width: 100%; height: auto; display: block; max-height: 420px; background: var(--stahl1); border-radius: 10px; touch-action: none; }
.plan-svg text { fill: var(--text); font-family: inherit; }
.plan-svg .plan-info { fill: var(--muted); }
.plan-rohr { fill: #b9c3cc; stroke: #7d8a95; stroke-width: var(--sw); }
.plan-stab { fill: #9aa6b0; stroke: #6f7c87; stroke-width: calc(var(--sw) * .6); }
.plan-glas { fill: rgba(120, 190, 230, .35); stroke: rgba(70, 150, 200, .8); stroke-width: var(--sw); }
.plan-boden { fill: #b9a98f; opacity: .45; }
.plan-mass line { stroke: var(--accent); stroke-width: var(--sw); }
.plan-mass text { fill: var(--accent); font-weight: 600; }
.plan-griff { fill: var(--accent); stroke: #fff; stroke-width: calc(var(--sw) * 2.5); cursor: grab; opacity: .9; }
.plan-griff:hover { opacity: 1; filter: drop-shadow(0 0 4px var(--accent)); }
body.plan-zieht, body.plan-zieht * { cursor: grabbing !important; user-select: none; }
.plan-tipp { margin-top: 4px; }
/* Status der Konstruktion (mitlaufender Nachweis) */
.gk-status { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; }
.gk-status.ok { background: color-mix(in srgb, #2e9d5b 12%, var(--panel)); border: 1px solid color-mix(in srgb, #2e9d5b 50%, transparent); }
.gk-status.bad { background: color-mix(in srgb, #d9534f 10%, var(--panel)); border: 1px solid color-mix(in srgb, #d9534f 55%, transparent); }
.gk-status ul { margin: 6px 0 0; padding-left: 18px; }
.gk-fix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gk-fix .btn { padding: 5px 10px; font-size: .85rem; }
.anschluss-wahl { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.anschluss-bild { display: block; width: 60px; color: var(--accent); }
.anschluss-bild svg { width: 60px; height: 44px; display: block; }
.plan-anschluss { fill: none; stroke: var(--accent); stroke-width: calc(var(--sw) * 1.5); stroke-dasharray: calc(var(--sw) * 4) calc(var(--sw) * 3); }
button[data-pl-fertig]:disabled { opacity: .5; cursor: not-allowed; }
/* Nachweis Befestigung im Untergrund */
.bef-nachweis { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--stahl1); }
.bef-balken { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--line); vertical-align: middle; overflow: hidden; }
.bef-balken i { display: block; height: 100%; }
.bef-tabelle { margin-top: 10px; width: 100%; }
.bef-tabelle td:last-child, .bef-tabelle td.num { white-space: nowrap; }
.bef-tabelle tr.gewaehlt td { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
/* Abschnitte (über Eck / Treppe) */
.seg-liste { display: grid; gap: 10px; }
.seg-zeile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.seg-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.seg-kopf .link-knopf { margin-left: auto; }
.seg-knick { margin-bottom: 8px; flex-wrap: wrap; }
.seg-eck { margin-bottom: 8px; }
.seg-eck .segment { flex-wrap: wrap; margin-top: 4px; }
.seg-eck button:disabled { opacity: .45; cursor: not-allowed; }
.seg-felder { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.seg-liste > .btn { justify-self: start; }
.seg-liste > .seg-neu-knopf { justify-self: stretch; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 12px 16px; font-size: 1rem; border: 2px dashed var(--accent); }
.seg-neu-knopf > span { grid-row: span 2; font-size: 1.6rem; line-height: 1; }
.seg-neu-knopf small { font-weight: 400; opacity: .85; font-size: .8rem; }
.bef-zu > summary { cursor: pointer; list-style-position: outside; }
.bef-zu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-draufsicht { margin-top: 12px; }
.plan-oben { max-height: 260px; }
.plan-verlauf { fill: none; stroke: #9aa6b0; stroke-linecap: round; stroke-linejoin: round; }
.plan-pfosten { fill: #6f7c87; }
.plan-nr circle { fill: var(--accent); }
.plan-nr text { fill: var(--accent-text); font-weight: 700; }
.plan-gelenk { stroke: var(--accent); stroke-width: var(--sw); stroke-dasharray: calc(var(--sw) * 6) calc(var(--sw) * 4); }
.plan-svg .plan-gelenk-text { fill: var(--accent); font-weight: 700; }
.zs-hinweis { padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.plan-werte { display: grid; gap: 4px; }
.plan-werte div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.plan-werte span { color: var(--muted); }
.plan-werte b { text-align: right; }
.werkstoff-karte .probe.probe-3d { position: relative; height: 170px; overflow: hidden; background: radial-gradient(110% 100% at 60% 30%, #2b5274, #0d1e2d); }
.werkstoff-karte .probe.probe-3d .leinwand3d { pointer-events: none; }
.werkstoff-karte .probe.probe-3d .leinwand-hinweis { display: none; }
.werkstoff-karte .probe.franz-balkon { display: flex; align-items: center; justify-content: center; background: var(--stahl1); }
.werkstoff-karte .probe.franz-balkon svg { height: 100%; width: auto; }
.werkstoff-wahl.vorgehen { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.werkstoff-karte .probe.plan-vorschau { height: auto; min-height: 110px; display: flex; align-items: center; background: none; }
.werkstoff-karte .probe.plan-vorschau .plan-svg { pointer-events: none; max-height: 150px; }
.werkstoff-karte .probe.plan-vorschau .plan-griff { display: none; }
.werkstoff-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.werkstoff-karte { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--schatten); padding: 0 0 18px; overflow: hidden;
  transition: transform .18s, border-color .18s; }
.werkstoff-karte:hover, .werkstoff-karte:focus-visible { transform: translateY(-3px); border-color: var(--accent); outline: none; }
.werkstoff-karte .probe { height: 110px; margin-bottom: 8px; }
.werkstoff-karte.stahl .probe { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px), linear-gradient(135deg, #8e979f, #4f5a63 55%, #6b7680); }
.werkstoff-karte.edelstahl .probe { background: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.04) 1px 3px), linear-gradient(115deg, #e9eef2, #b7c2cb 45%, #f4f7f9 60%, #a9b4bd); }
/* Geländer-Skizze zur Produktübersicht */
.gv-box { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 300px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; }
.gv-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: .85rem; }
.gv-kopf .gv-auswahl { color: var(--muted); flex: 1; }
.gv-knopf { border: 0; background: none; color: var(--text); cursor: pointer; font-size: 1rem; padding: 0 4px; }
.gv-box.zu .gv-inhalt { display: none; }
.gv-box.zu .gv-kopf { border-bottom: 0; }
.gv-inhalt { padding: 8px 10px 10px; }
.gv-svg { width: 100%; height: auto; display: block; }
.gv-svg .gv-boden { fill: #b9a98f; opacity: .35; }
.gv-svg .gv-wand { fill: #cfc6b8; opacity: .55; }
.gv-teil { fill: var(--gv-farbe); stroke: var(--gv-kante); stroke-width: 1; transition: opacity .15s, fill .15s, stroke .15s; }
.gv-teil line { stroke: var(--gv-farbe); }
.gv-teil .gv-glas { fill: rgba(150, 205, 235, .45); stroke: rgba(90, 160, 200, .7); }
.gv-svg.hover .gv-teil:not(.an) { opacity: .25; }
.gv-teil.an, .gv-teil.an line { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.gv-teil.an .gv-glas { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.gv-text { font-size: .8rem; color: var(--muted); margin-top: 6px; min-height: 2.4em; line-height: 1.3; }
.gv-text b { color: var(--text); }
.familie:hover { border-color: var(--accent); }
.gv-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border: 1px solid var(--accent); font-size: .9rem; }
.gv-filter .btn { margin-left: auto; padding: 4px 10px; }
@media (max-width: 760px) { .gv-box { width: 210px; right: 8px; bottom: 8px; } .gv-text { display: none; } }
/* Einkaufshilfe „Mia“ (assistent.js) – unten links, die Geländer-Skizze sitzt unten rechts */
.mia { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.mia > * { pointer-events: auto; }
.mia-kopf { order: 0; width: 76px; height: 76px; padding: 0; border: 3px solid var(--panel); border-radius: 50%; background: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); flex: none; transition: transform .15s; }
.mia-kopf:hover, .mia-kopf:focus-visible { transform: scale(1.06); outline: none; }
.mia-bild { width: 100%; height: 100%; display: block; }
.mia-mund { transform-origin: 60px 68px; }
.mia.spricht .mia-mund { animation: mia-reden .28s ease-in-out infinite alternate; }
@keyframes mia-reden { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.mia-auge { animation: mia-blinzeln 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mia-blinzeln { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.1); } }
.mia-blase { order: 1; position: relative; width: 300px; max-width: calc(100vw - 120px); margin-bottom: 30px; padding: 12px 14px 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: .92rem; line-height: 1.4; }
.mia-blase::before { content: ""; position: absolute; left: -9px; bottom: 14px; width: 16px; height: 16px; background: var(--panel);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.mia.zu .mia-blase, .mia.still .mia-blase { display: none; }
.mia-name { font-size: .75rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; padding-right: 18px; }
.mia-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.mia-skizze { margin: 2px 0 6px; padding: 4px; border-radius: 8px; background: var(--stahl1); }
.mia-skizze svg { width: 100%; height: auto; max-height: 120px; display: block; pointer-events: none; }
.mia-text { min-height: 2.8em; }
.mia-wort { opacity: .25; transition: opacity .15s, color .15s; border-radius: 3px; }
.mia-wort.da { opacity: 1; }
.mia-wort.jetzt { color: var(--accent); background: var(--accent-soft); }
.mia-fuss { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mia-fuss .btn { padding: 4px 10px; font-size: .85rem; }
.mia-punkte { flex: 1; display: flex; gap: 4px; }
.mia-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.mia-punkte i.an { background: var(--accent); }
@media (max-width: 760px) {
  .mia { left: 8px; bottom: 8px; }
  .mia-kopf { width: 56px; height: 56px; }
  .mia-blase { width: auto; max-width: min(320px, calc(100vw - 80px)); margin-bottom: 20px; font-size: .86rem; padding: 10px 12px 8px; }
  .mia-skizze svg { max-height: 80px; }
  body:has(.gv-box:not(.zu)) .mia-blase { margin-bottom: 190px; }  /* über der Geländer-Skizze */
}
.werkstoff-karte.mit-glas .probe { background: linear-gradient(90deg, #9aa5ad 0 6%, transparent 6% 94%, #9aa5ad 94%),
  linear-gradient(160deg, rgba(160,215,240,.55), rgba(220,240,250,.35) 45%, rgba(150,205,230,.6)), #dfe9ef; }
.werkstoff-karte.ohne-glas .probe { background: linear-gradient(90deg, #9aa5ad 0 6%, transparent 6% 94%, #9aa5ad 94%),
  repeating-linear-gradient(180deg, transparent 0 22px, #9aa5ad 22px 27px), #eef2f5; }
.werkstoff-karte b, .werkstoff-karte span:not(.probe), .werkstoff-karte em { padding: 0 18px; }
.werkstoff-karte b { font-size: 1.12rem; }
.werkstoff-karte span:not(.probe) { color: var(--muted); font-size: .9rem; }
.werkstoff-karte em { font-style: normal; color: var(--accent); font-weight: 600; margin-top: 4px; }
@media (max-width: 700px) { .werkstoff-wahl { grid-template-columns: 1fr; } }
.profil-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.profil-kachel { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: border-color .18s, transform .18s; }
.profil-kachel:hover, .profil-kachel:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.profil-kachel .pk-symbol { width: 38px; height: 38px; color: var(--accent); margin-bottom: 6px; }
.profil-kachel .pk-symbol svg { width: 100%; height: 100%; }
.profil-kachel small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.profil-kachel em { font-style: normal; color: var(--accent); font-size: .82rem; margin-top: 6px; }
.profil-kachel.weitere { background: var(--accent-soft); }

/* Top-Produkt Rohrlaser */
.badge.top { background: #E3262F; color: #fff; letter-spacing: .04em; }
.welt-knopf.top-produkt { color: #E3262F; }
.welt-knopf.top-produkt svg { color: #E3262F; }
.welt-knopf.top-produkt:hover, .welt-knopf.top-produkt.aktiv { border-bottom-color: #E3262F; }
.buehnen-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.gross-knopf { padding: 12px 18px; font-weight: 700; border-radius: 10px; }
.btn.rot { background: #E3262F; border-color: #E3262F; color: #fff; box-shadow: 0 8px 24px rgba(227, 38, 47, .35); }
.btn.rot:hover { background: #c81f27; border-color: #c81f27; }
.btn.hell { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.laser-teaser { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; margin: 26px 0 8px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #0f2236, #1d3d5a); color: #fff; box-shadow: var(--schatten); }
.lt-text { padding: 28px; }
.lt-text h2 { color: #fff; font-size: 1.6rem; margin: 10px 0 8px; }
.lt-text p { color: rgba(255, 255, 255, .85); }
.lt-text ul { margin: 0 0 18px; padding-left: 18px; color: rgba(255, 255, 255, .85); font-size: .92rem; line-height: 1.7; }
.lt-3d { position: relative; min-height: 280px; background: radial-gradient(110% 100% at 60% 30%, #2b5274, #0d1e2d); }
@media (max-width: 800px) { .laser-teaser { grid-template-columns: 1fr; } .lt-3d { min-height: 230px; } }

/* Kategorie-Ansicht */
.krumen { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); margin: 18px 0 6px; flex-wrap: wrap; }
.krumen button { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.seitenkopf { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.seitenkopf h1 { margin: 0; font-size: 1.7rem; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.reiter button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: .88rem; cursor: pointer; }
.reiter button.aktiv { background: var(--tief); color: var(--bg); border-color: var(--tief); }
.familien { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 40px; }
.familie { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column;
  gap: 10px; box-shadow: var(--schatten); position: relative; }
.familie .kopf { display: flex; gap: 12px; align-items: flex-start; }
.familie .symbol { width: 60px; height: 60px; flex: none; border-radius: 10px; background: linear-gradient(145deg, var(--stahl1), var(--stahl2));
  display: grid; place-items: center; color: var(--accent); overflow: hidden; }
.familie .symbol img { width: 100%; height: 100%; object-fit: cover; }
.familie .symbol svg { width: 44px; height: 44px; }
.familie h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.familie .norm { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.familie label { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.auswahl { position: relative; }
.auswahl select { appearance: none; -webkit-appearance: none; background: var(--stahl1); border-radius: 8px; padding: 9px 34px 9px 12px; font-weight: 600; cursor: pointer; }
.auswahl::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.werkstoffe { display: flex; gap: 4px; flex-wrap: wrap; }
.werkstoffe button { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 6px; padding: 3px 8px; font: inherit;
  font-size: .78rem; cursor: pointer; }
.werkstoffe button.aktiv { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.familie .preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.familie .preis { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.familie .grundpreis { font-size: .76rem; color: var(--muted); }
.familie .info { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.familie .info b { color: var(--text); font-weight: 600; }
.mengenzeile { display: flex; gap: 8px; }
.stepper { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { border: 0; background: var(--stahl1); color: var(--text); width: 32px; font-size: 1.1rem; cursor: pointer; }
.stepper input { width: 46px; border: 0; border-radius: 0; text-align: center; padding: 6px 0; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mengenzeile .btn { flex: 1; border-radius: 8px; font-weight: 600; }
.leer { text-align: center; color: var(--muted); padding: 40px 0; }

/* Konfigurator */
.konfig { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; margin-bottom: 40px; }
@media (max-width: 920px) { .konfig { grid-template-columns: 1fr; } }
.schritt { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--schatten); }
.schritt h3 { margin: 0 0 12px; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.schritt h3 .nr { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: inline-grid;
  place-items: center; font-size: .82rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.kachel { border: 1.5px solid var(--line); background: var(--stahl1); border-radius: 10px; padding: 12px 8px 10px; cursor: pointer; font: inherit;
  color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; text-align: center; line-height: 1.2; }
.kachel svg { width: 42px; height: 42px; color: var(--muted); }
.kachel:hover { border-color: var(--accent); }
.kachel.aktiv { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.kachel.aktiv svg { color: var(--accent); }
/* Verfügbar (bestellbar) grün hinterlegt, sobald es in der Auswahl auch nicht verfügbare Optionen gibt; nicht verfügbare blass */
.kachel.verfuegbar, .kacheln:has(.kachel:disabled) .kachel:not(:disabled) { border-color: var(--ok); background: var(--ok-soft); }
.kachel.verfuegbar.aktiv, .kacheln:has(.kachel:disabled) .kachel.aktiv:not(:disabled) { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.kachel.verfuegbar svg { color: var(--ok); }
.kachel .verf { color: var(--ok); font-weight: 600; }
.kachel:disabled { opacity: .5; cursor: not-allowed; background: var(--panel); }
.segment:has(button:disabled) button:not(:disabled) { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.segment:has(button:disabled) button.aktiv:not(:disabled) { background: var(--ok); color: #fff; }
.segment button:disabled { opacity: .5; cursor: not-allowed; }
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.segment button { border: 0; background: var(--panel); color: var(--text); padding: 9px 14px; font: inherit; font-size: .88rem; cursor: pointer; border-right: 1px solid var(--line); }
.segment button:last-child { border-right: 0; }
.segment button.aktiv { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.segment button:disabled { opacity: .4; cursor: not-allowed; }
.segment button.aktiv .muted { color: inherit; opacity: .75; }
.zusammenfassung { position: sticky; top: 130px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.zusammenfassung .oben { background: linear-gradient(135deg, var(--tief), #1d4a6b); color: #fff; padding: 16px; }
@media (prefers-color-scheme: dark) { .zusammenfassung .oben { background: linear-gradient(135deg, #12405f, #0d2a40); } }
.zusammenfassung .oben small { color: rgba(255, 255, 255, .7); }
.zusammenfassung .gross { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.zusammenfassung .unten { padding: 14px 16px 16px; }
.zusammenfassung table td { padding: 5px 0; border: 0; }
.querschnitt { display: flex; justify-content: center; padding: 6px 0 2px; }
.querschnitt svg { width: 90px; height: 90px; color: #7fd3fb; }

.vorschau3d { position: relative; height: 240px; margin: -16px -16px 12px; background: radial-gradient(120% 100% at 50% 20%, #24435f, #0d1e2d); }
.leinwand3d { width: 100%; height: 100%; display: block; cursor: grab; }
.leinwand3d:active { cursor: grabbing; }
.vorschau-label { position: absolute; left: 10px; top: 8px; font-size: .74rem; color: #cfeaff; background: rgba(0, 0, 0, .35);
  padding: 3px 8px; border-radius: 6px; pointer-events: none; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leinwand-hinweis { position: absolute; left: 10px; bottom: 6px; font-size: .7rem; color: rgba(255, 255, 255, .55); pointer-events: none; }
.ablage { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; background: var(--stahl1); transition: border-color .2s; }
.ablage.ueber, .ablage:hover { border-color: var(--accent); }
.ausschnitt-zeile { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@media (max-width: 600px) { .ausschnitt-zeile { grid-template-columns: 1fr 1fr; } }

/* Warenkorb-Schublade */
.schublade { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.schublade .hintergrund { position: absolute; inset: 0; background: rgba(6, 15, 25, .45); opacity: 0; transition: opacity .2s; }
.schublade .fach { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--panel); box-shadow: -20px 0 40px rgba(0, 0, 0, .2);
  transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.schublade.offen { pointer-events: auto; }
.schublade.offen .hintergrund { opacity: 1; }
.schublade.offen .fach { transform: none; }
.fach .fkopf { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.fach .finhalt { flex: 1; overflow-y: auto; padding: 8px 16px; }
.fach .ffuss { border-top: 1px solid var(--line); padding: 16px; }
.korb-pos { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.korb-pos .unter { color: var(--muted); font-size: .8rem; }
.korb-pos .rechts { text-align: right; font-weight: 700; }
.korb-pos .aktionen { display: flex; gap: 6px; align-items: center; }

.shop footer.fuss { background: var(--panel); border-top: 1px solid var(--line); }
.shop .toast { z-index: 100; }

/* ---- Schrittführung in den Konfiguratoren (fuehrung.js) */
body.shop { --pflicht: #d6336c; --pflicht-soft: #fde8ef; }
@media (prefers-color-scheme: dark) { body.shop { --pflicht: #ff6b9a; --pflicht-soft: #3a1626; } }
.fh-leiste { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--schatten); }
.fh-reihe { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fh-intro { font-size: .88rem; color: var(--muted); max-width: 640px; }
.fh-intro b { color: var(--text); }
.fh-video-knopf { white-space: nowrap; }
.fh-video-knopf .muted { color: inherit; opacity: .8; font-weight: 400; margin-left: 4px; }
.fh-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.fh-chips button { font: inherit; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.fh-chips .n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .72rem; background: var(--stahl2); color: var(--text); }
.fh-chips .pflicht .n { background: var(--pflicht); color: #fff; }
.fh-chips .ok { color: var(--accent); border-color: var(--accent); }
.fh-chips .ok .n { background: var(--accent); color: var(--accent-text); }
.fh-chips .jetzt { border-color: var(--pflicht); color: var(--text); font-weight: 600; box-shadow: 0 0 0 3px var(--pflicht-soft); }
.fh-chips em { font-style: normal; font-weight: 600; color: var(--pflicht); }
.fh-badge { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel); white-space: nowrap; }
.fh-badge.pflicht { border-color: var(--pflicht); color: var(--pflicht); background: var(--pflicht-soft); }
.fh-intro .fh-badge { margin: 0 2px; }
.schritt.fh-pflicht-schritt { border-left: 4px solid var(--pflicht); }
.schritt.fh-pflicht-schritt h3 { font-size: 1.05rem; }
.schritt.fh-pflicht-schritt h3 .nr { background: var(--pflicht); color: #fff; }
.schritt.fh-optional-schritt h3 .nr { background: var(--stahl2); color: var(--text); }
.fh-hilfe { margin: -4px 0 12px; padding: 8px 10px; border-radius: 8px; font-size: .86rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.fh-optional-schritt .fh-hilfe { background: transparent; border-style: dashed; color: var(--muted); }
label.fh-pflichtfeld { font-weight: 600; color: var(--text); }
label.fh-pflichtfeld::after { content: " *"; color: var(--pflicht); font-weight: 700; }
input[data-fh-pflicht] { border-color: color-mix(in srgb, var(--pflicht) 45%, var(--line)); }
input.fh-fehlt { border-color: var(--pflicht); background: var(--pflicht-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pflicht) 25%, transparent); }
.schritt.fh-blink { animation: fh-blink 1.4s ease; }
@keyframes fh-blink { 0%, 100% { box-shadow: var(--schatten); } 30% { box-shadow: 0 0 0 4px var(--accent); } }
/* Erklärung beim Überfahren eines Eingabefelds */
.fh-tipp { position: relative; }
.fh-tipp:hover::after, .fh-tipp:focus-within::after { content: attr(data-tipp); position: absolute; left: 0; top: 100%; z-index: 30; margin-top: 4px;
  width: max-content; max-width: min(300px, 80vw); padding: 8px 10px; border-radius: 8px; font-size: .8rem; font-weight: 400; line-height: 1.35; white-space: normal;
  background: var(--tief); color: var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; }
td.fh-tipp:hover::after, td.fh-tipp:focus-within::after { left: auto; right: 0; }
/* Hauptmenü mit Unterzeile, Bausatz-Abschluss */
.welt-knopf > span { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.welt-unter { font-size: .7rem; font-weight: 400; color: var(--muted); }
.kb-rost { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, #e8590c 12%, transparent); border: 1px solid color-mix(in srgb, #e8590c 40%, transparent); }
.kb-gewicht { margin-top: 8px; font-size: .88rem; }
.ral-wahl { margin-top: 10px; }
.ral-wahl label { display: block; margin-bottom: 4px; }
.ral-muster { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); flex: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.ral-dd { position: relative; }
/* Testmodus aus der Verwaltung (?intern) */
.intern-banner { position: sticky; top: 0; z-index: 60; padding: 6px 12px; text-align: center; font-size: .85rem; font-weight: 600; background: #7a3cff; color: #fff; }
.intern [data-kb-korb], .intern [data-kb-nur-step], .intern .kb-zugang-hinweis, .intern .mia, .intern [data-l-korb] { display: none !important; }
.intern-kalk { margin-top: 14px; padding: 10px 12px; border: 2px dashed #7a3cff; border-radius: 10px; background: color-mix(in srgb, #7a3cff 6%, var(--panel)); }
.intern-kalk h4 { margin: 0 0 4px; color: #7a3cff; }
.intern-kalk tfoot td { border-top: 2px solid var(--line); }
.intern-knapp td:nth-child(5) { color: var(--bad, #c92a2a); font-weight: 600; }
.intern-auswahl { margin-top: 10px; }
.intern-auswahl summary { cursor: pointer; }
.intern-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.intern-spalten td:first-child { color: var(--muted); white-space: nowrap; }
.ral-knopf, .ral-liste button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ral-knopf { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); min-height: 44px; }
.ral-knopf:hover, .ral-knopf[aria-expanded="true"] { border-color: var(--accent); }
.ral-name { flex: 1; }
.ral-pfeil { color: var(--muted); }
.ral-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--schatten); }
.ral-liste[hidden] { display: none; }
.ral-liste button { padding: 5px 8px; border: 0; border-radius: 6px; background: none; }
.ral-liste button:hover, .ral-liste button:focus-visible { background: var(--accent-soft); outline: none; }
.ral-liste button[aria-selected="true"] { font-weight: 600; background: var(--stahl2); }
.verbindung-info { padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.kb-individuell { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--stahl1); color: var(--text); }
.kb-zugang { padding: 10px; border-radius: 8px; border: 1px solid var(--pflicht); background: var(--pflicht-soft); align-items: flex-start; }
.kb-zugang input { margin-top: 3px; }
.kb-fracht label { display: block; font-weight: 600; margin-bottom: 4px; }
tr.kb-leistung td { background: var(--accent-soft); }
.konfig > * { min-width: 0; }  /* breite Tabellen scrollen in ihrer Box statt die Spalte zu verbreitern */
/* Stahltreppenbau (treppe.js) */
.treppe-vorschau { margin: 0 0 10px; padding: 8px; border-radius: 10px; background: var(--stahl1); border: 1px solid var(--line); }
.treppe-vorschau svg { display: block; width: 100%; height: auto; max-height: 260px; }
.stufen-tabelle input { width: 90px; }
.stufen-tabelle td, .stufen-tabelle th { vertical-align: middle; }
.stufen-tabelle th .muted { font-weight: 400; font-size: .72rem; }
.stufen-tabelle .auswahl select { min-width: 110px; }
/* Erklärvideo */
.fh-modal { position: fixed; inset: 0; z-index: 120; background: rgba(6, 19, 30, .62); display: none; place-items: center; padding: 16px; }
.fh-modal.offen { display: grid; }
body.fh-video-offen .mia { display: none; }
.fh-player { position: relative; width: min(760px, 100%); background: var(--panel); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.fh-bild svg { display: block; width: 100%; height: auto; }
.fh-sprecher { position: absolute; left: 14px; top: 14px; width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); background: #fff; }
.fh-sprecher svg { width: 100%; height: 100%; }
.fh-modal.spricht .mia-mund { animation: mia-reden .28s ease-in-out infinite alternate; }
.fh-titel { padding: 12px 16px 0; font-weight: 700; color: var(--accent); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.fh-untertitel { padding: 4px 16px 10px; font-size: 1.1rem; line-height: 1.45; min-height: 3.2em; color: var(--muted); }
.fh-untertitel .gesagt { color: var(--text); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 30%, transparent) 62%); }
.fh-fortschritt { display: flex; gap: 4px; padding: 0 16px; }
.fh-fortschritt button { flex: 1; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--stahl2); cursor: pointer; overflow: hidden; }
.fh-fortschritt .fertig { background: var(--accent); }
.fh-fortschritt .jetzt i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: fh-balken linear forwards; }
@keyframes fh-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fh-stimme { max-width: 180px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: .85rem; }
.fh-steuer { display: flex; gap: 6px; padding: 12px 16px 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .fh-untertitel { font-size: .98rem; } .fh-sprecher { width: 52px; height: 52px; } .fh-badge { margin-left: 0; } .schritt h3 { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .fh-modal.spricht .mia-mund, .schritt.fh-blink { animation: none; } }

/* Treppenformen (Neubau) */
.t-formen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.t-formen .kachel { font-size: .85rem; }
.t-form-bild { display: block; margin-bottom: 6px; color: var(--text); }
.t-form-bild svg { display: block; width: 100%; height: 96px; }
.treppe-plan { display: block; margin: 0 auto 10px; }
.t-laeufe td { vertical-align: middle; }
.t-podest td { color: var(--muted); padding-left: 14px; }
.kb-mehr > summary, .bef-zu > summary { cursor: pointer; }