/* ============================================================
   Family Cockpit — Ratgeber (editorial) styles
   Builds on assets/colors_and_type.css + styles/site.css.
   Reuses: .wrap .section .btn .eyebrow .h-display .h-section .lead
           .nav .footer .av .reveal .material-symbols-rounded
   ============================================================ */

/* ----------------------------------------------------------------
   CATEGORY BADGE — tinted pill, one per editorial category
---------------------------------------------------------------- */
.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--fc-primary-tint);
  color: var(--fc-primary);
  white-space: nowrap;
}
.rg-badge .material-symbols-rounded { font-size: 14px; }
.rg-badge--teal   { background: var(--fc-primary-tint);          color: var(--fc-primary); }
.rg-badge--violet { background: rgba(106,76,147,0.12);           color: var(--fc-p-violet); }
.rg-badge--blue   { background: rgba(54,94,214,0.12);            color: var(--fc-p-blue); }
.rg-badge--burnt  { background: rgba(202,103,2,0.12);            color: var(--fc-p-burnt); }
.rg-badge--green  { background: rgba(76,175,80,0.16);            color: #2A8F3C; }
.rg-badge--navy   { background: rgba(16,37,66,0.10);             color: var(--fc-p-navy); }

/* ----------------------------------------------------------------
   BYLINE — initials avatar + name + meta (shared overview/article)
---------------------------------------------------------------- */
.byline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.byline__av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  background: var(--fc-p-violet);
}
.byline__name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fc-text-strong);
  letter-spacing: -0.005em;
}
.byline__meta {
  font-size: 12.5px;
  color: var(--fc-text-muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.byline__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.byline__meta .material-symbols-rounded { font-size: 14px; }

/* ----------------------------------------------------------------
   COVER TILE — flat brand-color cover with faint glyph
   (no stock photography; on-brand for editorial cards/headers)
---------------------------------------------------------------- */
.rg-cover {
  position: relative;
  overflow: hidden;
  background: var(--fc-primary);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.rg-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 85% 12%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.rg-cover__glyph {
  position: absolute;
  right: -14px;
  bottom: -28px;
  font-size: 168px;
  line-height: 1;
  color: rgba(255,255,255,0.16);
  font-variation-settings: 'FILL' 1, 'wght' 400;
  z-index: -1;
  user-select: none;
}
.rg-cover--teal   { background: #119589; }
.rg-cover--violet { background: #6A4C93; }
.rg-cover--blue   { background: #365ED6; }
.rg-cover--burnt  { background: #CA6702; }
.rg-cover--green  { background: #3E8E47; }
.rg-cover--navy   { background: #15302E; }

/* Photo cover — warm lifestyle image behind a calm teal→dark wash so
   white text and chips stay legible. Set the image via inline
   style="background-image:url('assets/…')". */
.rg-cover--photo {
  background-color: #15302E;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rg-cover--photo::before {
  background:
    linear-gradient(180deg, rgba(21,48,46,0.10) 0%, rgba(21,48,46,0) 32%, rgba(21,48,46,0.62) 100%),
    linear-gradient(115deg, rgba(17,149,137,0.30) 0%, rgba(17,149,137,0) 55%);
}
.rg-cover--photo .rg-cover__glyph { display: none; }

/* Little product chips that can sit on a cover */
.rg-cover__chips {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 18px;
}
.rg-cover__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.rg-cover__chip .material-symbols-rounded { font-size: 15px; }

/* ================================================================
   OVERVIEW PAGE
================================================================ */
.rg-hero {
  padding: 168px 0 0;
  background: var(--fc-bg);
}
@media (max-width: 920px) { .rg-hero { padding: 132px 0 0; } }
@media (max-width: 480px) { .rg-hero { padding: 104px 0 0; } }
.rg-hero__inner { max-width: 760px; }
.rg-hero .lead { margin-top: 22px; font-size: 20px; }

/* Category filter chips */
.rg-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.rg-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: white;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fc-text);
  box-shadow: 0 1px 0 rgba(60,60,60,0.06);
  transition: color 140ms, background 140ms, box-shadow 140ms;
  cursor: pointer;
}
.rg-cat:hover { color: var(--fc-primary); }
.rg-cat.is-active {
  background: var(--fc-text-strong);
  color: white;
}
.rg-cat .material-symbols-rounded { font-size: 17px; }

/* Featured article — symmetric breathing room above & below the card */
.rg-feat-wrap { padding: 72px 0; }
.rg-grid-wrap { padding-top: 0; }
@media (max-width: 480px) { .rg-feat-wrap { padding: 48px 0; } }
.rg-feat {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(60,60,60,0.04), 0 30px 60px -44px rgba(20,30,45,0.28);
}
.rg-feat__cover { min-height: 380px; }
.rg-feat__body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: center;
}
.rg-feat__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-primary);
}
.rg-feat__h {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fc-text-strong);
  margin: 0;
  text-wrap: balance;
}
.rg-feat__teaser {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fc-text);
  margin: 0;
  text-wrap: pretty;
}
.rg-feat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rg-feat__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fc-primary);
}
.rg-feat__read .material-symbols-rounded {
  font-size: 20px;
  transition: transform 160ms var(--fc-ease-out);
}
.rg-feat:hover .rg-feat__read .material-symbols-rounded { transform: translateX(4px); }
@media (max-width: 880px) {
  .rg-feat { grid-template-columns: 1fr; }
  .rg-feat__cover { min-height: 200px; order: -1; }
  .rg-feat__body { padding: 32px 28px; }
}

