/* Tanzstunden Chris Noack, Cottbus — stil.css (Besitzer: kleim-bau)
   Grundlayout, Farben, Typografie, Bausteine. KEINE Breitenabfragen hier:
   unter 1200px gehoert alles in handy.css (kleim-mobile), ab 1200px in
   desktop.css (kleim-desktop). Die Grundregeln brechen per flex-wrap und
   auto-fit von allein um, damit nichts seitlich herausläuft.

   Palette VORLAEUFIG (Logo/Farben OFFEN, Fotosichtung unvollstaendig), je Ton
   der Messort in inhalt/auftrag.json -> markenfarben:
     Wein   #7A1F3D  Poloshirt von Chris, quellen/google-titelfoto.jpg (Arbeitskleidung)
     Minze  #7FC4B6  Kreise an der Saalwand, dasselbe Foto (nur Grafik/Schrift auf Dunkel)
     Ahorn  #EFE4D2  Parkett im Vordergrund, dasselbe Foto (Flaeche)
   Kontraste (gerechnet 03.10.2026): Wein auf Grund 9,5:1, auf Ahorn 8,0:1,
   auf Minze-hell 8,3:1 · Weiss auf Wein 10,0:1 · Minze auf Tinte 8,3:1,
   auf Wein 5,0:1 · Grau auf Ahorn 6,3:1, auf Minze-hell 6,5:1.
   Schriften: Petrona (Display, mittlerer Kontrast, keine Haarstriche) +
   Onest (Text), beide variabel und lokal. */

