/* ==========================================================================
   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: 36px; height: 36px; }
}

/* --- 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__lead { font-size: 1.02rem; max-width: 40ch; }
  .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: 34px; height: 34px; }
  .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; }
}