/* ===========================================================
   OPROO – gemeinsame Responsive-Schicht
   Wird von jeder Seite im <helmet> geladen und greift dadurch
   automatisch auch für neue Seiten (z. B. Automaten-Unterseiten).
   Da die Seiten inline-styled sind, wird über Attribut-/Tag-
   Selektoren übersteuert. Ergänzt die seiteninternen .r-*-Regeln
   um Sicherheitsnetze gegen horizontales Überlaufen und sorgt
   für einen einheitlichen vertikalen Abstands-Rhythmus.
   =========================================================== */

/* ---------- Deutsche Silbentrennung für Fließtext ---------- */
p, li {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}

/* Sicherheitsnetz auf allen Größen: nichts darf die Seite seitlich
   überlaufen lassen. 'clip' verhindert horizontales Scrollen, ohne
   die klebrige Navigation zu brechen. */
html { overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  /* Feste 'nowrap'-Zeilen wieder umbrechen lassen – verhindert, dass
     lange Überschriften/Werte den Viewport nach rechts sprengen.
     Ausnahme: Elemente mit .r-keep behalten ihre eine Zeile. */
  [style*="white-space: nowrap"]:not(.r-keep) { white-space: normal !important; }
  [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }

  h1, h2, h3, h4, p { overflow-wrap: break-word; }

  /* Einheitliche Reduktion großer vertikaler Sektions-Abstände,
     damit alle Seiten auf dem Handy denselben Rhythmus zeigen. */
  [style*="padding: 100px 40px"],
  [style*="padding: 96px 40px"],
  [style*="padding: 92px 40px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding: 84px 40px"],
  [style*="padding: 80px 40px"],
  [style*="padding: 76px 40px"] { padding-top: 54px !important; padding-bottom: 54px !important; }
  [style*="padding: 72px 40px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 64px 40px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* ---------- Sehr schmal ---------- */
@media (max-width: 400px) {
  section > div, footer > div, nav > div, header > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1 { font-size: 24px !important; }
}

/* Entwickler-Fehlerbox der Runtime in Produktion ausblenden.
   support.js kann bei einem Laufzeitfehler einen roten Kasten mit
   Komponentenname und JS-Meldung einblenden (z-index 2147483647).
   Die generierte Datei wird nicht angefasst - hier ueberschrieben. */
.sc-logic-error { display: none !important; }

/* Skip-Link (5.3): nur bei Tastaturfokus sichtbar, sonst ausserhalb des Bildschirms.
   Ermoeglicht das Ueberspringen von Topbar, Navigation, Badge und Sprachumschalter. */
.oproo-skiplink {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: #0f0f0f; color: #fff; padding: 12px 18px; border-radius: 8px;
  font: 700 14px/1 'IBM Plex Sans', system-ui, sans-serif; text-decoration: none;
  transition: top .15s ease;
}
.oproo-skiplink:focus { top: 12px; }
/* Sprungziel selbst darf keinen Fokusrahmen zeichnen */
main[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .oproo-skiplink { transition: none; }
}