/* gigernet.ch – gemeinsames Stylesheet für alle Seiten. Stil „Groove“ (70er):
   Creme, Lila, Senf, Orange, Pink, Türkis; dicke Ränder und harte Schatten.
   Schriften: die des Systems (keine Schriftdateien, keine Drittanbieter).
   Kontraste für Text ≥ 4,5:1 geprüft (hell und dunkel). Pink und Orange sind nur Schmuck
   (Pink auf Creme 3,5:1), Text auf Orange und Senf immer in Tinte. */

:root {
	/* fest, in beiden Modi gleich */
	--tinte: #1E1433;
	--creme: #FFF6E5;
	--lila: #3B1F6B;
	--senf: #F7B32B;
	--orange: #F26B1D;
	--pink: #E8457C;
	--tuerkis: #1BA39C;
	--flieder: #9B7FE0;

	/* hell */
	--grund: #FFF6E5;
	--flaeche: #FFFDF7;
	--text: #1E1433;
	--leise: #5B5170;
	--akzent: #5B2A86;
	--rand: #1E1433;
	--schlag: #1E1433;
	--punkte: rgb(30 20 51 / 9%);
	--senf-hg: #FFE3A3;
	--orange-hg: #FFD2B8;
	--pink-hg: #FFD0DE;
	--tuerkis-hg: #BDEDE7;
	--flieder-hg: #E4D9FA;
	--block-senf: #F7B32B;
	--auf-block-senf: #1E1433;
	--auf-block-senf-leise: #4A3B12;
	--auf-lila: #FFF6E5;
	--auf-lila-leise: #E3D6F5;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--grund: #1A1229;
		--flaeche: #251A38;
		--text: #FFF6E5;
		--leise: #C9BEDD;
		--akzent: #F7B32B;
		--rand: #E9DFF5;
		--schlag: #F7B32B;
		--punkte: rgb(255 246 229 / 6%);
		--senf-hg: rgb(247 179 43 / 18%);
		--orange-hg: rgb(242 107 29 / 18%);
		--pink-hg: rgb(232 69 124 / 16%);
		--tuerkis-hg: rgb(27 163 156 / 18%);
		--flieder-hg: rgb(155 127 224 / 20%);
		--block-senf: #3A2A10;
		--auf-block-senf: #FFF6E5;
		--auf-block-senf-leise: #E8D9B5;
	}
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background-color: var(--grund);
	background-image: radial-gradient(var(--punkte) 1.2px, transparent 1.4px);
	background-size: 22px 22px;
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: hidden;
}

a { color: var(--akzent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.held :focus-visible, .lila :focus-visible { outline-color: var(--senf); }

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 900; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); font-weight: 900; letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0 0 1em; }

/* Wellenlinie unter einzelnen Wörtern */
.marker {
	text-decoration: underline wavy var(--pink);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
	text-decoration-skip-ink: none;
}

.rahmen { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .rahmen { padding: 0 32px; } }

/* Kopfzeile */
.kopf {
	position: sticky; top: 0; z-index: 10;
	background: var(--grund);
	background: color-mix(in srgb, var(--grund) 94%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 3px solid var(--rand);
}
.kopf::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: linear-gradient(90deg, var(--orange) 0 25%, var(--senf) 25% 50%, var(--pink) 50% 75%, var(--tuerkis) 75%);
}
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.4rem; padding-top: 6px; }
.marke { font-weight: 900; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--text); text-decoration: none; }
.marke span { color: var(--akzent); }
.marke::after { content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.06em; background: var(--orange); border-radius: 50%; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.97rem; }
.nav a:not(.knopf):hover { text-decoration: underline wavy var(--pink); text-underline-offset: 0.3em; }
@media (max-width: 760px) { .nav a:not(.knopf):not(.immer) { display: none; } }

/* Knöpfe: dicker Rand, harter Schatten */
.knopf, .nav .knopf {
	display: inline-block;
	background: var(--orange); color: var(--tinte);
	padding: 0.7em 1.35em; border-radius: 999px; border: 3px solid var(--rand);
	box-shadow: 4px 4px 0 var(--schlag);
	font-weight: 800; text-decoration: none; line-height: 1.2;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.knopf:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--schlag); }
.knopf:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--schlag); }
.knopf.zweit { background: var(--flaeche); color: var(--text); }
.knopf.klein { padding: 0.45em 1em; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--schlag); }