/* Card grid */
.rg-secthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.rg-secthead h2 {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--fc-text-strong);
  margin: 0;
}
.rg-secthead .count { font-size: 14px; color: var(--fc-text-muted); font-weight: 500; }

.rg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 920px) { .rg-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 600px) { .rg-grid { grid-template-columns: 1fr; gap: 20px; } }

.rg-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 220ms var(--fc-ease-out), box-shadow 220ms var(--fc-ease-out);
}
a.rg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -30px rgba(20,30,45,0.32);
}
.rg-card__cover { height: 168px; }
/* Kartenbild: das echte Blatt statt eines Platzhalter-Glyphs.
   Die Vorlagen liegen als gerenderte A4-Vorschauen im Repo und werden auf
   /vorlagen ohnehin gezeigt — ein Stockfoto haette weniger gesagt und nichts
   belegt. Die Blaetter ragen von unten ins Bild und werden am Kartenrand
   abgeschnitten: Man sieht Kopf und Tabellenanfang, also das, woran man die
   Vorlage erkennt, und es liest sich als Stapel statt als Bildausschnitt.
   Der farbige Kartengrund bleibt, damit diese Karten und die Hub-Karte mit
   ihrem Glyph dieselbe Sprache sprechen. */
.rg-card__cover--sheets {
  position: relative;
  overflow: hidden;
}
/* Ueber `top` positioniert, nicht ueber `bottom`. Ein A4-Blatt ist bei
   58 Prozent Kartenbreite rund 296px hoch, der Kartenkopf misst 168px — mit
   `bottom` lag der Blattkopf oberhalb des sichtbaren Bereichs und genau der
   Teil fehlte, an dem man die Vorlage erkennt. Jetzt sitzt die Oberkante
   fest im Bild und das Blatt laeuft nach unten aus dem Kopf heraus. */
.rg-sheet {
  position: absolute;
  top: 20px;
  width: 40%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 22px -9px rgba(0,0,0,0.45);
}
.rg-sheet--c { left: 50%; transform: translateX(-50%); z-index: 3; }
.rg-sheet--l { left: 8%;  top: 30px; transform: rotate(-6deg); z-index: 1; }
.rg-sheet--r { right: 8%; top: 30px; transform: rotate(6deg);  z-index: 2; }
/* Hub-Karte: Aufnahme des echten Mockups von /hub, nicht nachgebaut.
   Das Geraet ist quer, sitzt also anders als die hochkanten Blaetter — es
   laeuft unten aus dem Kartenkopf, damit der Bildschirminhalt oben
   vollstaendig lesbar bleibt. */
.rg-card__cover--device {
  position: relative;
  overflow: hidden;
}
.rg-device {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}
@media (max-width: 920px) {
  .rg-device { width: 72%; }
}

/* Einzelblatt darf etwas groesser stehen, es teilt sich den Platz mit nichts. */
.rg-card__cover--sheets > .rg-sheet--c:only-child { width: 46%; top: 18px; }
@media (max-width: 920px) {
  .rg-sheet { width: 36%; }
  .rg-card__cover--sheets > .rg-sheet--c:only-child { width: 42%; }
}

.rg-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.rg-card__h {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--fc-text-strong);
  margin: 0;
  text-wrap: balance;
}
.rg-card__teaser {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fc-text-muted);
  margin: 0;
  text-wrap: pretty;
}
.rg-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.rg-card__foot .byline__av { width: 32px; height: 32px; font-size: 12px; }
.rg-card__foot .nm { font-weight: 600; font-size: 13px; color: var(--fc-text-strong); }
.rg-card__foot .rd {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--fc-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.rg-card__foot .rd .material-symbols-rounded { font-size: 14px; }

.rg-card--soon { opacity: 1; }
.rg-card--soon .rg-card__cover { filter: saturate(0.85); }
.rg-soon-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255,255,255,0.92);
  color: var(--fc-text-strong);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ================================================================
   ARTICLE PAGE
================================================================ */
.art {
  background: var(--fc-bg);
  padding-top: 112px;
}
@media (max-width: 920px) { .art { padding-top: 96px; } }

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-text-muted);
  margin-bottom: 28px;
}
.crumb a { color: var(--fc-text-muted); transition: color 140ms; }
.crumb a:hover { color: var(--fc-primary); }
.crumb .material-symbols-rounded { font-size: 16px; opacity: 0.6; }
.crumb .here { color: var(--fc-text-strong); }

/* Header */
/* Das Textmass der Seite. Siehe Kommentar bei .art-layout: Kopf,
   Einleitung und Fliesstext teilen sich exakt diese Spalte. */
