/* H+N Responsive-Feinschliff. Patch auf den fertigen Build (kein Quellcode vorhanden).
   Eingebunden per tools/patch_responsive.py nach allen Build-Stylesheets.
   Doppelte Klassen (.x.x) heben die Spezifität auf die der Astro-Regeln (.x[data-astro-cid]),
   die spätere Position im Dokument entscheidet dann. */

/* Exposé: Inhaltsspalte bleibt in der Containerbreite, lange Werte brechen um */
.detail__main.detail__main { grid-template-columns: minmax(0, 1fr); }
.facts-table.facts-table > div { min-width: 0; }
.facts-table.facts-table dd { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* Startseite Team: vier Namen nebeneinander, auch bei 320 px ohne Überlappung */
@media (width <= 479px) {
  .crew__names.crew__names { font-size: .72rem; padding-inline: .5rem; }
  .crew__name.crew__name { flex: 1 1 0; margin-inline: 0; padding-inline: 2px; hyphens: auto; overflow-wrap: anywhere; }
}

/* Über uns Team-Karten: Name bricht um statt abgeschnitten zu werden */
@media (width <= 767px) {
  .acc__name.acc__name { white-space: normal; text-wrap: balance; }
}

/* Vergleichstabelle: unter 640 px als Karten statt seitlich scrollender Tabelle */
@media (width <= 639px) {
  .compare.compare { min-width: 0; }
  .compare.compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .compare.compare, .compare.compare tbody, .compare.compare tr { display: block; width: 100%; }
  .compare.compare tr { border-bottom: 1px solid var(--line); padding-block: 1rem; }
  .compare.compare th, .compare.compare td { display: block; width: auto; border: 0; padding: 0; }
  .compare.compare tbody th { margin-bottom: .5rem; }
  .compare.compare td { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: .75rem; padding-block: .2rem; }
  .compare.compare td::before { content: attr(data-label); color: var(--text-2); font-size: .9em; font-weight: 500; }
}

/* Hero bei geringer Fensterhöhe: Inhalt passt in die Bühne, nichts überlagert die Anrufleiste */
@media (width <= 767px) and (height <= 740px) {
  .hero.hero { min-height: 0; }
  .hero__content.hero__content { padding-top: calc(var(--header-h) + clamp(.25rem, 2svh, 1.5rem)); }
  .hero__title.hero__title { font-size: clamp(1.7rem, .5rem + 4.6svh, 2.3rem); }
  .hero__brand.hero__brand { margin-top: clamp(.35rem, 1.2svh, .8rem); font-size: .72rem; }
  .hero__sub.hero__sub { margin-top: clamp(.4rem, 1.4svh, 1rem); font-size: clamp(.95rem, .6rem + 1.1svh, 1.1rem); line-height: 1.35; }
  .hero__ctas.hero__ctas { margin-top: clamp(.6rem, 2svh, 1.4rem); gap: clamp(.4rem, 1.2svh, .85rem); }
  .hero__cta.hero__cta { padding: .7rem 1rem .7rem 1.2rem; font-size: .95rem; }
  .hero__checks.hero__checks { padding: .3rem .9rem; font-size: .8rem; }
  .hero__seek.hero__seek { margin-top: clamp(.4rem, 1.2svh, 1.1rem); padding: .3rem .9rem; font-size: .85rem; }
  .hero__credit.hero__credit { bottom: calc(4.6rem + env(safe-area-inset-bottom)); font-size: .625rem; }
}

/* Smartphone quer und flache Fenster: Bühne nicht höher als der Viewport, Aufrufe nebeneinander */
@media (height <= 560px) {
  .hero.hero { min-height: 0; }
  .hero__content.hero__content { padding-top: calc(var(--header-h) + .25rem); }
  .hero__title.hero__title { font-size: clamp(1.35rem, .4rem + 6svh, 3rem); }
  .hero__brand.hero__brand { margin-top: .3rem; font-size: .68rem; }
  .hero__sub.hero__sub { margin-top: .35rem; font-size: clamp(.85rem, .5rem + 1.6svh, 1.05rem); max-width: 56ch; }
  .hero__ctas.hero__ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; margin-top: .6rem; gap: .4rem .6rem; }
  .hero__cta.hero__cta { padding: .55rem .9rem .55rem 1.1rem; font-size: .9rem; }
  .hero__checks.hero__checks { padding: .25rem .8rem; font-size: .78rem; align-self: center; }
  .hero__seek.hero__seek { margin-top: .4rem; padding: .25rem .8rem; font-size: .8rem; }
}
@media (width <= 767px) and (height <= 560px) {
  .hero__credit.hero__credit { bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
}

/* Touch: Bedienelemente mindestens 44 px hoch */
@media (pointer: coarse) {
  .people__more.people__more summary { min-height: 44px; }
  .gallery__all.gallery__all { min-height: 44px; }
  .site-footer nav li a { min-height: 44px; }
  .hero__phone.hero__phone { min-height: 44px; }
  .team__phone.team__phone,
  .contact__phone.contact__phone,
  .faq-aside__phone.faq-aside__phone,
  .cta-row__phone.cta-row__phone { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .3em; min-height: 44px; }
}

/* Anrufleiste auf sehr flachen Smartphones erst nach dem ersten Scrollen (siehe responsive.js) */
.hn-bar-deferred .mobile-bar.mobile-bar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(140%); }
.hn-bar-deferred .hero__credit.hero__credit { bottom: calc(.75rem + env(safe-area-inset-bottom)); }

/* Formular: Felder und Meldungen beim Fokussieren nicht hinter der Anrufleiste
   (oben sorgt das scroll-padding-top des Builds für Abstand zum Header) */
@media (width <= 767px) {
  [data-summary], [data-send-error], .hn-form :is(input, select, textarea) { scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Mobiles Menü bei geringer Höhe kompakter (Smartphone quer, 200 % Zoom) */
@media (height <= 560px) {
  .mobile-menu__list.mobile-menu__list { margin-top: .5rem; }
  .mobile-menu__list.mobile-menu__list a[href] { font-size: clamp(1.4rem, 7svh, 2rem); padding-block: .4rem; }
  .mobile-menu__foot.mobile-menu__foot { padding-top: 1.25rem; }
}
@media (pointer: coarse) {
  .mobile-menu__phone.mobile-menu__phone { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Galerie im Querformat: Bild nutzt die verfügbare Höhe */
@media (height <= 560px) {
  .lightbox__bar.lightbox__bar { padding-block: .4rem; }
  .lightbox__figure.lightbox__figure { padding-bottom: .5rem; gap: .4rem; }
  .lightbox__stage.lightbox__stage img[src] { max-height: calc(100dvh - 6rem); }
}