/* Marke Ringtray – nur Variablen nach Design-Kit; Kontrastwerte in DESIGN.md */
:root {
  --marke: #1e5a7a;
  --marke-dunkel: #154257;
  --marke-hell: #e6f0f5;
  --akzent: #e8912b;
  --flaeche: #f6f5f1;
  --radius: 12px;
}
/* Seitenspezifisch: Produktvorschau „Rückrufzettel“ als HTML-Mockup statt Bild (gestochen scharf, kein Bildexport nötig) */
.zettel { padding: 1.25rem 1.4rem 1.4rem; font-size: .95rem; }
.zettel-kopf { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: .7rem; margin-bottom: .8rem; }
.zettel-kopf strong { font-family: var(--schrift-kopf); font-size: 1.05rem; }
.zettel dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem .75rem; margin: 0; }
.zettel dt { color: var(--text-leise); }
.zettel dd { margin: 0; font-weight: 550; }
.gespraech p { max-width: none; margin: 0 0 .6rem; }
/* Kopf-Knopf auf schmalen Handys einzeilig halten (sonst Umbruch bei 390 px) */
@media (max-width: 420px) { .kopf .btn { padding-inline: .85rem; font-size: .9rem; white-space: nowrap; } .zettel dl { grid-template-columns: 6.5rem 1fr; } }

/* Ratgeber: Abstand unter Tabellen, Codes umbrechen nicht */
.tabelle-scroll { margin-bottom: 1rem; }
.tabelle-scroll code { white-space: nowrap; }

/* Ratgeber Mailbox-Ansage: Vorlagen zum Vorlesen */
blockquote { margin: 0 0 1.25rem; padding: .9rem 1.2rem; max-width: var(--lesebreite); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
blockquote p { margin: 0; font-size: 1.05rem; }
section[id], h2[id] { scroll-margin-top: 5rem; } /* fester Kopf verdeckt sonst Sprungziele (#demo) */