/***************************************************************************
 * responsive.css – globale Darstellungs-Korrekturen für alle Endgeräte.
 *
 * Wird aus views/partials/header.ejs eingebunden und liegt damit auf jeder
 * Seite, die den Header nutzt. Absichtlich klein gehalten: hier gehört nur
 * hinein, was seitenübergreifend gilt. Seitenspezifisches bleibt in der
 * jeweiligen Seite bzw. Komponente.
 ***************************************************************************/

/* ------------------------------------------------------------------------
 * 1) Lange deutsche Komposita in Überschriften
 *
 * Wörter brechen von sich aus nicht um. "Datenschutzerklärung" oder
 * "Geschäftsbedingungen" sind bei 320px breiter als die Spalte und haben
 * das Dokument seitlich herausgeschoben (AGB +20px, Datenschutz +13px).
 * hyphens greift, weil die Seiten lang="de" gesetzt haben; break-word ist
 * der Rückfall für Unsilbentrennbares wie URLs oder E-Mail-Adressen.
 * ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ------------------------------------------------------------------------
 * 2) Mindestgrößen für Bedienelemente auf Touch-Geräten
 *
 * Die Header-Icons waren 32x32 und die Tabs 34px hoch – deutlich unter den
 * 44px, die Apple und Google als Mindestfläche empfehlen. Die sichtbare
 * Grafik bleibt unverändert, nur die antippbare Fläche wächst; der Header
 * wird dadurch 12px höher.
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) and (pointer: coarse) {
  .header-icons .icon-link,
  .header-icons .account-trigger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .mobile-nav-tabs .nav-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------------------
 * 3) Nichts darf das Dokument seitlich herausschieben
 *
 * Sicherheitsnetz gegen horizontales Wackeln. overflow-x: clip statt hidden,
 * damit position: sticky weiter funktioniert – hidden würde auf dem
 * Wurzelelement einen Scroll-Container erzeugen und sticky abschalten.
 * ---------------------------------------------------------------------- */
html {
  overflow-x: clip;
  max-width: 100%;
}

/* Medien passen sich ihrem Container an, statt ihn zu sprengen. */
img,
video,
canvas,
svg:not([width]) {
  max-width: 100%;
  height: auto;
}

/* Tabellen in Rechtstexten sollen im eigenen Kasten scrollen, nicht die
   ganze Seite verbreitern. */
table {
  max-width: 100%;
}