/* Tanzstunden Chris Noack - desktop.css
   Besitzer: kleim-desktop. Nur Breitenabfragen ab 1200px (Laptop bis Ultrawide).
   Grundlayout, Farben und Bausteine stehen in stil.css (kleim-bau).
   - stil.css setzt alle Schriften in px: Grundschrift laeuft deshalb ueber
     --f (18px bei 1440, 21px bei 1920, Deckel 24/30px), jede Groesse als
     Vielfaches davon. html{font-size} allein wuerde nichts bewegen.
   - Satzspiegel prozentual ueber --wrapw statt 1180px (keine schmale Insel).
   - Kopfleiste auf feste Bauhoehe, --kopfh rechnet daraus (Hero 100svh).
   - Held als Raster: Textspalte als Container, H1 an ihre Breite gekoppelt
     (keine lnumbruch), Buehne mit dem Tanzpaar fuellt die volle Heldhoehe.
   - Drei-Elemente-Raster auf drei feste Spuren (auto-fit legt sonst eine
     vierte, leere Spur an oder bricht 2+1). */

/* ---------- 1200+ ---------- */
@media (min-width:1200px){
  :root{
    --wrapw:92vw;
    --f:clamp(18px,calc(.55vw + 10.2px),24px);
    --kopfin:clamp(76px,calc(3.4vw + 28px),124px);
    --kopfh:calc(var(--kopfin) + 1px);
    --abstand:clamp(96px,7vw,260px);
  }
  body{font-size:var(--f)}

  /* Kopfleiste: feste Bauhoehe, eine Zeile, Luft >= 48px zwischen den Gruppen.
     Vier Seiten stehen direkt in der Navigation, das Menueblatt waere doppelt. */
  .kopf-in{height:var(--kopfin);min-height:0;flex-wrap:nowrap;column-gap:clamp(56px,3.6vw,140px)}
  .nav{flex-wrap:nowrap;column-gap:clamp(26px,2.2vw,72px)}
  .nav a{font-size:calc(var(--f)*.92)}
  .kopf-akt{flex-wrap:nowrap;gap:clamp(10px,.8vw,24px)}
  .kopf-tel{font-size:calc(var(--f)*.92)}
  .kopf-akt .knopf{min-height:calc(var(--f)*2.45);padding:.55em 1.1em;font-size:calc(var(--f)*.9)}
  .kopf-menue{display:none}
  .signet{width:calc(var(--f)*2.25);height:calc(var(--f)*2.25)}
  .marke-name b{font-size:calc(var(--f)*1.3)}
  .marke-name small{font-size:calc(var(--f)*.8)}

  /* Schrift: Display und Kleintexte wachsen mit (Tim: lieber zu gross als zu klein) */
  .h1{font-size:clamp(60px,4.6vw,210px)}
  .h2{font-size:clamp(44px,3.1vw,150px)}
  h3{font-size:clamp(24px,1.6vw,70px)}
  .kicker{font-size:calc(var(--f)*.9)}
  .kicker::before{width:calc(var(--f)*1.6)}
  .knopf{font-size:calc(var(--f)*.95);min-height:calc(var(--f)*2.9);padding:.8em 1.35em}
  .pfeil{font-size:var(--f)}
  .sterne{font-size:calc(var(--f)*.88)}
  .satz{font-size:clamp(36px,2.7vw,120px);max-width:40ch}
  .spur-linie{width:clamp(600px,36vw,1600px)}
  .chris-bild figcaption,.lob dd,.zitat figcaption,.google-zeile,.erreichbar,
  .besuch-wege small,.weg small,.lage-notiz,.anfrage-hinweis{font-size:calc(var(--f)*.88)}
  .schritte p{font-size:calc(var(--f)*.94)}
  .lob dt{font-size:calc(var(--f)*1.3)}
  .zitat blockquote{font-size:calc(var(--f)*1.2)}
  .besuch-text address,.anfahrt-text address{font-size:calc(var(--f)*1.45)}
  .besuch-wege b,.weg b{font-size:var(--f)}
  .fragen-liste summary{font-size:calc(var(--f)*1.2)}
  .fragen-liste summary::after{font-size:calc(var(--f)*1.5)}
  .kurs-nr{font-size:clamp(72px,5vw,220px)}
  .nr{width:calc(var(--f)*2.5);height:calc(var(--f)*2.5);font-size:calc(var(--f)*1.15)}
  .schritte::before{left:calc(var(--f)*1.25);top:calc(var(--f)*1.25)}
  .fuss{font-size:calc(var(--f)*.88)}
  .fuss-name b{font-size:calc(var(--f)*1.15)}
  .fuss-unten,.fuss-unten button{font-size:calc(var(--f)*.82)}
  .wege-liste svg,.haltung svg{width:clamp(60px,3.6vw,140px);height:clamp(60px,3.6vw,140px)}

  /* Held: Text | Buehne als Raster. Die Buehne fuellt die ganze Heldhoehe
     (stretch), das Tanzpaar liegt absolut darin und waechst mit ihr. */
  /* Das Paar ist hoehengetrieben (viewBox 400x520): die Buehne braucht nur
     ~0,77 x Hoehe Breite, der Rest gehoert der H1 */
  .held-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch;
    column-gap:clamp(40px,4vw,180px)}
  .held-text{container-type:inline-size;min-width:0}
  .held-text .h1{font-size:clamp(52px,min(11.3cqi,12svh),230px)}
  /* Tim 03.10.: "ruhig 3 woerter pro linie ... und groesser dann einfach beide
     texte und buttons". H1 zwei Zeilen, laengste 8,41em -> 11,3cqi = 95 % der
     Spalte; Spalte dafuer 1.3fr. svh-Anteil haelt die Knoepfe im ersten Schirm. */
  .h1-wahl .br-m{display:none}
  .h1-wahl .br-d{display:inline}
  .held-unter{font-size:calc(var(--f)*1.32);max-width:32em}
  .held-punkte li{font-size:calc(var(--f)*1.12)}
  .held-punkte svg{width:calc(var(--f)*1.5);height:calc(var(--f)*1.5)}
  .held-akt{gap:clamp(12px,1vw,32px)}
  .held-akt .knopf{font-size:calc(var(--f)*1.1);min-height:calc(var(--f)*3.3);padding:.85em 1.55em}
  .held .erreichbar{font-size:calc(var(--f)*.95)}
  .held-buehne{min-height:clamp(420px,58svh,1500px)}

  /* Chris: Foto waechst mit, Text daneben */
  .chris-in{flex-wrap:nowrap}
  .chris-bild{flex:0 0 clamp(380px,27vw,760px)}
  .chris-text{flex:1 1 0;min-width:0}
  .chris-text>p{font-size:clamp(20px,1.3vw,48px)}

  /* KI-Test (kleim-abschluss 03.10.): keine drei gleichen Dreierreihen.
     Jede Stelle bekommt ihre eigene Ordnung, keine zwei gleich. */

  /* Wege (Start): Kopf links, rechts drei Zeilen, die wie Schritte nach rechts
     einruecken; die erste Zeile (Neu anfangen) traegt das groesste Gewicht */
  .wege .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);grid-template-rows:auto 1fr;
    column-gap:clamp(48px,5vw,200px)}
  .wege-kopf{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;margin:0}
  .wege-kopf p{max-width:24em}
  .wege .wrap>.pfeil{grid-column:1;grid-row:2;align-self:start;justify-self:start}
  .wege-liste{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:0}
  .wege-liste li{display:grid;grid-template-columns:auto minmax(0,11em) minmax(0,1fr);align-items:start;
    column-gap:clamp(24px,2.2vw,80px);padding:clamp(22px,1.8vw,64px) 0}
  .wege-liste li:nth-child(2){margin-left:7%}
  .wege-liste li:nth-child(3){margin-left:14%}
  .wege-liste svg{margin:0}
  .wege-liste h3{margin:0}
  .wege-liste li:first-child h3{font-size:clamp(30px,2.2vw,92px)}

  /* Stimmen (Start): eine Stimme fuehrt gross und frei auf der Flaeche,
     zwei kleinere Karten daneben, die untere versetzt */
  .stimmen .zitate{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:clamp(48px,4.5vw,180px);row-gap:clamp(18px,1.4vw,56px);align-items:start}
  .stimmen .zitat:first-child{grid-row:1 / span 2;align-self:center;background:none;padding:0}
  .stimmen .zitat:first-child blockquote{font-size:clamp(32px,2.35vw,96px);line-height:1.28}
  .stimmen .zitat:nth-child(3){margin-left:12%}

  /* Haltung (Ueber Chris): erste Haltung quer ueber die volle Breite,
     die anderen zwei darunter in ungleichen Spalten */
  .haltung-raster{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(40px,3.5vw,140px)}
  .haltung-raster article:first-child{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,14em) minmax(0,1fr);
    align-items:center;column-gap:clamp(24px,2.2vw,80px)}
  .haltung-raster article:first-child svg,.haltung-raster article:first-child h3{margin:0}
  .haltung-raster article:first-child h3{font-size:clamp(30px,2.2vw,92px)}

  /* Stimmen auf Tinte (Ueber Chris): Zeilen statt Karten, Name links,
     Zitat gross rechts, getrennt von Minzlinien */
  .stimmen-dunkel .zitate{grid-template-columns:minmax(0,1fr);gap:0}
  .stimmen-dunkel .zitat{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);grid-template-areas:"name zitat" "sterne zitat";
    align-items:start;column-gap:clamp(32px,3vw,120px);row-gap:6px;background:none;border:0;border-top:1px solid rgba(127,196,182,.35);
    border-radius:0;padding:clamp(22px,1.8vw,64px) 0}
  .stimmen-dunkel .zitat:last-child{border-bottom:1px solid rgba(127,196,182,.35)}
  .stimmen-dunkel .zitat blockquote{grid-area:zitat;font-size:clamp(24px,1.7vw,68px);max-width:38em}
  .stimmen-dunkel .zitat figcaption{grid-area:name}
  .stimmen-dunkel .zitat .sterne{grid-area:sterne}

  /* Erster Abend: Kopf breiter, drei Schritte auf einer Linie */
  /* Erster Abend, jetzt fuenf Schritte: Kopf oben (Ueberschrift links,
     Mitbringen/Tanzpartner rechts nebeneinander), darunter die fuenf
     Schritte als EINE Zeitlinie ueber die volle Breite. Fuenf in der alten
     Seitenspalte waeren 3+2 mit leerer Zelle oder 120px schmale Spalten. */
  .abend-in{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,4vw,150px)}
  .abend-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:clamp(48px,5vw,200px);align-items:end}
  .abend-kopf>*{grid-column:1}
  .abend-kopf .h2{margin-bottom:0}
  .abend-info{grid-column:2;grid-row:1 / span 2;flex-direction:row;gap:clamp(32px,3vw,120px);margin:0;padding-top:clamp(18px,1.4vw,48px)}
  .abend-info>div{flex:1 1 0}
  .abend-info h3{font-size:calc(var(--f)*1.12)}
  .abend-info p{font-size:calc(var(--f)*.92)}
  .schritte{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(24px,2.2vw,96px)}

  /* Besuch: Karte und Text teilen die Zeile */
  .besuch-in{flex-wrap:nowrap}
  .besuch-text{flex:1 1 0}
  /* Hoehe folgt dem Text: 28vw liess bei 3440 neben der Textspalte 544px leer */
  .besuch-karte{flex:1.15 1 0;min-height:clamp(360px,22vw,560px)}
  /* Lageskizze im Fluss rechnete sich aus der Breite hoch (3:2, 1021px bei 3440):
     absolut legen, dann traegt die Textspalte die Zeilenhoehe */
  .anfahrt-karte .lage-bild{position:absolute;inset:0}
  /* Startseite: Skizze im ganzen Verhaeltnis zeigen (cover schnitt bei 1440 die
     Strassenbeschriftung ab), Spalte mittig; Text ist seit der Vertiefung so
     hoch wie die Skizze */
  .besuch-in{align-items:center}
  .besuch-karte{min-height:0}

  /* Unterseiten */
  .seitenkopf-in{flex-wrap:nowrap}
  .seitenkopf-text{flex:1 1 0;min-width:0}
  .seitenkopf-unter{font-size:clamp(20.5px,1.45vw,46px);max-width:30em}
  .seitenkopf-motiv{flex:1 1 0;min-height:clamp(360px,30vw,1100px)}
  .seitenkopf-bild{flex:0 0 clamp(380px,27vw,760px)}
  /* Querfoto (Tanzkurse): stil.css gibt flex:1 1 440px, das nahm der Textspalte
     die Breite (lnumbruch "Ein Kurs, der zu"); Deckel = groesste Datei 1080w */
  .seitenkopf-bild.quer{flex:0 0 clamp(440px,36vw,1080px)}
  .seitenkopf-text{container-type:inline-size}
  .seitenkopf-text .h1{font-size:clamp(52px,min(4.6vw,11cqi),200px)}
  .achse-motiv{width:clamp(260px,18vw,700px);max-width:100%}
  .kontakt-wege{flex:0 0 clamp(400px,30vw,1100px)}

  /* Kurse: drei Zeilen werden drei Spalten, sonst 60 % leer rechts der 62ch */
  /* Kurse: die drei Ziffern sitzen auf EINER Weinlinie (ungleiche Spalten,
     kein Spaltenabstand, damit die Linie durchlaeuft), die Texte steigen
     darunter wie Schritte ab */
  .kurse .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:0;align-items:stretch}  /* stretch: Stufe sitzt im Text, nicht an der Kante (kartenkante) */
  .kurse .wrap>.h2{grid-column:1 / -1;margin-bottom:clamp(48px,3.4vw,130px)}
  .kurs-zeile{grid-template-columns:minmax(0,1fr);align-content:start;border-top:2px solid var(--wein);
    padding:0 clamp(28px,2.8vw,110px) 0 0}
  .kurs-nr{justify-self:start;margin-top:-.5em;padding-right:.3em;background:var(--ahorn);line-height:1}
  .kurs-zeile>div{margin-top:clamp(10px,.8vw,30px)}
  .kurs-zeile:nth-child(3)>div{margin-top:clamp(40px,3vw,120px)}
  .kurs-zeile:nth-child(4)>div{margin-top:clamp(70px,5.2vw,210px)}
  .kurs-zeile p{max-width:none}

  .achse-in,.fragen-in,.zeiten-in,.anfahrt-in{flex-wrap:nowrap}
  .achse-kopf,.fragen-kopf{flex:0 0 clamp(340px,26vw,900px)}
  .achse,.fragen-liste{flex:1 1 0;min-width:0}
  .achse p{max-width:60ch}
  .fragen-liste details p{max-width:70ch}
  .fragen-liste summary{padding:.95em 0}
  .zeiten-kopf,.woche,.anfahrt-text{flex:1 1 0}
  .anfahrt-karte{flex:1.15 1 0;min-height:clamp(380px,24vw,600px)}

  .schluss-paar-in{flex-wrap:nowrap}
  .schluss-paar-motiv{flex:0 0 clamp(300px,22vw,760px);min-height:clamp(320px,24vw,820px)}

  /* Modale: Breite waechst mit der Schrift */
  .modal-karte{width:min(calc(var(--f)*31),100%)}
  .modal-karte.breit{width:min(calc(var(--f)*45),100%)}
}