/* Abschnitte */
.abschnitt { padding: 5rem 0; position: relative; }
.abschnitt.pink { background: var(--pink-hg); }
.abschnitt.tuerkis { background: var(--tuerkis-hg); }
.abschnitt.lila { background: var(--lila); color: var(--auf-lila); }
.abschnitt.senf { background: var(--block-senf); color: var(--auf-block-senf); }
.abschnitt.pink, .abschnitt.tuerkis, .abschnitt.lila, .abschnitt.senf { border-block: 3px solid var(--rand); }
.abschnitt.lila h2 { text-shadow: 0.06em 0.06em 0 var(--orange); }
.oberzeile {
	display: inline-block; margin-bottom: 1rem;
	padding: 0.3em 0.9em; border-radius: 999px; border: 2px solid var(--tinte);
	background: var(--senf); color: var(--tinte);
	font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
	transform: rotate(-2deg);
}
.senf .oberzeile { background: var(--creme); }
.einleitung { font-size: 1.2rem; color: var(--leise); max-width: 40rem; }
.senf .einleitung { color: var(--auf-block-senf-leise); }

/* Kopfbereich: Lila mit Sonnenstreifen */
.held {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 5rem 0 7rem; background: var(--lila); color: var(--auf-lila);
}
.held h1 {
	max-width: 11em;
	-webkit-text-stroke: 0.035em var(--tinte); paint-order: stroke fill;
	text-shadow: 0.05em 0.05em 0 var(--orange), 0.1em 0.1em 0 var(--pink), 0.15em 0.15em 0 var(--tinte);
}
.held .marker { color: var(--senf); }
.held .einleitung { font-size: clamp(1.1rem, 2.2vw, 1.3rem); max-width: 36rem; color: var(--auf-lila); }
/* Kopfbereich in zwei Spalten: Text links, animiertes Logo rechts; auf dem Handy Logo oben */
.held-raster { display: flex; flex-direction: column; }
.held-logo { order: -1; width: 100%; max-width: 380px; margin: 0 auto 0.5rem; }
.held-raster > .sticker { align-self: center; }
@media (min-width: 900px) {
	.held-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.5rem 2.5rem; align-items: center; }
	.held-logo { order: 0; max-width: 540px; margin: 0; }
}
.knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.held .knopf { --schlag: var(--tinte); border-color: var(--tinte); }
.held .knopf.zweit { background: var(--creme); color: var(--tinte); }
.fakten { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; color: var(--auf-lila-leise); font-weight: 600; font-size: 0.97rem; }
.fakten li::before { content: "★ "; color: var(--senf); }
.welle { position: absolute; left: 0; bottom: -1px; width: 100%; height: 48px; fill: var(--tinte); }

/* Sticker als Stern; Hülle trägt den Schatten, der Stern ist ausgeschnitten */
.sticker {
	display: inline-block; margin-top: 2.2rem;
	filter: drop-shadow(4px 4px 0 var(--tinte));
	animation: wackeln 3s ease-in-out infinite alternate;
}
.stern {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
	width: 8.5rem; height: 8.5rem; background: var(--senf); color: var(--tinte);
	font-weight: 900; font-size: 1.05rem; line-height: 1.05; text-align: center; text-transform: uppercase;
	clip-path: polygon(50.0% 0.0%, 55.6% 7.4%, 62.9% 1.7%, 66.5% 10.3%, 75.0% 6.7%, 76.2% 15.9%, 85.4% 14.6%, 84.1% 23.8%, 93.3% 25.0%, 89.7% 33.5%, 98.3% 37.1%, 92.6% 44.4%, 100.0% 50.0%, 92.6% 55.6%, 98.3% 62.9%, 89.7% 66.5%, 93.3% 75.0%, 84.1% 76.2%, 85.4% 85.4%, 76.2% 84.1%, 75.0% 93.3%, 66.5% 89.7%, 62.9% 98.3%, 55.6% 92.6%, 50.0% 100.0%, 44.4% 92.6%, 37.1% 98.3%, 33.5% 89.7%, 25.0% 93.3%, 23.8% 84.1%, 14.6% 85.4%, 15.9% 76.2%, 6.7% 75.0%, 10.3% 66.5%, 1.7% 62.9%, 7.4% 55.6%, 0.0% 50.0%, 7.4% 44.4%, 1.7% 37.1%, 10.3% 33.5%, 6.7% 25.0%, 15.9% 23.8%, 14.6% 14.6%, 23.8% 15.9%, 25.0% 6.7%, 33.5% 10.3%, 37.1% 1.7%, 44.4% 7.4%);
}
.stern svg { width: 2rem; height: 2rem; }
@keyframes wackeln { from { transform: rotate(-14deg); } to { transform: rotate(-4deg); } }
@media (min-width: 900px) {
	.held .rahmen { position: relative; }
	.sticker { position: absolute; right: 4%; top: -1rem; margin: 0; }
	.stern { width: 10rem; height: 10rem; font-size: 1.2rem; }
}

