/* ============================================================
   Engelmeyer Consulting · Component Layer - Erweiterung NUOW
   Ergänzt components.css. Gleiche Konventionen:
   nur Tokens aus colors_and_type.css, Prefix .ec-, keine Hex-Werte,
   keine Gradients, kleine Radien, Haarlinien.
   Laden NACH components.css.
   ============================================================ */

/* ---------- Anker-Offset unter dem Sticky-Header ---------- */
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Icons (Inline-Sprite, 1.5px Strich) ---------- */
.ec-icon{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ec-icon--sm{width:16px;height:16px}
.ec-icon--lg{width:24px;height:24px}

/* ---------- Marken-Lockup: Wortmarke neben dem Absenderlogo ---------- */
.ec-brandlock{display:flex;align-items:center;gap:var(--sp-4);text-decoration:none;min-width:0}
.ec-brandlock__word{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);line-height:1;letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ec-blue-900);white-space:nowrap}
.ec-brandlock__sep{width:1px;align-self:stretch;background:var(--rule);flex:none}
.ec-brandlock__mark{height:26px;display:block}
/* Auf schmalen Geräten tritt das Absenderlogo zurück, die Wortmarke bleibt. */
@media(max-width:620px){
  .ec-header__inner{gap:var(--sp-3)}
  .ec-brandlock{gap:var(--sp-3)}
  .ec-brandlock__sep,.ec-brandlock__mark{display:none}
}

/* ---------- Header: Zustandswechsel beim Scrollen + Mobile-Navigation ---------- */
.ec-header{transition:box-shadow var(--dur-base) var(--ease-standard)}
.ec-header--scrolled{box-shadow:var(--shadow-1)}
.ec-header__inner{min-height:72px}
.ec-nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:calc(var(--sp-3) * -1);background:transparent;border:0;border-radius:var(--r-sm);color:var(--ec-blue-900);cursor:pointer}
.ec-nav-toggle:hover{background:var(--ec-blue-100)}
.ec-nav-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Genau ein Kontakt-Button im Header, rechts außen vor dem Menü-Schalter. */
.ec-header__cta{display:inline-flex;margin-left:auto}

@media(max-width:1040px){
  .ec-nav-toggle{display:inline-flex}
  .ec-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-surface);border-bottom:1px solid var(--border-1);
    box-shadow:var(--shadow-2);padding:var(--sp-3) var(--sp-5) var(--sp-5)
  }
  .ec-nav--open{display:flex}
  .ec-nav a{display:flex;align-items:center;min-height:44px;font-size:var(--fs-body);border-bottom:1px solid var(--border-1)}
  .ec-nav a:last-child{border-bottom:0}
}
@media(max-width:420px){
  .ec-header__cta{padding:8px 12px}
}

/* ---------- Titelbereich ----------
   Entspricht .ec-hero* aus components.css, unter neutralem Namen und mit
   angepasstem Innenabstand. Die Originalklassen bleiben dort unverändert,
   damit der Design-System-Layer austauschbar bleibt; auf dieser Seite
   werden sie nicht verwendet. */
.ec-intro{padding-block:var(--sp-9) var(--sp-8)}
.ec-intro__title{font-family:var(--font-display);font-weight:500;font-size:clamp(38px,5.2vw,var(--fs-display));line-height:var(--lh-tight);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ec-blue-900);margin:0;max-width:22ch;text-wrap:balance}
.ec-intro__lead{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-loose);color:var(--fg-2);margin:var(--sp-5) 0 0;max-width:48ch}
.ec-intro__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.ec-facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);margin-top:var(--sp-8)}
.ec-facts__item{flex:1 1 220px;padding:var(--sp-5) var(--sp-5) 0 0;box-sizing:border-box}
.ec-facts__label{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ec-taupe-700);margin-bottom:var(--sp-2)}
.ec-facts__text{font-family:var(--font-serif);font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--ec-blue-900);margin:0}

/* ---------- Neutrale Sektionsfläche (Token, kein neuer Farbwert) ---------- */
.ec-section--sunken{background:var(--bg-sunken)}

/* Grid-Kinder dürfen schrumpfen, sonst weitet breiter Inhalt
   (etwa die Konfigurator-Tabelle) die Spalte und damit die Seite. */
.ec-grid > *{min-width:0}

/* ---------- Karten-Grid mit Zwischenstufe für Notebooks ---------- */
.ec-grid--cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1040px){.ec-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.ec-grid--cards{grid-template-columns:1fr}}
.ec-grid--2up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.ec-grid--2up{grid-template-columns:1fr}}
.ec-grid--4up{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.ec-grid--4up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ec-grid--4up{grid-template-columns:1fr}}

/* ---------- Kennzahl mit Quellenangabe ---------- */
.ec-figure{padding-top:var(--sp-5);border-top:1px solid var(--rule)}
.ec-figure__value{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1.05;letter-spacing:var(--tracking-display);color:var(--ec-blue-700);margin:0}
.ec-figure__label{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-2);margin:var(--sp-3) 0 0}
.ec-figure__source{font-family:var(--font-sans);font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);margin:var(--sp-3) 0 0}
.ec-figure--lead{border-top:0;padding-top:0}
.ec-figure--lead .ec-figure__value{font-size:var(--fs-display);line-height:1}
@media(max-width:700px){.ec-figure--lead .ec-figure__value{font-size:var(--fs-h1)}}

