/* =================================================================
   LegalConsul — Modul «Deckungscheck» (Rechtsschutzversicherung)
   Wird nach ratgeber.css und stil.css geladen und gewinnt damit.
   ================================================================= */

:root{
  --dc-navy:#13243d; --dc-gold:#b08d57; --dc-gold-d:#977542;
  --dc-petrol:#2e6b6a; --dc-sand:#efe7d8; --dc-sand-2:#e3d6bf;
  --dc-bordeaux:#6e3b3f; --dc-green:#2f6b46;
  --dc-line:#dfe2e7; --dc-muted:#5f6b7a;
}

.wrap.wide{ max-width:940px }

/* ---- Sprachwahl --------------------------------------------------- */
.lang{ display:flex; gap:10px; font-size:13px; margin:2px 0 14px }
.lang a{ color:var(--dc-muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px }
.lang a:hover{ border-bottom-color:var(--dc-gold) }
.lang a[aria-current="page"]{ color:var(--dc-navy); font-weight:600; border-bottom-color:var(--dc-gold) }

/* ---- Kennzahlenzeile ---------------------------------------------- */
.kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 6px }
.kpi div{ background:#fff; border:1px solid var(--dc-line); border-radius:12px; padding:13px 14px }
.kpi b{ display:block; font-family:Georgia,serif; font-size:25px; color:var(--dc-navy); line-height:1.1; font-variant-numeric:tabular-nums }
.kpi span{ display:block; font-size:12.5px; color:var(--dc-muted); margin-top:3px; line-height:1.35 }

/* ---- Hebel-Karten -------------------------------------------------- */
.hebel{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0 }
.hebel article{ background:#fff; border:1px solid var(--dc-line); border-top:3px solid var(--dc-gold); border-radius:12px; padding:14px 15px }
.hebel h3{ font-size:15.5px; margin:0 0 5px; color:var(--dc-navy) }
.hebel p{ font-size:14.5px; margin:0; color:#33404f }
.hebel .norm{ display:inline-block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dc-gold-d); background:rgba(176,141,87,.10); border-radius:5px; padding:2px 7px; margin-bottom:7px }

/* ---- Tabellen ------------------------------------------------------ */
.tab{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; background:#fff;
  border:1px solid var(--dc-line); border-radius:12px; overflow:hidden }
.tab th,.tab td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--dc-line); vertical-align:top }
.tab th{ background:#f3f1ec; font-size:13px; letter-spacing:.02em; color:var(--dc-navy); font-weight:600 }
.tab tr:last-child td{ border-bottom:none }
.tab td:first-child{ font-weight:600; color:var(--dc-navy); white-space:nowrap }
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---- Check-Werkzeug ------------------------------------------------ */
.check{ background:#fff; border:1px solid var(--dc-sand-2); border-radius:14px; padding:20px; margin:20px 0;
  box-shadow:0 10px 30px rgba(19,36,61,.06) }
.check > h2{ margin:0 0 4px; font-size:20px }
.check .sub{ font-size:14px; color:var(--dc-muted); margin-bottom:14px }
.q{ border-top:1px solid var(--dc-line); padding:13px 0 }
.q:first-of-type{ border-top:none }
.q p.frage{ font-weight:600; color:var(--dc-navy); margin:0 0 8px; font-size:15px }
.opt{ display:flex; flex-wrap:wrap; gap:8px }
.opt button{ font:inherit; font-size:14px; cursor:pointer; background:#f7f6f3; color:#33404f;
  border:1px solid var(--dc-line); border-radius:9px; padding:8px 13px; transition:.12s }
.opt button:hover{ border-color:var(--dc-gold) }
.opt button[aria-pressed="true"]{ background:var(--dc-navy); color:#fff; border-color:var(--dc-navy) }
.check input[type="number"]{ font:inherit; font-size:14px; width:150px; padding:8px 10px;
  border:1px solid var(--dc-line); border-radius:9px; background:#f7f6f3 }

.ergebnis{ margin-top:16px; border-radius:12px; padding:16px 18px; display:none }
.ergebnis.on{ display:block }
.ergebnis h3{ margin:0 0 6px; font-size:18px }
.ergebnis p{ margin:0 0 8px; font-size:15px }
.ergebnis ul{ margin:8px 0 0 18px; font-size:14.5px }
.ergebnis li{ margin-bottom:5px }
.e-gruen{ background:rgba(47,107,70,.07); border:1px solid rgba(47,107,70,.28) }
.e-gruen h3{ color:var(--dc-green) }
.e-gold{ background:rgba(176,141,87,.09); border:1px solid rgba(176,141,87,.32) }
.e-gold h3{ color:var(--dc-gold-d) }
.e-rot{ background:rgba(110,59,63,.07); border:1px solid rgba(110,59,63,.26) }
.e-rot h3{ color:var(--dc-bordeaux) }
.warn{ margin-top:10px; font-size:13.5px; color:var(--dc-bordeaux);
  background:rgba(110,59,63,.06); border:1px solid rgba(110,59,63,.18); border-radius:9px; padding:9px 11px }

/* ---- Preisstufen ---------------------------------------------------- */
.preise{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0 }
.stufe{ background:#fff; border:1px solid var(--dc-line); border-radius:12px; padding:15px; display:flex; flex-direction:column }
.stufe.vor{ border:1px solid var(--dc-gold); box-shadow:0 10px 28px rgba(176,141,87,.16) }
.stufe h3{ font-size:15.5px; margin:0 0 3px; color:var(--dc-navy) }
.stufe .preis{ font-family:Georgia,serif; font-size:26px; color:var(--dc-navy); margin:4px 0 8px; font-variant-numeric:tabular-nums }
.stufe .preis small{ font-size:13px; color:var(--dc-muted); font-family:inherit }
.stufe ul{ margin:0 0 12px 17px; font-size:13.8px; color:#33404f }
.stufe li{ margin-bottom:4px }
.stufe a{ margin-top:auto; display:block; text-align:center; text-decoration:none; font-weight:600; font-size:14px;
  padding:9px 12px; border-radius:9px; background:#f3f1ec; color:var(--dc-navy); border:1px solid var(--dc-line) }
.stufe.vor a{ background:var(--dc-gold); color:#fff; border-color:var(--dc-gold) }

/* ---- Ablauf --------------------------------------------------------- */
.schritte{ counter-reset:s; margin:14px 0; padding:0; list-style:none }
.schritte li{ counter-increment:s; position:relative; padding:0 0 14px 44px; border-left:2px solid var(--dc-sand-2); margin-left:14px }
.schritte li:last-child{ border-left-color:transparent; padding-bottom:0 }
.schritte li::before{ content:counter(s); position:absolute; left:-16px; top:-2px; width:30px; height:30px; border-radius:50%;
  background:var(--dc-navy); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; font-weight:600 }
.schritte b{ color:var(--dc-navy) }

/* ---- B2B ------------------------------------------------------------ */
.zielgruppen{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0 }
.zielgruppen article{ background:#fff; border:1px solid var(--dc-line); border-radius:12px; padding:15px }
.zielgruppen h3{ font-size:16px; margin:0 0 5px; color:var(--dc-navy) }
.zielgruppen p{ font-size:14.5px; margin:0 0 7px; color:#33404f }
.zielgruppen .plus{ font-size:13.5px; color:var(--dc-gold-d); font-weight:600 }

/* ---- Portal --------------------------------------------------------- */
.portal-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px }
.pill{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; white-space:nowrap }
.p-neu{ background:rgba(55,64,126,.10); color:#37407e }
.p-lauf{ background:rgba(176,141,87,.14); color:var(--dc-gold-d) }
.p-frist{ background:rgba(110,59,63,.09); color:var(--dc-bordeaux) }
.p-ok{ background:rgba(47,107,70,.10); color:var(--dc-green) }
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.filter button{ font:inherit; font-size:13.5px; cursor:pointer; background:#fff; border:1px solid var(--dc-line);
  border-radius:20px; padding:6px 14px; color:#33404f }
.filter button[aria-pressed="true"]{ background:var(--dc-navy); color:#fff; border-color:var(--dc-navy) }
.leer{ text-align:center; color:var(--dc-muted); font-size:14px; padding:26px 0 }

/* ---- Rechtstexte ----------------------------------------------------- */
.rt h2{ font-size:19px; margin-top:26px }
.rt h3{ font-size:15.5px; margin-top:14px }
.rt p,.rt li{ font-size:14.6px }
.rt ol.stufen{ margin-left:18px }
.rt .stand{ font-size:13px; color:var(--dc-muted); margin-bottom:16px }

/* ---- Fussbereich ------------------------------------------------------ */
.fuss{ border-top:1px solid var(--dc-line); margin-top:30px; padding-top:14px; font-size:13.5px; color:var(--dc-muted) }
.fuss a{ color:var(--dc-gold-d); margin-right:14px; text-decoration:none }

@media(max-width:820px){
  .kpi,.hebel,.preise,.zielgruppen{ grid-template-columns:1fr }
  .preise .stufe{ padding:14px }
}
@media print{
  .check,.filter,.opt,.cta{ display:none }
}