/* Ergänzungen für den echten Betrieb (nicht im Design-System). */
/* Einsprechen braucht einen Dienst zur Spracherkennung, der noch nicht gewählt ist: bis dahin ausgeblendet. */
.dict { display: none !important; }
/* Die Stripe-Seite ist extern, der Platzhalter aus dem Prototyp wird nicht gezeigt. */
#sc-stripe { display: none !important; }
/* mobile.js legt diese Telefon-Elemente auf jeder Breite an, gestaltet sind sie nur unter 820 px:
   „Auf dieser Seite“ (.mtoc), untere Leiste (.mnav), Gruppentitel und Pfeile der Übersichten (.hub-gh, .hub-arr). */
@media (min-width: 821px) { .mtoc, .mnav, .hub-gh, .hub-arr { display: none !important; } }
/* Offenes Menü am Telefon: mobile.css sperrt das Rollen über body{overflow:hidden}. Damit verliert die klebende
   Kopfzeile ihren Bezug und bleibt oben auf der Seite stehen: nach dem Rollen fehlen Zeichen und Schließen-Knopf.
   Gesperrt wird deshalb über html, body bleibt ohne eigenen Rollbereich. */
@media (max-width: 820px) {
  body.m-open { overflow: visible !important; overflow-x: clip !important; }
  html:has(body.m-open) { overflow: hidden; }
}
/* Telefon, Rückmeldung des Betreibers vom 22.09.2026: Luft zwischen Blöcken im Fragebogen und eine einzeilige Knopfbeschriftung. */
@media (max-width: 820px) {
  /* Fragebogen: die Begleitkarte „So persönlich wird Ihre Rede“ klebte an Feldern bzw. Knöpfen */
  .qgrid .comp { margin-top: 20px; }
  /* Hinweis oben („Wir starten in Kürze“, „Willkommen zurück“) klebte an der Kopfzeile */
  #notices:not(:empty) { padding-top: 14px; }
  /* Dunkle Streifen in Artikeln: „Persönliche Rede beginnen“ ohne Umbruch und ohne Silbentrennung */
  .strip .btn { white-space: nowrap; hyphens: none; -webkit-hyphens: none; padding-left: 18px; padding-right: 18px; font-size: 16px; }
}
@media (max-width: 359px) { .strip .btn { font-size: 15px; padding-left: 14px; padding-right: 14px; } }
/* Menü am Telefon: mobile.js setzt beim Öffnen den Fokus auf „Beispiele“ (für Tastaturbedienung). Safari auf dem iPhone
   zeichnet dafür den Messing-Fokusring auch nach einer Berührung, oben vom Rollbereich angeschnitten. Nur auf Touch-Geräten aus. */
@media (hover: none) and (pointer: coarse) { .m-menu a:focus-visible, .m-menu button:focus-visible { outline: none; } }