/* Riezler Hof – Runde 9 (08.10.2026), ersetzt fixes-stefan8-20261008.css (zusammengeführt; neu: Kürzel bis 1023 px aus, Umbruch Rechtsseiten-Überschriften).
   Topbar-Text bleibt auf allen Breiten sichtbar und bricht sauber um. Ein kleines Skript in index.html setzt --rh-tbx = Mehrhöhe der
   Topbar gegenüber der einzeiligen Topbar (36 px); Kopfzeile, Hero, Rechtsseiten und Menü rücken um diesen Wert nach unten.
   Ohne Skript (--rh-tbx fehlt) gelten exakt die bisherigen Abstände. */
.rh-topbar .container-page{flex-wrap:wrap;row-gap:.25rem}
.rh-topbar p{display:block;white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 18rem;min-width:0}
.rh-topbar button span{display:inline}
.rh-topbar > .container-page > div{flex-wrap:wrap;row-gap:.25rem}
@media (max-width:1023px){
  .rh-topbar p{letter-spacing:0}
  /* Handy und Tablet bis 1023 px: Sprachkürzel ausgeblendet wie Runde 4, nur Flaggen (Name per aria-label) */
  .rh-topbar button span{display:none}
}
@media (max-width:639px){
  .rh-topbar .container-page{justify-content:center}
  .rh-topbar p{flex-basis:100%;text-align:center}
  .rh-topbar > .container-page > div{justify-content:center}
}
@media (max-width:359px){
  .rh-topbar button{min-width:40px}
}
/* Kopfzeile, Inhalt und Menü rücken um die Mehrhöhe der Topbar nach unten */
.rh-topbar + header{top:calc(1.75rem + var(--rh-tbx,0px))}
.rh-hero{padding-top:calc(7.5rem + var(--rh-tbx,0px))}
@media (max-width:767px){.rh-hero{padding-top:calc(6.5rem + var(--rh-tbx,0px))}}
section.container-page.pt-32.max-w-3xl{padding-top:calc(8rem + var(--rh-tbx,0px))}
.rh-menu-panel{max-height:calc(100vh - 6.5rem - var(--rh-tbx,0px));max-height:calc(100dvh - 6.5rem - var(--rh-tbx,0px))}
/* Rechtsseiten: lange Überschriften stehen auf schmalen Displays nicht mehr seitlich über (kein Querscrollen).
   H1 bis 479 px etwas kleiner (30 px -> (Breite − 3 rem)/12,4, bei 320 px ca. 22 px, bei 390 px ca. 27,6 px), damit „Barrierefreiheitserklärung“ in eine Zeile passt;
   als Sicherheitsnetz darf jedes zu lange Wort umbrechen (greift nur, wenn ein Wort allein nicht in die Zeile passt). */
.legal-content h1,.legal-content h2,.legal-content h3{overflow-wrap:anywhere}
@media (max-width:479px){
  .legal-content h1{font-size:min(1.875rem,calc((100vw - 3rem) / 12.4))}
}
/* Sehr schmale Handys (< 360 px): Seitenkopf-Überschrift 32 -> 30 px, damit lange Einzelwörter (z. B. RU „Кляйнвальзертале“ auf /aktivitaeten)
   nicht über den Rand stehen; Sicherheitsnetz wie oben. */
@media (max-width:359px){
  .rh-hero h1{font-size:1.875rem}
  .rh-hero > .container-page{min-width:0}
  .rh-hero h1{overflow-wrap:anywhere}
}