/* ---------- Ablauf: vier Schritte mit Haarlinien-Achse ---------- */
.ec-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
@media(max-width:980px){.ec-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ec-flow{grid-template-columns:1fr}}
.ec-flow__step{position:relative;padding-top:var(--sp-5);border-top:1px solid var(--border-2)}
.ec-flow__step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ec-blue-700)}
.ec-flow__num{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ec-taupe-600);margin-bottom:var(--sp-3)}
.ec-flow__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--ec-blue-900);margin:0 0 var(--sp-2)}
.ec-flow__body{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-2);margin:0}

/* ---------- Merkmalslisten (ist / ist nicht, Vorteile) ---------- */
.ec-marks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.ec-marks li{display:flex;align-items:flex-start;gap:var(--sp-3);font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-2)}
.ec-marks .ec-icon{margin-top:2px;color:var(--ec-blue-600)}
.ec-marks--negative .ec-icon{color:var(--ec-taupe-500)}
/* Einzelner Punkt als nicht enthalten. Bewusst stark aufgehellt, damit die
   Grenze zwischen den Paketen auf einen Blick sichtbar ist. Der Text liegt
   damit auf der getönten Fläche bei 2,5:1 und unter der AA-Schwelle; das ist
   eine gestalterische Entscheidung zugunsten der Lesbarkeit des Vergleichs.
   Die Information selbst geht nicht verloren: Symbolform und ein
   .ec-sr-only-Text im Listenpunkt tragen sie unabhängig von der Farbe.
   Rückweg zu AA: --fg-muted durch --ec-ink-600 ersetzen. */
.ec-marks li.ec-mark--off{color:var(--fg-muted)}
.ec-marks li.ec-mark--off .ec-icon{color:var(--ec-ink-300)}
.ec-section--inverse .ec-marks li{color:var(--ec-blue-200)}
.ec-section--inverse .ec-marks .ec-icon{color:var(--ec-blue-300)}
.ec-section--inverse .ec-marks--negative .ec-icon{color:var(--ec-taupe-400)}

/* ---------- Gegenüberstellung zweier Sichtweisen ---------- */
.ec-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);position:relative}
.ec-split__side{padding-top:var(--sp-5);border-top:1px solid var(--rule)}
.ec-split__side:first-child{padding-right:var(--sp-7);border-right:1px solid var(--border-1)}
@media(max-width:820px){
  .ec-split{grid-template-columns:1fr;gap:var(--sp-6)}
  .ec-split__side:first-child{padding-right:0;border-right:0}
}

/* Der Basis-Layer setzt kein globales box-sizing. Gepolsterte Flächen
   brauchen es, sonst wachsen sie über ihre Rasterzelle hinaus. */
.ec-card,.ec-panel,.ec-note,.ec-pillar{box-sizing:border-box}

/* ---------- Prüftiefen: Stufenkarte mit Tiefen-Meter ---------- */
/* Kein height:100% — Rasterzellen strecken ihre Kinder ohnehin. */
.ec-depth{display:flex;flex-direction:column}
.ec-depth__meter{display:flex;gap:3px;margin-bottom:var(--sp-4)}
.ec-depth__seg{height:4px;flex:1;background:var(--ec-ink-200);border-radius:var(--r-xs)}
.ec-depth__seg--on{background:var(--ec-blue-700)}
.ec-depth__out{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border-1);font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3)}
.ec-depth__out strong{color:var(--fg-2);font-weight:600}

/* ---------- Auswertungspanel (Konfigurator, Rechner) ---------- */
.ec-panel{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-1)}
.ec-panel__title{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ec-taupe-700);margin:0 0 var(--sp-4)}
.ec-readout{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0}
.ec-readout__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-1)}
.ec-readout__row:last-child{border-bottom:0;padding-bottom:0}
.ec-readout__key{font-family:var(--font-sans);font-size:var(--fs-small);color:var(--fg-2)}
.ec-readout__val{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-small);color:var(--fg-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.ec-readout__val--figure{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);letter-spacing:var(--tracking-display);color:var(--ec-blue-700)}

/* ---------- Hinweisblock für belegbare Lücken ---------- */
.ec-note{display:flex;gap:var(--sp-3);border-left:1px solid var(--ec-taupe-500);padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);margin-top:var(--sp-5)}
.ec-note p{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3);margin:0}
.ec-note .ec-icon{color:var(--ec-taupe-600);margin-top:1px}