.art-head { max-width: 760px; margin: 0 auto; }
.art-head__cat { margin-bottom: 20px; }
.art-head__h {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--fc-text-strong);
  margin: 0;
  text-wrap: balance;
}
.art-head__lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--fc-text);
  margin: 24px 0 0;
  max-width: 40em;
  text-wrap: pretty;
}
/* Byline steht unter dem Aufmacherbild, nicht darueber. Vorher trennte das
   Foto die Byline vom ersten Absatz — also genau die beiden Elemente, die
   zusammengehoeren: wer erzaehlt das, und hier faengt es an. Jetzt schliesst
   das Bild den Kopf ab, und Autorenzeile samt Offenlegung sitzen direkt
   ueber dem Text.
   Die Trennlinie oben ist entfallen: als der Block noch im Kopf lag, grenzte
   sie ihn vom Lead ab. Unter einem Foto ist sie nur noch Dekor. */
.art-head__meta {
  max-width: 760px;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Weisser Kreis mit Luft — nur im Artikelkopf, nicht in der Artikelkarte
   auf der Ratgeber-Uebersicht: Dort steht die Byline schon auf weissem
   Grund, ein weisser Kreis waere unsichtbar und der Ring nur ein Rand.
   app-icon-ios.png ist die Marke auf weissem Grund und fuellt rund 85
   Prozent der Kachel. Innenabstand schafft deshalb Luft und verkleinert
   zugleich die Marke — beide stecken im selben Bild. Der Kreis waechst
   darum von 46 auf 50px mit, sonst verliert die Marke zu viel.
   Die Kette ist zweiklassig (0-2-0) und schlaegt damit `img.byline__av`
   (0-1-1) weiter unten, das padding und background zuruecksetzt. */
.art-head__meta .byline__av {
  width: 50px; height: 50px;
  font-size: 16px;
  padding: 7px;
  background: white;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px var(--fc-border-subtle);
}
.art-head__share {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.art-head__share button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: white;
  color: var(--fc-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(60,60,60,0.06);
  transition: color 140ms, transform 140ms;
}
.art-head__share button:hover { color: var(--fc-primary); transform: translateY(-1px); }
.art-head__share .material-symbols-rounded { font-size: 19px; }
@media (max-width: 600px) { .art-head__share { display: none; } }

/* Cover band under header */
/* Steht in der Textspalte, nicht im Ausbruch — siehe Mass-System unten.
   Seitenverhaeltnis statt Fixhoehe: 340px bei wechselnder Breite gaben dem
   Foto auf jedem Geraet eine andere Form (3,34:1 auf dem Desktop, 3,6:1 auf
   dem Handy). Jetzt 16:9, in 760px Spaltenbreite also 428px hoch. Im
   Ausbruch war ein Breitformat richtig, in der Spalte soll das Bild wie ein
   Foto aussehen und nicht wie ein Banner.
   Auf schmalen Schirmen 3:2, sonst wird aus der Familie ein Streifen.
   Bildausschnitt auf 50% 42%: Die Gesichter liegen im oberen Drittel und
   wurden mittig zentriert angeschnitten. */
.art-cover {
  max-width: 760px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
}
.art-cover.rg-cover--photo { background-position: 50% 42%; }
.art-cover .rg-cover__glyph { font-size: 280px; right: 2%; bottom: -64px; }
@media (max-width: 720px) {
  .art-cover { aspect-ratio: 3 / 2; margin-top: 28px; }
  .art-cover .rg-cover__glyph { font-size: 180px; }
}

/* ----------------------------------------------------------------
   DAS MASS-SYSTEM DER ARTIKELSEITE
   Eine Spalte, ein Ausbruch. Sonst nichts:

     Spalte    760px, zentriert — .art-head, .art-cover, .art-head__meta,
                                  .art-intro, .art-layout, .art .cta-banner
     Ausbruch  volle .wrap-Breite — nur .art-tablesec

   Vorher waren es fuenf Breiten (800 linksbuendig / voll / 760 zentriert /
   720+260-Raster zentriert / voll) und damit drei verschiedene linke
   Textkanten, zwischen denen das Auge beim Scrollen hin und her sprang.
   Dass ausgerechnet die Tabelle als einzige ausbricht, ist die Aussage:
   Sie ist der Gegenstand dieses Artikels, alles andere ist Text darum herum.
   Wer hier eine zweite Ausnahme ergaenzt, nimmt der Regel ihre Bedeutung.

   Das Inhaltsverzeichnis stand frueher als klebrige zweite Spalte daneben.
   Es ist ersatzlos entfallen: Es begann erst nach der Tabelle, listete
   fuenf Sprungziele fuer acht Minuten Lesezeit und war der Grund fuer das
   asymmetrische Raster. Die Produktkarte darunter ebenso — sie war unter
   1040px ohnehin ausgeblendet und wiederholte den CTA-Banner, der wenige
   Zentimeter tiefer dieselbe Aufgabe besser erledigt.
---------------------------------------------------------------- */
.art-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 0 24px;
}
@media (max-width: 720px) { .art-layout { padding: 40px 0 16px; } }

/* ----------------------------------------------------------------
   PROSE — article body typography
---------------------------------------------------------------- */
.prose { color: var(--fc-text); font-size: 18.5px; line-height: 1.75; }
.prose > * + * { margin-top: 1.35em; }
.prose p { margin: 0; text-wrap: pretty; }
/* .prose p oben hat hoehere Spezifitaet als `.prose > * + *` und setzt den
   Abstand auf 0 zurueck. Ohne diese Zeile kleben aufeinanderfolgende Absaetze
   aneinander. Muss vor `.prose h2 + p` stehen, damit die dort kuerzere
   Ueberschriften-Distanz gewinnt. */
.prose > * + p { margin-top: 1.35em; }
.prose strong { color: var(--fc-text-strong); font-weight: 600; }
.prose a {
  color: var(--fc-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(17,149,137,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms;
}
.prose a:hover { text-decoration-color: var(--fc-primary); }
.prose h2 {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--fc-text-strong);
  margin: 2em 0 0;
  scroll-margin-top: 104px;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fc-text-strong);
  margin: 1.6em 0 0;
  /* Wie bei h2: die Nav liegt fixiert darueber. Ohne diesen Abstand springen
     die Fazit-Links auf die App-Profile so, dass die Ueberschrift unter der
     Navigationsleiste verschwindet. */
  scroll-margin-top: 104px;
}
/* App-Symbol vor der Profil-Ueberschrift. Die sechs h3 sind die Sprungziele
   der Fazit-Karten — wer von dort kommt, erkennt am Symbol sofort, dass er
   richtig gelandet ist. baseline-Ausrichtung waere bei zweizeiligen
   Ueberschriften schief, deshalb an der ersten Zeile ausgerichtet. */
.prose h3.app-h {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  /* Mehr Luft als die generischen 1.6em: Die sechs Profile sind
     nebeneinanderstehende Eintraege, keine Zwischenueberschriften eines
     durchlaufenden Arguments. Der Abstand macht sichtbar, wo eine App endet
     und die naechste beginnt. */
  margin-top: 2.2em;
}
/* Ausgenommen das erste Profil: Es folgt direkt auf "Die Apps im Einzelnen"
   und gehoert zu dieser Ueberschrift, nicht abgesetzt davon. */
.prose h2 + h3.app-h { margin-top: 0.9em; }
.app-h__icon {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  border-radius: 7px;
  margin-top: 1px;
}
.prose h2 + p, .prose h3 + p { margin-top: 0.7em; }
.prose ul, .prose ol { margin: 1.2em 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prose ul li {
  position: relative;
  padding-left: 30px;
  line-height: 1.6;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fc-primary);
}
.prose ol { counter-reset: pl; }
.prose ol li {
  position: relative;
  padding-left: 38px;
  line-height: 1.6;
  counter-increment: pl;
}
.prose ol li::before {
  content: counter(pl);
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--fc-primary-tint);
  color: var(--fc-primary);
  font-size: 12.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.prose figcaption,
.prose .prose-note {
  font-size: 14px;
  color: var(--fc-text-muted);
  line-height: 1.55;
}

/* Pull quote */
.pullquote {
  margin: 1.9em 0 0 !important;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--fc-primary);
}
.pullquote p {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fc-text-strong);
  text-wrap: balance;
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-text-muted);
  letter-spacing: 0;
}
@media (max-width: 600px) { .pullquote p { font-size: 21px; } }

