/* ==========================================================================
   DP-Dynamic · Verhalten auf schmalen Schirmen

   Gemessener Ausgangszustand bei 320px: die Startseite war 393px breit,
   also 73px Überlauf. Ursachen waren immer dieselben drei:

   1. Lange deutsche Komposita ("Drohnensysteme", "Hochspannungsnetze")
      passen in keine 272px-Spalte und brechen von sich aus nicht.
   2. Absolut gesetzte Dekoration ragt über den rechten Rand hinaus und
      erzeugt dadurch Scrollbreite.
   3. Kopfleiste und Tabellen sind auf Desktopbreiten gebaut.

   Diese Datei behebt die Muster an einer Stelle, statt in 24 Dateien.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Text bricht, statt überzulaufen
   Silbentrennung greift nur dort, wo es eng wird. Auf breiten Schirmen sieht
   getrennter Fließtext unruhig aus, dort bleibt sie aus.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, figcaption, blockquote,
th, td, label, summary, button, a {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 640px) {
  h2, h3, h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Nicht mitten im Wort trennen, wenn nur zwei Zeichen übrig blieben */
    hyphenate-limit-chars: 8 4 4;
  }
  /* Die Kennwerte der Produktkacheln stehen in nackten div und span, nicht
     in p oder li. Ohne sie fallen "Hinderniserkennung", "Bildübertragung"
     und "Windbeständigkeit" durch das Raster. */
  p, li, dd, dt, td, th, div, span, figcaption, summary, label {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Nie trennen: Zahlen, Kennungen, Akronyme und alles in Displayschrift.
   Sonst wird aus BVLOS ein "BV-LOS" und aus ÜBERTRAGUNGSRATE eine
   "ÜBERTRA-GUNGSRATE". */
.mono, [data-zahl], .num, code, kbd, samp, time,
.font-display, h1, .uppercase, [class*="tracking-"] {
  hyphens: none;
  -webkit-hyphens: none;
}

/* --------------------------------------------------------------------------
   2 · Dekoration erzeugt keine Scrollbreite mehr
   `clip` statt `hidden`: es schneidet ab, ohne einen Scrollbereich zu
   erzeugen, und lässt `position: sticky` darin weiter funktionieren.
   -------------------------------------------------------------------------- */
@supports (overflow: clip) {
  body > div > section,
  body > div > footer,
  main > section,
  main > footer,
  body > footer {
    overflow-x: clip;
  }
}

/* --------------------------------------------------------------------------
   3 · Kopfleiste
   Bei 320px standen Logo und vier Bedienelemente nebeneinander und brauchten
   356px in einer 272px breiten Zeile.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  header .logo-light, header .logo-dark { height: 1.75rem; }
  header > div.flex { gap: 0.5rem; }
  header .flex.items-center.gap-3 { gap: 0.4rem; }
}
@media (max-width: 360px) {
  header .logo-light, header .logo-dark { height: 1.5rem; }
}

/* --------------------------------------------------------------------------
   4 · Tabellen laufen waagerecht, statt Spalten abzuschneiden
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Die einzige Tabelle des Projekts liegt in .cmp-scroll und scrollt
     bereits. Diese Regel greift, falls weitere hinzukommen. */
  .cmp-scroll, .dp-tabelle-rahmen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* --------------------------------------------------------------------------
   5 · Bilder und Medien bleiben im Rahmen
   -------------------------------------------------------------------------- */
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }

/* --------------------------------------------------------------------------
   6 · Antippflächen
   Unter 44px ist ein Ziel mit dem Daumen schwer zu treffen.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  footer nav a,
  footer ul a,
  header nav a,
  .dp-menue-liste a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn-primary, .btn-ghost { min-height: 44px; }

  /* Die runden Knöpfe der Kopfleiste messen 34px. Ein unsichtbarer Rand
     vergrößert das Ziel, ohne das Aussehen zu verändern. */
  .dp-suche-knopf, .dp-menue-knopf, .theme-toggle {
    position: relative;
  }
  .dp-suche-knopf::after, .dp-menue-knopf::after, .theme-toggle::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
  }

  /* Kontrollkästchen war 13x13. flex-shrink ist nötig, weil die Regel
     `.flex > * { min-width: 0 }` weiter unten das Schrumpfen erlaubt und
     das Kästchen sonst auf 8px Breite gequetscht wird. */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; flex-shrink: 0;
  }
  /* Bedienelemente, die unter 44px lagen */
  .lang-switch button,
  .fbtn, .chip, .tlink, .tlink-page, .tlink-shop { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   7 · Seitenränder
   Unter 16px klebt der Text am Rand.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  /* Tailwind wird zur Laufzeit per CDN eingefügt und steht damit hinter
     dieser Datei. Gleich spezifische Regeln verlieren, deshalb eine Ebene
     spezifischer statt !important. */
  body .px-6 { padding-left: 1.125rem; padding-right: 1.125rem; }
}

/* --------------------------------------------------------------------------
   8 · Formulare
   Unter 16px Schriftgröße zoomt iOS beim Hineintippen in das Feld.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .form-input, .input, input[type="text"], input[type="email"],
  input[type="tel"], input[type="date"], select, textarea {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   9 · Text wird nicht abgeschnitten
   Gemessen wurden bis zu 128px abgeschnittener Text: die Kacheln tragen
   `overflow-hidden` nur für die Eckenrundung, ihre Rasterkinder haben aber
   `min-width: auto` und schrumpfen deshalb nicht unter ihre breiteste
   unteilbare Zeile. `min-width: 0` gibt den Umbruch frei.
   -------------------------------------------------------------------------- */
.grid > *, .flex > * { min-width: 0; }

/* Verbindungslinien zwischen Ablaufschritten reichen bis 150% ihrer Zelle.
   Im zweispaltigen Raster auf dem Handy ragen sie damit heraus. */
@media (max-width: 767px) {
  .step-line::after { display: none; }
}

/* Der Lichtschein wird über den Versatz positioniert, nicht über die Breite.
   Eine Breitenkappung allein hilft deshalb nicht. */
@media (max-width: 640px) {
  .orange-glow {
    width: 200px !important;
    height: 200px !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10 · Kleinste Schriftgrößen
   Ein Fußnotenblock mit rund 1400 Zeichen stand in 11px. Das ist Fließtext
   und gehört nicht unter 12px.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .text-\[11px\], .text-\[10px\], .text-\[9\.5px\], .text-\[9px\], .text-\[8\.5px\] {
    font-size: 12px;
  }
  .text-\[11\.5px\] { font-size: 12px; }
}


/* --------------------------------------------------------------------------
   11 · Platz für die schwebenden Knöpfe
   Assistent rechts, "nach oben" links: beide liegen über der letzten
   Fußzeile. Ohne Polster läuft der Text darunter durch.
   -------------------------------------------------------------------------- */
.fuss-zeile,
footer > div > div:last-child {
  padding-bottom: 12px;
}
@media (min-width: 561px) {
  footer > div > div:last-child { padding-inline: 64px 150px; }
}
@media (max-width: 560px) {
  footer > div > div:last-child { padding-bottom: 76px; }
}