/* GMS Auto Detailing — desktop.css (Besitzer kleim-desktop), ab 1200px.
   stil.css setzt Schrift in px: html{font-size} bewegt dort nichts, deshalb
   werden die tragenden Groessen hier in rem neu gesetzt (1rem = 17,5px bei
   1440, 20px bei 1920). Satzspiegel prozentual statt 1200px-Insel. */

@media (min-width:1200px){
  html{font-size:clamp(16px,calc(.55vw + 9.6px),22px)}
  :root{--wrapw:92vw;--sp:4vw;--abst:clamp(80px,6.5vw,150px)}
  body{font-size:1.0625rem}
  h1{font-size:calc(2.2vw + 45px)}
  h2{font-size:calc(1.4vw + 30px)}
  h3{font-size:calc(.6vw + 13.5px)}
  .kicker{font-size:.9rem}

  /* Kopfleiste: feste Bauhoehe, nichts bricht zwischen 1200 und 1439 um */
  .kopf-in{height:72px;min-height:0;gap:clamp(48px,3.4vw,80px)}
  .nav{flex-wrap:nowrap;gap:clamp(16px,1.7vw,36px)}
  .nav a{font-size:.95rem;white-space:nowrap}
  .knopf{font-size:.95rem}
  .kopf .knopf{min-height:46px;padding:10px 18px}
  .marke-zeile{font-size:.78rem}

  /* Held: Textspalte nicht auf 1000px zentriert, sondern am Satzspiegel */
  .held-in{max-width:none}
  .held h1{font-size:calc(3vw + 40px);max-width:13em}
  .held-satz{font-size:clamp(1.28rem,1.45vw,1.8rem);max-width:38ch}
  .held-knoepfe .knopf{font-size:1.05rem;min-height:56px;padding:14px 28px}
  .held-anker{font-size:1rem}
  .held-anker b{font-size:1.25rem}
  /* '4,9' in Kopfschrift macht die erste Zeile hoeher: ohne Grundlinie standen 'Ersatzwagen' und 'Raten' 3px hoeher */
  .held-anker{align-items:baseline}
  /* Breite, flache Fenster (2560x900: Held 918px, 5120x900: Knoepfe bei 949px unter der Falte):
     H1 zusaetzlich an die Fensterhoehe, Kopfpolster an svh. Greift erst, wenn 13svh < 3vw+40px,
     also nie auf 1440-2560 bei 900 Hoehe und nie auf 2560x1440 */
  .held h1{font-size:min(calc(3vw + 40px),13svh)}
  .held-in{padding-top:min(96px,7svh)}

  /* Knoepfe: Hoehe und Polster in rem/em, damit sie auf 4K mitwachsen; Inhalt mittig */
  .knopf{min-height:2.75rem;padding:.62em 1.25em;justify-content:center;box-sizing:border-box}
  .knopf svg{width:1.1em;height:1.1em;flex:none}
  .knopf .pfeil{width:.95em;height:.95em}
  .held-knoepfe,.besuch-knoepfe{align-items:stretch}
  /* Videosteuerung: Pause unten links,
     Abstand zur Rahmenkante und Groesse wachsen mit der Schrift statt fester 40px/14px auf 4K */
  .film-pause{box-sizing:border-box;height:2.6rem;padding:0 .95em 0 .85em;font-size:.82rem;gap:.6em;bottom:clamp(14px,1.1vw,28px)}
  .film-pause{left:clamp(14px,1.1vw,28px)}

  /* Pakete */
  .pakete-satz{flex:0 1 30rem;font-size:1.2rem}
  .stufe{padding:24px 22px 26px}
  .stufe-name{font-size:1.35rem}
  .stufe-preis{font-size:1.75rem}
  .stufe-dauer{font-size:.9rem}
  .stufe ul{font-size:.92rem}

  /* Leistungen */
  /* Titelspur misst stil.css am laengsten Wort (min-content, Subgrid): hier nur der Spaltenabstand */
  .leist-drei{column-gap:clamp(24px,2.2vw,48px)}
  .marken-zeile{font-size:.92rem}

  /* Referenzen: Bilder je Zeile gleich hoch, kein Loch neben dem Leitbild */
  .ref-satz{flex:0 1 30rem;font-size:1.1rem}
  .ref.r1{flex:2 1 44%}
  .ref.r2,.ref.r3{flex:1 1 22%}
  .ref.r4,.ref.r5{flex:1 1 40%}
  .ref picture,.ref img,.ref.r1 picture,.ref.r1 img{aspect-ratio:auto;height:clamp(260px,20vw,560px)}
  .ref-name{font-size:1.05rem}
  .ref-name span{font-size:.9rem}

  /* Vorteile */
  .vorteile-liste b{font-size:1.15rem}
  .vorteile-liste span{font-size:.95rem}

  /* Stimmen: ungleiche Spalten, das kurze Zitat fuehrt gross */
  .stimmen-reihe{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.5fr);align-items:stretch}
  .stimme:first-child blockquote{font-family:var(--kopf);font-stretch:100%;font-weight:600;font-size:1.6rem;line-height:1.15;padding-right:36px}
  .stimme blockquote{font-size:1.08rem}
  .stimme figcaption,.stimmen-note,.stimmen-herkunft{font-size:.9rem}

  /* Besuch */
  .zeiten-tafel{max-width:32rem}
  .besuch-satz{font-size:1.05rem}
  /* Lageskizze fuellt ihre Spalte statt mittig zu schweben (1920: 883x297 Loch, leerflaeche 23 %) */
  .besuch-lage,.lage .lage-skizze{align-self:stretch;position:relative;min-height:clamp(360px,26vw,620px)}
  .besuch-lage img,.lage .lage-skizze img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* Unterseiten */
  .seitenkopf-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .seitenkopf-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .seitenkopf h1{font-size:calc(1.6vw + 32px)}
  .seitenkopf-satz{font-size:1.2rem;max-width:44ch}
  /* Fotohoehe nicht aus der Spaltenbreite: das Hochformat auf /kontakt/ zog den Kopf
     auf 979px (1440) bis 1817px (3440), daneben 300px Text = leerflaeche 27 % */
  .kopf-foto{position:relative;min-height:clamp(340px,26vw,520px);align-self:stretch}
  .kopf-foto picture{position:absolute;inset:0;height:100%}
  .leist-gruppen-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 11.11.2026 (kleim-bau): fuenf Gruppen -> die fuenfte (Anlass) liegt quer ueber die volle Breite,
     Bild links, Text rechts; feste Spurzahl, also kein auto-fit-Problem */
  .lgruppe-anlass{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(32px,3vw,64px);align-content:start}
  .lgruppe-anlass>.lgruppe-bild{grid-column:1;grid-row:1/span 4;margin-bottom:0;align-self:stretch}
  .lgruppe-anlass>.lgruppe-bild img{height:100%;aspect-ratio:auto}
  .lgruppe-anlass>:not(.lgruppe-bild){grid-column:2}
  /* Film und Reinigung: Text schmal, Bild/Liste breit */
  .film-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .reinigung-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .reinigung-liste th,.reinigung-liste td{font-size:1rem}
  .lgruppe-nr{font-size:3.4rem}
  .lgruppe h2{font-size:calc(.9vw + 20px)}
  /* Schlussband Pakete: Ueberschrift eigene Zeile, sonst bricht "Ersatzwagen inklusive," */
  .paket-schluss-in h2{flex:1 1 100%}
  .paket-schluss-in p{flex:0 1 56ch}
  .lliste li,.lgruppe>p{font-size:1rem}
  .marken-liste li{font-size:calc(.9vw + 14px)}
  .paketliste{grid-template-columns:repeat(5,minmax(0,1fr))}
  .paket{padding:24px 20px}
  .paket h2{font-size:1.45rem}
  .paket-preis{font-size:1.7rem}
  .paket ul{font-size:.92rem}
  .paket-dauer{font-size:.9rem}
  .vergleich table{font-size:.95rem}
  .vergleich thead th{font-size:1.1rem}
  /* 11.11.2026 (kleim-bau): 22 Fahrzeuge, feste drei Spuren, grosse Kacheln ueber zwei;
     dense fuellt Luecken, sonst bleibt ein Einzelbild ueber die volle Zeile stehen */
  .projekt-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:28px 18px}
  .projekt.pr-gross{grid-column:span 2}
  .projekt picture,.projekt img,.projekt.pr-gross picture,.projekt.pr-gross img{aspect-ratio:auto;height:clamp(240px,19vw,520px)}
  .projekt-text h2{font-size:1.2rem}
  .projekt-text p,.weitere-liste li{font-size:.95rem}
  .wege-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wegkarte{min-height:150px}
  .wegkarte b{font-size:1.15rem}
  .wegkarte small,.wk-art{font-size:.9rem}

  /* Fuss */
  .fuss{font-size:.95rem}
  .fuss-unten{font-size:.9rem}
}