/* Callout — "what we don't do" / honest note */
.callout {
  margin: 1.9em 0 0 !important;
  background: var(--fc-primary-tint);
  border-radius: 18px;
  padding: 26px 28px;
  display: flex;
  gap: 16px;
}
.callout__ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--fc-primary);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.callout__ic .material-symbols-rounded { font-size: 22px; }
.callout__body { font-size: 16px; line-height: 1.6; }
.callout__body strong { display: block; margin-bottom: 4px; color: var(--fc-text-strong); font-size: 16.5px; }
.callout--neutral { background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.callout--neutral .callout__ic { background: var(--fc-text-strong); }

/* ----------------------------------------------------------------
   OFFENLEGUNG (Interessenkonflikt)
   Sitzt im Byline-Block ueber dem Aufmacherbild, nicht vor dem ersten
   Absatz. Eine Offenlegung beantwortet "wer erzaehlt mir das", nicht
   "worum geht es" — vor dem Fliesstext gelesen wirkte sie wie der Lead
   und liess offen, wo der Artikel eigentlich beginnt. Jetzt gilt: alles
   ueber dem Bild ist Impressum, alles darunter Artikel.
   Kein Kasten: verwandt mit einer Impressums- oder Korrekturnotiz, nicht
   mit einem Hinweiskasten (.callout ist fuer zwei Zeilen gebaut, und
   .callout--neutral setzt Weiss auf fast weissem Grund).
   Das Schlagwort laeuft in den Satz hinein statt darueber zu stehen —
   so unterscheidet sich die Fussnote von der Kuerze-Box weiter unten,
   wo das Schlagwort eine eigene Zeile bekommt, weil es dort gescannt
   werden soll.
   Der Akzent liegt auf der Linie und nicht auf dem Text: #119589 auf
   #EDEDE9 erreicht nur ~3,6:1 und wuerde als Kleintext die
   Kontrastpruefung nicht bestehen. Als Flaeche ist er unkritisch.
---------------------------------------------------------------- */
.disclosure {
  flex: 0 0 100%;
  margin: 2px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--fc-primary);
}
.disclosure__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-text-strong);
}
/* Trenner am Label statt im HTML, damit die Textquelle ein Satz bleibt.
   Abstand ueber margin, nicht ueber Leerzeichen im content-String: die
   werden von der Whitespace-Verarbeitung eingedampft, der Halbgeviertstrich
   klebte dadurch am folgenden Wort. Links 0.25em, weil die 0.16em Laufweite
   des Labels dort schon Luft schafft. */
