/* ============================================================
   Mobile-Optimierung — gemeinsame Datei für alle Seiten
   ------------------------------------------------------------
   Einbindung: per <link> DIREKT NACH dem </style>-Block jeder
   Seite. Nur so gewinnen diese Regeln gegen die gleichnamigen
   Klassen im Seiten-<style> (gleiche Spezifität → späteres
   Stylesheet gewinnt).

   Warum die vielen !important: Ein großer Teil der Maße steht im
   HTML als inline style="…" (aus dem Design-Export übernommen).
   Inline-Styles haben höhere Spezifität als jedes Stylesheet und
   lassen sich nur so überschreiben. Reine Klassenregeln
   (.uc-card, .btn-primary, …) kommen ohne !important aus.
   ============================================================ */

/* Sprungmarken nicht unter die klebende Kopfzeile scrollen */
section[id] { scroll-margin-top: 80px; }

/* Nur für Screenreader und Suchmaschinen sichtbar — wird für
   Zwischenüberschriften genutzt, die im Layout nicht erscheinen
   sollen, für eine saubere Überschriftenhierarchie aber nötig sind. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Navigation (zusammen mit assets/nav.js)
   Grundzustand für alle Breiten: Das Skript verschiebt die
   Sprungmarken in .nav-panel — auf dem Desktop ist das eine
   schlichte Flex-Zeile, die Darstellung bleibt unverändert.
   Die Burger-Schaltfläche ist hier aus und wird erst im
   Mobil-Breakpoint eingeblendet.
   ------------------------------------------------------------ */
.nav-panel { display: flex; align-items: center; gap: 28px; }
.nav-burger { display: none; }

/* ------------------------------------------------------------
   Bis 960px: Im Abschnitt "Ablauf" stehen die drei Karten nicht
   mehr nebeneinander. Die animierte Verbindungslinie liegt
   waagerecht auf halber Höhe und würde quer durch die
   gestapelten Karten laufen — daher ausblenden.
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  #step-line { display: none !important; }
}

/* ------------------------------------------------------------
   Bis 760px: Telefon / kleines Tablet
   ------------------------------------------------------------ */
