/* ============================================================
   Heimschutz-Kompass — Oberflaeche
   Werkzeug fuer Techniker und Berater im Kundentermin.
   Optimiert fuer iPhone, iPad und MacBook.
   ============================================================ */

:root{
  --ground:#F5F2EA;
  --surface:#FFFFFF;
  --surface-2:#EBE7DD;
  --sunk:#E0DBD0;
  --ink:#16181B;
  --ink-soft:#565B60;
  --ink-faint:#8B9096;
  --rule:#D6D1C4;
  --rule-soft:#E5E1D6;
  --accent:#15734B;
  --accent-ink:#FFFFFF;
  --accent-soft:#DEEDE5;
  /* Die Nacht-Toene sind in beiden Farbschemata gleich: die dunklen
     Abschnitte der Startseite sind gestalterisch gesetzt, nicht themenabhaengig. */
  --nacht:#0A0B0C;
  --nacht-2:#141619;
  --nacht-3:#1E2126;
  --nacht-ink:#F5F3ED;
  --nacht-soft:#A7ADB4;
  --nacht-faint:#70767D;
  --leuchte:#45D394;
  --papier:#F5F2EA;
  --papier-2:#FFFFFF;
  --papier-ink:#16181B;
  --papier-soft:#565B60;
  --papier-rule:#E5E1D6;
  --papier-akzent:#15734B;
  --papier-akzent-soft:#DEEDE5;
  --good:#2C6B5D;
  --good-soft:#DFEBE7;
  --warn:#8E6210;
  --warn-soft:#F4EAD6;
  --info:#2A5B7E;
  --info-soft:#E1EBF2;
  --danger:#AF4330;
  --danger-ink:#FFFFFF;
  --danger-soft:#F5E4E0;
  --shadow-1:0 1px 2px rgba(21,31,26,.08);
  --shadow-2:0 6px 24px rgba(21,31,26,.14);
  --display:"Archivo","Helvetica Neue",-apple-system,Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bar-h:56px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121417;
    --surface:#1A1D21;
    --surface-2:#212529;
    --sunk:#0D0F11;
    --ink:#EDEBE5;
    --ink-soft:#A9AEB4;
    --ink-faint:#767C83;
    --rule:#2F343A;
    --rule-soft:#252A2F;
    --accent:#45D394;
    --accent-ink:#06120C;
    --accent-soft:#15291F;
    --good:#63B09D;
    --good-soft:#182926;
    --warn:#D5A34C;
    --warn-soft:#2A2317;
    --info:#7FB2D4;
    --info-soft:#16242E;
    --danger:#E07C64;
    --danger-ink:#21100C;
    --danger-soft:#33211D;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 6px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#121417; --surface:#1A1D21; --surface-2:#212529; --sunk:#0D0F11;
  --ink:#EDEBE5; --ink-soft:#A9AEB4; --ink-faint:#767C83;
  --rule:#2F343A; --rule-soft:#252A2F;
  --accent:#45D394; --accent-ink:#06120C; --accent-soft:#15291F;
  --good:#63B09D; --good-soft:#182926; --warn:#D5A34C; --warn-soft:#2A2317;
  --info:#7FB2D4; --info-soft:#16242E;
  --danger:#E07C64; --danger-ink:#21100C; --danger-soft:#33211D;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 24px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--display);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
p{margin:0 0 12px}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.prose{font-family:var(--body);font-size:15.5px;line-height:1.6}
.mono{font-family:var(--mono)}
.nums{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.hide{display:none!important}

/* ---------------------------------------------------- Topbar */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--bar-h);
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:var(--surface);border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:7px;flex:none}
.brand-mark{width:19px;height:19px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brand b{font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand b .amp{color:var(--accent)}
.topbar-lp .brand b .amp{color:var(--leuchte)}

.nav{display:none;gap:2px;margin-left:6px}
@media (min-width:760px){ .nav{display:flex} }
.nav a{
  font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:6px 11px;border-radius:4px;white-space:nowrap;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.akte{
  display:flex;align-items:center;gap:8px;min-width:0;max-width:min(42vw,320px);
  background:var(--accent-soft);color:var(--accent);
  border:1px solid transparent;border-radius:999px;padding:5px 6px 5px 12px;
}
.akte b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akte .x{
  flex:none;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.07);
  cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;color:inherit;
}
.stand{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);text-align:right;line-height:1.35;flex:none}
@media (max-width:900px){ .stand{display:none} }

/* ---------------------------------------------------- Menuekopf (Mobil)
   Statt einer festen Leiste am unteren Bildschirmrand — das war das
   deutlichste "das ist eine App"-Signal — klappt die Navigation auf schmalen
   Fenstern aus dem Kopfbereich auf, wie auf jeder normalen Website. */
.burger{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:0;background:none;cursor:pointer;color:inherit;padding:0;
}
@media (min-width:760px){ .burger{display:none} }
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
@media (max-width:759px){
  .nav.offen{
    display:flex;flex-direction:column;gap:2px;margin:0;
    position:fixed;top:var(--bar-h);left:0;right:0;z-index:39;
    background:var(--surface);border-bottom:1px solid var(--rule);
    padding:10px 14px 18px;box-shadow:var(--shadow-2);
  }
  .nav.offen a{padding:14px 12px;font-size:15px;border-radius:7px}
  .topbar-lp .nav.offen{background:var(--nacht-2);border-bottom-color:rgba(255,255,255,.12)}
}

/* ---------------------------------------------------- Kopfzeile auf der Startseite */
.topbar-lp{background:var(--nacht);border-bottom-color:rgba(255,255,255,.09)}
.topbar-lp .brand b{color:var(--nacht-ink)}
.topbar-lp .brand-mark{stroke:var(--leuchte)}
.topbar-lp .nav a{color:var(--nacht-soft)}
.topbar-lp .nav a:hover{background:rgba(255,255,255,.08);color:var(--nacht-ink)}
.topbar-lp .nav a[aria-current="page"]{background:rgba(69,211,148,.15);color:var(--leuchte)}
.topbar-lp .btn{background:transparent;border-color:rgba(255,255,255,.26);color:var(--nacht-ink)}
.topbar-lp .btn:hover{background:rgba(255,255,255,.1)}
.topbar-lp .stand{color:var(--nacht-faint)}

/* ---------------------------------------------------- Fussbereich */
.fuss{background:var(--nacht);color:var(--nacht-soft)}
.fuss-innen{max-width:1120px;margin:0 auto;padding:54px 22px 32px}
@media (min-width:760px){ .fuss-innen{padding:64px 40px 34px} }
.fuss-oben{display:grid;gap:34px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:760px){ .fuss-oben{grid-template-columns:1.7fr 1fr 1fr} }
.fuss-marke b{font-family:var(--body);font-size:1.32rem;font-weight:600;color:var(--nacht-ink);display:block;margin-bottom:10px}
.fuss-marke b i{font-style:normal;color:var(--leuchte)}
.fuss-marke p{font-size:14px;line-height:1.6;margin:0;max-width:40ch;color:var(--nacht-soft)}
.fuss-sp h4{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--nacht-faint);margin:0 0 12px;font-weight:400;
}
.fuss-sp a{display:block;color:var(--nacht-soft);font-size:14px;padding:6px 0}
.fuss-sp a:hover{color:var(--leuchte)}
.fuss-unten{padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--nacht-faint)}