.disclosure__label::after {
  content: "\2014";
  margin: 0 0.4em 0 0.25em;
  font-weight: 400;
  letter-spacing: 0;
}
.disclosure__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fc-text-muted);
  margin: 0;
  max-width: 68ch;
}
@media (max-width: 600px) {
  .disclosure { padding-left: 12px; }
  .disclosure__body { font-size: 14px; }
}

/* Laenderflagge vor dem Landesnamen. Rein als Scan-Hilfe: In sechs Spalten
   sieht man an der Farbe sofort, wie sich die Anbieter auf Jurisdiktionen
   verteilen — beim Datenschutz-Thema dieses Artikels die relevantere Angabe
   als die Stadt. aria-hidden, weil der Landesname direkt daneben steht.
   Windows kennt keine Flaggen-Glyphen und zeigt stattdessen das Laenderkuerzel
   ("DE"); das ist eine lesbare Abstufung, kein Ausfall. */
.cmp .flag {
  margin-right: 7px;
  font-size: 1.05em;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ----------------------------------------------------------------
   COMPARISON TABLE
---------------------------------------------------------------- */
.cmp {
  margin: 1.9em 0 0 !important;
}
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
.cmp table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  font-size: 14.5px;
}
.cmp th, .cmp td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--fc-divider);
  vertical-align: middle;
}
.cmp thead th {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fc-text-strong);
  letter-spacing: -0.005em;
  text-align: center;
  background: var(--fc-surface);
  border-bottom: 1px solid var(--fc-border-strong);
}
.cmp thead th:first-child { text-align: left; }
.cmp tbody th {
  font-weight: 600;
  color: var(--fc-text-strong);
  font-size: 14px;
  width: 36%;
}
/* "gratis" im Zeilentitel hervorheben. Ohne die Betonung liest sich unsere
   Zelle "1 Quelle" wie eine Produktgrenze statt wie eine Grenze der
   Gratis-Version — die Zeile misst aber ausdruecklich nur, was ohne Bezahlung
   geht. Bewusst kein Teal: #119589 erreicht auf Weiss nur ~4,35:1 und faellt
   bei 14px damit durch die AA-Pruefung. Fettung traegt hier genug, weil es
   das einzige hervorgehobene Wort in der Spalte ist. */
.cmp__scope { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--fc-border-strong); }
.cmp td { text-align: center; color: var(--fc-text-muted); }
/* Highlighted Family Cockpit column */
.cmp .col-fc {
  background: var(--fc-primary-tint-2);
  position: relative;
}
.cmp thead .col-fc {
  background: var(--fc-primary);
  color: white;
  border-bottom-color: var(--fc-primary);
}
.cmp thead .col-fc .sub { color: rgba(255,255,255,0.78); }
.cmp thead th .sub {
  display: block;
  font-family: var(--fc-font-sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--fc-text-soft);
  letter-spacing: 0;
  margin-top: 2px;
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .yes  { color: var(--fc-success); }
.cmp .no   { color: var(--fc-text-soft); }
.cmp .part { color: var(--fc-p-burnt); }
/* Symbol UEBER der Beschriftung, nicht daneben.
   Nebeneinander wanderte das Icon mit jeder Beschriftungslaenge an eine
   andere Stelle — "ja" mittig, "nur auf eigenem Handy" weit links —, weil
   die Zelle zentriert und das Paar unterschiedlich breit ist. Beim Lesen
   einer Spalte sprangen die Symbole dadurch hin und her, und genau das ist
   die Bewegung, die eine Vergleichstabelle nicht machen darf: Man scannt
   hier senkrecht, nicht waagerecht.
   Gestapelt sitzt jedes Symbol exakt auf der Zellmitte. Die Beschriftung
   darf darunter frei umbrechen, ohne die Symbolspalte zu stoeren. */
.cmp .mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.cmp .mark .material-symbols-rounded { font-size: 21px; font-variation-settings: 'wght' 600; flex: none; }
.cmp .col-fc .yes { color: var(--fc-primary); }
/* --- Sechs Produkte: die Tabelle ist breiter als die Lesespalte --------------
   Ein Versuch, alle sieben Spalten in die 720-px-Textspalte zu pressen, endete
   bei 13-px-Schrift und 6-px-Innenabstand — lesbar war das nicht. Die Tabelle
   darf jetzt ihre natuerliche Breite behalten und seitlich scrollen. Damit das
   nicht uebersehen wird (vorher standen zwei Produkte unsichtbar rechts
   ausserhalb), sorgen drei Signale: die erste Spalte klebt beim Scrollen, die
   letzte Spalte wird sichtbar angeschnitten, und die Legende traegt einen
   ausdruecklichen Hinweis. Ein CSS-Verlauf an der Kante war hier wirkungslos —
   er liegt hinter dem Inhalt und blendet nur den Hintergrund aus. */
.cmp--wide .cmp__scroll { position: relative; background: white; }
.cmp--wide table { background: transparent; min-width: 860px; }
/* Werte nicht umbrechen: sonst steht dieselbe Angabe je Spaltenbreite ein- oder
   zweizeilig da und die Tabelle wirkt unruhig. Breite kostet hier nichts, sie
   scrollt ja. Die Kriterien-Spalte darf weiter umbrechen. */
.cmp--wide tbody td { white-space: nowrap; }
/* `width` ist bei Tabellenzellen nur ein Vorschlag: Weil die Wertzellen per
   nowrap ihre volle Breite fordern, wurde die Kriterienspalte auf 115px
   zusammengedrueckt und die Zeilen 107px hoch. min-width haelt sie fest. */
.cmp--wide tbody th,
.cmp--wide thead th:first-child { min-width: 200px; }
.cmp--wide thead th:first-child,
.cmp--wide tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  background: white;
  box-shadow: 1px 0 0 var(--fc-divider);
}
.cmp--wide thead th:first-child { background: var(--fc-surface); }
.cmp__swipe { color: var(--fc-text-soft); }

