/* G5 Ratgeber: Artikel und Übersicht. Nur Anordnung, Bausteine aus komponenten.css (.artikel, .inhalt, .fliesstext, .fragen, .anriss, .zeilen, .empfehlung, Lernkarte). */ .g5-artikel{padding:0 0 var(--abschnitt-unten)} .g5-artikel__haupt{min-width:0;max-width:var(--breite-text)} .g5-artikel__haupt>*+*{margin-top:var(--s-8)} .g5-artikel .artikel__seite{min-width:0} /* Handy: Inhaltsverzeichnis kompakt vor dem Text, ohne die erste Zeile zu verdrängen */ @media (max-width:1099px){ .g5-artikel .inhalt{padding-bottom:var(--s-2)} .g5-artikel .inhalt a{min-height:var(--ziel-min);padding:var(--s-2) 0} } /* Fragen und Antworten am Artikelende: gleiche Einträge wie FAQPage */ .g5-fragen h2{font-size:var(--text-h3);line-height:1.15;margin-bottom:var(--s-3);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} /* Eine Frage zum Thema: Titel in der Artikelhierarchie, Karte linksbündig an der Textachse */ .g5-artikel .empfehlung-frage{padding:0} .g5-artikel .empfehlung-frage>h2{font-size:var(--text-h3);line-height:1.15;margin-bottom:var(--s-4);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} .g5-artikel .empfehlung-frage .empfehlung__text{margin-bottom:var(--s-4)} .g5-artikel .empfehlung-frage .knopfreihe{margin-top:var(--s-4)} /* Weiterlesen */ .g5-weiterlesen .zeilen{border-top:1px solid var(--linie)} .g5-weiterlesen__alle{margin-top:var(--s-4)} /* Übersicht (ratgeber.php) */ .g5-hub{padding:0 0 var(--abschnitt-unten)} .g5-hub__index>h2{font-size:var(--text-h3);line-height:1.15;scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} .g5-hub__index>p{margin-top:var(--s-3);color:var(--ink-2);max-width:34em} .g5-hub__gruppe{margin-top:var(--s-7)} .g5-hub__gruppe>h3{font-size:var(--text-21);line-height:1.22;padding-bottom:var(--s-2);border-bottom:2px solid var(--ink)} .g5-hub__gruppe .zeilen{margin-top:0} .g5-hub__gruppe .anriss{padding:var(--s-4) 0} .g5-hub__text{margin-top:var(--abschnitt-oben)} .g5-hub__text .fliesstext>section{scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} .g5-hub__text .fliesstext>section+section{margin-top:2em} .g5-hub__text .fragen{margin-top:var(--s-3)} .g5-hub__weiter{margin-top:var(--s-8)} .g5-hub__weiter .zeilen{border-top:1px solid var(--linie)} .g5-hub .hinweis{max-width:var(--breite-text);margin-top:var(--s-5)} /* Weiterlesen ist ein Abschnitt wie die anderen: gleiche Stufe wie Fragen und Antworten */ .g5-weiterlesen .weiterlesen__titel,.g5-hub__weiter .weiterlesen__titel{font-size:var(--text-h3);line-height:1.15;margin-bottom:var(--s-3);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} /* Korrekturlauf 12.11. (Kritik G5) ------------------------------------------------- */ /* Desktop: Seitenspalte auf derselben Kante wie das Bild im Seitenkopf (7/5 wie .seitenkopf--artikel) */ @media (min-width:1100px){ .g5-artikel .artikel,.g5-hub .artikel{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);justify-content:stretch} .g5-artikel .inhalt,.g5-hub .inhalt{max-width:320px} } /* Handy: Inhaltsverzeichnis zugeklappt über dem Text, Desktop offen in der Seitenspalte */ .g5-inhalt-klapp{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .g5-inhalt-klapp>summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:var(--ziel-min);padding:var(--s-2) 0;cursor:pointer;font:600 var(--text-15)/1.3 var(--schrift-text);color:var(--ink)} .g5-inhalt-klapp>summary::-webkit-details-marker{display:none} .g5-inhalt-klapp>summary::after{content:"";width:14px;height:14px;margin-left:auto;background:var(--ink-3);-webkit-mask:var(--ico-runter) center/contain no-repeat;mask:var(--ico-runter) center/contain no-repeat;transition:transform var(--dauer-mittel) var(--ease)} .g5-inhalt-klapp[open]>summary::after{transform:rotate(180deg);background:var(--ink)} .g5-inhalt-klapp__zahl{font-weight:400;color:var(--ink-3)} .g5-inhalt-klapp .inhalt ol{border-top:1px solid var(--linie)} .g5-inhalt-klapp .inhalt li:last-child{border-bottom:0} @media (min-width:1100px){.g5-inhalt-klapp{display:none}} @media (max-width:1099px){.g5-artikel .artikel__seite,.g5-hub .artikel__seite{display:none}} .g5-artikel__haupt>.g5-inhalt-klapp+.fliesstext{margin-top:var(--s-5)} /* Tabellen im Artikel: Wörter umbrechen statt abschneiden; am Handy gestapelt (.tabelle--stapel) */ .g5-artikel .fliesstext th,.g5-artikel .fliesstext td,.g5-hub .fliesstext th,.g5-hub .fliesstext td{overflow-wrap:break-word;hyphens:auto} .g5-artikel .fliesstext .niveau-table tbody th{font-weight:600} @media (max-width:599px){ .g5-artikel .fliesstext .niveau-table td:first-child{white-space:normal} .g5-artikel .tabelle--stapel tbody th,.g5-hub .tabelle--stapel tbody th{font-size:var(--text);line-height:1.35} .g5-artikel .tabelle--stapel td.highlight,.g5-artikel .tabelle--stapel tr.highlight td{padding-inline:var(--s-1)} } /* Metazeile im Anriss: Teile brechen nicht in sich um */ .g5-artikel .anriss__meta span,.g5-hub .anriss__meta span{white-space:nowrap} /* Autor-Zeile im Seitenkopf (über aktion_html) */ .seitenkopf--artikel .seitenkopf__aktion .autor{margin:0} /* Übersicht: Kapitel stehen in
, die Abstände von .fliesstext greifen nur auf direkte Kinder */ .g5-hub__text .fliesstext section>*+*{margin-top:1em} .g5-hub__text .fliesstext section>h3{margin-top:1.7em} .g5-hub__text .fliesstext section>h2+*,.g5-hub__text .fliesstext section>h3+*{margin-top:.55em} .g5-hub__text .fliesstext section>.fragen{margin-top:var(--s-2)} .g5-hub__text .fliesstext section>h3+.fragen{margin-top:var(--s-2)} /* Wie prüft dein Kanton? Kontextlinks im Hauptinhalt (Gesamtkritik Marketing 12.11. Befund 3) */ .g5-kanton__titel{font-size:var(--text-h3);line-height:1.15;margin-bottom:var(--s-3);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))} .g5-kanton__text{color:var(--ink-2);margin-bottom:var(--s-3)} .g5-kanton__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:var(--s-4);row-gap:0} .g5-kanton__liste a{display:inline-flex;align-items:center;min-height:var(--ziel-min)} .g5-kanton__liste li:last-child{flex-basis:100%} /* ---------- Nachbesserung Design 12.11. (Gesamtkritik Design 9) ---------- */ /* Desktop: Schnitt im Seitenkopf und Inhaltsverzeichnis stehen auf denselben zwei Kanten der Seitenspalte. Bildbox in voller Spaltenbreite im Seitenverhältnis des Motivs, Schnitt links oben: er füllt genau die Breite. Die Bildbox treibt die Zeilen der Textspalte nicht auseinander (überschüssige Höhe geht in die letzte, leere Zeile). */ @media (min-width:1100px){ :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf--artikel .seitenkopf__in{grid-template-rows:repeat(5,auto) minmax(0,1fr)} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf--artikel .seitenkopf__bild{align-self:start;height:auto;min-height:0;aspect-ratio:4/3;--m-size:contain;--m-pos:left top} /* Bildbox genau im Seitenverhältnis des Motivs (Werte aus motive.json, linol_css.py), damit unter dem Schnitt kein Leerraum steht. Wunsch an G0: linol_css.py schreibt das Verhältnis zusätzlich als --m-format, dann entfällt diese Liste. */ :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--ratgeber{aspect-ratio:1200/810} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--kind{aspect-ratio:1200/849} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--gespraech{aspect-ratio:1200/823} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--dauer{aspect-ratio:1200/900} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--kosten{aspect-ratio:1200/723} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--unterlagen{aspect-ratio:1200/732} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--sprache{aspect-ratio:1200/788} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--heirat{aspect-ratio:1200/610} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--familie{aspect-ratio:1200/705} :is(.ratgeber-artikel,.ratgeber-uebersicht) .seitenkopf__bild.illu--augustfeuer{aspect-ratio:1000/726} .g5-artikel .inhalt,.g5-hub .inhalt{max-width:none} /* das zugeklappte Verzeichnis ist hier ausgeblendet: der Text beginnt auf der Höhe von «Inhalt» */ .g5-artikel__haupt>.g5-inhalt-klapp+.fliesstext{margin-top:0} } /* Zusammenfassung am Artikelende ohne Rubrik «Kurz zusammengefasst» (Gesamtkritik Design 19): als Merkkasten abgesetzt, Absätze in Artikelschrift (der fette Merksatz-Stil wäre bei zwei bis drei Absätzen eine Wand) */ .fliesstext .g5-fazit{margin-top:2em;padding:var(--s-5)} .fliesstext .g5-fazit p{font:400 var(--text-artikel)/var(--zeile-artikel) var(--schrift-text);color:var(--ink)} .fliesstext .g5-fazit p+p{margin-top:.75em}