/* ══════════════════════════════════════════════════════════════════════
   LATIN FESTIVAL STUTTGART — Gestaltung der neuen Website
   Entwurf vom 2026-11-03 · P-0012

   GRUNDGEDANKE
   Das Festival ist eine Nachtveranstaltung, und das Logo ist Gold auf
   Dunkel. Auf dem hellen Sandton der alten Seite verliert es; auf fast
   schwarzem Grund leuchtet es. Deshalb: dunkle Seite, warmes Weiss als
   Schrift, eine heisse Hauptfarbe und eine kuehle Gegenfarbe.

   GOLD KOMMT NUR IM LOGO VOR (Kia, 2026-11-03). Nirgends sonst — keine
   goldenen Knoepfe, keine goldenen Raender, keine goldenen Linien.
   ══════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Grundtoene ─────────────────────────────────────────────────
	   Nicht reines Schwarz: ein Hauch Violett darin macht die roten
	   und gruenen Akzente lebendiger, ohne dass man die Faerbung sieht. */
	--nacht:      #0E0C11;   /* Seitengrund */
	--tief:       #15121A;   /* abgesetzte Baender */
	--erhoben:    #1D1824;   /* Karten */
	--erhoben-2:  #262030;   /* Karten beim Beruehren */
	--linie:      rgba(255, 255, 255, .10);
	--linie-hell: rgba(255, 255, 255, .18);

	/* ── Hauptfarbe: Glut ───────────────────────────────────────────
	   Das alte Weinrot (#7A121C) ist gedeckt und wirkt wie ein
	   Restaurant. Glut hat die Energie, die zu Salsa gehoert. */
	--glut:       #E23E57;
	--glut-hell:  #FF7389;
	--glut-tief:  #A11F35;   /* fuer Flaechen hinter hellem Text */

	/* ── Gegenfarbe: Jade ───────────────────────────────────────────
	   Kuehl gegen das warme Rot. Haelt die Seite davon ab, eintoenig
	   zu werden, und markiert alles Zweitrangige (Zeiten, Marken). */
	--jade:       #2FC3A2;
	--jade-tief:  #137A63;

	/* ── Schrift ────────────────────────────────────────────────────
	   Warmes Weiss statt reinem Weiss: auf dunklem Grund ist reines
	   Weiss hart und flimmert beim Lesen. */
	--creme:      #F7F2EA;
	--gedaempft:  #ADA3B0;
	--leise:      #7C7383;

	--schrift-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
	--schrift-text:    "Figtree", ui-sans-serif, system-ui, sans-serif;

	/* ── Masse ──────────────────────────────────────────────────────
	   Alles auf einem 4-Punkte-Raster, wie im alten Designsystem. */
	--rand:       14px;      /* Eckenrundung Karten */
	--rand-klein: 8px;
	--breite:     1180px;
	--luft:       clamp(56px, 9vw, 112px);   /* Abstand zwischen Abschnitten */
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--nacht);
	color: var(--creme);
	font-family: var(--schrift-text);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--glut-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--creme); }

:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; border-radius: 4px; }

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: 22px; }

/* ══════════════════ Kopfzeile ══════════════════ */

.kopf {
	/* env(...) ist auf einer normalen Website 0 — auf dem Handy haelt es die
	   Kopfleiste unter der Statusleiste des Geraets. */
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
	background: rgba(14, 12, 17, .82);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--linie);
}
.kopf-innen {
	display: flex; align-items: center; gap: 18px;
	min-height: 86px;
}
.kopf-logo { flex: 0 0 auto; display: flex; align-items: center; }
/* Kia, 2026-11-04: erst "ein bisschen größer", dann genauer: "Mach den Logo
   oben so 70px. Unten 60px reicht es aus."
   Die Kopfleiste waechst dadurch von 68 auf 86 px — deshalb unten auch
   scroll-padding-top nachgezogen, sonst rutschen Sprungziele unter die Leiste.
   Am Handy bleibt das Logo kleiner (siehe Handy-Abschnitt): 70 px waeren dort
   131 px breit und wuerden Logo, Ticketknopf und Menueknopf aus der Zeile
   druecken. */
.kopf-logo img { height: 70px; width: auto; }

