/* ==========================================================================
   Farbstil der Startseite für die ganze Seite (2026-11-12)
   Kopf, Fuß, Wörterbuch/Karteikarten. Geladen auf allen Seiten (inc/home.php),
   nach main.css, gloss.css und lexicon.css. Spiele (body.dl-games) bleiben unberührt.
   1. Farben  2. Kopf  3. Fuß  4. Wörterbuch und Karteikarten
   ========================================================================== */

/* 1. Farben (gleich wie home.css) */
:root {
	--b-green: #3CCB8F;  --b-green-2: #1FA67A;
	--b-teal: #3DD6C6;   --b-teal-2: #13A3A0;
	--b-blue: #5AAEFA;   --b-blue-2: #2F80ED;
	--b-violet: #9B8CFA; --b-violet-2: #6D5DF0;
	--b-pink: #FB7DAA;   --b-pink-2: #E9487F;
	--b-orange: #FFAE5C; --b-orange-2: #F5793B;
	--b-yellow: #FFCF4A; --b-yellow-2: #F59E0B;
	--b-rainbow: linear-gradient(90deg, #3CCB8F, #13A3A0 25%, #4F8EF7 50%, #9B8CFA 75%, #FB7DAA);
	--b-go: linear-gradient(135deg, #3CCB8F, #13A3A0);
}

/* 2. Kopf */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--b-rainbow); opacity: .55; pointer-events: none; }
.site-header.is-scrolled::after { opacity: .85; }
.site-header .brand__name { font-weight: 800; }
.site-header .brand__name span, .site-footer .brand__name span {
	background: var(--b-go); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .site-header .brand__name span, :root[data-theme="dark"] .site-footer .brand__name span { background-image: linear-gradient(135deg, #6EE2AE, #5BE0D0); }
.brand__mark { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

/* Navigation: jeder Punkt mit eigener Farbe (wie die Kacheln der Startseite) */
.main-nav__list li:nth-child(1) { --n: var(--b-green); --n2: var(--b-green-2); }
.main-nav__list li:nth-child(2) { --n: var(--b-violet); --n2: var(--b-violet-2); }
.main-nav__list li:nth-child(3) { --n: var(--b-teal); --n2: var(--b-teal-2); }
.main-nav__list li:nth-child(4) { --n: var(--b-pink); --n2: var(--b-pink-2); }
.main-nav__list li:nth-child(5) { --n: var(--b-blue); --n2: var(--b-blue-2); }
.main-nav__list a { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.main-nav__list a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--n), var(--n2)); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.main-nav__list a:hover { background: color-mix(in srgb, var(--n) 14%, transparent); }
.main-nav__list a:hover::before { transform: scale(1.5); }
.main-nav__list a[aria-current] { background: color-mix(in srgb, var(--n) 18%, transparent); color: var(--ink); }
.main-nav__list a[aria-current]::before { transform: scale(1.3); }

/* Knöpfe rechts und Zurück */
.site-header .icon-btn, .site-header .back-btn { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.site-header .icon-btn:hover, .site-header .back-btn:hover { border-color: color-mix(in srgb, var(--b-teal-2) 55%, transparent); background: color-mix(in srgb, var(--b-teal) 12%, var(--surface)); }
.site-header .icon-btn:active, .site-header .back-btn:active { transform: scale(.95); }
.lang-switch__option[aria-pressed="true"] { background: color-mix(in srgb, var(--b-green) 16%, transparent); }

/* Mittlere Breiten (Tablet quer, kleine Laptops): Kopf passt in eine Zeile */
@media (min-width: 921px) and (max-width: 1200px) {
	.site-header__inner { gap: 12px; }
	.main-nav__list { gap: 0; }
	.main-nav__list a { gap: 6px; padding: 8px 10px; font-size: .875rem; }
	.main-nav__list a::before { width: 6px; height: 6px; }
	.header-actions { gap: 6px; }
	.site-header .brand__name { font-size: 1.0625rem; }
}

/* Handy: Menü-Panel mit Farbpunkten, Kopf passt in 360 px */
@media (max-width: 920px) {
	.main-nav { border-radius: 20px; overflow: hidden; }
	.main-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--b-rainbow); }
	.main-nav__list a { display: flex; }
	.main-nav__list a::before { width: 9px; height: 9px; }
}
@media (max-width: 420px) {
	.site-header__inner { gap: 6px; }
	.site-header .icon-btn { min-width: 40px; height: 40px; padding: 0 8px; }
	.site-header .back-btn { height: 40px; margin-inline-end: 2px; }
	.site-header .brand { gap: 6px; min-width: 0; }
	.site-header .brand__name { font-size: 1rem; }
	.site-header .brand__mark { width: 30px; height: 30px; }
	.header-actions { gap: 4px; }
}
@media (max-width: 350px) {
	.site-header .brand__name { display: none; }
}

/* 3. Fuß */
.site-footer { position: relative; padding-block: 22px 16px; border-top: 0; background: transparent; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--b-rainbow); opacity: .55; }
.site-footer__inner { align-items: center; gap: 14px 24px; }
.site-footer .brand__name { font-weight: 700; }
.site-footer__nav ul { gap: 4px; }
.site-footer__nav li:nth-child(5n+1) { --n: var(--b-green); }
.site-footer__nav li:nth-child(5n+2) { --n: var(--b-violet); }
.site-footer__nav li:nth-child(5n+3) { --n: var(--b-teal); }
.site-footer__nav li:nth-child(5n+4) { --n: var(--b-pink); }
.site-footer__nav li:nth-child(5n+5) { --n: var(--b-orange); }
.site-footer__nav a, .site-footer__consent { display: inline-block; padding: 5px 11px; border-radius: 999px; color: var(--ink-2); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.site-footer__consent { border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 400; cursor: pointer; text-decoration: none; }
.site-footer__nav a:hover, .site-footer__consent:hover { background: color-mix(in srgb, var(--n, var(--b-teal)) 16%, transparent); color: var(--ink); }
.site-footer__bottom { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.site-footer__bottom p { opacity: .7; }
.site-footer__bottom::before { content: ""; width: 34px; height: 6px; flex: none; border-radius: 999px; background: var(--b-rainbow); }
@media (max-width: 640px) {
	.site-footer__nav ul { margin-left: -11px; }
}

/* 4. Wörterbuch und Karteikarten: gleiche Farben, Verläufe und Bewegung wie die Startseite */
.lx-page .lx-hero h1 { display: flex; align-items: center; gap: 12px; }
.lx-page .lx-hero h1::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='white' fill-opacity='.28' stroke='none'/%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(140deg, #4CC9F7, #0E9BD8); box-shadow: 0 6px 14px -6px rgba(14, 155, 216, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.lx-page:has(.fc-setup) .lx-hero h1::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='3.5' width='14' height='10' rx='2' transform='rotate(8 13.5 8.5)' fill='white' fill-opacity='.28' stroke='none'/%3E%3Crect x='3.5' y='9' width='14' height='11' rx='2'/%3E%3Cpath d='M7 14.5h7'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(140deg, #FF8A7A, #F25C54); box-shadow: 0 6px 14px -6px rgba(242, 92, 84, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.lx-page .lx-chip { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.lx-page .lx-chip:hover { border-color: color-mix(in srgb, var(--b-teal-2) 50%, transparent); transform: translateY(-1px); }
.lx-page .lx-chip[aria-pressed="true"] { border-color: transparent; background: var(--b-go); color: #fff; box-shadow: 0 4px 12px -6px rgba(19, 163, 160, .8); }
.lx-page .lx-az__b[aria-pressed="true"] { border-color: transparent; background: var(--b-go); color: #fff; }
.lx-page .btn--primary { border: 0; border-radius: 999px; background: var(--b-go); color: #fff; box-shadow: 0 6px 18px -8px rgba(31, 166, 122, .7); transition: transform .2s ease, box-shadow .2s ease; }
.lx-page .btn--primary:hover { background: var(--b-go); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(31, 166, 122, .8); }
.lx-page .lx-rows .lx-letter { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.lx-page .lx-rows .lx-letter::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 3px; background: var(--b-go); transform: rotate(45deg); vertical-align: .05em; }
.lx-page .lx-table { box-shadow: 0 12px 34px -26px rgba(15, 23, 34, .5); }
.lx-page .lx-thead { position: relative; }
.lx-page .lx-table { position: relative; }
.lx-page .lx-table::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--b-rainbow); z-index: 1; }

/* Karteikarten: Schritte mit eigener Farbe */
.fc-step { position: relative; overflow: hidden; }
.fc-step:nth-child(1) { --s: var(--b-green); --s2: var(--b-teal-2); }
.fc-step:nth-child(2) { --s: var(--b-violet); --s2: var(--b-violet-2); }
.fc-step:nth-child(3) { --s: var(--b-orange); --s2: var(--b-orange-2); }
.fc-step { background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--s) 10%, transparent), transparent 55%), var(--surface); }
.fc-step__n { width: 26px; height: 26px; background: linear-gradient(140deg, var(--s), var(--s2)); color: #fff; box-shadow: 0 4px 10px -4px var(--s2); }
.fc-step .lx-chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--s), var(--s2)); box-shadow: 0 4px 12px -6px var(--s2); }
.fc-step .lx-chip:hover { border-color: color-mix(in srgb, var(--s) 60%, transparent); }