@font-face{font-family:'Petrona';src:url(/assets/fonts/petrona-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url(/assets/fonts/petrona-kursiv-var.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Onest';src:url(/assets/fonts/onest-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
/* Ersatzschriften mit angeglichenen Massen (fontTools, 03.10.2026): der Tausch
   Georgia/Arial -> Petrona/Onest verschiebt sonst den Seitenkopf (CLS 0,0035). */
@font-face{font-family:'Petrona Ersatz';src:local('Georgia');size-adjust:98.1%;ascent-override:87.5%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:'Onest Ersatz';src:local('Arial'),local('Helvetica');size-adjust:103.5%;ascent-override:93.7%;descent-override:29.5%;line-gap-override:0%}

:root{
  --grund:#FBF8F3;        /* Seitengrund, Ahorn stark aufgehellt */
  --weiss:#FFFFFF;
  --ahorn:#EFE4D2;        /* getoente Flaeche, Parkett */
  --ahorn-tief:#D9C4A3;   /* Linien und Schatten auf Ahorn */
  --linie:#E6DCCD;        /* Linien auf Grund und Weiss */
  --wein:#7A1F3D;         /* Handlungen, Kleid der Dame, ein Band */
  --wein-tief:#5E1630;    /* Knopf beim Ueberfahren */
  --tinte:#251B2B;        /* Schrift, dunkles Band, Fuss */
  --grau:#5A4E58;         /* Nebentext */
  --hellgrau:#CFC3CC;     /* Nebentext auf Tinte (9,7:1) */
  --minze:#7FC4B6;        /* nur Grafik und Schrift auf Tinte/Wein */
  --minze-hell:#D7EEE9;   /* kleine Flaeche: Stimmen */
  --haut:#E9D3BF;         /* Tanzpaar: Kopf und Haende */
  --disp:'Petrona','Petrona Ersatz',Georgia,'Times New Roman',serif;
  --sans:'Onest','Onest Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrapw:1180px;
  --sp:clamp(20px,5vw,56px);
  --kopfh:77px;           /* gebaut: min-height 76px + 1px Unterkante */
  --abstand:clamp(64px,8vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfh) + 16px)}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.starr{overflow:hidden}
img,svg,picture{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
address{font-style:normal}
:focus-visible{outline:3px solid var(--wein);outline-offset:3px}
.m-only.m-only{display:none}

.sr{position:absolute;left:12px;top:-60px;z-index:200;background:var(--tinte);color:var(--grund);
  padding:10px 16px;border-radius:5px;text-decoration:none}
.sr:focus{top:12px}

.wrap{width:min(var(--wrapw),100% - 2*var(--sp));margin-inline:auto}

/* ---------------- Schrift ---------------- */
.h1{font:600 clamp(40px,5.4vw,76px)/1.06 var(--disp);letter-spacing:-.012em;margin:14px 0 22px}
.h2{font:600 clamp(30px,3.5vw,50px)/1.1 var(--disp);letter-spacing:-.008em;margin:0 0 18px}
.h1 em,.h2 em,.satz em{font-style:italic;font-weight:500;color:var(--wein)}
h3{font:600 clamp(22px,1.9vw,27px)/1.2 var(--disp);margin:0 0 8px}
.kicker{display:flex;align-items:center;gap:12px;font:600 15px/1.3 var(--sans);color:var(--wein);margin:0 0 6px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.kicker.hell{color:var(--minze)}

/* ---------------- Knöpfe ---------------- */
.knopf{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-height:50px;
  padding:13px 22px;border-radius:6px;border:1.5px solid transparent;font:600 16px/1.2 var(--sans);
  text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;text-align:left}
.knopf-wein{background:var(--wein);color:var(--weiss)}
.knopf-wein:hover{background:var(--wein-tief)}
.knopf-rand{background:transparent;border-color:var(--tinte);color:var(--tinte)}
.knopf-rand:hover{background:var(--tinte);color:var(--grund)}
.knopf-hell{background:var(--grund);color:var(--wein)}
.knopf-hell:hover{background:var(--weiss)}
.knopf-rand-hell{background:transparent;border-color:var(--grund);color:var(--grund)}
.knopf-rand-hell:hover{background:var(--grund);color:var(--wein)}
.held-akt{display:flex;flex-wrap:wrap;gap:12px}
.pfeil{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font:600 17px/1.3 var(--sans);
  color:var(--wein);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.pfeil::after{content:"\2192";transition:transform .25s}
.pfeil:hover::after{transform:translateX(4px)}
.pfeil.hell{color:var(--minze)}

/* ---------------- Kopfleiste ---------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;min-height:76px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.signet{width:40px;height:40px;flex:none}  /* Farben ueber --signet-farbe/--signet-grund (signet.svg, kleim-bilder) */
.marke-name{display:flex;flex-direction:column;line-height:1.1}
.marke-name b{font:600 23px/1.05 var(--disp)}
.marke-name small{font:500 13px/1.3 var(--sans);color:var(--grau);margin-top:3px}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;margin-left:auto}
.nav a{font:500 16px/1.3 var(--sans);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ahorn-tief)}
.nav a.hier{border-bottom-color:var(--wein)}
.kopf-akt{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kopf-tel{font:600 16px/1.3 var(--sans);text-decoration:none;margin-right:6px}
.kopf-akt .knopf{min-height:44px;padding:10px 18px}

/* ---------------- Held ---------------- */
.held{display:flex;flex-direction:column;min-height:calc(100svh - var(--kopfh));background:var(--grund)}
.held-in{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(24px,4vw,64px);
  padding-block:clamp(28px,4vw,56px) 0}
.held-text{flex:1 1 440px;display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(28px,4vw,56px)}
.held-unter{font-size:clamp(18px,1.35vw,20px);max-width:36em;color:var(--grau);margin-bottom:22px}
.held-punkte{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.held-punkte li{display:flex;align-items:center;gap:12px;font-weight:500}
.held-punkte svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--wein);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sterne{color:var(--wein);letter-spacing:2px;font-size:15px;line-height:1}
.held-google .sterne{width:auto;min-width:24px}
.erreichbar{display:flex;align-items:center;gap:10px;margin-top:22px;font:500 15px/1.4 var(--sans);color:var(--grau)}
.note{width:18px;height:22px;flex:none;fill:none;stroke:var(--wein);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 90%}
.note ellipse{fill:var(--wein);stroke:none}
.ist-da .note{animation:note-wiegen 2.6s ease-in-out infinite}
@keyframes note-wiegen{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) translateY(-1px)}}

/* Bühne: Parkett-Ellipse und das gezeichnete Tanzpaar (inline, kleim-bilder) */
.held-buehne{flex:1 1 360px;position:relative;min-height:clamp(380px,46vw,660px);align-self:stretch}
.held-buehne svg.tanzpaar{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ---------------- Tanzpaar-Animation (Kundenwunsch) ----------------
   Gruppen-IDs und Drehpunkte (data-pivot) liefert kleim-bilder; seite.js setzt
   daraus transform-origin. Jede Phase nutzt dieselbe Funktionsliste, damit
   scaleX sauber von 1 ueber 0 nach -1 laeuft (Drehung des Paares) statt per
   Matrix zu kippen. */
svg.tanzpaar [id^="tp-"],svg.paar-klein [id^="tp-"],svg.fragen-paar [id^="tp-"]{transform-box:view-box}
/* TANZPAAR-ANIMATION ANFANG */
/* Tanzpaar (Tim 06.10.2026): leichter gemeinsamer Tanz, keine Drehung, keine
   Spiegelung. Zyklus 7s: Gewichtswechsel links/rechts, zweimal Heben und Senken,
   die Dame folgt leicht verzoegert, die erhobenen Haende bleiben verbunden und
   ziehen einen kleinen Bogen, Rock schwingt nach. Keyframes erzeugt mit
   werkzeug/anim.py (python3 werkzeug/anim.py), nie von Hand aendern. */
svg.tanzpaar #tp-paar{animation:tp-paar 7s infinite}
svg.tanzpaar #tp-herr{animation:tp-herr 7s infinite}
svg.tanzpaar #tp-herr-arm{animation:tp-herr-arm 7s infinite}
svg.tanzpaar #tp-dame{animation:tp-dame 7s infinite}
svg.tanzpaar #tp-dame-arm{animation:tp-dame-arm 7s infinite}
svg.tanzpaar #tp-dame-rock{animation:tp-rock 7s infinite}
svg.tanzpaar #tp-schritt-herr{animation:tp-schritt-herr 7s infinite}
svg.tanzpaar #tp-schritt-dame{animation:tp-schritt-dame 7s infinite}
svg.tanzpaar #tp-boden{animation:tp-boden 7s infinite}
@keyframes tp-paar{
  0%{transform:rotate(0deg);animation-timing-function:linear}
  2.5%{transform:rotate(0.219deg);animation-timing-function:linear}
  5%{transform:rotate(0.433deg);animation-timing-function:linear}
  7.5%{transform:rotate(0.636deg);animation-timing-function:linear}
  10%{transform:rotate(0.823deg);animation-timing-function:linear}
  12.5%{transform:rotate(0.99deg);animation-timing-function:linear}
  15%{transform:rotate(1.133deg);animation-timing-function:linear}
  17.5%{transform:rotate(1.247deg);animation-timing-function:linear}
  20%{transform:rotate(1.331deg);animation-timing-function:linear}
  22.5%{transform:rotate(1.383deg);animation-timing-function:linear}
  25%{transform:rotate(1.4deg);animation-timing-function:linear}
  27.5%{transform:rotate(1.383deg);animation-timing-function:linear}
  30%{transform:rotate(1.331deg);animation-timing-function:linear}
  32.5%{transform:rotate(1.247deg);animation-timing-function:linear}
  35%{transform:rotate(1.133deg);animation-timing-function:linear}
  37.5%{transform:rotate(0.99deg);animation-timing-function:linear}
  40%{transform:rotate(0.823deg);animation-timing-function:linear}
  42.5%{transform:rotate(0.636deg);animation-timing-function:linear}
  45%{transform:rotate(0.433deg);animation-timing-function:linear}
  47.5%{transform:rotate(0.219deg);animation-timing-function:linear}
  50%{transform:rotate(0deg);animation-timing-function:linear}
  52.5%{transform:rotate(-0.219deg);animation-timing-function:linear}
  55%{transform:rotate(-0.433deg);animation-timing-function:linear}
  57.5%{transform:rotate(-0.636deg);animation-timing-function:linear}
  60%{transform:rotate(-0.823deg);animation-timing-function:linear}
  62.5%{transform:rotate(-0.99deg);animation-timing-function:linear}
  65%{transform:rotate(-1.133deg);animation-timing-function:linear}
  67.5%{transform:rotate(-1.247deg);animation-timing-function:linear}
  70%{transform:rotate(-1.331deg);animation-timing-function:linear}
  72.5%{transform:rotate(-1.383deg);animation-timing-function:linear}
  75%{transform:rotate(-1.4deg);animation-timing-function:linear}
  77.5%{transform:rotate(-1.383deg);animation-timing-function:linear}
  80%{transform:rotate(-1.331deg);animation-timing-function:linear}
  82.5%{transform:rotate(-1.247deg);animation-timing-function:linear}
  85%{transform:rotate(-1.133deg);animation-timing-function:linear}
  87.5%{transform:rotate(-0.99deg);animation-timing-function:linear}
  90%{transform:rotate(-0.823deg);animation-timing-function:linear}
  92.5%{transform:rotate(-0.636deg);animation-timing-function:linear}
  95%{transform:rotate(-0.433deg);animation-timing-function:linear}
  97.5%{transform:rotate(-0.219deg);animation-timing-function:linear}
  100%{transform:rotate(0deg);animation-timing-function:linear}
}
@keyframes tp-herr{
  0%{transform:translateY(0px) rotate(0deg);animation-timing-function:linear}
  2.5%{transform:translateY(-0.054px) rotate(0.11deg);animation-timing-function:linear}
  5%{transform:translateY(-0.21px) rotate(0.216deg);animation-timing-function:linear}
  7.5%{transform:translateY(-0.453px) rotate(0.318deg);animation-timing-function:linear}
  10%{transform:translateY(-0.76px) rotate(0.411deg);animation-timing-function:linear}
  12.5%{transform:translateY(-1.1px) rotate(0.495deg);animation-timing-function:linear}
  15%{transform:translateY(-1.44px) rotate(0.566deg);animation-timing-function:linear}
  17.5%{transform:translateY(-1.747px) rotate(0.624deg);animation-timing-function:linear}
  20%{transform:translateY(-1.99px) rotate(0.666deg);animation-timing-function:linear}
  22.5%{transform:translateY(-2.146px) rotate(0.691deg);animation-timing-function:linear}
  25%{transform:translateY(-2.2px) rotate(0.7deg);animation-timing-function:linear}
  27.5%{transform:translateY(-2.146px) rotate(0.691deg);animation-timing-function:linear}
  30%{transform:translateY(-1.99px) rotate(0.666deg);animation-timing-function:linear}
  32.5%{transform:translateY(-1.747px) rotate(0.624deg);animation-timing-function:linear}
  35%{transform:translateY(-1.44px) rotate(0.566deg);animation-timing-function:linear}
  37.5%{transform:translateY(-1.1px) rotate(0.495deg);animation-timing-function:linear}
  40%{transform:translateY(-0.76px) rotate(0.411deg);animation-timing-function:linear}
  42.5%{transform:translateY(-0.453px) rotate(0.318deg);animation-timing-function:linear}
  45%{transform:translateY(-0.21px) rotate(0.216deg);animation-timing-function:linear}
  47.5%{transform:translateY(-0.054px) rotate(0.11deg);animation-timing-function:linear}
  50%{transform:translateY(0px) rotate(0deg);animation-timing-function:linear}
  52.5%{transform:translateY(-0.054px) rotate(-0.11deg);animation-timing-function:linear}
  55%{transform:translateY(-0.21px) rotate(-0.216deg);animation-timing-function:linear}
  57.5%{transform:translateY(-0.453px) rotate(-0.318deg);animation-timing-function:linear}
  60%{transform:translateY(-0.76px) rotate(-0.411deg);animation-timing-function:linear}
  62.5%{transform:translateY(-1.1px) rotate(-0.495deg);animation-timing-function:linear}
  65%{transform:translateY(-1.44px) rotate(-0.566deg);animation-timing-function:linear}
  67.5%{transform:translateY(-1.747px) rotate(-0.624deg);animation-timing-function:linear}
  70%{transform:translateY(-1.99px) rotate(-0.666deg);animation-timing-function:linear}
  72.5%{transform:translateY(-2.146px) rotate(-0.691deg);animation-timing-function:linear}
  75%{transform:translateY(-2.2px) rotate(-0.7deg);animation-timing-function:linear}
  77.5%{transform:translateY(-2.146px) rotate(-0.691deg);animation-timing-function:linear}
  80%{transform:translateY(-1.99px) rotate(-0.666deg);animation-timing-function:linear}
  82.5%{transform:translateY(-1.747px) rotate(-0.624deg);animation-timing-function:linear}
  85%{transform:translateY(-1.44px) rotate(-0.566deg);animation-timing-function:linear}
  87.5%{transform:translateY(-1.1px) rotate(-0.495deg);animation-timing-function:linear}
  90%{transform:translateY(-0.76px) rotate(-0.411deg);animation-timing-function:linear}
  92.5%{transform:translateY(-0.453px) rotate(-0.318deg);animation-timing-function:linear}
  95%{transform:translateY(-0.21px) rotate(-0.216deg);animation-timing-function:linear}
  97.5%{transform:translateY(-0.054px) rotate(-0.11deg);animation-timing-function:linear}
  100%{transform:translateY(0px) rotate(0deg);animation-timing-function:linear}
}
@keyframes tp-herr-arm{
  0%{transform:rotate(-0.59deg);animation-timing-function:linear}
  2.5%{transform:rotate(-0.482deg);animation-timing-function:linear}
  5%{transform:rotate(-0.383deg);animation-timing-function:linear}
  7.5%{transform:rotate(-0.309deg);animation-timing-function:linear}
  10%{transform:rotate(-0.274deg);animation-timing-function:linear}
  12.5%{transform:rotate(-0.285deg);animation-timing-function:linear}
  15%{transform:rotate(-0.344deg);animation-timing-function:linear}
  17.5%{transform:rotate(-0.446deg);animation-timing-function:linear}
  20%{transform:rotate(-0.581deg);animation-timing-function:linear}
  22.5%{transform:rotate(-0.734deg);animation-timing-function:linear}
  25%{transform:rotate(-0.887deg);animation-timing-function:linear}
  27.5%{transform:rotate(-1.023deg);animation-timing-function:linear}
  30%{transform:rotate(-1.122deg);animation-timing-function:linear}
  32.5%{transform:rotate(-1.17deg);animation-timing-function:linear}
  35%{transform:rotate(-1.154deg);animation-timing-function:linear}
  37.5%{transform:rotate(-1.068deg);animation-timing-function:linear}
  40%{transform:rotate(-0.913deg);animation-timing-function:linear}
  42.5%{transform:rotate(-0.694deg);animation-timing-function:linear}
  45%{transform:rotate(-0.424deg);animation-timing-function:linear}
  47.5%{transform:rotate(-0.119deg);animation-timing-function:linear}
  50%{transform:rotate(0.201deg);animation-timing-function:linear}
  52.5%{transform:rotate(0.512deg);animation-timing-function:linear}
  55%{transform:rotate(0.793deg);animation-timing-function:linear}
  57.5%{transform:rotate(1.022deg);animation-timing-function:linear}
  60%{transform:rotate(1.183deg);animation-timing-function:linear}
  62.5%{transform:rotate(1.265deg);animation-timing-function:linear}
  65%{transform:rotate(1.262deg);animation-timing-function:linear}
  67.5%{transform:rotate(1.175deg);animation-timing-function:linear}
  70%{transform:rotate(1.014deg);animation-timing-function:linear}
  72.5%{transform:rotate(0.792deg);animation-timing-function:linear}
  75%{transform:rotate(0.528deg);animation-timing-function:linear}
  77.5%{transform:rotate(0.245deg);animation-timing-function:linear}
  80%{transform:rotate(-0.035deg);animation-timing-function:linear}
  82.5%{transform:rotate(-0.291deg);animation-timing-function:linear}
  85%{transform:rotate(-0.503deg);animation-timing-function:linear}
  87.5%{transform:rotate(-0.66deg);animation-timing-function:linear}
  90%{transform:rotate(-0.753deg);animation-timing-function:linear}
  92.5%{transform:rotate(-0.784deg);animation-timing-function:linear}
  95%{transform:rotate(-0.758deg);animation-timing-function:linear}
  97.5%{transform:rotate(-0.688deg);animation-timing-function:linear}
  100%{transform:rotate(-0.59deg);animation-timing-function:linear}
}
@keyframes tp-dame{
  0%{transform:translateY(-0.202px) rotate(-0.251deg);animation-timing-function:linear}
  2.5%{transform:translateY(-0.041px) rotate(-0.113deg);animation-timing-function:linear}
  5%{transform:translateY(-0.003px) rotate(0.028deg);animation-timing-function:linear}
  7.5%{transform:translateY(-0.091px) rotate(0.169deg);animation-timing-function:linear}
  10%{transform:translateY(-0.298px) rotate(0.305deg);animation-timing-function:linear}
  12.5%{transform:translateY(-0.603px) rotate(0.434deg);animation-timing-function:linear}
  15%{transform:translateY(-0.977px) rotate(0.552deg);animation-timing-function:linear}
  17.5%{transform:translateY(-1.382px) rotate(0.656deg);animation-timing-function:linear}
  20%{transform:translateY(-1.779px) rotate(0.744deg);animation-timing-function:linear}
  22.5%{transform:translateY(-2.129px) rotate(0.814deg);animation-timing-function:linear}
  25%{transform:translateY(-2.398px) rotate(0.864deg);animation-timing-function:linear}
  27.5%{transform:translateY(-2.559px) rotate(0.893deg);animation-timing-function:linear}
  30%{transform:translateY(-2.597px) rotate(0.9deg);animation-timing-function:linear}
  32.5%{transform:translateY(-2.509px) rotate(0.884deg);animation-timing-function:linear}
  35%{transform:translateY(-2.302px) rotate(0.847deg);animation-timing-function:linear}
  37.5%{transform:translateY(-1.997px) rotate(0.789deg);animation-timing-function:linear}
  40%{transform:translateY(-1.623px) rotate(0.711deg);animation-timing-function:linear}
  42.5%{transform:translateY(-1.218px) rotate(0.616deg);animation-timing-function:linear}
  45%{transform:translateY(-0.821px) rotate(0.506deg);animation-timing-function:linear}
  47.5%{transform:translateY(-0.471px) rotate(0.383deg);animation-timing-function:linear}
  50%{transform:translateY(-0.202px) rotate(0.251deg);animation-timing-function:linear}
  52.5%{transform:translateY(-0.041px) rotate(0.113deg);animation-timing-function:linear}
  55%{transform:translateY(-0.003px) rotate(-0.028deg);animation-timing-function:linear}
  57.5%{transform:translateY(-0.091px) rotate(-0.169deg);animation-timing-function:linear}
  60%{transform:translateY(-0.298px) rotate(-0.305deg);animation-timing-function:linear}
  62.5%{transform:translateY(-0.603px) rotate(-0.434deg);animation-timing-function:linear}
  65%{transform:translateY(-0.977px) rotate(-0.552deg);animation-timing-function:linear}
  67.5%{transform:translateY(-1.382px) rotate(-0.656deg);animation-timing-function:linear}
  70%{transform:translateY(-1.779px) rotate(-0.744deg);animation-timing-function:linear}
  72.5%{transform:translateY(-2.129px) rotate(-0.814deg);animation-timing-function:linear}
  75%{transform:translateY(-2.398px) rotate(-0.864deg);animation-timing-function:linear}
  77.5%{transform:translateY(-2.559px) rotate(-0.893deg);animation-timing-function:linear}
  80%{transform:translateY(-2.597px) rotate(-0.9deg);animation-timing-function:linear}
  82.5%{transform:translateY(-2.509px) rotate(-0.884deg);animation-timing-function:linear}
  85%{transform:translateY(-2.302px) rotate(-0.847deg);animation-timing-function:linear}
  87.5%{transform:translateY(-1.997px) rotate(-0.789deg);animation-timing-function:linear}
  90%{transform:translateY(-1.623px) rotate(-0.711deg);animation-timing-function:linear}
  92.5%{transform:translateY(-1.218px) rotate(-0.616deg);animation-timing-function:linear}
  95%{transform:translateY(-0.821px) rotate(-0.506deg);animation-timing-function:linear}
  97.5%{transform:translateY(-0.471px) rotate(-0.383deg);animation-timing-function:linear}
  100%{transform:translateY(-0.202px) rotate(-0.251deg);animation-timing-function:linear}
}
@keyframes tp-dame-arm{
  0%{transform:rotate(0.673deg);animation-timing-function:linear}
  2.5%{transform:rotate(0.624deg);animation-timing-function:linear}
  5%{transform:rotate(0.541deg);animation-timing-function:linear}
  7.5%{transform:rotate(0.416deg);animation-timing-function:linear}
  10%{transform:rotate(0.242deg);animation-timing-function:linear}
  12.5%{transform:rotate(0.019deg);animation-timing-function:linear}
  15%{transform:rotate(-0.251deg);animation-timing-function:linear}
  17.5%{transform:rotate(-0.557deg);animation-timing-function:linear}
  20%{transform:rotate(-0.887deg);animation-timing-function:linear}
  22.5%{transform:rotate(-1.222deg);animation-timing-function:linear}
  25%{transform:rotate(-1.544deg);animation-timing-function:linear}
  27.5%{transform:rotate(-1.831deg);animation-timing-function:linear}
  30%{transform:rotate(-2.063deg);animation-timing-function:linear}
  32.5%{transform:rotate(-2.225deg);animation-timing-function:linear}
  35%{transform:rotate(-2.303deg);animation-timing-function:linear}
  37.5%{transform:rotate(-2.289deg);animation-timing-function:linear}
  40%{transform:rotate(-2.182deg);animation-timing-function:linear}
  42.5%{transform:rotate(-1.987deg);animation-timing-function:linear}
  45%{transform:rotate(-1.714deg);animation-timing-function:linear}
  47.5%{transform:rotate(-1.379deg);animation-timing-function:linear}
  50%{transform:rotate(-1deg);animation-timing-function:linear}
  52.5%{transform:rotate(-0.601deg);animation-timing-function:linear}
  55%{transform:rotate(-0.202deg);animation-timing-function:linear}
  57.5%{transform:rotate(0.175deg);animation-timing-function:linear}
  60%{transform:rotate(0.511deg);animation-timing-function:linear}
  62.5%{transform:rotate(0.794deg);animation-timing-function:linear}
  65%{transform:rotate(1.012deg);animation-timing-function:linear}
  67.5%{transform:rotate(1.162deg);animation-timing-function:linear}
  70%{transform:rotate(1.245deg);animation-timing-function:linear}
  72.5%{transform:rotate(1.268deg);animation-timing-function:linear}
  75%{transform:rotate(1.24deg);animation-timing-function:linear}
  77.5%{transform:rotate(1.176deg);animation-timing-function:linear}
  80%{transform:rotate(1.091deg);animation-timing-function:linear}
  82.5%{transform:rotate(0.998deg);animation-timing-function:linear}
  85%{transform:rotate(0.91deg);animation-timing-function:linear}
  87.5%{transform:rotate(0.837deg);animation-timing-function:linear}
  90%{transform:rotate(0.782deg);animation-timing-function:linear}
  92.5%{transform:rotate(0.745deg);animation-timing-function:linear}
  95%{transform:rotate(0.722deg);animation-timing-function:linear}
  97.5%{transform:rotate(0.702deg);animation-timing-function:linear}
  100%{transform:rotate(0.673deg);animation-timing-function:linear}
}
@keyframes tp-rock{
  0%{transform:rotate(2.116deg) skewX(-1.896deg);animation-timing-function:linear}
  2.5%{transform:rotate(1.715deg) skewX(-1.643deg);animation-timing-function:linear}
  5%{transform:rotate(1.271deg) skewX(-1.349deg);animation-timing-function:linear}
  7.5%{transform:rotate(0.796deg) skewX(-1.022deg);animation-timing-function:linear}
  10%{transform:rotate(0.301deg) skewX(-0.67deg);animation-timing-function:linear}
  12.5%{transform:rotate(-0.201deg) skewX(-0.301deg);animation-timing-function:linear}
  15%{transform:rotate(-0.698deg) skewX(0.075deg);animation-timing-function:linear}
  17.5%{transform:rotate(-1.178deg) skewX(0.45deg);animation-timing-function:linear}
  20%{transform:rotate(-1.629deg) skewX(0.813deg);animation-timing-function:linear}
  22.5%{transform:rotate(-2.04deg) skewX(1.156deg);animation-timing-function:linear}
  25%{transform:rotate(-2.4deg) skewX(1.471deg);animation-timing-function:linear}
  27.5%{transform:rotate(-2.702deg) skewX(1.75deg);animation-timing-function:linear}
  30%{transform:rotate(-2.937deg) skewX(1.985deg);animation-timing-function:linear}
  32.5%{transform:rotate(-3.099deg) skewX(2.172deg);animation-timing-function:linear}
  35%{transform:rotate(-3.186deg) skewX(2.305deg);animation-timing-function:linear}
  37.5%{transform:rotate(-3.194deg) skewX(2.381deg);animation-timing-function:linear}
  40%{transform:rotate(-3.123deg) skewX(2.399deg);animation-timing-function:linear}
  42.5%{transform:rotate(-2.975deg) skewX(2.357deg);animation-timing-function:linear}
  45%{transform:rotate(-2.754deg) skewX(2.258deg);animation-timing-function:linear}
  47.5%{transform:rotate(-2.466deg) skewX(2.103deg);animation-timing-function:linear}
  50%{transform:rotate(-2.116deg) skewX(1.896deg);animation-timing-function:linear}
  52.5%{transform:rotate(-1.715deg) skewX(1.643deg);animation-timing-function:linear}
  55%{transform:rotate(-1.271deg) skewX(1.349deg);animation-timing-function:linear}
  57.5%{transform:rotate(-0.796deg) skewX(1.022deg);animation-timing-function:linear}
  60%{transform:rotate(-0.301deg) skewX(0.67deg);animation-timing-function:linear}
  62.5%{transform:rotate(0.201deg) skewX(0.301deg);animation-timing-function:linear}
  65%{transform:rotate(0.698deg) skewX(-0.075deg);animation-timing-function:linear}
  67.5%{transform:rotate(1.178deg) skewX(-0.45deg);animation-timing-function:linear}
  70%{transform:rotate(1.629deg) skewX(-0.813deg);animation-timing-function:linear}
  72.5%{transform:rotate(2.04deg) skewX(-1.156deg);animation-timing-function:linear}
  75%{transform:rotate(2.4deg) skewX(-1.471deg);animation-timing-function:linear}
  77.5%{transform:rotate(2.702deg) skewX(-1.75deg);animation-timing-function:linear}
  80%{transform:rotate(2.937deg) skewX(-1.985deg);animation-timing-function:linear}
  82.5%{transform:rotate(3.099deg) skewX(-2.172deg);animation-timing-function:linear}
  85%{transform:rotate(3.186deg) skewX(-2.305deg);animation-timing-function:linear}
  87.5%{transform:rotate(3.194deg) skewX(-2.381deg);animation-timing-function:linear}
  90%{transform:rotate(3.123deg) skewX(-2.399deg);animation-timing-function:linear}
  92.5%{transform:rotate(2.975deg) skewX(-2.357deg);animation-timing-function:linear}
  95%{transform:rotate(2.754deg) skewX(-2.258deg);animation-timing-function:linear}
  97.5%{transform:rotate(2.466deg) skewX(-2.103deg);animation-timing-function:linear}
  100%{transform:rotate(2.116deg) skewX(-1.896deg);animation-timing-function:linear}
}
@keyframes tp-schritt-herr{
  0%{transform:rotate(-0.439deg);animation-timing-function:linear}
  2.5%{transform:rotate(0.11deg);animation-timing-function:linear}
  5%{transform:rotate(0.656deg);animation-timing-function:linear}
  7.5%{transform:rotate(1.186deg);animation-timing-function:linear}
  10%{transform:rotate(1.686deg);animation-timing-function:linear}
  12.5%{transform:rotate(2.145deg);animation-timing-function:linear}
  15%{transform:rotate(2.551deg);animation-timing-function:linear}
  17.5%{transform:rotate(2.895deg);animation-timing-function:linear}
  20%{transform:rotate(3.167deg);animation-timing-function:linear}
  22.5%{transform:rotate(3.361deg);animation-timing-function:linear}
  25%{transform:rotate(3.472deg);animation-timing-function:linear}
  27.5%{transform:rotate(3.498deg);animation-timing-function:linear}
  30%{transform:rotate(3.438deg);animation-timing-function:linear}
  32.5%{transform:rotate(3.293deg);animation-timing-function:linear}
  35%{transform:rotate(3.067deg);animation-timing-function:linear}
  37.5%{transform:rotate(2.766deg);animation-timing-function:linear}
  40%{transform:rotate(2.396deg);animation-timing-function:linear}
  42.5%{transform:rotate(1.967deg);animation-timing-function:linear}
  45%{transform:rotate(1.49deg);animation-timing-function:linear}
  47.5%{transform:rotate(0.976deg);animation-timing-function:linear}
  50%{transform:rotate(0.439deg);animation-timing-function:linear}
  52.5%{transform:rotate(-0.11deg);animation-timing-function:linear}
  55%{transform:rotate(-0.656deg);animation-timing-function:linear}
  57.5%{transform:rotate(-1.186deg);animation-timing-function:linear}
  60%{transform:rotate(-1.686deg);animation-timing-function:linear}
  62.5%{transform:rotate(-2.145deg);animation-timing-function:linear}
  65%{transform:rotate(-2.551deg);animation-timing-function:linear}
  67.5%{transform:rotate(-2.895deg);animation-timing-function:linear}
  70%{transform:rotate(-3.167deg);animation-timing-function:linear}
  72.5%{transform:rotate(-3.361deg);animation-timing-function:linear}
  75%{transform:rotate(-3.472deg);animation-timing-function:linear}
  77.5%{transform:rotate(-3.498deg);animation-timing-function:linear}
  80%{transform:rotate(-3.438deg);animation-timing-function:linear}
  82.5%{transform:rotate(-3.293deg);animation-timing-function:linear}
  85%{transform:rotate(-3.067deg);animation-timing-function:linear}
  87.5%{transform:rotate(-2.766deg);animation-timing-function:linear}
  90%{transform:rotate(-2.396deg);animation-timing-function:linear}
  92.5%{transform:rotate(-1.967deg);animation-timing-function:linear}
  95%{transform:rotate(-1.49deg);animation-timing-function:linear}
  97.5%{transform:rotate(-0.976deg);animation-timing-function:linear}
  100%{transform:rotate(-0.439deg);animation-timing-function:linear}
}
@keyframes tp-schritt-dame{
  0%{transform:rotate(1.39deg);animation-timing-function:linear}
  2.5%{transform:rotate(0.87deg);animation-timing-function:linear}
  5%{transform:rotate(0.329deg);animation-timing-function:linear}
  7.5%{transform:rotate(-0.22deg);animation-timing-function:linear}
  10%{transform:rotate(-0.764deg);animation-timing-function:linear}
  12.5%{transform:rotate(-1.288deg);animation-timing-function:linear}
  15%{transform:rotate(-1.782deg);animation-timing-function:linear}
  17.5%{transform:rotate(-2.231deg);animation-timing-function:linear}
  20%{transform:rotate(-2.625deg);animation-timing-function:linear}
  22.5%{transform:rotate(-2.955deg);animation-timing-function:linear}
  25%{transform:rotate(-3.212deg);animation-timing-function:linear}
  27.5%{transform:rotate(-3.39deg);animation-timing-function:linear}
  30%{transform:rotate(-3.484deg);animation-timing-function:linear}
  32.5%{transform:rotate(-3.493deg);animation-timing-function:linear}
  35%{transform:rotate(-3.416deg);animation-timing-function:linear}
  37.5%{transform:rotate(-3.254deg);animation-timing-function:linear}
  40%{transform:rotate(-3.013deg);animation-timing-function:linear}
  42.5%{transform:rotate(-2.697deg);animation-timing-function:linear}
  45%{transform:rotate(-2.315deg);animation-timing-function:linear}
  47.5%{transform:rotate(-1.875deg);animation-timing-function:linear}
  50%{transform:rotate(-1.39deg);animation-timing-function:linear}
  52.5%{transform:rotate(-0.87deg);animation-timing-function:linear}
  55%{transform:rotate(-0.329deg);animation-timing-function:linear}
  57.5%{transform:rotate(0.22deg);animation-timing-function:linear}
  60%{transform:rotate(0.764deg);animation-timing-function:linear}
  62.5%{transform:rotate(1.288deg);animation-timing-function:linear}
  65%{transform:rotate(1.782deg);animation-timing-function:linear}
  67.5%{transform:rotate(2.231deg);animation-timing-function:linear}
  70%{transform:rotate(2.625deg);animation-timing-function:linear}
  72.5%{transform:rotate(2.955deg);animation-timing-function:linear}
  75%{transform:rotate(3.212deg);animation-timing-function:linear}
  77.5%{transform:rotate(3.39deg);animation-timing-function:linear}
  80%{transform:rotate(3.484deg);animation-timing-function:linear}
  82.5%{transform:rotate(3.493deg);animation-timing-function:linear}
  85%{transform:rotate(3.416deg);animation-timing-function:linear}
  87.5%{transform:rotate(3.254deg);animation-timing-function:linear}
  90%{transform:rotate(3.013deg);animation-timing-function:linear}
  92.5%{transform:rotate(2.697deg);animation-timing-function:linear}
  95%{transform:rotate(2.315deg);animation-timing-function:linear}
  97.5%{transform:rotate(1.875deg);animation-timing-function:linear}
  100%{transform:rotate(1.39deg);animation-timing-function:linear}
}
@keyframes tp-boden{
  0%{transform:scaleX(1);animation-timing-function:linear}
  2.5%{transform:scaleX(1.004);animation-timing-function:linear}
  5%{transform:scaleX(1.008);animation-timing-function:linear}
  7.5%{transform:scaleX(1.011);animation-timing-function:linear}
  10%{transform:scaleX(1.015);animation-timing-function:linear}
  12.5%{transform:scaleX(1.018);animation-timing-function:linear}
  15%{transform:scaleX(1.02);animation-timing-function:linear}
  17.5%{transform:scaleX(1.022);animation-timing-function:linear}
  20%{transform:scaleX(1.024);animation-timing-function:linear}
  22.5%{transform:scaleX(1.025);animation-timing-function:linear}
  25%{transform:scaleX(1.025);animation-timing-function:linear}
  27.5%{transform:scaleX(1.025);animation-timing-function:linear}
  30%{transform:scaleX(1.024);animation-timing-function:linear}
  32.5%{transform:scaleX(1.022);animation-timing-function:linear}
  35%{transform:scaleX(1.02);animation-timing-function:linear}
  37.5%{transform:scaleX(1.018);animation-timing-function:linear}
  40%{transform:scaleX(1.015);animation-timing-function:linear}
  42.5%{transform:scaleX(1.011);animation-timing-function:linear}
  45%{transform:scaleX(1.008);animation-timing-function:linear}
  47.5%{transform:scaleX(1.004);animation-timing-function:linear}
  50%{transform:scaleX(1);animation-timing-function:linear}
  52.5%{transform:scaleX(0.996);animation-timing-function:linear}
  55%{transform:scaleX(0.992);animation-timing-function:linear}
  57.5%{transform:scaleX(0.989);animation-timing-function:linear}
  60%{transform:scaleX(0.985);animation-timing-function:linear}
  62.5%{transform:scaleX(0.982);animation-timing-function:linear}
  65%{transform:scaleX(0.98);animation-timing-function:linear}
  67.5%{transform:scaleX(0.978);animation-timing-function:linear}
  70%{transform:scaleX(0.976);animation-timing-function:linear}
  72.5%{transform:scaleX(0.975);animation-timing-function:linear}
  75%{transform:scaleX(0.975);animation-timing-function:linear}
  77.5%{transform:scaleX(0.975);animation-timing-function:linear}
  80%{transform:scaleX(0.976);animation-timing-function:linear}
  82.5%{transform:scaleX(0.978);animation-timing-function:linear}
  85%{transform:scaleX(0.98);animation-timing-function:linear}
  87.5%{transform:scaleX(0.982);animation-timing-function:linear}
  90%{transform:scaleX(0.985);animation-timing-function:linear}
  92.5%{transform:scaleX(0.989);animation-timing-function:linear}
  95%{transform:scaleX(0.992);animation-timing-function:linear}
  97.5%{transform:scaleX(0.996);animation-timing-function:linear}
  100%{transform:scaleX(1);animation-timing-function:linear}
}
/* TANZPAAR-ANIMATION ENDE */
svg.tanzpaar #tp-bogen path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) .9s}
html.on svg.tanzpaar #tp-bogen path{stroke-dashoffset:0}
/* tanzpaar-klein.svg hat keine Gruppen-IDs: das ganze Paar wiegt sich um die Fuesse */
svg.paar-klein>g,svg.fragen-paar>g{transform-box:view-box;transform-origin:216px 480px;animation:tp-wiegen 5s ease-in-out infinite alternate}
svg.ruht>g{animation-play-state:paused}
svg.ruht [id^="tp-"]{animation-play-state:paused}

@keyframes tp-wiegen{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* ---------------- Flächen ---------------- */
section{position:relative}
.flaeche-wein{background:var(--wein);color:var(--weiss)}
.flaeche-ahorn{background:var(--ahorn)}
.flaeche-tinte{background:var(--tinte);color:var(--grund)}
.flaeche-minze{background:var(--minze-hell)}
.flaeche-wein .h2 em,.flaeche-wein .satz em,.flaeche-tinte .h2 em{color:var(--minze)}

/* Band mit einem Satz */
.band-satz{padding-block:clamp(52px,7vw,100px)}
.band-satz-in{display:flex;flex-direction:column;gap:22px}
.spur-linie{width:min(600px,80%);height:auto;fill:none;stroke:var(--minze);stroke-width:3;stroke-linecap:round}
.spur-linie path{stroke-dasharray:1;stroke-dashoffset:1}
.spur-linie.in path{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s}
.satz{font:500 clamp(26px,3.1vw,42px)/1.25 var(--disp);max-width:30ch}

/* Chris: Foto versetzt, Text daneben */
.chris{padding-block:var(--abstand)}
.chris-in{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:center}
.chris-bild{flex:0 1 380px;position:relative;margin:0}
.chris-bild::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--wein);border-radius:6px}
.chris-foto,.kopf-foto{display:block;position:relative}
.chris-foto img,.kopf-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:6px}
.chris-text{flex:1 1 420px}
.chris-text>p{font-size:clamp(18px,1.3vw,20px);max-width:34em;margin-bottom:26px}
.lob{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:18px}
.lob div{border-top:2px solid var(--wein);padding-top:12px}
.lob dt{font:600 22px/1.2 var(--disp)}
.lob dd{font-size:15px;color:var(--grau);margin-top:4px}
.lob dd.lob-mehr{color:var(--tinte);font-size:15.5px;line-height:1.5;margin-top:8px}
.chris-mehr{max-width:34em;margin:-10px 0 26px;color:var(--grau)}

/* Drei Wege: Kopf oben, drei gleich hohe Spalten */
.wege{background:var(--weiss);padding-block:var(--abstand)}
.wege-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 40px;margin-bottom:36px}
.wege-kopf .h2{margin:0}
.wege-kopf p{max-width:30em;color:var(--grau)}
.wege-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:0 40px}
.wege-liste li{border-top:1px solid var(--linie);padding:28px 0 8px;position:relative}
.wege-liste li::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:3px;background:var(--tinte)}
.wege-liste svg{width:60px;height:60px;margin-bottom:18px;fill:none;stroke:var(--tinte);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wege-liste svg .m,.haltung svg .m{stroke:var(--wein)}
.wege-liste p{color:var(--grau)}
.wege-merk{background:var(--minze-hell);border-radius:6px;padding:22px 24px 24px;max-width:26em}
.wege-spur{display:block;width:100%;height:auto;margin-bottom:12px}
.wege-merk p{font-size:15.5px;color:var(--tinte)}
.wege-tel{display:inline-block;margin-top:10px;font:600 18px/1.3 var(--sans);color:var(--wein);text-decoration:none;
  border-bottom:1.5px solid currentColor}
.wege-liste li{display:flex;flex-direction:column}
.wege-liste .weg-mehr{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--tinte)}
.weg-link{padding:14px 0 4px;border:0;background:none;cursor:pointer;
  font:600 16px/1.3 var(--sans);color:var(--wein);text-align:left;display:inline-flex;gap:8px;align-items:center}
