/* Tanzstunden Chris Noack - handy.css
   Besitzer: kleim-mobile. Nur Breitenabfragen unter 1200px (Handy, Tablet hoch und quer).
   Grundlayout, Farben und Bausteine stehen in stil.css (kleim-bau).
   Bloecke: A 0-1199.98 gemeinsam · B Handy 0-599.98 · C Tablet 600-1199.98
   · D Tablet hoch 600-1023.98 · E Handy quer (niedrig, Touch). */

/* ===== A · alles unter dem Desktop ===== */
@media (max-width:1199.98px){
  /* Navigation wandert ins Menueblatt, die Kopfleiste bleibt luftig */
  .kopf .nav{display:none}
  .kopf-akt{margin-left:auto}

  /* Menueblatt: Gruppen mit Kleinueberschrift, ein Zeilensystem */
  .menue-gruppe{font:600 14px/1.3 var(--sans);color:var(--grau);margin:20px 0 0}
  #m-menue .menue-liste{margin:4px 0 0}
  #m-menue .menue-liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;padding:10px 0;font:600 24px/1.2 var(--disp)}
  #m-menue .menue-liste a::after{content:"\2192";font:400 20px/1 var(--sans);color:var(--wein)}
  #m-menue .menue-sprung a{min-height:50px;font:500 19px/1.25 var(--sans)}
  #m-menue .menue-direkt{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
  #m-menue .kachel{min-height:64px}

  /* Startseite: Raster, die per auto-fit 2+1 brechen wuerden, fest setzen */
  .stimmen .zitate,.stimmen-dunkel .zitate{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== B · Handy ===== */
@media (max-width:599.98px){
  :root{--kopfh:65px;--abstand:84px}
  html{timeline-scope:--held,--fuss,--zit}
  body{font-size:17px}
  p.m-only.m-only{display:block}
  span.m-only.m-only{display:inline}
  .d-only.d-only{display:none}

  /* --- Kopf: Marke links, Menue rechts; Anrufen und Anfrage werden Bodenleiste --- */
  .kopf-in{flex-wrap:nowrap;min-height:64px;gap:10px}
  .marke{min-width:0;flex:1 1 auto;gap:10px}
  .signet{width:34px;height:34px}
  .marke-name b{font-size:21px}
  .marke-name small{font-size:13px}
  .kopf-akt{flex:none;flex-wrap:nowrap}
  .kopf-akt .kopf-menue{min-height:44px;padding:9px 16px}
  .kopf-akt .kopf-tel,.kopf-akt .kopf-anfrage{position:fixed;z-index:60;bottom:calc(10px + env(safe-area-inset-bottom));
    min-height:52px;margin:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;
    border-radius:6px;padding:0 10px}
  .kopf-akt .kopf-tel{left:var(--sp);right:calc(50% + 5px);background:var(--grund);color:var(--tinte);
    border:1.5px solid var(--tinte);font:600 16px/1.2 var(--sans);text-decoration:none}
  .kopf-akt .kopf-anfrage{left:calc(50% + 5px);right:var(--sp)}
  /* Leiste faehrt erst ein, wenn der erste Schirm geht, und weicht vor der Fusszeile.
     rein ueber translate, raus ueber transform: zwei Eigenschaften, sonst ueberschreibt
     die zweite Animation die erste. */
  .held,.seitenkopf{view-timeline:--held}
  .fuss{view-timeline:--fuss}
  @supports (animation-timeline:view()){
    .kopf-akt .kopf-tel,.kopf-akt .kopf-anfrage{animation:leiste-rein linear both,leiste-raus linear both;
      animation-timeline:--held,--fuss;animation-range:exit 15% exit 55%,entry 0% entry 35%}
  }
  @supports not (animation-timeline:view()){
    .fuss{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  }

  /* --- Held: Text oben, darunter die Buehne. Das Tanzpaar steht rechts auf dem
     Parkett und traegt die Restluft; links daneben Vorwissen, Google, Erreichbarkeit. --- */
  .held .held-in{display:grid;gap:0 14px;
    grid-template-columns:minmax(0,1fr) min(44vw,270px);
    grid-template-rows:auto auto auto auto auto minmax(0,1fr);
    grid-template-areas:"kick kick" "tit tit" "unt unt" "akt akt" "pkt pkt" "err mot";
    padding-block:clamp(18px,3svh,30px) clamp(16px,2.6svh,26px)}
  .held .held-text{display:contents}
  .held .kicker{grid-area:kick;font-size:16px}
  .held .h1{grid-area:tit;font-size:clamp(36px,11.2vw,52px);margin:clamp(10px,1.8svh,22px) 0 clamp(12px,2.4svh,28px)}
  .held .held-unter{grid-area:unt;font-size:clamp(18px,4.9vw,21px);line-height:1.5;margin:0;color:var(--grau)}
  .held .held-akt{grid-area:akt;display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-top:clamp(18px,2.8svh,28px)}
  .held .held-akt .knopf{justify-content:center;text-align:center;min-height:clamp(52px,6.4svh,62px);padding:12px 10px;font-size:17px}
  .held .held-punkte{grid-area:pkt;align-self:start;flex-direction:row;flex-wrap:wrap;gap:8px 18px;
    margin:clamp(16px,3svh,32px) 0 0;padding-top:clamp(14px,2.6svh,28px);border-top:1px solid var(--linie)}
  .held .held-punkte li{align-items:center;gap:8px;font-size:16px;line-height:1.35}
  .held .held-punkte svg{width:22px;height:22px}
  .held .erreichbar{grid-area:err;align-self:start;align-items:flex-start;gap:8px;margin-top:14px;font-size:16px;line-height:1.45}
  .held .erreichbar .note{width:22px;margin-top:1px}
  .held .held-buehne{grid-area:mot;min-height:0;align-self:stretch;margin-top:clamp(14px,2svh,22px)}
  .held .held-buehne svg.tanzpaar{inset:0;width:100%;height:100%}

  /* --- Weinband --- */
  .band-satz{padding-block:64px}
  .band-satz .satz{font-size:clamp(25px,7vw,30px)}

  /* --- Chris: Foto klein links neben Name und Satz, Lob als Dreierleiste --- */
  .chris-in{display:grid;grid-template-columns:min(36vw,170px) minmax(0,1fr);gap:0 18px;
    grid-template-areas:"bild kick" "bild tit" "bild txt" "lob lob" "pf pf";grid-template-rows:auto auto 1fr auto auto}
  .chris{padding-block:calc(var(--abstand) + 14px) calc(var(--abstand) - 14px)}
  .chris-text{display:contents}
  .chris .chris-bild{grid-area:bild;align-self:start;margin:6px 10px 0 0}
  .chris .chris-bild::before{inset:10px -10px -10px 10px}
  .chris .chris-bild figcaption{display:none}
  .chris .chris-text>.kicker{grid-area:kick;align-self:end;margin-bottom:8px}
  .chris .h2{grid-area:tit;margin-bottom:10px}
  .chris .chris-text>p{grid-area:txt;font-size:17px;margin:0}
  .chris .lob{grid-area:lob;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:30px}
  .chris .lob dt{font-size:clamp(16px,4.6vw,20px)}
  .chris .lob dd{display:none}
  .chris .pfeil{grid-area:pf;justify-self:start}

  /* --- Drei Wege: drei Wahlkarten, Symbol links, eigener Anfrage-Link je Weg --- */
  .wege-kopf{margin-bottom:20px}
  .wege-liste{grid-template-columns:1fr;gap:16px}
  .wege-liste li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;align-items:start;
    grid-template-areas:"ic tit" "ic txt" "ic btn";border:1px solid var(--linie);border-left:3px solid var(--wein);
    border-radius:6px;padding:16px 16px 6px}
  .wege-liste li::before{display:none}
  .wege-liste svg{grid-area:ic;width:48px;height:48px;margin:2px 0 0}
  .wege-liste h3{grid-area:tit;font-size:22px;margin:0 0 2px}
  span.weg-kurz.m-only.m-only{grid-area:txt;display:block;font-size:16px;color:var(--grau)}
  button.weg-link.m-only.m-only{grid-area:btn;display:inline-flex;justify-self:start;align-items:center;gap:8px;
    min-height:44px;padding:6px 0;font-size:16px}

  /* --- Erster Abend: senkrechte Schrittleiste --- */
  .abend-in{gap:26px}
  .schritte{grid-template-columns:1fr;gap:34px}
  .schritte::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;
    transform-origin:top;transform:scaleY(0)}
  .schritte:has(> li.in)::before{transform:scaleY(1)}
  .schritte li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 18px;grid-template-areas:"nr tit" "nr txt"}
  .schritte .nr{grid-area:nr;margin:0}
  .schritte h3{grid-area:tit;margin:8px 0 2px}
  .schritte li>p,.schritte .stufe{grid-area:txt;font-size:16px;color:var(--hellgrau)}
  .achse .stufe{display:block;color:var(--hellgrau)}
  span.stufe.m-only.m-only{display:block}
  .schritte li.m-only.m-only{display:grid}

  /* --- Stimmen: Wischreihe mit laufender Schiene --- */
  .stimmen-kopf{margin-bottom:22px}
  .stimmen .zitate,.stimmen-dunkel .zitate{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--sp));padding:4px var(--sp) 6px;scroll-padding-inline:var(--sp);
    scroll-timeline:--zit x}
  .zitate::-webkit-scrollbar{display:none}
  .zitate .zitat{flex:0 0 84%;scroll-snap-align:start;padding:22px 20px 20px}
  .zitat blockquote{font-size:19px}
  .stimmen-kopf::after{content:"";display:block;width:84px;height:4px;margin:16px auto 0;border-radius:2px;
    background:linear-gradient(var(--wein) 0 0) 0 0/34% 100% no-repeat,rgba(122,31,61,.16);
    animation:zit-lauf linear both;animation-timeline:--zit}
  .stimmen-dunkel .stimmen-kopf::after{background:linear-gradient(var(--minze) 0 0) 0 0/34% 100% no-repeat,rgba(127,196,182,.22)}
  .stimmen .pfeil,.stimmen-dunkel .pfeil{margin-top:24px}
  /* Stichworte als Wortzeile wie stil.css .stichworte (keine Balken, 3.5); die Handy-Fassung
     .stw ist ein eigenes m-only-Paar, weil .stimmen-note die 5,0 traegt (steht schon im Einstieg, 3.10) */
  div.stw.m-only.m-only{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 20px;margin-top:20px}
  .stw-titel{flex:1 1 100%;text-align:center;font-size:14.5px;color:var(--grau)}
  .stw>div{display:flex;align-items:baseline;gap:.4em}
  .stw>div b{font:italic 500 22px/1.2 var(--disp);color:var(--wein)}
  .stw>div span{font-size:13.5px;color:var(--grau);font-variant-numeric:tabular-nums}

  /* --- Kontakt auf der Startseite: Karte oben als Band, Wege als Kacheln --- */
  .besuch-in{display:flex;flex-direction:column;gap:0}
  .besuch .besuch-text{flex:0 0 auto}
  .besuch .besuch-karte{order:-1;flex:0 0 auto;min-height:0;height:min(48vw,27svh);margin-bottom:26px}
  .besuch-text address{font-size:22px;margin-bottom:18px}
  .besuch-text address:has(+ .anfahrt-satz){margin-bottom:6px}
  .besuch .anfahrt-satz{margin-bottom:18px}
  .besuch-wege{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .besuch-wege a{min-height:64px;justify-content:center;padding:12px 14px}
  .besuch-wege small{display:none}
  .stimmen-dunkel .zitat:nth-child(3){display:none}
  .besuch-akt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .besuch-akt .knopf{justify-content:center;text-align:center;padding:12px 10px}

  /* --- Unterseiten: Kopf in natuerlicher Hoehe, Bild als Band oben oder neben dem Text --- */
  .seitenkopf{padding-block:clamp(18px,3svh,30px) clamp(30px,4svh,40px)}
  .seitenkopf-in{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .seitenkopf-text{flex:0 0 auto}
  .seitenkopf .h1{font-size:clamp(34px,10.2vw,48px);margin:clamp(10px,1.6svh,16px) 0 clamp(12px,2svh,20px)}
  .seitenkopf-unter{font-size:clamp(18px,4.9vw,21px);line-height:1.5;margin-bottom:0}
  .seitenkopf .held-akt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(18px,2.8svh,28px)}
  .seitenkopf .held-akt .knopf{justify-content:center;text-align:center;min-height:54px;padding:12px 10px;font-size:17px}
  .seitenkopf-motiv{flex:0 0 auto;min-height:0;height:min(48vw,26svh);margin-top:24px}
  .seitenkopf-bild.quer{order:-1;flex:0 0 auto;margin:0 0 22px}
  .seitenkopf-bild.quer::before{display:none}
  .seitenkopf-bild.quer .kopf-foto img{height:min(58vw,28svh);aspect-ratio:auto;object-position:50% 40%}
  .kopf-chris .seitenkopf-in{display:grid;grid-template-columns:minmax(0,1fr) min(36vw,160px);gap:0 16px;
    grid-template-areas:"kick kick" "tit tit" "unt bild" "akt akt"}
  .kopf-chris .seitenkopf-text{display:contents}
  .kopf-chris .kicker{grid-area:kick}
  .kopf-chris .h1{grid-area:tit}
  .kopf-chris .seitenkopf-unter{grid-area:unt;align-self:center}
  .kopf-chris .held-akt{grid-area:akt}
  .kopf-chris .seitenkopf-bild{grid-area:bild;margin:0 10px 0 0;align-self:start}
  .kopf-chris .seitenkopf-bild::before{inset:-8px 10px 10px -8px}
  .kontakt-wege{flex:0 0 auto;margin-top:6px;gap:10px}
  .kontakt-wege .weg{min-height:64px}

  .kurs-zeile{grid-template-columns:52px minmax(0,1fr);padding:22px 0;gap:4px 16px}
  .kurs-nr{font-size:50px}
  .kurs-zeile h3{font-size:22px}
  .achse-in,.fragen-in,.zeiten-in,.anfahrt-in{gap:26px}
  .achse{padding-left:40px}
  .achse li{padding-bottom:24px}
  .achse li::before{left:-39px}
  .fragen-kopf{display:grid;grid-template-columns:minmax(0,1fr) min(30vw,130px);gap:0 14px;align-items:center}
  .fragen-kopf .h2{grid-column:1/-1}
  .fragen-kopf p{grid-column:1;grid-row:2}
  .fragen-kopf svg{grid-column:2;grid-row:2;width:100%;max-height:22svh;margin:0}
  .fragen-liste summary{padding:16px 0;min-height:56px;align-items:center}
  .schluss .satz{font-size:clamp(24px,6.6vw,28px)}
  .schluss-akt{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .schluss-akt .knopf{justify-content:center;text-align:center}
  .haltung-raster{gap:0}
  .haltung article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;grid-template-areas:"ic tit" "ic txt";
    padding:20px 0;border-top-width:2px}
  .haltung svg{grid-area:ic;width:48px;height:48px;margin:0}
  .haltung h3{grid-area:tit;font-size:22px;margin-bottom:2px}
  .haltung article>p{grid-area:txt;font-size:16px}
  .schluss-paar-in{display:grid;grid-template-columns:min(32vw,140px) minmax(0,1fr);gap:0 16px;align-items:center}
  .schluss-paar-motiv{min-height:0;height:min(42vw,190px);align-self:start}
  .schluss-paar-in>div:last-child p{margin-bottom:0}
  .schluss-paar-in .held-akt{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .schluss-paar-in>div:last-child{display:contents}
  .schluss-paar-in>div:last-child .h2{grid-column:1/-1;grid-row:1;margin-bottom:8px}
  .schluss-paar-in>div:last-child>p{grid-column:2;grid-row:2}
  .schluss-paar-motiv{grid-column:1;grid-row:2}
  .schluss-paar-in .held-akt .knopf{justify-content:center;text-align:center;padding:12px 10px}
  p.woche-kurz.m-only.m-only{display:grid;flex:1 1 100%;min-width:0}
  .woche-kurz{grid-template-columns:auto minmax(0,1fr);gap:0 18px;background:var(--grund);
    border-radius:6px;padding:8px 16px}
  .woche-kurz span,.woche-kurz b{padding:12px 0;border-bottom:1px solid var(--linie)}
  .woche-kurz span:nth-last-child(2),.woche-kurz b:last-child{border-bottom:0}
  .woche-kurz span{font-weight:500}
  .woche-kurz b{font-weight:600;font-variant-numeric:tabular-nums}
  .woche{padding:6px}
  .woche div{grid-template-columns:7.2em minmax(0,1fr);padding:10px 12px}
  .anfahrt .anfahrt-karte{flex:0 0 auto;min-height:0;height:min(56vw,30svh)}
  .anfahrt .held-akt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .anfahrt .held-akt .knopf{justify-content:center;text-align:center;padding:12px 10px}

  /* --- Fuss: kompakt, Seiten stehen im Menueblatt --- */
  .fuss{padding-top:34px}
  .fuss-in{gap:16px}
  .fuss .fuss-nav,.fuss-name span,.fuss-unten>span:first-child{display:none}
  body:has(.kopf-kontakt) .fuss-kontakt{display:none}
  .fuss-kontakt a{display:inline-block;padding-block:4px}
  .fuss-recht a,.fuss-unten .credit a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-unten{margin-top:20px;padding-top:6px;gap:0 20px}

  /* --- Modale als Vollbild-Blatt, Schliesser bleibt am Fenster --- */
  .modal{padding:0;align-items:stretch}
  .modal-karte,.modal-karte.breit{width:100%;max-height:none;height:100%;border-radius:0;
    padding:calc(22px + env(safe-area-inset-top)) var(--sp) calc(30px + env(safe-area-inset-bottom));
    animation:modal-rein-handy .22s ease-out;overscroll-behavior:contain}
  .modal-zu{position:fixed;top:calc(8px + env(safe-area-inset-top));right:8px;z-index:3;background:var(--grund)}
  .modal-karte h2{margin-right:52px}
  .anfrage-akt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .anfrage-akt .knopf{justify-content:center;text-align:center;padding:12px 10px}
  .wahl{grid-template-columns:1fr 1fr}
}

@keyframes leiste-rein{from{translate:0 calc(100% + 30px)}to{translate:0 0}}
@keyframes leiste-raus{from{transform:none}to{transform:translateY(calc(100% + 30px))}}
@keyframes zit-lauf{from{background-position:0 0,0 0}to{background-position:100% 0,0 0}}
@keyframes modal-rein-handy{from{opacity:0}to{opacity:1}}

/* ganz schmal: Wahlfelder einspaltig, Lob-Leiste kleiner */
@media (max-width:379.98px){
  .held .held-in{grid-template-columns:minmax(0,1fr) 50vw;gap:0 10px}
  .held .erreichbar{font-size:15px}
}
@media (max-width:359.98px){
  .wahl{grid-template-columns:1fr}
  .kopf-akt .kopf-tel{font-size:15px}
}

/* ===== C · Tablet hoch und quer ===== */
@media (min-width:600px) and (max-width:1199.98px){
  .kopf-in{flex-wrap:nowrap}
  .marke{min-width:0}
  .kopf-akt{flex-wrap:nowrap;flex:none}

  /* Held: Text links, Buehne rechts, nebeneinander statt gestapelt */
  .held .held-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;
    gap:0 clamp(20px,3vw,40px)}
  .held .h1{font-size:clamp(42px,6.4vw,66px)}
  .held .held-buehne{min-height:0}
  .held .held-buehne svg.tanzpaar{inset:auto 0 0 0;height:auto;max-height:100%}

  .chris-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px)}
  .chris-bild{margin-right:18px}
  .wege-liste{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
  /* Merkkasten als Querband unter der Ueberschrift statt hoher Kasten neben ihr */
  .wege-kopf{display:block}
  .wege-kopf>p{margin-top:10px}
  .wege .wege-merk{max-width:none;margin-top:22px;display:grid;align-items:center;gap:6px 28px;
    grid-template-columns:minmax(0,170px) minmax(0,1fr) auto;grid-template-areas:"spur txt tel"}
  .wege .wege-spur{grid-area:spur;margin:0}
  .wege .wege-merk>p{grid-area:txt}
  .wege .wege-tel{grid-area:tel;margin:0}
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .besuch-in,.anfahrt-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px)}
  .seitenkopf-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px)}
  .seitenkopf .h1{font-size:clamp(40px,6vw,62px)}
  .haltung-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .schluss-paar-in{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1fr)}
  .zeiten-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ===== D · Tablet hoch und kleine Tablets: Wischreihe statt Dreierraster ===== */
