/* =========================================================
   RESPONSIVE.CSS
   ---------------------------------------------------------
   Desktop ist primaer. Laptop, Tablet und Mobile bekommen
   dieselbe Reihenfolge, denselben Content und dieselbe
   Markenwirkung — nur mit ruhigerer Dramaturgie.
   ========================================================= */

/* =========================================================
   LAPTOP  (<= 1440px)
   ========================================================= */
@media (max-width:1440px){
  :root{
    --edge:clamp(24px,3.8vw,64px);
  }

  /* MITGEZOGEN (1.700.0): die Grundregel in experience.css endet jetzt vor
     der Geraetebuehne — diese Fassung hier gilt ab 1440 px abwaerts und
     haette den Text sonst weiter unter das Telefon laufen lassen (gemessen
     bei 1280x800: Spalte bis x 569, Geraet ab x 531). 35vw/470 px laesst
     bei 1280 rund 34 px Luft, bei 1440 rund 58. Wer eine der beiden
     Zahlen aendert, aendert beide. */
  .mob-copy{
    max-width:min(35vw,470px);
  }

  .provider-rail{
    gap:clamp(7px,.7vw,11px);
  }

  .net-copy{
    max-width:min(40vw,460px);
  }
}

/* =========================================================
   KLEINER LAPTOP  (<= 1366px)
   ========================================================= */
@media (max-width:1366px){
  .device-stage{
    width:clamp(190px,17vw,270px);
  }

  .net-screen{
    width:clamp(300px,53vw,740px);
  }

  .acc-object{
    width:clamp(190px,24vw,340px);
  }

  .net-speeds{
    width:clamp(215px,25vw,310px);
  }

  .rep-services{
    width:clamp(210px,23vw,300px);
  }
}

/* =========================================================
   TABLET  (<= 1100px)
   ---------------------------------------------------------
   Reduzierte Parallax (zusaetzlich in JS gedrosselt),
   Inhalte ruecken aus der Ueberlagerung heraus.
   ========================================================= */
@media (max-width:1100px){
  /* Ohne sichtbare Namen an der Leiste braucht der Zubehoer-Text
     keinen Freihalte-Streifen. */
  :root{ --rail-gutter:0px; }

  /* Zubehoer-Sortiment: drei Spalten — vier waeren hier zu schmal. */
  .zsh-raster{ grid-template-columns:repeat(3,minmax(0,1fr)) }

  :root{
    /* Abschlag wie am Grundwert (.64 -> .5 heisst hier .69 -> .54), damit
       der Weg auf dem Telefon nie LAENGER wird als am Schreibtisch. */
    --space-scale:.54;
  }

  .mob-copy{
    top:clamp(92px,15vh,150px);
    max-width:min(70vw,560px);
    transform:none;
  }

  .device-stage{
    top:auto;
    bottom:clamp(74px,12vh,150px);
    width:clamp(170px,26vw,250px);
    transform:translateX(-50%);
  }

  /* Provider bleiben seitlich: kompaktere Logo-Banner */
  .provider-rail{
    right:clamp(14px,2.5vw,30px);
    gap:9px;
  }
  .provider{
    width:clamp(150px,21vw,205px);
    height:clamp(48px,6.5vw,62px);
    border-radius:14px;
  }

  .net-copy{
    top:clamp(90px,13vh,140px);
    max-width:min(72vw,540px);
  }

  .net-screen{
    top:calc(50% + clamp(20px,5vh,60px));
    width:min(80vw,640px);
  }

  .net-speeds{
    right:auto;
    left:50%;
    top:auto;
    bottom:clamp(30px,6vh,70px);
    width:min(74vw,440px);
    transform:translateX(-50%);
  }

  .acc-object{
    left:50% !important;
    top:38%;
    width:min(46vw,300px);
  }
  .acc-copy{
    right:auto;
    left:50%;
    top:auto;
    bottom:clamp(60px,10vh,120px);
    max-width:88vw;
    text-align:center;
    transform:translateX(-50%)
              translate3d(0,calc((1 - var(--ri,0)) * 40px + var(--ro,0) * -40px),0);
  }
  .acc-note{
    margin-left:auto;
    margin-right:auto;
  }

  .rep-copy{
    top:clamp(90px,13vh,140px);
    max-width:min(72vw,520px);
  }
  .rep-device{
    top:auto;
    bottom:clamp(80px,13vh,160px);
    width:clamp(150px,24vw,230px);
    transform:translateX(-50%);
  }
  .rep-services{
    right:auto;
    left:50%;
    top:auto;
    bottom:clamp(26px,5vh,60px);
    width:min(74vw,420px);
    transform:translateX(-50%);
  }
  .rep-service{
    padding:7px 0;
  }

  .story-progress{
    right:clamp(8px,1.4vw,16px);
  }
  .progress-step span{
    display:none;
  }
}