.weg-link::after{content:"\2192";transition:transform .25s}
.weg-link:hover::after{transform:translateX(4px)}

/* Erster Abend: Schritte auf einer Linie, dunkles Band */
.abend{padding-block:var(--abstand)}
.abend-in{display:flex;flex-wrap:wrap;gap:36px clamp(40px,6vw,96px);align-items:flex-start}
.abend-kopf{flex:0 1 300px}
.schritte{flex:1 1 520px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:28px 32px;position:relative}
.schritte::before{content:"";position:absolute;left:22px;right:0;top:22px;height:2px;background:var(--minze);
  transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s}
.schritte:has(> li.in)::before{transform:scaleX(1)}
.schritte li{position:relative}
.nr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--minze);
  background:var(--tinte);color:var(--minze);font:600 20px/1 var(--disp);margin-bottom:18px;position:relative}
.schritte h3{color:var(--weiss)}
.schritte p{color:var(--hellgrau);font-size:16px}
.abend-info{display:flex;flex-direction:column;gap:18px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.abend-info h3{color:var(--minze);font:600 19px/1.3 var(--disp);margin-bottom:4px}
.abend-info p{color:var(--hellgrau);font-size:15.5px}

/* Stimmen */
.stimmen{padding-block:var(--abstand)}
.stimmen-kopf{text-align:center;margin-bottom:36px}
.stimmen-kopf .h2{margin:0}
.stimmen-note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 48px;margin-top:26px}
.note-gross{display:flex;align-items:baseline;gap:12px}
.note-gross b{font:600 clamp(56px,6vw,84px)/1 var(--disp);color:var(--wein)}
.note-gross .sterne{font-size:20px}
.note-gross small{font:500 15px/1.3 var(--sans);color:var(--grau)}
.stichworte{text-align:left;min-width:min(100%,300px)}
.stichworte p{font-size:14.5px;color:var(--grau);margin-bottom:8px}
/* Stichwoerter als Wortzeile, keine Balken (Dashboard-Optik, §3.5) */
.stichworte ul{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:22px;row-gap:4px}
.stichworte li{display:flex;align-items:baseline;gap:.4em}
.stichworte li b{font:italic 500 22px/1.2 var(--disp);color:var(--wein)}
.stichworte li span{font-size:13.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.google-zeile{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.3 var(--sans);margin-bottom:12px}
.g-logo{width:22px;height:22px;flex:none}
.zitate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.zitat{background:var(--weiss);border-radius:6px;padding:28px 28px 24px;margin:0;display:flex;flex-direction:column;gap:14px}
.zitat blockquote{font:italic 400 clamp(19px,1.45vw,22px)/1.42 var(--disp);flex:1}
.zitat figcaption{font:600 15px/1.3 var(--sans);color:var(--grau)}
.stimmen .pfeil{display:flex;width:max-content;margin-inline:auto;margin-top:32px}
/* § 5b Abs. 3 UWG (kleim-recht): Hinweis zur Echtheit der Bewertungen, sichtbar unter den Zitaten */
.stimmen-echt{margin:18px auto 0;max-width:46em;text-align:center;font-size:14px;color:var(--grau)}
.stimmen-dunkel .stimmen-echt{color:var(--hellgrau)}

/* Kontakt auf der Startseite */
.besuch{padding-block:var(--abstand)}
.besuch-in{display:flex;flex-wrap:wrap;gap:40px clamp(40px,6vw,96px);align-items:stretch}
.besuch-text{flex:1 1 420px}
.besuch-text address{font:500 clamp(22px,1.9vw,27px)/1.35 var(--disp);margin-bottom:22px}
.besuch-text address:has(+ .anfahrt-satz){margin-bottom:8px}
.anfahrt-satz{color:var(--grau);max-width:34em}
.besuch-text .erreichbar{margin:12px 0 22px}
.danach{background:var(--ahorn);border-radius:6px;padding:20px 22px;margin-bottom:24px;max-width:34em}
.danach h3{font-size:20px;margin-bottom:10px}
.danach ol{counter-reset:danach;display:flex;flex-direction:column;gap:8px}
.danach li{counter-increment:danach;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:15.5px}
.danach li::before{content:counter(danach);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--wein);color:var(--wein);font:600 14px/1 var(--disp)}
.besuch-wege{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.besuch-wege a,.weg{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--linie);
  border-radius:6px;padding:14px 18px;background:var(--weiss)}
