:root{
  /* ==================================================================
     Designsystem "ImmoBricks" v1.1 — Tannengrün + Bronze, Space Grotesk/Inter.
     Signature-Element „Brick" (2:1, Radius 2px). Neutrale Kalkflächen tragen den
     Inhalt, Grün ist bedeutungstragend (Aktion/positiv), Bronze sparsamer Zweitakzent.
     Die bekannten semantischen Namen (--bg/--surface/--ink/--accent/--radius …) bleiben
     erhalten und sind auf ImmoBricks-Werte umgemappt → bestehende Regeln brechen nicht.
     ================================================================== */
  /* --- ImmoBricks-Skalen (rohe Marken-Töne) --- */
  --forest-900:#14261F;  /* Sidebar / Dark */
  --forest-800:#183A2C;  /* Feature-Karten */
  --green-700:#1C5A40;   /* Primär-Button */
  --green-600:#2A7A57;   /* Akzent / Avatar */
  --green-500:#2C7A55;   /* positive Werte */
  --bronze-500:#CBA76A;  /* Zweitakzent */
  --bronze-600:#B98A46;  /* Workspace-Avatar */
  --bronze-100:#EADFC7;  /* Füllung auf Grün */
  --bronze-ink:#18211D;  /* fixer (nicht Dark-Mode-invertierter) Text auf Bronze-Flächen – Kontrast bleibt in beiden Themes gleich gut */
  --slate-700:#4A554E; --slate-600:#5A655E; --slate-400:#8A968E; --slate-300:#A7B0AA;
  --canvas:#EEF0ED;      /* Seitenhintergrund */
  --surface-2:#F4F6F3;   /* ruhige Zweitfläche (Sub-Panels, Tabellenkopf-Tint) */
  --field-line:#E0E4DF;  /* Formular-Rahmen */
  --anl-stack-1:#E1E6DF; /* Wohnanlage-Stapel: 1. Ebene dahinter */
  --anl-stack-2:#C9D0C5; /* Wohnanlage-Stapel: 2. Ebene, dunkler */

  /* --- Semantische Aliase (bestehende Namen, ImmoBricks-Werte) --- */
  --bg:#EEF0ED;          /* Canvas – ruhiger Seitenhintergrund */
  --surface:#FFFFFF;     /* Karten – reinweiß */
  --ink:#18211D;         /* Tiefes Tannen-Ink (Überschriften/Text) */
  --ink-soft:#5A655E;    /* gedämpfter Slate (Fließtext/Meta) */
  --line:#E4E8E3;        /* Rahmen/Trenner */
  /* Panels separat themebar: Default = wie Seite. Für dunkle Themes mit HELLEN
     Panels einfach diese 5 überschreiben – Panel-Inhalt folgt automatisch. */
  --panel-bg:var(--surface);
  --panel-bg-soft:var(--bg);
  --panel-ink:var(--ink);
  --panel-ink-soft:var(--ink-soft);
  --panel-line:var(--line);
  --accent:#1C5A40;      /* Tannengrün – primäre Aktion */
  --accent-dark:#164A34; /* Hover/aktiv */
  --accent-soft:#E4EFE7; /* helle Grünfüllung (Chips/Hint) */
  --accent-ink:#FFFFFF;  /* Text auf Grün-Flächen (Buttons) */
  --gold:#CBA76A;        /* Bronze */
  --green:#2C7A55;       /* positive Werte / Success */
  --green-soft:#E4EFE7;
  --red:#C2483A;         /* Danger */
  --info:#3F6B8A;
  --hint-bg:#EEF2EC;     /* Hinweis-Boxen (ruhige Grün-Kalk-Fläche) */
  --verdict-bg:#14261F;  /* Fazit-Fläche – Forest 900 */
  --verdict-ink:#FFFFFF;
  --verdict-ink-soft:#B7C3BB;   /* gedämpftes Hell auf Dunkelgrün */
  --verdict-line:rgba(255,255,255,.14);

  /* --- Radius-Skala (wächst mit der Fläche) --- */
  --r-xs:5px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px; --r-pill:99px;
  --brick-radius:2px;    /* Signature-Element „Brick" */
  --radius:14px;         /* Default (lg) – ersetzt altes 18px */

  /* --- Elevation: sehr flach, Tiefe über Rahmen+Fläche --- */
  --shadow-raised:0 1px 2px rgba(20,38,31,.05), 0 1px 3px rgba(20,38,31,.05);
  --shadow-overlay:0 8px 24px -6px rgba(20,38,31,.12);
  --shadow-modal:0 20px 48px -12px rgba(20,38,31,.22);
  --shadow:var(--shadow-overlay);
  --shadow-sm:var(--shadow-raised);

  /* --- Motion (funktional, kurz; respektiert reduced-motion) --- */
  /* --dur-fast/--dur-base/--dur-enter/--ease-out: siehe Motion-:root weiter unten (globaler Override) */
  --dur-drawer:300ms;
  --stagger:60ms;
  --ease-in:cubic-bezier(.4,0,.9,.4);

  /* --- Schriften: Space Grotesk (Display/Headings/Zahlen), Inter (Body/UI) --- */
  --font-head:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-num:'Space Grotesk','Inter',system-ui,sans-serif; /* Zahlen: tnum-fähig */
}
*{box-sizing:border-box;margin:0;padding:0}
/* Panel-Kontext: Karten biegen die Kontext-Variablen auf die Panel-Werte um, damit
   aller Inhalt (Text, gedämpfter Text, Inputs, Rahmen, verschachtelte Flächen) der
   Panel-Farbgebung folgt – ermöglicht z. B. dunklen Seitenhintergrund + helle Panels. */
.wiz-body,.calc-card,.modal-card,.lead-card,.eval-card,.eval-empty,
.kpi-group,.chart-card,.table-card,.etf-card,.investor-card,
.cashflow-card,.details-card,.feature-card,.plan{
  --surface:var(--panel-bg);
  --bg:var(--panel-bg-soft);
  --ink:var(--panel-ink);
  --ink-soft:var(--panel-ink-soft);
  --line:var(--panel-line);
  background:var(--panel-bg);
  color:var(--ink);
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.hidden{display:none!important}
em{font-style:normal;color:var(--accent)}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.12;color:var(--ink)}
a{color:var(--accent-dark)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font:inherit;font-weight:700;border:none;border-radius:13px;
  padding:.8em 1.6em;cursor:pointer;transition:.18s;text-decoration:none;
}
.btn-lg{padding:1em 2.1em;font-size:1.05rem}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px rgba(28,90,64,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(28,90,64,.38)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark)}
.btn-nudge{border-color:var(--accent);color:var(--accent-dark);font-weight:600}
.btn-bronze{background:var(--bronze-500);color:var(--bronze-ink);box-shadow:0 6px 16px rgba(185,138,70,.28)}
.btn-bronze:hover:not(:disabled){background:var(--bronze-600);box-shadow:0 10px 22px rgba(185,138,70,.35)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(253,250,241,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--font-body);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.brand-accent{color:inherit}
.brand-icon{width:1.55em;height:1.55em;flex:none;margin-right:.45em;border-radius:.34em}
.nav-link{font-weight:600;text-decoration:none;font-size:.95rem}

/* Hero */
.hero{text-align:center;padding:72px 24px 40px}
.badge{display:inline-block;background:var(--green-soft);color:var(--green);font-weight:600;font-size:.85rem;padding:.45em 1em;border-radius:999px;margin-bottom:26px}
.hero-title{font-size:clamp(2.3rem,5.5vw,4rem);letter-spacing:-.02em;margin-bottom:20px}
.hero-sub{max-width:620px;margin:0 auto 32px;font-size:1.15rem;color:var(--ink-soft)}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:30px;color:var(--ink-soft);font-size:.92rem}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:30px 24px 20px}
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.fc-icon{font-size:1.8rem;margin-bottom:12px}
.feature-card h3{font-size:1.2rem;margin-bottom:8px}
.feature-card p{color:var(--ink-soft);font-size:.96rem}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:36px 24px 80px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);position:relative}
.plan-pro{background:linear-gradient(160deg,var(--surface),var(--hint-bg));border-color:var(--accent-soft)}
.pro-tag{position:absolute;top:22px;right:22px;background:var(--gold);color:#fff;font-size:.78rem;font-weight:600;padding:.3em .8em;border-radius:999px}
.plan h3{font-size:1.5rem}
.plan-price{font-size:1.05rem;color:var(--accent-dark);font-weight:600;margin:.2em 0 18px}
.plan ul{list-style:none;margin-bottom:24px}
.plan li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}

/* Wizard */
.wizard{min-height:100vh;padding:48px 0 90px}
.wiz-head{margin-bottom:30px}
.wiz-progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.wiz-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .4s}
.wiz-step-label{margin-top:10px;font-size:.88rem;color:var(--ink-soft);font-weight:500}
.wiz-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);min-height:340px}
.wiz-title{font-size:1.7rem;margin-bottom:8px}
.wiz-title:focus{outline:none}
.wiz-intro{color:var(--ink-soft);margin-bottom:28px;max-width:640px}
.wiz-nav{display:flex;justify-content:space-between;margin-top:26px}

/* Fields */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field>span{font-weight:600;font-size:.95rem}
.field input,.field select{
  font:inherit;padding:.75em .9em;border:1.5px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);transition:.15s;width:100%;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--surface)}