/* ---------------------------------------------------- Layout */
.page{padding:18px 14px 28px;max-width:1500px;margin:0 auto}
@media (min-width:760px){ .page{padding:24px 26px 40px} }

.page-head{margin-bottom:18px}
.page-head h1{font-size:clamp(1.35rem,3.4vw,1.9rem)}
.page-head p{margin:6px 0 0;color:var(--ink-soft);font-size:14px;max-width:74ch}

.card{background:var(--surface);border:1px solid var(--rule-soft);border-radius:8px;box-shadow:var(--shadow-1)}
.card-int{transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.card-int:hover{transform:translateY(-1px)}
.card-pad{padding:16px}
.sec{margin-bottom:22px}
.sec>h2{font-size:1.05rem;margin-bottom:4px}
.sec>.sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:12px}

/* ---------------------------------------------------- Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 16px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule);background:var(--surface);
  font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .06s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn-pri{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -4px var(--accent);
}
.btn-pri:hover{filter:brightness(1.07);background:var(--accent);box-shadow:0 2px 4px rgba(0,0,0,.1),0 5px 16px -4px var(--accent)}
.btn-pri:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-sm{min-height:32px;padding:0 11px;font-size:12.5px}
.btn-icon{min-height:36px;width:36px;padding:0}
.btn-danger{color:var(--danger);border-color:var(--danger-soft)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------- Felder */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.field>span em{font-weight:400;color:var(--ink-faint);font-style:normal}
.inp{
  width:100%;min-height:42px;padding:8px 11px;font-size:16px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:6px;
}
textarea.inp{min-height:76px;resize:vertical;line-height:1.45}
select.inp{appearance:none;background-image:none}
.inp:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------------------------------------------------- Badges */
.b{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  padding:2px 6px;border-radius:3px;white-space:nowrap;
}
.b-ok{background:var(--good-soft);color:var(--good)}
.b-no{background:var(--sunk);color:var(--ink-faint)}
.b-unk{background:var(--warn-soft);color:var(--warn)}
.b-na{background:var(--sunk);color:var(--ink-faint);font-style:italic}
.b-hot{background:var(--danger-soft);color:var(--danger)}
.b-info{background:var(--info-soft);color:var(--info)}

.band{
  display:flex;gap:10px;padding:10px 13px;border-radius:6px;font-size:13px;
  border-left:3px solid;margin-bottom:14px;line-height:1.45;
}
.band b{display:block;font-size:12.5px;margin-bottom:2px}
.band-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.band-stop{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.band-info{background:var(--info-soft);border-color:var(--info);color:var(--info)}
.band-ok{background:var(--good-soft);border-color:var(--good);color:var(--good)}

/* ---------------------------------------------------- Filter (im Sheet) */
.fgroup{border-bottom:1px solid var(--rule-soft);padding:12px 0}
.fgroup:first-of-type{border-top:1px solid var(--rule-soft)}
.fgroup>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;gap:8px;position:relative;padding-right:22px;min-height:32px;
}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary .cnt{font-family:var(--mono);font-size:9.5px;color:var(--accent);font-weight:600}
.fgroup[open]>summary{margin-bottom:10px}
/* Ersatz fuer den nativen Aufklapp-Pfeil, den wir oben ausgeblendet haben —
   ohne dieses Zeichen sah eine <details> aus wie reiner Fliesstext, nicht
   wie etwas Klickbares. */
.fgroup>summary::after{
  content:"";position:absolute;right:2px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:translateY(-65%) rotate(45deg);transition:transform .15s ease;
}
.fgroup[open]>summary::after{transform:translateY(-35%) rotate(-135deg)}
.fopts{display:flex;flex-direction:column;gap:1px}
.fopt{
  display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 4px;
  border-radius:4px;cursor:pointer;font-size:13px;
}
.fopt:hover{background:var(--surface-2)}
.fopt input{width:15px;height:15px;flex:none;accent-color:var(--accent);margin:0}
.fopt .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt .n{font-family:var(--mono);font-size:10px;color:var(--ink-faint);flex:none}
.fopt.off{opacity:.4}
.tristate{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:2px}
.tristate button{
  border:1px solid var(--rule);background:var(--surface);border-radius:4px;
  min-height:34px;font-size:11px;font-weight:600;cursor:pointer;padding:0 4px;line-height:1.15;
}
.tristate button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.range{display:flex;align-items:center;gap:8px}
.range input[type=number]{width:100%;min-height:38px;padding:6px 8px;font-size:15px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border:0;border-radius:999px;
  padding:5px 8px 5px 11px;cursor:pointer;min-height:30px;
  transition:background .12s ease,transform .1s ease;
}
.chip:hover{background:var(--accent);color:var(--accent-ink)}
.chip:active{transform:scale(.96)}
.chip .x{font-size:13px;opacity:.75}

/* ---------------------------------------------------- Produktraster */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:180px}
.count-line{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em}
.count-line b{color:var(--ink);font-weight:600}

.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1460px){ .grid{grid-template-columns:repeat(4,1fr)} }