.besuch-wege b,.weg b{font:600 17px/1.3 var(--sans)}
.besuch-wege small,.weg small{font-size:14px;color:var(--grau);overflow-wrap:anywhere}
.besuch-wege a:hover,.weg:hover{border-color:var(--wein)}
.besuch-karte{flex:1 1 380px;position:relative;background:var(--ahorn);border-radius:6px;min-height:320px;overflow:hidden}
.lage-bild{width:100%;height:100%;object-fit:cover;display:block}
.lage-notiz{position:absolute;left:16px;bottom:14px;background:var(--grund);border-radius:5px;padding:6px 12px;font:600 14px/1.3 var(--sans)}

/* ---------------- Unterseiten ---------------- */
.seitenkopf{padding-block:clamp(36px,5vw,80px)}
.seitenkopf-in{display:flex;flex-wrap:wrap;gap:36px clamp(36px,5vw,80px);align-items:flex-start}  /* center liess den Kopf beim Schrifttausch springen (CLS 0,0035) */
.seitenkopf-text{flex:1 1 460px}
.seitenkopf-unter{font-size:clamp(18px,1.35vw,20px);color:var(--grau);max-width:36em;margin-bottom:26px}
.seitenkopf-motiv{flex:1 1 320px;position:relative;min-height:clamp(280px,32vw,460px)}
.seitenkopf-motiv svg{position:absolute;inset:0;width:100%;height:100%}
.seitenkopf-bild{flex:0 1 400px;margin:0;position:relative}
.seitenkopf-bild::before{content:"";position:absolute;inset:-18px 18px 18px -18px;background:var(--ahorn);border-radius:6px}
.seitenkopf-bild.quer{flex:1 1 440px}
.seitenkopf-bild.quer .kopf-foto img{aspect-ratio:4/3;object-position:50% 40%}
.achse-motiv{margin-top:28px;width:min(260px,80%)}
.achse-motiv svg{display:block;width:100%;height:auto}