/* Aus dem Objekt vorbelegte Felder im Wizard sanft hervorheben (Markierung klärt sich beim Bearbeiten) */
.prefill-badge{display:inline-block;margin-left:8px;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--green);border-radius:999px;padding:.15em .55em;vertical-align:middle;white-space:nowrap}
.pf-field:not(.checkbox-field) input,.pf-field:not(.checkbox-field) select{background:var(--green-soft);border-color:var(--green)}
.pf-field:not(.checkbox-field) input:focus,.pf-field:not(.checkbox-field) select:focus{background:var(--surface)}
.input-suffix{position:relative}
.input-suffix input{padding-right:2.6em}
.input-suffix .suffix{position:absolute;right:.9em;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:.9rem;pointer-events:none}
.field-hint{font-size:.85rem;color:var(--ink-soft);background:var(--hint-bg);border-left:3px solid var(--gold);border-radius:8px;padding:9px 12px;margin-top:2px}
/* ===== Miet-Aufschlüsselung (Makler-/Pro-Modus) ===== */
.mietsplit{grid-column:1/-1;display:block;--ms-amt:150px;--ms-del:42px}
.ms-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ms-head-title{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark)}
.ms-head-sub{font-size:.82rem;color:var(--ink-soft)}
.ms-colhead{display:grid;grid-template-columns:1fr var(--ms-amt) var(--ms-del);gap:12px;margin-top:14px;padding:0 4px}
.ms-colhead span{font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.ms-colhead span:nth-child(2){text-align:right;padding-right:8px}
.ms-rows{display:flex;flex-direction:column;gap:9px;margin-top:7px}
#mietPosList{display:flex;flex-direction:column;gap:9px}
.ms-row{display:grid;grid-template-columns:1fr var(--ms-amt) var(--ms-del);gap:12px;align-items:center;animation:msRowIn .26s ease both}
@keyframes msRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ms-row{animation:none}}
/* Name-Feld mit Icon links */
.ms-name{position:relative;display:flex;align-items:center;height:50px}
.ms-ico{position:absolute;left:14px;display:flex;color:var(--ink-soft);pointer-events:none}
.mietsplit .ms-namein{width:100%;height:50px;font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:0 14px 0 46px}
.mietsplit .ms-namein:focus{outline:none;border-color:var(--accent);background:var(--surface)}
/* Basis-Zeile „Miete Wohnung" als ruhige Pille */
.ms-base .ms-name{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:0 15px;gap:11px}
.ms-base .ms-ico{position:static;width:30px;height:30px;flex:none;border-radius:9px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center}
.ms-base-label{font-size:1rem;font-weight:600;color:var(--ink)}
.ms-lock{width:var(--ms-del);height:40px;display:flex;align-items:center;justify-content:center;color:var(--line)}
/* Betrag rechtsbündig + € */
.mietsplit .ms-amount input{height:50px;text-align:right;font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:0 32px 0 14px;width:100%;font-variant-numeric:tabular-nums}
.mietsplit .ms-amount input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.ms-amount .suffix{color:var(--ink-soft)}
/* Entfernen-Button */
.ms-del{width:var(--ms-del);height:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.ms-del:hover{background:rgba(201,84,60,.12);border-color:var(--red);color:var(--red)}
.ms-del:active{transform:scale(.9)}
/* Hinzufügen-Chips */
.ms-add{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.ms-add-label{font-size:.85rem;color:var(--ink-soft);margin-right:2px}
.ms-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:.15s}
.ms-chip:hover{background:var(--accent-soft);border-color:var(--accent)}
.ms-chip:active{transform:scale(.94)}
.ms-chip-ic{display:flex;color:var(--accent-dark)}
.ms-chip-plus{font-size:1rem;line-height:1;color:var(--accent-dark);font-weight:700}
/* Summe */
.ms-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:15px 20px;background:var(--hint-bg);border:1px solid var(--accent-soft);border-radius:14px}
.ms-total-l{font-size:1rem;font-weight:600;color:var(--accent-dark)}
.ms-count{font-size:.82rem;font-weight:400;color:var(--ink-soft);margin-left:4px}
.ms-total-v{font-size:1.4rem;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.ms-total-v span{font-size:.95rem;font-weight:500;color:var(--ink-soft)}
@media(max-width:560px){.mietsplit{--ms-amt:110px;--ms-del:38px}.ms-total-v{font-size:1.15rem}}
.link-btn{background:none;border:none;color:var(--accent-dark);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0;font-size:.88rem;align-self:flex-start}
/* Gesperrte (automatisch berechnete) Felder klar als nicht editierbar kennzeichnen */
.readonly input{background-image:linear-gradient(0deg,rgba(120,110,90,.12),rgba(120,110,90,.12));color:var(--ink-soft);cursor:not-allowed;border-style:dashed}
.readonly .suffix{opacity:.55}
.readonly>span em{color:var(--ink-soft)}
.field.disabled{opacity:.5}
.field.disabled input{cursor:not-allowed}
.checkbox-field{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;background:var(--accent-soft);padding:14px 16px;border-radius:12px;cursor:pointer}
.checkbox-field input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;margin:0}
.checkbox-field>span{font-weight:600}
.checkbox-field .field-hint{flex-basis:100%}

/* Mini-Rechner Grenzsteuer */
.sanpro{margin-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.subcalc{grid-column:1/-1;background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:18px;margin-top:6px}
.subcalc .field-grid{gap:14px}
.subcalc-result{margin-top:12px;font-weight:600;color:var(--green)}

/* Calculating */
.calculating{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.calc-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:48px;max-width:520px;width:100%;text-align:center}
.calc-card h2{font-size:1.6rem;margin-bottom:26px}
.calc-bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:26px}
.calc-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .25s linear}
.calc-steps{list-style:none;text-align:left;display:flex;flex-direction:column;gap:12px}
.calc-steps li{display:flex;align-items:center;gap:12px;color:var(--ink-soft);opacity:.4;transition:.3s}
.calc-steps li.active{opacity:1;color:var(--ink)}
.calc-steps li .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.calc-steps li.active .tick{background:var(--green);border-color:var(--green);color:#fff}

/* Gate */
.gate{min-height:100vh;padding:60px 0}
.gate-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.gate-preview{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-height:560px}
.pdf-mock{background:#fff;padding:36px;font-size:.8rem}
.pdf-fade{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.97))}
.gate-form h2{font-size:1.9rem;margin-bottom:12px}
.gate-form p{color:var(--ink-soft);margin-bottom:24px}
.checkbox{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);margin:18px 0}
.checkbox input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.gate-hint{font-size:.82rem;color:var(--ink-soft);margin-top:12px}

/* PDF mock content */
.pdf-mock h4{font-family:var(--font-head);font-size:1.3rem;margin-bottom:4px}
.pdf-mock .pdf-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #EFE6D2}
.pdf-mock .pdf-kpi{display:flex;justify-content:space-between;background:var(--accent-soft);padding:10px 12px;border-radius:8px;margin:4px 0;font-weight:600}