.pcard{
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:11px;
  padding:14px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  text-align:left;box-shadow:var(--shadow-1);width:100%;
}
.pcard:hover{border-color:var(--rule);box-shadow:var(--shadow-2)}
.pcard-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard-main{display:flex;gap:10px;min-width:0}
.pcard-icon{
  flex:none;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);
  display:grid;place-items:center;margin-top:1px;
}
.pcard-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pcard-txt{min-width:0}
.pcard-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.pcard h3{font-size:14.5px;line-height:1.28}
.pcard .preis{font-family:var(--display);font-weight:700;font-size:15px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;padding-top:3px}
.pcard .preis.offen{font-size:10px;font-family:var(--mono);font-weight:400;color:var(--ink-faint)}
.pcard-marks{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.pcard-foot{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pcard-marks .b,.pcard-foot .b{
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:0;
  padding:4px 9px;border-radius:999px;
}

.empty{
  text-align:center;padding:52px 24px;color:var(--ink-soft);
  border:1.5px dashed var(--rule);border-radius:10px;background:var(--surface-2);
}
.empty svg{width:34px;height:34px;stroke:var(--ink-faint);fill:none;stroke-width:1.4;margin-bottom:14px}
.empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}

/* ---------------------------------------------------- Detail (Schublade / Blatt) */
.scrim{position:fixed;inset:0;background:rgba(10,16,22,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .16s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;z-index:51;background:var(--surface);display:flex;flex-direction:column;
  box-shadow:var(--shadow-2);
}
/* iPhone: eigene Seite von unten */
.sheet{inset:0;transform:translateY(100%);transition:transform .2s ease}
.sheet.on{transform:none}
/* iPad: ueberlagerndes Blatt */
@media (min-width:700px){
  .sheet{inset:auto;top:50%;left:50%;width:min(620px,92vw);max-height:86vh;border-radius:10px;transform:translate(-50%,-45%) scale(.98);opacity:0;transition:transform .18s,opacity .18s}
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
}
/* MacBook: rechte Schublade */
@media (min-width:1200px){
  .sheet{top:0;left:auto;right:0;bottom:0;width:min(480px,38vw);max-height:none;border-radius:0;border-left:1px solid var(--rule);transform:translateX(100%);opacity:1}
  .sheet.on{transform:none}
}
.sheet-head{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--rule-soft);flex:none;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
}
@media (min-width:700px){ .sheet-head{padding-top:14px} }
.sheet-head h2{font-size:16px;line-height:1.25}
.sheet-body{overflow-y:auto;padding:16px;flex:1;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px 16px;border-top:1px solid var(--rule-soft);flex:none;display:flex;gap:8px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}

.dl{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:0;font-size:13px}
.dl>dt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 8px 0;border-bottom:1px solid var(--rule-soft)}
.dl>dd{margin:0;padding:8px 0;border-bottom:1px solid var(--rule-soft);min-width:0;overflow-wrap:anywhere}
.dl>dd:last-of-type,.dl>dt:last-of-type{border-bottom:0}
.blocktitle{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.blocktitle:first-child{margin-top:0}
ul.ul{margin:0 0 12px;padding-left:18px;font-size:13.5px}
ul.ul li{margin-bottom:5px}
.srcs{font-size:11.5px;word-break:break-all;line-height:1.5}

/* ====================================================================
   Startseite als Landingpage
   Verlaesst bewusst den .page-Container: die Abschnitte laufen ueber die
   volle Breite, nur der Inhalt darin ist begrenzt. Genau das unterscheidet
   eine Website von einer Anwendungsoberflaeche.
   ==================================================================== */
.lp{overflow-x:hidden}
.lp-innen{max-width:1120px;margin:0 auto;padding:0 22px}
@media (min-width:760px){ .lp-innen{padding:0 40px} }

.lp-abschnitt{padding:78px 0}
@media (min-width:760px){ .lp-abschnitt{padding:110px 0} }
/* Die hellen Abschnitte sind bewusst an feste Werte gebunden, nicht an das
   Farbschema des Systems: der Wechsel von Nacht zu Licht ist die Dramaturgie
   der Seite und darf im Dunkelmodus nicht in sich zusammenfallen. */
.ton-hell{background:var(--papier);color:var(--papier-ink)}
.ton-weiss{background:var(--papier-2);color:var(--papier-ink)}
.ton-hell .lp-lede,.ton-weiss .lp-lede{color:var(--papier-soft)}
.ton-hell .lp-aug,.ton-weiss .lp-aug{color:var(--papier-akzent)}
.ton-hell h2,.ton-weiss h2{color:var(--papier-ink)}
.ton-nacht{background:var(--nacht);color:var(--nacht-ink)}
.ton-nacht2{background:var(--nacht-2);color:var(--nacht-ink)}

.lp-aug{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:16px;
}
.ton-nacht .lp-aug,.ton-nacht2 .lp-aug{color:var(--leuchte)}
.lp h2{
  font-family:var(--body);font-weight:600;letter-spacing:-.008em;line-height:1.13;
  font-size:clamp(1.75rem,4vw,2.7rem);margin-bottom:18px;max-width:20ch;
}
.lp-lede{font-family:var(--body);font-size:clamp(1.04rem,1.7vw,1.24rem);line-height:1.6;color:var(--ink-soft);max-width:56ch;margin:0}
.ton-nacht .lp-lede,.ton-nacht2 .lp-lede{color:var(--nacht-soft)}

/* ---- Die Eroeffnung: aus dem Dunkel ins Licht ---- */
.lp-buehne{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:min(86vh,740px);padding:76px 0 92px;
  background:var(--nacht);color:var(--nacht-ink);
}
.lp-licht{
  position:absolute;inset:-25% -12% auto -12%;height:160%;pointer-events:none;
  background:
    radial-gradient(56% 48% at 64% 6%, rgba(255,244,216,.22), rgba(255,244,216,0) 66%),
    radial-gradient(40% 36% at 24% 68%, rgba(69,211,148,.14), rgba(69,211,148,0) 70%);
  animation:lichtAn 2.4s ease-out .6s backwards;
}
@keyframes lichtAn{from{opacity:0;transform:translateY(-18px) scale(.82)}to{opacity:1;transform:none}}

/* Beide Saetze liegen in derselben Rasterzelle uebereinander, damit beim
   Wechsel nichts springt. */
/* Zwei Spalten: links bleibt die Lage stehen, rechts kommt die Antwort dazu.
   Der Kontrast ist dadurch dauerhaft sichtbar statt nur im Moment des Wechsels. */
.lp-gegen{display:grid;gap:26px;align-items:center}
@media (min-width:940px){
  .lp-gegen{grid-template-columns:.82fr 1.18fr;gap:56px}
  .lp-gegen-licht{padding-left:56px;border-left:1px solid rgba(255,255,255,.13)}
}
.lp-dunkelsatz{
  font-family:var(--body);font-weight:400;line-height:1.22;margin:0;
  font-size:clamp(1.3rem,2.5vw,1.95rem);color:#666C73;max-width:15ch;
  animation:satzAn 1.1s ease-out .3s backwards;
}
.lp-dunkelsatz-aug{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#4C5259;margin-bottom:14px;
  animation:satzAn 1.1s ease-out .15s backwards;
}
.lp-buehne h1{
  margin:0;font-family:var(--body);font-weight:600;letter-spacing:-.015em;line-height:1.06;
  font-size:clamp(2.05rem,5.2vw,3.8rem);color:var(--nacht-ink);
  animation:satzAn 1.05s cubic-bezier(.2,.7,.2,1) 1.75s backwards;
}
.lp-buehne h1 em{font-style:normal;color:var(--leuchte);text-shadow:0 0 34px rgba(69,211,148,.5)}
@keyframes satzAn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.lp-buehne .lp-sub{
  font-family:var(--body);font-size:clamp(1.06rem,2vw,1.38rem);line-height:1.5;
  color:var(--nacht-soft);max-width:46ch;margin:24px 0 0;
  animation:satzAn .9s ease-out 2.25s backwards;
}
.lp-buehne .lp-knopfreihe{animation:satzAn .9s ease-out 2.5s backwards}
.lp-knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.lp-knopfreihe .btn{min-height:54px;padding:0 26px;font-size:15px;border-radius:9px}
.lp-vertrauen{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:40px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);font-size:13px;color:var(--nacht-faint);
  animation:satzAn .9s ease-out 2.8s backwards;
}
.lp-runter{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nacht-faint);animation:satzAn 1s ease-out 3.1s backwards;
}
.lp-runter i{display:block;width:1px;height:26px;margin:10px auto 0;background:linear-gradient(var(--nacht-faint),transparent)}