@media (min-width:1900px){
  /* vier Karten nebeneinander: 37px liess "Keramikversiegelung" 160px aus der Zeilenmaske laufen */
  .lgruppe h2{font-size:calc(.5vw + 14px)}
  /* Pause- und Lautsprecherzeichen sind in stil.css in px gebaut: im Takt der Knopfschrift mitziehen */
  .film-pause-zeichen{zoom:1.15}
  .leist-gruppen-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  :root{--abst:clamp(110px,6vw,180px)}
  .stufe ul,.paket ul{font-size:.95rem}
}

/* Breite Schirme: Seitenkopf-Text zweispaltig (Kicker+H1 links, Satz+Knopf rechts),
   Fotospalte im eigenen Format statt halber Satzspiegel; Quellen sind 640-1600px breit */
@media (min-width:2000px){
  .seitenkopf-in{grid-template-columns:minmax(0,1fr) auto}
  .seitenkopf-text{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(48px,3.4vw,120px);align-content:center;align-items:start}
  .seitenkopf-text>*{grid-column:2}
  .seitenkopf-text>.kicker{grid-column:1;grid-row:1}
  .seitenkopf-text>h1{grid-column:1;grid-row:2/span 3;margin-bottom:0}
  .seitenkopf-text{container-type:inline-size}
  .seitenkopf h1{font-size:min(calc(2.3vw + 22px),4.6cqi)}
  .seitenkopf-satz{font-size:1.25rem;max-width:40ch}
  .seitenkopf-text>.knopf,.seitenkopf-text>.offen-zeile{justify-self:start}
  .kopf-foto{min-height:0;height:clamp(440px,17vw,720px);aspect-ratio:16/10}
  /* Satz und Knopf auf Hoehe der H1, nicht neben dem Kicker: sonst 1100x310 Loch unter
     dem Satz auf /referenzen/ (kein Knopf), leerflaeche 22 % bei 3440 */
  .seitenkopf-text>h1{grid-row:2/span 2}
  .seitenkopf-text>.seitenkopf-satz{grid-row:2}
  .seitenkopf-text>.knopf,.seitenkopf-text>.offen-zeile{grid-row:3;align-self:end}
}