.cmp__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--fc-text-muted);
}
.cmp__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp__legend .material-symbols-rounded { font-size: 16px; }
.cmp__note { font-size: 12.5px; color: var(--fc-text-soft); margin-top: 10px; line-height: 1.5; }

/* ----------------------------------------------------------------
   STEP-BY-STEP (numbered)
---------------------------------------------------------------- */
.steps {
  margin: 1.9em 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  background: white;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  align-items: start;
  counter-increment: step;
}
.step__num {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--fc-primary);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.step__num::before { content: counter(step); }
.step__h {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 18.5px;
  letter-spacing: -0.01em;
  color: var(--fc-text-strong);
  margin: 4px 0 6px;
  line-height: 1.25;
}
.step__p { font-size: 15.5px; line-height: 1.6; color: var(--fc-text); margin: 0; }
@media (max-width: 600px) {
  .step { grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 20px; }
  .step__num { width: 44px; height: 44px; font-size: 19px; border-radius: 12px; }
}

/* ----------------------------------------------------------------
   AUTHOR BIO (end of article)
---------------------------------------------------------------- */
.authorbio {
  max-width: 800px;
  margin: 56px auto 0;
  background: white;
  border-radius: 22px;
  padding: 36px 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.authorbio__av {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--fc-p-violet);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.authorbio__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-primary);
  margin-bottom: 8px;
}
.authorbio__name {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--fc-text-strong);
  margin: 0 0 8px;
}
.authorbio__text { font-size: 15px; line-height: 1.6; color: var(--fc-text-muted); margin: 0; }
@media (max-width: 600px) {
  .authorbio { flex-direction: column; gap: 18px; padding: 28px 24px; }
  .authorbio__av { width: 60px; height: 60px; font-size: 22px; }
}

/* ----------------------------------------------------------------
   RELATED ARTICLES
---------------------------------------------------------------- */
.related { margin-top: 96px; }
.related__head {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--fc-text-strong);
  margin: 0 0 32px;
}

/* ----------------------------------------------------------------
   DOWNLOAD CTA BANNER
---------------------------------------------------------------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: #15302E;
  border-radius: 28px;
  padding: 56px 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-banner__halo {
  position: absolute;
  inset: -20% 30% 20% 40%;
  background: radial-gradient(50% 50% at 60% 40%, rgba(43,179,166,0.28), transparent 70%);
  pointer-events: none;
}
.cta-banner__body { position: relative; }
.cta-banner .eyebrow { color: rgba(255,255,255,0.7); }
.cta-banner__h {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: white;
  margin: 0 0 16px;
  text-wrap: balance;
}
.cta-banner__p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 0 28px;
  max-width: 34em;
}
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-banner__note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.55); }
.cta-banner__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-banner__download {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cta-banner__dl-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.cta-banner__stores {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-banner__stores .store-badge { height: 54px; box-shadow: 0 10px 26px -14px rgba(0,0,0,0.6); }
.cta-banner__dl-note { font-size: 12.5px; color: rgba(255,255,255,0.55); }
@media (max-width: 880px) {
  .cta-banner { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; }
  .cta-banner__visual { justify-self: start; }
}
@media (max-width: 480px) {
  .cta-banner { padding: 32px 24px; border-radius: 24px; }
  .cta-banner__stores .store-badge { height: 48px; }
}

/* ----------------------------------------------------------------
   ARTICLE INTRO — single centered column before the full-width table.
   Same measure as the prose column so the article reads as one text,
   even though the table between them spans the whole wrap.
---------------------------------------------------------------- */
.art-intro {
  max-width: 760px;
  margin: 56px auto 0;
}
/* Der erste Absatz traegt den Einstieg und ist eine Spur groesser als der
   Rest — das ist die Stelle, an der der Artikel beginnt, und sie soll ohne
   Ueberschrift erkennbar sein. */