/* ---- Knoepfe auf dunklem Grund ---- */
.btn-licht{
  background:var(--leuchte);border-color:var(--leuchte);color:#04130B;font-weight:700;
  box-shadow:0 12px 34px -14px rgba(69,211,148,.9);
}
.btn-licht:hover{background:#5CE0A6;border-color:#5CE0A6}
.btn-geist{background:transparent;border-color:rgba(255,255,255,.3);color:var(--nacht-ink)}
.btn-geist:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}

/* ---- Karten, je nach Grund hell oder dunkel ---- */
.lp-raster{display:grid;gap:18px;margin-top:46px}
@media (min-width:720px){
  .lp-raster.zwei{grid-template-columns:repeat(2,1fr)}
  .lp-raster.drei{grid-template-columns:repeat(3,1fr)}
}
.lp-karte{
  background:var(--nacht-3);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:28px 26px;
}
.lp-karte h3{font-family:var(--body);font-size:1.24rem;font-weight:600;margin-bottom:9px;color:var(--nacht-ink)}
.lp-karte p{font-size:14.5px;line-height:1.6;color:var(--nacht-soft);margin:0}
.lp-ikon{width:44px;height:44px;border-radius:12px;background:rgba(69,211,148,.13);display:grid;place-items:center;margin-bottom:18px}
.lp-ikon svg{width:22px;height:22px;stroke:var(--leuchte);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ton-hell .lp-karte{background:var(--papier-2);border-color:var(--papier-rule);box-shadow:0 1px 2px rgba(22,24,27,.07)}
.ton-weiss .lp-karte{background:var(--papier);border-color:var(--papier-rule);box-shadow:none}
.ton-hell .lp-karte h3,.ton-weiss .lp-karte h3{color:var(--papier-ink)}
.ton-hell .lp-karte p,.ton-weiss .lp-karte p{color:var(--papier-soft)}
.ton-hell .lp-ikon,.ton-weiss .lp-ikon{background:var(--papier-akzent-soft)}
.ton-hell .lp-ikon svg,.ton-weiss .lp-ikon svg{stroke:var(--papier-akzent)}
/* Knoepfe in den hellen Abschnitten folgen ebenfalls der festen Lichtwelt. */
.ton-hell .btn-pri,.ton-weiss .btn-pri{background:var(--papier-akzent);border-color:var(--papier-akzent);color:#FFFFFF}
.ton-hell .btn:not(.btn-pri),.ton-weiss .btn:not(.btn-pri){background:transparent;border-color:#C9C3B4;color:var(--papier-ink)}
.ton-hell .btn:not(.btn-pri):hover,.ton-weiss .btn:not(.btn-pri):hover{background:rgba(22,24,27,.05)}

/* ---- Fallbeispiele ---- */
.lp-fall{display:flex;flex-direction:column}
.lp-fall .rahmen{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--papier-akzent);margin-bottom:12px;
}
.lp-fall ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-fall li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--papier-soft)}
.lp-fall li:before{
  content:"";position:absolute;left:1px;top:.42em;width:8px;height:4px;
  border-left:1.8px solid var(--papier-akzent);border-bottom:1.8px solid var(--papier-akzent);transform:rotate(-45deg);
}
.lp-fall .spanne{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--papier-rule);
  font-family:var(--display);font-weight:700;font-size:1.32rem;font-variant-numeric:tabular-nums;color:var(--papier-ink);
}
.lp-fall .spanne em{display:block;font-style:normal;font-family:var(--display);font-size:11.5px;font-weight:500;color:#8B9096;margin-top:4px}

/* ---- Echte Produkte aus dem Katalog ---- */
.lp-produkte{display:grid;gap:12px;margin-top:44px}
@media (min-width:640px){ .lp-produkte{grid-template-columns:repeat(2,1fr)} }
.lp-produkt{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;
  background:var(--nacht-3);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:15px 18px;
  transition:border-color .15s ease,transform .15s ease;
  /* Rasterelemente duerfen ihre Spalte sonst nach rechts aufsprengen, dann
     laeuft der lange Produktname aus dem Bild und der Preis verschwindet. */
  min-width:0;width:100%;
}
.lp-produkt:hover{border-color:rgba(69,211,148,.45);transform:translateY(-2px)}
.lp-produkt .ik{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none}
.lp-produkt .ik svg{width:20px;height:20px;stroke:var(--leuchte);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lp-produkt .tx{min-width:0;flex:1}
.lp-produkt .tx span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--nacht-faint)}
.lp-produkt .tx b{display:block;font-size:14.5px;font-weight:600;color:var(--nacht-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-produkt .pr{flex:none;font-weight:700;font-size:15px;color:var(--leuchte);font-variant-numeric:tabular-nums}

/* ---- Einstiegspreise ----
   Bewusst auffaelliger als die "Aus dem Katalog"-Karten: das hier soll die
   Kostenangst nehmen, die Zahl ist der Punkt, nicht der Fliesstext. */
.lp-preise{display:grid;gap:14px;margin-top:36px;grid-template-columns:1fr}
@media (min-width:560px){ .lp-preise{grid-template-columns:repeat(2,1fr)} }
@media (min-width:940px){ .lp-preise{grid-template-columns:repeat(5,1fr)} }
.lp-preiskarte{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  background:var(--papier-2);border:1px solid var(--papier-rule);border-radius:14px;padding:20px 18px;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.lp-preiskarte:hover{border-color:var(--papier-akzent);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.lp-preis-ik{
  width:36px;height:36px;border-radius:9px;background:var(--papier-akzent-soft);display:grid;place-items:center;
  margin-bottom:6px;
}
.lp-preis-ik svg{width:18px;height:18px;stroke:var(--papier-akzent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-preis-zahl{
  font-family:var(--display);font-size:1.55rem;font-weight:700;letter-spacing:-.02em;
  color:var(--papier-ink);font-variant-numeric:tabular-nums;
}
.lp-preis-label{font-size:14px;font-weight:600;color:var(--papier-ink)}
.lp-preis-zusatz{font-size:12px;color:var(--papier-soft);line-height:1.4}
.lp-preis-fein{margin-top:20px;font-family:var(--body);font-size:13.5px;color:var(--papier-soft);max-width:70ch}

/* ---- Zahlen ---- */
.lp-zahlen{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-top:44px}
.lp-zahl b{
  display:block;font-size:clamp(2.1rem,5vw,3.1rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--nacht-ink);
}
.lp-zahl span{display:block;margin-top:11px;font-size:13.5px;line-height:1.45;color:var(--nacht-soft)}
.ton-hell .lp-zahl b,.ton-weiss .lp-zahl b{color:var(--papier-ink)}
.ton-hell .lp-zahl span,.ton-weiss .lp-zahl span{color:var(--papier-soft)}

/* ---- Haeufige Fragen ----
   Groessere Schrift und grosszuegige Tippflaechen als im Rest der Seite:
   die Zielgruppe ist bewusst nicht nur technikaffines Publikum. */
.lp-faq{max-width:760px;margin-top:36px;border-top:1px solid var(--papier-rule)}
.lp-faq-item{border-bottom:1px solid var(--papier-rule)}
.lp-faq-item summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 2px;position:relative;
  font-family:var(--body);font-size:1.08rem;font-weight:600;color:var(--papier-ink);
  line-height:1.4;
}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{
  content:"";position:absolute;right:4px;top:26px;width:11px;height:11px;
  border-right:2px solid var(--papier-akzent);border-bottom:2px solid var(--papier-akzent);
  transform:rotate(45deg);transition:transform .15s ease;
}
.lp-faq-item[open] summary::after{transform:rotate(-135deg);top:30px}
.lp-faq-item p{
  margin:0 2px 22px;padding-right:34px;font-family:var(--body);font-size:1rem;
  line-height:1.65;color:var(--papier-soft);max-width:64ch;
}

/* ---- Abschluss ---- */
.lp-schluss{text-align:center}
.lp-schluss h2{margin-left:auto;margin-right:auto;max-width:19ch}
.lp-schluss .lp-lede{margin-left:auto;margin-right:auto}
.lp-schluss .lp-knopfreihe{justify-content:center}

/* Einblenden beim Scrollen. Die Grundstellung ist sichtbar — erst wenn das
   Skript laeuft, wird versteckt und nachtraeglich eingeblendet. So bleibt die
   Seite lesbar, falls das Skript nie ankommt. */
.lp.js-anim .lp-reveal{opacity:0;transform:translateY(22px)}
.lp.js-anim .lp-reveal.sichtbar{
  opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------- Beratung / Guide */
/* minmax(0,1fr) ist Pflicht, auch fuer die einspaltige Basisregel: ohne sie
   darf die Grid-Spur auf den Inhalt wachsen (klassischer "Grid-Blowout"),
   und ein langer Button-Text in der Kapitelspalte sprengt auf schmalen
   Bildschirmen die Seite nach rechts. */
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:1000px){ .guide{grid-template-columns:minmax(0,1fr) 300px} }
@media (min-width:1340px){ .guide{grid-template-columns:minmax(0,1fr) 340px} }
/* Oeffentliche Beratung ohne Experten-Panel: keine reservierte zweite
   Spalte, die Fragen duerfen die volle Breite nutzen. Zwei Klassen auf
   einem Element schlagen die einfache .guide-Regel in jeder Breite. */
.guide.guide-voll{grid-template-columns:minmax(0,1fr)}
.guide-voll > div:first-child{max-width:660px;margin-left:auto;margin-right:auto;width:100%}

.steps{
  display:flex;gap:2px;margin-bottom:18px;overflow-x:auto;padding:4px 2px 8px;
  position:relative;
}
.step{
  flex:1;min-width:76px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 3px;
  position:relative;
}
/* Verbindungslinie zwischen den Nummern, hinter dem Kreis liegend */
.step:not(:first-child):before{
  content:"";position:absolute;top:14px;right:50%;width:100%;height:2px;
  background:var(--rule);z-index:0;
}
.step.done:not(:first-child):before{background:var(--good)}
.step-n{
  position:relative;z-index:1;width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;
  border:1.5px solid var(--rule);background:var(--surface);color:var(--ink-faint);
}
.step b{
  font-size:11px;font-weight:600;line-height:1.25;text-align:center;color:var(--ink-soft);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.step.done .step-n{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.step.now .step-n{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.step.now b{color:var(--accent);font-weight:700}

.guide-progress{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-bottom:20px}
.guide-progress i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease}

.wizard-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);flex-wrap:wrap;
}
.wizard-nav .faint{order:3;flex:1 0 100%;text-align:center}
@media (min-width:560px){ .wizard-nav .faint{order:0;flex:none;text-align:left} }

.qblock{padding:18px;margin-bottom:14px;border-radius:12px}
@media (min-width:760px){ .qblock{padding:24px 26px} }
@media (min-width:1000px){ .qblock{padding:30px 34px;border-radius:14px} }
.qhead{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:4px}
.qblock h3{font-size:1.08rem;letter-spacing:-.01em}
.qhelp{font-family:var(--body);font-size:14.5px;color:var(--ink-soft);margin:6px 0 16px;line-height:1.55}
.opts{display:grid;gap:8px}
@media (min-width:620px){ .opts.cols2{grid-template-columns:1fr 1fr} }
.opt{
  display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:14px 46px 14px 16px;
  border:1.5px solid var(--rule);border-radius:11px;cursor:pointer;background:var(--surface);
  position:relative;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.opt:hover{border-color:var(--ink-faint)}
.opt input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.opt b{display:block;font-size:14.5px;font-weight:600}
.opt em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 1px 4px rgba(20,30,39,.06)}
.opt.sel b{color:var(--accent)}
/* Sichtbare Bestaetigung der Auswahl, ohne die Struktur der Option anzufassen */
.opt.sel:after{
  content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  font-family:var(--display);line-height:1;
}
.numrow{display:flex;align-items:center;gap:10px}
.numrow .inp{max-width:130px}
.numrow .hint{font-size:12.5px;color:var(--ink-faint)}

.panel{align-self:start}
@media (min-width:1000px){ .panel{position:sticky;top:calc(var(--bar-h) + 16px);max-height:calc(100vh - var(--bar-h) - 34px);overflow-y:auto} }
.gauge{padding:14px 16px}
.gauge-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gauge-top b{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.gauge-bar{height:6px;border-radius:3px;background:var(--sunk);margin:10px 0 4px;overflow:hidden}
.gauge-bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .22s}
.logline{
  display:grid;grid-template-columns:auto 1fr;gap:3px 9px;padding:9px 0;
  border-bottom:1px solid var(--rule-soft);font-size:12.5px;
}
.logline .r{font-family:var(--mono);font-size:9.5px;color:var(--accent);background:var(--accent-soft);padding:2px 5px;border-radius:3px;align-self:start}
.logline .who{font-weight:600}
.logline .why{grid-column:2;color:var(--ink-soft);font-size:12px;line-height:1.45}

/* ---------------------------------------------------- Score / Pfade */
.scorebar{display:flex;height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--rule);background:var(--sunk);position:relative}
.scoreseg{display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--danger-ink);background:var(--danger);border-right:1px solid rgba(255,255,255,.25);min-width:0;overflow:hidden}
.scoreseg.minus{background:var(--good)}
.scorewrap{position:relative;margin:10px 0 6px}
.threshold{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);z-index:2}
.threshold span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--ink);white-space:nowrap}
.scorekeys{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.skey{display:flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;background:var(--surface);min-height:32px}
.skey.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.skey .d{font-family:var(--mono);font-size:10px}

.pfade{display:grid;gap:14px}
@media (min-width:1100px){ .pfade.zwei{grid-template-columns:1fr 1fr} }
.pfad{border:1px solid var(--rule);border-radius:9px;background:var(--surface);overflow:hidden}
.pfad.aktiv{border-color:var(--accent);border-width:2px}
.pfad-head{padding:13px 15px;border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pfad-head h3{font-size:15px}
.pfad-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.pfad-head .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-faint)}
.pfad.aktiv .pfad-head .tag{color:var(--accent)}
.pfad-empf{
  display:inline-flex;align-items:center;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.01em;background:var(--accent);color:var(--accent-ink);padding:2px 9px;border-radius:999px;
}
.pfad.aktiv .pfad-sum{font-size:19px;color:var(--accent)}