/* Laufband */
.laufband {
	overflow: hidden; background: var(--tinte); color: var(--senf);
	border-bottom: 3px solid var(--rand);
	padding: 0.8rem 0 1rem; white-space: nowrap;
	font-weight: 900; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.01em; text-transform: uppercase;
}
.laufband-spur { display: flex; width: max-content; animation: laufen 45s linear infinite; }
.laufband-spur > div { display: flex; gap: 0.7em; padding-right: 0.7em; }
.laufband b { color: var(--pink); }
.laufband b:nth-of-type(3n+2) { color: var(--tuerkis); }
.laufband b:nth-of-type(3n) { color: var(--orange); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Karten: dicker Rand, harter Schatten, Pastellfarbe */
.raster { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 640px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .raster.drei { grid-template-columns: repeat(3, 1fr); } }
.karte {
	--farbe: var(--senf); --farbe-hg: var(--flaeche);
	position: relative;
	background: var(--farbe-hg); border: 3px solid var(--rand); border-radius: 20px;
	padding: 1.7rem 1.6rem 1.6rem; box-shadow: 6px 6px 0 var(--schlag);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.raster .karte:hover { transform: translate(-3px, -3px) rotate(-0.6deg); box-shadow: 9px 9px 0 var(--schlag); }
.karte p:last-child { margin-bottom: 0; }
.karte .symbol {
	display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
	border-radius: 50%; border: 2px solid var(--tinte); background: var(--farbe); color: var(--tinte);
}
.karte .symbol svg { width: 1.5rem; height: 1.5rem; }
.karte ul { margin: 0; padding-left: 1.1rem; color: var(--leise); font-size: 0.97rem; }
.karte.klein { padding: 1.4rem 1.4rem 1.3rem; box-shadow: 4px 4px 0 var(--schlag); }
.karte.klein h3 { font-size: 1.1rem; }
.karte.klein p { color: var(--leise); font-size: 0.97rem; }
.farbe-sonne { --farbe: var(--senf); --farbe-hg: var(--senf-hg); }
.farbe-koralle { --farbe: var(--pink); --farbe-hg: var(--pink-hg); }
.farbe-himmel { --farbe: var(--tuerkis); --farbe-hg: var(--tuerkis-hg); }
.farbe-flieder { --farbe: var(--flieder); --farbe-hg: var(--flieder-hg); }
.raster.drei .karte:nth-child(1) { --farbe: var(--orange); }
.raster.drei .karte:nth-child(2) { --farbe: var(--tuerkis); }
.raster.drei .karte:nth-child(3) { --farbe: var(--senf); }

/* Schritte (Vor Ort): Nummern in Kreisen, verbunden durch eine gestrichelte Strasse */
.schritte { position: relative; counter-reset: schritt; list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 1000px) {
	.schritte::before { content: ""; position: absolute; left: 1.8rem; right: 10%; top: 1.75rem; border-top: 3px dashed var(--rand); }
}
.schritte li { --farbe: var(--senf); position: relative; counter-increment: schritt; }
.schritte li:nth-child(1) { --farbe: var(--orange); }
.schritte li:nth-child(2) { --farbe: var(--senf); }
.schritte li:nth-child(3) { --farbe: var(--tuerkis); }
.schritte li:nth-child(4) { --farbe: var(--flieder); }
.schritte li::before {
	content: counter(schritt); position: relative;
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem;
	border-radius: 50%; border: 3px solid var(--tinte); background: var(--farbe); color: var(--tinte);
	box-shadow: 3px 3px 0 var(--schlag);
	font-size: 1.6rem; font-weight: 900;
}
.schritte p { color: var(--leise); margin: 0; }

/* Notiz wie ein Zettel */
.notiz {
	display: flex; gap: 1rem; align-items: center; max-width: 40rem; margin-top: 3rem;
	padding: 1.1rem 1.3rem; border-radius: 6px 18px 18px 18px;
	background: var(--senf); color: var(--tinte); border: 3px solid var(--tinte);
	box-shadow: 5px 5px 0 var(--tinte); font-weight: 600;
	transform: rotate(-1.5deg);
}
.notiz svg { flex: none; width: 2.6rem; height: 2.6rem; color: var(--tinte); }
.notiz p { margin: 0; }

/* Zwei Spalten */
.zweispaltig { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .zweispaltig { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.liste { padding-left: 1.2rem; }
.liste li { margin-bottom: 0.4rem; }
.liste li::marker { content: "★  "; color: var(--akzent); }

/* Vorschau Buchplanet im Browser-Rahmen */
.vorschau {
	display: block; overflow: hidden; text-decoration: none; color: var(--tinte);
	background: var(--flaeche); border: 3px solid var(--rand); border-radius: 16px;
	box-shadow: 8px 8px 0 var(--schlag);
	transform: rotate(1.5deg);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vorschau:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: 11px 11px 0 var(--schlag); }
.vorschau-leiste { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.9rem; background: var(--flaeche); border-bottom: 3px solid var(--rand); }
.vorschau-leiste .punkte { display: flex; gap: 0.35rem; }
.vorschau-leiste .punkte span { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--tinte); background: var(--orange); }
.vorschau-leiste .punkte span:nth-child(2) { background: var(--senf); }
.vorschau-leiste .punkte span:nth-child(3) { background: var(--tuerkis); }
.vorschau-leiste .adresse { flex: 1; padding: 0.15rem 0.8rem; border-radius: 999px; background: var(--grund); color: var(--leise); font-size: 0.85rem; }
.vorschau img { display: block; width: 100%; height: auto; }
.vorschau-knopf { display: block; padding: 0.8rem 1rem; background: var(--senf); border-top: 3px solid var(--rand); font-weight: 800; text-align: center; }

/* Pilotprojekte im Referenzteil: Vorschau mit Text, ab 640 px nebeneinander */
.pilotprojekte { margin-top: 5rem; }
.pilotprojekte .raster { gap: 3rem; }
.pilot .vorschau { margin-bottom: 1.6rem; transform: rotate(-1deg); }
.pilot:nth-child(2) .vorschau { transform: rotate(1deg); }
.pilot .vorschau:hover { transform: rotate(0deg) translate(-3px, -3px); }
.pilot h3 { font-size: 1.35rem; margin-top: 0.7rem; }
.etikett {
	display: inline-block; padding: 0.2em 0.85em; border: 2px solid var(--tinte); border-radius: 999px;
	background: var(--senf); color: var(--tinte);
	font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.etikett.gemeinschaft { background: var(--orange); }
.etikett.kreativ { background: var(--flieder); }

/* Preis */
.preis { text-align: center; }
.preis .betrag { font-size: clamp(3.4rem, 11vw, 6rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--text); text-shadow: 0.04em 0.04em 0 var(--senf), 0.08em 0.08em 0 var(--pink); }
.preis .einheit { font-size: 1.15rem; font-weight: 700; color: var(--leise); margin-top: 0.8rem; }
.preis .einleitung { margin: 1.5rem auto 0; }

/* Kontakt */
.kontakt-karte { text-align: left; color: var(--text); }
.kontakt-karte address { font-style: normal; color: var(--leise); }
.kontakt-karte .knopf-zeile { margin: 1.4rem 0 0; }
.mail { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 800; word-break: break-word; }

/* Fuss mit 70er-Streifen */
.fuss { position: relative; background: var(--tinte); color: var(--creme); padding: 2.6rem 0 2rem; font-size: 0.93rem; }
.fuss::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
	background: linear-gradient(var(--orange) 0 25%, var(--senf) 25% 50%, var(--pink) 50% 75%, var(--tuerkis) 75%);
}
.fuss .rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; padding-top: 0.6rem; }
.fuss a { color: var(--creme); }
.fuss nav { display: flex; gap: 1.2rem; }

/* Rechtsseiten (Impressum, Datenschutz) */
.recht { padding: 3.5rem 0 4rem; max-width: 46rem; }
.recht h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.recht h2 { font-size: 1.35rem; margin-top: 2.2em; }
.recht .stand { color: var(--leise); }
.recht .kurz { background: var(--senf-hg); border: 3px solid var(--rand); border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: 4px 4px 0 var(--schlag); }
.recht address { font-style: normal; margin-bottom: 1em; }

/* Tanzender Name oben im Kopfbereich, frei ohne Kasten: jeder Buchstabe in einer Logo-Farbe mit
   Tinten-Kontur und Retro-Schatten. Jeder tanzt wie ein eigener Mensch (Stefan 2026-10-30), alle
   im Takt der Musik: 115 Schläge pro Minute, Dauern sind Vielfache eines Schlags (0,52174 s),
   0 % ist immer eine Eins. groove.js setzt die Animationen auf die Stelle im Stück.
   Für Screenreader steht der Name ganz in `.unsichtbar`. */
.tanzname { margin: 0 0 1.4rem; line-height: 1.15; }
.tanz-zeile { display: block; font-size: clamp(1.7rem, 8.5vw, 2.8rem); font-weight: 900; }
.tanzname .wort { display: inline-block; white-space: nowrap; }
.tanzname .wort + .wort { margin-left: 0.12em; }
.tanzname .wort > span {
	display: inline-block; margin: 0 0.02em; color: var(--senf);
	-webkit-text-stroke: 0.07em var(--tinte); paint-order: stroke fill;
	text-shadow: 0.07em 0.07em 0 var(--tinte);
	transform-origin: 50% 100%;
	animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.tanzname .wort > span:nth-child(2) { color: var(--orange); }
.tanzname .wort > span:nth-child(3) { color: var(--pink); }
.tanzname .wort > span:nth-child(4) { color: var(--flieder); }
.tanzname .wort > span:nth-child(5) { color: var(--tuerkis); }
.tanzname .wort > span:nth-child(6) { color: var(--creme); }
.tanzname .wort > .tanz-huefte { animation-name: tanz-huefte; animation-duration: 1.04348s; }
.tanzname .wort > .tanz-wippen { animation-name: tanz-wippen; animation-duration: 0.52174s; }
.tanzname .wort > .tanz-seitschritt { animation-name: tanz-seitschritt; animation-duration: 2.08696s; }
.tanzname .wort > .tanz-lehnen { animation-name: tanz-lehnen; animation-duration: 2.08696s; }
.tanzname .wort > .tanz-sprung { animation-name: tanz-sprung; animation-duration: 1.04348s; }
.tanzname .wort > .tanz-shimmy { animation-name: tanz-shimmy; animation-duration: 0.52174s; animation-timing-function: linear; }
.tanzname .wort > .tanz-pirouette { animation-name: tanz-pirouette; animation-duration: 4.17391s; }
.tanzname .wort > .tanz-hopser { animation-name: tanz-hopser; animation-duration: 0.52174s; }
.tanzname .wort > .tanz-knie { animation-name: tanz-knie; animation-duration: 1.04348s; }
.tanzname .wort > .tanz-gegenschritt { animation-name: tanz-seitschritt; animation-duration: 2.08696s; animation-delay: -1.04348s; }
.tanzname .wort > .tanz-nicken { animation-name: tanz-nicken; animation-duration: 0.52174s; }
.tanzname .funke {
	display: inline-block; margin: 0 0.35em; font-size: 0.55em; vertical-align: 0.35em;
	color: var(--senf); animation: funkeln 2.08696s ease-in-out infinite;
}
.tanzname .funke:last-child { color: var(--tuerkis); animation-delay: -1.04348s; }
.tanz-titel {
	display: block; margin-top: 0.5rem;
	font-size: 0.85rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--senf);
}
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* S: Hüftschwung, links auf 1, rechts auf 2 */
@keyframes tanz-huefte {
	0%, 100% { transform: translate(-0.05em, 0) rotate(-9deg); }
	50% { transform: translate(0.05em, 0) rotate(9deg); }
}
/* t: wippt auf jedem Schlag in den Knien */
@keyframes tanz-wippen {
	0%, 100% { transform: translateY(0.05em) scale(1.08, 0.9); }
	50% { transform: translateY(-0.08em) scale(0.96, 1.05); }
}
/* e: Seitschritt, links auf 1, rechts auf 3 (das zweite e spiegelt ihn) */
@keyframes tanz-seitschritt {
	0%, 100% { transform: translate(-0.1em, 0); }
	12.5%, 87.5% { transform: translate(-0.05em, -0.1em); }
	25%, 75% { transform: translate(0, 0); }
	37.5%, 62.5% { transform: translate(0.05em, -0.1em); }
	50% { transform: translate(0.1em, 0); }
}
/* f: lehnt sich drei Schläge lang cool zurück und schnellt auf 4 hoch */
@keyframes tanz-lehnen {
	0% { transform: translateX(0) skewX(0); }
	68% { transform: translateX(0.06em) skewX(-18deg); }
	75% { transform: translateX(-0.02em) skewX(6deg); }
	85%, 100% { transform: translateX(0) skewX(0); }
}
/* a: springt auf 2 und 4 */
@keyframes tanz-sprung {
	0%, 30% { transform: translateY(0) scale(1, 1); }
	40% { transform: translateY(0.03em) scale(1.1, 0.88); animation-timing-function: ease-out; }
	50% { transform: translateY(-0.38em) scale(0.94, 1.08); animation-timing-function: ease-in; }
	62% { transform: translateY(0) scale(1.08, 0.92); }
	75%, 100% { transform: translateY(0) scale(1, 1); }
}
/* n: schüttelt die Schultern in Sechzehnteln */
@keyframes tanz-shimmy {
	0%, 50%, 100% { transform: translateX(-0.03em) skewX(7deg); }
	25%, 75% { transform: translateX(0.03em) skewX(-7deg); }
}
/* G: wippt und dreht alle zwei Takte eine Pirouette, Landung auf der Eins */
@keyframes tanz-pirouette {
	0%, 25%, 50%, 75% { transform: translateY(0.04em) rotateY(0deg) scale(1.05, 0.94); }
	12.5%, 37.5%, 62.5% { transform: translateY(-0.06em) rotateY(0deg) scale(0.98, 1.03); }
	87.5% { transform: translateY(-0.2em) rotateY(180deg) scale(1, 1); }
	100% { transform: translateY(0.04em) rotateY(360deg) scale(1.05, 0.94); }
}
/* i: hüpft hoch auf jedem Schlag */
@keyframes tanz-hopser {
	0%, 100% { transform: translateY(0) scale(1.12, 0.86); animation-timing-function: ease-out; }
	45% { transform: translateY(-0.3em) scale(0.92, 1.1); animation-timing-function: ease-in; }
}
/* g: tiefer Groove, geht auf 1 und 3 in die Knie */
@keyframes tanz-knie {
	0%, 100% { transform: translateY(0.1em) rotate(-4deg) scale(1.1, 0.88); }
	50% { transform: translateY(-0.04em) rotate(4deg) scale(0.97, 1.04); }
}
/* r: nickt auf jedem Schlag */
@keyframes tanz-nicken {
	0%, 100% { transform: translateY(0.02em) rotate(10deg); }
	50% { transform: translateY(-0.03em) rotate(-3deg); }
}
@keyframes funkeln {
	0%, 100% { opacity: 0.4; transform: scale(0.7) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.3) rotate(45deg); }
}
/* Auf dem Handy ist der ganze Kopfbereich zentriert, mit wenig Abstand oben */
@media (max-width: 699px) {
	.held { padding-top: 1.8rem; }
	.held .rahmen { text-align: center; }
	.held h1, .held .einleitung { margin-inline: auto; }
	.held .knoepfe, .held .fakten { justify-content: center; }
	.tanzname { margin-top: 0.3rem; }
}

/* Knopf „Groove an“ (groove.js): schwebt unten rechts, erscheint nur mit JavaScript.
   Die Platte dreht mit 33⅓ Umdrehungen pro Minute, der Knopf hüpft im Beat (115 pro Minute). */
.groove-knopf {
	position: fixed; right: 16px; bottom: 16px; z-index: 20;
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.4rem 1.1rem 0.4rem 0.4rem;
	background: var(--senf); color: var(--tinte);
	border: 3px solid var(--tinte); border-radius: 999px;
	box-shadow: 4px 4px 0 var(--tinte);
	font: inherit; font-weight: 900; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
}
.groove-knopf[hidden] { display: none; }
.groove-knopf:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinte); }
.groove-knopf:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinte); }
.groove-knopf:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.groove-knopf[aria-pressed="true"] { background: var(--pink); animation: knopf-beat 0.52174s ease-in-out infinite; }
.platte {
	position: relative; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%;
	border: 2px solid var(--tinte);
	background: radial-gradient(circle, var(--creme) 0 6%, var(--orange) 6% 20%, var(--pink) 20% 30%, var(--tinte) 30% 34%,
		#30234D 34% 46%, var(--tinte) 46% 49%, #30234D 49% 62%, var(--tinte) 62% 65%, #30234D 65% 78%, var(--tinte) 78%);
}
.platte::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 20deg, transparent 0 25deg, rgb(255 255 255 / 40%) 25deg 50deg, transparent 50deg 205deg, rgb(255 255 255 / 25%) 205deg 225deg, transparent 225deg);
}
.groove-knopf[aria-pressed="true"] .platte { animation: platte-drehen 1.8s linear infinite; }
@keyframes platte-drehen { to { transform: rotate(360deg); } }
@keyframes knopf-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.07); } }
/* Platz im Fuss, damit der schwebende Knopf nichts verdeckt */
.fuss { padding-bottom: 5.5rem; }

