/* ==========================================================================
   Responsive – von 320 px bis 1920 px
   ========================================================================== */

/* --- sehr große Bildschirme --------------------------------------------- */
@media (min-width: 1600px) {
  .hero { min-height: min(92svh, 980px); }
}

/* --- Kopfzeile verdichten, bevor die Navigation umbricht ------------------ */
@media (max-width: 1440px) {
  .site-header .container { padding-inline: clamp(1.25rem, 2.4vw, 2.5rem); }
  .nav { gap: 1.05rem; }
  .nav__link { font-size: 0.85rem; }
  /* Sieben Menüpunkte plus Telefonnummer passen hier nicht mehr nebeneinander;
     angerufen wird über die Schaltfläche in der Fußzeile bzw. mobil unten. */
  .header-actions .btn--phone { display: none; }
}

@media (max-width: 1240px) {
  .site-header .container { padding-inline: 1.25rem; }
  .nav { gap: 0.95rem; }
  .nav__link { font-size: 0.83rem; }
  .logo__tag { display: none; }
  .logo__word { font-size: 0.76rem; letter-spacing: 0.13em; }
}

/* --- < 1180 px ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .site-footer__grid .footer-col--hours { grid-column: 2 / -1; }
  .service-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trustbar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trustbar__item:nth-child(3) { border-right: 0; }
  .trustbar__item:nth-child(n + 4) { border-top: 1px solid var(--color-border); }
}

/* --- Tablet / Navigationsumbruch ----------------------------------------
   Ab hier übernimmt das Menü-Symbol: Sieben Menüpunkte plus Schaltfläche
   brauchen mindestens rund 1100 px.                                        */