/* §7b-Check */
.afa-check{border-radius:12px;padding:14px 16px;font-size:.92rem;line-height:1.5;margin-top:6px}
.afa-check:empty{display:none}
.afa-check strong{display:block;margin-bottom:3px;font-size:.98rem}
.afa-check.pos{background:var(--green-soft);color:#34603C;border:1px solid #C2DCC6}
.afa-check.neg{background:#FBE8E3;color:#9c4530;border:1px solid #eccabf}
.afa-check.info{background:var(--hint-bg);color:var(--ink-soft);border:1px solid var(--line);border-left:3px solid var(--gold)}
/* Tilgung/Wunschrate-Umschalter */
.rate-toggle-wrap{display:flex;flex-direction:column;gap:8px}
.rate-toggle-label{font-weight:600;font-size:.92rem}
.rate-toggle{align-self:flex-start}
.rate-toggle .seg{padding:.5em 1.2em}
/* Objektart-Auswahl als illustrierte Kacheln */
.tiles-label{font-weight:600;font-size:.95rem;display:block;margin-bottom:10px}
.objektart-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.objektart-tiles[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.ot-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:16px 14px 15px;
  cursor:pointer;position:relative;font:inherit;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
.ot-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.ot-card.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow)}
.ot-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ot-card.active::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.ot-ill{display:block;width:100%;line-height:0}
.ot-ill svg{width:118px;max-width:100%;height:auto}
.ot-text{display:flex;flex-direction:column;gap:3px}
.ot-name{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.2}
.ot-desc{font-size:.8rem;color:var(--ink-soft);line-height:1.35}
@media(max-width:560px){
  .objektart-tiles,.objektart-tiles[data-cols="2"]{grid-template-columns:1fr;gap:10px}
  .ot-card{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:12px 14px;border-radius:14px}
  .ot-ill{width:auto;flex:none}
  .ot-ill svg{width:72px}
  .ot-name{font-size:1rem}
}
.rate-info{border-radius:12px;padding:13px 16px;font-size:.9rem;line-height:1.5;margin-top:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)}
.rate-info:empty{display:none}
.rate-info b{color:var(--ink)}
.rate-info.pos{background:var(--green-soft);border-color:#C2DCC6;color:#34603C}
.rate-info.pos b{color:#29512F}
.rate-info.neg{background:#FBE8E3;border-color:#eccabf;color:#9c4530}
.rate-info.neg b{color:#7d3322}
/* Pflichtfeld / Fehler */
.field.required>span::after{content:" *";color:var(--accent)}
.field input.invalid{border-color:var(--red);background:#FBE8E3}
.wiz-error{color:var(--red);font-weight:600;font-size:.9rem;margin-top:16px}
/* Modal */
.modal{position:fixed;inset:0;z-index:200;background:rgba(58,50,43,.45);display:flex;align-items:center;justify-content:center;padding:24px}
.modal-card{position:relative;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);max-width:480px;width:100%;padding:32px}
.modal-card h3{font-size:1.4rem;margin-bottom:12px;padding-right:28px}
.modal-card>div p{color:var(--ink-soft);margin-bottom:14px}
.pauschal-list{list-style:none;margin-bottom:6px}
.pauschal-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.pauschal-list li b{color:var(--ink)}
.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-close:hover{color:var(--accent-dark);background:var(--accent-soft)}

/* Header-Auth */
.nav-right{display:flex;align-items:center;gap:18px}
.nav-cta{padding:.55em 1.3em;font-size:.92rem}
.brand{cursor:pointer}
.nav-auth .nav-link{background:none;border:none;font:inherit;font-weight:600;color:var(--accent-dark);cursor:pointer}
.nav-profile{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft)!important;color:var(--accent-dark)!important;padding:.45em .9em!important;border-radius:999px}
.nav-profile:hover{background:#F4E3BD!important}
.nav-avatar{font-size:.95rem}
.nav-email{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.btn-icon{font-size:.95em}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#a8482f;transform:translateY(-1px)}

/* Auth-Modal */
.auth-card{position:relative;max-width:430px}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:18px}
.auth-tab{flex:1;border:none;background:none;font:inherit;font-weight:600;color:var(--ink-soft);padding:.55em 1em;border-radius:999px;cursor:pointer;transition:.15s}
.auth-tab.active{background:var(--accent);color:#fff}
.auth-lead{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
#authForm{display:flex;flex-direction:column;gap:14px}
#authForm .btn{margin-top:4px}
.auth-error{color:var(--red);font-weight:600;font-size:.9rem}
.auth-demo{margin-top:18px;font-size:.8rem;line-height:1.5;color:var(--ink-soft);background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px 14px}

/* Toast */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);z-index:300;background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;padding:14px 22px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;max-width:90vw}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.pos{background:var(--green)}
.toast.neg{background:var(--red)}

/* Profil */
.profile{padding:40px 0 80px}
.profile-email{color:var(--ink-soft);font-size:.95rem;margin-top:4px}
.eval-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-bottom:34px}
.eval-empty{color:var(--ink-soft);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:26px;grid-column:1/-1}
.eval-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.eval-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.eval-main{padding:20px 22px;cursor:pointer;flex:1}
.eval-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.eval-head h3{font-size:1.2rem;line-height:1.3}
.eval-date{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.eval-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.eval-kpi{display:flex;flex-direction:column}
.ek-val{font-family:var(--font-body);font-size:1.15rem;font-weight:600;color:var(--accent-dark)}
.ek-lbl{font-size:.78rem;color:var(--ink-soft)}
.eval-open-hint{display:inline-block;margin-top:14px;font-size:.85rem;font-weight:600;color:var(--accent-dark)}
.eval-actions{display:flex;gap:16px;padding:12px 22px;border-top:1px solid var(--line);background:var(--bg)}
.link-btn.danger{color:var(--red)}
.account-card .account-body{padding:4px 28px 28px}
.account-body h4{font-size:1.05rem;margin-bottom:14px}
.account-form{display:flex;flex-direction:column;gap:12px;max-width:420px}
.account-form .btn{align-self:flex-start;margin-top:4px}
.account-sep{border:none;border-top:1px solid var(--line);margin:26px 0 20px}
.account-warn{color:var(--ink-soft);font-size:.9rem;margin-bottom:14px;max-width:520px}

/* Lead-Gate (Blur-Overlay auf der Ergebnisseite) */
#gatedWrap{position:relative}
/* Gate: oben scharf lesbar, weicher Übergang in die Unschärfe, darunter das Formular.
   Die Unschärfe liegt als eigene backdrop-filter-Ebene über dem (scharfen) Inhalt und
   wird per Masken-Verlauf von oben (transparent = scharf) nach unten (deckend = unscharf) eingeblendet. */
#gatedZone.locked{pointer-events:none;user-select:none;max-height:900px;overflow:hidden}
.gate-blur{position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 230px,#000 360px);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 230px,#000 360px)}
.gate-blur.hidden{display:none}
.lead-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;justify-content:center;padding:300px 16px 36px;
  background:linear-gradient(to bottom,transparent 0,transparent 240px,rgba(253,250,241,.5) 360px,var(--bg) 500px)}
@media (max-width:560px){
  .gate-blur{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 150px,#000 260px);mask-image:linear-gradient(to bottom,transparent 0,transparent 150px,#000 260px)}
  .lead-overlay{padding-top:210px;background:linear-gradient(to bottom,transparent 0,transparent 160px,rgba(253,250,241,.5) 270px,var(--bg) 400px)}
}
.lead-overlay.hidden{display:none}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:480px;width:100%;padding:30px;position:sticky;top:32px}
.lead-card h3{font-size:1.5rem;margin-bottom:4px}
.lead-sub{color:var(--ink-soft);margin-bottom:16px}
.lead-benefits{list-style:none;margin:0 0 20px;display:flex;flex-direction:column;gap:11px}
.lead-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;line-height:1.45}
.lead-benefits li span{flex-shrink:0}
#leadForm{display:flex;flex-direction:column;gap:13px}
.lead-hint{font-size:.85rem;color:var(--ink-soft);text-align:center;margin-top:2px}
.lead-hint .link-btn{font-size:.85rem}

/* Szenario-Banner */
.scenario-banner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;background:linear-gradient(160deg,var(--surface),var(--hint-bg));border:1px solid var(--accent-soft);border-radius:var(--radius);padding:18px 24px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.scenario-banner-label strong{display:block;font-family:var(--font-head);font-size:1.15rem}
.scenario-banner-label span{font-size:.88rem;color:var(--ink-soft)}
/* Kundenseitige Miet-Anpassung (view/clientarea) – optisch an .scenario-banner angelehnt */
.rent-controls{background:linear-gradient(160deg,var(--surface),var(--hint-bg));border:1px solid var(--accent-soft);border-radius:var(--radius);padding:18px 24px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.rc-head strong{display:block;font-family:var(--font-head);font-size:1.15rem}
.rc-head span{font-size:.88rem;color:var(--ink-soft)}
.rc-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:16px}
@media(max-width:640px){.rc-fields{grid-template-columns:1fr}}
.rc-field{display:flex;flex-direction:column;gap:8px}
.rc-field-lbl{font-size:.9rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rc-field-lbl b{font-family:var(--font-num,var(--font-body));color:var(--accent-dark);font-variant-numeric:tabular-nums}
.rc-inrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rc-inwrap{position:relative;display:inline-flex;align-items:center}
.rc-inwrap input{width:110px;font:inherit;font-weight:600;padding:.55em 2.6em .55em .7em;border:1.5px solid var(--field-line,var(--line));border-radius:10px;background:var(--surface);color:var(--ink);text-align:right}
.rc-inwrap input:focus{outline:none;border-color:var(--accent)}
.rc-inwrap .rc-unit{position:absolute;right:.7em;font-size:.85rem;color:var(--ink-soft);pointer-events:none}
.rc-derived{font-size:.95rem;color:var(--ink-soft)}
.rc-derived b{font-family:var(--font-num,var(--font-body));color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--accent-soft);outline:none;margin:6px 0}
.rc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.rc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.rc-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-soft)}
/* Results */
.results{padding:50px 0 90px}
.results-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.results-head h2{font-size:2rem}
.results-actions{display:flex;gap:10px}
#kpiSections{column-count:2;column-gap:20px;margin-bottom:6px}
.kpi-group{break-inside:avoid;display:inline-block;width:100%;margin:0 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.kpi-rows{display:flex;flex-direction:column}
.kpi-row:last-child{border-bottom:none;padding-bottom:0}
.kpi-row-label{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.kpi-row-val{font-family:var(--font-body);font-size:1.2rem;font-weight:600;white-space:nowrap}
.kpi-row.pos .kpi-row-val{color:var(--green)}
.kpi-row.neg .kpi-row-val{color:var(--red)}
/* ===== Objekt- & Finanzierungs-Übersicht (Eckdaten unter dem Fazit) ===== */
/* Zwei Karten */
.ovw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 34px;align-items:start}
.ovw-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:22px 24px}
.ovw-card-head{display:flex;align-items:center;gap:11px;padding-bottom:15px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ovw-card-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center}
.ovw-card-title{font-family:var(--font-head);font-size:1.15rem;font-weight:600;color:var(--ink);margin:0}
.ovw-rows{margin:0;padding:0}
.ovw-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.ovw-rows .ovw-row:last-child{border-bottom:none}
.ovw-row dt{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.ovw-row dd{margin:0;font-size:.95rem;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ovw-row-plain{border-bottom:1px solid var(--line)}
.ovw-row-last{border-bottom:none;padding-bottom:0}
.ovw-per{font-size:.78rem;font-weight:500;color:var(--ink-soft)}
/* Summen-Bänder */
.ovw-band{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:12px 16px;background:var(--bg);border:1px solid var(--line);border-radius:11px}
.ovw-band>span{font-size:.9rem;font-weight:700;color:var(--ink)}
.ovw-band>b{font-family:var(--font-num);font-size:1.1rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ovw-band-accent{background:var(--accent-soft);border-color:rgba(28,90,64,.32)}
.ovw-band-accent>span,.ovw-band-accent>b{color:var(--accent-dark)}
/* Flächen-Kacheln */
.ovw-areas{display:flex;gap:10px;margin-top:14px}
.ovw-area{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.ovw-area-l{font-size:.78rem;color:var(--ink-soft)}
.ovw-area-v{font-family:var(--font-num);font-size:1.05rem;font-weight:700;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
/* Untergruppen (Mieteinnahmen / Konditionen) */
.ovw-subhead{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 8px}
.ovw-extras{border-left:2px solid var(--line);margin-left:3px;padding-left:14px}
.ovw-extra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.ovw-extra-l{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft)}
.ovw-extra-ic{width:24px;height:24px;flex:none;border-radius:7px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center}
.ovw-extra-v{font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Darlehen-Box mit Aufteilungs-Balken */
.ovw-loan{margin-top:14px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:13px}
.ovw-loan-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ovw-loan-top>span{font-size:.9rem;font-weight:700;color:var(--ink)}
.ovw-loan-top>b{font-family:var(--font-num);font-size:1.25rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ovw-bar{display:flex;height:11px;border-radius:99px;overflow:hidden;margin-top:13px;background:var(--line)}
.ovw-bar-a{background:var(--accent-dark)}
.ovw-bar-b{background:var(--accent)}
.ovw-legend{display:flex;gap:18px;margin-top:12px}
.ovw-leg{flex:1;min-width:0}
.ovw-dot{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:middle;margin-right:7px}
.ovw-dot-a{background:var(--accent-dark)}
.ovw-dot-b{background:var(--accent)}
.ovw-leg-l{font-size:.82rem;color:var(--ink-soft)}
.ovw-leg-v{font-size:.92rem;font-weight:700;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.ovw-leg-pct{font-size:.78rem;font-weight:500;color:var(--ink-soft)}
/* Konditionen-Vergleich */
.ovw-cond{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ovw-cond-1{grid-template-columns:1fr}
.ovw-cond-col{background:var(--surface);padding:13px 15px}
.ovw-cond-h{font-size:.78rem;font-weight:700;margin-bottom:8px}
.ovw-cond-h-a{color:var(--accent-dark)}
.ovw-cond-h-b{color:var(--ink-soft)}
.ovw-cond-r{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.ovw-cond-r span{font-size:.85rem;color:var(--ink-soft)}
.ovw-cond-r b{font-size:.9rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ovw-cond-note{font-size:.74rem;color:var(--accent-dark);margin-top:7px;font-weight:600}
.ovw-note{font-size:.8rem;color:var(--ink-soft);margin-top:10px;line-height:1.4}
/* Monatliche Rate – Hervorhebung */
.ovw-rate{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 18px;background:var(--accent-soft);border:1px solid rgba(28,90,64,.32);border-radius:13px}
.ovw-rate-l{font-size:.92rem;font-weight:700;color:var(--accent-dark)}
.ovw-rate-s{font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.ovw-rate-v{font-family:var(--font-num);font-weight:700;font-size:1.5rem;color:var(--accent-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.ovw-rate-v .ovw-per{font-size:.8rem;color:var(--accent-dark);opacity:.8}
/* Zwei-Phasen-Rate (tilgungsfreie KfW-Jahre): niedrige Rate jetzt, höhere danach */
.ovw-rate-2{flex-direction:column;align-items:stretch;gap:0}
.ovw-rate-phase{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ovw-rate-phase-next{margin-top:10px;padding-top:10px;border-top:1px solid rgba(28,90,64,.28)}
.ovw-rate-v-next{font-size:1.2rem;opacity:.9}
@media(max-width:680px){
  .ovw-grid{grid-template-columns:1fr;gap:16px}
  .ovw-card{padding:20px 18px}
}
.kpi-badge{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:.2em .6em;border-radius:999px;margin-left:8px;vertical-align:middle}
.kpi-badge.pos{background:var(--green);color:#fff}
.kpi-badge.neg{background:var(--red);color:#fff}
/* Hinweis-Karten */
#resultHints{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.hint-card{display:flex;gap:14px;align-items:flex-start;border-radius:14px;padding:16px 18px;border:1px solid var(--line)}
.hint-card .hint-icon{font-size:1.1rem;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}
.hint-card strong{display:block;margin-bottom:3px}
.hint-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.hint-card.pos{background:var(--green-soft);border-color:#C2DCC6}
.hint-card.pos .hint-icon{background:var(--green);color:#fff}
.hint-card.neg{background:#FBE8E3;border-color:#eccabf}
.hint-card.neg .hint-icon{background:var(--red);color:#fff}
.hint-card.info{background:var(--hint-bg);border-color:var(--line)}
.hint-card.info .hint-icon{background:var(--gold);color:#fff}
.chart-card,.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.chart-card h3,.table-card h3{font-size:1.3rem;margin-bottom:18px}
.chart-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.chart-head h3{margin:0}
.segmented{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.segmented .seg{display:flex;flex-direction:column;align-items:center;border:none;background:none;font:inherit;font-weight:600;color:var(--ink-soft);padding:.45em 1.1em;border-radius:999px;cursor:pointer;transition:.15s;line-height:1.1}
.segmented .seg small{font-weight:500;font-size:.7rem;opacity:.8}
.segmented .seg.active{background:var(--accent);color:#fff}
/* ETF */
.etf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.etf-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:6px}
.etf-head h3{font-size:1.3rem;margin:0}
.etf-rate{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.etf-rate .input-suffix input{width:120px;padding:.5em .9em;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.etf-desc{color:var(--ink-soft);margin-bottom:18px;font-size:.95rem}
.etf-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.etf-card .etf-card{padding:0}
.etf-compare .etf-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:none;margin:0}
.etf-year{font-weight:600;margin-bottom:10px}
.etf-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--ink-soft);font-size:.95rem}
.etf-line b{color:var(--ink);white-space:nowrap}
.etf-diff{margin-top:10px;font-weight:600;font-size:.95rem}
.etf-diff.pos{color:var(--green)}
.etf-diff.neg{color:var(--red)}
.liability{background:var(--hint-bg);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:.85rem;color:var(--ink-soft);line-height:1.6}
.liability strong{color:var(--ink)}

/* Section titles */
.section-title{font-size:1.5rem;margin:38px 0 6px}
.section-intro{color:var(--ink-soft);margin-bottom:18px;font-size:.95rem}

/* Verdict-Hero */
.verdict-card{background:var(--verdict-bg);background:linear-gradient(150deg,var(--verdict-bg),color-mix(in srgb,var(--verdict-bg) 80%,#fff));color:var(--verdict-ink);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow);margin-bottom:10px}
.verdict-lead{font-size:1.15rem;line-height:1.5;margin-bottom:22px;color:var(--verdict-ink-soft)}
.verdict-lead strong{color:var(--verdict-ink)}
/* Fazit-Texte kommen aus der geteilten Quelle (calc.js) und nutzen <b> zur Hervorhebung. */
.verdict-card b{color:var(--verdict-ink);font-weight:600}
.verdict-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:18px}
.vn{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--verdict-line);padding-left:16px}
.vn-val{font-family:var(--font-body);font-size:1.7rem;font-weight:600}
.vn-lbl{font-size:.82rem;color:var(--verdict-ink-soft)}
.verdict-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--verdict-line);font-size:.9rem;line-height:1.55;color:var(--verdict-ink-soft)}
.verdict-note strong{color:var(--verdict-ink)}
.verdict-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.verdict-head-lbl{font-size:.9rem;font-weight:600;color:var(--verdict-ink-soft)}
.verdict-card .segmented{background:rgba(255,255,255,.08);border-color:var(--verdict-line)}
.verdict-card .segmented .seg{color:var(--verdict-ink-soft)}
.verdict-card .segmented .seg.active{background:var(--verdict-ink);color:var(--verdict-bg)}
.verdict-cashflow{margin-top:18px;font-size:.95rem;line-height:1.55;color:var(--verdict-ink-soft)}
.verdict-cashflow strong{color:var(--verdict-ink)}

/* Investor overview */
.investor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.investor-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0}
.ic-label{font-weight:600;margin:4px 0 8px}
.ic-desc{font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.tip.tip-warn{background:var(--gold);color:#fff;font-style:normal;font-size:.78rem}
.ic-val .tip-warn{vertical-align:middle;margin-left:4px}
.ic-val{font-family:var(--font-body);font-size:1.7rem;font-weight:600;color:var(--accent-dark);font-variant-numeric:tabular-nums lining-nums}

/* ── Ergebnis-Phase-1: Verdict-Banner, Bewertungs-Skalen, Chart-Tooltip ── */
.verdict-banner{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--verdict-line)}
.verdict-banner .vb-icon{flex:none;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:800;line-height:1;margin-top:2px}
.verdict-banner .vb-icon svg{width:23px;height:23px}
.verdict-banner .vb-txt{display:flex;flex-direction:column;gap:4px}
.verdict-banner .vb-title{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--verdict-ink);line-height:1.2}
.verdict-banner .vb-sub{font-size:.92rem;font-weight:400;color:var(--verdict-ink-soft);line-height:1.5}
.ic-cap{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:.74rem;color:var(--ink-soft);line-height:1.35}
.ic-rate{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.74rem}
.investor-card.r-pos .ic-rate{color:var(--green)}
.investor-card.r-ok .ic-rate{color:var(--accent-dark)}
.investor-card.r-warn .ic-rate{color:var(--red)}
.verdict-banner.v-pos .vb-icon{background:rgba(62,142,90,.24);color:#88D6A6}
.verdict-banner.v-ok .vb-icon{background:rgba(28,90,64,.24);color:#F2C075}
.verdict-banner.v-low .vb-icon{background:rgba(216,140,70,.26);color:#EDA25A}
.verdict-banner.v-warn .vb-icon{background:rgba(201,84,60,.28);color:#E98368}
.ic-scale{margin:12px 0}
.ic-track{position:relative;height:7px;border-radius:999px;background:var(--bg)}
.ic-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--accent)}
.ic-tick{position:absolute;top:-3px;width:2px;height:13px;background:var(--ink-soft);opacity:.4;border-radius:1px}
.investor-card.r-pos .ic-fill{background:var(--green)}
.investor-card.r-ok .ic-fill{background:var(--gold)}
.investor-card.r-warn .ic-fill{background:var(--red)}
.investor-card.r-pos .ic-val{color:var(--green)}
.investor-card.r-warn .ic-val{color:var(--red)}
.chart-card,.cashflow-card{position:relative}
.chart-cross{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 3;opacity:.55;pointer-events:none}
.chart-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2;pointer-events:none}
.chart-tip{position:absolute;z-index:6;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:9px 11px;font-size:.8rem;min-width:132px}
.chart-tip .ct-year{font-weight:700;color:var(--ink);margin-bottom:5px}
.chart-tip .ct-row{display:flex;align-items:center;gap:8px;color:var(--ink-soft);line-height:1.55}
.chart-tip .ct-row b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.chart-tip .ct-dot{width:9px;height:9px;border-radius:3px;flex:none}

/* ── Simulation Bauphase ── */
#bauphaseChart svg{width:100%;height:auto;display:block}
.bp-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;margin-bottom:24px}
.bp-table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 22px;box-shadow:var(--shadow-sm);min-width:0;overflow-x:auto}
.bp-table{width:100%;border-collapse:collapse;font-size:.92rem}
.bp-table th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding:16px 8px 11px;border-bottom:1px solid var(--line)}
.bp-table td{padding:14px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.bp-table tbody tr:last-child td{border-bottom:none}
.bp-table .bp-num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bp-table th.bp-num{text-align:right}
.bp-pct{color:var(--accent-dark);font-weight:600}
.bp-table tr.bp-ek td{color:var(--ink-soft)}
.bp-costs{display:flex;flex-direction:column;min-width:0}
.bp-costs-title{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark);margin:2px 0 12px;font-family:var(--font-body)}
.bp-cost-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 2px;font-size:.95rem;color:var(--ink-soft)}
.bp-cost-row b{font-family:var(--font-num);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bp-cost-sub{border-top:1px solid var(--line);margin-top:2px;padding-top:11px}
.bp-cost-vor{border-top:1px solid var(--line);margin-top:2px;padding-top:11px}
.bp-cost-vor>span{font-weight:700;color:var(--ink)}
.bp-cost-vor b{font-weight:700;color:var(--ink)}
.bp-vor{font-weight:400;color:var(--ink-soft)}
.bp-cost-tax{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:11px 16px;background:var(--green-soft);border-radius:11px;font-size:.95rem}
.bp-cost-tax>span{font-weight:700;color:#34603C}
.bp-cost-tax>span::before{content:"→";margin-right:8px}
.bp-cost-tax b{font-family:var(--font-num);font-weight:700;color:#34603C;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bp-cost-final{margin-top:12px;padding:16px 18px;background:var(--accent-soft);border:1px solid rgba(28,90,64,.32);border-radius:13px}
.bp-cost-final-h{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark)}
.bp-cost-final-v{font-family:var(--font-num);font-size:2rem;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums lining-nums;margin:5px 0 8px}
.bp-cost-final-note{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.bp-cost-final-note b{color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.bp-cost-note{margin:12px 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.bp-cost-note b{color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
@media(max-width:720px){.bp-grid{grid-template-columns:1fr}}
/* Mobile: ETF-Jahreskarten stapeln; Segmented-Controls (Szenario/Verkauf) auf Breite verteilen statt überlaufen */
@media(max-width:560px){
  .etf-compare{grid-template-columns:1fr}
  .segmented{display:flex;width:100%}
  .segmented .seg{flex:1 1 0;min-width:0;padding-left:.4em;padding-right:.4em}
  /* Tooltip-Blase im Ruhezustand aus dem Layout nehmen, sonst erzeugt sie am rechten Rand
     eine 42px-Querscroll-Geisterspur (opacity:0 belegt weiterhin Platz). Beim Antippen sichtbar. */
  .tip::after{display:none}
  .tip:hover::after,.tip:focus::after{display:block}
}

/* ── Ergebnis-Phase-2: Legende-Toggle, Verdict-Fade, Sticky-Leiste ── */
.chart-legend .cl-item{display:inline-flex;align-items:center;background:none;border:none;font:inherit;color:var(--ink-soft);cursor:pointer;padding:3px 7px;border-radius:7px;transition:.12s}
.chart-legend .cl-item:hover{color:var(--ink);background:var(--bg)}
.chart-legend .cl-item.off{opacity:.45;text-decoration:line-through}
/* Fazit-/Kennzahl-Karten bewusst OHNE Erscheinen-Effekt beim Szenario-/Horizont-Wechsel –
   sie bleiben stehen und aktualisieren nur ihren Inhalt. */
/* ── Ergebnis-Phase-3: Gruppen-Icons, Zeilen-Hover, Detail-Fade, Reveal ── */
.kpi-group-title{font-size:1.02rem;color:var(--ink);font-weight:600;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.kpi-group-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-dark)}
.kpi-group-ic svg{width:18px;height:18px}
.kpi-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);border-radius:8px;transition:background .12s;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.kpi-row:hover{background:var(--bg)}
#yearTable td{font-variant-numeric:tabular-nums lining-nums}
.details-card[open] > *:not(summary){animation:detailIn .3s ease-out}
@keyframes detailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.details-card[open] > *:not(summary){animation:none}}

/* Tooltip */
.tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--line);color:var(--ink-soft);font-size:.7rem;font-weight:700;font-style:italic;cursor:help;position:relative;vertical-align:middle}
.tip::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.78rem;font-weight:400;font-style:normal;text-transform:none;letter-spacing:normal;line-height:1.45;width:240px;max-width:60vw;padding:10px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:.15s;z-index:30;box-shadow:var(--shadow)}
.tip:hover::after,.tip:focus::after{opacity:1}

/* Cashflow breakdown */
.cashflow-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.cf-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.cf-intro{color:var(--ink-soft);font-size:.95rem;max-width:520px}
.cf-buffer-chart{margin-top:14px}
.cf-buffer-chart svg{width:100%;height:auto;display:block}
.cf-buffer-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;font-size:.82rem;color:var(--ink-soft)}
.cf-buffer-legend .dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle}
.cf-buffer-legend .vmark{display:inline-block;width:3px;height:13px;margin-right:6px;vertical-align:-2px;border-radius:1px}
.cf-buffer-explain{margin-top:14px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.cf-buffer-explain strong{color:var(--ink)}
.cf-year select{font:inherit;padding:.4em .7em;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.cf-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.cf-rowlabel{width:120px;flex-shrink:0;font-size:.9rem;color:var(--ink-soft);display:flex;flex-direction:column}
.cf-rowlabel b{color:var(--ink);font-size:1.05rem}
.cf-bar{flex:1;display:flex;height:30px;border-radius:8px;overflow:hidden;background:var(--bg)}
.cf-seg{height:100%}
.cf-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 4px 134px;font-size:.82rem;color:var(--ink-soft)}
.cf-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.cf-net{margin-top:16px;padding:12px 16px;border-radius:12px;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.cf-net.pos{background:var(--green-soft);color:#34603C}
.cf-net.neg{background:#FBE8E3;color:var(--red)}
.cf-net-monthly{font-size:.9rem;opacity:.8;white-space:nowrap}
.cf-note{font-size:.83rem;color:var(--ink-soft);margin-top:12px}

/* Details (collapsible) */
.details-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:0}
.details-card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;font-family:var(--font-head);font-size:1.3rem;font-weight:600}
.details-card summary::-webkit-details-marker{display:none}
.details-card .chev{transition:.2s;color:var(--ink-soft)}
.details-card[open] .chev{transform:rotate(180deg)}
.details-card .table-scroll{padding:0 28px 24px}
.details-card.table-card h3{display:none}
.annahmen-intro{padding:0 28px;color:var(--ink-soft);margin:-6px 0 14px}
#annahmenForm{padding:0 28px}
#btnRecalc{margin:4px 28px 26px}
.annahmen-group{margin-bottom:18px}
.annahmen-group h4{font-size:1rem;color:var(--ink-soft);margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.annahmen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.afield{display:flex;flex-direction:column;gap:5px;font-size:.88rem}
.afield>span{font-weight:600}
.afield input,.afield select{font:inherit;padding:.55em .7em;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.afield.acheck{flex-direction:row;align-items:center;gap:8px}
.afield.acheck input{width:18px;height:18px;accent-color:var(--accent)}

@media(max-width:760px){
  .investor-grid{grid-template-columns:1fr 1fr}
  .verdict-nums{grid-template-columns:1fr}
  .annahmen-grid{grid-template-columns:1fr 1fr}
  .cf-rowlabel{width:90px}
  .cf-legend{margin-left:104px}
}
#chart svg{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:.9rem;color:var(--ink-soft)}
.chart-legend .dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.85rem;white-space:nowrap}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
thead th{font-weight:600;color:var(--ink-soft);border-bottom:2px solid var(--line)}
tbody tr:hover td{background:var(--bg)}
/* Jahresentwicklung: auf dem Desktop passen alle 11 Spalten ohne seitliches Scrollen in die Breite –
   Kopfzeilen dürfen umbrechen (sonst erzwingen lange Labels breite Spalten), Zahlen bleiben einzeilig
   (keine Kürzung). Auf Tablet/Handy ist die Tabelle bewusst breiter als der Schirm und scrollt
   (overflow-x) statt unleserlich klein zu schrumpfen. */
#yearTable{width:100%;font-size:.8rem}
#yearTable th,#yearTable td{padding:8px 6px}
#yearTable thead th{white-space:normal;overflow-wrap:break-word;hyphens:auto;line-height:1.2;vertical-align:bottom}
.disclaimer{font-size:.82rem;color:var(--ink-soft);margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:24px 0;background:var(--surface)}
.site-footer .wrap{display:flex;justify-content:space-between;color:var(--ink-soft);font-size:.9rem}
.footer-links{display:flex;gap:18px}

@media(max-width:760px){
  .features,.plans,.gate-wrap,.field-grid{grid-template-columns:1fr}
  #kpiSections{column-count:1}
  .wiz-body{padding:26px}
  .hero{padding:48px 20px 30px}
  .nav{height:56px}
  .brand{font-size:1rem}
  .nav-link{font-size:.85rem}
  .results-head h2{font-size:1.6rem}
}

/* Print */
@media print{
  body{background:#fff}
  .site-header,.site-footer,.results-actions,.disclaimer,#btnRestart{display:none!important}
  .chart-card,.table-card,.kpi{box-shadow:none;break-inside:avoid}
}

/* ===== Geteilte Backend-Komponenten (dedup aus partner.php/admin.php, 06/2026) ===== */
.view-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:22px;width:100%}
.view-tab{position:relative;border:none;background:none;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink-soft);padding:.6em .2em;margin-right:24px;cursor:pointer;white-space:nowrap;transition:color .15s}
.view-tab:last-child{margin-right:0}
.view-tab:hover{color:var(--ink)}
.view-tab.active{color:var(--ink)}
.view-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--accent);border-radius:3px 3px 0 0}
.view-tab:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px;border-radius:6px}
.page-head-main{min-width:0;flex:1 1 320px}
.page-title{font-family:var(--font-head);font-size:clamp(1.45rem,2vw,1.8rem);font-weight:700;line-height:1.12;color:var(--ink);margin:0}
.page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
.lead-table-wrap{overflow-x:auto;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.lead-table{width:100%;border-collapse:collapse;font-size:.86rem}
.lead-table th,.lead-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.lead-table .num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft);font-size:.85rem}
.src-pill{font-size:.7rem;font-weight:700;padding:.15em .55em;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark)}
.an-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:4px 0 22px}
.an-controls select{font:inherit;padding:.45em .7em;border:1.5px solid var(--line);border-radius:8px;background:var(--bg)}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.an-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 18px}
.an-kpi .l{font-size:.8rem;color:var(--ink-soft);margin-top:4px}
.an-kpi .s{font-size:.72rem;color:var(--ink-soft);margin-top:2px;opacity:.85}
.an-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 20px;margin-bottom:22px}
.an-card h2{font-size:1.05rem;margin:0 0 14px}
.an-grid2{display:grid;grid-template-columns:2fr 1fr;gap:22px}
.an-line{width:100%;height:auto;display:block}
.an-line text{font-size:10px;fill:var(--ink-soft)}
.an-funnel-row{display:grid;grid-template-columns:170px 1fr 96px;align-items:center;gap:12px;margin:7px 0;font-size:.85rem}
.an-bar-track{background:var(--bg);border-radius:6px;height:22px;overflow:hidden;border:1px solid var(--line)}
.an-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:6px 0 0 6px}
.an-funnel-row .cnt{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.an-funnel-row .cnt b{color:var(--ink)}
.an-dev{display:flex;flex-direction:column;gap:10px}
.an-dev-row{font-size:.85rem}
.an-dev-row .top{display:flex;justify-content:space-between;margin-bottom:3px}
.an-empty{color:var(--ink-soft);padding:20px 0}
.phase-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.18em .6em;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.phase-badge[data-kind="won"]{background:var(--green-soft);color:var(--green)}
.phase-badge[data-kind="lost"]{background:#f7e3dc;color:var(--red)}
.crm-task.done .tt{text-decoration:line-through;color:var(--ink-soft)}
.crm-task .due{font-size:.76rem;color:var(--ink-soft);margin-left:auto}
.crm-task .due.overdue{color:var(--red);font-weight:700}

/* =========================================================================
   MOTION SYSTEM — global, einheitliche Mikro-Interaktionen & Animationen
   Tokens → Keyframes → Basis-Feedback → Utilities (.om-*) + Bindung an
   bestehende Komponenten → Modals/Drawer → reduced-motion.
   Farben ausschliesslich aus der Palette (var(--accent) / color-mix).
   Stabilitaetsregel: persistente Inhalte bekommen Entrance NUR per transform
   (nie opacity:0) -> bleiben sichtbar, selbst wenn eine Animation haengt.
   ========================================================================= */
:root{
  --dur-press:120ms; --dur-fast:160ms; --dur-base:220ms; --dur-enter:420ms; --dur-overlay:240ms; --dur-theme:600ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --om-stagger:45ms;
  --om-lift-shadow:0 10px 24px rgba(42,37,32,.10);
  --om-accent-glow:color-mix(in srgb,var(--accent) 32%,transparent);
  --surface-row-hover:var(--bg);
}
/* ---- Keyframes ---- */
@keyframes om-rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes om-scale-in{from{transform:translateY(9px)}to{transform:none}}
@keyframes om-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes om-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes om-modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes om-drawer-right{from{transform:translateX(100%)}to{transform:none}}
@keyframes om-drawer-left{from{transform:translateX(-100%)}to{transform:none}}
@keyframes om-drawer-bottom{from{transform:translateY(100%)}to{transform:none}}

/* ---- Basis: jede klickbare Flaeche bekommt Press-Feedback ----
   Vereinheitlichte Transition (inkl. transform) nur fuer Button-/Klick-Familien,
   damit bestehende Hover-Effekte (Farbe/Border/Shadow) erhalten bleiben. */
button,[role="button"],.lead-iconbtn,.lead-addbtn,.link-btn,.btn-icon{
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-press) var(--ease-spring);
}
button:not(:disabled):active,[role="button"]:not([aria-disabled="true"]):active,
.lead-iconbtn:active,.lead-addbtn:active,.link-btn:active{transform:scale(.96)}
button:disabled{transform:none!important;cursor:not-allowed}

/* 1) BUTTONS — Primary-Lift existiert bereits (.btn-primary:hover); nur Press ergaenzen */
.btn-primary:active{transform:translateY(0) scale(.96)}
.btn-secondary:hover{box-shadow:0 4px 12px rgba(42,37,32,.06)}
.btn-icon:hover{transform:scale(1.06)} .btn-icon:active{transform:scale(.88)}

/* 2) CARDS — Lift fuer statische Karten (Kanban-.crm-card hat bereits eigenen Lift) */
.pk-card,.an-kpi,.dash-kpi{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.pk-card:hover,.an-kpi:hover,.dash-kpi:hover{transform:translateY(-3px);box-shadow:var(--om-lift-shadow)}

/* 3) FILTER-CHIPS / SEGMENTE — Press + leichter Lift (Hover-Border existiert) */
.qpill:hover{transform:translateY(-1px)}
.qpill:active,.src-pill:active{transform:scale(.93)}

/* 4) INPUTS — weichen Fokus-Ring ergaenzen (Akzent-Border existiert bereits) */
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px var(--om-accent-glow)}

/* ---- ENTRANCE: gestaffelte Listen/Grids (transform-only, immer sichtbar) ----
   .om-enter an den Container; Kinder steigen versetzt auf (Stagger per nth-child,
   kein Inline-Index noetig). Ueber den Index hinaus ohne Verzoegerung. */
.om-enter>*{animation:om-rise var(--dur-enter) var(--ease-out) both}
.om-enter>*:nth-child(1){animation-delay:calc(var(--om-stagger)*0)}
.om-enter>*:nth-child(2){animation-delay:calc(var(--om-stagger)*1)}
.om-enter>*:nth-child(3){animation-delay:calc(var(--om-stagger)*2)}
.om-enter>*:nth-child(4){animation-delay:calc(var(--om-stagger)*3)}
.om-enter>*:nth-child(5){animation-delay:calc(var(--om-stagger)*4)}
.om-enter>*:nth-child(6){animation-delay:calc(var(--om-stagger)*5)}
.om-enter>*:nth-child(7){animation-delay:calc(var(--om-stagger)*6)}
.om-enter>*:nth-child(8){animation-delay:calc(var(--om-stagger)*7)}
.om-enter>*:nth-child(n+9){animation-delay:calc(var(--om-stagger)*8)}
/* Ansichts-/Panelwechsel */
.om-view-enter{animation:om-scale-in var(--dur-enter) var(--ease-out) both}

/* =========================================================================
   MODALS · DIALOGE · DRAWER — Ein-Animation an bestehende Klassen gebunden.
   .hidden{display:none} -> Animation startet beim Einblenden automatisch.
   ========================================================================= */
.modal:not(.hidden){animation:om-overlay-in var(--dur-overlay) var(--ease-out)}
.modal:not(.hidden) .modal-card{animation:om-modal-in var(--dur-overlay) var(--ease-out);transform-origin:center}
.crm-drawer-overlay:not(.hidden){animation:om-overlay-in var(--dur-overlay) var(--ease-out)}
.crm-drawer:not(.hidden){animation:om-drawer-right var(--dur-overlay) var(--ease-out)}
/* Schliess-Animation (optional, per JS .is-closing setzen, dann nach animationend entfernen) */
.modal.is-closing{animation:om-overlay-in var(--dur-overlay) var(--ease-out) reverse forwards}
.modal.is-closing .modal-card{animation:om-modal-in var(--dur-overlay) var(--ease-out) reverse forwards}
.crm-drawer.is-closing{animation:om-drawer-right var(--dur-overlay) var(--ease-out) reverse forwards}
.crm-drawer-overlay.is-closing{animation:om-overlay-in var(--dur-overlay) var(--ease-out) reverse forwards}

/* =========================================================================
   REDUCED MOTION — Barrierefreiheit: alle Bewegungen praktisch aus
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* =========================================================================
   DARK MODE — Header-Toggle (Sonne/Mond) + warme „Goldene Stunde"-Dunkelpalette.
   Aktiv nur bei <html data-theme="dark"> (vom Header-Toggle gesetzt, vor dem Paint).
   Prinzip: zentrale Paletten-Variablen umdefinieren (die meisten Komponenten nutzen
   var(--bg/--surface/--ink/--line) und kippen automatisch) + gezielte Overrides der
   wenigen hartkodierten Hellflächen. Keine neuen Markenfarben — Honig bleibt der Akzent.
   ========================================================================= */
/* Toggle-Button */
.p-topbar-actions{display:inline-flex;align-items:center;gap:10px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;padding:0;flex:none;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-press) var(--ease-spring)}
.theme-toggle:hover{color:var(--accent-dark);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.theme-toggle:active{transform:scale(.9)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.theme-toggle svg{display:block}
.theme-toggle .ic-sun{display:none}                       /* Hell: Mond zeigt „zu Dark wechseln" */
[data-theme="dark"] .theme-toggle .ic-moon{display:none}  /* Dunkel: Sonne zeigt „zu Bright wechseln" */
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
/* Partner-Logo im Dark Mode: schwarz/weiss + invertiert (dunkle Logos werden auf Dunkel sichtbar) */
[data-theme="dark"] .brand-partner-logo{filter:grayscale(1) invert(1) brightness(1.1) contrast(.95)}

/* Sanfter Cross-Fade beim Theme-Wechsel — nur waehrend des Umschaltens aktiv (JS setzt
   .theme-anim kurz auf <html>), danach entfernt. So keine dauerhafte Transition auf allem.
   prefers-reduced-motion (oben) reduziert die Dauer ohnehin auf ~0. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color var(--dur-theme) var(--ease-out),
             color var(--dur-theme) var(--ease-out),
             border-color var(--dur-theme) var(--ease-out),
             fill var(--dur-theme) var(--ease-out),
             stroke var(--dur-theme) var(--ease-out),
             filter var(--dur-theme) var(--ease-out) !important;
}

/* Dunkelpalette — ImmoBricks, exakt aus der Dashboard-Mockup-Vorlage entnommen:
   neutrales Anthrazit mit Grün-Hauch (NICHT satt-grün), Bronze als Zweitakzent. */
[data-theme="dark"]{
  --bg:#121513;            /* Canvas – neutrales Dunkel mit Grün-Hauch (Vorlage) */
  --surface:#1E2220;       /* Karten/Panels (Vorlage) */
  --surface-2:#191D1B;     /* ruhige Zweitfläche */
  --anl-stack-1:#171B18;   /* Wohnanlage-Stapel: 1. Ebene dahinter */
  --anl-stack-2:#0C0F0D;   /* Wohnanlage-Stapel: 2. Ebene, dunkler */
  --canvas:#121513;
  --ink:#ECEEED;           /* helles, kühles Weiß (Vorlage) */
  --ink-soft:#9FB0A6;      /* gedämpfter Slate-Grün (Vorlage) */
  --line:#292E2B;          /* Rahmen/Trenner (Vorlage) */
  --field-line:#353A37;    /* stärkerer Rahmen (Vorlage) */
  --accent:#2A7A57;        /* Grün-Button (weißer Text) */
  --accent-dark:#5AAE86;   /* helles Grün: Link-/Hover-Text + positive Werte (Vorlage) */
  --accent-soft:#17281E;   /* dunkelgrünes Soft (Badge-/Chip-Hintergrund) */
  --accent-ink:#FFFFFF;    /* Text auf Grün-Buttons bleibt weiß */
  --hint-bg:#191D1B;       /* Hinweis-Boxen: ruhiges Dunkel */
  --gold:#CBA76A;          /* Bronze (Vorlage, unverändert) */
  --green:#5AAE86;         /* positive Werte / Success (Vorlage) */
  --green-soft:#17281E;
  --red:#E88A72;           /* Danger, für Dunkel aufgehellt */
  --verdict-bg:#0E100F;    /* Fazit: tiefstes Dunkel */
  --verdict-ink-soft:#9FB0A6;
  --verdict-line:rgba(255,255,255,.12);
  --shadow-overlay:0 12px 32px -6px rgba(0,0,0,.55);
  --shadow-modal:0 24px 56px -12px rgba(0,0,0,.6);
  --shadow-raised:0 1px 2px rgba(0,0,0,.4);
  --shadow:var(--shadow-overlay);
  --shadow-sm:var(--shadow-raised);
  --om-lift-shadow:0 10px 26px rgba(0,0,0,.5);
  --surface-row-hover:#292E2B;
  color-scheme:dark;
}
/* Gezielte Overrides der hartkodierten Hellflaechen (Partner-Tool) */
[data-theme="dark"] .dash-hot{background:rgba(42,122,87,.20);color:var(--accent-dark)}
[data-theme="dark"] .dash-bar,[data-theme="dark"] .dash-pill-n,[data-theme="dark"] .ob2-prog-track{background:var(--line)}
[data-theme="dark"] .ob2-head{background:linear-gradient(180deg,#1c3327,var(--surface))}
[data-theme="dark"] .seg{background:#16241D}
[data-theme="dark"] .task-chip.over,[data-theme="dark"] .task-row .tbadge.over,
[data-theme="dark"] .sub-badge.expired,[data-theme="dark"] .phase-badge[data-kind="lost"]{background:rgba(226,145,111,.20);color:var(--red)}
[data-theme="dark"] .crm-card .chip.warn{background:rgba(213,178,122,.16);border-color:rgba(213,178,122,.42);color:var(--gold)}
[data-theme="dark"] .nav-profile:hover{background:var(--line)!important}
/* Einstellungen-Seitennav: aktiver Eintrag braucht im Dark Mode hellen Text (sonst dunkel auf dunkel) */
[data-theme="dark"] .acc-nav-item.active{color:var(--accent-dark);border-color:var(--accent)}
/* Quick-Filter-Pillen (Kunden/Vorgänge/Leads): aktive Pille hat im Dark Mode dunkles --accent-ink auf
   dunklem --accent-soft → unlesbar. Hellen Honig-Text erzwingen (Label + Zähler einheitlich). */
[data-theme="dark"] .qpill.active{color:var(--accent-dark)}
/* „i"-Tooltip: Basis nutzt background:var(--ink);color:#fff. Im Dark Mode ist --ink hell → weiß-auf-hell
   unlesbar. Textfarbe auf --bg (dunkel) drehen → dunkler Text auf heller Sprechblase. „i"-Badge mit Akzent. */
[data-theme="dark"] .tip::after{color:var(--bg)}
[data-theme="dark"] .tip{background:var(--line);color:var(--accent-dark)}
/* Miet-Aufschlüsselung: Summenzeile nutzt helles --hint-bg → im Dark Mode honig-getönte dunkle Fläche. */
[data-theme="dark"] .ms-total{background:rgba(90,185,131,.12);border-color:rgba(90,185,131,.30)}
/* Error-/Negativ-Flaechen (Auswertung/Eval-Komponenten) */
[data-theme="dark"] .afa-check.neg,[data-theme="dark"] .rate-info.neg,
[data-theme="dark"] .hint-card.neg,[data-theme="dark"] .cf-net.neg{background:rgba(226,145,111,.15);border-color:rgba(226,145,111,.4);color:var(--red)}
/* Positiv-/Grünflächen: hartkodiertes #34603C auf dunklem --green-soft → dunkel-auf-dunkel (z. B. der
   jährliche Cashflow-Überschuss). Heller Grünton var(--green) auf transluzentem Grün. */
[data-theme="dark"] .afa-check.pos,[data-theme="dark"] .rate-info.pos,
[data-theme="dark"] .hint-card.pos,[data-theme="dark"] .cf-net.pos{background:rgba(95,181,127,.15);border-color:rgba(95,181,127,.4);color:var(--green)}
[data-theme="dark"] .field input.invalid{background:rgba(226,145,111,.13)}
/* Bauphase: grüne Steuervorteil-Band im Dark Mode (heller Grünton statt #34603C auf dunklem Grün) */
[data-theme="dark"] .bp-cost-tax{background:rgba(95,181,127,.16)}
[data-theme="dark"] .bp-cost-tax>span,[data-theme="dark"] .bp-cost-tax b{color:var(--green)}

/* ===================== Objekte (Katalog, Formular, Detail) ===================== */
.modal-card.obj-modal{max-width:760px}
/* Karten-Grid */
.obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.obj-card{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .14s ease,box-shadow .14s ease}
.obj-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,38,31,.14)}
.obj-card-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.obj-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.obj-card-media-empty{color:var(--accent);background:linear-gradient(150deg,var(--accent-soft),var(--surface))}
/* Wohnanlage: "Stapel"-Optik (zwei versetzte, nach hinten dunkler werdende Karten) macht auf den ersten Blick
   klar, dass viele Einheiten dahinterstecken. Reiner box-shadow-Stack (keine ::before/::after-Ebenen) – vermeidet
   Compositing-Artefakte, die die Pseudo-Element+Transform-Variante bei manchen Renderern/Zoomstufen zeigte. */
.obj-card-anlage{overflow:visible;box-shadow:4px 4px 0 0 var(--anl-stack-1),8px 8px 0 0 var(--anl-stack-2),var(--shadow-sm)}
.obj-card-anlage:hover{box-shadow:4px 4px 0 0 var(--anl-stack-1),8px 8px 0 0 var(--anl-stack-2),0 14px 30px rgba(20,38,31,.14)}
.obj-card-anlage .obj-card-media{border-radius:16px 16px 0 0}
.obj-badge{position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:rgba(20,38,31,.72);padding:.24em .6em;border-radius:999px;backdrop-filter:blur(2px)}
/* Objekt-Status (nur maklerseitig): Im Gespräch / Reserviert / Verkauft */
.obj-status{display:inline-flex;align-items:center;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;padding:.24em .62em;border-radius:999px;white-space:nowrap}
.obj-status.os-talk{background:#3F6B8A}
.obj-status.os-reserved{background:#B0894A}
.obj-status.os-sold{background:#2A7A57}
.obj-status-media{position:absolute;top:10px;right:10px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.obj-status-inline{margin-left:8px;vertical-align:middle}
.obj-ov-status{margin-top:16px}
.obj-status-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
.obj-status-segbtn{font:inherit;font-weight:600;font-size:.88rem;padding:.5em 1.05em;border:none;border-right:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.14s}
.obj-status-segbtn:last-child{border-right:none}
.obj-status-segbtn:hover{background:var(--accent-soft)}
.obj-status-segbtn.on{background:var(--accent);color:#fff}
.obj-status-segbtn:focus-visible{outline:2px solid var(--accent-dark);outline-offset:-2px}
.obj-status-hint{font-size:.8rem;margin-top:8px;line-height:1.5}
.obj-res-list{display:flex;flex-direction:column;gap:8px}
.obj-res-opt{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.14s}
.obj-res-opt:hover{border-color:var(--accent)}
.obj-res-opt input{margin-top:3px;flex:none}
.obj-res-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.obj-res-sub{font-size:.8rem;color:var(--ink-soft)}
.obj-card-body{display:flex;flex-direction:column;gap:3px;padding:13px 15px 15px}
.obj-card-title{font-family:var(--font-head);font-size:1.08rem;font-weight:600;color:var(--ink);line-height:1.25}
.obj-card-addr{font-size:.85rem;color:var(--ink-soft)}
.obj-card-facts{font-family:var(--font-num);font-size:.9rem;font-weight:600;color:var(--accent-dark);font-variant-numeric:tabular-nums;margin-top:4px}
.obj-card-chips{font-size:.8rem;color:var(--ink-soft);margin-top:2px;letter-spacing:.02em}

/* ===== Wohnanlagen ===== */
.obj-badge-anlage{background:var(--gold)!important;color:var(--bronze-ink)!important;left:auto;right:10px}
.obj-status.os-free{background:var(--accent)}
/* WE-Pille: fixe dunkle Schrift auf Weiß (in beiden Themes lesbar – --ink kippt im Dark Mode auf hell). */
.obj-we-pill{position:absolute;bottom:10px;right:10px;background:#fff;color:#18211D;font-family:var(--font-num);font-weight:700;font-size:.78rem;padding:.3em .65em;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.28);font-variant-numeric:tabular-nums}
.obj-anl-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line);margin-top:11px}
.obj-anl-bar>span{height:100%}
.obj-anl-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:.78rem;color:var(--ink-soft)}
.obj-anl-legend span{display:inline-flex;align-items:center;gap:6px}
.obj-anl-legend b{color:var(--ink);font-weight:700}
.obj-anl-dot{width:8px;height:8px;border-radius:99px;display:inline-block;flex:none}

/* ===== Objekt-Browser (visueller Picker-Dialog) ===== */
.opick-bar{position:sticky;top:-20px;z-index:3;background:var(--surface);margin:-20px -26px 14px;padding:18px 26px 12px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.opick-search{flex:1 1 240px;position:relative;display:flex;align-items:center;min-width:0}
.opick-search>svg{position:absolute;left:12px;color:var(--ink-soft);pointer-events:none}
.opick-search input{width:100%;padding:.62em .8em .62em 38px;border:1.5px solid var(--field-line);border-radius:10px;background:var(--bg);font:inherit;color:var(--ink)}
.opick-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.opick-seg{display:inline-flex;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.opick-seg button{border:none;background:none;font:inherit;font-weight:600;font-size:.84rem;color:var(--ink-soft);padding:.45em .8em;border-radius:7px;cursor:pointer;white-space:nowrap;transition:.14s}
.opick-seg button.on{background:var(--surface);color:var(--accent-dark);box-shadow:var(--shadow-sm)}
.opick-seg button:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px}
.opick-body{min-height:220px}
.opick-loading,.opick-empty{padding:44px 10px;text-align:center;color:var(--ink-soft)}
.opick-empty p{margin-bottom:14px}
.opick-group{margin-bottom:22px}
.opick-group:last-child{margin-bottom:2px}
.opick-ghead{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:10px}
.opick-count{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.12em .62em;font-size:.72rem;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink-soft)}
.opick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.opick-card{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 11px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .13s,box-shadow .13s,transform .13s;width:100%}
.opick-card:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(20,38,31,.12);transform:translateY(-1px)}
.opick-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.opick-card.is-current{border-color:var(--gold);background:var(--surface-2)}
.opick-thumb{width:46px;height:46px;border-radius:9px;overflow:hidden;flex:none;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--accent-dark)}
.opick-thumb img{width:100%;height:100%;object-fit:cover}
.opick-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
.opick-t{font-weight:600;color:var(--ink);font-size:.92rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opick-sub{font-size:.78rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opick-facts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.78rem;color:var(--accent-dark);font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px}
.opick-cur{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bronze-ink);background:var(--gold);border-radius:99px;padding:.12em .5em;vertical-align:middle}
.opick-st{font-size:.6rem!important;padding:.2em .5em!important}
/* Wohnanlage-Gruppe */
.opick-anl{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.opick-anl-head{text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);margin-bottom:12px}
.opick-anl-thumb{width:34px;height:34px;border-radius:8px;overflow:hidden;flex:none;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--accent-dark)}
.opick-anl-thumb img{width:100%;height:100%;object-fit:cover}
.opick-anl-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.opick-anl-title b{font-weight:700}
.opick-anl-title span{font-size:.78rem;color:var(--ink-soft);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opick-anl-badge{position:static!important;top:auto!important;left:auto!important;right:auto!important;font-size:.58rem;flex:none}
.opick-anl-head .opick-count{margin-left:auto}
.opick-card.opick-unit{background:var(--surface)}
.opick-ulabel{width:42px;height:42px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums}
.opick-ugrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media(max-width:560px){
  .opick-bar{flex-direction:column;align-items:stretch}
  .opick-search{flex:0 0 auto;width:100%}
  .opick-seg{width:100%}
  .opick-seg button{flex:1}
  .opick-grid,.opick-ugrid{grid-template-columns:1fr}
}
/* Objekt-Feld im Vorgangs-Formular: gewähltes Objekt bzw. „auswählen"-Button */
.pf-obj-choose{display:flex;align-items:center;gap:9px;width:100%;padding:.7em .9em;border:1.5px dashed var(--field-line);border-radius:10px;background:var(--bg);color:var(--ink-soft);font:inherit;font-weight:600;cursor:pointer;transition:.14s}
.pf-obj-choose:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-soft)}
.pf-obj-choose:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pf-obj-chosen{display:flex;align-items:center;gap:10px;padding:.6em .8em;border:1.5px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.pf-obj-ico{flex:none;display:flex;color:var(--accent-dark)}
.pf-obj-name{flex:1 1 0;min-width:0;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-obj-chosen .link-btn{flex:none}
.pf-obj-x{flex:none;width:26px;height:26px;border:none;border-radius:7px;background:transparent;color:var(--ink-soft);font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pf-obj-x:hover{background:var(--surface);color:var(--red)}
/* Personen-Werte-Sync-Dialog (Auswertungen aktualisieren) */
.sc-list{display:flex;flex-direction:column;gap:8px}
.sc-row{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color .13s,background .13s}
.sc-row:hover{border-color:var(--accent)}
.sc-row:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.sc-row input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.sc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-title{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.sc-sub{font-size:.82rem;color:var(--ink-soft)}
.sc-badge{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.12em .5em}
.sc-deltas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
.sc-delta{font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sc-delta b{color:var(--accent-dark);font-variant-numeric:tabular-nums}
.sc-nochange{font-style:italic;opacity:.7}
.sc-closed{opacity:.72}

/* Filter-Segmente (Alle/Einzelobjekte/Wohnanlagen) */
.obj-filter-seg{display:inline-flex;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.obj-filter-seg button{border:none;background:none;font:inherit;font-weight:600;font-size:.88rem;color:var(--ink-soft);padding:.5em 1em;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
.obj-filter-seg button.on{background:var(--accent-soft);color:var(--accent-dark)}
.obj-filter-seg button:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px}
/* Auswahl-Dialog Einzelobjekt / Wohnanlage */
.obj-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.obj-choice{position:relative;text-align:left;display:flex;flex-direction:column;gap:9px;border:1.5px solid var(--line);border-radius:14px;padding:18px;background:var(--surface-2);cursor:pointer;transition:.14s}
.obj-choice:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.obj-choice-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.obj-choice.single .obj-choice-ico{background:var(--accent-soft);color:var(--accent-dark)}
.obj-choice.anlage .obj-choice-ico{background:var(--bronze-soft,#F6EEDD);color:var(--bronze-600)}
.obj-choice-h{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--ink)}
.obj-choice-p{font-size:.86rem;color:var(--ink-soft);line-height:1.45}
/* Geerbte Bilder in der Objektansicht */
.obj-ov-cell.obj-ov-inh{position:relative}
.obj-inh-tag{position:absolute;top:6px;left:6px;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--gold);color:var(--bronze-ink);padding:.18em .5em;border-radius:5px}
.obj-inh-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--gold);vertical-align:middle}
/* Assistent: Schritte */
.anl-steps{display:inline-flex;align-items:center;gap:10px;margin-top:9px;font-size:.8rem;font-weight:600}
.anl-step{display:inline-flex;align-items:center;gap:7px;color:var(--ink-faint,var(--ink-soft))}
.anl-step .n{width:22px;height:22px;border-radius:99px;background:var(--line);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700}
.anl-step.on{color:var(--ink)}
.anl-step.on .n{background:var(--accent);color:#fff}
.anl-step.done .n{background:var(--accent-soft);color:var(--accent-dark)}
.anl-step-line{width:40px;height:1.5px;background:var(--line)}
/* Assistent: Methoden-Umschalter */
.anl-method{display:inline-flex;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:3px;margin-bottom:14px}
.anl-method button{border:none;background:none;font:inherit;font-weight:600;font-size:.88rem;color:var(--ink-soft);padding:.5em 1em;border-radius:7px;cursor:pointer}
.anl-method button.on{background:var(--surface);color:var(--accent-dark);box-shadow:var(--shadow-sm)}
/* Assistent: Serien-Generator */
.anl-genbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:12px}
.anl-g{display:flex;flex-direction:column;gap:5px}
.anl-g span{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700}
.anl-g input{background:var(--surface);border:1.5px solid var(--field-line);border-radius:8px;padding:.5em .55em;width:74px;text-align:center;font:inherit;font-variant-numeric:tabular-nums}
.anl-g input.pref{width:50px;text-transform:uppercase}
.anl-g input#anlRentRate{width:120px}
.anl-gdiv{width:1px;align-self:stretch;background:var(--line);margin:2px 0}
.anl-genbar .btn{margin-left:auto}
.anl-excel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:12px}
.anl-excel p{font-size:.82rem;margin-bottom:8px}
.anl-excel textarea{width:100%;min-height:100px;background:var(--surface);border:1.5px dashed var(--field-line);border-radius:8px;padding:10px;font-family:ui-monospace,monospace;font-size:.82rem;resize:vertical;line-height:1.6}
.anl-hint{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);background:var(--accent-soft);border-radius:8px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
/* Assistent: Einheiten-Raster */
.anl-grid-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.anl-grid-scroll{overflow-x:auto;max-height:320px;overflow-y:auto}
.anl-grid-scroll.anl-grid-scroll-tall{max-height:none}
.anl-gtable{width:100%;border-collapse:collapse;min-width:640px}
.anl-gtable thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:9px 10px;border-bottom:1px solid var(--line);font-weight:700}
.anl-gtable thead th.num{text-align:right}
.anl-gtable td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0}
.anl-gtable td:last-child{border-right:none}
.anl-gtable td.rn{color:var(--ink-soft);font-size:.76rem;padding:0 10px;text-align:right;width:34px;border-right:1px solid var(--line)}
.anl-gtable input,.anl-gtable select{width:calc(100% - 8px);display:block;border:1px solid var(--field-line);background:var(--bg);border-radius:5px;margin:4px;padding:7px 8px;font:inherit;font-size:.88rem;box-sizing:border-box;color:var(--ink)}
.anl-gtable select{cursor:pointer;appearance:auto}
.anl-gtable input:hover,.anl-gtable select:hover{border-color:var(--ink-soft)}
.anl-gtable input:focus,.anl-gtable select:focus{background:var(--surface);outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.anl-gtable input.nin{text-align:right;font-variant-numeric:tabular-nums}
.anl-gtable tbody tr:hover{background:var(--bg)}
/* Breites Einheiten-Grid: alle Felder + Foto-/Grundriss-Zellen je Zeile, horizontal scrollbar.
   Bezeichnungsspalte bleibt beim Scrollen links stehen (sticky) zur Orientierung. */
.anl-gtable-wide{min-width:1560px}
.anl-gtable-wide thead th{white-space:nowrap}
.anl-gtable-wide td.num,.anl-gtable-wide th.num{min-width:90px}
.anl-gtable-wide input.nin{min-width:72px}
.anl-gtable-wide td.rn,.anl-gtable-wide th.rn{position:sticky;left:0;z-index:2;background:var(--surface)}
.anl-gtable-wide thead th.rn{z-index:4;background:var(--surface-2)}
.anl-gtable-wide td.c-lbl,.anl-gtable-wide th.c-lbl{position:sticky;left:34px;z-index:2;background:var(--surface);min-width:150px;box-shadow:1px 0 0 var(--line)}
.anl-gtable-wide thead th.c-lbl{z-index:4;background:var(--surface-2)}
.anl-gtable-wide tbody tr:hover td.rn,.anl-gtable-wide tbody tr:hover td.c-lbl{background:var(--bg)}
.anl-gtable .c-img{min-width:128px;padding:3px 4px;vertical-align:middle}
.anl-gtable td.c-del{width:42px;text-align:center}
.anl-imgcell{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.anl-imgt{position:relative;width:34px;height:34px;border-radius:5px;overflow:hidden;flex:none;border:1px solid var(--line)}
.anl-imgt img{width:100%;height:100%;object-fit:cover;display:block}
.anl-imgx{position:absolute;top:0;right:0;width:15px;height:15px;line-height:13px;text-align:center;border:none;border-radius:0 0 0 5px;background:rgba(20,38,31,.72);color:#fff;font-size:.68rem;cursor:pointer;padding:0}
.anl-imgadd{width:34px;height:34px;border:1.5px dashed var(--field-line);border-radius:5px;background:var(--bg);color:var(--ink-soft);font-size:1.15rem;line-height:1;cursor:pointer;flex:none}
.anl-imgadd:hover{border-color:var(--accent);color:var(--accent-dark)}
/* Hinweis „geerbte Felder" in der Einheit-Einzelform */
.cf-inherit-note{margin:12px 0 2px;background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:9px 12px;font-size:.85rem;line-height:1.45}
.anl-empty{padding:30px 18px;text-align:center;color:var(--ink-soft);font-size:.9rem}
.anl-del{background:none;border:none;color:var(--ink-soft);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:1rem}
.anl-del:hover{color:var(--red);background:rgba(194,72,58,.1)}
.anl-addrow{width:100%;background:none;border:none;border-top:1px dashed var(--field-line);color:var(--ink-soft);padding:11px 18px;font:inherit;font-size:.86rem;font-weight:600;text-align:left;cursor:pointer}
.anl-addrow:hover{background:var(--bg);color:var(--accent-dark)}
.anl-summary{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:14px;padding:12px 16px;background:var(--accent-soft);border-radius:10px}
.anl-sum{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.anl-sum b{font-family:var(--font-num);font-weight:700;font-size:1.1rem;color:var(--accent-dark);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;margin-right:5px}
/* Anlage-Detailseite */
.anl-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;padding:0;margin-bottom:16px}
.anl-back:hover{color:var(--accent-dark)}
.anl-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.anl-title-row .obj-badge-anlage{position:static;right:auto}
.anl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:20px 0 22px}
.anl-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.anl-kpi .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700}
.anl-kpi .n{font-family:var(--font-num);font-weight:700;font-size:1.5rem;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.anl-kpi .n.pos{color:var(--green)}
.anl-table-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.anl-table-scroll{overflow-x:auto}
.anl-utable{width:100%;border-collapse:collapse;min-width:720px}
.anl-utable th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-weight:700}
.anl-utable th.num,.anl-utable td.num{text-align:right;font-variant-numeric:tabular-nums}
.anl-utable td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:.92rem}
.anl-utable tbody tr:last-child td{border-bottom:none}
.anl-urow{cursor:pointer;transition:background .1s}
.anl-urow:hover{background:var(--bg)}
.anl-utable .u-lbl{font-family:var(--font-head);font-weight:700}
.anl-open{color:var(--accent-dark);font-weight:600;font-size:.86rem}
.anl-edit-hint{font-size:.84rem;color:var(--ink-soft);padding:12px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line);line-height:1.5}
/* Grundstück-Toggle */
.obj-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.obj-toggle button{flex:1;border:none;background:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-soft);padding:.42em .8em;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.obj-toggle button.on{background:var(--accent);color:#fff}
/* Upload-Zone */
.obj-upzone{margin-top:4px}
.obj-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.obj-thumb{position:relative;width:92px;height:92px;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:grab;background:var(--bg)}
.obj-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.obj-thumb.dragging{opacity:.4}
.obj-thumb-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(20,38,31,.72);color:#fff;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.obj-thumb-x:hover{background:var(--red)}
.obj-add{width:92px;height:92px;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg);color:var(--accent-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.74rem;font-weight:600;cursor:pointer;transition:.15s}
.obj-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.obj-upzone-hint{font-size:.78rem;color:var(--ink-soft);margin-top:8px}
.obj-upzone.obj-upzone-drag{outline:2px dashed var(--accent);outline-offset:6px;border-radius:14px}
.obj-upzone.obj-upzone-drag .obj-add{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* Detail-Galerie */
.obj-ov-gallery{margin:4px 0 14px}
.obj-ov-gallery-lbl{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:8px}
.obj-ov-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.obj-ov-grid-1{grid-template-columns:1fr}
.obj-ov-grid-2{grid-template-columns:1fr 1fr}
.obj-ov-cell{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.obj-ov-cell img{width:100%;height:100%;object-fit:cover;display:block}
.obj-ov-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:4px 0 12px}
.obj-ov-fact{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--bg)}
.obj-ov-fact span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:2px}
.obj-ov-fact b{font-family:var(--font-num);font-size:1rem;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.obj-ov-desc{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0 0 14px}
/* Vorgangs-Picker */
.obj-pp-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.obj-pp-item{text-align:left;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:11px 14px;cursor:pointer;font-size:.95rem;color:var(--ink);transition:.13s}
.obj-pp-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.obj-pp-item b{font-weight:600}
.obj-pp-sub{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:2px}
@media(max-width:560px){
  .obj-grid{grid-template-columns:1fr 1fr;gap:12px}
  .obj-thumb,.obj-add{width:78px;height:78px}
}

/* ==================================================================
   ImmoBricks-Fundament: „Brick"-Signature, Loader, Läuferverband, Motion.
   Der 2:1-Stein (Radius 2px) ersetzt runde Punkte, Prozent-Pillen und Spinner.
   ================================================================== */
/* Brick als Marker (Badges/Chips/Legenden): skaliert mit font-size, nimmt currentColor */
.brick{display:inline-block;width:.9em;height:.45em;border-radius:var(--brick-radius);background:currentColor;vertical-align:middle;flex:none}
.brick-row{display:inline-flex;gap:3px;align-items:center}

/* Brick-Loader: drei pulsierende Steine statt Spinner */
.brick-loader{display:inline-flex;gap:4px;align-items:flex-end}
.brick-loader i{width:14px;height:7px;border-radius:var(--brick-radius);background:var(--green-600);animation:brickPulse 1s var(--ease-out) infinite}
.brick-loader i:nth-child(2){animation-delay:.13s}
.brick-loader i:nth-child(3){animation-delay:.26s}
@keyframes brickPulse{0%,100%{opacity:.28;transform:translateY(0)}42%{opacity:1;transform:translateY(-4px)}}

/* Läuferverband für dunkle Hero-/Leerflächen (auf Forest 900, ≤10% Deckkraft) */
.brick-pattern{background-color:var(--forest-900);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' fill='none' stroke='%23ffffff' stroke-opacity='0.07'%3E%3Cpath d='M0 .5H120M0 30.5H120M0 59.5H120'/%3E%3Cpath d='M.5 0V30M60.5 0V30M119.5 0V30'/%3E%3Cpath d='M30.5 30V60M90.5 30V60'/%3E%3C/svg%3E")}

/* „Aufbau": Elemente erscheinen wie gesetzte Steine – von unten, 60 ms versetzt */
@keyframes ibAufbau{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.ib-aufbau>*{animation:ibAufbau var(--dur-enter) var(--ease-out) both}
.ib-aufbau>*:nth-child(1){animation-delay:0ms}
.ib-aufbau>*:nth-child(2){animation-delay:60ms}
.ib-aufbau>*:nth-child(3){animation-delay:120ms}
.ib-aufbau>*:nth-child(4){animation-delay:180ms}
.ib-aufbau>*:nth-child(5){animation-delay:240ms}
.ib-aufbau>*:nth-child(6){animation-delay:300ms}
.ib-aufbau>*:nth-child(7){animation-delay:360ms}
.ib-aufbau>*:nth-child(n+8){animation-delay:420ms}
@media(prefers-reduced-motion:reduce){
  .brick-loader i{animation:none;opacity:.7}
  .ib-aufbau>*{animation:none}
}