.kurse{padding-block:var(--abstand)}
.kurs-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(20px,3vw,44px);
  border-top:1px solid var(--ahorn-tief);padding:30px 0}
.kurs-nr{font:600 clamp(48px,5.5vw,84px)/.9 var(--disp);color:var(--wein);min-width:1.2em}
.kurs-zeile p{max-width:62ch;color:var(--grau)}

.achse-sek{padding-block:var(--abstand)}
.achse-in{display:flex;flex-wrap:wrap;gap:36px clamp(40px,6vw,96px);align-items:flex-start}
.achse-kopf{flex:0 1 340px}
.achse-kopf p{color:var(--hellgrau)}
.achse{flex:1 1 480px;position:relative;padding-left:44px}
.achse::before,.achse::after{content:"";position:absolute;left:10px;top:8px;width:2px;border-radius:2px}
.achse::before{bottom:8px;background:rgba(127,196,182,.25)}
.achse::after{height:calc(var(--p,0) * (100% - 16px));background:var(--minze)}
.achse li{position:relative;padding-bottom:30px}
.achse li:last-child{padding-bottom:0}
.achse li::before{content:"";position:absolute;left:-43px;top:6px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--minze);background:var(--tinte);transition:background-color .4s}
.achse li.erreicht::before{background:var(--minze)}
.achse h3{color:var(--weiss)}
.achse p{color:var(--hellgrau);max-width:52ch}