/* ---------- 1200+: vertiefte Startseiten-Bloecke (kleim-bau 03.10.) ----------
   Feste px-Groessen aus stil.css an --f gekoppelt; KI-Test: keine neuen
   gleichfoermigen Reihen. */
@media (min-width:1200px){
  /* Chris: Lob als Definitionszeilen (Wort links, Beleg rechts) statt drei
     gleicher Spalten Titel+zwei Zeilen */
  .chris-mehr{font-size:clamp(18px,1.15vw,42px);max-width:36em}
  .lob{grid-template-columns:minmax(0,1fr);gap:0}
  .lob div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);column-gap:clamp(20px,1.6vw,64px);
    align-items:baseline;padding:clamp(12px,.9vw,32px) 0}
  .lob dt{grid-row:1 / span 2}
  .lob dd{margin-top:0}
  .lob dd.lob-mehr{font-size:calc(var(--f)*.9);margin-top:4px}

  /* Wege: Merkkasten im Kopf und die Wegtexte */
  .wege-merk{max-width:none;padding:clamp(22px,1.6vw,56px) clamp(24px,1.8vw,64px)}
  .wege-merk p{font-size:calc(var(--f)*.9)}
  .wege-tel{font-size:calc(var(--f)*1.05)}
  .wege-liste li>svg{margin-top:4px}
  .wege-liste .weg-mehr{font-size:calc(var(--f)*.9)}
  .weg-link{font-size:calc(var(--f)*.92)}

  /* Stimmen: Kennzahl gross, die drei haeufigsten Woerter als Satzzeile in
     der Displayschrift statt Balkendiagramm (Dashboard-Sprache, §3.5) */
  .note-gross b{font-size:clamp(64px,4.6vw,190px)}
  .note-gross .sterne{font-size:calc(var(--f)*1.1)}
  .note-gross small,.stichworte p{font-size:calc(var(--f)*.88)}
  .stichworte ul{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(22px,1.8vw,72px);row-gap:4px}
  .stichworte li{display:flex;align-items:baseline;gap:.4em;padding:0}
  .stichworte li::after{display:none}
  .stichworte li b{font:italic 500 calc(var(--f)*1.45)/1.2 var(--disp);color:var(--wein)}
  .stichworte li span{font-size:calc(var(--f)*.85)}

  /* Besuch: Anfahrtssatz und Ablauf nach der Anfrage */
  .anfahrt-satz{font-size:var(--f);max-width:36em}
  .danach{max-width:none;padding:clamp(20px,1.5vw,52px) clamp(22px,1.6vw,56px)}
  .danach h3{font-size:calc(var(--f)*1.12)}
  .danach li{grid-template-columns:calc(var(--f)*1.6) minmax(0,1fr);font-size:calc(var(--f)*.92)}
  .danach li::before{width:calc(var(--f)*1.5);height:calc(var(--f)*1.5);font-size:calc(var(--f)*.8)}
}

