/* ==========================================================================
   aarecom AG – Responsive v2 (Desktop-CSS in style.css)
   Breakpoints: 480 / 768 / 860 / 1024 / 1100
   ========================================================================== */

/* ---------- bis 1100px ---------- */
@media (max-width: 1100px) {
  .header-phone span { display: none; }
  .main-nav a { padding: 10px 10px; font-size: 14.5px; }
  .values-strip { grid-template-columns: repeat(4, 1fr); }
  .value-cell { min-height: 200px; }
  /* Schmale Desktop-Spalte: Kennzahl über Label, damit die 3er-Reihe sicher passt */
  .band-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-fact { display: block; }
  .band-fact strong { display: block; margin-bottom: 2px; }
  .band-fact span { max-width: none; }
}

/* ---------- bis 1024px: Tablet ---------- */
@media (max-width: 1024px) {
  .rev-card { flex-basis: calc((100% - var(--s-2)) / 2); }
  .section { padding: var(--s-12) 0; }

  /* Warum / Bildband / Team-Split: Tablet */
  .warum-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .team-neu { grid-template-columns: 1fr; gap: var(--s-6); }
  .team-neu-collage { min-height: 0; }

  /* Dienstleistungs-Unterseiten: Tablet */
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-card-feature { grid-column: span 2; }
  .ds-hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .ds-hero-media { aspect-ratio: 16 / 10; }
  .ds-intro-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .ds-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
  .ds-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-steps::before { display: none; }
  .ds-detail-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .ds-verwandt-grid { grid-template-columns: 1fr; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Swisscom-Stil mobil: kompakt, Inhalt beginnt oben – nicht in der Mitte schwebend */
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding: calc(var(--header-h) + 76px) 0 var(--s-8);
  }
  .hero-sub { max-width: 100%; }
  .sig-stage { display: none; }
  /* Mark als stilles Markenzeichen oben rechts im Hintergrund (nicht im Textfluss!) */
  .sig-stage-mark {
    display: block;
    position: absolute;
    z-index: 0;
    top: -44px;
    right: -36px;
    width: min(52vw, 240px);
    margin: 0;
    opacity: .16;
    pointer-events: none;
  }
  /* Lichtraum mobil stark zurücknehmen und hinters Mark legen */
  .hero-veil {
    background:
      radial-gradient(340px 300px at 86% 4%, rgba(124, 58, 237, .07), transparent 68%),
      radial-gradient(300px 260px at 64% 26%, rgba(14, 165, 233, .045), transparent 70%);
  }
  .hero-bg::after { opacity: .26; }
  .band-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .band-map { max-width: 620px; margin: 0 auto; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-feature { grid-column: span 2; }

  .tech-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .tech-media { max-width: 560px; }

  .process-grid { grid-template-columns: repeat(2, 1fr); }

  .team-collage { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- bis 860px: Mobile Navigation ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .btn-header { display: none; }
  /* Logo + Burger bleiben über dem Menü-Overlay (Nav ist Kind von header-inner!) */
  .header-logo, .header-actions { position: relative; z-index: 96; }

  /* Fullscreen-Menü: GPU-Kreis skaliert vom Burger aus (60fps statt clip-path-Repaints).
     Achtung: der Header (backdrop-filter) ist Containing Block für fixed –
     darum explizite Viewport-Höhe statt inset:0. */
  .main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100svh;
    z-index: 95;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s .55s;
  }
  /* Der expandierende Kreis (nur transform → Compositor) */
  .main-nav::before {
    content: '';
    position: absolute;
    top: 42px;
    right: 56px;
    width: 230vmax;
    height: 230vmax;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
    transform: translate(50%, -50%) scale(0);
    transition: transform .55s cubic-bezier(.45, 0, .2, 1);
    will-change: transform;
  }
  /* Farb-Schimmer blendet separat ein (billige Opacity) */
  .main-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 320px at 88% 0%, rgba(14, 165, 233, .08), transparent 70%),
      radial-gradient(380px 300px at 0% 100%, rgba(124, 58, 237, .07), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease .12s;
    pointer-events: none;
  }
  .main-nav.open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }
  .main-nav.open::before { transform: translate(50%, -50%) scale(1); }
  .main-nav.open::after { opacity: 1; }
  body.nav-open { overflow: hidden; }

  .main-nav ul {
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--header-h) + var(--s-4)) var(--s-3) var(--s-3);
  }
  .main-nav a {
    padding: 17px 4px;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.01em;
    border-bottom: 1px solid var(--hairline);
  }
  .main-nav a.active { color: var(--blue); }
  .main-nav a::after { display: none; }

  /* Einträge ziehen gestaffelt nach */
  .main-nav li {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .65, .3, 1);
  }
  .main-nav.open li { opacity: 1; transform: none; }
  .main-nav.open li:nth-child(1) { transition-delay: .14s; }
  .main-nav.open li:nth-child(2) { transition-delay: .2s; }
  .main-nav.open li:nth-child(3) { transition-delay: .26s; }
  .main-nav.open li:nth-child(4) { transition-delay: .32s; }
  .main-nav.open li:nth-child(5) { transition-delay: .38s; }
  .main-nav.open li:nth-child(6) { transition-delay: .46s; }
  .main-nav.open li:nth-child(7) { transition-delay: .52s; }

  .nav-cta-mobile, .nav-phone-mobile { display: block; }
  .nav-cta-mobile { margin-top: var(--s-4); }
  .nav-cta-mobile a.btn {
    border-bottom: none;
    text-align: center;
    font-size: 17px;
    color: #fff; /* Kontrast: weisser Text auf blauem Button */
    width: 100%;
  }
  .nav-phone-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-bottom: none;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 14px 4px;
  }
  .nav-phone-mobile i, .nav-phone-mobile svg { width: 18px; height: 18px; color: var(--blue); }

  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }
  .site-footer { padding-bottom: var(--s-8); }
}