.reason-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:9px}
.reason-list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.reason-list li:before{
  content:"✓";flex:none;width:19px;height:19px;margin-top:1px;border-radius:50%;
  background:var(--good-soft);color:var(--good);font-size:10.5px;font-weight:700;
  display:grid;place-items:center;font-family:var(--display);
}
.pfad-sum{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.spur{padding:13px 15px;border-bottom:1px solid var(--rule-soft)}
.spur:last-child{border-bottom:0}
.spur-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:9px}
.spur-head b{font-size:13.5px}
.spur-head .k{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap}
.bom{width:100%;border-collapse:collapse;font-size:12.5px}
.bom td{padding:5px 8px 5px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.bom tr:last-child td{border-bottom:0}
.bom .q{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap;width:1px}
.bom .p{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.bom .miss td{color:var(--warn)}

.kv{display:flex;flex-wrap:wrap;gap:0 22px;margin:4px 0 0}
.kv>div{padding:7px 0;min-width:130px}
.kv dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.kv dd{margin:2px 0 0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- Tabellen */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule-soft);border-radius:8px;background:var(--surface)}
table.tbl{border-collapse:collapse;width:100%;font-size:13px;min-width:620px}
table.tbl th,table.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.tbl thead th{
  position:sticky;top:0;background:var(--surface-2);z-index:1;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;white-space:nowrap;
}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------- Beratungsliste */
.akten{display:grid;gap:10px}
@media (min-width:700px){ .akten{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .akten{grid-template-columns:repeat(3,1fr)} }
.akte-card{
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:8px;padding:14px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-1);
}
.akte-card h3{font-size:15px}
.akte-card .meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.04em}
.akte-card .res{font-size:13px;color:var(--ink-soft);font-family:var(--body)}
.akte-card .acts{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.prog{height:4px;background:var(--sunk);border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--good)}