.fragen{background:var(--weiss);padding-block:var(--abstand)}
.fragen-in{display:flex;flex-wrap:wrap;gap:36px clamp(40px,6vw,96px);align-items:flex-start}
.fragen-kopf{flex:0 1 340px}
.fragen-kopf p{color:var(--grau)}
.fragen-kopf svg{display:block;width:min(220px,70%);height:auto;margin-top:28px}
.fragen-liste{flex:1 1 520px}
.fragen-liste details{border-bottom:1px solid var(--linie)}
.fragen-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;
  padding:20px 0;font:600 clamp(19px,1.5vw,22px)/1.3 var(--disp)}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--wein);transition:transform .25s}
.fragen-liste details[open] summary::after{transform:rotate(45deg)}
.fragen-liste details p{padding:0 0 22px;color:var(--grau);max-width:62ch}

.schluss{padding-block:clamp(52px,6vw,88px)}
.schluss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.schluss .satz{color:var(--weiss)}
.schluss-akt{display:flex;flex-wrap:wrap;gap:12px}

.haltung{padding-block:var(--abstand)}
.haltung-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:32px 40px;margin-top:12px}
.haltung article{border-top:3px solid var(--tinte);padding-top:24px}
.haltung svg{width:56px;height:56px;margin-bottom:16px;fill:none;stroke:var(--tinte);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.haltung p{color:var(--grau)}

.stimmen-dunkel{padding-block:var(--abstand)}
.stimmen-dunkel .stimmen-kopf .kicker{justify-content:center}
.stimmen-dunkel .zitat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.stimmen-dunkel .zitat blockquote{color:var(--grund)}
.stimmen-dunkel .zitat figcaption{color:var(--hellgrau)}
.stimmen-dunkel .sterne{color:var(--minze)}
.stimmen-dunkel .pfeil{display:flex;width:max-content;margin-inline:auto;margin-top:32px}

.schluss-paar{padding-block:var(--abstand)}
.schluss-paar-in{display:flex;flex-wrap:wrap;align-items:center;gap:32px clamp(40px,6vw,96px)}
.schluss-paar-in>div:last-child{flex:1 1 420px}
.schluss-paar-in p{color:var(--grau);margin-bottom:24px;max-width:36em}
.schluss-paar-motiv{flex:0 1 280px;position:relative;min-height:300px}
.schluss-paar-motiv svg,.nicht-da .seitenkopf-motiv svg{position:absolute;inset:0;width:100%;height:100%}

.kontakt-wege{flex:0 1 400px;display:flex;flex-direction:column;gap:12px}
.weg{flex-direction:row;align-items:center;gap:16px;cursor:pointer;text-align:left;width:100%}
.weg>span{display:flex;flex-direction:column;min-width:0}
.weg svg,.kachel svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--wein);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.zeiten-sek{padding-block:var(--abstand)}
.zeiten-in{display:flex;flex-wrap:wrap;gap:36px clamp(40px,6vw,96px);align-items:flex-start}
.zeiten-kopf{flex:1 1 360px}
.zeiten-kopf p{color:var(--grau);max-width:34em}
.woche{flex:1 1 420px;background:var(--grund);border-radius:6px;padding:8px}
.woche div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:12px 16px;border-radius:5px;border-left:3px solid transparent}
.woche div+div{margin-top:2px}
.woche dt{font-weight:500}
.woche dd{font-variant-numeric:tabular-nums;color:var(--grau)}
.woche .heute{background:var(--weiss);border-left-color:var(--wein)}
.woche .heute dt{font-weight:700}
.woche .heute dd{color:var(--tinte)}