.kopf-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.kopf-nav a {
	position: relative;
	padding: 10px 11px; min-height: 44px;
	display: flex; align-items: center;
	font-size: 14px; font-weight: 600; letter-spacing: .01em;
	color: var(--gedaempft); text-decoration: none;
	border-radius: var(--rand-klein);
	transition: color .18s ease, background-color .18s ease;
	white-space: nowrap;
}
.kopf-nav a:hover { color: var(--creme); background: rgba(255,255,255,.05); }
.kopf-nav a[aria-current="page"] { color: var(--creme); }
.kopf-nav a[aria-current="page"]::after {
	content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px;
	height: 2px; background: var(--glut); border-radius: 2px;
}

.kopf-tat { flex: 0 0 auto; margin-left: 10px; }

/* Menueknopf fuers Handy */
.kopf-burger {
	display: none; margin-left: auto;
	width: 44px; height: 44px; padding: 0;
	background: none; border: 1px solid var(--linie-hell); border-radius: var(--rand-klein);
	color: var(--creme); cursor: pointer;
}
.kopf-burger span { display: block; width: 18px; height: 2px; margin: 3px auto;
	background: currentColor; border-radius: 2px; }

/* ══════════════════ Knoepfe ══════════════════ */

.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 50px; padding: 13px 26px;
	border: 1px solid transparent; border-radius: var(--rand-klein);
	font-family: var(--schrift-text); font-size: 16px; font-weight: 700;
	letter-spacing: .01em; text-decoration: none; cursor: pointer;
	transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s ease, border-color .18s ease;
}
.knopf:hover { transform: translateY(-2px); }

.knopf--glut   { background: var(--glut); color: #14070A; }
.knopf--glut:hover { background: var(--glut-hell); color: #14070A; }

.knopf--leer   { background: transparent; color: var(--creme); border-color: var(--linie-hell); }
.knopf--leer:hover { background: rgba(255,255,255,.07); color: var(--creme); border-color: var(--creme); }

.knopf--jade   { background: var(--jade); color: #04211B; }
.knopf--jade:hover { background: #4FD9BA; color: #04211B; }

.knopf--klein  { min-height: 42px; padding: 9px 18px; font-size: 14.5px; }

/* ══════════════════ Hero ══════════════════ */

.hero { position: relative; isolation: isolate; overflow: hidden;
	min-height: min(88vh, 760px); display: grid; place-items: center; text-align: center; }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 90% at 50% 18%, rgba(14,12,17,.56) 0%, rgba(14,12,17,.88) 58%, var(--nacht) 100%),
		linear-gradient(180deg, rgba(226,62,87,.10) 0%, transparent 42%);
}
.hero-innen { padding: 96px 22px 84px; }
.hero-logo { width: min(460px, 82vw); margin: 0 auto 30px; }

.hero-datum {
	display: inline-flex; align-items: center; gap: 12px;
	margin: 0 0 20px; padding: 7px 16px;
	border: 1px solid var(--linie-hell); border-radius: 99px;
	font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--creme);
}
.hero-datum b { color: var(--jade); font-weight: 800; }

.hero h1 {
	margin: 0 0 16px;
	font-family: var(--schrift-display);
	font-size: clamp(32px, 5.6vw, 62px); font-weight: 800; line-height: 1.04;
	letter-spacing: -.03em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--glut); }
.hero-unter { margin: 0 auto 32px; max-width: 54ch; font-size: clamp(16px, 2vw, 19px); color: var(--gedaempft); }
.hero-tat { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════ Abschnitte ══════════════════ */

.abschnitt { padding-block: var(--luft); }
.abschnitt--tief { background: var(--tief); }

.marke {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 12px;
	font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--jade);
}
.marke::before { content: ""; width: 22px; height: 2px; background: var(--jade); border-radius: 2px; }

h2.titel {
	margin: 0 0 14px;
	font-family: var(--schrift-display);
	font-size: clamp(27px, 4.2vw, 42px); font-weight: 800; line-height: 1.1;
	letter-spacing: -.025em; text-wrap: balance;
}
.vorspann { margin: 0 0 38px; max-width: 62ch; font-size: 17.5px; color: var(--gedaempft); }

/* ══════════════════ Programm: vier Tage ══════════════════ */