/* ---------------------------------------------------- Herstellerprofil */
.hgrid{display:grid;gap:12px}
@media (min-width:640px){ .hgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .hgrid{grid-template-columns:repeat(3,1fr)} }
.hcard{background:var(--surface);border:1px solid var(--rule-soft);border-radius:8px;padding:14px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:8px}
.hcard:hover{box-shadow:var(--shadow-2)}
.hcard h3{font-size:15px}
.katgrid{display:flex;flex-wrap:wrap;gap:3px}
.katcell{font-family:var(--mono);font-size:9px;padding:2px 5px;border-radius:3px;background:var(--sunk);color:var(--ink-faint)}
.katcell.has{background:var(--good-soft);color:var(--good);font-weight:500}
.twocol{display:grid;gap:16px}
@media (min-width:640px){ .twocol{grid-template-columns:1fr 1fr} }

/* ---------------------------------------------------- Pflege */
.pflege-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.edit-grid{display:grid;gap:0 18px}
@media (min-width:700px){ .edit-grid{grid-template-columns:1fr 1fr} }
.editrow{display:flex;gap:6px;flex-wrap:wrap}
.editrow .inp{flex:1;min-width:120px}
.dirty{background:var(--warn-soft)!important}
.tag-dirty{color:var(--warn);font-family:var(--mono);font-size:9.5px}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px}
.checks label{display:flex;align-items:center;gap:6px;font-size:13px;min-height:32px;cursor:pointer}
.checks input{width:15px;height:15px;accent-color:var(--accent)}