@media (max-width: 1099px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--phone { display: inline-flex; }

  .hero { min-height: 78svh; }
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__meta { align-items: flex-start; text-align: left; margin-top: 1.75rem; }
  .hero__caption { max-width: none; }

  .grid--split, .grid--sidebar { grid-template-columns: 1fr; }
  .page-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
  .section-head__aside { padding-bottom: 0; }

  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-card { --card-span: 2; }
  .service-card--wide { --card-span: 2; }
  .service-card--full { --card-span: 4; }

  .project-card, .project-card--tall { grid-column: span 6; }
  .project-card--wide, .project-card--half { grid-column: span 6; }

  .process__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .process__track { display: none; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__inner { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- unter 900 px -------------------------------------------------------- */
@media (max-width: 900px) {
  .logo__tag { display: none; }          /* Zeile würde die Kopfzeile sprengen */
  .logo__word { font-size: 0.78rem; letter-spacing: 0.13em; }
  .logo__mark { width: 72px; height: 46px; }
}

/* --- Farbwähler und Umkreisgrafik ---------------------------------------- */
@media (max-width: 900px) {
  .colorlab { grid-template-columns: 1fr; }
  .roomview {
    position: sticky;
    top: calc(var(--header-height) + 0.5rem);
    z-index: 5;
  }
  .roomview__stage { aspect-ratio: 16 / 10; }
  .palette__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media (max-width: 760px) {
  /* Ortsnamen erscheinen erst beim Antippen – sonst wird die Karte unruhig */
  .areamap { padding-inline: 0; }
  .areamap__label, .areamap__km { opacity: 0; font-size: 24px; }
  .areamap__km { font-size: 20px; }
  .areamap__place.is-active .areamap__label,
  .areamap__place.is-active .areamap__km { opacity: 1; }
  .areamap__leader { display: none; }
  .areamap__place { cursor: pointer; }
  .areamap__ringlabel { font-size: 26px; }
  .areamap__homelabel { font-size: 30px; }
  .areamap__dot { r: 11; }
  .areamap__place--major .areamap__dot { r: 15; }
  .areamap__home { r: 14; }
  .areamap__pulse { stroke-width: 3; }
  .areamap__link { stroke-width: 2; }
}

/* --- unter 860 px -------------------------------------------------------- */
@media (max-width: 860px) {
  body { padding-bottom: 62px; }           /* Platz für die Aktionsleiste   */
  .mobile-actions { display: block; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid .footer-col--brand { grid-column: 1 / -1; }
  .site-footer__grid .footer-col--hours { grid-column: 1 / -1; }
  .site-footer__wordmark { font-size: clamp(4.5rem, 26vw, 9rem); }

  .service-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row { grid-template-columns: 1fr; }
  .service-card--full { flex-direction: column; }
  .service-card--full .service-card__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* --- Smartphone ---------------------------------------------------------- */
@media (max-width: 640px) {
  .section { padding-block: var(--space-xl); }
  .header-actions .btn--phone { display: none; }   /* Anruf über die Aktionsleiste */
  .logo__word { font-size: 0.8rem; }

  .trustbar__list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trustbar__list::-webkit-scrollbar { display: none; }
  .trustbar__item {
    flex: 0 0 76%;
    scroll-snap-align: start;
    border-top: 0 !important;
    padding-block: 1.1rem;
  }

  .hero { min-height: 86svh; align-items: flex-end; }
  .hero__scroll { display: none; }
  /* auf dem Smartphone nur eine vertikale Abdunklung – sonst wirkt das Bild tot */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(10, 10, 13, 0.74) 0%, rgba(10, 10, 13, 0.24) 28%,
                                rgba(10, 10, 13, 0.5) 58%, rgba(10, 10, 13, 0.88) 100%);
  }
  .hero__glow { opacity: 0.6; }
  .hero__facts { gap: 0.45rem 1.4rem; }
  .hero__dot { width: 40px; }

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card, .service-card--wide { --card-span: 1; }
  .service-card--full { --card-span: 2; }
  .service-card__body { padding: 1rem; }
  .service-card__title { font-size: 1rem; }
  .service-card__text { font-size: 0.86rem; }

  .project-card, .project-card--tall, .project-card--wide, .project-card--half {
    grid-column: span 12;
  }
  .project-card__overlay { opacity: 1; }

  .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .swatch-stack { flex-wrap: wrap; justify-content: flex-start; gap: 0.6rem; }
  .swatch { width: calc(50% - 0.4rem); transform: none; aspect-ratio: 3 / 4.2; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.25rem; transform: none; }
  .cta-band__mark { display: none; }
  .ba__frame { aspect-ratio: 3 / 4; }
}

/* --- sehr kleine Geräte (320 px) ----------------------------------------- */
@media (max-width: 420px) {
  .logo__text { max-width: 9.5rem; }
  .logo__word { font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.3; }
  .logo__mark { width: 64px; height: 41px; }
  .service-nav a { font-size: 0.82rem; }
}

/* Karten unter 480 px auf volle Breite – sonst werden Bild und Text zu klein */
@media (max-width: 480px) {
  .service-card, .service-card--wide { --card-span: 2; }
}

@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card--wide, .service-card--full { --card-span: 1; }
  .swatch { width: calc(50% - 0.3rem); aspect-ratio: 3 / 4; }
  .btn { padding-inline: 1.15rem; font-size: 0.9rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .logo__tag { display: none; }
  .hero__facts { gap: 0.5rem 1.2rem; }
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .site-header, .mobile-actions, .mobile-nav, .cta-band, .hero__sweep { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .on-dark, .hero, .page-hero, .site-footer { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* --------------------------------------------------------------------------
   Ablauf als 3D-Treppe (Startseite)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ablauf__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ablauf__scene { height: clamp(260px, 64vw, 380px); }
  .ablauf__stage { --s: 0.8; --ty: 22%; }
  .ablauf__schritt { padding: 0.75rem 0.8rem; }
}
@media (max-width: 480px) {
  /* Handy: Treppe kleiner und tiefer, damit oben genug Platz für das Schild
     über „Abnahme“ bleibt – auch wenn das Handy die 3D-Ansicht etwas anders
     berechnet. Die Szene begrenzt sich selbst, damit nichts seitlich übersteht. */
  .ablauf__scene { height: 300px; overflow: hidden; }
  .ablauf__stage { --s: 0.52; --ty: 43%; --tx: -10px; }
  /* Schild wächst gegen die Verkleinerung an: bleibt ca. 13 px groß */
  .ablauf__chip { font-size: calc(0.8rem / var(--s)); padding: calc(0.45rem / var(--s)) calc(0.8rem / var(--s)); }
}
@media (max-width: 370px) {
  .ablauf__scene { height: 260px; }
  .ablauf__stage { --s: 0.44; --ty: 38%; --tx: -26px; }
}

/* Über uns: Porträt-Platzhalter auf dem Handy flacher, damit die Überschrift früh kommt */
@media (max-width: 900px) {
  .portrait__placeholder { aspect-ratio: 16 / 10; padding: 1.25rem; gap: 0.6rem; }
  .portrait__placeholder svg { width: min(34%, 150px); }
}

/* --------------------------------------------------------------------------
   Leistungen (Bühne)
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .lsec__nav span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lsec__nav ol { gap: 0.4rem; }
}
@media (max-width: 900px) {
  .lsec__inner { grid-template-columns: minmax(0, 1fr); }
  .lsec__media { order: -1; }
  .lsec__frame { --fh: clamp(150px, 32svh, 320px); }
  .lsec__card { justify-self: center; align-self: end; }

  .lsec.is-live .lsec__inner {
    align-content: start;
    align-items: start;
    gap: 1.25rem;
    padding-top: calc(var(--header-height) + 0.75rem);
    padding-bottom: 7rem;             /* Platz für Leiste und Aktionsleiste */
  }
  .lsec.is-live .lsec__nav { padding-bottom: 0.9rem; }
  .lsec__title { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.4rem); margin-bottom: 0.7rem; max-width: none; }
  .lsec__text { font-size: 1rem; margin-bottom: 1rem; }
  .lsec__tags { margin-bottom: 1rem; }
  .lsec__tags li { font-size: 0.74rem; padding: 0.3rem 0.65rem; }
  .lsec__bgimg { filter: blur(22px) saturate(1.1) brightness(0.7); }
}
/* über der Aktionsleiste (Anrufen / WhatsApp / Anfragen) */
@media (max-width: 860px) {
  .lsec.is-live .lsec__nav { bottom: 64px; }
}
/* flache Handys: Stichworte ausblenden, Bild kleiner */
@media (max-width: 900px) and (max-height: 720px) {
  .lsec.is-live .lsec__tags { display: none; }
  .lsec__frame { --fh: clamp(130px, 26svh, 220px); }
  .lsec.is-live .lsec__meta { margin-bottom: 0.6rem; }
}

/* --------------------------------------------------------------------------
   Touch: ausreichend große Tippflächen (mind. ca. 40 px Höhe)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .footer-col li { margin-bottom: 0.1rem; }
  .footer-col a { display: inline-block; padding-block: 0.6rem; }
  .site-footer__bar nav a { display: inline-block; padding-block: 0.65rem; }
  .lsec__link { padding-block: 0.45rem; }
}
@media (max-width: 1099px) {
  /* Leiste der Leistungen: nur Balken sichtbar, aber große Tippfläche */
  .lsec__nav button { min-height: 44px; justify-content: flex-start; padding-top: 1.1rem; }
}

/* Leistungen: Übersicht wird auf schmalen Bildschirmen zur Wischleiste */
@media (max-width: 1099px) {
  .lsec__jump-label { font-size: 0.82rem; }
}
@media (max-width: 900px) {
  .lsec__index {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 40%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: 0.25rem;
  }
  .lsec__index::-webkit-scrollbar { display: none; }
  .lsec__index li { scroll-snap-align: start; }
}

/* Meisterbetrieb (Startseite) */
@media (max-width: 900px) {
  .meister__top { grid-template-columns: minmax(0, 1fr); }
  .siegel { width: min(64%, 250px); justify-self: start; }
  .grundsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grundsaetze { grid-template-columns: minmax(0, 1fr); }
  .faq__icon { width: 36px; height: 36px; }
}