/* Ratgeber - Lesetexte. Baut auf marke.css auf: Farben, Schriften, Kopf,
   Fuss und FAQ kommen von dort, hier steht nur, was ein langer Text braucht.
   Die Akzentfarbe folgt dem Produkt (body.ida / body.con), ohne Produkt die
   Hausfarbe. */

.artikel{max-width:760px;margin-inline:auto;padding-block:30px 10px}
.brotkrumen{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--gedaempft);margin-bottom:20px}
.brotkrumen a{color:var(--gedaempft);text-decoration:none}
.brotkrumen a:hover{color:var(--text);text-decoration:underline}
.artikel .kennung{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--von,var(--marke));margin-bottom:10px}
.artikel h1{font-size:clamp(1.7rem,4.6vw,2.5rem);font-weight:900;margin-bottom:12px}
.artikel .meta{font-size:13.5px;color:var(--gedaempft);margin-bottom:24px}
.artikel .einstieg{font-size:clamp(1.02rem,2.3vw,1.13rem);color:var(--text-2);margin-bottom:24px}

/* "Kurz gesagt" - die Antwort zuerst, fuer Eilige und fuer Suchmaschinen. */
.kurz{border:1px solid var(--linie);border-left:4px solid var(--von,var(--marke));
  border-radius:var(--r-s);background:var(--flaeche);padding:16px 18px 6px;margin-bottom:28px}
.kurz .titel{display:block;font-family:var(--f-display);font-weight:900;font-size:1.02rem;margin-bottom:8px}
.kurz ul{margin:0 0 10px;padding-left:20px;color:var(--text-2)}
.kurz li{margin-bottom:6px}
.kurz strong{color:var(--text)}

.inhalt-liste{border:1px solid var(--linie);border-radius:var(--r-s);padding:14px 18px;margin-bottom:30px}
.inhalt-liste .titel{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gedaempft);margin-bottom:8px}
.inhalt-liste ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14.5px}
.inhalt-liste a{color:var(--text-2);text-decoration:none}
.inhalt-liste a:hover{color:var(--text);text-decoration:underline}

.text h2{font-size:clamp(1.28rem,3.4vw,1.62rem);font-weight:900;margin:40px 0 12px}
.text h3{font-size:1.07rem;font-weight:800;margin:24px 0 8px}
.text p{color:var(--text-2);margin-bottom:14px}
.text ul,.text ol{color:var(--text-2);padding-left:22px;margin:0 0 16px}
.text li{margin-bottom:6px}
.text strong{color:var(--text)}
.text a{color:var(--marke)}
.text .beispiel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-s);
  padding:14px 16px;margin:4px 0 18px;font-size:14.5px;color:var(--text-2)}
.text .beispiel b{color:var(--text)}

/* Tabellen duerfen breiter sein als das Telefon - dann scrollen sie in
   ihrem Rahmen, nie die ganze Seite. */
.tabelle-huelle{overflow-x:auto;margin:6px 0 20px;border:1px solid var(--linie);border-radius:var(--r-s)}
.tabelle-huelle table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.tabelle-huelle th,.tabelle-huelle td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle-huelle th{background:var(--flaeche-2);color:var(--text);font-weight:700}
.tabelle-huelle td{color:var(--text-2);font-variant-numeric:tabular-nums}
.tabelle-huelle tr:last-child td{border-bottom:0}

.artikel .faq{padding-block:26px 0}
.artikel .faq-liste{max-width:none}
.artikel .querverweis{margin-block:30px}
.hinweis-recht{font-size:13px;color:var(--gedaempft);border-top:1px solid var(--linie);
  padding-top:14px;margin-top:28px}

/* Uebersicht /ratgeber/ */
.rg-kopf{max-width:760px;padding-block:40px 24px}
.rg-kopf h1{font-size:clamp(1.8rem,4.8vw,2.6rem);font-weight:900;margin-bottom:10px}
.rg-kopf p{color:var(--text-2)}
.rg-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-bottom:48px}
@media (max-width:880px){.rg-liste{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.rg-karte{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px 20px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  text-decoration:none;color:inherit;overflow:hidden;transition:transform .18s ease,border-color .18s ease}
.rg-karte::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--von),var(--bis))}
.rg-karte:hover{transform:translateY(-3px);border-color:rgba(148,163,184,.36)}
.rg-karte:focus-visible{outline:2px solid var(--marke);outline-offset:3px}
.rg-karte .kennung{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--von)}
.rg-karte h2{font-size:1.2rem;font-weight:900}
.rg-karte p{color:var(--text-2);font-size:14.5px}
.rg-karte .weiter{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px;color:var(--von)}