/* Facility Service Salanov, Embsen — desktop.css
   Desktop-Stufe. Alle @media (min-width: 1200px) gehören hierher.
   stil.css setzt Schrift in px -> Grundvariable --f, jede Größe als calc(var(--f)*k)
   (html{font-size} bewegt hier nichts). Satzspiegel prozentual, keine px-Insel.
   Jedes auto-fit-Raster aus stil.css wird auf die Kinderzahl gepinnt, sonst legt
   der breite Satzspiegel leere Spuren an (held 440, alex 340, gebiet 360 ...). */

@media (min-width:1200px){
  :root{
    --f:clamp(18px,calc(.55vw + 10.2px),24px);
    --sp:max(40px,4vw);
    --wrapw:2400px;
    --kopfh:77px; /* gebaut: Streifen 4 + kopf-in 72 + Linie 1 */
    --abst:clamp(88px,7vw,150px);
  }
  body{font-size:var(--f)}

  /* Typo gestaffelt */
  .h1{font-size:calc(var(--f)*4.4)}
  .h2{font-size:calc(var(--f)*2.95)}
  .h3,h3{font-size:calc(var(--f)*1.4)}
  .kicker{font-size:calc(var(--f)*.82)}
  .knopf{font-size:calc(var(--f)*1);min-height:calc(var(--f)*3.1);padding:12px calc(var(--f)*1.45)}

  /* Kopf: eine Zeile ab 1200, feste Bauhöhe */
  .kopf-in{flex-wrap:nowrap;min-height:72px;gap:clamp(20px,2.2vw,44px)}
  .marke-name b{font-size:calc(var(--f)*1)}
  .marke-name small{font-size:calc(var(--f)*.82)}
  .marke-zeichen .fss{height:42px}
  .nav{flex-wrap:nowrap;gap:0 clamp(18px,1.8vw,36px)}
  .nav a{font-size:calc(var(--f)*.94);white-space:nowrap}
  .kopf-akt .knopf{font-size:calc(var(--f)*.9);min-height:46px;white-space:nowrap}

  /* Held: füllt das Fenster, Rest trägt Karte + Anker */
  .held{min-height:calc(100svh - var(--kopfh));display:flex;flex-direction:column;padding-block:clamp(28px,4svh,64px) clamp(24px,3svh,48px)}
  .held-in{flex:1 1 auto;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}
  .held-satz{font-size:calc(var(--f)*1.32);max-width:30em}
  .held-karte{max-width:none}
  .anker{font-size:calc(var(--f)*1);justify-content:space-between;margin-top:clamp(24px,3svh,48px)}

  /* Drei Bereiche: Zeilen statt drei gleicher Karten (KI-Test) */
  .bereiche-kopf{max-width:none}
  .bereiche-kopf .h2 .ln{display:inline-block}
  .bereiche-liste{grid-template-columns:minmax(0,1fr);gap:14px}
  /* feste Randspuren: jede Zeile ist ein eigenes Raster, auto-Spuren lassen die Titel wandern */
  .bereich{display:grid;grid-template-columns:calc(var(--f)*8) minmax(0,.9fr) minmax(0,1.3fr) calc(var(--f)*14.5);align-items:center;column-gap:clamp(28px,3vw,64px);
    padding:clamp(22px,2vw,34px) clamp(28px,2.6vw,48px);border-top:0;border-left:8px solid var(--gruppe-dunkel)}
  .bereich-motiv{grid-column:1;height:calc(var(--f)*6.2)}
  .bereich h3{grid-column:2;font-size:calc(var(--f)*1.7)}
  .bereich p{grid-column:3;flex:none}
  .bereich .pfeil{grid-column:4;justify-self:end;white-space:nowrap}
  .bereich:first-child{padding-block:clamp(30px,2.8vw,48px)}
  .bereich:first-child .bereich-motiv{height:calc(var(--f)*8)}
  .bereich:first-child h3{font-size:calc(var(--f)*2.1)}

  /* Ablauf: Spuren = Schritte, durchlaufende Linie */
  .schritte{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px clamp(24px,2.4vw,48px)}
  .schritt-nr{width:54px;height:54px;font-size:calc(var(--f)*1.15)}
  .schritt:not(:last-child)::after{top:26px;left:66px}
  .ablauf .h2{max-width:none}
  /* .ablauf-kopf auto-fit 380 legte bei 1440 drei Spuren für zwei Kinder an (Haus am Rand) */
  .ablauf-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

  /* Satzband */
  .satzband-satz{font-size:calc(var(--f)*2.9)}

  /* Über Alex */
  .alex-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .alex-in:has(.alex-bild:empty){grid-template-columns:minmax(0,1fr)}
  .alex-bild{max-width:min(100%,640px)}
  .alex-text p{max-width:36em}
  /* /kontakt/: ohne Versprechen ist die Textspalte kurz -> Bild kleiner, Text größer
     (leerflaeche 23 % bei 1920) */
  .alex-kontakt .alex-bild{max-width:min(100%,520px)}
  .alex-kontakt .alex-text p{font-size:calc(var(--f)*1.25)}
  .versprechen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .versprechen b{font-size:calc(var(--f)*1.15)}

  /* Einsatzgebiet */
  .gebiet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gebiet-in:has(.gebiet-skizze:empty){grid-template-columns:minmax(0,1fr)}
  .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fakten dt{font-size:calc(var(--f)*.82)}
  .fakten dd{font-size:calc(var(--f)*1.05)}

  /* Kontakt + Kartenrückseite */
  .kontakt-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .kontakt-text p:not(.kicker){max-width:34em;font-size:calc(var(--f)*1.12)}
  .karte-name{font-size:calc(var(--f)*2.1)}
  .karte-rolle{font-size:calc(var(--f)*.82)}
  .karte-weg{font-size:calc(var(--f)*1.15)}
  .karte-weg span{flex-basis:calc(var(--f)*5.2);font-size:calc(var(--f)*.82)}
  .karte-legende{font-size:calc(var(--f)*.86)}

  /* Unterseiten */
  /* Seitenkopf: längste .ln-Zeile misst 9,6em (Renovieren, streichen,) -> H1 an die
     Spaltenbreite gekoppelt, sonst lnumbruch bei 1440. Motiv füllt die Zeile (restband),
     Grafik absolut darin statt Prozenthöhe im Fluss. */
  .seitenkopf-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch}
  .seitenkopf-text{container-type:inline-size;display:flex;flex-direction:column;justify-content:center}
  .seitenkopf .h1{font-size:min(calc(var(--f)*4.4),10cqi)}
  .seitenkopf-text p:not(.kicker){font-size:calc(var(--f)*1.32);max-width:30em}
  .seitenkopf-motiv{aspect-ratio:auto;min-height:clamp(380px,46svh,620px);padding:0}
  .seitenkopf-motiv img,.seitenkopf-motiv svg{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:contain}
  .seitenkopf-in>.karte-hinten{align-self:center}
  .posten-liste{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(24px,2.4vw,48px)}
  .takt-paar,.gegenueber-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gegenueber-feld .h2{font-size:calc(var(--f)*2.3)}
  /* Kontaktwege: führende WhatsApp-Kachel deutlich breiter, nicht drei gleiche
     (über zwei Zeilen gespannt meldete ausrichtung.js kartenkante) */
  .wege-raster{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,1.4vw,24px)}
  .wege-raster .wege-wa{justify-content:flex-end;padding:clamp(26px,2.4vw,44px)}
  .wege-wa b{font-size:calc(var(--f)*2.2)}
  .wege-kachel b{font-size:calc(var(--f)*1.35)}
  .gewerk p{flex-basis:420px}
  .schluss-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,120px);align-items:end}
  .schluss-in .h2{grid-row:1/3}
  .schluss-in p{margin-top:0;max-width:34em}
  .fuss{font-size:calc(var(--f)*.88)}
  .fuss-unten{font-size:calc(var(--f)*.82)}
}