/* Themen: farbiger Punkt je Thema (Farben wechseln reihum) */
.fc-topics .lx-chip:not(.fc-topics__all) { --t: var(--b-green); }
.fc-topics .lx-chip:nth-child(7n+2) { --t: var(--b-green); }
.fc-topics .lx-chip:nth-child(7n+3) { --t: var(--b-violet); }
.fc-topics .lx-chip:nth-child(7n+4) { --t: var(--b-blue); }
.fc-topics .lx-chip:nth-child(7n+5) { --t: var(--b-orange); }
.fc-topics .lx-chip:nth-child(7n+6) { --t: var(--b-teal); }
.fc-topics .lx-chip:nth-child(7n+7) { --t: var(--b-pink); }
.fc-topics .lx-chip:nth-child(7n+8) { --t: var(--b-yellow); }
.fc-topics .lx-chip:not(.fc-topics__all) { justify-content: flex-start; }
.fc-topics .lx-chip:not(.fc-topics__all)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); }
.fc-topics .lx-chip small { margin-left: auto; }
.fc-topics .lx-chip[aria-pressed="true"]::before { background: #fff; box-shadow: none; }

/* Start-Leiste */
.fc-go { overflow: hidden; box-shadow: 0 -10px 30px -24px rgba(15, 23, 34, .6); }
.fc-go::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--b-rainbow); }
.fc-go { position: sticky; }

