/* PRNCASTING · Website
   Richtung B, Schwestermarke von STR8CASTING: Schwarz, Weiß, Himbeere #FF2E63,
   Oswald für Überschriften, Poppins für Text.
   Schriften selbst gehostet, keine externen Aufrufe, keine Kekse. */

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --akzent: #ff2e63;
  --ink: #000;
  --paper: #fff;
  --muted: rgba(255, 255, 255, 0.68);
  --line: rgba(255, 255, 255, 0.16);
  --gap: clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* Kopf mit dem Familienlogo, gebaut am 21.09. nach STR8CASTING und STR8HUNTER:
   Kasten mit PRN in Oswald Medium, CASTING in Oswald Light, gleiche Abstände und Ecken.
   Die Höhe entspricht dem Logo auf str8casting.com (dort 15rem breit bei Seitenverhältnis 4,58). */

.masthead {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
}

.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: auto; height: clamp(2.07rem, 5.02vw, 3.28rem); }

/* Fuß */

.foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  font-size: 0.8125rem;
  color: var(--muted);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  justify-content: space-between;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
}
.foot a {
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.foot a:hover,
.foot a:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--akzent);
}

/* Rechtsseiten */

/* min-width 0: Der Seitenkörper ist eine Flex-Spalte. Ohne diese Zeile setzt die breiteste
   Tabelle die Mindestbreite und schiebt auf dem Handy die ganze Seite über den Rand. */
.doc { padding-block: clamp(2rem, 6vw, 4.5rem); min-width: 0; }

.doc h1 {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  /* 1.12: Oswald setzt die Punkte von Ä und Ü sehr hoch. Bei 1.04 berührten sie in
     „Datenschutz-erklärung" auf 390 Punkten noch die Zeile darüber, gemessen am 21.09. */
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 8 4 3;
  overflow-wrap: break-word;
}

.doc h2 {
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.75rem;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
}

.doc h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.doc p, .doc ul, .doc ol { margin: 0 0 0.9rem; max-width: 44rem; color: var(--muted); }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.35rem; }
.doc strong { color: var(--paper); font-weight: 600; }
.doc address { font-style: normal; color: var(--paper); }
.doc a { color: var(--akzent); text-underline-offset: 0.2em; }
.doc .lede { color: var(--paper); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: clamp(2.5rem, 6vw, 3.5rem) 0; max-width: 44rem; }

.doc address { margin: 0 0 0.9rem; line-height: 1.55; }

.tabelle { overflow-x: auto; width: 100%; max-width: 52rem; margin: 0 0 1.2rem; }
.doc table { min-width: 30rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.doc th { color: var(--paper); font-weight: 600; font-size: 0.8125rem; }
.doc td:first-child { color: var(--paper); }

.kasten { max-width: 44rem; margin: 1.5rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--akzent); border-radius: 4px; }
.kasten h3 { margin-top: 0; color: var(--akzent); }
.kasten p:last-child { margin-bottom: 0; }

/* Lückenmarken im Entwurf. Eine Seite mit Marke geht nicht raus, pruefen.js hält das fest. */
mark.offen { background: #fff3b0; color: #000; padding: 0 0.2em; border-radius: 2px; }

.back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-underline-offset: 0.25em;
}
.back:hover { color: var(--paper); }

/* ===================================================================
   Startseite, Richtung B, gebaut am 22.09.2026 aus der abgenommenen Designwelt (Version 11).
   Maße wie in der Tafel: 1440 breit mit 72 Punkten Rand, am Handy 390 mit 20.
   Bilder als Duoton: graustufige Datei, per multiply auf die Akzentfarbe gelegt.
   =================================================================== */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 1rem; }

.weit { max-width: 90rem; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 0.6rem 1rem; background: var(--akzent); color: #000; }
.skip:focus { left: 0; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--line); }
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; flex-wrap: wrap;
  padding-block: clamp(1rem, 2vw, 1.35rem);
}
.kopf-rechts { display: flex; align-items: center; gap: 0.75rem 2.25rem; flex-wrap: wrap; }
.kopf-nav { display: flex; gap: 2.25rem; font-size: 0.9375rem; }
.kopf-nav a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.kopf-nav a:hover { color: var(--paper); }

/* Sprachwahl wie auf str8casting.com: Flaggen, die aktive Sprache voll mit feinem Rahmen */
.sprachen { display: flex; gap: 0.25rem; }
.flagge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3rem 0.45rem; border: 1px solid transparent; border-radius: 2px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted); text-decoration: none; opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.flagge svg { display: block; width: 1.375rem; height: auto; border-radius: 1px; }
.flagge:hover { opacity: 0.85; }
.flagge[aria-current] { opacity: 1; border-color: var(--line); color: var(--paper); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 6px;
  background: var(--akzent); color: #000;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0.0625rem; text-transform: uppercase;
  text-decoration: none; text-align: center;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), filter 0.16s ease;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:active { transform: scale(0.97); }
