/* Korrekturen gegenüber der Design-Vorschau (nur Mobil/Tablet; Desktop bleibt unverändert). */

/* 1. Startseite (<= 900 px): Das Foto steht vollständig oben, der Text darunter auf der Teal-Fläche
      (keine Überlagerung, keine harte Hälfte). Desktop bleibt wie im Design. */
@media (max-width: 900px) {
  [data-hero] { display: block !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-hero] > img { position: static !important; display: block; width: 100% !important; height: auto !important; aspect-ratio: 631 / 400; object-fit: cover; }
  [data-hero] > div[aria-hidden="true"] { display: none !important; }
  [data-hero] [data-container] { padding-top: 40px !important; padding-bottom: 56px !important; }
}

/* 2. Mobiles Menü: zwischen "Kontakt" und "Impressum" standen zwei Trennlinien direkt untereinander – nur eine bleibt. */
#mobilmenue li[style*="border-top"] { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }

/* 3. Englische Kopfzeile war auf Smartphones breiter als der Bildschirm (Menü-Knopf abgeschnitten). */
@media (max-width: 480px) {
  [data-header] [data-container] { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  [data-header] [data-wordmark] { font-size: 16px !important; letter-spacing: .03em !important; }
  [data-header] a[aria-label] { gap: 10px !important; }
  [data-header] nav { gap: 10px !important; }
}

/* Sehr schmale Smartphones (≤ 380 px, z. B. iPhone SE / kleine Android-Geräte): Kopfzeile in beiden Sprachen enger setzen. */
@media (max-width: 380px) {
  [data-header] [data-container] { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
  [data-header] [data-container] > a img { width: 34px !important; height: 34px !important; }
  [data-header] [data-container] > a { gap: 8px !important; }
  [data-header] [data-wordmark] { font-size: 14px !important; letter-spacing: .02em !important; }
  [data-header] nav { gap: 6px !important; }
  [data-header] [data-langswitch] { gap: 2px !important; padding: 2px !important; }
  [data-header] [data-langswitch] > * { padding-left: 6px !important; padding-right: 6px !important; }
  [data-header] [data-burger] { width: 40px !important; height: 40px !important; }
}
@media (max-width: 345px) {
  [data-header] [data-wordmark] { font-size: 13px !important; letter-spacing: 0 !important; }
  [data-header] [data-langswitch] > * { padding-left: 4px !important; padding-right: 4px !important; }
}

/* 4. very small phones: long words must not widen the page */
@media (max-width: 380px) {
  main h1 { font-size: 34px !important; overflow-wrap: anywhere; }
  main h2 { overflow-wrap: anywhere; }
}
@media (max-width: 345px) {
  [data-header] [data-container] > a { min-width: 0 !important; }
  [data-header] [data-wordmark] { font-size: 12px !important; }
  [data-header] [data-container] { gap: 6px !important; }
  [data-header] [data-burger] { width: 36px !important; height: 36px !important; }
}
@media (max-width: 380px) {
  main div[style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  main div[style*="display: grid"] > * { min-width: 0 !important; }
}
[data-main-col], [data-main-col] form > div { min-width: 0 !important; }

/* 5. home hero: same height in German and English (image no longer cropped shorter in EN) */
[data-hero] { min-height: 688px; }

/* 6. CTA bands ("Lieber direkt sprechen?" etc.): wrap button below the text at the same width in DE and EN
   (otherwise the shorter English button fits beside the text where the German one does not) */
@media (max-width: 1060px) {
  [data-container]:has(> [data-btnrow]) { flex-direction: column !important; align-items: flex-start !important; }
}