/* Referenzraster ab 2400: Grosskacheln nie breiter als ihr Original (bmw-m3, taycan-heck,
   vw-t6-rot 1280w; bei 3 Spuren 1564px/1994px). 27 Zellen (17 + 5x2), je eine weitere
   Breitkachel aus 1600w-Motiven fuellt die Spurzahl ohne Restloch */
@media (min-width:2400px){
  .projekt-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .projekt-raster>.projekt:nth-child(9){grid-column:span 2}
}
@media (min-width:2700px){
  .projekt-raster{grid-template-columns:repeat(5,minmax(0,1fr))}
  .projekt-raster>.projekt:nth-child(4),.projekt-raster>.projekt:nth-child(14){grid-column:span 2}
  /* Anlass-Gruppe /leistungen/: vw-multivan ist 1280w, Bildspur nicht breiter */
  .lgruppe-anlass{grid-template-columns:minmax(0,1280px) minmax(0,1fr)}
}

@media (min-width:2400px){
  :root{--wrapw:min(92vw,3000px)}
  /* 34ch liess den Satz bei 2560 auf fuenf Zeilen (223px) laufen und den Held ueber die Falte */
  .held-satz{max-width:42ch}
  .film-pause-zeichen{zoom:1.25}
}

/* Hover und Klick am Laptop: Heben plus Schatten, Druck plus Welle */
@media (min-width:1200px) and (hover:hover){
  .knopf,.kachel,.wegkarte,.weg{transition:transform .22s cubic-bezier(.22,.68,.34,1),box-shadow .22s cubic-bezier(.22,.68,.34,1),background-color .18s,border-color .18s,color .18s;
    position:relative;overflow:hidden;isolation:isolate}
  .knopf:hover,.kachel:hover,.wegkarte:hover,.weg:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(23,23,37,.55)}
  .knopf:active,.kachel:active,.wegkarte:active,.weg:active{transform:translateY(1px) scale(.97);box-shadow:none;transition-duration:.08s}
  .knopf::after,.kachel::after,.wegkarte::after,.weg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    border-radius:inherit;background:radial-gradient(circle,currentColor 0 32%,transparent 33%);
    opacity:0;transform:scale(2.6);transition:transform .55s cubic-bezier(.22,.68,.34,1),opacity .55s}
  .knopf:active::after,.kachel:active::after,.wegkarte:active::after,.weg:active::after{opacity:.22;transform:scale(0);transition:none}
  .ref a img,.projekt a img{transition:transform .5s cubic-bezier(.22,.68,.34,1)}
  .ref a:hover img,.projekt a:hover img{transform:scale(1.03)}
  .ref picture,.projekt picture{overflow:hidden;border-radius:var(--rad)}
}

/* 5120: Heldfoto hat hoechstens 4032w (Original), Band nicht breiter als die Quelle;
   Kanten laufen weich in den Carbon-Grund aus statt hart abzubrechen */
@media (min-width:4100px){
  .held-foto{left:50%;right:auto;width:4032px;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}

/* Ultrawide (3440): Held-Satz bei 42ch vier Zeilen, Held 14px ueber 3440x900 */
@media (min-width:3000px){
  .held-satz{max-width:50ch}
}