/* Elektro Kesmer — handy.css (Besitzer kleim-mobile)
   Nur Breitenabfragen bis 1199.98px. Grundlage steht in stil.css (kleim-bau),
   ab 1200 gilt desktop.css (kleim-desktop).
   1) bis 1199.98  gemeinsam: Kopf ohne Leiste, Modale mit Abdeckung, Menüblatt
   2) bis 599.98   Handy: eigene Anordnung, Diät-Schalter, Bodenleiste
   3) 600–1199.98  Tablet hoch und quer
   4) Handy quer   niedrige Touch-Schirme */

/* ================================================= 1) bis 1199.98 */
@media (max-width:1199.98px){
  /* Die Textleiste passt erst ab 1200 (fünf Ziele + zwei Knöpfe); darunter
     schneidet .nav{overflow:hidden} still ab. Der Menüknopf trägt das Wort. */
  .nav{display:none}
  .kopf-akt{margin-left:auto}
  .kopf-menue{gap:10px}

  /* Abdeckung: Seite leicht abgedunkelt und weich gezeichnet (Tim 16.10.) */
  .modal{background:rgba(38,38,38,.46);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:opacity .3s ease,display .3s allow-discrete,overlay .3s allow-discrete}
  /* Schließen animiert ohne Skript: display bleibt während der Blende stehen */
  .modal-karte{transition:transform .34s var(--sanft),opacity .3s ease}
  .modal:not(.ist-offen):not(:target) .modal-karte{opacity:0}

  /* Kreuz im Kreis: zwei gleich lange Striche, rechnerisch mittig */
  .modal-zu{display:grid;grid-template:100% / 100%;grid-auto-rows:0;place-items:center;
    font-size:0;line-height:0;color:var(--graphit);overflow:hidden;padding:0}
  .modal-zu::before,.modal-zu::after{content:"";grid-area:1/1;width:18px;height:2px;border-radius:1px;background:currentColor}
  .modal-zu::before{transform:rotate(45deg)}
  .modal-zu::after{transform:rotate(-45deg)}

  /* Menüblatt: Einträge laufen gestaffelt ein */
  #m-menue .menue-liste a,#m-menue .menue-rubrik,#m-menue .kachel{transition:opacity .32s ease,transform .32s var(--sanft)}
  #m-menue:not(.ist-offen) .menue-liste a,#m-menue:not(.ist-offen) .kachel{opacity:0;transform:translateX(14px)}
  #m-menue.ist-offen .menue-liste a:nth-child(1){transition-delay:.06s}
  #m-menue.ist-offen .menue-liste a:nth-child(2){transition-delay:.10s}
  #m-menue.ist-offen .menue-liste a:nth-child(3){transition-delay:.14s}
  #m-menue.ist-offen .menue-liste a:nth-child(4){transition-delay:.18s}
  #m-menue.ist-offen .menue-liste a:nth-child(5){transition-delay:.22s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(1){transition-delay:.26s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(2){transition-delay:.30s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(3){transition-delay:.34s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(4){transition-delay:.38s}
  @starting-style{
    #m-menue.ist-offen .menue-liste a,#m-menue.ist-offen .kachel{opacity:0;transform:translateX(14px)}
  }
  .menue-liste a{transition:opacity .32s ease,transform .32s var(--sanft),background-color .15s ease}
  .menue-liste a:active{background:var(--kalk)}
  .menue-liste a::after{content:"";margin-left:auto;align-self:center;width:9px;height:9px;flex:0 0 auto;
    border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
  .menue-liste a:hover::after,.menue-liste a:active::after{transform:translateX(4px) rotate(45deg)}
  .kachel-knopf{border:0;font:inherit;text-align:left;cursor:pointer;width:100%}
  .menue-rubrik{font-size:13.5px;letter-spacing:.02em;margin-top:6px}

  /* Tippflächen ab 44px auch auf Touch-Tablets */
  .fuss-nav a,.fuss a[href^="tel"],.fuss a[href^="mailto"],.fuss-recht,.credit a{display:inline-flex;align-items:center;min-height:44px}
  .anker a{display:inline-block;padding-block:2px}
}

/* ================================================= 2) Handy bis 599.98 */
@media (max-width:599.98px){
  /* Startseite: Luft wächst nur auf hohen Schirmen (440x956: Dichte sonst 4,8 je Schirm);
     Unterseiten bleiben bei 88, sonst blaehzeile an kurzen Abschnitten */
  :root{--kopfh:64px;--abst:88px}
  main.start{--abst:clamp(88px,calc(18svh - 52px),124px)}
  html{touch-action:manipulation}

  /* ---- Diät-Schalter (Grundregel .m-only.m-only{display:none} in stil.css) */
  .d-only.d-only{display:none}
  p.m-only.m-only{display:block}
  span.m-only.m-only{display:inline}
  div.bodenleiste.m-only.m-only{display:flex}

  /* ---- Kopf: Marke groß, Menü mit Wort, Anfrage sitzt in Held und Bodenleiste */
  .kopf-anfrage{display:none}
  .kopf-in{gap:12px}
  .marke{gap:10px}
  .marke-zeichen,.marke-zeichen svg,.marke-zeichen img{height:36px}
  .marke-name b{font-size:18px}
  .marke-name small{font-size:12.5px}
  .kopf-akt .kopf-menue{min-height:44px;padding:0 14px;font-size:15.5px}

  /* Die Leitung links neben dem Satzspiegel hat auf 18px Rand keinen Platz */
  .ader{display:none}

  /* Feste Desktop-Zeilen ergeben hier Einzelwortzeilen („Keller", „in").
     Diese Überschriften fließen frei; statt der Maske blenden sie zeilenlos ein. */
  html.js main .ln{display:inline;overflow:visible;padding:0;margin:0;opacity:0}
  html.js main .ln>span{display:inline;transform:none}
  html.js main .ln.in,html.js main :is(h1,h2,h3):has(.ln.in) .ln{opacity:1;transition:opacity .8s ease;transition-delay:var(--stf,0ms)}
  .ohne-intro main .ln{opacity:1}
  /* Keine Einzelwortzeile am Ende kurzer Texte (Chrome: pretty reicht nicht).
     Longhand, damit kein white-space:nowrap darunter zurückgesetzt wird. */
  main :is(h1,h2,h3,.kicker,.lead,.pfeil,p.m-only,li,small){text-wrap-style:balance}

  /* Meister: Satz oben, darunter Knopf links und Signet rechts (Gegenüberstellung) */
  .meister{padding-block:calc(var(--abst) + 12px) max(48px,calc(var(--abst) - 56px))}
  .meister .meister-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
  .meister .meister-text{display:contents}
  .meister .meister-satz,.meister .meister-text>p{grid-column:1/-1}
  .meister .meister-satz{grid-row:1}
  .meister .meister-text>p{grid-row:2}
  .meister .knopfreihe{grid-column:1;grid-row:3}
  .meister .meister-zeichen{grid-column:2;grid-row:3;margin:0;width:32vw;max-width:132px}

  /* ---- Held: Text oben, unten Knöpfe links und Blitz rechts.
     Die Restluft trägt der Blitz (wächst mit der Schirmhöhe), nie eine Lücke. */
  .held{position:relative;z-index:95}
  .held-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto;align-content:end;
    grid-template-areas:"kick kick" "tit tit" "satz satz" "akt mot";
    gap:0 14px;align-items:start;padding-block:clamp(22px,3.4svh,34px) clamp(18px,2.6svh,28px)}
  .held-text{display:contents}
  .held .kicker{grid-area:kick;font-size:14.5px;margin-bottom:clamp(12px,2svh,20px)}
  .held .h1{grid-area:tit;font-size:min(13.4vw,6.4svh);line-height:1.04;letter-spacing:-.03em;margin-bottom:clamp(14px,2.2svh,22px)}
  .held-satz{grid-area:satz;font-size:clamp(18px,4.7vw,21px);line-height:1.45;margin-bottom:0;max-width:22em}
  .held .knopfreihe{grid-area:akt;align-self:start;flex-direction:column;align-items:stretch;gap:10px;
    margin-top:clamp(18px,2.8svh,28px)}
  .held .knopfreihe .knopf{justify-content:flex-start;min-height:clamp(52px,6svh,60px);padding:0 18px;font-size:17px}
  .held .knopfreihe .knopf svg{order:0}
  .held-motiv{grid-area:mot;align-self:end;justify-self:end;max-width:none;margin:clamp(18px,2.8svh,28px) 0 0;display:block}
  .held-motiv svg,.held-motiv img,.held-motiv:empty{width:clamp(92px,(100svh - 520px) * .75,40vw);height:auto;max-height:none;aspect-ratio:3/4}
  .anker{display:grid;gap:4px;padding-block:14px 12px}
  .anker li{display:grid;grid-template-columns:8.6em minmax(0,1fr);align-items:baseline;font-size:15.5px}
  .anker b{font-size:15.5px}

  /* Bodenleiste: liegt UNTER Held und Fußzeile (z-index), taucht also erst
     nach dem ersten Schirm auf und verschwindet hinter der Fußzeile — ohne
     Skript, ohne Scroll-Zeitachse, ohne transform. */
  .bodenleiste{z-index:90;gap:8px;padding:8px var(--sp) calc(8px + env(safe-area-inset-bottom))}
  .bodenleiste .knopf{min-height:48px;font-size:16.5px}
  .fuss{position:relative;z-index:95}

  /* ---- Leistungen: Wischreihe aus drei Karten */
  .leist-kopf{gap:12px}
  .leist-liste{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--sp);overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--sp));padding:4px var(--sp) 14px;border-top:0;scrollbar-width:none}
  .leist-liste::-webkit-scrollbar{display:none}
  .leist-liste>li{scroll-snap-align:start;display:flex}
  html.js .leist-liste>li.rv{opacity:1;transform:none}
  .leist{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:20px 18px 18px;
    border:1px solid var(--kalk-linie);border-top:4px solid var(--gelb);border-radius:var(--rad);background:var(--kalk)}
  .leist-nr{font-size:22px;gap:10px;align-items:center}
  .leist-ikon{width:46px;height:46px}
  .leist-text{display:flex;flex-direction:column;gap:6px;flex:1}
  .leist h3{margin-top:2px;font-size:21px}
  .leist p{font-size:16.5px}
  .leist .pfeil{margin-top:auto;padding-top:6px;font-size:16px}
  .leist-punkte{display:flex;gap:8px;justify-content:center;margin-top:2px}

  /* ---- Energie: Schema, darunter drei Stationen als Zahlenband */
  .energie-raster{gap:22px}
  .energie-schema{padding:12px}
  .stationen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .station{padding:14px 10px 16px}
  .station-nr{margin-bottom:10px}
  .station h3{font-size:17px;line-height:1.2;hyphens:manual}
  .station p{font-size:15px;line-height:1.4}

  /* ---- Ablauf: senkrechte Zeitleiste statt Viererreihe */
  .ablauf-kopf{text-align:left;margin-inline:0}
  .ablauf-kopf .kicker{justify-content:flex-start}
  .schritte{grid-template-columns:1fr;gap:20px}
  .schritt{padding:0 0 0 62px;min-height:44px}
  .schritt::before{top:48px;left:20.5px;right:auto;bottom:-16px;width:3px;height:auto;transform-origin:top;transform:scaleY(0)}
  .schritt h3{font-size:20px;margin-bottom:2px;padding-top:9px}
  .schritt p{font-size:16.5px}

  /* ---- Netzwerk: Motiv rechts neben der Überschrift */
  .netz-raster{display:grid;grid-template-columns:minmax(0,1fr) 34vw;grid-template-areas:"kick mot" "tit mot" "rest rest";gap:0 16px;align-items:start}
  .netz-text{display:contents}
  .netz-text .kicker{grid-area:kick}
  .netz-text .h2{grid-area:tit}
  .netz-motiv{grid-area:mot;max-width:none;padding:8px;align-self:center}
  .netz-text .lead,.marken-liste,.netz-text>.pfeil{grid-column:1/-1}
  .netz-text .lead{margin:14px 0 16px}
  .marken-liste{gap:8px;margin-bottom:20px}
  .marken-liste li{font-size:15px;padding:7px 11px}
  .netz-text>.pfeil{justify-self:start}

  /* ---- Meister: Signet links oben, großer Satz */
  .meister-satz{font-size:clamp(25px,7vw,31px)}

  /* ---- Kontakt: Wege als Kacheln, Lageskizze als Band */
  .kontakt-raster{gap:22px}
  .weg{min-height:64px;padding:12px 16px}
  .weg b{font-size:18px;overflow-wrap:anywhere}
  .lage-bild{height:clamp(150px,23svh,210px);overflow:hidden}
  .lage-bild img{width:100%;height:100%;object-fit:cover}
  .lage-text{padding:14px 16px;font-size:16px}

  /* ---- Unterseiten: Titelschirm wie der Held, Motiv neben den Knöpfen */
  .seitenkopf{position:relative;z-index:95}
  .seitenkopf-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick kick" "tit tit" "lead lead" "akt mot";
    gap:0 14px;align-items:start;padding-block:26px 30px}
  .seitenkopf-text{display:contents}
  .seitenkopf .kicker{grid-area:kick;font-size:14.5px}
  .seitenkopf .h1{grid-area:tit;font-size:min(11vw,48px);line-height:1.06;letter-spacing:-.025em}
  .seitenkopf .lead{grid-area:lead;margin-bottom:0}
  .seitenkopf .knopfreihe{grid-area:akt;flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .seitenkopf .knopfreihe .knopf{justify-content:flex-start;padding:0 18px}
  .seitenkopf-motiv{grid-area:mot;align-self:end;max-width:none;margin:22px 0 0;width:min(34vw,140px)}
  .seitenkopf-motiv svg,.seitenkopf-motiv img{max-height:none;height:auto}

  .teil-raster{gap:24px}
  .punkte li{padding:13px 0}
  .punkte b{font-size:18px}
  .punkte span{font-size:16px}
  .kacheln{display:grid;grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--sp);margin-inline:calc(-1 * var(--sp));padding:2px var(--sp) 12px;scrollbar-width:none}
  .kacheln::-webkit-scrollbar{display:none}
  .kacheln>*{scroll-snap-align:start}
  html.js .kacheln>.rv{opacity:1;transform:none}
  .kachel-text{padding:18px 16px}
  .bild-feld{padding:10px}
  .anfrage-raster{gap:18px}
  .anfrage-raster .knopfreihe .knopf{width:100%;justify-content:flex-start}
  .weiter{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .weiter a{padding:14px 14px;gap:2px}
  .weiter b{font-size:17px;line-height:1.25}
  .weiter small{font-size:14px;line-height:1.35}
  .frage summary{font-size:17.5px;min-height:52px}
  .mehr-knopf{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;
    border:2px solid var(--graphit);border-radius:var(--rad);font-family:var(--kopf);font-weight:600;font-size:17px}
  .mehr-knopf::-webkit-details-marker{display:none}
  .mehr-knopf::after{content:"+";font-size:22px;font-weight:500}
  .mehr-liste[open]>.mehr-knopf{display:none}
  .person{padding:16px;gap:14px}
  .person-zeichen{width:56px;height:56px;font-size:21px}

  /* ---- Fußzeile kompakt, Links im Raster */
  .fuss-in{padding-block:30px 8px;gap:18px}
  .fuss-marke p{font-size:15.5px}
  .fuss-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
  .fuss-unten{gap:0 22px;padding-block:6px calc(14px + env(safe-area-inset-bottom))}
  .credit{margin-left:0;width:100%}
  /* Diät: Kontaktzeilen und Seitenliste stehen in Bodenleiste und Menüblatt */
  .fuss-marke p:not(.fuss-name),.fuss-nav{display:none}

  /* Diät + Luft gegen die Bleiwüste: Doppelungen fallen auf dem Handy weg
     (Kicker wiederholt H2/H1, Stationen/Schritte tragen ihre Überschrift,
     Bereiche stehen im Netzwerk-Lead, Inhaber steht im Held-Anker) */
  .energie .kicker,.seitenkopf .kicker,.station p,.schritt p,.marken-liste,
  .leist-kopf p.lead,.weiter small,.anfrage-raster .text-grau,
  .teil .kicker,.ablauf .kicker,.kontakt .kicker,.leist p.m-only.m-only,.netzwerk p.lead.lead,.energie p.lead.lead,
  .kontakt .lage-text{display:none}
  .schritt h3{padding-top:10px}

  /* ---- Modale: Vollbild-Blätter, Schließer klebt im Satzspiegel */
  .modal{padding:0;align-items:stretch}
  .modal-karte,.modal-karte.breit{width:100%;min-height:100%;margin:0;border-radius:0;
    padding:calc(18px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    transform:translateY(18px)}
  .modal.ist-offen .modal-karte,.modal:target .modal-karte{transform:none}
  @starting-style{.modal.ist-offen .modal-karte{transform:translateY(18px)}}
  .modal-karte::before{border-radius:0}
  .modal-zu{position:sticky;top:calc(10px + env(safe-area-inset-top));right:auto;z-index:2;margin:0 0 -44px auto;background:var(--kalk)}
  .modal-karte h2{font-size:27px;padding-right:52px}
  .modal-lang h2{font-size:23px}
  .modal-lang{font-size:16.5px}
  #m-menue .modal-karte{display:flex;flex-direction:column;transform:translateX(26px)}
  #m-menue.ist-offen .modal-karte{transform:none}
  @starting-style{#m-menue.ist-offen .modal-karte{transform:translateX(26px)}}
  #m-menue .menue-rubrik{min-height:44px;display:flex;align-items:center;margin:0 56px 4px 0}
  .menue-liste{margin-bottom:18px}
  .menue-liste a{min-height:58px;align-items:center}
  .menue-liste b{font-size:21px}
  .menue-kacheln{grid-template-columns:1fr 1fr}
  .kachel{min-height:70px;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
  .kachel small{overflow-wrap:anywhere}
  .chips{gap:8px}
  .feld{font-size:16px}
  .anfrage-knoepfe .knopf{flex:1 1 100%}
}

/* Sehr schmale Handys: der Zusatz unter dem Namen kostet den Platz für das Menü */
@media (max-width:374.98px){
  .marke-name small{display:none}
  .stationen{grid-template-columns:1fr}
  .station{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline}
  .station-nr{grid-row:1/span 2;margin:0}
}

/* Handy-Aufklapper: ab 600 steht er offen, der Knopf entfällt (Diät-Bauteil) */
@media (min-width:600px){.mehr-liste>.mehr-knopf{display:none}}

/* ================================================= 3) Tablet hoch und quer */
@media (min-width:600px) and (max-width:1199.98px){
  /* Held zweispaltig: Text links, Blitz rechts, nie gestapelt und mittig */
  .held-in{flex-wrap:nowrap;align-items:center}
  .held-text{flex:1 1 0}
  .held .h1{font-size:clamp(38px,5.1vw,58px)}
  .held-motiv{flex:0 0 32%;max-width:none;margin:0}
  .held-motiv svg,.held-motiv img{max-height:min(56svh,520px)}
  .anker{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}

  .leist-kopf{align-items:flex-start}
  .stationen{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Vier Schritte: 2x2 statt 3+1 */
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritt:nth-child(2)::before{display:none}
  .netz-raster{flex-wrap:nowrap}
  .netz-motiv{flex:0 0 38%}
  .meister-raster{flex-wrap:nowrap}
  .kontakt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}

  .seitenkopf-in{flex-wrap:nowrap}
  .seitenkopf-text{flex:1 1 0}
  .seitenkopf .h1{font-size:clamp(36px,4.8vw,54px)}
  .seitenkopf-motiv{flex:0 0 30%;max-width:none;margin:0}
  .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .teil-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teil-raster>.bild-feld{grid-column:1/-1}
  .weiter{grid-template-columns:repeat(2,minmax(0,1fr))}

  .modal-zu{right:14px;top:14px}
}
/* Tablet breit: Bild über volle Breite, darunter Text links, Punkte rechts
   (sonst bleibt die rechte Spalte unter dem Bild leer, leerflaeche 42 %) */
@media (min-width:820px) and (max-width:1199.98px){
  .teil-raster>.bild-feld+.teil-kopf:last-child{grid-column:1/-1;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px);align-items:start}
  .teil-raster>.bild-feld+.teil-kopf:last-child>*{grid-column:1}
  .teil-raster>.bild-feld+.teil-kopf:last-child>.punkte{grid-column:2;grid-row:1/span 4;margin-top:0}
}
/* Tablet hoch, schmal: Kontakt und Unterseitenraster einspaltig lesen */
@media (min-width:600px) and (max-width:819.98px){
  .kontakt-raster,.teil-raster{grid-template-columns:1fr}
}

/* ================================================= 4) Handy quer */
@media (orientation:landscape) and (pointer:coarse) and (max-height:500px) and (max-width:1199.98px){
  .held{min-height:calc(100svh - var(--kopfh))}
  .held-in{padding-block:18px 14px;gap:28px}
  .held .h1{font-size:clamp(32px,4.4vw,44px);margin-bottom:12px}
  .held .kicker{margin-bottom:10px}
  .held-satz{margin-bottom:16px;font-size:17px}
  .held-motiv svg,.held-motiv img{max-height:62svh;width:auto}
  .anker{padding-block:12px 10px}
  .seitenkopf-in{padding-block:20px}
  .seitenkopf-motiv svg,.seitenkopf-motiv img{max-height:60svh;width:auto;margin-inline:auto}
  .modal{padding:8px}
  .modal-karte{max-height:none}
}

@media (prefers-reduced-motion:reduce) and (max-width:1199.98px){
  html.js main .ln{opacity:1;transition:none}
  .modal,.modal-karte,#m-menue .menue-liste a,#m-menue .kachel{transition:none}
  #m-menue:not(.ist-offen) .menue-liste a,#m-menue:not(.ist-offen) .kachel{opacity:1;transform:none}
  .schritt::before{transform:none}
}