@media (min-width:600px) and (max-width:1023.98px){
  html{timeline-scope:--zit}
  .stimmen .zitate,.stimmen-dunkel .zitate{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--sp));padding:4px var(--sp) 6px;scroll-padding-inline:var(--sp);
    scroll-timeline:--zit x}
  .zitate .zitat{flex:0 0 46%;scroll-snap-align:start}
  .stimmen-kopf::after{content:"";display:block;width:84px;height:4px;margin:16px auto 0;border-radius:2px;
    background:linear-gradient(var(--wein) 0 0) 0 0/34% 100% no-repeat,rgba(122,31,61,.16);
    animation:zit-lauf linear both;animation-timeline:--zit}
  .stimmen-dunkel .stimmen-kopf::after{background:linear-gradient(var(--minze) 0 0) 0 0/34% 100% no-repeat,rgba(127,196,182,.22)}
  .abend-in{display:block}
  .abend-kopf{margin-bottom:30px}
  .fragen-in,.achse-in,.zeiten-in{display:block}
  .fragen-kopf,.achse-kopf,.zeiten-kopf{margin-bottom:30px}
  .fragen-kopf{display:grid;grid-template-columns:minmax(0,1fr) min(26vw,200px);gap:0 32px;align-items:center}
  .fragen-kopf .h2,.fragen-kopf p{grid-column:1}
  .fragen-kopf svg{grid-column:2;grid-row:1/span 2;width:100%;max-height:240px;margin:0}
}
@media (min-width:600px) and (max-width:767.98px){
  .wege .wege-merk{grid-template-columns:minmax(0,120px) minmax(0,1fr);grid-template-areas:"spur txt" "spur tel"}
  .wege .wege-tel{justify-self:start}
  .kopf-akt .kopf-tel{display:none}
  .wege-liste,.haltung-raster{grid-template-columns:1fr}
  .seitenkopf-in{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
  .seitenkopf-in:has(.quer){grid-template-columns:1fr;gap:26px}
  .seitenkopf-bild.quer{order:-1}
  .seitenkopf-bild.quer::before{display:none}
  .seitenkopf-bild.quer .kopf-foto img{aspect-ratio:auto;height:min(40vw,300px);object-position:50% 40%}
}

/* Tablet hoch: H1 ueber die volle Breite, Buehne rechts neben Unterzeile und Knoepfen */
@media (min-width:600px) and (max-width:1023.98px) and (orientation:portrait){
  .held .held-in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:"kick mot" "tit mot" "unt mot" "pkt mot" "akt mot" "err mot";align-items:start;align-content:center;
    padding-block:clamp(36px,5svh,64px) clamp(28px,3svh,40px)}
  .held .held-text{display:contents}
  .held .kicker{grid-area:kick}
  .held .h1{grid-area:tit;font-size:clamp(38px,6.6vw,60px)}
  .held .held-unter{grid-area:unt}
  .held .held-punkte{grid-area:pkt}
  .held .held-akt{grid-area:akt}
  .held .erreichbar{grid-area:err}
  .held .held-buehne{grid-area:mot;align-self:stretch;min-height:clamp(300px,34svh,440px)}
  .held .held-buehne svg.tanzpaar{inset:0;margin:auto 0;width:100%;height:auto;max-height:100%}
}

