/* Elektro Kesmer — desktop.css
   Nur Breitenabfragen ab 1200px: Laptop bis Ultrawide.
   - Satzspiegel prozentual (Rand ~3,2vw + 12px), erst ab 3200px Inhaltsbreite
     gedeckelt; Lesespalten bleiben über em gedeckelt.
   - stil.css setzt Schrift in px: html{font-size} allein bewegt nichts, deshalb
     stehen die Lesegrößen hier in rem (Lehre 29.09.–01.10.2026: Lesetext ab
     1200 eine Stufe größer, 17,5px bei 1440, 20px bei 1920).
   - Grafikspalten (Held, Seitenkopf, Netz) bekommen eine echte Höhe, das SVG
     liegt absolut darin (keine Prozenthöhe im Fluss).
   - Drei gleiche Geschwister (Stationen, Kacheln, Weiter) werden zu Zeilen
     mit durchlaufender Linie, nicht zu drei gleichen Karten. */

@media (min-width:1200px){
  :root{
    --sp:max(40px,calc(3.2vw + 12px));
    --wrapw:3200px;
    --abst:clamp(64px,4.6vw,170px);
  }
  html{font-size:clamp(16px,calc(.55vw + 9.6px),22px)}
  body{font-size:1.0625rem}

  /* Ader: sitzt links neben dem tatsächlichen Satzspiegel */
  .ader{left:max(6px,calc((100% - min(var(--wrapw),100% - 2*var(--sp))) / 2 - 28px))}

  /* ---------- Typografie */
  .h1{font-size:3.5rem}
  .h2{font-size:2.6rem}
  h3{font-size:1.35rem}
  .h3-gross{font-size:1.65rem}
  .lead{font-size:1.2rem}
  .kicker{font-size:.95rem}
  .text-grau{font-size:1.0625rem}
  .knopf{font-size:1rem;min-height:3.1rem;padding:0 1.35rem}
  .knopf svg{width:1.2rem;height:1.2rem}
  .pfeil{font-size:1.0625rem}

  /* ---------- Kopfleiste */
  .kopf-in{gap:clamp(52px,3.6vw,120px)}
  .nav a{font-size:.95rem}
  .marke-name b{font-size:1.1rem}
  .marke-name small{font-size:.9rem}
  .kopf-akt .knopf{font-size:.95rem;min-height:2.75rem;padding:0 1.1rem}

  /* ---------- Held: Textspalte breit, Motivspalte füllt die Zeile */
  .held-in{--ho:clamp(44px,5svh,96px);--hu:clamp(32px,4svh,72px);padding-block:var(--ho) var(--hu);
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:stretch;
    column-gap:clamp(40px,4.5vw,160px)}
  .held-text{max-width:none;display:flex;flex-direction:column;justify-content:center}
  .held .h1{font-size:min(4.3rem,5.3vw);margin-bottom:28px}
  .held .kicker{font-size:1.05rem}
  .held-satz{font-size:clamp(1.45rem,1.6vw,2rem);max-width:32em;margin-bottom:36px}
  .held .knopf{font-size:1.1rem;min-height:3.4rem;padding:0 1.6rem}
  /* Motiv läuft über das Innenpolster bis an Gelbkante und Ankerleiste */
  .held-motiv{position:relative;max-width:none;margin:calc(-1*var(--ho)) 0 calc(-1*var(--hu));min-height:clamp(340px,40svh,720px)}
  .held-motiv svg,.held-motiv img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
  .held-motiv:empty{aspect-ratio:auto;width:auto}
  .held-motiv:empty::before{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;width:auto;height:100%;max-width:100%;aspect-ratio:3/4}
  .anker{gap:12px clamp(32px,5vw,140px);padding-block:1.2rem 1.1rem}
  .anker li{font-size:.95rem}
  .anker b{font-size:1.05rem}

  /* ---------- Leistungen: Zeile = Nummer | Text | Stichworte */
  .leist-kopf .lead{max-width:46em}
  .leist{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr);align-items:start}
  .leist-nr{font-size:3.2rem;gap:.9rem}
  .leist-ikon{width:3rem;height:3rem;padding:.55rem}
  .leist p{font-size:1.0625rem;max-width:32em}
  .leist-tags{gap:10px}
  .leist-tags li{flex:1 1 auto;font-size:.95rem;padding:.6rem .9rem}

  /* ---------- Energie: Kopf links, Stationen als Zeilenfolge rechts */
  .energie-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,160px);align-items:start}
  .energie-kopf{grid-column:1;grid-row:1;max-width:none}
  .energie-fuss{grid-column:1;grid-row:2;align-self:end}
  .stationen{grid-column:2;grid-row:1/span 2;grid-template-columns:1fr}
  .energie-schema{grid-column:1/-1;grid-row:3}
  .station{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.4rem;align-items:baseline}
  .station-nr{grid-row:1/span 2;margin:0;font-size:.95rem}
  .station p{font-size:1rem}

  /* ---------- Ablauf: Marken mitskalieren, Leitung sitzt auf Markenmitte */
  /* Ablauf: Kopf linksbündig über einer durchgehenden Viererleitung, Ziffern groß */
  .ablauf-raster{gap:clamp(36px,3vw,72px)}
  .ablauf-kopf{text-align:left;margin:0;max-width:none}
  .ablauf-kopf .kicker{justify-content:flex-start}
  .ablauf-kopf .h2{font-size:3.2rem}
  .ablauf-kopf .lead{margin:16px 0 0}
  .schritte{--snr:4.2rem;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(28px,3vw,72px)}
  .schritt h3{font-size:1.5rem}
  .schritt{padding-top:calc(var(--snr) + 1.2rem)}
  .schritt-nr{width:var(--snr);height:var(--snr);font-size:1.6rem}
  .schritt::before{top:calc(var(--snr) / 2 - 1.5px);left:var(--snr)}
  .schritt p{font-size:1.0625rem}

  /* ---------- Netzwerk: Motivspalte mit echter Höhe */
  .netz-raster{flex-wrap:nowrap;align-items:stretch}
  .netz-motiv{flex:.85 1 0;max-width:none;position:relative;min-height:clamp(420px,32vw,980px)}
  .netz-motiv svg,.netz-motiv img{position:absolute;inset:clamp(18px,2.6vw,48px);width:calc(100% - 2*clamp(18px,2.6vw,48px));height:calc(100% - 2*clamp(18px,2.6vw,48px));object-fit:contain}
  .netz-text{flex:1.15 1 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .marken-liste li{font-size:.95rem}

  /* ---------- Meisterbetrieb */
  .meister-raster{flex-wrap:nowrap}
  .meister-zeichen{width:clamp(220px,20vw,640px)}
  .meister-satz{font-size:2.35rem;max-width:24em}
  .meister-text p:not(.meister-satz){font-size:1.1rem}

  /* ---------- Kontakt */
  .kontakt-raster{align-items:stretch}
  .kontakt-kopf{display:flex;flex-direction:column}
  .wege{display:flex;flex-wrap:wrap}
  .weg{min-height:4.6rem;flex:1 1 17rem}
  .weg svg{width:1.6rem;height:1.6rem}
  .weg{gap:12px}
  .weg b{font-size:1.05rem;white-space:nowrap}
  .weg small{font-size:.9rem}
  .kontakt-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lage{display:flex;flex-direction:column}
  .lage-bild{flex:1 1 0;position:relative;min-height:clamp(220px,15vw,520px)}
  .lage-bild svg,.lage-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .lage-text{font-size:1rem}

  /* ---------- Unterseiten */
  .seitenkopf{min-height:calc(100svh - var(--kopfh));display:flex;flex-direction:column}
  .seitenkopf-in{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:stretch;
    column-gap:clamp(40px,4.5vw,160px)}
  .seitenkopf-in:has(> .seitenkopf-motiv:empty){grid-template-columns:minmax(0,1fr)}
  .seitenkopf-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .seitenkopf-text .lead{max-width:34em}
  .seitenkopf-motiv{position:relative;max-width:none;margin:0;min-height:clamp(300px,36svh,680px)}
  .seitenkopf-motiv svg,.seitenkopf-motiv img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
  .teil-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,5vw,160px)}
  .punkte b{font-size:1.15rem}
  .punkte span{font-size:1rem}
  .kachel-text p{font-size:1rem}
  .person b{font-size:1.3rem}
  .person span{font-size:1rem}
  .frage summary{font-size:1.1rem}
  .frage p{font-size:1.0625rem}
  .anfrage-raster .text-grau{max-width:40em}

  /* Drei gleiche Kacheln -> Zeilen: Titel links, Text rechts, Linie durch */
  .kacheln{grid-template-columns:minmax(0,1fr);gap:0;border-top:2px solid var(--graphit)}
  .kachel-text{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(32px,4vw,120px);align-items:baseline;
    background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:clamp(22px,2vw,40px) 0}
  .kachel-text > *{grid-column:1}
  .kachel-text > p{grid-column:2;grid-row:1/span 4}

  /* Weiter-Leiste: eine Linie, Felder nach Inhalt statt drei gleiche Karten */
  .weiter{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--graphit);border-bottom:2px solid var(--graphit)}
  .weiter a{flex:1 1 auto;flex-direction:row;align-items:baseline;gap:14px;border:0;border-right:1px solid var(--linie);border-radius:0;background:none;padding:1.2rem 1.6rem}
  .weiter a:last-child{border-right:0}
  .weiter b{font-size:1.15rem}
  .weiter small{font-size:.9rem}

  /* ---------- Fuß und Modale */
  .fuss{font-size:1rem}
  .fuss-name{font-size:1.15rem}
  .credit{font-size:.9rem}
  .modal-karte{width:min(36rem,100%)}
  .modal-karte.breit{width:min(54rem,100%)}
}

