/**
 * cavora-mobile.css - was auf schmalen Geraeten ueber den Rand laeuft.
 *
 * Gemessen am laufenden System bei 390 Pixel Breite (iPhone-Standard): alle 37
 * Seiten mit diesem Kopf liefen seitlich ueber, zwischen 64 und 323 Pixel. Die
 * Seite laesst sich dort quer schieben, der Kopf ragt ueber den Rand hinaus.
 *
 * Die Ursache ist kein einzelnes Element, sondern die Summe: Der Markenname ist
 * bei 1.6rem rund 255 Pixel breit und traegt white-space:nowrap, der
 * Sprachumschalter 103, der Knopf rechts zwischen 96 und 284 Pixel - auf
 * datenschutz.html steht dort "Kostenlosen Ersttermin". Zusammen 406 bis 642
 * Pixel, verfuegbar sind nach Innenabstand rund 342.
 *
 * Warum eine eigene Datei und keine Aenderung in 37 Dokumenten: die Regeln sind
 * ueberall dieselben, und jede Seite bringt ihre eigene Fassung des Kopfes mit.
 * Die Datei wird NACH dem seiteneigenen <style> eingebunden und schlaegt
 * dessen Regeln damit bei gleicher Spezifitaet.
 *
 * Bewusst kein overflow-x:hidden auf html/body: das versteckt den Ueberlauf,
 * statt ihn zu beheben, und setzt position:sticky ausser Kraft.
 */

@media (max-width: 700px) {
  /* Der Kopf darf schrumpfen. Ohne min-width:0 weigert sich ein Flex-Kind,
     unter seine Inhaltsbreite zu gehen - genau daran scheitert der Umbruch. */
  .header-inner {
    gap: .5rem;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand {
    font-size: 1.08rem;
    letter-spacing: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-right {
    gap: .4rem;
    min-width: 0;
    flex-shrink: 1;
  }

  .lang-switcher { padding: 2px; flex-shrink: 0; }
  .lang-btn { padding: .32rem .52rem; font-size: .74rem; }

  .back-btn {
    padding: .5rem .8rem;
    font-size: .78rem;
    gap: .35rem;
    min-width: 0;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Der Knopf hebt sich beim Zeigen an - auf dem Telefon gibt es kein Zeigen,
     und die Verschiebung kostet nur Rechenzeit. */
  .back-btn:hover { transform: none; }
}

@media (max-width: 430px) {
  .brand { font-size: .98rem; }
  .back-btn { max-width: 40vw; padding: .45rem .7rem; }
}


/* Lange deutsche Komposita sprengen schmale Spalten: der Titel
   "4. Berufshaftpflichtversicherung" war bei 390 Pixel Breite 409 Pixel breit,
   die Spalte 287 - ein einzelnes Wort laesst sich nicht umbrechen, und die
   Seite scrollt quer. Gemessen auf impressum, datenschutz und agb.

   overflow-wrap:break-word bricht nur, wenn es sonst nicht passt; normale
   Woerter bleiben unversehrt. hyphens:auto setzt dabei einen Trennstrich, wo
   die Sprache ihn erlaubt - dafuer braucht das Dokument ein korrektes
   lang-Attribut, das hier ueberall gesetzt ist. */
@media (max-width: 700px) {
  h1, h2, h3, h4,
  .card h2, .card h3,
  .section-title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}


/* Lange Adressen und Verweise brechen nicht von selbst:
   "vertragsmanagement@cavorapartners.com" ist 308 Pixel breit und sprengt eine
   288 Pixel schmale Spalte. anywhere bricht notfalls mitten im Wort - bei einer
   Adresse ist das richtig, sie wird ohnehin nicht gelesen sondern angetippt. */
@media (max-width: 700px) {
  a[href^="mailto:"],
  a[href^="tel:"],
  a[href^="http"] {
    overflow-wrap: anywhere;
  }
}


/* Dasselbe Muster wie im Kopf: ein Flex-Kind weigert sich, unter seine
   Inhaltsbreite zu schrumpfen, solange min-width auf auto steht. Betroffen sind
   die Symbol-plus-Text-Zeilen (.spec-item, .benefit-card und Verwandte), die in
   23 Dateien vorkommen. Gemessen auf grc-intelligence bei 320 Pixel: der
   Textblock blieb 178 Pixel breit und schob die Zeile 30 Pixel ueber den Rand. */
@media (max-width: 700px) {
  .spec-content,
  .spec-item > *,
  .benefit-card > *,
  .feature-item > *,
  .usecase-content {
    min-width: 0;
  }
  /* Das Symbol behaelt seine Groesse - es ist das einzige Element der Zeile,
     das nicht schrumpfen darf. */
  .spec-icon,
  .benefit-icon,
  .feature-icon {
    flex-shrink: 0;
  }
}


/* Die Vergleichskarten stehen vor ihrer Einblend-Animation um 20 Pixel seitlich
   versetzt (translateX). Auf breiten Schirmen faellt das in den Innenabstand,
   bei 320 Pixel schiebt die letzte Karte die Seite 30 Pixel ueber den Rand -
   und zwar dauerhaft, solange der Abschnitt nicht in den Blick gescrollt wurde
   und die Animation nicht gelaufen ist. Auf dem Telefon ist die seitliche
   Einblendung ohnehin kaum wahrnehmbar. Gefunden auf grc-intelligence, kommt in
   sechs Dateien vor. */
@media (max-width: 700px) {
  .ws-opt-card,
  .ws-opt-card:last-child {
    transform: none;
  }
  /* Dasselbe Muster noch einmal, diesmal im Raster: 1fr bedeutet
     minmax(auto, 1fr), und auto schrumpft nicht unter die Inhaltsbreite.
     Gemessen bei 320 Pixel: die drei Spalten beanspruchten zusammen 291 Pixel
     in einem 192 Pixel breiten Raster. minmax(0, 1fr) gibt nach. */
  .ws-opt-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}