/* muenzlein – Spielereien (Verhalten in /files/spass.js, Markup im Fuß aus /includes/spass.php):
   Hell-Umschaltung zwischen Abschnitten, Wetter-Ebene, Ecke mit Räuchermännchen/Schwibbogen und Menü, Logo, Status, Blick unter die Haube.
   „Bewegung reduzieren“ schaltet alle Bewegungen ab. */

/* ---------- Hell-Umschaltung (Abschnitte mit data-hell) ----------
   Die Farben sind registrierte Eigenschaften, damit der Wechsel am <body> überblendet und alles, was sie nutzt, mitzieht. */
@property --grund { syntax: '<color>'; inherits: true; initial-value: #070b1f; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #eef1fb; }
@property --text-2 { syntax: '<color>'; inherits: true; initial-value: #aab3d3; }
@property --text-3 { syntax: '<color>'; inherits: true; initial-value: #727ca0; }
@property --flaeche { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .045); }
@property --flaeche-2 { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .075); }
@property --rand { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .09); }
@property --rand-2 { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .16); }
@property --ueberschrift { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --akzent-text { syntax: '<color>'; inherits: true; initial-value: #ffc61a; }
@property --karte-grund { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .045); }

:root { --ueberschrift: #fff; --akzent-text: var(--gelb); --karte-grund: rgba(255, 255, 255, .045); }
body { transition: --grund .8s var(--kurve), --text .8s var(--kurve), --text-2 .8s var(--kurve), --text-3 .8s var(--kurve), --flaeche .8s var(--kurve), --flaeche-2 .8s var(--kurve), --rand .8s var(--kurve), --rand-2 .8s var(--kurve), --ueberschrift .8s var(--kurve), --akzent-text .8s var(--kurve), --karte-grund .8s var(--kurve); background-color: var(--grund); color: var(--text); }
h1, h2, h3, h4 { color: var(--ueberschrift); }
.kulisse { transition: opacity .8s var(--kurve); }

body.ist-hell { --grund: #f6f2e8; --text: #151935; --text-2: #484e6c; --text-3: #6f7591; --flaeche: rgba(21, 25, 53, .045); --flaeche-2: rgba(21, 25, 53, .08); --rand: rgba(21, 25, 53, .12); --rand-2: rgba(21, 25, 53, .22); --ueberschrift: #151935; --akzent-text: #9a6a00; --karte-grund: #ffffff; }
body.ist-hell .kulisse { opacity: 0; }
/* Kopf, Abschluss und Fuß bleiben dunkel (eigener Grund); dort gelten die dunklen Werte fest. */
.kopf, .abschluss, .fuss, .nach-oben, .ecke, .haube-kopf, .haube-etikett { --text: #eef1fb; --text-2: #aab3d3; --text-3: #727ca0; --flaeche: rgba(255, 255, 255, .045); --flaeche-2: rgba(255, 255, 255, .075); --rand: rgba(255, 255, 255, .09); --rand-2: rgba(255, 255, 255, .16); --ueberschrift: #fff; --akzent-text: #ffc61a; }
/* Was in site.css fest weiß oder gelb ist, folgt im Inhalt den Variablen. */
main :is(.frage summary, .zahl strong, .vertrauen strong, .preis-betrag strong, .rechner-summe, .konfig-zahl, .knopf-rand, .knopf-rand:hover, .rund:not(:hover), .rechtstext h3, .budget-wert) { color: var(--ueberschrift); }
main .ueber, main .stimme blockquote::before, main .stimme .sterne, main .projekt-merkmale li::before { color: var(--akzent-text); }
body.ist-hell main :is(.frage-inhalt, .karte p, .unter, .kopfzeile p) a:not(.knopf):not(:hover) { color: var(--akzent-text); }
body.ist-hell main :is(.karte, .stimme, .frage, .chip) { background: var(--karte-grund); box-shadow: 0 22px 50px -32px rgba(21, 25, 53, .45); }
body.ist-hell main .schritt::before { background: var(--karte-grund); color: var(--akzent-text); }
body.ist-hell main :is(.knopf-text, code, .karte-icon) { color: var(--akzent-text); }
body.ist-hell main .glanz { background-image: linear-gradient(100deg, #b87400 0%, #d99400 40%, #a85e00 75%, #c98a00 100%); }
body.ist-hell main .knopf-rand:hover { box-shadow: inset 0 0 0 1.5px rgba(21, 25, 53, .4); }

/* ---------- Wetter-Ebene ---------- */
.wetter-ebene { position: fixed; inset: 0; z-index: 150; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Ecke unten links: Figur (Glaskachel wie „nach oben“) mit Menü ---------- */
.ecke { position: fixed; left: 18px; bottom: 18px; z-index: 90; opacity: 0; transform: translateY(20px) scale(.8); transform-origin: 0 100%; pointer-events: none; transition: opacity .35s, transform .45s var(--feder); }
.ecke.zeigen { opacity: 1; transform: none; pointer-events: auto; }
.ecke.offen { z-index: 160; }
html:not(.js) .ecke, html.haube-an .ecke { display: none; }
.volkskunst { position: relative; display: grid; place-items: end center; width: 58px; height: 76px; padding: 0 0 6px; border: 1px solid var(--rand-2); border-radius: 18px; background: rgba(12, 18, 51, .85); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent; transition: border-color .25s, box-shadow .25s; }
.volkskunst:hover, .ecke.offen .volkskunst { border-color: rgba(255, 198, 26, .55); box-shadow: 0 0 26px -6px rgba(255, 198, 26, .55); }
.volkskunst:focus-visible { outline-offset: 4px; }
.raeucher { position: relative; display: block; width: 38px; transition: transform .4s var(--feder); }
.volkskunst:hover .raeucher { transform: rotate(-5deg); }
.raeucher-svg { display: block; width: 100%; }
.ecke.advent .volkskunst { width: 112px; padding-bottom: 7px; }
.schwibbogen { display: block; width: 98px; }
.schwibbogen[hidden], .raeucher[hidden] { display: none; }
.schwibbogen-svg { display: block; width: 100%; overflow: visible; }
.schwibbogen .flamme { fill: #ffd34d; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .35s; filter: drop-shadow(0 0 3px #ffb300) drop-shadow(0 0 8px rgba(255, 179, 0, .7)); }
.schwibbogen .laterne { fill: #3a2a12; transition: fill .4s; }
.schwibbogen .kerze.an .flamme { opacity: 1; animation: flackern 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.37s); }
.schwibbogen.leuchtet .laterne { fill: #ffd34d; filter: drop-shadow(0 0 4px #ffb300); }
.ecke.advent .volkskunst:has(.leuchtet) { border-color: rgba(255, 198, 26, .5); box-shadow: 0 0 26px -4px rgba(255, 198, 26, .6); }
@keyframes flackern { 0% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.92, 1.08) skewX(3deg); } 70% { transform: scale(1.04, .94) skewX(-2deg); } 100% { transform: scale(.96, 1.04) skewX(1deg); } }

/* Menü: Glas wie das Tools-Menü, Spitze zeigt auf die Figur */
.ecke-menue { position: absolute; left: 0; bottom: calc(100% + 14px); display: grid; gap: .7rem; width: min(310px, calc(100vw - 36px)); padding: 1rem; border-radius: 20px; background: #0c1233; border: 1px solid var(--rand-2); color: var(--text-2); font-size: .88rem; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); transform-origin: 28px 100%; animation: ecke-auf .35s var(--feder); }
.ecke-menue[hidden] { display: none; }
.ecke-menue::after { content: ''; position: absolute; left: 21px; top: 100%; border: 8px solid transparent; border-top-color: #0c1233; }
@keyframes ecke-auf { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.ecke-menue p { margin: 0; }
.ecke-spruch { color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.35; }
.ecke-menue .lukas-status { padding-top: .7rem; border-top: 1px solid var(--rand); width: 100%; }
.ecke-haube { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem .9rem; border: 0; border-radius: 14px; background: var(--gelb); color: #111; font: 700 .95rem/1.25 'Exo 2', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(255, 198, 26, .7); transition: transform .3s var(--feder), box-shadow .25s; }
.ecke-haube:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(255, 198, 26, .85); }
.ecke-haube > i { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: rgba(0, 0, 0, .1); transition: transform .4s var(--feder); }
.ecke-haube:hover > i { transform: rotate(-20deg); }
.ecke-haube small { display: block; font-weight: 500; font-size: .78rem; opacity: .75; }
.ecke-schalter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .1rem .15rem; border: 0; background: none; color: var(--text); font: 600 .9rem/1.3 'Exo 2', sans-serif; text-align: left; cursor: pointer; }
.ecke-schalter[hidden] { display: none; }
.ecke-schalter small { display: block; color: var(--text-3); font-weight: 500; font-size: .78rem; }
.ecke-schalter > i { position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--rand-2); transition: background .25s; }
.ecke-schalter > i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-2); transition: transform .3s var(--feder), background .25s; }
.ecke-schalter[aria-checked="true"] > i { background: var(--gelb); box-shadow: none; }
.ecke-schalter[aria-checked="true"] > i::after { transform: translateX(17px); background: #111; }
@media (max-width: 600px) {
    .ecke { left: 12px; bottom: 14px; }
    .volkskunst { width: 48px; height: 64px; border-radius: 15px; padding-bottom: 5px; }
    .raeucher { width: 31px; }
    .ecke.advent .volkskunst { width: 92px; }
    .schwibbogen { width: 80px; }
    .ecke-menue { width: min(310px, calc(100vw - 24px)); }
}

/* Zeilen im Fuß */
.fuss-ecke { display: grid; gap: .45rem; margin-top: 1.4rem; font-size: .88rem; color: var(--text-2); }
.fuss-ecke p { margin: 0; }

/* Rauch: Wölkchen steigen aus dem Pfeifenkopf (Lage in Prozent der Figur) */
.rauch { position: absolute; left: 74%; top: 44%; width: 0; height: 0; pointer-events: none; }
.rauch i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 230, 245, .55), rgba(225, 230, 245, 0) 70%); animation: paffen 3.4s ease-out forwards; }
.rauch i.ring { width: 16px; height: 9px; left: -8px; top: -4px; background: none; border: 2.5px solid rgba(235, 238, 250, .7); animation: ring 2.4s ease-out forwards; }
@keyframes paffen { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 10px), -95px) scale(4.2); opacity: 0; } }
@keyframes ring { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx, 6px), -110px) scale(3.4); opacity: 0; } }
.volkskunst-blase { position: absolute; left: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(250px, calc(100vw - 36px)); padding: .45rem .75rem; border-radius: 12px; background: #fff; color: #151935; font-size: .82rem; font-weight: 600; line-height: 1.35; text-align: left; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translate(var(--blase-dx, 0px), 6px); transition: opacity .25s, transform .35s var(--feder); pointer-events: none; }
.volkskunst-blase::after { content: ''; position: absolute; left: clamp(8px, calc(21px - var(--blase-dx, 0px)), calc(100% - 22px)); top: 100%; border: 7px solid transparent; border-top-color: #fff; }
.volkskunst-blase.zeigen { opacity: 1; transform: translateX(var(--blase-dx, 0px)); }

/* Status „Lukas ist gerade …“ */
.lukas-status { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; color: var(--text-2); }
.lukas-status b { color: var(--ueberschrift); font-weight: 700; }
.lukas-status small { display: block; color: var(--text-3); font-size: .9em; }
.status-punkt { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gelb); }
.status-punkt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulsieren 2s ease-out infinite; }
.lukas-status[data-art="frei"] .status-punkt { background: var(--gruen); }
.lukas-status[data-art="schlaeft"] .status-punkt { background: var(--text-3); }
.lukas-status[data-art="schlaeft"] .status-punkt::after { animation: none; }
@keyframes pulsieren { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.karte .lukas-status { margin: .2rem 0 0; padding: .55rem .9rem; border-radius: 14px; background: var(--flaeche-2); border: 1px solid var(--rand); }

.spass-schalter { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.spass-schalter button { padding: 0; border: 0; background: none; color: var(--text-3); font: 600 .84rem 'Exo 2', sans-serif; cursor: pointer; }
.spass-schalter button:hover { color: var(--gelb); }
.spass-schalter button[hidden] { display: none; }

/* ---------- Logo ---------- */
.marke img { transition: transform .5s var(--feder); transform-origin: 50% 60%; }
.marke.wackelt img { animation: wackeln .8s var(--feder); }
.marke.faellt img { animation: umfallen 2.6s var(--feder) forwards; }
@keyframes wackeln { 0% { transform: scale(1); } 20% { transform: scale(1.18, .82) rotate(-4deg); } 40% { transform: scale(.88, 1.12) rotate(3deg); } 60% { transform: scale(1.06, .95) rotate(-2deg); } 80% { transform: scale(.98, 1.02); } 100% { transform: scale(1); } }
@keyframes umfallen { 0% { transform: none; } 25% { transform: rotate(12deg); } 45% { transform: translateY(14px) rotate(96deg); } 55% { transform: translateY(10px) rotate(84deg); } 62% { transform: translateY(14px) rotate(92deg); } 80% { transform: translateY(14px) rotate(90deg); } 100% { transform: none; } }
.logo-blase { position: absolute; left: 14px; top: calc(100% + 10px); z-index: 5; width: max-content; max-width: min(280px, 80vw); padding: .55rem .85rem; border-radius: 14px; background: #fff; color: #151935; font-size: .88rem; font-weight: 700; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); opacity: 0; transform: translate(var(--blase-dx, 0px), -6px) scale(.95); transform-origin: 20px 0; transition: opacity .25s, transform .35s var(--feder); pointer-events: none; }
.logo-blase::before { content: ''; position: absolute; left: clamp(8px, calc(22px - var(--blase-dx, 0px)), calc(100% - 22px)); bottom: 100%; border: 7px solid transparent; border-bottom-color: #fff; }
.logo-blase.zeigen { opacity: 1; transform: translateX(var(--blase-dx, 0px)); }

/* ---------- Blick unter die Haube ---------- */
.navi-tools-haube { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rand); }
.navi-tools-haube button { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .7rem; width: 100%; padding: .7rem .9rem; border: 0; border-radius: 12px; background: none; color: var(--text); font: 600 1rem 'Exo 2', sans-serif; text-align: left; cursor: pointer; }
.navi-tools-haube button i { grid-row: span 2; align-self: center; color: var(--gelb); text-align: center; }
.navi-tools-haube small { color: var(--text-3); font-weight: 500; font-size: .78rem; }
.navi-tools-haube button:hover { background: var(--flaeche-2); color: #fff; }
@media (max-width: 980px) { .navi-tools-haube { border: 0; } .navi-tools-haube button { font-size: 1.1rem; padding: .7rem .4rem; } }
.haube-raster { position: fixed; inset: 0; z-index: 400; pointer-events: none; background-image: repeating-linear-gradient(to bottom, rgba(61, 90, 254, .14) 0 1px, transparent 1px 8px); }
.haube-spalten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); width: min(100% - 2 * clamp(18px, 4vw, 40px), var(--breite)); height: 100%; margin-inline: auto; }
.haube-spalten span { background: rgba(251, 113, 133, .07); border-inline: 1px solid rgba(251, 113, 133, .28); }
.haube-kasten { position: fixed; z-index: 401; pointer-events: none; box-sizing: border-box; transition: all .08s linear; }
.haube-aussen { background: rgba(255, 159, 26, .22); }
.haube-innen { background: rgba(52, 211, 153, .25); }
.haube-inhalt { background: rgba(61, 90, 254, .28); outline: 1px solid rgba(120, 140, 255, .9); }
.haube-etikett { position: fixed; z-index: 402; max-width: min(340px, calc(100vw - 20px)); padding: .6rem .8rem; border-radius: 12px; background: #0c1233; border: 1px solid rgba(255, 255, 255, .18); color: var(--text-2); font: 500 .8rem/1.45 ui-monospace, 'SF Mono', Menlo, monospace; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); pointer-events: none; }
.haube-etikett b { color: var(--gelb); }
.haube-etikett em { display: block; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 600 .84rem/1.45 'Exo 2', sans-serif; font-style: normal; }
.haube-etikett .farbe { display: inline-block; width: .8em; height: .8em; margin-right: .3em; border-radius: 3px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.haube-kopf { position: fixed; left: 50%; bottom: 18px; z-index: 403; display: flex; align-items: center; gap: .8rem; max-width: calc(100vw - 24px); padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: #0c1233; border: 1px solid rgba(255, 198, 26, .4); color: var(--text); font-size: .88rem; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); transform: translateX(-50%); }
.haube-kopf button { flex: none; padding: .4rem .9rem; border: 0; border-radius: 999px; background: var(--gelb); color: #111; font: 700 .84rem 'Exo 2', sans-serif; cursor: pointer; }
html.haube-an, html.haube-an * { cursor: crosshair !important; }
html.haube-an .haube-kopf, html.haube-an .haube-kopf * { cursor: pointer !important; }

@media (prefers-reduced-motion: reduce) {
    body, .kulisse { transition: none; }
    .rauch, .marke img, .status-punkt::after, .schwibbogen .flamme { animation: none !important; }
    .ecke, .ecke-menue { transition: none; animation: none; }
}

/* Räuchermännchen und „nach oben“ liegen unten in den Ecken: die Schlusszeile des Fußes rückt dafür ein */
@media (max-width: 1400px) { .fuss-leiste { padding-inline: 64px; } }
@media (max-width: 600px) { .fuss-leiste { padding-inline: 54px; } }