/* =========================================================
   MOBILE  (<= 760px)
   ---------------------------------------------------------
   Vereinfachte Story-Version: gleiche Reihenfolge,
   gleicher Content, aber kuerzere Wege und keine
   erzwungenen schweren clip-path-Sequenzen.
   ========================================================= */
@media (max-width:760px){
  :root{
    /* Gleicher Abschlag wie am Grundwert (.56 -> .44). */
    --space-scale:.44;
    --edge:20px;
  }

  .scene-headline{
    font-size:clamp(29px,8.6vw,44px);
  }
  .scene-sub{
    max-width:none;
    font-size:14px;
  }
  .scene-statement{
    font-size:clamp(26px,9vw,44px);
    white-space:normal;
  }

  /* Statements laufen auf schmalen Screens zentriert und
     nacheinander durch (Fenster setzt experience.js) */
  .scene-statement.is-centered{
    left:50% !important;
    right:auto !important;
    top:30% !important;
    width:86vw;
    text-align:center;
    transform:translate3d(-50%,calc((1 - var(--ri,0)) * var(--d,34px) + var(--ro,0) * var(--d,34px) * -.7),0);
  }

  .scene-actions{
    gap:9px;
  }
  .scene-cta{
    height:46px;
    padding:0 18px;
    font-size:10.5px;
  }

  /* Mobilfunk */
  .mob-copy{
    top:clamp(84px,13vh,120px);
    max-width:none;
    right:var(--edge);
  }
  .mob-actions{
    bottom:clamp(20px,4vh,42px);
    right:var(--edge);
  }
  /* Die zentrierte Reparatur-Zeile darf auf schmalen Fenstern nicht
     zugleich left:50% UND right tragen — der Kasten wuerde gestreckt und
     vom translate zur Haelfte hinausgeschoben. Volle Breite, Inhalt
     mittig. */
  .rep-actions{
    left:var(--edge);
    right:var(--edge);
    transform:none;
  }
  .device-stage{
    bottom:clamp(96px,17vh,180px);
    left:38%;
    width:min(44vw,190px);
  }
  /* Auch auf Mobile: schmale Logo-Banner rechts */
  .provider-rail{
    right:8px;
    gap:6px;
  }

  /* Angebot des Monats: auf schmalen Geraeten keine Randspalte — die
     Karte steht oben unter der Kopfzeile, sonst laege sie auf dem
     Geraetemodell bzw. den Produkten. */
  .mob-angebot{
    right:auto;
    left:50%;
    top:clamp(80px,12vh,126px);
    width:min(88vw,340px);
    transform:translateX(-50%);
    padding:14px 16px;
    gap:7px;
  }
  .mob-angebot .mang-liste{
    grid-template-columns:1fr 1fr;
  }
  /* Warenkorb und Beratung stehen hier IMMER untereinander — auch an der
     quer liegenden Zubehoer-Karte: bei 340 px Kartenbreite blieben von
     zwei Knoepfen nebeneinander je rund 150 px, und beide Beschriftungen
     brechen dort um. */
  .mob-angebot.ist-unten .mang-akt{
    flex-direction:column;
    margin:0;
    width:100%;
  }
  .mang-akt .ang-korb{ width:100% }

  /* TV: der Fernseher steht auf schmalen Schirmen unter dem Text, mittig —
     neben einer 90-vw-Textspalte bliebe fuer ihn nichts uebrig. */
  .tv-stage{
    left:50%;
    top:auto;
    bottom:clamp(96px,17vh,190px);
    width:min(74vw,340px);
    transform:translateX(-50%);
  }

  /* TV: der Text steht auf schmalen Schirmen oben, die Karte darunter —
     nebeneinander waere beides zu schmal. */
  .tv-copy{
    left:50%;
    top:clamp(84px,13vh,140px);
    width:min(90vw,520px);
    max-width:none;
    transform:translateX(-50%);
    text-align:center;
  }

  /* Angebote: EINE Spalte, und die Liste rollt senkrecht. Auf dem Telefon
     passen keine fuenf Kacheln nebeneinander — die Aufteilung 5+5 ist eine
     Aussage ueber den grossen Schirm, nicht ueber jeden. */
  .ang-flaeche{
    left:16px; right:16px;
    top:clamp(78px,11vh,120px);
    bottom:clamp(80px,10vh,120px);
  }
  .ang-raster{
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
  }
  /* Auf dem Telefon gilt das feste Kachelformat NICHT: eine Spalte, die
     Hoehe folgt dem Inhalt, die Liste rollt. angGitterMessen() haelt
     hier still (siehe experience.js) — sonst schriebe es Bildpunkte in
     die Spuren und die Liste haette wieder fuenf Spalten. */
  .ang-gitter{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:minmax(300px,auto);
    max-height:none;
    width:100%;
  }
  .ang-karte{ overflow:visible }
  .ang2-raster{ grid-template-columns:1fr; max-width:none }
  .ang2-raster .ang-karte{ aspect-ratio:2/3 }
  /* Zubehoer-Sortiment: schmal eine Spalte — vier Karten nebeneinander
     waeren auf dem Telefon Briefmarken. */
  .zsh-raster{ grid-template-columns:1fr }
  .zsh-suche input{ flex-basis:100% }
  .wk-zeile{
    grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"bild txt" "menge weg";
    row-gap:8px;
  }
  .wk-bild{ grid-area:bild; width:56px; height:56px }
  .wk-txt{ grid-area:txt }
  .wk-menge{ grid-area:menge }
  .wk-weg{ grid-area:weg; justify-self:end }
  .provider{
    width:clamp(104px,30vw,136px);
    height:clamp(38px,10vw,46px);
    border-radius:11px;
  }

  /* Internet */
  .net-screen{
    width:min(90vw,460px);
    border-width:4px;
  }
  .net-marquee{
    font-size:clamp(38px,17vw,84px);
  }
  .net-speeds{
    bottom:clamp(20px,4vh,44px);
    width:min(90vw,420px);
  }
  .net-speed{
    padding:8px 0;
  }
  .net-home{
    width:min(46vw,160px);
  }

  /* Zubehoer */
  .acc-object{
    top:34%;
    width:min(58vw,230px);
  }
  .acc-name{
    font-size:clamp(28px,9.4vw,46px);
  }
  .acc-copy{
    bottom:clamp(44px,9vh,90px);
    max-width:92vw;
  }
  .acc-categories{
    width:92vw;
    gap:7px;
  }
  .acc-chip{
    padding:8px 13px;
    font-size:11.5px;
  }

  /* Reparatur */
  .rep-device{
    bottom:clamp(100px,18vh,180px);
    width:min(42vw,175px);
  }
  .rep-word{
    font-size:clamp(46px,20vw,110px);
  }
  .rep-services{
    bottom:clamp(18px,4vh,44px);
    width:92vw;
  }
  .rep-service{
    padding:6px 0;
    gap:10px;
  }
  .rep-service span{
    font-size:12.5px;
  }

  /* Termin */
  .fin-word{
    font-size:clamp(34px,11.5vw,62px);
  }
  .fin-locations{
    gap:8px;
  }
  .fin-location{
    padding:10px 14px;
  }

  /* Fortschritt bleibt, wird aber sehr klein */
  .story-progress{
    right:7px;
    gap:8px;
  }
  .progress-step i{
    width:12px;
  }

  .scroll-cue{
    font-size:8px;
    letter-spacing:.2em;
  }
  .scroll-cue i{
    height:22px;
  }

  /* Footer */
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   SEHR NIEDRIGE FENSTER (z. B. 1366x768 im Browserfenster)
   ========================================================= */
@media (max-height:760px) and (min-width:1101px){
  /* Auch hier vor dem Geraet (1.700.0, dieselbe Rechnung wie oben). */
  .mob-copy{
    max-width:min(34vw,430px);
  }
  /* NIEDRIGE FENSTER SIND DER ENGPASS DER TERMIN-SZENE (1.700.0). GEMESSEN
     bei 1366x740: Titel, Unterzeile, zwei Knoepfe und drei Filialkarten
     brauchen mehr als die Buehne hoch ist. `safe center` (experience.css)
     haelt den Titel jetzt unter der Kopfleiste; diese Zahl nimmt ihm
     zusaetzlich rund 45 px Hoehe, damit unten weniger ueberlaeuft. */
  [data-scene-content="appointment"] .fin-word{
    font-size:clamp(26px,3.4vw,58px);
  }
  .device-stage{
    width:clamp(160px,13vw,215px);
  }
  .net-screen{
    width:clamp(280px,44vw,620px);
  }
  .acc-object{
    width:clamp(170px,19vw,260px);
  }
  .rep-device{
    width:clamp(150px,13vw,210px);
  }
  .mob-actions{
    bottom:clamp(56px,8vh,96px);
  }
  /* Die zentrierte Reparatur-Zeile braucht auch auf flachen Fenstern Luft
     zum schwebenden Scroll-Hinweis — diese Media-Regel steht NACH
     experience.css und schlaegt bei gleicher Spezifitaet die dortige
     Rechnung (Falle 1.562.0). `.net-actions` steht seit 19.08. wieder in
     der LINKEN Ecke (die Mitte gehoert dem zentrierten Angebote-Knopf)
     und faehrt hier mit der .mob-actions-Regel darueber. */
  .rep-actions{
    bottom:clamp(108px,16vh,150px);
  }
  .scene-headline{
    font-size:clamp(32px,4.4vw,68px);
  }
  .fin-word{
    font-size:clamp(36px,6vw,104px);
  }
}

/* =========================================================
   TOUCH: keine Hover-Zustaende erzwingen
   ========================================================= */
@media (hover:none){
  .scene-cta:hover{
    transform:none;
  }
  .provider:hover,
  .acc-chip:hover{
    box-shadow:none;
  }
}