/* Altar der Lichter, Palette B, Schriften von Malenas Website */
:root { --nebel: #eef2f4; --nacht: #35495e; --mitternacht: #17222f; --gold: #b8955a; --gold-hell: #d4b77e; --titel: 'Cinzel Decorative', Georgia, serif; --text: 'Outfit', system-ui, sans-serif; --ui: 'Outfit', system-ui, sans-serif; --akzent: 'Dancing Script', cursive; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--text); color: var(--nebel); background: var(--mitternacht) url('/bilder/18.jpg') center / cover fixed; }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(23, 34, 47, 0.35), rgba(23, 34, 47, 0.82) 60%, rgba(23, 34, 47, 0.95)); z-index: -1; }
.fassung { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 20; font-family: var(--ui); font-size: 1rem; background: var(--mitternacht); color: var(--nebel); padding: 0.2rem 0.6rem; border-radius: 1rem; }
main { max-width: 46rem; margin: 0 auto; padding: 5.5rem 1rem 3rem; text-align: center; }
.zurueck { position: absolute; top: 0.9rem; left: 1rem; font-family: var(--ui); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nebel); text-decoration: none; }
.kicker { margin: 0; font-family: var(--ui); font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hell); }
h1 { font-family: var(--titel); font-weight: 400; font-size: clamp(1.8rem, 6vw, 3rem); margin: 0.4rem 0 0.6rem; }
.sagt { max-width: 32rem; margin: 0 auto; opacity: 0.9; }
.zaehler { margin: 2rem 0 0.4rem; font-family: var(--akzent); font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--gold-hell); }
.zaehler b { font-family: var(--titel); font-weight: 400; font-size: 1.15em; }

/* Altar */
.altar { position: relative; margin: 1.5rem auto 0; padding: 2rem 1.2rem 1.6rem; border-radius: 50% 50% 1rem 1rem / 22% 22% 1rem 1rem; background: linear-gradient(rgba(53, 73, 94, 0.45), rgba(23, 34, 47, 0.6)); border: 1px solid rgba(212, 183, 126, 0.35); box-shadow: 0 0 80px rgba(212, 183, 126, 0.18) inset; }
.kerzen { display: grid; grid-template-columns: repeat(var(--spalten, 20), 1fr); gap: 0.45rem 0.25rem; justify-items: center; }
.kerze { position: relative; width: 0.55rem; height: calc(1.2rem * var(--h, 1)); border-radius: 0.15rem; background: linear-gradient(#fbf3e4, #d9cbb2); }
.kerze::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0.45rem; height: 0.8rem; margin-left: -0.225rem; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: radial-gradient(circle at 50% 70%, #fffaf0 0 25%, #f6d99a 45%, rgba(212, 150, 60, 0.6) 70%, transparent 75%); box-shadow: 0 0 10px 3px rgba(246, 217, 154, 0.55); animation: flamme 2.3s ease-in-out infinite; animation-delay: var(--v); transform-origin: 50% 100%; }
.kerze.mein { background: linear-gradient(#fff2cf, #d4b77e); }
.kerze.mein::before { box-shadow: 0 0 18px 7px rgba(246, 217, 154, 0.95); }
.kerze.mein::after { content: "Dein Licht"; position: absolute; top: 130%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--akzent); font-size: 1rem; color: var(--gold-hell); }
.kerze.freundin::before { box-shadow: 0 0 14px 5px rgba(240, 190, 200, 0.85); }
.kerze.neu::before { animation: entzuenden 1.6s ease-out, flamme 2.3s ease-in-out 1.6s infinite; }
@keyframes flamme { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.06, 1.12) rotate(-2deg); } 50% { transform: scale(0.95, 0.92) rotate(1.5deg); } 75% { transform: scale(1.03, 1.08) rotate(-1deg); } }
@keyframes entzuenden { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(1); } }

/* Schwellen */
.schwellen { margin: 1.6rem auto 0; max-width: 30rem; text-align: left; }
.balken { height: 0.45rem; background: rgba(238, 242, 244, 0.18); border-radius: 1rem; overflow: hidden; }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hell)); border-radius: 1rem; transition: width 1.2s ease; }
.schwelle { margin: 0.6rem 0 0.8rem; font-size: 1rem; }
.schwelle b { color: var(--gold-hell); font-weight: 400; }
#liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 1rem; opacity: 0.85; }
#liste li { display: flex; gap: 0.8rem; align-items: baseline; }
#liste span { font-family: var(--titel); color: var(--gold-hell); min-width: 3rem; }
#liste li.erreicht { opacity: 0.6; text-decoration: line-through; }

/* Mitmachen */
.mitmachen { margin: 2rem auto 0; max-width: 26rem; background: rgba(238, 242, 244, 0.1); border: 1px solid rgba(212, 183, 126, 0.3); border-radius: 1.2rem; padding: 1.3rem; }
.mitmachen input { width: 100%; font-family: var(--ui); font-size: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(238, 242, 244, 0.35); background: rgba(23, 34, 47, 0.5); color: var(--nebel); margin-bottom: 0.7rem; }
.knopf { display: inline-block; font-family: var(--ui); font-size: 1rem; letter-spacing: 0.06em; background: var(--gold-hell); color: var(--mitternacht); border: 0; border-radius: 2rem; padding: 0.75rem 1.5rem; cursor: pointer; text-decoration: none; box-shadow: 0 0 30px rgba(212, 183, 126, 0.35); }
.knopf.leise { background: transparent; color: var(--nebel); border: 1px solid rgba(238, 242, 244, 0.5); box-shadow: none; }
.klein { font-family: var(--ui); font-size: 1rem; opacity: 0.7; margin: 0.6rem 0 0; }
.teilen { margin-top: 1rem; font-size: 1rem; }
.teilen code { display: block; font-family: var(--ui); font-size: 1rem; background: rgba(23, 34, 47, 0.6); padding: 0.6rem; border-radius: 0.5rem; margin: 0.6rem 0; word-break: break-all; }
.entwurf { margin-top: 2.5rem; font-family: var(--ui); font-size: 1rem; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .kerze::before { animation: none; } }

/* Leiste unten wie überall im Tempel */
body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.leiste { position: fixed; z-index: 11; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)); background: #faf6f0; border-top: 1px solid rgba(184, 149, 90, 0.35); }
.leiste a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-family: var(--ui); font-size: 1rem; color: #35495e; text-decoration: none; padding: 0.35rem 0; border-radius: 0.8rem; }
.leiste a span { font-size: 1.35rem; line-height: 1.2; }
.zurueck { z-index: 12; background: rgba(250, 246, 240, 0.92); color: #17222f; border-radius: 2rem; padding: 0.5rem 1rem; letter-spacing: 0.04em; text-transform: none; font-size: 1rem; }