/* ============================================================================
   PSC — Responsive-Basis (Struktur wie thtxx-sczeilitzheim: Breakpoints
   1024 / 768 / 480 px). Die meiste Fluid-Skalierung übernehmen bereits
   clamp() in tokens.css/components.css/style.css — hier stehen nur die
   Stellen, die echte Sprünge statt fließender Skalierung brauchen.
   ========================================================================= */

@media (max-width: 1024px) {
  .header__inner { height: 72px; }
}

@media (max-width: 768px) {
  .logo__img { width: 40px; }
  .hero--brand::before { opacity: .05; width: 90vw; height: 90vw; }
  .modal { padding: 28px 20px; }

  /* Horizontale Hauptnav aus, Burger + Vollbild-Overlay an. .site-Präfix
     nötig, sonst verliert diese Regel gegen die höher-spezifische
     .site .mainnav/.site .nav-toggle-Basisregel in components.css,
     unabhängig von der Ladereihenfolge (siehe .claude/wissen/themen/
     design-system.md, Abschnitt CSS-Spezifitäts-Falle). */
  .site .mainnav { display: none; }
  .site .nav-toggle { display: flex; }

  /* Ohne Hauptnav-Zeile ist der Header hier nur noch 84px hoch (Logo-Zeile) —
     .page-hero braucht entsprechend weniger Abstand als auf Desktop/Tablet
     (196px, siehe components.css). */
  .page-hero { padding-top: 148px; }
}

@media (max-width: 480px) {
  .hero__content { padding: 0 20px; }
  .scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* Kontaktseite: Überschrift unter dem fixierten Kopfbereich sichtbar halten,
   Formular dicht an die Unterzeile heranrücken */
.site .section.page-hero--kontakt { padding-top: 196px; padding-bottom: 0; }
.site #kontakt.section { padding-top: clamp(28px, 3.5vw, 48px); }
@media (max-width: 767px) {
  .site .section.page-hero--kontakt { padding-top: 132px; }
  .site #kontakt.section { padding-top: 28px; }
}