/* ===== E · Handy quer: niedrig, Touch. Einstieg passt in den Querschirm:
   Text links knapp, Buehne rechts, Knoepfe im ersten Schirm. ===== */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  :root{--kopfh:57px}
  .kopf-in{min-height:56px}
  .signet{width:32px;height:32px}
  .marke-name b{font-size:20px}
  .kopf-akt .knopf{min-height:44px;padding:8px 16px}

  .held{min-height:calc(100svh - var(--kopfh))}
  .held .held-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0 24px;
    grid-template-rows:auto auto auto auto;grid-template-areas:"kick mot" "tit mot" "unt mot" "akt mot";
    align-content:center;align-items:start;padding-block:14px}
  .held .held-text{display:contents}
  .held .kicker{grid-area:kick;font-size:14px}
  .held .h1{grid-area:tit;font-size:clamp(28px,4.2vw,36px);margin:6px 0 10px}
  .held .held-unter{grid-area:unt;font-size:16px;line-height:1.45;margin:0}
  .held .held-akt{grid-area:akt;margin-top:14px}
  .held .held-akt .knopf{min-height:46px;padding:10px 18px}
  .held .held-punkte,.held .erreichbar{display:none}
  .held .held-buehne{grid-area:mot;align-self:stretch;min-height:0}
  .held .held-buehne svg.tanzpaar{inset:auto 0 0 0;width:100%;height:auto;max-height:100%}

  .seitenkopf{padding-block:16px 24px}
  .seitenkopf-in,.seitenkopf-in:has(.quer){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0 24px;align-items:center}
  .seitenkopf .h1{font-size:clamp(28px,4.2vw,36px);margin:6px 0 10px}
  .seitenkopf-unter{font-size:16px;margin-bottom:0}
  .seitenkopf .held-akt{margin-top:14px}
  .seitenkopf .held-akt .knopf{min-height:46px;padding:10px 18px}
  .seitenkopf-motiv{min-height:0;height:min(60svh,240px)}
  .seitenkopf-bild,.seitenkopf-bild.quer{order:0;margin:0}
  .seitenkopf-bild::before{display:none}
  .seitenkopf-bild .kopf-foto img{aspect-ratio:auto;height:min(64svh,250px);object-position:50% 30%}
  .kontakt-wege{gap:8px}
  .kontakt-wege .weg{min-height:52px;padding:8px 14px}
}