/* ---------- Ultrawide: Grundschrift wächst weiter, an die Breite gekoppelt */
@media (min-width:2560px){
  html{font-size:clamp(22px,calc(.3vw + 15px),30px)}
  .h1{font-size:3.3rem}
  .held .h1{font-size:4rem}
  /* Seitenkopf: Text wächst mit, statt rechts 30 % Gelb stehen zu lassen
     (matrix.js 3440: Loch 959x664 neben H1 und Einleitung) */
  .seitenkopf-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .seitenkopf .h1{font-size:4.2rem}
  .seitenkopf-text .lead{font-size:1.4rem;max-width:32em}
  /* Kontakt: Karte nicht höher als Kopf + Wege (3440: 317px Loch unter den Wegen) */
  .kontakt-raster{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .lage-bild{min-height:clamp(220px,11vw,440px)}
  /* PV-Schema 3:1 über 3200px war 1,9 Schirme hoch: Kopf daneben, Schema füllt den Rest */
  .teil > .wrap:has(> .teil-kopf + .fluss-feld){display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(60px,4.6vw,160px);align-items:center}
  .teil > .wrap > .teil-kopf + .fluss-feld{margin-top:0}
  /* Bildkontrolle 2560 Startseite: Held-Text, Ankerleiste, Leistungskopf,
     Meistersatz und Kontaktwege liessen je eine halbe Breite leer */
  .held .h1{font-size:5.2rem}
  .held-satz{font-size:2.15rem;max-width:30em}
  .anker{justify-content:space-between}
  .anker li{font-size:1.1rem}
  .anker b{font-size:1.25rem}
  .leist-kopf{flex-direction:row;justify-content:space-between;align-items:flex-end;column-gap:clamp(60px,5vw,200px)}
  .leist-kopf .lead{flex:0 1 44em;max-width:44em}
  .leist p{max-width:40em}
  .meister-satz{max-width:30em}
  .meister-text p:not(.meister-satz){max-width:46em}
  .kontakt-kopf .wege{flex:1 1 auto;align-content:stretch}
  .kontakt-kopf .weg{align-items:center}
}

/* ---------- ab 3000: Energieschema neben Kopf und Stationen statt darunter
   (3440: Abschnitt 1926px = 2,1 Schirme, 3:1-Schema über 3200px) */
@media (min-width:3000px){
  .energie-raster{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .energie-kopf{grid-column:1;grid-row:1}
  .stationen{grid-column:1;grid-row:2}
  .energie-fuss{grid-column:1;grid-row:3;align-self:start}
  .energie-schema{grid-column:2;grid-row:1/span 3;align-self:center}
}

/* ---------- Hover und Klick am Laptop (Tim 16.10.2026) */
@media (min-width:1200px) and (hover:hover){
  .knopf,.weg,.weiter a,.kachel,.chip{transition:transform .22s var(--sanft),box-shadow .22s var(--sanft),background-color .18s,border-color .18s}
  .knopf:hover,.weg:hover,.weiter a:hover,.kachel:hover,.chip:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(26,26,26,.55)}
  .knopf:active,.weg:active,.weiter a:active,.kachel:active,.chip:active{transform:translateY(1px) scale(.97);box-shadow:none;transition-duration:.08s}
  .knopf,.weg,.weiter a,.kachel,.chip{position:relative;overflow:hidden;isolation:isolate}
  .knopf::after,.weg::after,.weiter a::after,.kachel::after,.chip::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 var(--sanft),opacity .55s}
  .knopf:active::after,.weg:active::after,.weiter a:active::after,.kachel:active::after,.chip:active::after{opacity:.22;transform:scale(0);transition:none}
  /* Leistungszeile: Fläche statt Heben, Nummer rückt an */
  .leist{transition:background-color .2s,padding .25s var(--sanft)}
  .leist:hover{background:var(--kalk);padding-inline:1.2rem}
  .leist:active{background:var(--kalk-linie)}
  /* Aufklapper, Schließen, Marke, Gate: auch hier Heben und Druck */
  .frage summary::after{transition:transform .25s var(--sanft),box-shadow .25s var(--sanft)}
  .frage summary:hover::after{transform:translateY(-3px) rotate(90deg);box-shadow:0 10px 18px -10px rgba(26,26,26,.55)}
  .frage summary:active::after{transform:scale(.88);box-shadow:none;transition-duration:.08s}
  .modal-zu{transition:transform .25s var(--sanft),background-color .18s}
  .modal-zu:hover{transform:rotate(90deg);background:var(--gelb)}
  .modal-zu:active{transform:rotate(90deg) scale(.88);transition-duration:.08s}
  .marke-zeichen{transition:transform .3s var(--sanft)}
  .marke:hover .marke-zeichen{transform:translateY(-2px) rotate(-6deg)}
  .marke:active .marke-zeichen{transform:scale(.94);transition-duration:.08s}
  .kw-btn{transition:transform .22s var(--sanft),box-shadow .22s var(--sanft),background-color .18s}
  .kw-btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(26,26,26,.55)}
  .kw-btn:active{transform:translateY(1px) scale(.97);box-shadow:none;transition-duration:.08s}
}