/* Artikelbausteine der SEO-Seiten im Design der Startseite.
   Lädt NACH landing-storytelling.css und nutzt nur dessen Tokens und
   Schriftstufen — keine eigenen Farben, keine eigenen Größen. */

.breadcrumb{font-size:var(--t-s);color:var(--tinte-2);margin-bottom:22px}
/* SEO-Überschriften sind lang: eine Stufe kleiner als die H1 der Startseite */
.hero h1{font-size:var(--t-3xl)}
#moment .kapitel{padding-bottom:40px}
.hinweis{padding-top:10px}
.breadcrumb a{font-weight:600;color:var(--tinte);text-decoration:none}
.hand{color:var(--salbei-tief)}

/* Hero und Kapitel ohne Familienbild: Salbeifläche mit großem Telefon */
.buehne.ohne-bild{background:var(--salbei);aspect-ratio:3/1.7;display:flex;align-items:flex-end;justify-content:center}
.buehne.ohne-bild .telefon{position:relative;right:auto;bottom:-4px;width:260px}
.bild.ohne-bild{background:var(--salbei);border-radius:28px;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.bild.ohne-bild .telefon{position:relative;right:auto;left:auto;bottom:-6px;width:210px}

/* Fließtext: die bisherigen Abschnitte, lesbar gesetzt */
.artikel{padding:40px 0 20px}
.artikel .spalte{max-width:720px;margin:0 auto}
.artikel h2{font-size:var(--t-2xl);margin:64px 0 18px}
.artikel h2:first-child{margin-top:0}
.artikel h3{font-size:var(--t-xl);margin:34px 0 12px}
.artikel p{color:var(--tinte-2);margin:0 0 18px}
.artikel p strong,.artikel li strong{color:var(--tinte)}
.artikel ul,.artikel ol{margin:0 0 22px;padding-left:22px;color:var(--tinte-2)}
.artikel li{margin:0 0 10px}
.artikel a{color:var(--tinte);text-underline-offset:4px}

/* Aktionsband zwischen den Abschnitten */
.zwischenruf{background:var(--salbei-hell);border-radius:24px;padding:40px 44px;margin:56px 0}
.zwischenruf h2{font-size:var(--t-2xl);margin:0 0 14px}
.zwischenruf p{color:var(--tinte-2);margin:0 0 24px;max-width:56ch}
.zwischenruf .fine{margin:14px 0 0}

/* Datenschutz-Hinweis als kleines Burgund-Kapitel */
.hinweis-privat{background:var(--burgund);color:var(--auf-burgund);border-radius:24px;padding:36px 40px;margin:56px 0}
.hinweis-privat h3{font-size:var(--t-xl);color:var(--weiss);margin:0 0 12px}
.hinweis-privat p{color:var(--auf-burgund-2);margin:0}
.hinweis-privat a{color:var(--weiss)}

/* Vergleichstabelle der Vergleichsseiten */
.cmp-scroll{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.cmp{border-collapse:collapse;width:100%;min-width:460px;font-size:var(--t-s)}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top;color:var(--tinte-2)}
.cmp thead th{font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--tinte)}
.cmp tbody th{font-weight:600;color:var(--tinte);width:30%}
.cmp .own{font-weight:600;color:var(--tinte)}
.cmp-note{font-size:var(--t-xs)!important;max-width:64ch}

/* Weiterlesen */
.related{padding:0 0 90px}
.related h2{font-size:var(--t-xl);margin:0 0 18px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;max-width:900px}
.related li{border-top:1px solid var(--linie)}
.related a{display:flex;align-items:center;min-height:52px;font-weight:600;text-decoration:none}
.related a::after{content:"→";margin-left:auto;padding-left:12px;color:var(--salbei-tief)}

@media(max-width:700px){
 .buehne.ohne-bild{aspect-ratio:4/3.6}
 .buehne.ohne-bild .telefon{width:190px}
 .bild.ohne-bild .telefon{width:160px}
 .artikel h2{margin-top:48px}
 .zwischenruf,.hinweis-privat{padding:26px 22px;border-radius:18px}
 .related ul{grid-template-columns:1fr}
}

/* Kleingedrucktes im dunklen Schlussfeld */
.ending-copy .fine{font-size:var(--t-xs);color:var(--auf-tinte-2);margin:16px 0 0}

/* Schluss ohne Familienbild (Paar-Seite: „ohne Kinderthemen“) */
.ending.ohne-bild{background:var(--salbei);padding:90px 0}
.ending.ohne-bild .wrap{position:static;padding-bottom:0}