/* ---------------------------------------------------- Druck */
@media print{
  .topbar,.fuss,.panel,.btn,.scrim,.sheet{display:none!important}
  body{background:#fff;color:#000}
  .page{padding:0;max-width:none}
  .card,.pfad{border:1px solid #999;box-shadow:none;break-inside:avoid}
}

/* Produktzeile im Herstellerprofil */
.hlist{
  all:unset;display:flex;justify-content:space-between;gap:10px;width:100%;
  padding:9px 0;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  font-family:var(--display);font-size:13px;
}
.hlist:hover{background:var(--surface-2)}
.hlist b{font-size:13px;font-weight:600}

/* ---------------------------------------------------- Finger statt Maus
   Auf Touchgeräten und schmalen Fenstern werden alle Trefferflächen auf
   mindestens 44 Punkte gebracht. Am Schreibtisch mit Maus bleibt die
   kompaktere Darstellung, weil dort mehr Zeilen aufs Bild gehören. */
@media (pointer:coarse), (max-width:759px){
  .btn-sm{min-height:44px;padding:0 14px}
  .btn-icon{min-height:44px;width:44px}
  .fopt{min-height:44px;padding:4px 6px}
  .fopt input{width:20px;height:20px}
  .chip{min-height:44px;padding:10px 12px 10px 15px}
  .tristate button{min-height:44px}
  .step{min-width:112px;padding-top:9px}
  .skey{min-height:44px;padding:6px 13px}
  .hlist{padding:13px 0}
  table.tbl th,table.tbl td{padding:12px}
  .fgroup>summary{min-height:44px;align-items:center}
}

/* ====================================================================
   Kurzergebnis, Kontaktblock und Katalogschranke
   Beide Schranken — am Ende der Beratung und im Katalog — sehen bewusst
   gleich aus: derselbe Block, dieselbe Aufforderung.
   ==================================================================== */
.gate{
  background:var(--nacht);color:var(--nacht-ink);border-radius:16px;
  padding:34px 30px;margin-top:22px;max-width:640px;
}
.gate-ikon{
  width:46px;height:46px;border-radius:12px;background:rgba(69,211,148,.14);
  display:grid;place-items:center;margin-bottom:18px;
}
.gate-ikon svg{width:23px;height:23px;stroke:var(--leuchte);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gate h2{font-family:var(--body);font-size:1.42rem;font-weight:600;color:var(--nacht-ink);margin-bottom:10px}
.gate p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--nacht-soft);margin:0 0 20px}
.gate-feld{display:block;margin:0 0 12px}
.gate-feld>span{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--nacht-ink)}
.gate-feld .inp{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:var(--nacht-ink);
}
.gate-feld .inp::placeholder{color:var(--nacht-faint)}
.gate-feld .inp:focus{border-color:var(--leuchte);box-shadow:0 0 0 3px rgba(69,211,148,.18)}
.gate-fein{font-family:var(--display);font-size:12px;line-height:1.5;color:var(--nacht-faint);margin:0 0 18px}
.gate-fein a{color:var(--leuchte)}
.gate-knoepfe .btn{
  min-height:50px;padding:0 24px;font-size:14.5px;border-radius:9px;
  background:var(--leuchte);border-color:var(--leuchte);color:#04130B;font-weight:700;
}
.gate-knoepfe .btn:hover{background:#5CE0A6;border-color:#5CE0A6}
.gate-login{
  margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--display);font-size:12.5px;color:var(--nacht-faint);
}
.gate-login button{
  all:unset;cursor:pointer;color:var(--leuchte);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;
}
.gate-login button:hover{color:#5CE0A6}

/* Die letzten freien Produkte laufen weich aus, damit sichtbar ist, dass es
   weitergeht — ohne den Eindruck, es sei zu Ende. */
.grid-gated{position:relative}
.grid-gated:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:170px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--ground) 88%);
}
.gate-huelle{margin-top:-42px;position:relative;z-index:1;display:flex;justify-content:center}
.gate-huelle .gate{width:100%;max-width:620px;box-shadow:var(--shadow-2)}
.gate-huelle.wartet .gate{opacity:0;transform:translateY(26px)}
.gate-huelle.sichtbar .gate{
  opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
}

.kontakt-raster{display:grid;gap:18px;align-items:start;max-width:900px}
@media (min-width:820px){ .kontakt-raster{grid-template-columns:1.5fr 1fr} }
.kontakt-direkt a{font-weight:600;word-break:break-word}

/* ====================================================================
   Ladeschirm der Analyse
   ==================================================================== */
.analyse{
  background:var(--nacht);color:var(--nacht-ink);
  min-height:calc(100vh - var(--bar-h));display:grid;place-items:center;padding:48px 22px;
}
.analyse-karte{max-width:520px;width:100%;text-align:center}
.analyse-ring{display:flex;justify-content:center;gap:9px;margin-bottom:28px}
.analyse-ring i{
  width:10px;height:10px;border-radius:50%;background:var(--leuchte);
  animation:pulsen 1.25s ease-in-out infinite;
}
.analyse-ring i:nth-child(2){animation-delay:.18s}
.analyse-ring i:nth-child(3){animation-delay:.36s}
@keyframes pulsen{0%,100%{opacity:.25;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
.analyse-karte h1{
  font-family:var(--body);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.2rem);
  color:var(--nacht-ink);margin-bottom:12px;
}
.analyse-karte>p{font-family:var(--body);font-size:15.5px;line-height:1.6;color:var(--nacht-soft);margin:0 auto 28px;max-width:44ch}
.analyse-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:26px}
.analyse-bar i{display:block;height:100%;width:0;background:var(--leuchte);animation:balkenAuf 2.6s ease-out forwards}
@keyframes balkenAuf{from{width:0}to{width:100%}}
.analyse-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;text-align:left}
.analyse-schritte li{
  display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.45;color:var(--nacht-soft);
  /* Grundstellung sichtbar: mit fill-mode "backwards" faellt das Element nach
     der Animation hierhin zurueck — stuende hier opacity:0, waere es danach weg. */
  animation:satzAn .5s ease-out backwards;
}
.analyse-schritte li:before{
  content:"✓";flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;
  background:rgba(69,211,148,.18);color:var(--leuchte);
  font-family:var(--display);font-size:9.5px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}
