/* ==========================================================================
   responsive.css — Mobile-/Tablet-Anpassungen (ADDITIV & leicht umkehrbar)
   --------------------------------------------------------------------------
   Wird NACH main.css geladen und überschreibt nur, wo nötig. Der Desktop-
   Look aus main.css bleibt unverändert.

   RÜCKGÄNGIG MACHEN: in site/snippets/header.php die eine <link>-Zeile zu
   dieser Datei entfernen (oder auskommentieren). Fertig — nichts anderes ändern.
   ========================================================================== */

/* ==========================================================================
   Tablet & kleiner: ≤ 1000px
   ========================================================================== */
@media (max-width: 1000px) {
  /* Lauftext von 20px auf 18px */
  :root { --fs-body: 1.125rem; }

  /* Grosse Fix-Schriftgrössen (90px) flüssig herunterskalieren */
  .eyebrow                        { font-size: clamp(1.5rem, 6vw, 3rem); }
  .section__title, .hero__title         { font-size: clamp(2rem, 7vw, 3.75rem); }
  .section__subtitle, .hero__subtitle   { font-size: clamp(1.5rem, 5.5vw, 2.75rem); }

  /* Grosse Karten-Einrückungen reduzieren */
  .expertise .cards { padding-left: 10%; }
  .team .cards      { padding-left: 0; }

  /* Kontakt-Button nicht überbreit (120px-Innenabstand) */
  .contact-form .btn {
    align-self: stretch;
    justify-content: center;
    padding: 1rem 2rem;
  }

  /* Kontakt & Immobilien: Spalten untereinander statt nebeneinander */
  .contact__grid { grid-template-columns: 1fr; }
  .immo__grid    { grid-template-columns: 1fr; }

  /* Immobilien mobil: Reihenfolge Text → Bild → Button (Desktop unverändert).
     .immo__text auflösen, damit Body, Bild (Sibling) und Button im selben Grid
     liegen und per order sortiert werden können. */
  .immo__text      { display: contents; }
  .immo__body      { order: 1; }
  .immo__media     { order: 2; }
  .immo__text .btn { order: 3; }
}

/* ==========================================================================
   Grosses Handy / kleines Tablet: ≤ 700px
   ========================================================================== */
@media (max-width: 700px) {
  /* Adresse + Kontaktdaten untereinander statt nebeneinander */
  .contact__address {
    flex-direction: column;
    gap: 1rem;
  }

  /* Karten-Einrückung ganz weg, mehr Abstand zwischen den Dienstleistungs-Blöcken */
  .expertise .cards { padding-left: 0; gap: 3rem; }
}

/* ==========================================================================
   Offenes Nav-Panel: ab Tablet Vollbild-Overlay mit vertikalen Links
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-panel {
    top: 0;
    inset-inline: 0;
    height: 100svh;             /* volle Viewport-Höhe */
    border-radius: 0;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .nav-panel__nav {
    flex-direction: column;     /* Links untereinander */
    align-items: center;        /* horizontal zentriert */
    justify-content: center;    /* vertikal mittig im restlichen Raum */
    flex: 1;
    gap: .5rem;
    margin-top: 0;
  }
}

/* ==========================================================================
   Handy: ≤ 600px
   ========================================================================== */
@media (max-width: 600px) {
  .eyebrow                       { font-size: clamp(1.35rem, 8vw, 2rem); }
  .section__title, .hero__title       { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .section__subtitle, .hero__subtitle { font-size: clamp(1.2rem, 6.5vw, 1.6rem); }
  #expertise p.eyebrow { font-size: 1.25rem; }

  /* Sektionsabstände kompakter */
  .section { padding-block: clamp(3rem, 12vw, 5rem); }

  /* Buttons/Formular komfortabler antippbar */
  .contact-form .btn { padding: 1rem 1.5rem; }

  /* Expertise-Begriffe: dürfen umbrechen — aber NUR an der im Panel gesetzten Stelle
     («|» → weicher Trennstrich). hyphens: manual = Browser trennt nicht selber, darum
     bricht es auf jedem Gerät an derselben Stelle. Kein break-word, damit es keine
     automatischen Umbrüche an anderen Stellen gibt (bei neuen langen Wörtern im Panel
     ein «|» setzen). */
  .expertise__word {
    font-size: clamp(1.75rem, 9vw, 3rem);
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    hyphens: manual;
    line-height: 1.05;
  }
}

/* ==========================================================================
   Sehr kleine Geräte: ≤ 400px
   ========================================================================== */
@media (max-width: 400px) {
  /* Offenes Nav-Menü: enger, damit alle Punkte gut passen */
  .nav-panel__nav     { gap: .4rem 1rem; }
  .nav-panel__nav a   { font-size: 1.5rem; }

  /* Footer-Logo nicht zu gross */
  .footer-logo { height: 2.25rem; }
}

/* ==========================================================================
   Über mich: auf Mobile statisch — Bild ÜBER dem Text, Verhältnis 16/9,
   kein Vollbild-Zoom (Bild wird nicht grösser). ≤ 800px
   ========================================================================== */
@media (max-width: 800px) {
  .about.is-scrollanim .about__track  { height: auto; }
  .about.is-scrollanim .about__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .about.is-scrollanim .about__grid {
    padding-block: clamp(3.5rem, 9vw, 8rem);
  }

  /* Bild als feste 16/9-Box oben, nicht zoomend */
  .about.is-scrollanim .about__media-holder {
    aspect-ratio: 16 / 9 !important;
  }
  .about.is-scrollanim .about__media {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: auto;
  }
  .about.is-scrollanim .about__media img {
    height: 100%;
    object-fit: cover;
  }

  /* Text ohne Reveal voll sichtbar */
  .about.is-scrollanim .reveal-word { opacity: 1; }
}

/* ==========================================================================
   Hero: auf Mobile kein Bild-Zuschnitt/Schwenk, kein einfliegender Name —
   beim Scrollen nur die beiden Texte ein-/ausblenden. ≤ 700px
   ========================================================================== */
@media (max-width: 700px) {
  .hero { height: 140svh; }             /* Scroll-Weg für den Text-Wechsel */
  .hero__content { max-width: 100%; }   /* auf Mobile volle Breite statt 75% */
  .hero__media { clip-path: none; }     /* Bild bleibt vollflächig, kein Zuschnitt */
  .hero__media img { transform: none; } /* kein Schwenk */

  /* Titel/Untertitel ganz unten am Viewport — fixer Abstand ~25px.
     WICHTIG: Der Scroll-Hinweis bricht auf Mobile auf eine 2. Flex-Zeile um;
     ohne align-content verteilt der Flex-Container die Zeilen über die volle Höhe
     (grosse Lücken). align-content: flex-end packt beide Zeilen unten zusammen. */
  .hero__inner {
    align-content: flex-end;
    padding-block-end: 40px;
    gap: .6rem 2rem;
  }
  /* Scroll-Hinweis: kürzere vertikale Linie → weniger „Luft" unter den Texten */
  .hero__scroll::after { height: 1.25rem; }

  /* Name fliegt nicht ein, sondern blendet an fester Position ein
     (Titel blendet aus → Name blendet ein). Kein Blend-Mode für gute Lesbarkeit.
     Unten-bündig mit 40px Abstand zum Viewport-Rand — gleich wie Titel/Untertitel. */
  .hero__name-wrap {
    place-items: end center;
    padding-block-end: 40px;
  }
  .hero__name {
    transform: none;
    mix-blend-mode: normal;
    font-size: clamp(2.5rem, 14vw, 4rem);
    white-space: normal;
    line-height: 1;
  }
}