/* KI-Magie – Download-Seite zum KI-Salon „Dein Adventskalender mit KI-Magie“ (20.10.2026)
   CI nach ~/projekte/standards/design.md · alle Schriften lokal, keine fremden Server */
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'The Breakdown';src:url('fonts/TheBreakdown.woff2') format('woff2');font-display:swap;}

:root{
  --petrol:#005959; --petrol-hell:#A8C4C3; --gelb:#F2DA00; --gelb-zart:#FFF9C4;
  --magenta:#B21573; --weiss:#FFFFFF; --petrol-tief:#002E2D;
  --font:'Montserrat', Arial, sans-serif; --font-hand:'The Breakdown', cursive;
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:40px; --space-2xl:64px;
  --text-sm:14px; --text-base:16px; --text-lg:20px; --text-xl:24px; --text-2xl:32px; --text-3xl:40px;
  --r-sm:3px; --t-fast:.15s; --t:.25s; --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:var(--font); font-size:var(--text-base); line-height:1.6; color:var(--weiss);
  background:linear-gradient(180deg, var(--petrol-tief) 0%, #003f3e 55%, var(--petrol) 100%);
  min-height:100vh; overflow-x:hidden;
}
/* Winternacht: Sterne und Schnee (rein dekorativ) */
.himmel{position:fixed; inset:0; pointer-events:none; z-index:0;}
.stern{position:absolute; width:2px; height:2px; background:var(--weiss); border-radius:50%; opacity:.7; animation:funkeln 4s ease-in-out infinite;}
.stern.gelb{background:var(--gelb); width:3px; height:3px;}
.flocke{position:absolute; top:-5vh; color:var(--weiss); opacity:.55; animation:fallen linear infinite;}
@keyframes funkeln{0%,100%{opacity:.25;}50%{opacity:.9;}}
@keyframes fallen{to{transform:translateY(110vh) translateX(30px);}}
/* Lichterkette */
.lichterkette{position:fixed; top:0; left:0; right:0; height:46px; z-index:2; pointer-events:none; overflow:hidden;}
.birne{animation:leuchten 1.9s ease-in-out infinite; filter:drop-shadow(0 0 6px currentColor);}
.birne ellipse{filter:drop-shadow(0 0 5px rgba(255,255,255,.55));}
@keyframes leuchten{0%,100%{opacity:1;}50%{opacity:.25;}}
/* Tannen mit Kerzen */
.wald{position:fixed; left:0; right:0; bottom:0; height:140px; z-index:0; pointer-events:none;}
.tanne{position:absolute; bottom:0; overflow:visible;}
.flamme{transform-box:fill-box; transform-origin:50% 100%; animation:flackern 1.2s ease-in-out infinite alternate; filter:drop-shadow(0 0 4px #F2DA00);}
.spitze{filter:drop-shadow(0 0 6px #F2DA00);}
@keyframes flackern{0%{transform:scale(1,1); opacity:.85;}40%{transform:scale(.85,1.15) rotate(-4deg); opacity:1;}100%{transform:scale(1.1,.9) rotate(3deg); opacity:.9;}}
/* Sternschnuppe */
.schnuppe{position:absolute; width:120px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0), #FFF9C4); transform:rotate(-20deg); animation:schnuppe 1.5s ease-out forwards;}
@keyframes schnuppe{from{opacity:0; translate:0 0;}20%{opacity:1;}to{opacity:0; translate:240px 90px;}}
/* Musik-Knopf */
.musik{position:fixed; top:54px; right:16px; z-index:3; font-family:var(--font); font-weight:600; font-size:var(--text-sm); color:var(--weiss); background:var(--petrol); border:1px solid var(--petrol-hell); border-bottom:3px solid var(--gelb); border-radius:var(--r-sm); padding:8px 14px; cursor:pointer;}
.musik:hover{background:#006b6b;}
.musik:focus-visible{outline:2px solid var(--gelb); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){ .stern,.flocke,.birne,.flamme{animation:none;} .flocke{display:none;} }

main{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:72px var(--space-md) var(--space-2xl);}
.logo{display:block; width:220px; max-width:60%; height:auto; margin:0 auto var(--space-xl);}
h1{font-family:var(--font-hand); font-weight:400; font-size:clamp(40px, 9vw, 64px); line-height:1.1; text-align:center; margin:0 0 var(--space-sm); transform:rotate(-1.5deg);}
h1 .gelb{color:var(--gelb);}
.unterzeile{text-align:center; color:rgba(255,255,255,.85); font-size:var(--text-sm); letter-spacing:.04em; margin:0 0 var(--space-xl);}
.einleitung{font-size:var(--text-lg); text-align:center; margin:0 auto var(--space-lg); max-width:620px;}
.tipp{background:var(--gelb-zart); color:var(--petrol-tief); padding:var(--space-md) var(--space-lg); border-left:6px solid var(--gelb); border-radius:var(--r-sm); margin:0 0 var(--space-2xl);}
.tipp strong{color:var(--petrol);}

h2{font-size:var(--text-2xl); font-weight:700; margin:0 0 var(--space-lg); text-align:center;}
.dateien{list-style:none; margin:0 0 var(--space-2xl); padding:0; display:flex; flex-direction:column; gap:var(--space-md);}
.karte{background:rgba(0,46,45,.82); border:1px solid rgba(168,196,195,.45); border-left:4px solid var(--gelb); border-radius:var(--r-sm); padding:var(--space-lg); display:flex; gap:var(--space-lg); align-items:center; justify-content:space-between; flex-wrap:wrap;}
.karte h3{margin:0 0 var(--space-xs); font-size:var(--text-xl); font-weight:700;}
.karte .wann{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-tief); background:var(--petrol-hell); padding:2px 8px; border-radius:var(--r-sm); margin-bottom:var(--space-sm);}
.karte p{margin:0; color:rgba(255,255,255,.85); max-width:420px;}
.knoepfe{display:flex; gap:var(--space-sm); flex-wrap:wrap;}
.knopf{display:inline-block; font-family:var(--font); font-weight:600; font-size:var(--text-base); color:var(--weiss); text-decoration:none; background:var(--petrol); border:1px solid var(--petrol-hell); border-bottom:4px solid var(--gelb); border-radius:var(--r-sm); padding:12px 20px; min-height:48px; transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); cursor:pointer;}
.knopf:hover{background:#006b6b; transform:translateY(-2px);}
.knopf:focus-visible, input:focus-visible{outline:2px solid var(--gelb); outline-offset:2px;}

.schritte{background:var(--petrol-hell); color:var(--petrol-tief); border-radius:var(--r-sm); padding:var(--space-xl) var(--space-lg); margin:0 0 var(--space-2xl);}
.schritte h2{color:var(--petrol-tief);}
.schritte ol{margin:0 0 var(--space-lg); padding-left:1.4em; font-size:var(--text-lg);}
.schritte li{margin-bottom:var(--space-sm);}
.schritte .offline{margin:0; font-weight:600;}

footer{position:relative; z-index:1; text-align:center; color:rgba(255,255,255,.85); font-size:var(--text-sm); padding:0 var(--space-md) 160px;}
footer .formel{color:var(--gelb); font-weight:600; margin-top:var(--space-sm);}

/* Passwortseite */
.zugang{max-width:420px; margin:0 auto; background:rgba(0,46,45,.85); border:1px solid rgba(168,196,195,.45); border-top:4px solid var(--gelb); border-radius:var(--r-sm); padding:var(--space-xl) var(--space-lg);}
.zugang label{display:block; font-weight:600; margin-bottom:var(--space-sm);}
.zugang input{width:100%; font:inherit; font-size:var(--text-lg); padding:12px; border:1px solid var(--petrol-hell); border-radius:var(--r-sm); background:#E8F0EF; color:var(--petrol-tief); margin-bottom:var(--space-md);}
.zugang .knopf{width:100%;}
.fehler{color:var(--weiss); background:rgba(255,23,68,.25); border:1px solid #FF1744; border-radius:var(--r-sm); padding:var(--space-sm) var(--space-md); margin:0 0 var(--space-md);}