.art-intro > p:first-of-type {
  font-size: 20.5px;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .art-intro { margin-top: 40px; }
  .art-intro > p:first-of-type { font-size: 19px; }
}

/* Key facts — the article's answer in four lines, boxed so skimmers
   land here first. Inherits .prose li bullets.

   Selector must stay `.prose ul.keyfacts`: the generic `.prose ul` rule
   sets `padding-left: 0` and outranks a lone `.keyfacts`, which left the
   bullets sitting flush against the left edge of the card. */
.prose ul.keyfacts {
  background: white;
  border-radius: 18px;
  padding: 28px 34px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  gap: 14px;
}
/* Kein Aufzaehlungspunkt: das Schlagwort vorn ist der Marker, die
   Haarlinie trennt. Der 7px-Punkt aus `.prose ul` wirkte hier zu klein
   und unruhig, deshalb wird er ausgeschaltet statt vergroessert. */
.prose ul.keyfacts li {
  font-size: 16.5px;
  padding-left: 0;
  line-height: 1.55;
}
.prose ul.keyfacts li::before { content: none; }
.prose ul.keyfacts li + li {
  border-top: 1px solid var(--fc-border-subtle);
  padding-top: 14px;
}
/* Schlagwort als eigene Zeile ueber dem Text, im Label-Duktus von
   `.disclosure__label` weiter oben — nur in Teal. */
.keyfacts__k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fc-primary);
  margin-bottom: 6px;
}
@media (max-width: 600px) {
  .prose ul.keyfacts { padding: 22px 22px; }
}

/* ----------------------------------------------------------------
   FAZIT — sechs Karten, kein Ranking.
   Der Abschnitt beantwortet "welche fuer mich": Situation -> App -> Preis.
   Zuerst als zweispaltige Definitionsliste mit Haarlinien gebaut — das las
   sich wie eine Tabelle, deren Spalten nicht zusammenpassen, weil die
   Situationen unterschiedlich lang umbrechen. Karten sind ehrlicher: sechs
   gleichwertige, in sich geschlossene Einheiten ohne behauptete Ausrichtung.
   Bewusst NICHT: Nummerierung — die sechs sind keine Reihenfolge, Ziffern
   wuerden eine Rangfolge behaupten, die es nicht gibt.
   Die Karte liest sich von oben nach unten als Frage und Antwort: fuer wen,
   welche App, wofuer, und zuunterst der Preis. Die Preiszeile haengt per
   margin-top:auto am Kartenboden, damit sie in jeder Reihe auf einer Linie
   sitzt — bei allen sechs, unserer eingeschlossen. Das ist der Punkt des
   Bauteils: keine Empfehlung ohne ihre Kosten.
   Teal traegt wie ueberall im Artikel nur Flaechen und Linien, nie Kleintext
   (#119589 erreicht auf Weiss ~4,35:1 und faellt bei 16px durch AA). Der
   App-Name steht in Textfarbe und bekommt die Akzentfarbe als Unterstreichung.
---------------------------------------------------------------- */
.verdict {
  margin: 1.6em 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.verdict__card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.verdict__need {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--fc-text-strong);
  margin-bottom: 14px;
}
.verdict__ans {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Das App-Symbol vor dem Namen. Alle sechs liegen unter
   assets/ratgeber/appicons/ auf unserem eigenen Server — eingebunden von den
   Herstellerdomains haette jeder Seitenaufruf die IP des Lesers an fuenf
   Dritte geschickt, und die CSP (img-src 'self' data:) haette sie ohnehin
   blockiert.
   Fester 26px-Kasten mit object-fit: contain, weil FAMANICE als einziges
   kein quadratisches Icon hat (96x93) — ohne den Kasten stuenden die Namen
   nicht auf einer Flucht. */
.verdict__app {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 15.5px;
  color: var(--fc-text-strong);
  text-decoration: none;
  margin-bottom: 5px;
}
/* Unterstreichung am Namen, nicht am Link: sonst liefe sie unter dem Icon
   durch. Teal traegt sie, weil die Farbe als 15,5px-Text nur ~4,35:1 auf
   Weiss erreicht und durch die AA-Pruefung fiele. */
.verdict__app span {
  text-decoration: underline;
  text-decoration-color: var(--fc-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.verdict__icon {
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: contain;
  border-radius: 6px;
}
.verdict__app:hover span { text-decoration-color: var(--fc-text-strong); }
.verdict__app:focus-visible {
  outline: 2px solid var(--fc-primary);
  outline-offset: 3px;
  border-radius: 3px;
}
.verdict__for {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fc-text);
}
/* margin-top:auto schiebt die Preiszeile an den Kartenboden; das Raster
   zieht die Karten einer Reihe auf gleiche Hoehe.
   min-height reserviert zwei Zeilen. Ohne das war der Block bei einzeiligen
   Preisen niedriger und die Trennlinie sass hoeher als in der Nachbarkarte —
   sechs Linien auf fuenf verschiedenen Hoehen. Jetzt liegen sie in jeder
   Reihe auf einer Linie, egal wie lang der Preis ausfaellt. */
.verdict__cost {
  margin-top: auto;
  padding-top: 12px;
  min-height: calc(2.9em + 12px);
  border-top: 1px solid var(--fc-border-subtle);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fc-text-muted);
}
@media (max-width: 640px) {
  .verdict { grid-template-columns: 1fr; gap: 12px; }
  .verdict__card { padding: 18px 18px; }
}

/* ----------------------------------------------------------------
   FULL-WIDTH TABLE SECTION — the six-product table cannot fit the
   720px prose column (it ended up cut off mid-column on desktop);
   it lives between intro and article body at full wrap width instead.
---------------------------------------------------------------- */
.art-tablesec { padding: 64px 0 8px; }
.art-tablesec h2 {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--fc-text-strong);
  margin: 0;
  scroll-margin-top: 104px;
}
.art-tablesec__sub {
  font-size: 15px;
  color: var(--fc-text-muted);
  margin: 10px 0 0;
}
.art-tablesec .cmp { margin-top: 28px !important; }
/* At full wrap width the values fit without nowrap; forcing nowrap here
   would push the table past the wrap and bring the horizontal scroll back. */