/* Lernen: Karte, Antwort-Knöpfe, Ergebnis */
.lx-play .lx-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--b-violet) 12%, transparent), transparent 60%), var(--surface); box-shadow: 0 18px 40px -28px rgba(15, 23, 34, .7); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
.lx-play .lx-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--b-rainbow); }
.lx-play .lx-card:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(15, 23, 34, .8); }
.lx-play .lx-card__back:not([hidden]) { animation: b-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.lx-play .lx-card__hint { font-size: .8125rem; }
.lx-play .lx-play__btns .btn { border: 0; border-radius: 999px; font-weight: 600; color: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.lx-play .lx-yes { background: var(--b-go); box-shadow: 0 6px 16px -8px rgba(19, 163, 160, .9); }
.lx-play .lx-no { background: linear-gradient(135deg, #FF8A7A, #F25C54); box-shadow: 0 6px 16px -8px rgba(242, 92, 84, .9); }
.lx-play .lx-play__btns .btn:hover { transform: translateY(-2px); }
.lx-play [data-fc-progress] { font-size: .8125rem; }
.lx-done h2 { background: var(--b-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.5rem; }
@keyframes b-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.brand__mark, .main-nav__list a::before, .lx-page .lx-chip, .lx-play .lx-card, .lx-play .lx-card__back { transition: none !important; animation: none !important; }
}