@media (prefers-reduced-motion:reduce){ .analyse-bar i{width:100%} }

/* ====================================================================
   Ergebnis-Teaser
   ==================================================================== */
.erg-aug{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.erg-kopf h1{font-family:var(--body);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.6rem)}

.erg-m-liste{display:flex;flex-direction:column;gap:8px;max-width:660px;margin-bottom:26px}
.erg-m{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;
  background:var(--surface);border:1px solid var(--rule-soft);
}
.erg-m.aktiv{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.erg-m-n{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:13px;font-weight:700;
  background:var(--sunk);color:var(--ink-faint);
}
.erg-m.aktiv .erg-m-n{background:var(--accent);color:var(--accent-ink)}
.erg-m-txt{flex:1;min-width:0}
.erg-m-txt b{display:block;font-size:15px;font-weight:600}
.erg-m-txt em{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);margin-top:2px}
.erg-m-tag{
  flex:none;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:999px;
}

.erg-detail{
  max-width:660px;background:var(--surface);border:1px solid var(--rule-soft);
  border-radius:16px;box-shadow:var(--shadow-1);overflow:hidden;
}
.erg-detail-kopf{padding:26px 24px 22px;border-bottom:1px solid var(--rule-soft)}
.erg-detail-kopf h2{font-family:var(--body);font-weight:600;font-size:1.5rem;margin-bottom:4px}
.erg-wer{font-family:var(--body);font-size:15px;color:var(--ink-soft);margin:0}
.erg-band{
  margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--accent-soft);
}
.erg-band b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.erg-band span{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px}

.erg-liste{padding:22px 24px 0;position:relative}
.erg-liste-kopf{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
}
.erg-zeile{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.erg-menge{
  flex:none;font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  min-width:28px;padding-top:2px;
}
.erg-was b{display:block;font-size:15px;font-weight:600}
.erg-was em{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);margin-top:2px}

/* Der verdeckte Teil sieht aus wie das, was folgt — lesbar ist er nicht. */
.erg-verdeckt{
  filter:blur(5px);opacity:.62;user-select:none;pointer-events:none;
  padding-bottom:46px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 92%);
}
.erg-gate{margin-top:-30px}
.erg-gate .gate{max-width:660px}
@media (min-width:700px){ .erg-gate{justify-content:flex-start} }

/* ====================================================================
   Kategorie-Schnellwahl im Katalog
   ==================================================================== */
.katkette{
  display:flex;gap:8px;margin-bottom:16px;padding-bottom:4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
@media (min-width:900px){ .katkette{flex-wrap:wrap;overflow:visible} }
.katchip{
  flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:999px;
  padding:7px 14px 7px 9px;min-height:42px;font-size:13px;font-weight:600;color:var(--ink);
  transition:border-color .12s ease,background .12s ease;
}
.katchip:hover{border-color:var(--rule);background:var(--surface-2)}
.katchip svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.katchip em{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--ink-faint)}
.katchip.an{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.katchip.an svg{stroke:var(--accent-ink)}
.katchip.an em{color:var(--accent-ink);opacity:.75}

/* ====================================================================
   Hausgrafik mit Kontakten und schwenkender Kamera
   ==================================================================== */
.haus{
  display:grid;gap:26px;align-items:center;margin-top:40px;
  background:var(--nacht);border-radius:20px;padding:26px;
}
@media (min-width:880px){ .haus{grid-template-columns:1.15fr .85fr;gap:40px;padding:34px 38px} }
.haus-bild svg{width:100%;height:auto;display:block;overflow:visible}
.haus-boden{stroke:rgba(255,255,255,.16);stroke-width:1.5}
.haus-huelle{stroke:rgba(255,255,255,.42);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.haus-oeffnung{stroke:rgba(255,255,255,.24);stroke-width:1.5;fill:rgba(255,255,255,.05)}
.haus-punkt{fill:var(--leuchte);opacity:.2;animation:punktAn 4.4s ease-in-out infinite}
@keyframes punktAn{
  0%,10%{opacity:.18;r:4.5}
  18%,34%{opacity:1;r:5.6}
  46%,100%{opacity:.18;r:4.5}
}
.haus-kamera rect{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.haus-kamera circle{fill:var(--leuchte)}
.haus-kamera line{stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linecap:round}
.haus-kegel{
  transform-box:view-box;transform-origin:284px 112px;
  animation:schwenk 6.5s ease-in-out infinite alternate;
}
@keyframes schwenk{from{transform:rotate(-15deg)}to{transform:rotate(13deg)}}
@media (prefers-reduced-motion:reduce){
  .haus-punkt{opacity:1}
}
.haus-text h3{
  font-family:var(--body);font-weight:600;font-size:1.34rem;color:var(--nacht-ink);margin-bottom:10px;
}
.haus-text p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--nacht-soft);margin:0 0 20px}
.haus-text .btn{background:var(--leuchte);border-color:var(--leuchte);color:#04130B;font-weight:700;min-height:48px;padding:0 22px}
.haus-text .btn:hover{background:#5CE0A6;border-color:#5CE0A6}

/* ====================================================================
   Auf dem Handy rueckt die Kontaktschranke naeher an das Ergebnis
   ==================================================================== */
@media (max-width:640px){
  .erg-m{padding:12px 14px}
  .erg-m-txt b{font-size:14.5px}
  .erg-detail-kopf{padding:20px 18px 18px}
  .erg-band{margin-top:14px;padding:12px 14px}
  .erg-liste{padding:18px 18px 0}
  .erg-zeile{padding:9px 0}
  /* Der verdeckte Teil muss nur andeuten, dass es weitergeht — auf kleinen
     Schirmen reicht dafuer ein Streifen statt fuenf Zeilen. */
  /* Auf dem Handy zaehlt jeder Pixel bis zum Kontaktblock: eine sichtbare
     Zeile weniger, und der verdeckte Teil ist nur noch ein Streifen. */
  .erg-zeile-extra{display:none}
  .erg-verdeckt{max-height:108px;overflow:hidden;padding-bottom:14px}
  .erg-gate{margin-top:-22px}
  .gate{padding:26px 22px}
  .gate h2{font-size:1.28rem}
}