.knopf-gross { min-height: 3.75rem; padding: 0 2.125rem; font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); }
.knopf-dunkel { background: #000; color: var(--paper); }
.nur-schmal { display: none; }

/* Held */
.held .wrap {
  display: grid; gap: clamp(1.75rem, 4.4vw, 4rem); align-items: center;
  padding-block: clamp(1.25rem, 5.5vw, 5rem) clamp(2.5rem, 6.5vw, 6rem);
}
.held-text { display: flex; flex-direction: column; gap: 1.75rem; }
.held h1 {
  margin: 0; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(3.5rem, 1.9rem + 4.8vw, 5.5rem); line-height: 0.95;
  letter-spacing: 0.03rem; text-transform: uppercase;
}
.held h1 em { font-style: normal; color: var(--akzent); }
.kicker {
  display: block; margin-bottom: 1.25rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem); font-weight: 600; line-height: 1.35;
  letter-spacing: 0.1875rem; color: var(--akzent);
}
.lede-gross { margin: 0; max-width: 34rem; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.held-aktion { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.held-hinweis { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.alter { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); }
.alter b {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border: 2px solid rgba(255, 255, 255, 0.62); border-radius: 50%;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600; font-size: 1rem; color: var(--paper);
}
.held-bild { position: relative; margin: 0; height: clamp(20rem, 44vw, 40rem); border-radius: 4px; overflow: hidden; background: var(--akzent); }
.duoton { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.2); mix-blend-mode: multiply; }
.held-bild .duoton { object-position: 50% 32%; }

/* Abschnitte */
.abschnitt { border-top: 1px solid var(--line); padding-block: clamp(2.75rem, 7vw, 6.5rem); }
.augenbraue {
  margin: 0 0 1.25rem; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); letter-spacing: 0.1875rem; text-transform: uppercase;
  color: var(--akzent);
}
.h2, .h-riesig {
  margin: 0; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  line-height: 1; text-transform: uppercase; text-wrap: balance;
}
.h2 { font-size: clamp(2.5rem, 1.7rem + 2.8vw, 3.75rem); }
.h2-gross { font-size: clamp(2.75rem, 1.6rem + 3.9vw, 4.5rem); line-height: 0.98; }
.h-riesig { font-size: clamp(2.5rem, 1.1rem + 4.7vw, 5.25rem); line-height: 1; letter-spacing: 0.03rem; }
.kontur { color: transparent; -webkit-text-stroke: 1.6px var(--paper); }
.text-gross { margin: 1.5rem 0 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.text-breit { max-width: 48.75rem; }

/* Oswald setzt Akzente und Háčeks auf Versalien sehr hoch. Bei engem Zeilenabstand stoßen sie an die
   Zeile darüber, gemessen am 22.09. an „TVOJE PENÍZE" bei 375 Punkten. Tschechisch und Spanisch
   bekommen deshalb mehr Luft, Deutsch und Englisch behalten den engen Satz der Tafel. */
html:lang(cs) .held h1, html:lang(cs) .h2, html:lang(cs) .h-riesig,
html:lang(es) .h2, html:lang(es) .h-riesig { line-height: 1.12; }

/* Formate */
.formate-kopf { display: grid; gap: 0 4.5rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.formate-kopf .text-gross { margin-top: 1.25rem; }
.karten { display: grid; gap: 0.75rem 1.25rem; }
.karte {
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.75rem 1.625rem 2rem; border: 1px solid var(--line); border-radius: 4px; background: #0b0b0b;
}
.karte-kopf { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.875rem; }
.karte h3 {
  margin: 0; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.05; text-transform: uppercase;
}
.karte p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.chip {
  display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; white-space: nowrap;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.09rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.chip-akzent { border-color: var(--akzent); color: var(--akzent); }

/* So läuft's */
.punkte { display: grid; gap: 2.75rem 4.5rem; margin-top: clamp(2.25rem, 5vw, 4rem); }
.punkt { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.punkt h3, .kontrolle h3 {
  margin: 0; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: 0.0625rem; text-transform: uppercase;
}
.punkt p, .kontrolle p { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }

/* Zwei Spalten: Top-Creator und Band */
.zwei { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.liste-gross { margin: 2rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.liste-gross li {
  padding: 1.125rem 0 1rem; border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; text-transform: uppercase;
}
.bilder-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.625rem, 1.2vw, 1rem); height: clamp(14.5rem, 42vw, 37.5rem); }
.bilder-paar figure { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: var(--akzent); }
.bilder-paar figure:first-child .duoton { object-position: 40% 50%; }
.bilder-paar figure:last-child .duoton { object-position: 50% 40%; }

/* Band in der Akzentfarbe */
.band-akzent { background: var(--akzent); color: #000; padding-block: clamp(2.75rem, 7vw, 6rem); }
.band-akzent .augenbraue { color: #000; }
.band-text { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.band-text p { margin: 0; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); line-height: 1.65; }
.band-text p + p { font-size: clamp(0.9375rem, 0.87rem + 0.25vw, 1.0625rem); }

/* Kontrolle */
.kontrolle .wrap { display: grid; gap: 1.5rem 3rem; padding-block: clamp(2.5rem, 6.5vw, 6rem); }
.kontrolle h3 { margin-bottom: 0.625rem; }

@media (min-width: 48rem) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .held .wrap, .formate-kopf, .zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontrolle .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bilder-paar figure:last-child { margin-top: 4rem; }
}
@media (min-width: 72rem) {
  .karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Handy wie in der Tafel: Logo oben, darunter Flaggen ohne Kürzel und der Knopf, Bild vor dem Text */
@media (max-width: 59.99rem) {
  .kopf .wrap { flex-direction: column; align-items: stretch; }
  .kopf-rechts { justify-content: space-between; }
  .kopf-nav { display: none; }
  .flagge-kurz { display: none; }
  .flagge { padding: 0.3rem; }
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .kopf .knopf { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
  .held-bild { order: -1; }
  .held .knopf-gross { width: 100%; }
  .kontur { -webkit-text-stroke-width: 1px; }
}
@media (max-width: 47.99rem) {
  .karte { padding: 1.125rem 1rem; gap: 0.5rem; }
  .karte-kopf { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.75rem; }
  .karte p { font-size: 0.875rem; }
  .chip { height: 1.5rem; padding: 0 0.5rem; font-size: 0.6875rem; }
}

/* ===================================================================
   Ratgeber und FAQ, seit 22.09.2026. Setzt auf .doc der Rechtsseiten auf.
   Die Fragen tragen die Seite: Unter jeder Überschrift steht die Antwort im ersten Satz,
   so zitieren Suchmaschinen und KI-Antworten sie.
   =================================================================== */
.ratgeber { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 5.5rem); }
.kopf-nav a[aria-current] { color: var(--paper); }

.brotkrumen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.55rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); font-size: 0.8125rem; color: var(--muted);
}
.doc .brotkrumen a { color: var(--muted); text-decoration-color: var(--line); }
.doc .brotkrumen a:hover { color: var(--paper); text-decoration-color: var(--akzent); }
.brotkrumen [aria-current] { color: var(--paper); }

.doc .stand { margin: calc(-1 * clamp(0.75rem, 2vw, 1.5rem)) 0 clamp(1.5rem, 4vw, 2rem); font-size: 0.8125rem; }
.ratgeber .lede { font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem); line-height: 1.55; }

.ratgeber h2 {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0.85rem; max-width: 44rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.15;
  letter-spacing: 0.01em; text-transform: none; text-wrap: balance; color: var(--paper);
}
.ratgeber h2.gruppe {
  margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); line-height: 1.4; letter-spacing: 0.1875rem;
  text-transform: uppercase; color: var(--akzent);
}
.ratgeber h3 { margin-top: 1.6rem; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); color: var(--paper); }
.ratgeber h3.frage {
  margin: 2rem 0 0.5rem; max-width: 44rem;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600; line-height: 1.2; text-wrap: balance; color: var(--paper);
}

/* Übersicht */
.doc .ratgeber-liste {
  display: grid; gap: 0.75rem; max-width: 56rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; list-style: none;
}
.doc .ratgeber-liste li { margin: 0; }
.doc .ratgeber-liste a {
  display: flex; flex-direction: column; gap: 0.4rem; height: 100%;
  padding: 1.25rem 1.375rem 1.4rem; border: 1px solid var(--line); border-radius: 4px; background: #0b0b0b;
  color: var(--paper); text-decoration: none; transition: border-color 0.15s ease;
}
.doc .ratgeber-liste a:hover, .doc .ratgeber-liste a:focus-visible { border-color: var(--akzent); }
.ratgeber-liste .titel {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.1; text-transform: uppercase;
}
.ratgeber-liste .text { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

/* Weiterlesen */
.weiter { max-width: 44rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.doc .weiter-titel {
  margin: 0 0 0.75rem; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600;
  font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent);
}
.doc .weiter ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.doc .weiter li { margin: 0; }
.doc .weiter a { color: var(--paper); text-decoration-color: var(--akzent); }

/* Aufruf am Ende jeder Seite, in der Akzentfarbe wie das Band der Startseite */
.aufruf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  max-width: 44rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 4px; background: var(--akzent); color: #000;
}
.doc .aufruf p { margin: 0; color: #000; }
.doc .aufruf .aufruf-titel {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.05; text-transform: uppercase;
}
.doc .aufruf .aufruf-alter { font-size: 0.8125rem; }
.doc a.knopf-dunkel { color: var(--paper); text-decoration: none; }
.doc .klein { margin-top: 2rem; font-size: 0.8125rem; }

@media (min-width: 48rem) {
  .doc .ratgeber-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .aufruf .knopf-gross { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}