/* ---------- bis 768px ---------- */
@media (max-width: 768px) {
  /* Kompaktere Rhythmen auf Mobile */
  .section { padding: var(--s-8) 0; }
  .final-cta { padding: var(--s-6) 0 var(--s-8); }
  .section-head { margin-bottom: var(--s-6); }

  /* Bildband: Karten kompakter, Maske schmaler auslaufend */
  .feld-card { width: 72vw; }
  .feldband-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  /* Team-Collage: horizontaler Swipe statt Stapel-Collage */
  .team-neu-collage {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--s-3);
  }
  .tnc, .tnc-1, .tnc-2, .tnc-3 {
    position: static;
    width: 78vw;
    flex: none;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    box-shadow: 0 12px 30px rgba(10, 20, 38, .12);
  }
  .team-neu-copy .btn { width: 100%; justify-content: center; }

  /* Dienstleistungs-Unterseiten: Mobile */
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card-feature { grid-column: auto; }
  .ds-steps { grid-template-columns: 1fr; gap: var(--s-4); }
  .ds-step { padding-top: 0; padding-left: 60px; }
  .ds-chips { grid-template-columns: 1fr; }
  .ds-vcard { grid-template-columns: 110px 1fr; }
  .ds-fakt strong { font-size: 21px; }
  .ds-hero-ctas .btn { flex: 1; justify-content: center; }

  .hero { padding-top: calc(var(--header-h) + 60px); padding-bottom: var(--s-6); }
  .hero h1 { font-size: clamp(38px, 11.2vw, 52px); margin: 14px 0 18px; }
  .hero-sub { font-size: 16.5px; margin-bottom: var(--s-4); }
  .sig-stage-mark { top: -34px; right: -30px; }


  /* Fakten: festes 3er-Raster, Zahl über Label – bricht nie unschön um */
  .band-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .band-fact { display: block; padding: 0 12px; }
  .band-fact:first-child { padding-left: 0; }
  .band-fact + .band-fact { padding-left: 14px; }
  .band-fact strong { display: block; font-size: 22px; margin-bottom: 2px; }
  .band-fact span { font-size: 12px; max-width: none; }

  /* Karte: Städtenamen gross genug für Mobile (mit weissem Halo) */
  .band-map .sm-label { font-size: 30px; stroke-width: 8px; letter-spacing: .04em; }
  .band-map .sm-node-hq .sm-label { font-size: 34px; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card-feature { grid-column: span 1; }

  .values-strip { grid-template-columns: repeat(2, 1fr); }
  .value-cell { min-height: 0; padding: var(--s-3); }
  .value-cell h3 { padding-top: var(--s-2); }

  /* Unterseiten-Grids: stapeln statt quetschen/überlaufen */
  .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .stat-cell { padding: var(--s-3); }
  .stat-cell strong { font-size: 30px; }

  .danke-steps { grid-template-columns: 1fr; max-width: 480px; }

  .service-detail { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }

  .person-grid { grid-template-columns: 1fr; }
  .person-card { display: block; }
  .person-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; min-height: 0; }
  .person-body { padding: var(--s-3); }

  .process-grid { grid-template-columns: 1fr; }

  /* Partner: Überschrift oben mittig, Logos volle Breite mit Auslauf */
  .partner-row { display: block; text-align: center; }
  .partner-label { display: block; margin: 0 0 var(--s-2); }
  .partner-mask {
    overflow: hidden;
    margin-inline: calc(50% - 50vw); /* randlos über die volle Viewport-Breite */
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .partner-track { animation: partnerMarquee 22s linear infinite; }
  .partner-set[aria-hidden="true"] { display: flex; }
  .partner-set img { filter: grayscale(1) opacity(.6); }

  /* Bewertungs-Kopf: Sterne+Wertung ÜBER dem Text (nicht nebeneinander) */
  .rev-agg { flex-direction: column; gap: 6px; }

  .rev-card { flex-basis: 86%; }

  /* Team: wischbare Galerie statt langem Stapel */
  .team-collage {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--s-2));
    padding: 0 var(--s-2) var(--s-1);
    scrollbar-width: none;
  }
  .team-collage::-webkit-scrollbar { display: none; }
  .team-tile { flex: 0 0 80%; scroll-snap-align: center; }

  .form-row { grid-template-columns: 1fr; }

  .tech-media-badge { right: 0; bottom: -28px; }

  .faq-item summary { font-size: 16px; gap: 14px; padding: 22px 4px; }
  .faq-item p { padding-left: 44px; }

  .final-cta-box { padding: var(--s-8) var(--s-3); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- bis 480px ---------- */
@media (max-width: 480px) {
  .container { padding: 0 var(--s-2); }
  .header-logo img { width: 142px; }

  /* Hero-CTAs nebeneinander statt gestapelt – Logo bleibt im ersten Viewport */
  /* Swisscom-Stil: CTAs gestapelt in voller Breite */
  .hero .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .hero-ctas .btn { width: 100%; justify-content: center; padding: 15px 18px; font-size: 16px; }
  /* CTA-Boxen: Buttons volle Breite */
  .final-cta-box .btn { width: 100%; }

  .partner-row img { height: 30px; }

  .process-grid { grid-template-columns: 1fr; }
  .values-strip { grid-template-columns: 1fr; }
  .value-cell { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; }
  .value-cell h3 { padding-top: 0; margin: 0; }
  .value-cell p { grid-column: 2; }

  .contact-form { padding: var(--s-3); }

  .consent-banner { inset: auto 8px 8px 8px; }
  .consent-actions { flex-direction: column; }
}

/* ---------- Megamenü: Mobile-Unterliste im Overlay ---------- */
@media (max-width: 860px) {
  .main-nav .nav-sub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin: 4px 0 10px;
    padding: 0;
    list-style: none;
    /* Reset der generischen .main-nav ul-Overlay-Regeln (height/overflow/max-width) */
    height: auto;
    overflow: visible;
    max-width: none;
    position: static;
  }
  .main-nav .nav-sub li { opacity: 1; transform: none; }
  .main-nav .nav-sub a {
    font-family: var(--font-body, inherit);
    font-size: 15px;
    font-weight: 550;
    padding: 8px 4px;
    color: var(--ink-soft);
    border-bottom: none;
  }
  .main-nav .nav-sub a:hover { color: var(--blue); }
}