.art-tablesec .cmp--wide table { min-width: 980px; }
.art-tablesec .cmp--wide tbody td { white-space: normal; min-width: 108px; }
/* Ausnahme Laenderzeile: Flagge und Landesname gehoeren auf eine Zeile.
   Die Regel eine Zeile hoeher gibt allen Zellen den Umbruch ausdruecklich
   zurueck (0-2-2) und schlaegt damit jede kuerzere Auswahl — ein
   `.cmp .cmp__row--nowrap td` (0-2-1) weiter oben in dieser Datei blieb
   wirkungslos. Deshalb steht die Ausnahme hier, direkt dahinter, und nennt
   dieselbe Kette plus die Zeilenklasse. */
.art-tablesec .cmp--wide tbody tr.cmp__row--nowrap td { white-space: nowrap; }
@media (max-width: 720px) { .art-tablesec { padding: 48px 0 0; } }

/* CTA banner sits at the end of the article body */
/* Auch der Banner haelt die Spalte (siehe Mass-System). Bei 760px minus
   Polsterung blieben fuer das 1.3fr/1fr-Raster nur ~366px und ~282px, also
   einspaltig — dann muessen aber drei Regeln des Zweispalters mit, sonst
   arbeiten sie gegeneinander:
   1. .cta-banner__visual zentriert seinen Inhalt. In der rechten Spalte war
      das richtig, ueber die volle Breite rutschte der Download-Block in die
      Mitte, waehrend Ueberschrift und Text links standen.
   2. .cta-banner__stores stapelt die Badges untereinander. Das war fuer eine
      schmale Seitenspalte gedacht; auf 680px Inhaltsbreite gehoeren sie
      nebeneinander.
   3. Der Halo lag auf der rechten Spalte (inset rechts 30%, links 40%) und
      leuchtete einspaltig ins Textfeld.
   Dazu der doppelte Abstand: .cta-banner__p bringt 28px margin-bottom mit,
   das Raster nochmal 32px gap — zusammen 60px Loch vor den Badges. */
.art .cta-banner {
  max-width: 760px;
  margin: 64px auto 88px;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 44px 40px;
}
.art .cta-banner .cta-banner__visual { justify-content: flex-start; }
.art .cta-banner .cta-banner__p { margin-bottom: 0; }
.art .cta-banner .cta-banner__stores { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.art .cta-banner .cta-banner__halo { inset: -60% -10% 30% 25%; }
@media (max-width: 720px) {
  /* Die Polsterung oben schlaegt wegen `.art` die Basisregel im
     880px-Breakpoint, muss hier also selbst kleiner werden. */
  .art .cta-banner { margin: 40px auto 64px; padding: 34px 26px; gap: 22px; }
  .art .cta-banner .cta-banner__stores .store-badge { height: 46px; }
}

/* Brand / editorial avatar — replaces the fabricated personal avatar.
   Uses the square app icon (teal + white cockpit mark) in the round frame.

   Diese Regel haelt den Avatar ueberall randlos. Der Artikelkopf weicht
   bewusst davon ab und gewinnt ueber die hoehere Spezifitaet. */
img.byline__av { object-fit: cover; background: transparent; padding: 0; }
img.authorbio__av { object-fit: cover; background: transparent; }

/* nav active state for the Ratgeber link */
.nav__links a.is-active { color: var(--fc-primary); }