/* LOGO:START (erzeugt von logo/erzeugen.py) */
.logo-m{display:block;width:100%;height:auto;overflow:visible}
.logo-m path[pathLength]{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;animation:logo-zeichnen 8.34783s linear infinite both}
.logo-m .komet{transform-box:fill-box;transform-origin:center}
.logo-m .m-tanz{transform-box:fill-box;transform-origin:50% 100%;animation:logo-tanzen 1.04348s ease-in-out 3.13043s infinite}
.logo-m .glitzer{transform-box:fill-box;transform-origin:center;opacity:0;animation:logo-glitzer-zyklus 8.34783s linear infinite both,logo-funkeln 2.08696s ease-in-out infinite}
.logo-m .stern{transform-box:fill-box;transform-origin:center}
.logo-m .komet .stern{animation:logo-stern-puls 0.52174s ease-in-out infinite}
.logo-m .strahlen-dreh{transform-box:fill-box;transform-origin:center;animation:logo-drehen 12.52174s linear infinite}
.logo-m .strahlen{transform-box:fill-box;transform-origin:center;opacity:0;animation:logo-strahlen-zyklus 8.34783s linear infinite both,logo-strahlen-puls 0.52174s ease-in-out infinite}
.logo-m .glanz{transform-box:fill-box;transform-origin:center;opacity:0;animation:logo-glanz-blitz 2.08696s ease-in-out 1.73913s infinite}
@keyframes logo-zeichnen{0%{opacity:0;stroke-dashoffset:1;animation-timing-function:cubic-bezier(.55,.05,.25,1)}2%{opacity:1}14.6%{stroke-dashoffset:0}84%{opacity:1;stroke-dashoffset:0}93%{opacity:0;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes logo-glitzer-zyklus{0%{opacity:0}4%{opacity:1}78%{opacity:1}90%,100%{opacity:0}}
@keyframes logo-funkeln{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(20deg)}}
@keyframes logo-tanzen{0%,100%{transform:scale(1,1) skewX(0)}12%{transform:scale(1.05,.93) skewX(0)}28%{transform:scale(.97,1.05) skewX(-4deg)}50%{transform:scale(1,1) skewX(0)}62%{transform:scale(1.05,.93) skewX(0)}78%{transform:scale(.97,1.05) skewX(4deg)}}
@keyframes logo-wolke-wippen{0%,100%{transform:translateY(0) scale(1,1) rotate(0)}12%{transform:translateY(1px) scale(1.07,.93) rotate(0)}28%{transform:translateY(-5px) scale(.96,1.05) rotate(-4deg)}50%{transform:translateY(0) scale(1,1) rotate(0)}62%{transform:translateY(1px) scale(1.07,.93) rotate(0)}78%{transform:translateY(-5px) scale(.96,1.05) rotate(4deg)}}
@keyframes logo-schweif-wippen{0%,100%{transform:rotate(0)}12%{transform:rotate(-.5deg)}28%{transform:rotate(1.5deg)}50%{transform:rotate(0)}62%{transform:rotate(-.5deg)}78%{transform:rotate(1.2deg)}}
@keyframes logo-drehen{to{transform:rotate(360deg)}}
@keyframes logo-strahlen-puls{0%,100%{transform:scale(1)}35%{transform:scale(1.2)}}
@keyframes logo-stern-puls{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.22) rotate(10deg)}65%{transform:scale(.94) rotate(-5deg)}}
@keyframes logo-glanz-blitz{0%,55%,100%{opacity:0;transform:scale(.2) rotate(0)}70%{opacity:1;transform:scale(1.3) rotate(45deg)}85%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes logo-komet-flug{0.00%{transform:translate(-199.00px,-64.00px) scale(0.45);opacity:0}1.56%{transform:translate(-186.56px,-72.32px) scale(0.48);opacity:1}3.12%{transform:translate(-174.13px,-79.10px) scale(0.52)}4.69%{transform:translate(-161.69px,-84.45px) scale(0.55)}6.25%{transform:translate(-149.25px,-88.44px) scale(0.59)}7.81%{transform:translate(-136.81px,-91.11px) scale(0.62)}9.38%{transform:translate(-124.37px,-92.45px) scale(0.66)}10.94%{transform:translate(-111.94px,-92.45px) scale(0.69)}12.50%{transform:translate(-99.50px,-91.04px) scale(0.73)}14.06%{transform:translate(-87.06px,-88.14px) scale(0.76)}15.62%{transform:translate(-74.63px,-83.61px) scale(0.79)}17.19%{transform:translate(-62.19px,-77.25px) scale(0.83)}18.75%{transform:translate(-49.75px,-68.77px) scale(0.86)}20.31%{transform:translate(-37.31px,-57.75px) scale(0.90)}21.88%{transform:translate(-24.87px,-43.53px) scale(0.93)}23.44%{transform:translate(-12.44px,-25.00px) scale(0.97)}25.00%{transform:translate(0.00px,0.00px) scale(1.00)}92%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(.3);opacity:0}}
.logo-m .komet{animation:logo-komet-flug 8.34783s linear infinite both}
@keyframes logo-schweif-zyklus{0%{clip-path:inset(0 100% 0 0);opacity:1}25.00%{clip-path:inset(-10% -10% -10% -10%)}88%{opacity:1;clip-path:inset(-10% -10% -10% -10%)}97%,100%{opacity:0;clip-path:inset(-10% -10% -10% -10%)}}
.logo-m .schweif{clip-path:inset(0 100% 0 0);transform-box:fill-box;transform-origin:96.0% 96.4%;animation:logo-schweif-zyklus 8.34783s linear infinite both,logo-schweif-wippen 1.04348s ease-in-out 3.13043s infinite}
.logo-m .wolke{transform-box:fill-box;transform-origin:50% 100%;animation:logo-wolke-wippen 1.04348s ease-in-out 3.13043s infinite}
@keyframes logo-strahlen-zyklus{0%,24.50%{opacity:0}28.00%{opacity:1}88%{opacity:1}96%,100%{opacity:0}}
.logo-m .g1{animation-delay:0.22s,0.22s}
.logo-m .g2{animation-delay:0.40s,0.40s}
.logo-m .g3{animation-delay:0.61s,0.61s}
.logo-m .g4{animation-delay:0.82s,0.82s}
.logo-m .g5{animation-delay:1.05s,1.05s}
.logo-m .g6{animation-delay:1.25s,1.25s}
.logo-m .g7{animation-delay:1.43s,1.43s}
.logo-m .g8{animation-delay:1.61s,1.61s}
.logo-m .g9{animation-delay:1.77s,1.77s}
.logo-m .g10{animation-delay:1.91s,1.91s}
.logo-m .links path:nth-child(1),.logo-m .links-unten path:nth-child(1),.logo-m .schatten path:nth-child(1){animation-delay:0.61s}
.logo-m .rechts path:nth-child(1),.logo-m .rechts-unten path:nth-child(1),.logo-m .schatten path:nth-child(9){animation-delay:1.04s}
.logo-m .links path:nth-child(2),.logo-m .links-unten path:nth-child(2),.logo-m .schatten path:nth-child(2){animation-delay:0.68s}
.logo-m .rechts path:nth-child(2),.logo-m .rechts-unten path:nth-child(2),.logo-m .schatten path:nth-child(10){animation-delay:1.11s}
.logo-m .links path:nth-child(3),.logo-m .links-unten path:nth-child(3),.logo-m .schatten path:nth-child(3){animation-delay:0.75s}
.logo-m .rechts path:nth-child(3),.logo-m .rechts-unten path:nth-child(3),.logo-m .schatten path:nth-child(11){animation-delay:1.18s}
.logo-m .links path:nth-child(4),.logo-m .links-unten path:nth-child(4),.logo-m .schatten path:nth-child(4){animation-delay:0.82s}
.logo-m .rechts path:nth-child(4),.logo-m .rechts-unten path:nth-child(4),.logo-m .schatten path:nth-child(12){animation-delay:1.25s}
.logo-m .links path:nth-child(5),.logo-m .links-unten path:nth-child(5),.logo-m .schatten path:nth-child(5){animation-delay:0.89s}
.logo-m .rechts path:nth-child(5),.logo-m .rechts-unten path:nth-child(5),.logo-m .schatten path:nth-child(13){animation-delay:1.32s}
.logo-m .links path:nth-child(6),.logo-m .links-unten path:nth-child(6),.logo-m .schatten path:nth-child(6){animation-delay:0.96s}
.logo-m .rechts path:nth-child(6),.logo-m .rechts-unten path:nth-child(6),.logo-m .schatten path:nth-child(14){animation-delay:1.39s}
.logo-m .links path:nth-child(7),.logo-m .links-unten path:nth-child(7),.logo-m .schatten path:nth-child(7){animation-delay:1.03s}
.logo-m .rechts path:nth-child(7),.logo-m .rechts-unten path:nth-child(7),.logo-m .schatten path:nth-child(15){animation-delay:1.46s}
.logo-m .links path:nth-child(8),.logo-m .links-unten path:nth-child(8),.logo-m .schatten path:nth-child(8){animation-delay:1.10s}
.logo-m .rechts path:nth-child(8),.logo-m .rechts-unten path:nth-child(8),.logo-m .schatten path:nth-child(16){animation-delay:1.53s}
@media (prefers-reduced-motion: reduce){
.logo-m *{animation:none!important}
.logo-m path[pathLength]{stroke-dashoffset:0;opacity:1}
.logo-m .glitzer,.logo-m .strahlen{opacity:1}
.logo-m .schweif{clip-path:none;opacity:1}
}
/* LOGO:ENDE */

/* Weniger Bewegung, wenn im System eingestellt */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sticker, .laufband-spur, .tanzname .wort > span, .tanzname .funke, .groove-knopf, .platte { animation: none !important; }
	*, *::before, *::after { transition: none !important; }
}