.tage { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.tag {
	display: flex; flex-direction: column;
	background: var(--erhoben); border: 1px solid var(--linie);
	border-radius: var(--rand); overflow: hidden;
	transition: border-color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.tag:hover { border-color: var(--linie-hell); transform: translateY(-3px); }

.tag-kopf { padding: 18px 20px 14px; border-bottom: 1px solid var(--linie);
	background: linear-gradient(170deg, rgba(226,62,87,.13) 0%, transparent 100%); }
.tag-name { margin: 0; font-family: var(--schrift-display);
	font-size: 19px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.tag-datum { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--jade); letter-spacing: .04em; }

.tag-block { padding: 16px 20px; }
.tag-block + .tag-block { border-top: 1px solid var(--linie); }
.tag-block h4 {
	margin: 0 0 10px; font-size: 11.5px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; color: var(--leise);
}
.zeiten { list-style: none; margin: 0; padding: 0; }
.zeiten li { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 15px; }
.zeiten li + li { border-top: 1px solid rgba(255,255,255,.05); }
.zeiten .uhr { flex: 0 0 62px; font-variant-numeric: tabular-nums;
	font-weight: 700; color: var(--jade); font-size: 14px; }
.zeiten .was { color: var(--creme); }

.djs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.djs li {
	padding: 4px 10px; border: 1px solid var(--linie); border-radius: 99px;
	font-size: 12.5px; font-weight: 600; color: var(--gedaempft);
}
.tag-ort { margin: 14px 20px 18px; padding-top: 14px; border-top: 1px solid var(--linie);
	font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.tag-ort b { display: block; color: var(--creme); font-weight: 700; font-size: 14px; margin-bottom: 2px; }

/* ══════════════════ Künstler ══════════════════ */

.leute { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }

/* Die Bilddateien sind rund freigestellt (transparente Ecken) und tragen den
   Namen bereits eingebrannt — Kia bleibt bei diesen Bildern (FAKTEN.md).
   Deshalb runde Karten statt eckiger, und der Name steht UNTER dem Bild:
   ein Schild quer ueber dem Bild wuerde den eingebrannten Namen doppeln. */
.person { position: relative; text-align: center; }
.person-bild {
	position: relative; aspect-ratio: 1; border-radius: 50%;
	overflow: hidden; isolation: isolate;
	background: radial-gradient(circle at 50% 38%, var(--erhoben-2) 0%, var(--erhoben) 72%);
	border: 1px solid var(--linie);
	transition: border-color .25s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.person-bild img { width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s cubic-bezier(.2,.7,.3,1), filter .3s ease;
	filter: saturate(.9) contrast(1.02); }
.person:hover .person-bild { border-color: var(--glut); transform: translateY(-3px); }
.person:hover .person-bild img { transform: scale(1.04); filter: none; }

.person-name {
	margin: 11px 2px 0;
	font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--creme);
	text-wrap: balance;
}
.person-rolle { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--jade); margin-top: 2px; }

/* ══════════════════ Workshops ══════════════════ */

.reiter { display: flex; gap: 6px; margin: 0 0 24px; flex-wrap: wrap; }
.reiter button {
	padding: 10px 20px; min-height: 44px;
	background: var(--erhoben); color: var(--gedaempft);
	border: 1px solid var(--linie);
	/* Kia, 2026-11-04: "das sind zu rund ... ähnlich wie die Room 1, Room 2,
	   Room 3" — deshalb dieselbe Rundung wie die Raumkästen, keine Pille. */
	border-radius: var(--rand);
	font-family: var(--schrift-text); font-size: 14.5px; font-weight: 700;
	cursor: pointer; transition: all .18s ease;
}
.reiter button:hover { color: var(--creme); border-color: var(--linie-hell); }
.reiter button[aria-selected="true"] { background: var(--glut); color: #14070A; border-color: var(--glut); }

.raeume { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.raum { background: var(--erhoben); border: 1px solid var(--linie); border-radius: var(--rand); overflow: hidden; }
.raum h4 {
	margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--linie);
	font-family: var(--schrift-display); font-size: 13px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: var(--jade);
	background: rgba(47,195,162,.07);
}
.kurse { list-style: none; margin: 0; padding: 6px 0; }
.kurse li { padding: 11px 18px; }
.kurse li + li { border-top: 1px solid rgba(255,255,255,.05); }
.kurs-zeit { font-size: 12.5px; font-weight: 700; color: var(--jade);
	font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kurs-wer { display: block; font-size: 15.5px; font-weight: 700; color: var(--creme); margin-top: 2px; }
.kurs-was { display: block; font-size: 13.5px; color: var(--gedaempft); }

/* ══════════════════ Preiskarten ══════════════════ */

.preise { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.preis {
	display: flex; flex-direction: column;
	background: var(--erhoben); border: 1px solid var(--linie);
	border-radius: var(--rand); overflow: hidden;
	transition: border-color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.preis:hover { border-color: var(--linie-hell); transform: translateY(-3px); }
.preis--gehoben { border-color: var(--glut); }
.preis-marke {
	align-self: flex-start; margin: 14px 0 0 18px; padding: 4px 11px;
	background: var(--glut); color: #14070A; border-radius: 99px;
	font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.preis-kopf { padding: 18px 20px 4px; }
.preis h3 { margin: 0; font-family: var(--schrift-display); font-size: 18px;
	font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.preis-was { margin: 4px 0 0; font-size: 14px; color: var(--gedaempft); }
.preis-zahl { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 6px; }
.preis-jetzt { font-family: var(--schrift-display); font-size: 44px; font-weight: 800;
	line-height: 1; color: var(--creme); letter-spacing: -.03em; }
.preis-vorher { font-size: 19px; color: var(--leise); text-decoration: line-through; }
.preis-frist { margin: 0 20px 14px; font-size: 13px; font-weight: 600; color: var(--jade); }
.preis-liste { list-style: none; margin: 0; padding: 0 20px; }
.preis-liste li { padding: 8px 0; font-size: 14.5px; color: var(--gedaempft); }
.preis-liste li + li { border-top: 1px solid rgba(255,255,255,.05); }
.preis-fuss { margin-top: auto; padding: 18px 20px 20px; }
.preis-fuss .knopf { width: 100%; }

/* ══════════════════ Orte ══════════════════ */

.orte { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ort { background: var(--erhoben); border: 1px solid var(--linie);
	border-radius: var(--rand); overflow: hidden; }
.ort-bild { aspect-ratio: 16/9; overflow: hidden; }
.ort-bild img { width: 100%; height: 100%; object-fit: cover; }
.ort-text { padding: 20px 22px 22px; }
.ort h3 { margin: 0 0 4px; font-family: var(--schrift-display);
	font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ort-wofuer { margin: 0 0 12px; font-size: 13px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--jade); }
.ort address { font-style: normal; font-size: 15.5px; line-height: 1.6; color: var(--gedaempft); }

/* ══════════════════ Fusszeile ══════════════════ */

.fuss { background: var(--tief); border-top: 1px solid var(--linie); padding-block: 56px 28px; }
.fuss-gitter { display: grid; gap: 34px; grid-template-columns: 1.4fr 1fr 1fr; }
.fuss-logo img { height: 60px; width: auto; margin-bottom: 16px; }
.fuss p { margin: 0 0 8px; font-size: 15px; color: var(--gedaempft); }
.fuss h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 4px 0; }
.fuss a { color: var(--gedaempft); text-decoration: none; font-size: 15px; }
.fuss a:hover { color: var(--creme); text-decoration: underline; }
.fuss-unten { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie);
	display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
	font-size: 13.5px; color: var(--leise); }

/* ══════════════════ Handy ══════════════════ */

/* Neun Menuepunkte plus Ticketknopf brauchen rund 1000 px. Darunter wird das
   Menue zum Klappmenue — sonst schiebt der Knopf aus dem Bild (geprueft am
   2026-11-04 bei 1009 px: 23 px Ueberlauf). */
@media (max-width: 1040px) {
	.kopf-nav {
		position: fixed; inset: 68px 0 auto; z-index: 99;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 10px 16px 18px;
		background: var(--tief); border-bottom: 1px solid var(--linie);
		max-height: calc(100vh - 68px); overflow-y: auto;
	}
	.kopf-nav[hidden] { display: none !important; }
	.kopf-nav a { padding: 13px 14px; font-size: 16px; }
	.kopf-nav a[aria-current="page"]::after { display: none; }

	/* Kia, 2026-09-20 zur alten Seite: „ticket Order Link oben will ich mit Menü
	   auf der gleiche Linie ist" — der Ticketknopf bleibt also sichtbar und steht
	   neben dem Menueknopf, nicht darunter und nicht versteckt im Klappmenue. */
	/* Am Handy bleibt die Kopfleiste 68 px hoch — darauf ist unten das
	   Klappmenue mit `inset: 68px` eingestellt. */
	.kopf-innen { min-height: 68px; }
	.kopf-logo { order: 1; }
	.kopf-logo img { height: 44px; }
	.kopf-tat { order: 2; display: block; margin-left: auto; }
	.kopf-tat .knopf { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
	.kopf-burger { order: 3; display: block; margin-left: 10px; }
	.kopf-innen { gap: 10px; }
}

@media (max-width: 860px) {
	.fuss-gitter { grid-template-columns: 1fr; gap: 26px; }
	.leute { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
}

@media (max-width: 560px) {
	/* Der Datumsstreifen bricht sonst mitten im Datum um und die Luecken
	   reissen auf. Schmaler, enger, mittig — und als ein Block, nicht als
	   drei Teile, die sich verteilen. */
	.hero-datum {
		display: block; text-align: center;
		padding: 8px 14px; font-size: 11.5px; letter-spacing: .1em; line-height: 1.6;
	}
	.hero-innen { padding: 72px 20px 64px; }
	.hero-logo { margin-bottom: 24px; }
	.hero-tat .knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.knopf:hover, .tag:hover, .preis:hover { transform: none; }
	.person:hover .person-bild, .person:hover .person-bild img { transform: none; }
}

/* ══════════════════ WhatsApp-Gemeinschaft ══════════════════
   Hinweisfenster, das nach fuenf Sekunden kommt (Kia, 2026-11-04).

   ⚠️ STOLPERFALLE 6 (AGENTS.md). Genau so ein Fenster hat am 2026-09-08 die
   ganze Seite unbedienbar gemacht: die eigene Regel `display: flex` schlug
   die Browser-Regel `[hidden] { display: none }`, die durchsichtige Schicht
   lag ueber allem und fing jeden Klick ab. Die Seite sah normal aus.

   Zwei Sperren, beide noetig:
     1. .lf-wa[hidden] { display: none !important }  — schlaegt die eigene Regel
     2. pointer-events: none, solange nicht .lf-wa-auf — faengt das eine Bild
        ab, in dem das Fenster schon da, aber noch durchsichtig ist
   Nach jeder Aenderung hier: elementFromPoint an vier Stellen UND ein echter
   Klick auf einen Menuepunkt, im geschlossenen Zustand. */

.lf-wa {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	padding: 20px;
	background: rgba(6, 5, 9, .74);
	-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}
.lf-wa[hidden] { display: none !important; }
.lf-wa.lf-wa-auf { opacity: 1; pointer-events: auto; }

.lf-wa-kasten {
	position: relative;
	width: min(430px, 100%);
	padding: 30px 28px 26px;
	background: var(--erhoben);
	border: 1px solid var(--linie-hell); border-radius: var(--rand);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .66);
	text-align: center;
	transform: translateY(14px) scale(.98);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.lf-wa.lf-wa-auf .lf-wa-kasten { transform: none; }

.lf-wa-zu {
	position: absolute; top: 10px; right: 10px;
	width: 38px; height: 38px; padding: 0;
	background: none; border: 1px solid transparent; border-radius: var(--rand-klein);
	color: var(--leise); font-size: 19px; line-height: 1; cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}
.lf-wa-zu:hover { color: var(--creme); border-color: var(--linie-hell); }

.lf-wa-kreis {
	width: 58px; height: 58px; margin: 0 auto 16px;
	display: grid; place-items: center;
	background: rgba(47, 195, 162, .13);
	border: 1px solid rgba(47, 195, 162, .35);
	border-radius: 50%;
}
.lf-wa-kreis svg { width: 29px; height: 29px; display: block; fill: var(--jade); }

.lf-wa-marke {
	margin: 0 0 8px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--jade);
}
.lf-wa h2 {
	margin: 0 0 10px;
	font-family: var(--schrift-display);
	font-size: 24px; font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
	color: var(--creme); text-wrap: balance;
}
.lf-wa p { margin: 0 0 18px; font-size: 15.5px; color: var(--gedaempft); }

.lf-wa-liste { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.lf-wa-liste li {
	position: relative; padding: 5px 0 5px 26px;
	font-size: 15px; color: var(--gedaempft);
}
.lf-wa-liste li::before {
	content: ""; position: absolute; left: 3px; top: 13px;
	width: 10px; height: 6px;
	border-left: 2px solid var(--jade); border-bottom: 2px solid var(--jade);
	transform: rotate(-45deg);
}
.lf-wa .knopf { width: 100%; }
.lf-wa-spaeter {
	display: inline-block; margin-top: 12px; padding: 6px 10px;
	background: none; border: 0;
	font-family: var(--schrift-text); font-size: 14px; color: var(--leise);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lf-wa-spaeter:hover { color: var(--gedaempft); }

@media (max-width: 560px) {
	/* Am Handy als Blatt von unten — ein Kasten mitten im Bild wirkt dort
	   wie eine Sperre, von unten wie ein Hinweis. */
	.lf-wa { place-items: end center; padding: 12px; }
	.lf-wa-kasten { padding: 26px 20px 22px; border-radius: 16px; }
	.lf-wa h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-wa, .lf-wa-kasten { transition: none !important; }
	.lf-wa-kasten { transform: none !important; }
}