/* ---------- Empfängerauswahl für Ergebnistypen ---------- */
.ec-roles{display:flex;flex-direction:column;border-top:1px solid var(--border-1)}
.ec-role{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;min-height:44px;padding:var(--sp-4);background:transparent;border:0;border-bottom:1px solid var(--border-1);border-left:2px solid transparent;cursor:pointer;text-align:left;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.ec-role:hover{background:var(--bg-surface)}
.ec-role:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ec-role[aria-selected=true]{background:var(--bg-surface);border-left-color:var(--ec-blue-700)}
.ec-role__name{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--fg-1)}
.ec-role[aria-selected=true] .ec-role__name{color:var(--ec-blue-700)}
.ec-role__hint{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3)}
.ec-report__eyebrow{display:block;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ec-taupe-700);margin-bottom:var(--sp-3)}
.ec-report__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--ec-blue-900);margin:0 0 var(--sp-4)}

/* ---------- Rechner: Regler ---------- */
.ec-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;display:block}
.ec-range:focus-visible{outline:none}
.ec-range::-webkit-slider-runnable-track{height:2px;background:var(--border-2);border-radius:var(--r-pill)}
.ec-range::-moz-range-track{height:2px;background:var(--border-2);border-radius:var(--r-pill)}
.ec-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:var(--ec-blue-700);border:2px solid var(--bg-surface);box-shadow:var(--shadow-1)}
.ec-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ec-blue-700);border:2px solid var(--bg-surface);box-shadow:var(--shadow-1)}
.ec-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}
.ec-range:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}
.ec-range__scale{display:flex;justify-content:space-between;font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--fg-3);margin-top:var(--sp-1)}

/* ---------- Segmentierte Auswahl (Kadenz) ----------
   Ein Rahmen um beide Segmente, Trennung als Haarlinie. Der gewählte
   Zustand wird durch eine getönte Fläche markiert, nicht durch einen
   gefüllten Block, damit der Schalter neben Reglern und Karten nicht
   dominiert. */
.ec-choice{display:inline-flex;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);max-width:100%}
.ec-choice__item{display:flex;min-width:0}
.ec-choice__item input{position:absolute;opacity:0;width:1px;height:1px}
.ec-choice__box{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-5);font-family:var(--font-sans);font-weight:500;font-size:var(--fs-small);color:var(--fg-2);cursor:pointer;white-space:nowrap;border-radius:var(--r-sm);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.ec-choice__item + .ec-choice__item .ec-choice__box{border-left:1px solid var(--border-1);border-radius:0 var(--r-sm) var(--r-sm) 0}
.ec-choice__item:first-child .ec-choice__box{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.ec-choice__box:hover{background:var(--ec-blue-050);color:var(--ec-blue-900)}
.ec-choice__item input:checked + .ec-choice__box{background:var(--ec-blue-100);color:var(--ec-blue-900);font-weight:600}
/* Innenliegender Ring, damit er vom Rahmen nicht beschnitten wird. */
.ec-choice__item input:focus-visible + .ec-choice__box{outline:none;box-shadow:inset 0 0 0 2px var(--ec-blue-700)}
@media(max-width:520px){
  .ec-choice{display:flex;width:100%}
  .ec-choice__item{flex:1 1 0}
  .ec-choice__box{justify-content:center;padding:0 var(--sp-3);white-space:normal;text-align:center}
}
.ec-field__value{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body);color:var(--fg-1);font-variant-numeric:tabular-nums}

/* ---------- Einstiegspfade ---------- */
.ec-path__foot{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border-1)}
.ec-inline-link{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-small);color:var(--fg-link);text-decoration:none}
.ec-inline-link:hover{color:var(--fg-link-hover)}
.ec-inline-link .ec-icon{width:16px;height:16px}

/* ---------- Vertrauensblock ---------- */
.ec-trust__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-1);border-radius:var(--r-sm);color:var(--ec-blue-700);margin-bottom:var(--sp-4)}

/* ---------- FAQ (native details/summary) ---------- */
.ec-faq{border-top:1px solid var(--border-1)}
.ec-faq__item{border-bottom:1px solid var(--border-1)}
.ec-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-5) 0;font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--ec-blue-900);cursor:pointer;list-style:none}
.ec-faq__q::-webkit-details-marker{display:none}
.ec-faq__q:hover{color:var(--ec-blue-700)}
.ec-faq__q:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
.ec-faq__q .ec-icon{color:var(--ec-taupe-600);margin-top:4px;transition:transform var(--dur-base) var(--ease-standard)}
.ec-faq__item[open] .ec-faq__q .ec-icon{transform:rotate(180deg)}
.ec-faq__a{padding:0 0 var(--sp-5);max-width:78ch}
.ec-faq__a p{font-size:var(--fs-small);margin:0 0 var(--sp-3)}
.ec-faq__a p:last-child{margin-bottom:0}

/* ---------- Kontaktformular auf inverser Fläche ---------- */
.ec-section--inverse .ec-label{color:var(--fg-on-brand)}
.ec-section--inverse .ec-hint{color:var(--ec-blue-200)}
.ec-form-note{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--ec-blue-200);margin:0}
.ec-contact__aside{display:flex;flex-direction:column;gap:var(--sp-5)}

/* ---------- Feine Hilfsklassen ---------- */
.ec-mt-5{margin-top:var(--sp-5)}
.ec-mt-6{margin-top:var(--sp-6)}
.ec-mt-7{margin-top:var(--sp-7)}