/* Breite Schirme ab 2000: Visitenkarte stand bei .92fr auf 1067x854 (3440x900),
   Held 1002 hoch statt 823, Textspalte 503 hoch daneben = leerflaeche 23 %.
   Karte an die Fensterhöhe binden (Breite = verfügbare Höhe x 1,25), Spalte auto,
   die freie Breite trägt der Text über Größe, nicht über Polster. */
@media (min-width:2000px){
  .held-in{grid-template-columns:minmax(0,1fr) auto}
  .held-karte{width:min(calc((100svh - var(--kopfh) - 260px)*1.25),1100px);max-width:none}
  .held .h1{font-size:calc(var(--f)*6)}
  .held-satz{font-size:calc(var(--f)*1.6);max-width:28em}
  .held .kicker{font-size:calc(var(--f)*.95)}
  .held .knopf{font-size:calc(var(--f)*1.12)}
  /* Lageskizze 1160x870 neben 448px Text (3440): Spalte an die Fensterhöhe,
     Text trägt die frei werdende Breite */
  .gebiet-in{grid-template-columns:minmax(0,1fr) minmax(0,min(1160px,96svh))}
  .fakten dd{font-size:calc(var(--f)*1.25)}
  /* Porträt 640x790 in einer 970er Spalte: 330px Weiß zur Textspalte, Text 349 hoch.
     Bildspalte auto, Bild an die Fensterhöhe (62svh x 0,81), Text größer */
  .alex-in{grid-template-columns:auto minmax(0,1fr)}
  .alex-bild{width:min(640px,calc(62svh*.81));max-width:none}
  .alex-text p{font-size:calc(var(--f)*1.3);max-width:38em}
  .versprechen b{font-size:calc(var(--f)*1.3)}
}