/* Kurze und flache Schirme (1280x720, 1366x768, 21:9/32:9): Vorteile als Zeile
   statt Liste, sonst rutschen die Hero-Knoepfe unter die Falte */
@media (min-width:1200px) and (max-height:820px),(min-width:1200px) and (min-aspect-ratio:2/1){
  .held-punkte{flex-direction:row;flex-wrap:wrap;column-gap:clamp(24px,2vw,64px);row-gap:8px}
  .held-in{padding-top:clamp(24px,3svh,56px)}
}
@media (min-width:1200px) and (max-height:820px){
  .held .h1{margin:8px 0 16px}
  .held-unter{margin-bottom:14px}
  .held-punkte{margin-bottom:18px}
  .erreichbar{margin-top:14px}
}

/* Extrem flach (32:9, Messung 3440x900/5120x900): die Textspalte wird so
   breit, dass neben der svh-gedeckelten H1 ein Loch bleibt (5120: 885x396).
   Buehne bekommt den groesseren Anteil, H1 darf etwas hoeher. */
@media (min-width:1200px) and (min-aspect-ratio:3/1){
  .held-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .held-text .h1{font-size:clamp(52px,min(11.3cqi,13svh),230px)}
}

/* ---------- 1440+ ---------- */
@media (min-width:1440px){
  :root{--wrapw:90vw}
}

/* ---------- 2400+: Ultrawide, vw-Anteil sinkt ---------- */
@media (min-width:2400px){
  :root{--wrapw:88vw}
  /* Chris-Text zweispaltig: Kopf und Satz links, Lob rechts, sonst steht
     neben der 34em-Spalte ein Drittel leer */
  .chris-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,3vw,140px);align-items:start}
  .chris-text>*{grid-column:1}
  .chris-text>.lob{grid-column:2;grid-row:1 / span 5;align-self:center}
}
@media (min-width:3000px){
  :root{--wrapw:min(86vw,3400px);--f:clamp(24px,calc(.4vw + 11px),30px)}
}
@media (min-width:4200px){
  :root{--wrapw:min(80vw,4200px)}
  /* Fragen: Paar neben Kopfzeile statt darunter, sonst ist der Kopf doppelt
     so hoch wie die Liste (5120: 3823x279 Loch unter der Liste) */
  .fragen-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:start}
  .fragen-kopf>*{grid-column:1}
  .fragen-kopf .fragen-paar{grid-column:2;grid-row:1 / span 2;margin-top:0;width:clamp(220px,5vw,300px)}
}