.anfahrt{background:var(--weiss);padding-block:var(--abstand)}
.anfahrt-in{display:flex;flex-wrap:wrap;gap:36px clamp(40px,6vw,96px);align-items:stretch}
.anfahrt-karte{flex:1 1 460px;background:var(--minze-hell);border-radius:6px;min-height:340px;overflow:hidden;position:relative}
.anfahrt-text{flex:1 1 360px;display:flex;flex-direction:column;justify-content:center}
.anfahrt-text address{font:500 clamp(22px,1.9vw,27px)/1.4 var(--disp);margin-bottom:12px}
.anfahrt-text p{color:var(--grau);margin-bottom:24px}

/* ---------------- Fuß (kompakt) ---------------- */
.fuss{background:var(--tinte);color:var(--hellgrau);padding:44px 0 22px;font-size:15px}
.fuss a{color:var(--grund);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-in{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.fuss-marke{display:flex;gap:14px;align-items:center}
.fuss .signet{--signet-farbe:var(--minze);--signet-grund:var(--tinte)}
.fuss-name{display:flex;flex-direction:column}
.fuss-name b{font:600 20px/1.2 var(--disp);color:var(--weiss)}
.fuss-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss-kontakt{display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.fuss-unten{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:16px;font-size:14px}
.fuss-recht{display:flex;gap:18px}
.fuss-recht a{display:inline-block;padding:6px 0;font:500 14px/1.3 var(--sans)}

/* ---------------- Modale ---------------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(37,27,43,.58)}
.modal.offen,.modal:target{display:flex}
.modal-karte{position:relative;background:var(--grund);border-radius:6px;width:min(540px,100%);
  max-height:calc(100svh - 32px);overflow:auto;padding:36px 32px 30px;animation:modal-rein .28s ease-out}
.modal-karte.breit{width:min(780px,100%)}
@keyframes modal-rein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-zu{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;
  font:400 30px/1 var(--sans);cursor:pointer;color:var(--tinte);border-radius:5px}
.modal-zu:hover{background:var(--ahorn)}
.modal-karte h2{font:600 clamp(26px,2.6vw,34px)/1.15 var(--disp);margin:0 40px 10px 0}
.modal-text{color:var(--grau);margin-bottom:20px}
.modal-lang{font-size:16px}
.modal-lang h2{margin-bottom:16px}
.modal-lang h3{font-size:20px;margin:22px 0 6px}
.modal-lang p,.modal-lang ul{margin:0 0 12px}
.modal-lang ul{list-style:disc;padding-left:1.2em}

.anfrage label{display:block;font:600 15px/1.3 var(--sans);margin-bottom:14px}
.anfrage label small{font-weight:400;color:var(--grau)}
.anfrage input[type=text],.anfrage textarea{display:block;width:100%;margin-top:6px;font:400 16px/1.4 var(--sans);
  padding:12px 14px;border:1px solid var(--ahorn-tief);border-radius:5px;background:var(--weiss);color:var(--tinte)}
.anfrage textarea{resize:vertical;min-height:90px}
.wahl{border:0;padding:0;margin:0 0 16px;min-width:0}
.wahl legend{font:600 15px/1.3 var(--sans);margin-bottom:8px;padding:0}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px}
.wahl label{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;border:1px solid var(--ahorn-tief);
  border-radius:5px;padding:11px 12px;background:var(--weiss);cursor:pointer}
.wahl label:has(input:checked){border-color:var(--wein);box-shadow:inset 0 0 0 1px var(--wein)}
.wahl input{accent-color:var(--wein);width:18px;height:18px;margin:0;flex:none}
.anfrage-hinweis{font-size:14px;color:var(--grau);margin-bottom:16px}
.anfrage-akt{display:flex;flex-wrap:wrap;gap:12px}
.anfrage-fehler{margin-top:12px;color:var(--wein);font-weight:600}

.menue-gruppe{font:600 13px/1.3 var(--sans);color:var(--grau);margin:18px 0 2px}
.menue-liste{display:flex;flex-direction:column;margin:8px 0 22px}
.menue-liste a{font:600 26px/1.2 var(--disp);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--linie)}
.menue-liste a[aria-current]{color:var(--wein)}
.menue-direkt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.kachel{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;border:1px solid var(--linie);
  border-radius:6px;background:var(--weiss);text-decoration:none;text-align:left;cursor:pointer;width:100%}
.kachel span{display:flex;flex-direction:column}
.kachel b{font:600 16px/1.3 var(--sans)}
.kachel small{font-size:13px;color:var(--grau)}

/* ---------------- Einblendungen (§3.7) ---------------- */
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none;
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.68,.34,1);transition-delay:var(--vz,0ms)}
html.js .vz1{--vz:80ms} html.js .vz2{--vz:190ms} html.js .vz3{--vz:300ms}
html.js .vz4{--vz:410ms} html.js .vz5{--vz:520ms}
html.js .ln{display:block;overflow:hidden;padding:.14em .06em .22em;margin:-.14em -.06em -.22em}
html.js .ln>span{display:block;transform:translateY(112%)}
html.js .ln.in>span{transform:none;transition:transform .95s cubic-bezier(.22,.68,.34,1);transition-delay:var(--vz,0ms)}
html.js .marke.rv{transform:none}

/* Held-H1 mit waehlbarem Zeilenfall: Wortgruppen-Masken (inline-block) plus
   zwei Umbruchsorten. Grundfassung = drei Zeilen (br-m an, br-d aus):
   "Tanzen lernen," / "mit Freude" / "und Geduld.". Zwei Zeilen zu drei Woertern
   ("Tanzen lernen, mit" / "Freude und Geduld.") schaltet desktop.css um:
   .h1-wahl .br-m{display:none} .h1-wahl .br-d{display:inline} */
.h1-wahl .br-d{display:none}
html.js .h1-wahl .ln{display:inline-block;vertical-align:top}
.h1-wahl .ln>span{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}
  html.js .rv.in{transition:none}
  html.js .ln>span,html.js .ln.in>span{transform:none;transition:none}
  svg [id^="tp-"],svg.paar-klein>g,svg.fragen-paar>g,.ist-da .note{animation:none!important}
  svg.tanzpaar #tp-bogen path,.spur-linie path{stroke-dashoffset:0!important;transition:none}
  .schritte::before{transform:none;transition:none}
}