/* Hausfaden: Leiste ①②③, Hauskarte, Begrüßung — sachlich, passend zum Menü (dunkles Glas) */
.fd-leiste { display:flex; align-items:center; gap:6px; font:500 13px/1.2 'Outfit',system-ui,sans-serif; }
.fd-leiste a { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; text-decoration:none; color:#fff; background:rgba(6,17,28,.55); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.fd-leiste a span { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid currentColor; font-size:11px; }
.fd-leiste a[aria-current="step"] { background:#00A0D2; border-color:#00A0D2; }
.fd-leiste a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.fd-leiste i { color:rgba(255,255,255,.6); font-style:normal; }
.fd-leiste-hell a { color:#0D3A5C; background:#fff; border-color:rgba(13,58,92,.18); -webkit-backdrop-filter:none; backdrop-filter:none; }
.fd-leiste-hell a[aria-current="step"] { color:#fff; }
.fd-leiste-hell i { color:#8a99a8; }
@media (prefers-color-scheme: dark) { .fd-leiste-hell a { color:#e8eef5; background:#0f1c28; border-color:rgba(255,255,255,.14); } }
#fd-leiste { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:40; }
@media (max-width:1599px) { #fd-leiste { display:none; } }
.fd-karte .fd-leiste { flex-wrap:wrap; gap:4px; font-size:12px; margin:0 0 8px; } .fd-karte .fd-leiste a { padding:4px 8px; } .fd-karte .fd-leiste i { display:none; }
@media (min-width:1600px) { .fd-karte .fd-leiste { display:none; } }

.fd-karte { position:fixed; left:16px; bottom:16px; z-index:45; width:310px; max-height:calc(100vh - 420px); min-height:0; overflow:auto; color:#e8eef5;
  background:rgba(6,17,28,.82); border:1px solid rgba(255,255,255,.14); border-radius:16px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font:14px/1.45 'Outfit',system-ui,sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.fd-karte button, .fd-karte a { font:inherit; }
.fd-kopf { display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; color:inherit; cursor:pointer; padding:12px 14px; text-align:left; }
.fd-name { font-weight:600; font-size:16px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-kl { font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace; white-space:nowrap; }
.fd-kl b { display:inline-block; padding:3px 6px; border-radius:5px; color:#06111c; }
.fd-pfeil { transition:transform .2s; } .fd-karte.zu .fd-pfeil { transform:rotate(180deg); }
.fd-inhalt { padding:0 14px 14px; } .fd-karte.zu .fd-inhalt { display:none; }
.fd-kurz { margin:0; color:#c7d3df; } .fd-modell { margin:2px 0 8px; color:#93a4b6; font-size:12px; }
.fd-werte { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0; }
.fd-werte div { background:rgba(255,255,255,.06); border-radius:10px; padding:7px 9px; } .fd-werte b { display:block; font-size:15px; } .fd-werte small { color:#93a4b6; font-size:11.5px; }
.fd-paket { background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.35); border-radius:10px; padding:7px 9px; margin:6px 0; }
.fd-karte h4 { margin:10px 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#93a4b6; font-weight:600; }
.fd-aufg { list-style:none; margin:0; padding:0; } .fd-aufg li { display:grid; grid-template-columns:20px 1fr; gap:6px; padding:4px 0; }
.fd-aufg li::before { content:'○'; color:#93a4b6; } .fd-aufg li.ok::before { content:'✓'; color:#3ecf8e; font-weight:700; }
.fd-aufg li small { grid-column:2; color:#93a4b6; font-size:12px; } .fd-aufg li.ok small { display:none; }
.fd-entdeckt { margin:8px 0 0; color:#c7d3df; font-size:13px; } .fd-entdeckt span { letter-spacing:2px; color:#35c6ee; }
.fd-knoepfe { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.fd-knopf { display:block; text-align:center; text-decoration:none; cursor:pointer; border:0; border-radius:10px; padding:9px 12px; font-weight:600; background:#00A0D2; color:#fff; }
.fd-knopf.hell { background:transparent; color:#e8eef5; border:1px solid rgba(255,255,255,.25); }
.fd-knopf:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.fd-klein { margin:8px 0 0; font-size:11.5px; color:#93a4b6; } .fd-klein button { background:none; border:0; color:#cfe3f0; text-decoration:underline; cursor:pointer; padding:0; font-size:11.5px; }
.fd-mit { margin-top:6px; padding:8px; border-radius:10px; background:rgba(255,255,255,.06); font-size:12.5px; } .fd-mit a { color:#7fd8f5; }
.fd-einladung { padding:12px 14px; } .fd-einladung p { margin:0 0 8px; }

.fd-modal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(3,10,18,.55); }
.fd-dialog { width:min(620px,100%); max-height:calc(100vh - 32px); overflow:auto; background:#0f1c28; color:#e8eef5; border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:20px; font:15px/1.5 'Outfit',system-ui,sans-serif; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.fd-dialog h2 { margin:2px 0 10px; font-size:24px; line-height:1.2; } .fd-eyebrow { margin:0; color:#35c6ee; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.fd-vergleich { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.fd-vergleich > div { border-radius:12px; padding:12px; background:rgba(255,255,255,.05); } .fd-vergleich .moeglich { background:rgba(62,207,142,.1); border:1px solid rgba(62,207,142,.35); }
.fd-vergleich h3 { margin:0 0 6px; font-size:13px; color:#93a4b6; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.fd-vergleich p { margin:2px 0; } .fd-gross { font-size:22px; font-weight:600; }
.fd-massn { margin:6px 0 10px; padding-left:18px; color:#c7d3df; }
.fd-dialog .fd-knoepfe { flex-direction:row; flex-wrap:wrap; } .fd-dialog .fd-knopf { flex:1 1 200px; }
.fd-rechnet { color:#93a4b6; }
.fd-toast { position:fixed; left:50%; top:64px; transform:translateX(-50%); z-index:70; background:#0f1c28; color:#e8eef5; border:1px solid rgba(62,207,142,.5); border-radius:12px; padding:9px 14px; font:14px 'Outfit',system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:calc(100vw - 32px); }

@media (max-width:760px) {
  .fd-karte { left:8px; right:8px; bottom:8px; width:auto; max-height:62vh; }
  body.fd-panel-offen .fd-karte { display:none; }
  .fd-vergleich { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .fd-pfeil { transition:none; } }
.fd-weg { position:fixed; z-index:42; display:flex; gap:6px; align-items:stretch; font:600 13px/1 'Outfit',system-ui,sans-serif; }
.fd-weg a { display:inline-flex; align-items:center; padding:0 12px; min-height:32px; border-radius:999px; color:#fff; text-decoration:none; background:rgba(6,17,28,.62); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap; }
.fd-weg a:hover { border-color:#35c6ee; } .fd-weg a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (max-width:1100px) and (min-width:760px) { .fd-weg a[data-p] { display:none; } }
@media (max-width:759px) { .fd-weg a { min-height:30px; font-size:12px; padding:0 10px; } }
/* Maßnahmen-Schalter */
.fd-dialog.fd-breit { width:min(720px,100%); }
.fd-schalter { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin:8px 0 12px; }
.fd-sch { display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); cursor:pointer; }
.fd-sch:has(input:checked) { border-color:#35c6ee; background:rgba(53,198,238,.1); }
.fd-sch input { width:18px; height:18px; margin-top:2px; accent-color:#00A0D2; flex:none; }
.fd-sch b { display:block; } .fd-sch small { display:block; color:#93a4b6; font-size:12px; line-height:1.35; }
.fd-geld { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:8px 0; }
.fd-geld div { background:rgba(255,255,255,.05); border-radius:10px; padding:8px 10px; } .fd-geld dt { color:#93a4b6; font-size:12px; } .fd-geld dd { margin:2px 0 0; font-weight:650; font-size:17px; font-variant-numeric:tabular-nums; }
.fd-vergleich .nicht { background:rgba(242,165,74,.1); border:1px solid rgba(242,165,74,.4); }
.fd-hinweis { margin:8px 0; padding:10px 12px; border-radius:10px; background:rgba(242,165,74,.1); border:1px solid rgba(242,165,74,.4); }
.fd-h4 { margin:14px 0 6px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#93a4b6; }
.fd-tab { width:100%; border-collapse:collapse; font-size:14px; } .fd-tab th, .fd-tab td { text-align:left; padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.1); } .fd-tab th { color:#93a4b6; font-weight:500; font-size:12px; }
.fd-tab td:nth-child(n+2) { font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:560px) { .fd-tab { font-size:12.5px; } .fd-tab th:nth-child(3), .fd-tab td:nth-child(3) { display:none; } }
.fd-foe { margin:6px 0; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.fd-foe p { margin:2px 0 4px; color:#c7d3df; } .fd-foe ul { margin:2px 0 4px 18px; padding:0; color:#c7d3df; font-size:13.5px; } .fd-foe small { color:#93a4b6; } .fd-foe a { color:#7fd8f5; }
.fd-sch input[type=radio] { border-radius:50%; }

.fd-foto { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin:0 0 8px; }
.fd-foto-mini { width:40px; height:28px; object-fit:cover; border-radius:6px; flex:none; }
.fd-karte:not(.zu) .fd-foto-mini { display:none; }

.fd-werte .fd-klw { display:block; margin:2px 0; font-weight:600; } .fd-werte .fd-klw b { display:inline-block; font-size:13px; padding:2px 7px; border-radius:5px; color:#06111c; }
@media (max-width:560px) { .fd-dialog { padding:16px 14px; } .fd-dialog h2 { font-size:20px; } .fd-schalter { grid-template-columns:1fr 1fr; gap:6px; } .fd-sch { padding:7px 8px; gap:7px; font-size:13.5px; } .fd-sch small { font-size:11px; } .fd-h4 { margin:10px 0 4px; } }

.fd-rech { width:100%; border-collapse:collapse; margin:8px 0; font-size:14px; } .fd-rech td { padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.08); } .fd-rech td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fd-rech tr.fd-zw td { color:#35c6ee; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding-top:10px; border-bottom:0; } .fd-rech tr.summe td { border-top:1px solid rgba(255,255,255,.3); } .fd-rech tr.ergebnis td { font-size:16px; }
.fd-rech.fd-zwei th { text-align:right; color:#93a4b6; font-weight:600; font-size:12px; padding:4px 6px; } .fd-rech.fd-zwei th:first-child { text-align:left; } .fd-rech.fd-zwei td:nth-child(2), .fd-rech.fd-zwei td:nth-child(3) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .fd-rech.fd-zwei { font-size:12.5px; } .fd-rech.fd-zwei td:first-child { font-size:12px; } }

.fd-kompakt .fd-schalter { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; margin:4px 0 8px; } .fd-kompakt .fd-sch { padding:6px 9px; } .fd-kompakt .fd-h4 { margin:8px 0 4px; }
.fd-sch b { overflow-wrap:anywhere; hyphens:auto; } .fd-sch span { min-width:0; }
/* Holz oder massiv: Kostengruppen (02.10.2026) */
.fd-rech.fd-drei th { text-align:right; color:#93a4b6; font-weight:600; font-size:12px; padding:4px 6px; } .fd-rech.fd-drei th:first-child { text-align:left; }
.fd-rech.fd-drei td:nth-child(2), .fd-rech.fd-drei td:nth-child(3), .fd-rech.fd-drei td:nth-child(4) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fd-rech.fd-drei td:nth-child(4) { color:#93a4b6; }
.fd-rech.fd-drei .fd-kgk td { font-weight:600; }
.fd-rech.fd-drei .fd-kgd { display:none; } .fd-rech.fd-drei tbody.offen .fd-kgd { display:table-row; }
.fd-rech.fd-drei .fd-kgd td { font-size:12.5px; color:#c7d3df; padding-left:18px; } .fd-rech.fd-drei .fd-kgd small { color:#93a4b6; }
.fd-rech .fd-auf { background:none; border:0; color:inherit; font:inherit; font-weight:600; cursor:pointer; padding:0; text-align:left; }
.fd-rech .fd-auf::before { content:'▸ '; color:#35c6ee; } .fd-rech .fd-auf[aria-expanded=true]::before { content:'▾ '; }
@media (max-width:560px) { .fd-rech.fd-drei { font-size:12px; } .fd-rech.fd-drei td:nth-child(4), .fd-rech.fd-drei th:nth-child(4) { display:none; } }