@media (max-width: 760px) {

  /* ---------- Lange Wörter umbrechen ----------
     Deutsche Komposita ("Verbraucherschlichtungsstelle",
     "Umsatzsteuer-Identifikationsnummer") sind breiter als eine
     Textspalte auf dem Telefon und ragten aus den Karten heraus.
     hyphens: auto trennt sauber nach Silben (die Seiten sind
     lang="de"), overflow-wrap greift als Notausgang bei allem,
     was sich nicht trennen lässt — etwa langen URLs. */
  p, li, dd, dt, h1, h2, h3, blockquote, summary, .ds-box, .toc a {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* ---------- Kopfzeile ----------
     Die Wortmarke ist sehr breit (Seitenverhältnis ~7,6:1):
     bei 34px Höhe schon ~258px. Zusammen mit den Navigations-
     links passt das nicht in 375px — die Seite ließ sich
     dadurch seitlich scrollen. Lösung: Logo kleiner, die
     Sprungmarken entfallen, Logo + Button bleiben in einer
     Zeile. Das Logo verlinkt weiterhin auf die Startseite. */
  header > div {
    height: auto !important;
    max-width: 100% !important;
    min-height: 58px;
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  /* Wortmarke gegen die quadratische Bildmarke tauschen:
     die Wortmarke braucht ~197px Breite, das Emblem nur ~31px */
  #logo-header { display: none !important; }
  #logo-emblem { display: block !important; }
  header nav { gap: 12px !important; }
  header .nav-cta {
    font-size: 14px !important;
    padding: 10px 16px !important;
    white-space: nowrap;
  }

  /* ---------- Burger-Menü ----------
     Ohne JavaScript bleiben die Sprungmarken ausgeblendet (die
     Seite ist über Logo, CTA und Scrollen trotzdem bedienbar).
     Mit JavaScript (html.js-nav) klappen sie unter der
     Kopfzeile auf. */
  header .nav-link { display: none; }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid rgba(20,19,75,0.18);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .nav-burger:hover { border-color: #14134B; background: rgba(20,19,75,0.04); }
  .nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #14134B;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Balken werden beim Öffnen zum Kreuz */
  .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .js-nav .nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 16px 10px;
    background: #FBFBF9;
    border-bottom: 1px solid rgba(20,19,75,0.1);
    box-shadow: 0 14px 28px rgba(20,19,75,0.12);
  }
  .js-nav .nav-panel.open { display: flex; }
  .js-nav .nav-panel.open .nav-link {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    border-top: 1px solid rgba(20,19,75,0.08);
  }
  .js-nav .nav-panel.open .nav-link:first-child { border-top: 0; }

  @media (prefers-reduced-motion: reduce) {
    .nav-burger span { transition: none; }
  }

  /* ---------- Inhaltsbreite ----------
     Alle Sections begrenzen ihren Inhalt per inline-style auf
     "min(1440px, 88vw)". Die 88vw verschenken auf dem Telefon
     12% Breite (bei 375px rund 45px). Auf Mobilgeräten reicht
     das seitliche padding von 24px als Rand. */
  [style*="88vw"] { max-width: 100% !important; }

  /* Mehrspaltige Abschnitte (Problem/Lösung, Warum wir, FAQ)
     haben feste Mindestbreiten von 280–320px im inline-style.
     Auf schmalen Geräten (ab ~320px abzüglich Rand) sprengt das
     den Platz — hier dürfen die Spalten schrumpfen.
     Achtung: greift nur auf inline-styles, Klassenregeln wie
     .ds-num (min-width: 30px) bleiben unberührt. */
  [style*="min-width: 280px"],
  [style*="min-width: 300px"],
  [style*="min-width: 320px"] { min-width: 0 !important; }

  /* ---------- Hero ---------- */
  #hero-inner {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    gap: 36px !important;
  }
  /* min-width: 320px bzw. 300px sprengte auf kleinen Geräten
     den verfügbaren Platz */
  #hero-text, #hero-visual {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* Die rotierende Zeile war über "font-size: min(1em, 7.4cqw)"
     an die Containerbreite gekoppelt und schrumpfte auf dem
     Telefon auf ~24px, während "Wir automatisieren" bei 36px
     stand — das wirkte verzerrt. Jetzt beide gleich groß; die
     Zeile darf umbrechen, lange Wörter werden getrennt.
     min-height reserviert zwei Zeilen, damit das Layout beim
     Wortwechsel nicht springt. */
  #hero-inner h1 { font-size: clamp(26px, 7.4vw, 34px) !important; }
  #rotating-line {
    font-size: 1em !important;
    white-space: normal !important;
    min-height: 2.3em !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Das Wort selbst steckt in einem per JS erzeugten inline-block.
     Ohne max-width nimmt der seine Wunschbreite ein und ein langes
     Wort ("die Forderungsanmeldung.") ragt auf sehr schmalen
     Displays über den Rand. */
  #rotating-line > span {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* ---------- Live-Feed-Panel ----------
     Lange Bezeichnungen ("Forderungsanmeldung") und der
     Statustext ("in Warteschlange") passten zusammen nicht in
     eine Zeile und ragten aus dem Panel heraus. Jetzt: etwas
     kompaktere Schrift, die Spalte darf schrumpfen (min-width)
     und die Zeile notfalls umbrechen. */
  #feed-panel { padding: 18px !important; }
  #feed-rows > div > div { min-width: 0 !important; }
  #feed-rows > div > div > div { flex-wrap: wrap !important; }
  #feed-rows > div > div > div > span { font-size: 14px !important; }
  #feed-rows > div > div > div > span + span { font-size: 11.5px !important; }

  /* Buttons über die volle Breite — größere Trefferfläche */
  .btn-primary, .btn-secondary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* ---------- Logo-Laufzeile ---------- */
  .marquee-track { gap: 40px !important; min-height: 40px !important; }
  .marquee-track img { height: 40px !important; }

  /* ---------- Karten ---------- */
  .uc-card { padding: 22px; }
  .step-card { padding: 24px; }

  /* ---------- Team-Seite ---------- */
  .team-btn { width: 100%; justify-content: center; box-sizing: border-box; }

  /* ---------- Datenschutz: Abschnittsüberschriften ----------
     .ds-h ist ein Flex-Container; der Überschriftentext liegt
     darin als anonymes Flex-Element und kann deshalb nicht unter
     seine Mindestbreite schrumpfen — lange Wörter wie
     "Datenschutzbeauftragter" ragten dadurch aus der Karte.
     Als Block fließt der Text normal um die Nummer herum. */
  .ds-h { display: block !important; }
  .ds-h .ds-num { margin-right: 10px; vertical-align: 2px; }

  /* Gleiches Problem in den Aufzählungen: der Listentext ist
     anonymes Flex-Element neben dem ::before-Punkt. */
  .ds-ul li { display: block !important; }
  .ds-ul li::before {
    display: inline-block;
    margin-right: 10px;
    vertical-align: 2px;
  }

  /* ---------- Fußzeile ----------
     64px Abstand zwischen "Kontakt" und "Rechtliches" ist auf
     dem Telefon zu viel */
  footer > div:first-child {
    padding: 36px 16px 28px !important;
    gap: 28px !important;
  }
  footer > div:first-child > div:last-child { gap: 32px !important; }
  footer > div:last-child > div { padding: 16px !important; }
}

/* ------------------------------------------------------------
   Bis 480px: sehr schmale Geräte
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  /* Kartenraster einspaltig. Die Raster fordern per
     "minmax(240–300px, 1fr)" eine Mindestspaltenbreite — ist
     weniger Platz vorhanden (z. B. 272px bei 320px Display),
     schrumpft eine Grid-Spur nicht, sondern ragt heraus.
     Unterhalb von 480px ist ohnehin nur eine Spalte sinnvoll. */
  [style*="minmax(240px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"] { grid-template-columns: 1fr !important; }

  /* Auch mit einer 1fr-Spalte gilt für Grid-Elemente die
     Mindestbreite "auto" – ein langes Wort wie
     "Masseverbindlichkeiten" weitet damit die ganze Spalte über
     den Bildschirmrand hinaus. min-width: 0 hebt das auf, die
     Silbentrennung weiter oben bricht das Wort dann um. */
  [style*="minmax(240px"] > *,
  [style*="minmax(280px"] > *,
  [style*="minmax(300px"] > * { min-width: 0; }

  /* Einheitliche Zeilenhöhen (grid-auto-rows: 1fr) sind nur bei
     mehreren Spalten sinnvoll — sie sorgen dort für eine saubere
     Linie. Einspaltig würde jede Karte auf die Höhe der längsten
     gezogen und bekäme unnötig viel Leerraum. */
  [style*="grid-auto-rows: 1fr"] { grid-auto-rows: auto !important; }

  /* Das Inhaltsverzeichnis der Datenschutzseite definiert sein
     Raster im <style>-Block (nicht inline) und wird vom
     Attribut-Selektor oben nicht erfasst. */
  .toc ol { grid-template-columns: 1fr !important; }

  /* Impressum: Bezeichnung und Wert untereinander statt
     zweispaltig */
  .imp-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .imp-dt { margin-top: 10px; }
  .imp-dt:first-child { margin-top: 0; }

  /* Datenschutz: Inhaltsverzeichnis einspaltig, enger */
  .toc ol { gap: 8px; }
}