/* preise.css — Komponenten für /preise und /nis2-check
   Additiv zu theme.css. Nutzt dessen CSS-Variablen, überschreibt nichts Bestehendes.
   Deploy: an theme.css anhängen ODER separat einbinden in layout/base.php. */

.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;
  color:var(--color-primary);margin:0 0 .4rem}
.section-hero-compact{padding-top:3rem;padding-bottom:2rem}
.section-intro{color:var(--color-text-muted);max-width:52ch;margin-bottom:1.6rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}

/* --- Größenklassen-Karten --- */
.card-klasse{border:1px solid var(--color-border);border-radius:var(--radius);
  padding:1.4rem;background:var(--color-bg);transition:border-color .15s,box-shadow .15s}
.card-klasse.is-active{border-color:var(--color-primary);box-shadow:var(--shadow)}
.card-klasse h3{margin:.6rem 0 .2rem;font-size:1.15rem}
.card-price{margin:.8rem 0 .2rem;font-size:1.05rem}
.card-price strong{color:var(--color-primary)}

/* --- Preistafel --- */
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th,.table td{padding:.75rem .8rem;border-bottom:1px solid var(--color-border);
  text-align:left;vertical-align:top}
.table thead th{background:var(--color-navy);color:#fff;font-weight:600;white-space:nowrap}
.table .num{text-align:right;white-space:nowrap}
.th-sub,.td-sub{display:block;font-weight:400;font-size:.8rem;opacity:.75;margin-top:.15rem}
.table-preise tbody tr:hover{background:var(--color-bg-alt)}
.row-highlight{background:var(--color-primary-soft)}
.row-highlight td{font-weight:600}

/* --- Rechner --- */
.rechner{display:grid;grid-template-columns:1fr 22rem;gap:1.6rem;align-items:start}
.rechner-eingabe{border:1px solid var(--color-border);border-radius:var(--radius);padding:1.4rem;
  background:var(--color-bg)}
.rechner-module{border:0;padding:0;margin:0 0 1.2rem}
.rechner-module legend{font-weight:700;font-size:.9rem;margin-bottom:.5rem;padding:0}
.rechner-basis{background:var(--color-bg-alt);border-left:3px solid var(--color-gold);
  padding:.7rem .9rem;border-radius:var(--radius-sm);font-size:.9rem;margin:0 0 .7rem}
.field{display:block;margin-bottom:.8rem}
.field span{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.field input{width:9rem;padding:.55rem .7rem;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);font:inherit;font-size:1.1rem}
.rechner-klasse{margin:0 0 1.2rem;font-size:.95rem}
.check{display:flex;gap:.55rem;align-items:flex-start;padding:.35rem 0;font-size:.93rem;cursor:pointer}
.check input{margin-top:.25rem;flex:0 0 auto}
.check em{display:block;font-style:normal;font-size:.8rem;color:var(--color-text-muted)}

/* --- Ergebnis-Panel --- */
.rechner-ergebnis{position:sticky;top:1rem;border:1px solid var(--color-primary);
  border-radius:var(--radius);padding:1.3rem;background:var(--color-bg-alt);box-shadow:var(--shadow-sm)}
.erg-zeile{display:flex;justify-content:space-between;gap:1rem;margin:.35rem 0;font-size:.93rem}
.erg-zeile span{color:var(--color-text-muted)}
.erg-foerderung strong{color:var(--color-success)}
.rechner-ergebnis hr{border:0;border-top:1px solid var(--color-border);margin:.9rem 0}
.erg-summe{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:.2rem 0 1rem}
.erg-summe span{font-weight:600}
.erg-summe strong{font-size:1.6rem;color:var(--color-primary);line-height:1.1}
.btn-block{display:block;width:100%;text-align:center}

/* --- Rechenbeispiele --- */
.card-beispiel{border:1px solid var(--color-border);border-radius:var(--radius);padding:1.3rem;
  background:var(--color-bg);display:flex;flex-direction:column}
.card-beispiel h3{margin:.1rem 0 .8rem;font-size:1.1rem}
.beispiel-liste{list-style:none;margin:0 0 1rem;padding:0;flex:1}
.beispiel-liste li{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem 0;
  border-bottom:1px dashed var(--color-border);font-size:.9rem}
.beispiel-liste em{display:block;font-style:normal;font-size:.78rem;color:var(--color-text-muted)}
.beispiel-summe{margin:0;font-size:1rem}
.beispiel-summe strong{font-size:1.25rem;color:var(--color-primary)}

/* --- FAQ --- */
.faq{margin:0}
.faq dt{font-weight:700;margin-top:1.2rem}
.faq dd{margin:.35rem 0 0;color:var(--color-text-muted)}

/* --- Hilfsklassen --- */
.center{text-align:center}
.section-cta{background:var(--color-navy);color:#fff}
.section-cta h2,.section-cta .lead{color:#fff}
.small{font-size:.83rem}

@media (max-width:860px){
  .rechner{grid-template-columns:1fr}
  .rechner-ergebnis{position:static}
}

/* ===== Komponenten für /nis2-check ===== */
.select-wide{width:100%;max-width:34rem;padding:.6rem .7rem;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);font:inherit;background:var(--color-bg)}
.sr-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check-form .rechner-module{border:1px solid var(--color-border);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-bottom:1rem;background:var(--color-bg)}
.check-form legend{font-size:1rem;font-weight:700;padding:0 .3rem}
.check-ergebnis{margin-top:2rem}
.ergebnis-karte{border:1px solid var(--color-border);border-left:5px solid var(--color-primary);
  border-radius:var(--radius);padding:1.6rem;background:var(--color-bg);box-shadow:var(--shadow-sm)}
.ergebnis-karte h2{margin-top:0;font-size:1.35rem}
.ergebnis-karte h3{margin:1.4rem 0 .5rem;font-size:1.05rem}
.ergebnis-wesentlich{border-left-color:var(--color-danger);background:#fdf4f4}
.ergebnis-wichtig{border-left-color:var(--color-warning);background:#fdfaf2}
.ergebnis-unwahrscheinlich,.ergebnis-extern{border-left-color:var(--color-success);background:#f3f8f4}
.ergebnis-unklar{border-left-color:var(--color-text-muted)}
.ergebnis-schritte{margin:0 0 1rem;padding-left:1.3rem}
.ergebnis-schritte li{margin-bottom:.45rem}
.ergebnis-cta{margin:1.3rem 0 .6rem;display:flex;flex-wrap:wrap;gap:.6rem}

/* ===== Nachtrag: Klassen, die theme.css nicht kennt ===== */
.container.narrow,.narrow{max-width:var(--container-narrow,52rem);margin-left:auto;margin-right:auto}
.center{text-align:center}

.btn-ghost{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}
.btn-ghost:hover{background:var(--color-primary);color:#fff}

.card{border:1px solid var(--color-border);border-radius:var(--radius);padding:1.4rem;
  background:var(--color-bg)}
.card h3{margin-top:.3rem}
.card-grid{display:grid;gap:1.2rem;margin-top:1.2rem}
.card-grid-3{grid-template-columns:repeat(3,1fr)}

.table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--color-bg)}
.table th,.table td{padding:.75rem .8rem;border-bottom:1px solid var(--color-border);
  text-align:left;vertical-align:top}
.table thead th{background:var(--color-navy);color:#fff;font-weight:600;white-space:nowrap}
.table .num{text-align:right;white-space:nowrap}

.faq{margin:0}
.faq dt{font-weight:700;margin-top:1.2rem}
.faq dd{margin:.35rem 0 0;color:var(--color-text-muted)}

@media (max-width:860px){ .card-grid-3{grid-template-columns:1fr} }