/* Ab 2560 trägt die Textspalte 1570px+: zwei Zweiwortzeilen liessen 630px Weiß
   zwischen Text und Karte. H1 einzeilig, an die Spaltenbreite gekoppelt (9 em Zeile). */
@media (min-width:2560px){
  .held-text{container-type:inline-size}
  .held .h1 .ln{display:inline-block}
  .held .h1{font-size:min(calc(var(--f)*7.5),10.6cqi)}
  .held-satz{font-size:calc(var(--f)*1.75);max-width:34em}
}

/* Hover und Klick am Laptop (Lehre desktop [2], Tim 16.10.2026):
   anheben + Schatten beim Überfahren, beim Klick Druck plus Welle. */
@media (min-width:1200px) and (hover:hover){
  .knopf,.wege-kachel,.weiter-kachel,.karte-weg,.bereich{transition:transform .22s var(--sanft),box-shadow .22s var(--sanft),background-color .18s ease,color .18s ease,border-color .18s ease}
  .knopf:hover,.wege-kachel:hover,.weiter-kachel:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(26,26,26,.55)}
  .bereich:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.8)}
  .karte-weg:hover{transform:translateX(4px)}
  .knopf:active,.wege-kachel:active,.weiter-kachel:active{transform:translateY(1px) scale(.97);box-shadow:none;transition-duration:.08s}
  .knopf,.wege-kachel,.weiter-kachel{position:relative;overflow:hidden;isolation:isolate}
  .knopf::after,.wege-kachel::after,.weiter-kachel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
    background:radial-gradient(circle at center,currentColor 0 32%,transparent 33%);opacity:0;transform:scale(2.6);transition:transform .55s var(--sanft),opacity .55s ease}
  .knopf:active::after,.wege-kachel:active::after,.weiter-kachel:active::after{opacity:.22;transform:scale(0);transition:none}
}