/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
:root{color-scheme:dark;--bg:#070d1b;--panel:#101b30;--panel2:#0b1426;--text:#edf4ff;--muted:#a6b7ce;--blue:#35b9ff;--purple:#a276ff;--green:#39e7a5;--border:#263653}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}a:hover{color:var(--blue)}button,input,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}.container{width:min(1200px,calc(100% - 44px));margin:auto}.skip{position:absolute;top:-70px;left:20px;background:#fff;color:#000;padding:12px;z-index:100}.skip:focus{top:10px}.header{position:sticky;top:0;z-index:30;background:#070d1be9;backdrop-filter:blur(16px);border-bottom:1px solid #263653}.nav{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:25px}.brand{display:flex;align-items:center;gap:12px;line-height:1.15;flex-shrink:0}.brand-mark{font-size:31px;font-style:italic;font-weight:950;letter-spacing:-6px;padding-right:9px;background:linear-gradient(130deg,var(--purple),var(--blue),var(--green));background-clip:text;color:transparent}.brand strong{font-size:20px;letter-spacing:.05em}.brand em{color:var(--blue);font-style:normal}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.17em;margin-top:5px}.nav nav{display:flex;align-items:center;gap:24px;font-size:13px}.nav-cta{padding:10px 16px;border:1px solid var(--green);border-radius:30px}.menu-toggle{display:none;background:none;color:white;border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:24px}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 76% 40%,#14305a 0%,#080f20 58%,#070d1b 100%);border-bottom:1px solid #244669}.hero-glow{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 105px,#0b80f008 106px 107px)}.hero-grid{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;position:relative}.hero-copy{position:relative;z-index:2;padding:65px 0}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.3em;color:var(--blue);text-transform:uppercase;margin:0 0 20px}.hero h1{font-size:clamp(58px,7vw,104px);line-height:1.05;letter-spacing:-.055em;margin:0 0 12px;font-weight:900;white-space:nowrap}.hero h1 span,h2 span{background:linear-gradient(100deg,var(--blue),var(--purple));background-clip:text;color:transparent}.hero h2{font-size:clamp(23px,3vw,37px);margin:0 0 7px}.hero-roles{font-size:15px;color:#d4dded}.hero-roles b{color:var(--blue);margin:0 4px}.lead{font-size:17px;color:#c4d1e4;max-width:610px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:40px;padding:12px 22px;border:1px solid #5486e5;font-weight:650;font-size:14px;transition:transform .2s,box-shadow .2s;color:white}.btn:hover{transform:translateY(-3px);color:white}.primary{background:linear-gradient(105deg,#705bfa,#168feb);box-shadow:0 8px 28px #3a56ff44;border-color:transparent}.secondary{background:#091429}.hero-tags{display:flex;gap:15px;flex-wrap:wrap;color:#b3d0ee;font-size:12px;margin-top:40px}.hero-tags span{padding:8px 12px;border:1px solid #2d466c;border-radius:20px}.hero-image{align-self:stretch;display:flex;align-items:end;position:relative;min-width:0}.hero-image img{position:relative;width:100%;max-height:600px;object-fit:cover;object-position:50% 35%;border-radius:32px 32px 0 0;mask-image:linear-gradient(to bottom,black 80%,transparent 100%);box-shadow:0 0 65px #238bff20}.portrait-halo{position:absolute;inset:12% 4%;border-radius:50%;background:#345dba50;filter:blur(80px)}.floating-note{position:absolute;bottom:35px;right:-5px;background:#071323dc;border:1px solid #315b86;padding:12px 16px;border-radius:14px;color:#d5e7ff;font-size:13px;backdrop-filter:blur(10px)}.floating-note i{color:var(--green);font-style:normal}.scroll{position:absolute;bottom:5px;left:50%;z-index:3;font-size:24px;color:var(--blue)}.section{padding:95px 0;position:relative}.section h2{font-size:clamp(29px,4vw,47px);line-height:1.2;letter-spacing:-.03em;margin:0 0 27px}.section p{color:#b8c6d9}.two-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:75px;align-items:center}.about{background:linear-gradient(135deg,#0a1426,#101329)}.about blockquote{border-left:3px solid var(--purple);padding:12px 0 12px 22px;margin:30px 0;color:#e5ddff;font-size:19px;font-style:italic}.memory-card{position:relative;max-width:450px;margin:auto;padding:10px;background:linear-gradient(140deg,#173e5b,#523b7a);border-radius:24px;transform:rotate(2deg);box-shadow:0 30px 65px #0008}.memory-card img{width:100%;aspect-ratio:4/4.5;object-fit:cover;object-position:center 30%;border-radius:17px}.memory-caption{padding:12px 12px 16px}.memory-caption span{display:block;color:#c8d6ed;font-size:12px}.memory-caption strong{display:block;font-size:20px}.alternate{background:#0b1527}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:55px}.timeline article{position:relative;padding:22px 18px;background:#111f34;border:1px solid #284363;border-radius:14px}.timeline article:before{content:'';position:absolute;top:40px;left:-15px;width:14px;height:2px;background:var(--blue)}.timeline article:first-child:before{display:none}.step{color:var(--green);font-size:24px;font-weight:800}.timeline h3{font-size:17px;line-height:1.3}.timeline p,.skill-card p,.project-grid p{font-size:14px}.skill-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}.skill-card{min-height:260px;position:relative;padding:23px 18px 30px;border:1px solid #2b4770;border-radius:16px;background:linear-gradient(140deg,#132440,#0c1426);transition:transform .25s,border-color .25s}.skill-card:hover{transform:translateY(-8px);border-color:var(--blue)}.skill-card.green{border-color:#187c65}.skill-card.purple{border-color:#64439c}.skill-icon{font-size:35px;color:var(--blue)}.green .skill-icon{color:var(--green)}.purple .skill-icon{color:var(--purple)}.skill-card h3{font-size:17px}.skill-line{position:absolute;bottom:0;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}.green .skill-line{background:var(--green)}.purple .skill-line{background:var(--purple)}.section-intro{max-width:690px}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}.project-grid article{overflow:hidden;border:1px solid #264467;border-radius:16px;background:#101e32}.project-grid h3,.project-grid p{padding:0 18px}.project-grid h3{margin-bottom:0;font-size:17px}.project-grid p{margin-top:6px;padding-bottom:12px}.project-art{height:170px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 30%,#1a7d86,#08172b 70%)}.project-art span{font-size:66px;font-weight:800;text-shadow:0 0 45px #52ecdf}.project-art.web{background:radial-gradient(circle,#234c91,#101025)}.project-art.design{background:radial-gradient(circle,#7737a1,#1c1131)}.project-art.game{background:radial-gradient(circle,#4843a4,#0d1230)}.teaching{background:linear-gradient(115deg,#07152a,#14224b)}.teaching-inner{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.teaching-inner p{max-width:620px}.teaching-visual{height:260px;position:relative;border:1px solid #366c9b;border-radius:22px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 24px,#59b5fa10 25px),repeating-linear-gradient(90deg,transparent 0 24px,#59b5fa10 25px),#091c31}.teaching-visual>span{position:absolute;color:#5ad9ff;font-size:26px;font-family:monospace}.teaching-visual>span:nth-child(1){top:18%;left:15%}.teaching-visual>span:nth-child(2){top:45%;right:12%;color:#a994ff}.teaching-visual>span:nth-child(3){bottom:13%;left:20%;color:#53eab1}.pulse{position:absolute;width:120px;height:120px;left:40%;top:26%;border:2px solid #3cbcff;border-radius:50%;box-shadow:0 0 50px #1592eb55;animation:pulse 3s infinite}.music-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}.muted{font-size:13px;color:#91a4bb!important}.equalizer{height:200px;display:flex;justify-content:center;align-items:center;gap:8px}.equalizer span{width:10px;height:35%;border-radius:10px;background:linear-gradient(0deg,var(--green),var(--blue),var(--purple));box-shadow:0 0 16px #5e85ff80;animation:wave 1.4s ease-in-out infinite alternate}.equalizer span:nth-child(3n){animation-delay:-.7s;height:75%}.equalizer span:nth-child(4n){animation-delay:-.35s;height:50%}.equalizer span:nth-child(5n){animation-delay:-1s;height:95%}.contact{background:radial-gradient(ellipse at bottom left,#0d3551,#080f20 65%)}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px}.contact-info{color:var(--green);margin-top:40px;font-size:14px}.form-panel{padding:28px;background:#101c32;border:1px solid #34517c;border-radius:20px;box-shadow:0 25px 65px #0004}.form-panel h3{margin-top:0}form label{display:block;color:#c9d8ed;font-size:13px;margin:13px 0}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:7px;background:#0a1426;border:1px solid #344967;border-radius:8px;padding:12px;color:white;outline:none}input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px #259bff33}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.captcha-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.captcha-wrap img{border-radius:8px;border:1px solid #60708a}.captcha-wrap label{flex:1;min-width:130px}.refresh{background:#152f50;border:1px solid #476d99;color:white;border-radius:8px;font-size:25px;padding:7px 14px}.privacy-check{display:flex;gap:10px;align-items:flex-start}.privacy-check a{color:var(--blue);text-decoration:underline}.privacy-check input{margin-top:5px;accent-color:var(--green)}.submit{width:100%}.form-footnote{font-size:12px!important;color:#9fb0c7!important}.form-feedback{font-size:14px!important}.form-feedback.error{color:#ff9fa9!important}.form-feedback.success{color:#64efbc!important}.trap{position:absolute!important;left:-99999px!important;width:1px;height:1px;overflow:hidden}footer{border-top:1px solid #29415c;background:#060b16}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0}.footer-inner p{font-size:12px;color:#8fa4bb}.footer-inner>div:last-child{display:flex;gap:16px;font-size:12px}@keyframes wave{to{height:12%}}@keyframes pulse{50%{transform:scale(1.25);opacity:.35}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:1050px){.nav nav{gap:12px}.hero-grid{gap:15px}.hero h1{font-size:65px}.skill-grid{grid-template-columns:repeat(3,1fr)}.timeline{grid-template-columns:repeat(3,1fr)}}@media(max-width:750px){.nav{min-height:70px}.menu-toggle{display:block}.nav nav{display:none;position:absolute;left:0;right:0;top:70px;background:#0a1426;padding:20px 25px;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch}.nav nav.open{display:flex}.hero-grid,.two-cols,.teaching-inner,.music-inner,.contact-grid{grid-template-columns:1fr}.hero-grid{gap:0}.hero-copy{padding:55px 0 25px}.hero h1{font-size:clamp(52px,12vw,85px)}.hero-image{max-width:530px;margin:auto}.hero-image img{max-height:420px}.floating-note{right:0}.section{padding:70px 0}.two-cols,.teaching-inner,.music-inner,.contact-grid{gap:32px}.timeline,.skill-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{flex-wrap:wrap}.scroll{display:none}}@media(max-width:480px){.container{width:min(100% - 30px,1200px)}.hero h1{font-size:52px}.hero-roles{font-size:13px}.lead{font-size:15px}.timeline,.skill-grid,.project-grid,.form-row{grid-template-columns:1fr}.hero-tags{gap:7px}.hero-tags span{font-size:11px}.floating-note{font-size:11px}.form-panel{padding:17px}.footer-inner{display:block}.footer-inner>div:last-child{margin-top:20px}}

.legal{max-width:760px}.legal h1{font-size:clamp(32px,5vw,52px)}.legal h2{font-size:24px;margin-top:32px}

/* V1.1: seasonal themes and animated PCB paths */
body{isolation:isolate} .circuit-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.43;overflow:hidden}.circuit-overlay svg{width:100%;height:100%}.circuit-overlay path{fill:none;stroke:#278af2;stroke-width:2;stroke-dasharray:18 24;animation:circuit-flow 15s linear infinite}.circuit-overlay path+path{stroke:#38d6a7;animation-duration:24s;animation-direction:reverse}.circuit-overlay:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#070d1b 0%,transparent 12%,transparent 88%,#070d1b 100%)}@keyframes circuit-flow{to{stroke-dashoffset:-600}}#season-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}#season-decor{position:fixed;inset:0;pointer-events:none;z-index:31;overflow:hidden}.philosophy{background:linear-gradient(125deg,#0b1124,#16122e 65%,#0b1928)}.philosophy-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:32px}.philosophy-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.philosophy-cards article{padding:22px;border:1px solid #7045ac;border-radius:18px;background:#17152e;color:#a78bfa;font-size:2rem}.philosophy-cards article+article{border-color:#247e65;background:#0b2728;color:#43dfaa}.philosophy-cards strong,.philosophy-cards small{display:block;color:#fff;font-size:1rem;margin-top:12px}.philosophy-cards small{color:#b9c5d9;font-size:.83rem;line-height:1.6}.philosophy blockquote{margin-top:24px;color:#57e3c2;font-weight:700}.season-snowcap{position:absolute;top:-9px;left:3%;right:3%;height:13px;border-radius:65% 35% 45% 50%;background:linear-gradient(#fff,#d2edfa);box-shadow:0 3px 10px #9feaff55;z-index:5;pointer-events:none}.season-halloween{filter:saturate(.86)}body[data-season="halloween"]{background:#090612}body[data-season="halloween"] .circuit-overlay path{stroke:#a347ef}body[data-season="christmas"] .circuit-overlay path{stroke:#8bd7ff}body[data-season="newyear"] .circuit-overlay path{stroke:#efc66b}body[data-season="birthday"] .circuit-overlay path{stroke:#d280ff}.season-balloon{position:absolute;bottom:-180px;width:var(--size);height:calc(var(--size) * 1.28);left:var(--left);border-radius:52% 52% 48% 48%;background:radial-gradient(ellipse at 28% 24%,#ffffffaa,transparent 18%),radial-gradient(ellipse at 70% 75%,#0007,transparent 55%),var(--balloon);box-shadow:inset -9px -12px 17px #0005,0 8px 35px #0005;animation:balloon-rise var(--duration) linear var(--delay) infinite;opacity:.9}.season-balloon:before{content:"";position:absolute;bottom:-8px;left:44%;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:0;border-top:12px solid var(--balloon)}.season-balloon:after{content:"";position:absolute;top:100%;left:50%;height:95px;width:1px;background:#e7e8ff99;transform:rotate(8deg)}@keyframes balloon-rise{0%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(24px,-60vh,0) rotate(8deg)}100%{transform:translate3d(-15px,-145vh,0) rotate(-5deg)}}.season-reindeer{position:absolute;bottom:8%;left:-230px;width:210px;height:135px;animation:reindeer-run 18s linear 1 both;filter:drop-shadow(0 8px 8px #0008)}.season-reindeer svg{width:100%;height:100%}@keyframes reindeer-run{to{transform:translateX(calc(100vw + 450px))}}.season-bat{position:absolute;top:var(--top);left:-120px;color:#1b132a;font-size:var(--size);text-shadow:0 0 14px #8f4fd6;animation:bat-fly var(--duration) linear var(--delay) infinite}@keyframes bat-fly{0%{transform:translate(-20vw,0) rotate(-12deg)}50%{transform:translate(55vw,-70px) rotate(14deg)}100%{transform:translate(125vw,15px) rotate(-8deg)}}.season-fog{position:absolute;bottom:-12%;width:130%;left:-15%;height:38%;background:radial-gradient(ellipse at center,#7a40ad28,transparent 65%);animation:fog-drift 14s ease-in-out infinite alternate}@keyframes fog-drift{to{transform:translateX(12%)}}.season-label{position:fixed;right:16px;bottom:16px;z-index:32;border:1px solid #ffffff44;background:#101729e8;color:#e9efff;border-radius:100px;padding:8px 13px;font:12px system-ui;pointer-events:none}@media(max-width:760px){.philosophy-grid{grid-template-columns:1fr}.philosophy-cards{grid-template-columns:1fr 1fr}.circuit-overlay{opacity:.25}.season-reindeer{width:135px}}@media(prefers-reduced-motion:reduce){.circuit-overlay path,.season-balloon,.season-bat,.season-reindeer,.season-fog{animation:none!important}#season-particles{display:none!important}.season-balloon,.season-bat,.season-reindeer{display:none!important}}

/* Continuous PCB traces: solid paths, rounded joins and animated pulses */
.circuit-overlay{opacity:.47;z-index:0}.circuit-overlay svg{width:100%;height:100%}.circuit-overlay .pcb-traces path{fill:none;stroke:url(#pcbGradient);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;animation:none;filter:drop-shadow(0 0 5px #328aff66)}.circuit-overlay .pcb-pads circle{fill:#071729;stroke:#54c8ff;stroke-width:3}.circuit-overlay .pcb-pulses circle{fill:#b5f8ff;filter:drop-shadow(0 0 7px #80f4ff)}.circuit-overlay:after{display:none}body[data-season="halloween"] .pcb-traces path{stroke:#9b55d7}body[data-season="christmas"] .pcb-traces path{stroke:#82cafa}body[data-season="newyear"] .pcb-traces path{stroke:#d9b76b}body[data-season="birthday"] .pcb-traces path{stroke:url(#pcbGradient)}@media(prefers-reduced-motion:reduce){.pcb-pulses{display:none}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.3: PCB-Leiterbahnen in einer durchgehenden, maskenunabhaengigen Ansichtsebene. */
.circuit-overlay{position:fixed!important;inset:0!important;z-index:12!important;pointer-events:none!important;overflow:visible!important;opacity:.78!important;isolation:isolate;mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 28%,transparent 72%,#000 88%,#000 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 28%,transparent 72%,#000 88%,#000 100%)}
.circuit-overlay svg{display:block;width:100%;height:100%;overflow:visible}
.circuit-overlay .pcb-traces path{stroke-width:3.5;filter:drop-shadow(0 0 4px #4e9cff)}
.circuit-overlay .pcb-pads circle{filter:drop-shadow(0 0 4px #51bfff)}
.header{z-index:35}
@media(max-width:760px){.circuit-overlay{opacity:.55!important;mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 23%,transparent 77%,#000 90%,#000 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 23%,transparent 77%,#000 90%,#000 100%)}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.5: Leiterbahnen hinter Inhaltsflaechen; nicht als seitliche Streifen. */
.circuit-overlay{z-index:1!important;opacity:.64!important;mask-image:none!important;-webkit-mask-image:none!important}
.header{z-index:35!important}
.hero,.section,footer{isolation:isolate}.section>.container,footer>.container{position:relative;z-index:3}
.hero-grid{position:relative;}
.hero-copy{isolation:isolate}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:0 -12px;background:linear-gradient(90deg,#080f20 0%,#080f20f5 76%,#080f20c9 94%,transparent 100%);pointer-events:none}
.hero-image{z-index:3;isolation:isolate}
.section>.container{isolation:isolate}
.section>.container::before{content:"";position:absolute;z-index:-1;inset:-20px -12px;background:linear-gradient(90deg,#0b1527f2,#0b1527e8);border-radius:12px;pointer-events:none}
.about>.container::before{background:#0a1426f2}
.teaching>.container::before{background:#0b1931f2}
.contact>.container::before{background:#0b192cf2}
.circuit-overlay .pcb-dot{fill:#ffffff;stroke:#58eaff;stroke-width:2;filter:drop-shadow(0 0 5px #e2ffff) drop-shadow(0 0 11px #37bfff)}
@media(max-width:760px){.circuit-overlay{opacity:.38!important}.hero-copy::before{background:#080f20f2}}
@media(prefers-reduced-motion:reduce){.pcb-dot{display:none}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.6: PCB ist eine Hintergrundebene; Karten und Text sind darueber. */
.circuit-overlay{z-index:1!important;opacity:.62!important;pointer-events:none!important}
.hero,.section,footer{position:relative;z-index:2;isolation:isolate}.section>.container,footer>.container{position:relative;z-index:3}
.hero-grid{position:relative;}
/* Die breiten Masken aus V1.5 werden nicht mehr gebraucht. */
.hero-copy::before,.section>.container::before{content:none!important}
/* Inhaltskarten decken Leiterbahnen vollstaendig ab. */
.philosophy-cards article,.skill-card,.timeline article,.project-grid article,.memory-card,.form-panel,.teaching-visual,.hero-image{position:relative;z-index:4;isolation:isolate}
/* Halbtransparente Sektionsflaechen zeigen dezente Leiterbahnen im Hintergrund. */
.hero{background:radial-gradient(ellipse at 76% 40%,#14305aef 0%,#080f20e9 58%,#070d1bea 100%)}
.about{background:linear-gradient(135deg,#0a1426e9,#101329ee)}
.alternate{background:#0b1527ec}
.philosophy{background:linear-gradient(125deg,#0b1124ec,#16122eed 65%,#0b1928ec)}
.teaching{background:linear-gradient(115deg,#07152aef,#14224bef)}
.contact{background:radial-gradient(ellipse at bottom left,#0d3551ef,#080f20f0 65%)}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.7: PCB between section backgrounds and content; no parent stacking-context trap. */
.hero,.section,footer{isolation:auto!important;z-index:auto!important}
.circuit-overlay{z-index:5!important;opacity:.82!important;mask-image:none!important;-webkit-mask-image:none!important;overflow:hidden!important}.section>.container,footer>.container{z-index:10!important;position:relative}
.hero-grid{position:relative}
.hero-copy,.hero-image{position:relative;z-index:11!important}
.hero-copy{isolation:isolate;border-radius:24px;background:linear-gradient(90deg,rgba(8,15,32,.96) 0%,rgba(8,15,32,.89) 68%,rgba(8,15,32,.65) 90%,rgba(8,15,32,.14) 100%)}
.hero-copy::before{content:none!important}
.hero-image{background:#0a1729;overflow:hidden}
.hero-image img{position:relative;z-index:1}
.philosophy-cards article,.skill-card,.timeline article,.project-grid article,.memory-card,.form-panel,.teaching-visual{position:relative;z-index:11!important;isolation:isolate}
.circuit-overlay .pcb-pulses .pcb-dot{opacity:1!important;fill:#fff!important;stroke:#8bf9ff!important;stroke-width:2.5!important;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 15px #35c8ff)!important}
.circuit-overlay .pcb-pulses .pcb-trail{fill:#55dfff;opacity:.3;filter:drop-shadow(0 0 9px #35bfff)}
@media(max-width:760px){.circuit-overlay{opacity:.56!important}.hero-copy{background:rgba(8,15,32,.91)}}
@media(prefers-reduced-motion:reduce){.pcb-dot,.pcb-trail{display:none!important}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.8: two-cols cards/text float above PCB; translucent local backing protects legibility. */
.two-cols{position:relative;z-index:10!important;isolation:isolate}
.two-cols > *{position:relative;z-index:11;min-width:0}
.two-cols > :first-child{
  border-radius:22px;
  padding:clamp(14px,2vw,28px);
  background:linear-gradient(100deg,rgba(10,20,38,.97) 0%,rgba(10,20,38,.91) 76%,rgba(10,20,38,.78) 100%);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.two-cols .memory-card{position:relative;z-index:12;background:linear-gradient(140deg,#173e5b,#523b7a)}
@media(max-width:750px){.two-cols > :first-child{background:rgba(10,20,38,.94);padding:18px}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V1.9: Globale, durchscheinende Inhaltsflaechen; PCB vor Sektionshintergruenden, hinter Inhalten. */
.circuit-overlay{position:fixed!important;inset:0!important;z-index:5!important;opacity:.95!important;pointer-events:none!important;mask-image:none!important;-webkit-mask-image:none!important;overflow:hidden!important}
.hero,.section,footer{isolation:auto!important;z-index:auto!important}.section>.container,footer>.container{position:relative!important;z-index:10!important;isolation:isolate}
.hero-grid{position:relative!important;isolation:isolate}
/* Einheitliche transparente Glasflaeche statt einzelner harter Masken. */
.hero-grid,.section>.container{border-radius:24px;background:rgba(7,14,29,.50);box-shadow:0 0 45px rgba(7,13,27,.08);}
.hero-copy,.two-cols>:first-child,.philosophy-grid>div:first-child,.teaching-inner>div:first-child,.music-inner>div:first-child,.contact-grid>div:first-child{position:relative;z-index:12!important;border-radius:22px;background:rgba(8,16,32,.56)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:clamp(14px,2vw,28px)}
.hero-image,.memory-card,.philosophy-cards article,.skill-card,.timeline article,.project-grid article,.form-panel,.teaching-visual{position:relative;z-index:12!important}
/* Das SVG-Impulssystem ist sichtbar, auch wenn alte CSS-Regeln es ausgeblendet haben. */
.circuit-overlay .pcb-pulses{display:inline!important;visibility:visible!important}
.circuit-overlay .pcb-pulses .pcb-dot,.circuit-overlay .pcb-pulses .pcb-trail{display:inline!important;visibility:visible!important}
.circuit-overlay .pcb-pulses .pcb-dot{opacity:1!important;fill:#f5ffff!important;stroke:#27e9ff!important;stroke-width:3!important;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #00caff)!important}
.circuit-overlay .pcb-pulses .pcb-trail{fill:#27baff!important;filter:drop-shadow(0 0 7px #2cbcff)!important}
.circuit-overlay .pcb-traces path{stroke-width:3.6!important;opacity:.90}
@media(max-width:760px){.hero-grid,.section>.container{background:rgba(7,14,29,.62)}.hero-copy,.two-cols>:first-child,.philosophy-grid>div:first-child,.teaching-inner>div:first-child,.music-inner>div:first-child,.contact-grid>div:first-child{background:rgba(8,16,32,.72)!important}}
@media(prefers-reduced-motion:reduce){.circuit-overlay .pcb-pulses .pcb-dot,.circuit-overlay .pcb-pulses .pcb-trail{display:none!important}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* Opera: SVG-Pfadimpulse per CSS unabhängig von der JavaScript-Partikelanimation. */
.circuit-overlay .pcb-traces path{stroke-dasharray:none!important;animation:none!important}
.circuit-overlay .pcb-traces path::selection{background:transparent}
.circuit-overlay .pcb-signal{fill:none!important;stroke:#a4ffff!important;stroke-width:7!important;stroke-linecap:round!important;stroke-dasharray:2 110!important;animation:pcb-signal-travel 5s linear infinite!important;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #00d9ff)!important;opacity:1!important}
.circuit-overlay .pcb-signal:nth-child(2n){animation-duration:7s!important;animation-delay:-2s!important;stroke:#b99aff!important}
@keyframes pcb-signal-travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-1120}}
@media(prefers-reduced-motion:reduce){.circuit-overlay .pcb-signal{animation:none!important;opacity:0!important}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V2.1: Signalimpulse via Canvas statt kollidierender SVG/CSS-Animationen. */
.circuit-overlay .pcb-pulses,.circuit-overlay .pcb-signals{display:none!important}
#pcb-signal-canvas{position:fixed;inset:0;z-index:6;pointer-events:none;display:block;opacity:1}
#pcb-debug{position:fixed;bottom:12px;left:12px;z-index:9999;background:#0a1727;color:#9efbff;border:1px solid #45d9ee;border-radius:8px;padding:9px 12px;font:13px system-ui;pointer-events:none}
@media(prefers-reduced-motion:reduce){#pcb-signal-canvas{display:none}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* V2.2: Canvas-Signale standardmäßig sichtbar, auch bei reduzierter Systembewegung;
   Besucher können mit ?pcbmotion=off deaktivieren. */
#pcb-signal-canvas{display:block;position:fixed;inset:0;pointer-events:none;z-index:2;}
@media(prefers-reduced-motion:reduce){#pcb-signal-canvas{display:block}}

/* Halloween: naturalistic-cute vector bats with articulated wing beats, 2026. */
.season-bat{width:var(--size,90px);height:auto;aspect-ratio:300/200;filter:drop-shadow(0 5px 12px #09051199);transform-origin:center center;will-change:transform;opacity:.82}
.season-bat .bat-art{display:block;width:100%;height:100%;overflow:visible}
.season-bat .bat-wing{transform-box:fill-box;animation:bat-wingbeat .36s ease-in-out infinite alternate}
.season-bat .bat-wing-left{transform-origin:right center}
.season-bat .bat-wing-right{transform-origin:left center;animation-delay:-.05s}
@keyframes bat-wingbeat{0%{transform:rotate(29deg) scaleY(.75)}100%{transform:rotate(-24deg) scaleY(1.08)}}
.season-bat-distant{animation:bat-fly var(--duration) linear var(--delay) infinite}
.season-bat-close{--size:min(76vw,390px);left:50%;top:43%;opacity:0;animation:bat-approach 31s ease-in-out 9s infinite;filter:drop-shadow(0 15px 35px #000a)}
@keyframes bat-approach{0%,67%,100%{opacity:0;transform:translate(-50%,-50%) scale(.03) rotate(-12deg)}70%{opacity:.4;transform:translate(-58%,-55%) scale(.16) rotate(8deg)}76%{opacity:.96;transform:translate(-50%,-50%) scale(.72) rotate(-4deg)}81%,84%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(0)}90%{opacity:.75;transform:translate(-38%,-62%) scale(.44) rotate(12deg)}94%{opacity:0;transform:translate(15%,-80%) scale(.06) rotate(24deg)}}
@media(max-width:700px){.season-bat-close{--size:min(85vw,310px)}}
@media(prefers-reduced-motion:reduce){.season-bat .bat-wing,.season-bat-close,.season-bat-distant{animation:none!important}.season-bat-close{display:none!important}}

/* Datei: style.css | Autor: Sven Helle | Webseite: https://sven-helle.de | Erstellt: 2026 */
/* Halloween 3.0.6: pumpkin patch and falling foliage, fully local. */
body[data-season="halloween"] .hero{position:relative}
.halloween-pumpkin-patch{position:absolute;left:0;right:0;bottom:8px;height:135px;z-index:11;pointer-events:none;display:flex;justify-content:space-around;align-items:flex-end;overflow:hidden}
.halloween-pumpkin{width:clamp(58px,9vw,126px);filter:drop-shadow(0 0 14px rgba(255,112,22,.36));animation:pumpkin-glow 5s ease-in-out infinite alternate}
.halloween-pumpkin:nth-child(even){width:clamp(48px,7vw,92px);animation-delay:-2.5s}
.halloween-pumpkin svg{width:100%;height:auto}
@keyframes pumpkin-glow{from{filter:drop-shadow(0 0 4px #f57b2855)}to{filter:drop-shadow(0 0 18px #ff8a31aa)}}
.halloween-title{position:relative;isolation:isolate}
.halloween-title-leaf{position:absolute;left:var(--leaf-x);top:var(--leaf-y);width:clamp(17px,2.8vw,35px);height:35px;transform:rotate(var(--leaf-angle));pointer-events:none;z-index:2;filter:drop-shadow(0 3px 3px #0008)}
.halloween-title-leaf svg{width:100%;height:100%}
.halloween-falling-leaf{position:fixed;top:-85px;left:var(--leaf-left);width:27px;height:27px;pointer-events:none;z-index:16;opacity:.85;animation:leaf-fall var(--leaf-duration) linear var(--leaf-delay) infinite;transform:scale(var(--leaf-scale))}
.halloween-falling-leaf svg{width:100%;height:100%}
@keyframes leaf-fall{0%{transform:translate3d(-22px,-30px,0) rotate(0deg) scale(var(--leaf-scale));opacity:0}8%{opacity:.8}50%{transform:translate3d(75px,52vh,0) rotate(260deg) scale(var(--leaf-scale))}95%{opacity:.8}100%{transform:translate3d(-20px,110vh,0) rotate(560deg) scale(var(--leaf-scale));opacity:0}}
@media(max-width:700px){.halloween-pumpkin-patch{height:75px;bottom:0}.halloween-pumpkin:nth-child(n+4){display:none}.halloween-title-leaf{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.halloween-falling-leaf{display:none}.halloween-pumpkin{animation:none}}

/* Halloween 3.0.7: cinematic carved surfaces and irregular independent candle flicker. */
body[data-season="halloween"] .hero{background-image:radial-gradient(ellipse at 50% 110%,rgba(120,52,22,.2),transparent 60%)}
body[data-season="halloween"] .halloween-pumpkin-patch{height:175px;bottom:0;align-items:flex-end;filter:drop-shadow(0 16px 13px #000a)}
body[data-season="halloween"] .halloween-pumpkin{width:clamp(78px,12vw,165px);animation:none!important;filter:drop-shadow(0 0 var(--glow-radius,12px) rgba(242,92,14,.45)) drop-shadow(0 9px 8px #000b);transform:rotate(-4deg)}
body[data-season="halloween"] .halloween-pumpkin:nth-child(even){width:clamp(70px,9vw,130px);transform:rotate(8deg) translateY(9px)}
body[data-season="halloween"] .pumpkin-cutouts{opacity:var(--flame-strength,.85);transition:opacity 80ms steps(2,end)}
body[data-season="halloween"] .pumpkin-firelight{opacity:var(--flame-strength,.85);transition:opacity 65ms steps(2,end)}
body[data-season="halloween"] .halloween-title-leaf{opacity:.72;filter:drop-shadow(0 5px 3px #000c) saturate(.65)}
@media(max-width:700px){body[data-season="halloween"] .halloween-pumpkin-patch{height:100px}body[data-season="halloween"] .halloween-pumpkin{width:clamp(68px,19vw,110px)}}
@media(prefers-reduced-motion:reduce){body[data-season="halloween"] .pumpkin-cutouts,body[data-season="halloween"] .pumpkin-firelight{opacity:.8!important;transition:none!important}}

/* Datei: style.css | Autor: Sven Helle | sven-helle.de | 2026
   V3.1.5: Original Halloween-Inszenierung vor der Katze wiederhergestellt.
   Video als eigene Ebene rechts vom Portraet, ohne die Hero-Texte zu ueberdecken. */
body[data-season="halloween"] .halloween-pumpkin-patch{overflow:visible}
body[data-season="halloween"] .halloween-pumpkin-cat{position:absolute;display:block;right:clamp(-110px,-5vw,-40px);bottom:94px;width:clamp(150px,14vw,235px);z-index:14;pointer-events:none;filter:drop-shadow(0 12px 12px #000d)}
body[data-season="halloween"] .witch-cat-video{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:1050px){body[data-season="halloween"] .halloween-pumpkin-cat{right:-15px;bottom:76px;width:155px}}
@media(max-width:700px){body[data-season="halloween"] .halloween-pumpkin-cat{right:0;bottom:54px;width:105px}}

/* V3.1.6: animated WebP instead of autoplay video; cat to the right of portrait, not over face. */
body[data-season="halloween"] .halloween-pumpkin-cat{right:clamp(-34px,-1.2vw,-12px);bottom:91px;width:clamp(138px,12vw,195px);z-index:14}
body[data-season="halloween"] .witch-cat-animation{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:1050px){body[data-season="halloween"] .halloween-pumpkin-cat{right:-5px;bottom:73px;width:140px}}
@media(max-width:700px){body[data-season="halloween"] .halloween-pumpkin-cat{right:0;bottom:54px;width:95px}}

/* V3.1.7: Katze auf der rechten Seite der Portraitkarte, ohne Gesicht zu verdecken. */
body[data-season="halloween"] .halloween-pumpkin-cat{right:clamp(4px,3vw,52px)!important;bottom:85px!important;width:clamp(142px,13vw,205px)!important;z-index:14!important}
@media(max-width:1050px){body[data-season="halloween"] .halloween-pumpkin-cat{right:8px!important;bottom:70px!important;width:140px!important}}
@media(max-width:700px){body[data-season="halloween"] .halloween-pumpkin-cat{right:2px!important;bottom:49px!important;width:100px!important}}
\n/* V3.1.8: articulated detailed bat wing membrane and face. */\n.season-bat-distant{opacity:.68;filter:drop-shadow(0 4px 9px #03030b)}\n.season-bat-close{filter:drop-shadow(0 18px 32px #000d)}\n
/* V3.1.9: independent bat flights from random viewport edges. */
.season-bat-solo{position:absolute;left:0;top:0;animation:none!important;pointer-events:none;opacity:0}

/* Winter 3.2.0 — restrained content layers, theatrical atmospheric edges */
body[data-season="christmas"] .winter-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-season="christmas"] .winter-moon{position:absolute;right:8%;top:9%;width:130px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffef4,#c6d6f4 57%,#829ac6 77%,transparent 79%);box-shadow:0 0 90px 25px #9cb5ee33;opacity:.4}
body[data-season="christmas"] .winter-bough{position:absolute;top:-24px;width:280px;height:190px;opacity:.7;background:repeating-conic-gradient(from 20deg at 20% 0%,transparent 0deg 9deg,#1d463f 10deg 14deg,transparent 15deg 23deg);filter:drop-shadow(0 4px 5px #020b12)}
body[data-season="christmas"] .winter-bough-left{left:-80px;transform:rotate(-16deg)}
body[data-season="christmas"] .winter-bough-right{right:-85px;transform:scaleX(-1) rotate(-16deg)}
body[data-season="christmas"] .winter-lantern{position:absolute;bottom:7%;left:2%;width:54px;height:86px;border:5px solid #554533;border-radius:8px 8px 13px 13px;background:radial-gradient(ellipse at 50% 65%,#ffe5a6,#bd7a31aa 30%,#211a18a8 75%);box-shadow:0 0 45px #ffa94b45;opacity:.85}
body[data-season="christmas"] .winter-lantern:before{content:"";position:absolute;left:17px;top:-18px;width:13px;height:15px;border:3px solid #6d5840;border-radius:9px}
body[data-season="christmas"] .winter-lantern i{position:absolute;left:24px;bottom:18px;width:8px;height:22px;border-radius:60% 60% 45% 45%;background:#fff1b3;filter:blur(1px);animation:winter-flame 2.1s infinite alternate}
@keyframes winter-flame{0%,100%{transform:scale(.7) rotate(-5deg);opacity:.7}30%{transform:scale(1.25) rotate(7deg);opacity:1}65%{transform:scale(.9) rotate(-8deg);opacity:.8}}
body[data-season="christmas"] .winter-groundfog{position:absolute;bottom:-65px;left:-10%;width:120%;height:180px;background:radial-gradient(ellipse at 50% 90%,#c8dbef55,transparent 68%);filter:blur(22px)}
body[data-season="christmas"] .winter-lights{position:absolute;top:0;left:0;right:0;height:45px;display:flex;justify-content:space-around;border-top:2px solid #716a5377;transform:rotate(-.5deg)}
body[data-season="christmas"] .winter-lights i{position:relative;top:9px;width:7px;height:11px;border-radius:50%;background:#ffe3a2;box-shadow:0 0 12px 5px #f7c66a66;animation:winter-twinkle var(--twinkle) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.17s)}
@keyframes winter-twinkle{from{opacity:.35;filter:brightness(.6)}to{opacity:1;filter:brightness(1.4)}}
body[data-season="christmas"] .winter-title{position:relative}
body[data-season="christmas"] .winter-title-snow{position:absolute;left:0;right:0;top:-7px;height:8px;background:linear-gradient(180deg,#f5faff,#c9ddef);border-radius:60% 45% 35% 30%;box-shadow:0 2px 7px #b1d5ef88;pointer-events:none}
body[data-season="christmas"] .winter-reindeer{position:fixed;left:0;bottom:2%;width:clamp(85px,9vw,125px);z-index:4;pointer-events:none}
body[data-season="christmas"] .winter-reindeer svg{width:100%;height:auto;filter:drop-shadow(0 10px 12px #0009)}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .winter-lights i,body[data-season="christmas"] .winter-lantern i{animation:none}}

/* Advent: layered wax, natural flame flicker, subtle rising smoke and warm reflections. */
.advent-stand{position:absolute;bottom:clamp(14px,5vh,64px);display:flex;align-items:end;gap:clamp(4px,.55vw,11px);padding:0 8px 14px;z-index:33;filter:drop-shadow(0 8px 9px #0009)}
.advent-stand-left{left:clamp(5px,1.5vw,30px)}
.advent-stand-right{right:clamp(5px,1.5vw,30px)}
.advent-stand:after{content:"";position:absolute;bottom:2px;left:0;right:0;height:12px;border-radius:50%;background:linear-gradient(180deg,#a37a42,#3d2b22 75%);box-shadow:inset 0 2px 2px #f6cf8b66,0 5px 7px #0009}
.advent-candle{position:relative;width:clamp(17px,2.05vw,30px);height:clamp(72px,12vh,119px);display:flex;align-items:end}
.advent-candle:nth-child(2){height:clamp(78px,13vh,129px)}
.advent-candle:nth-child(3){height:clamp(69px,11vh,110px)}
.advent-candle:nth-child(4){height:clamp(75px,12.5vh,124px)}
.advent-candle-body{position:relative;width:100%;height:84%;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,#460909 0%,#8c1117 12%,#c62730 28%,#ec5051 43%,#b61620 68%,#59070d 94%,#310608);box-shadow:inset 1px 0 2px #ffb2a077,inset -2px 0 4px #2b000caa,0 1px 6px #000b}
.advent-candle-body:before{content:"";position:absolute;top:-3px;left:0;right:0;height:7px;border-radius:50%;background:radial-gradient(ellipse,#741015 40%,#e04c4c 62%,#56080d 95%);border:1px solid #a5282a}
.advent-wax-drip{position:absolute;top:2px;width:18%;background:linear-gradient(90deg,#e94d50,#8d121b);border-radius:0 0 7px 7px}
.drip-one{left:14%;height:23%}.drip-two{right:19%;height:14%}
.advent-wick{position:absolute;bottom:calc(100% + 2px);left:calc(50% - 1px);height:9px;width:2px;background:#231812;border-radius:2px;transform:rotate(5deg)}
.advent-flame{position:absolute;bottom:calc(84% + 7px);left:50%;width:15px;height:28px;transform:translateX(-50%);opacity:0;transform-origin:50% 100%;filter:drop-shadow(0 0 9px #ffab39)}
.advent-flame:before{content:"";position:absolute;inset:0;border-radius:75% 10% 65% 50%;background:radial-gradient(ellipse at 55% 75%,#fffbe6 0%,#ffeaa2 23%,#ffc049 48%,#ed671f 75%,transparent 95%);transform:rotate(38deg)}
.advent-flame i{position:absolute;bottom:3px;left:5px;width:5px;height:13px;border-radius:70% 70% 45% 45%;background:#f9ffff;filter:blur(.5px)}
.advent-candle.is-lit .advent-flame{opacity:1;animation:advent-flicker 1.45s ease-in-out infinite alternate;animation-delay:calc(var(--candle-index)*-.31s)}
.advent-reflection{position:absolute;bottom:12%;left:-40%;width:180%;height:78%;border-radius:50%;background:radial-gradient(ellipse,#ff94252b,transparent 70%);opacity:0;pointer-events:none}
.advent-candle.is-lit .advent-reflection{opacity:1;animation:advent-glow 2.2s ease-in-out infinite alternate}
.advent-smoke{position:absolute;bottom:calc(84% + 33px);left:50%;width:8px;height:35px;border-left:2px solid #cbd0db55;border-radius:50%;opacity:0;filter:blur(2px);pointer-events:none}
.advent-candle.is-lit .advent-smoke{animation:advent-smoke 4.6s ease-out infinite}
.advent-candle.is-lit .smoke-b{animation-delay:-2.3s}
@keyframes advent-flicker{0%{transform:translateX(-50%) scale(.88,1.05) rotate(-9deg);filter:drop-shadow(0 0 7px #ff9d32)}30%{transform:translateX(-50%) scale(1.07,.92) rotate(6deg)}65%{transform:translateX(-50%) scale(.91,1.12) rotate(-4deg)}100%{transform:translateX(-50%) scale(1.04,.97) rotate(8deg);filter:drop-shadow(0 0 15px #ff9d32)}}
@keyframes advent-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:.27}65%{opacity:.14}100%{opacity:0;transform:translate(19px,-66px) scale(2)}}
@keyframes advent-glow{to{opacity:.5;transform:scale(1.2)}}
@media(max-width:700px){.advent-stand{bottom:10px;gap:3px;padding:0 3px 9px}.advent-stand:after{height:8px}.advent-flame{scale:.75}.advent-smoke{scale:.75}}
@media(prefers-reduced-motion:reduce){.advent-flame,.advent-smoke,.advent-reflection{animation:none!important}}

/* V3.2.3: fir arrangement, wax flow and wispy smoke */
.advent-stand{isolation:isolate;padding-bottom:26px!important}
.advent-greenery{position:absolute;bottom:-13px;left:-22%;width:144%;height:74px;z-index:-1;pointer-events:none;filter:drop-shadow(0 7px 4px #0009)}
.advent-greenery svg{width:100%;height:100%;overflow:visible}
.advent-candle{z-index:1}
.advent-wax-flow{position:absolute;left:34%;top:3px;width:16%;height:0;border-radius:0 0 60% 60%;background:linear-gradient(90deg,#e94c50,#ae151d 80%);animation:advent-wax-run 18s ease-in-out infinite}
.advent-wax-drop{position:absolute;left:38%;top:15%;width:5px;height:8px;border-radius:50%;background:#ce2831;opacity:0;animation:advent-wax-fall 18s ease-in infinite}
@keyframes advent-wax-run{0%,10%{height:1px}60%,100%{height:33%}}
@keyframes advent-wax-fall{0%,63%{opacity:0;transform:translateY(0) scale(.6)}65%{opacity:1}79%{opacity:.9;transform:translateY(26px)}82%,100%{opacity:0;transform:translateY(35px)}}
.advent-candle.is-lit .advent-smoke{border-left:2px solid #d9d6d088;filter:blur(2.5px);width:11px;height:52px}
.advent-candle.is-lit .smoke-a{animation-duration:4.1s}
.advent-candle.is-lit .smoke-b{animation-duration:5.2s}
.advent-candle.is-lit .smoke-c{animation-duration:6.3s;animation-delay:-3.5s}
@keyframes advent-smoke{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.4)}15%{opacity:.36}40%{opacity:.27;transform:translate(6px,-20px) rotate(13deg) scale(1.1)}75%{opacity:.13;transform:translate(-7px,-48px) rotate(-16deg) scale(1.7)}100%{opacity:0;transform:translate(18px,-79px) rotate(20deg) scale(2.2)}}
@media(max-width:700px){.advent-greenery{height:48px;bottom:-5px}}

/* V3.2.4 — cinematic seasonal art direction, preserves readable live HTML and real portrait */
body[data-season="halloween"] .hero{background:
 linear-gradient(90deg,rgba(5,9,17,.84) 0%,rgba(5,9,17,.62) 47%,rgba(5,9,17,.46) 100%),
 url('festive-name-halloween.webp') center 47%/cover no-repeat!important;
 min-height:690px}
body[data-season="halloween"] .hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(ellipse at 15% 82%,#ff791f3b,transparent 34%),
 radial-gradient(ellipse at 88% 70%,#ff9a2525,transparent 28%),
 linear-gradient(180deg,#0206112b 0%,transparent 48%,#040811aa 100%);mix-blend-mode:screen}
body[data-season="halloween"] .hero-copy{filter:drop-shadow(0 4px 14px #000c)}
body[data-season="halloween"] .hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.065em;
 background:linear-gradient(180deg,#fff3df 4%,#d9ae8b 40%,#8f5b43 78%,#f4bc6d);background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(1px 3px 2px #000b)}
body[data-season="halloween"] .hero h1 span{background:inherit;background-clip:text}
body[data-season="halloween"] .hero .primary{background:linear-gradient(135deg,#a84e22,#ef9b51);box-shadow:0 0 25px #f0814866}
body[data-season="halloween"] .hero .secondary{border-color:#bc805b;background:#170f13cc}
body[data-season="halloween"] .hero-image img{box-shadow:0 0 40px #f38e2c22}
body[data-season="halloween"] .header{border-bottom-color:#8b4d3255;background:#0b1019ee}
body[data-season="halloween"] .hero-glow{opacity:.25}
body[data-season="halloween"] .halloween-pumpkin-patch{opacity:.8}
@media(max-width:750px){body[data-season="halloween"] .hero{background-position:58% center;min-height:0}body[data-season="halloween"] .hero h1{font-size:clamp(48px,10vw,75px)}}

/* V3.2.5: smoke visible against dark seasonal backgrounds */
.advent-candle.is-lit .advent-smoke{border-left:2.5px solid rgba(236,242,248,.88);filter:blur(1.7px);width:13px;height:60px;mix-blend-mode:screen}
@keyframes advent-smoke{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.5)}15%{opacity:.65}40%{opacity:.49;transform:translate(6px,-20px) rotate(13deg) scale(1.1)}75%{opacity:.25;transform:translate(-7px,-48px) rotate(-16deg) scale(1.7)}100%{opacity:0;transform:translate(18px,-79px) rotate(20deg) scale(2.2)}}

.season-bat .bat-fur-texture{pointer-events:none}

/* V3.2.8 — sculpted birthday cake and draped festive light strand */
body[data-season="birthday"] .hero{isolation:isolate}
.birthday-cake-scene{position:absolute;right:clamp(8px,3vw,70px);bottom:12px;width:clamp(180px,22vw,300px);height:245px;z-index:5;pointer-events:none;filter:drop-shadow(0 12px 16px #0009)}
.cake-glow{position:absolute;inset:30px -30px -10px;background:radial-gradient(ellipse,#ffc97833,transparent 67%);filter:blur(16px)}
.cake-plate{position:absolute;bottom:7px;left:3%;width:94%;height:34px;border-radius:50%;background:linear-gradient(#fff3e3 0%,#bda9b0 45%,#54434d 95%);box-shadow:0 9px 14px #000b}
.cake-layer{position:absolute;left:13%;width:74%;border-radius:45% 45% 16px 16px/25% 25% 10px 10px;background:linear-gradient(90deg,#4d2734,#ae6571 15%,#dc9b9b 37%,#a75a6c 68%,#44202c);border:1px solid #f6c9b988;box-shadow:inset 0 -10px 13px #3e1d28aa,0 5px 9px #0008}
.cake-layer:before{content:"";position:absolute;top:-13px;left:-1%;width:102%;height:31px;border-radius:50%;background:radial-gradient(ellipse at 45% 28%,#fff8ed,#e7d6c8 65%,#aa8384 100%);box-shadow:0 4px 7px #3c20266e}
.cake-layer i{position:absolute;z-index:1;left:0;right:0;top:8px;height:22px;background:radial-gradient(ellipse at 20% 0,#fff7e6 0 17%,transparent 19%),radial-gradient(ellipse at 53% 0,#fff7e6 0 22%,transparent 24%),radial-gradient(ellipse at 82% 0,#fff7e6 0 19%,transparent 21%);opacity:.9}
.cake-layer-bottom{bottom:23px;height:79px}
.cake-layer-middle{bottom:83px;left:22%;width:56%;height:65px}
.cake-layer-top{bottom:138px;left:30%;width:40%;height:50px}
.cake-berries{position:absolute;bottom:176px;left:31%;width:38%;height:20px;display:flex;justify-content:space-around;z-index:3}
.cake-berries b{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ff9b99,#a31637 65%,#3b0820);box-shadow:0 2px 3px #0007}
.cake-candles{position:absolute;left:32%;width:36%;bottom:184px;height:57px;display:flex;justify-content:space-around;align-items:end;z-index:4}
.cake-candle{position:relative;width:8px;height:29px;border-radius:2px;background:repeating-linear-gradient(135deg,#f7e7c7 0 5px,#d891a0 6px 10px);box-shadow:inset -2px 0 2px #562b43}
.cake-wick{position:absolute;bottom:100%;left:3px;width:2px;height:5px;background:#2d2526}
.cake-flame{position:absolute;bottom:calc(100% + 4px);left:-4px;width:15px;height:24px;border-radius:75% 15% 65% 50%;background:radial-gradient(ellipse at 45% 78%,#fffef4 0 20%,#ffeaa3 36%,#ff9a31 70%,transparent 85%);filter:drop-shadow(0 0 7px #ffbb50);transform:rotate(30deg);animation:cake-flame 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.21s)}
@keyframes cake-flame{to{transform:rotate(15deg) scale(.85,1.15);opacity:.78}}
.christmas-hero-garland{position:absolute;z-index:3;left:46%;top:10%;width:18%;height:74%;pointer-events:none;overflow:visible;filter:drop-shadow(0 2px 5px #000b)}
.christmas-hero-garland svg{width:100%;height:100%;overflow:visible}
.christmas-bulb{position:absolute;left:var(--x);top:var(--y);width:12px;height:19px;transform:translate(-50%,-10%) rotate(15deg);border-radius:35% 35% 55% 55%;background:radial-gradient(ellipse at 35% 30%,#fff8df,#ffe3a2 45%,#db8e37 90%);box-shadow:0 0 9px 3px #ffd78388,0 0 22px 5px #f8bb5a33;animation:christmas-glimmer var(--t) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.31s)}
.christmas-bulb:nth-of-type(3n){background:radial-gradient(ellipse at 35% 30%,#efffff,#a8e4ec 45%,#488caa 90%);box-shadow:0 0 9px 3px #9ce7ff88,0 0 22px 5px #75d5ff33}
.christmas-bulb:before{content:"";position:absolute;left:3px;top:-5px;width:6px;height:6px;background:linear-gradient(90deg,#384e43,#7a7c5d,#263f37);border-radius:2px}
.christmas-bulb i{position:absolute;inset:3px;border-radius:inherit;border-left:1px solid #fff9}
@keyframes christmas-glimmer{0%{opacity:.55;filter:brightness(.75)}100%{opacity:1;filter:brightness(1.3)}}
@media(max-width:750px){.birthday-cake-scene{right:4px;bottom:3px;transform:scale(.72);transform-origin:bottom right}.christmas-hero-garland{left:65%;top:2%;height:32%;width:26%;opacity:.85}}
@media(prefers-reduced-motion:reduce){.cake-flame,.christmas-bulb{animation:none!important}}

/* V3.2.9: passing Santa sleigh, layered fireworks, once-per-session New Year greeting */
.holiday-sleigh{position:absolute;left:0;top:10%;width:clamp(260px,36vw,540px);height:auto;pointer-events:none;z-index:9;filter:drop-shadow(0 8px 12px #000c)}
.holiday-sleigh svg{width:100%;height:auto;position:relative;z-index:1}
.holiday-star-trail{position:absolute;top:31%;left:100%;width:210px;height:85px;opacity:.95;background:radial-gradient(circle at 12% 40%,#fffce7 0 2px,transparent 4px),radial-gradient(circle at 38% 18%,#fbe4a6 0 2px,transparent 4px),radial-gradient(circle at 60% 70%,#d8eaff 0 2px,transparent 4px),radial-gradient(circle at 83% 29%,#ffe4a2 0 2px,transparent 4px),linear-gradient(90deg,#ffebba99,transparent 90%);filter:blur(1px);clip-path:polygon(0 35%,100% 0,80% 100%,0 62%);animation:holiday-starlight .65s infinite alternate}
@keyframes holiday-starlight{to{opacity:.4;filter:blur(3px)}}
.newyear-fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:42}
.newyear-greeting{position:fixed;inset:0;z-index:45;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse,#060e25d9,#020713c0);animation:newyear-intro .55s ease-out both}
.newyear-greeting-inner{text-align:center;padding:20px 35px;color:#fff8e7;font:700 clamp(30px,5vw,72px)/1.12 Georgia,serif;text-shadow:0 0 14px #ffce7a,0 0 45px #eaa04466}
.newyear-english{font-size:.63em;color:#e8eaff;margin-top:10px;font-weight:400}
.newyear-greeting strong{display:block;font:800 clamp(70px,12vw,180px)/1.1 system-ui,sans-serif;letter-spacing:.035em;background:linear-gradient(#fff5c6,#f2b955,#b7792f);background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 8px #000b)}
.newyear-greeting-out{opacity:0;transition:opacity .6s ease}
@keyframes newyear-intro{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px){.holiday-sleigh{width:260px}.holiday-star-trail{width:90px}}
@media(prefers-reduced-motion:reduce){.holiday-star-trail,.newyear-greeting{animation:none!important}}

/* V3.3.0 – scenic Christmas, individually snow-capped three-dimensional type */
body[data-season="christmas"] .hero{position:relative;isolation:isolate;background:linear-gradient(90deg,#081120ee 0%,#081120ce 42%,#07111c8c 70%,#07111c99 100%),url("winter-street-clean.webp") center center/cover no-repeat!important}
body[data-season="christmas"] .hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 86% 18%,#a3c7f233,transparent 42%),linear-gradient(0deg,#07111bcc,transparent 32%)}body[data-season="christmas"] .hero-grid{position:relative;}
body[data-season="christmas"] .hero-copy{position:relative;z-index:7}
body[data-season="christmas"] .hero-image{position:relative;z-index:6}
body[data-season="christmas"] .winter-title-snow{display:none!important}
body[data-season="christmas"] .winter-3d-title{position:relative;overflow:visible;font-family:Georgia,'Times New Roman',serif;letter-spacing:-.045em;line-height:1.24;padding-top:.13em;padding-bottom:.13em;filter:drop-shadow(3px 6px 3px #030b13)}
body[data-season="christmas"] .winter-3d-title .winter-letter{display:inline-block;position:relative;white-space:pre;color:#e4b887;-webkit-text-fill-color:#e4b887;background:none;transform:translateZ(0);text-shadow:1px 1px 0 #b98e65,2px 2px 0 #986b4d,3px 3px 0 #714c3d,4px 4px 0 #47342f,5px 7px 8px #020710;filter:drop-shadow(0 0 5px #d6b58855)}
body[data-season="christmas"] .winter-3d-title .winter-letter:before{content:"";position:absolute;left:-5%;top:8%;width:110%;height:clamp(5px,.7vw,11px);background:linear-gradient(180deg,#fff 0%,#f4fbff 32%,#d4e5f4 72%,#8ea7b9 100%);border-radius:65% 55% 30% 45%;box-shadow:0 2px 2px #8cabb888,0 -2px 4px #fff9;transform:translateY(var(--snow-offset,0px)) rotate(-1deg);pointer-events:none}
body[data-season="christmas"] .winter-3d-title .winter-letter:after{content:"";position:absolute;bottom:-.07em;left:5%;width:90%;height:.07em;min-height:3px;border-radius:70% 65% 35% 40%;background:linear-gradient(#f7fcff,#c3d6e6);box-shadow:0 2px 5px #c6d7f088;pointer-events:none}
body[data-season="christmas"] .winter-letter-snowbase{display:block;position:absolute;left:0;bottom:.035em;width:95%;height:.065em;border-radius:55% 65% 40% 40%;background:linear-gradient(#fff,#c9dce9);box-shadow:0 3px 8px #7da6c288;pointer-events:none}
body[data-season="christmas"] .winter-crystals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:12}
body[data-season="christmas"] .winter-crystal{position:absolute;left:var(--left);top:-45px;width:var(--size);height:var(--size);opacity:var(--alpha);filter:drop-shadow(0 0 4px #cdeaff99);animation:winter-crystal-fall var(--dur) linear var(--delay) infinite}
body[data-season="christmas"] .winter-crystal svg{display:block;width:100%;height:100%}
@keyframes winter-crystal-fall{from{transform:translate3d(0,-10vh,0) rotate(0)}to{transform:translate3d(var(--drift),115vh,0) rotate(330deg)}}
body[data-season="christmas"] .christmas-hero-garland{z-index:8}
@media(max-width:750px){body[data-season="christmas"] .hero{background-position:57% center!important}body[data-season="christmas"] .winter-3d-title{font-size:clamp(45px,9vw,78px)}}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .winter-crystal{animation:none;display:none}}

/* V3.3.1: snow is painted directly on the real glyph contours, not horizontal bars. */
body[data-season="christmas"] .hero h1.winter-sculpted-name{display:block!important;position:relative!important;width:100%;max-width:100%;height:auto;aspect-ratio:1600/285;min-height:0!important;margin:0 0 20px!important;padding:0!important;border:0!important;background:url("festive-name-advent.webp") center center/contain no-repeat!important;filter:drop-shadow(2px 7px 4px #000a);font-size:0!important;line-height:0!important;letter-spacing:0!important;white-space:nowrap;overflow:visible}
body[data-season="christmas"] .hero h1.winter-sculpted-name span{font-size:0!important;background:none!important;-webkit-text-fill-color:transparent!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name:before,body[data-season="christmas"] .hero h1.winter-sculpted-name:after{content:none!important;display:none!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name .winter-title-snow,body[data-season="christmas"] .hero h1.winter-sculpted-name .winter-letter-snowbase{display:none!important}
@media(max-width:750px){body[data-season="christmas"] .hero h1.winter-sculpted-name{margin-bottom:14px!important}}

/* V3.3.2: Actual cinematic street artwork from approved visual reference, edges only.
   Center remains transparent so the original tech circuit paths stay visible. */
body[data-season="christmas"] .hero{background:radial-gradient(ellipse at center,#07132620 0%,#0713266b 75%),linear-gradient(90deg,#050d18a8,#06132433 50%,#050d18a8)!important;isolation:isolate}
body[data-season="christmas"] .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("winter-street-clean.webp"),url("winter-street-clean.webp");background-repeat:no-repeat;background-position:left center,right center;background-size:min(27vw,440px) 100%,min(27vw,440px) 100%;opacity:1;filter:drop-shadow(0 0 18px #0b1c28)}
body[data-season="christmas"] .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 15% 27% at 5% 34%,#ffae3b30,transparent 70%),radial-gradient(ellipse 13% 30% at 96% 38%,#ffb5482c,transparent 75%);animation:winter-lantern-pulse 3.7s ease-in-out infinite alternate}
@keyframes winter-lantern-pulse{0%{opacity:.45}28%{opacity:.9}50%{opacity:.65}100%{opacity:1}}body[data-season="christmas"] .hero-grid{position:relative;}
body[data-season="christmas"] .hero-copy{background:linear-gradient(115deg,#07101ddd,#071322e9)!important;box-shadow:0 16px 60px #0008}
body[data-season="christmas"] .hero-image{box-shadow:0 0 0 2px #40caff66,0 0 25px #009df533}
body[data-season="christmas"] .hero h1.winter-sculpted-name{background-image:url("festive-name-advent.webp")!important}
@media(max-width:800px){body[data-season="christmas"] .hero::before{background-size:34vw 100%,34vw 100%;opacity:.65}body[data-season="christmas"] .hero-copy{background:#07101de8!important}}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .hero::after{animation:none}}

/* V3.3.3 — exact approved cinematic sculpted name, not font imitation. */
body[data-season="christmas"] .hero h1.winter-sculpted-name{
 background-image:url("festive-name-advent.webp")!important;
 background-size:100% 100%!important;background-position:left center!important;
 width:100%!important;aspect-ratio:746/232!important;max-height:none!important;
 margin:-8px 0 2px!important;filter:drop-shadow(0 9px 7px #000b) drop-shadow(0 0 10px #eaa35333)!important;
}
body[data-season="christmas"] .hero h1.winter-sculpted-name::before,
body[data-season="christmas"] .hero h1.winter-sculpted-name::after{display:none!important;content:none!important}
body[data-season="christmas"] .hero-copy{background:linear-gradient(90deg,#061021ee 0%,#061021cf 68%,#0610217a 100%)!important;backdrop-filter:blur(2px);}
body[data-season="christmas"] .hero{overflow:hidden}
body[data-season="christmas"] .hero .hero-glow{background-image:linear-gradient(0deg,#06122533,#06122500),url("winter-street-clean.webp")!important;background-position:bottom center!important;background-size:100% 19%,100% 21%!important;background-repeat:no-repeat!important;opacity:.52!important;pointer-events:none}
body[data-season="christmas"] .hero::before{background-size:min(32vw,500px) 100%,min(32vw,500px) 100%!important}
body[data-season="christmas"] .hero-image{border:2px solid #44baffaa;border-radius:28px;box-shadow:0 0 0 1px #b4e8ff33,0 0 24px #20aaff55!important}
@media(max-width:750px){body[data-season="christmas"] .hero h1.winter-sculpted-name{margin:0 0 8px!important}body[data-season="christmas"] .hero::before{background-size:35vw 100%,35vw 100%!important}}

/* V3.3.4: coherent cinematic winter scene, larger intact image title and real flicker */
body[data-season="christmas"] .hero{min-height:760px;overflow:hidden;background:radial-gradient(ellipse at 50% 72%,#10233b88,transparent 70%),#06101e!important}
body[data-season="christmas"] .hero::before{background-position:left center,right center!important;background-size:clamp(330px,33vw,630px) 100%,clamp(330px,33vw,630px) 100%!important;opacity:1!important;filter:none!important}
body[data-season="christmas"] .hero::after{background:radial-gradient(ellipse at 7% 31%,#ffb34c65 0%,#ff8b181e 14%,transparent 33%),radial-gradient(ellipse at 94% 30%,#ffba5060 0%,#ff9b2124 14%,transparent 32%),radial-gradient(ellipse at 87% 67%,#ffad3538,transparent 26%)!important;animation:winter-real-lights 2.9s ease-in-out infinite alternate!important;mix-blend-mode:screen}
@keyframes winter-real-lights{0%{opacity:.65;filter:brightness(.78)}19%{opacity:.97;filter:brightness(1.2)}42%{opacity:.78;filter:brightness(.91)}70%{opacity:1;filter:brightness(1.24)}100%{opacity:.72;filter:brightness(.86)}}
body[data-season="christmas"] .hero-grid{background:transparent!important;box-shadow:none!important;overflow:visible!important;min-height:710px;gap:clamp(10px,2vw,32px)!important}
body[data-season="christmas"] .hero-copy{overflow:visible!important;isolation:auto!important;background:linear-gradient(90deg,#071222e0 0%,#071525b9 76%,#07152580 100%)!important;border-radius:24px;box-shadow:0 16px 70px #0004!important;backdrop-filter:blur(1px)!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name{display:block!important;box-sizing:content-box!important;position:relative!important;z-index:20!important;width:calc(100% + 75px)!important;max-width:none!important;aspect-ratio:746/232!important;height:auto!important;min-height:0!important;margin:-12px -40px 0 -22px!important;padding:0!important;background-image:url('festive-name-advent.webp')!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center!important;overflow:visible!important;filter:drop-shadow(0 12px 10px #000b) drop-shadow(0 0 13px #ffc66a55)!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name span{visibility:hidden!important}
body[data-season="christmas"] .hero-image{z-index:11!important;align-self:center!important;border-radius:28px!important;overflow:hidden!important}
body[data-season="christmas"] .hero-image img{mask-image:none!important;border-radius:25px!important}
body[data-season="christmas"] .hero .hero-glow{opacity:.82!important;background-image:linear-gradient(to top,#07152644,transparent 43%),url('winter-street-clean.webp')!important;background-size:100% 34%,100% 36%!important;background-position:bottom center!important;background-repeat:no-repeat!important}
body[data-season="christmas"] .christmas-hero-garland{z-index:15!important;filter:drop-shadow(0 0 8px #ffdc8d99)}
@media(max-width:1050px){body[data-season="christmas"] .hero h1.winter-sculpted-name{width:calc(100% + 35px)!important;margin-left:-12px!important}}
@media(max-width:750px){body[data-season="christmas"] .hero{min-height:0}body[data-season="christmas"] .hero-grid{min-height:0}body[data-season="christmas"] .hero::before{background-size:54vw 100%,54vw 100%!important;opacity:.65!important}body[data-season="christmas"] .hero h1.winter-sculpted-name{width:100%!important;margin:0 0 8px!important}body[data-season="christmas"] .hero-copy{background:#071525e6!important}}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .hero::after{animation:none!important}}

/* V3.3.5 – unified winter street, responsive uncropped snow title, animated real lantern zones */
body[data-season="christmas"] .hero{position:relative!important;min-height:760px!important;background:#071324 url("winter-street-clean.webp") center center / cover no-repeat!important;overflow:hidden!important}
body[data-season="christmas"] .hero::before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,#06132633 0%,#06132613 21%,#06132613 77%,#06132633 100%)!important;opacity:1!important;pointer-events:none!important;filter:none!important}
body[data-season="christmas"] .hero::after{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(ellipse 13% 27% at 5% 24%,#ffca766e,transparent 80%),radial-gradient(ellipse 13% 28% at 94% 30%,#ffb85b69,transparent 80%),radial-gradient(ellipse 8% 16% at 17% 36%,#ffc47842,transparent 90%),radial-gradient(ellipse 8% 15% at 86% 39%,#ffcb7a46,transparent 90%)!important;mix-blend-mode:screen!important;animation:winter-street-lights 3.6s ease-in-out infinite alternate!important;pointer-events:none!important}
@keyframes winter-street-lights{0%{opacity:.43;filter:brightness(.76)}23%{opacity:.85;filter:brightness(1.05)}47%{opacity:.56;filter:brightness(.85)}71%{opacity:1;filter:brightness(1.18)}100%{opacity:.7;filter:brightness(.95)}}
body[data-season="christmas"] .hero .hero-glow{background:none!important;opacity:0!important}body[data-season="christmas"] .hero-grid{position:relative!important;min-height:680px!important;align-items:center!important;overflow:visible!important}
body[data-season="christmas"] .hero-copy{background:linear-gradient(90deg,#051121d9,#071728ad 85%,#07172875)!important;box-shadow:0 18px 65px #0005!important;border:1px solid #b4d5f019!important;overflow:visible!important;padding:38px 26px!important;border-radius:22px!important;backdrop-filter:blur(1.5px)!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:856 / 342!important;margin:-40px 0 -28px!important;padding:0!important;background:url("festive-name-advent.webp") center / contain no-repeat!important;overflow:visible!important;box-sizing:border-box!important;filter:drop-shadow(0 4px 12px #0008) drop-shadow(0 0 12px #ffc76b55)!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name span{visibility:hidden!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name::before,body[data-season="christmas"] .hero h1.winter-sculpted-name::after{display:none!important}
body[data-season="christmas"] .hero-image{position:relative!important;z-index:4!important;border:2px solid #43c3ff!important;box-shadow:0 0 0 2px #77ddff35,0 0 26px #36b9ff85!important}
body[data-season="christmas"] .winter-bough{opacity:.18!important}
@media(max-width:800px){body[data-season="christmas"] .hero{min-height:0!important;background-position:center top!important}body[data-season="christmas"] .hero-copy{padding:25px 15px!important}body[data-season="christmas"] .hero h1.winter-sculpted-name{margin:-25px 0 -22px!important}}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .hero::after{animation:none!important;opacity:.75!important}}

/* V3.3.6: clean background WITHOUT baked-in webpage content; navigation lights */
body[data-season="christmas"] .hero{background:#071324 url("winter-street-clean.webp") center center / cover no-repeat!important}
body[data-season="christmas"] .christmas-hero-garland{display:none!important}
body[data-season="christmas"] .header{overflow:visible!important;position:relative;z-index:70}
body[data-season="christmas"] .christmas-menu-lights{position:absolute;left:1.5%;right:1.5%;bottom:-17px;height:23px;display:flex;align-items:flex-start;justify-content:space-around;pointer-events:none;z-index:72}
body[data-season="christmas"] .christmas-menu-wire{position:absolute;top:0;left:0;right:0;height:12px;border-bottom:2px solid #314d3f;border-radius:0 0 50% 50%;filter:drop-shadow(0 1px 1px #000)}
body[data-season="christmas"] .christmas-menu-bulb{position:relative;top:8px;flex:none;width:9px;height:14px;border-radius:42% 42% 55% 55%;background:radial-gradient(circle at 35% 28%,#fffef0,#ffe5a1 45%,#d58a3d 85%);box-shadow:0 0 8px 3px #ffb75b99,0 0 18px 5px #ffb75b55;animation:christmas-glimmer var(--t) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.23s)}
body[data-season="christmas"] .christmas-menu-bulb:nth-child(4n){background:radial-gradient(circle at 35% 28%,#f7ffff,#a2e9ff 45%,#387bb2 85%);box-shadow:0 0 8px 3px #75d6ff99,0 0 18px 5px #75d6ff55}
body[data-season="christmas"] .christmas-menu-bulb:before{content:"";position:absolute;top:-5px;left:2px;width:5px;height:6px;background:#405d48;border-radius:2px}
@media(max-width:700px){body[data-season="christmas"] .christmas-menu-lights{bottom:-12px;height:17px}body[data-season="christmas"] .christmas-menu-bulb{width:6px;height:10px;top:6px}}
@media(prefers-reduced-motion:reduce){body[data-season="christmas"] .christmas-menu-bulb{animation:none!important}}

/* V3.3.7: actual transparent cinematic Halloween title, never clip the ornaments. */
body[data-season="halloween"] .hero h1{
 display:block!important;position:relative!important;box-sizing:border-box!important;
 width:100%!important;max-width:100%!important;height:auto!important;
 aspect-ratio:3 / 1!important;margin:-12px 0 -16px!important;padding:0!important;
 background:url("festive-name-halloween.webp") center center/contain no-repeat!important;
 font-size:0!important;line-height:0!important;letter-spacing:0!important;
 -webkit-text-fill-color:transparent!important;overflow:visible!important;
 filter:drop-shadow(0 9px 11px #000c) drop-shadow(0 0 10px #f47d2855)!important;
}
body[data-season="halloween"] .hero h1 span{visibility:hidden!important;font-size:0!important}
body[data-season="halloween"] .hero h1::before,body[data-season="halloween"] .hero h1::after{content:none!important;display:none!important}
@media(max-width:800px){body[data-season="halloween"] .hero h1{margin:-8px 0 -8px!important}}
@media(prefers-reduced-motion:no-preference){
 body[data-season="halloween"] .hero h1{animation:halloween-logo-embers 6.4s ease-in-out infinite alternate}
}
@keyframes halloween-logo-embers{0%,100%{filter:drop-shadow(0 9px 11px #000c) drop-shadow(0 0 7px #f47d2840)}45%{filter:drop-shadow(0 9px 11px #000c) drop-shadow(0 0 14px #ff9a4066)}73%{filter:drop-shadow(0 9px 11px #000c) drop-shadow(0 0 9px #f47d284a)}}

/* V3.3.8: Einzelne transparente Festtags-Schriftzüge */
body[data-season="halloween"] .hero h1,
body[data-season="birthday"] .hero h1,
body[data-season="christmas"] .hero h1,
body[data-season="newyear"] .hero h1,
body[data-season="eid"] .hero h1,
body[data-season="eid-fitr"] .hero h1,
body[data-season="eid-adha"] .hero h1 {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2.95/1!important;
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
  font-size:0!important;
  line-height:0!important;
  overflow:visible!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 7px 9px #0009)!important;
}
body[data-season="halloween"] .hero h1 {background-image:url("festive-name-halloween.webp")!important}
body[data-season="birthday"] .hero h1 {background-image:url("festive-name-birthday.webp")!important}
body[data-season="christmas"] .hero h1 {background-image:url("festive-name-advent.webp")!important}
body[data-season="newyear"] .hero h1 {background-image:url("festive-name-newyear.webp")!important}
body[data-season="eid"] .hero h1,
body[data-season="eid-fitr"] .hero h1,
body[data-season="eid-adha"] .hero h1 {background-image:url("festive-name-eid-fitr.webp")!important}
body[data-season="halloween"] .hero h1 *,
body[data-season="birthday"] .hero h1 *,
body[data-season="christmas"] .hero h1 *,
body[data-season="newyear"] .hero h1 *,
body[data-season="eid"] .hero h1 *,
body[data-season="eid-fitr"] .hero h1 *,
body[data-season="eid-adha"] .hero h1 * {
  visibility:hidden!important;
}

/* V3.3.9: Grafiken zeigen ausschließlich den Namen; Untertitel bleiben HTML. */
body[data-season="advent"] .hero h1 {background-image:url("festive-name-advent.webp")!important;}
body[data-season="advent"] .hero h1 * {visibility:hidden!important;}
body[data-season="advent"] .hero h1 {position:relative!important;display:block!important;width:100%!important;aspect-ratio:2.95/1!important;height:auto!important;font-size:0!important;line-height:0!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;}
body[data-season="halloween"] .hero h1,body[data-season="birthday"] .hero h1,body[data-season="christmas"] .hero h1,body[data-season="newyear"] .hero h1 {aspect-ratio:3.5/1!important;}
body[data-season="eid-fitr"] .hero h1,body[data-season="eid-adha"] .hero h1 {aspect-ratio:3.1/1!important;}

/* V3.4.0 – separate Eid graphics */
body[data-season="eid-fitr"] .hero h1{background-image:url("festive-name-eid-fitr.webp")!important}
body[data-season="eid-adha"] .hero h1{background-image:url("festive-name-eid-adha.webp")!important}
body[data-season="eid-fitr"] .hero h1,body[data-season="eid-adha"] .hero h1{aspect-ratio:2.9/1!important}

/* V3.4.2: Bildmotive mit echtem Alpha statt Raster; groessere Darstellung */
body[data-season] .hero h1{background-size:100% auto!important}

/* V3.4.4: fresh six genuine-alpha banners, never crop name. */
body[data-season="halloween"] .hero h1,
body[data-season="birthday"] .hero h1,
body[data-season="advent"] .hero h1,
body[data-season="christmas"] .hero h1,
body[data-season="newyear"] .hero h1,
body[data-season="eid-fitr"] .hero h1,
body[data-season="eid-adha"] .hero h1 {
 aspect-ratio:2/1!important; height:auto!important; background-size:contain!important;
 background-position:center center!important; overflow:visible!important;
 margin-top:-12px!important;margin-bottom:-8px!important;
}

/* V3.4.6: Rudolph nach drei gewöhnlichen Rentier-Einblendungen */
body[data-season="christmas"] .winter-rudolph{width:clamp(118px,12vw,175px);filter:drop-shadow(0 0 12px rgba(255,50,65,.27))}
body[data-season="christmas"] .winter-rudolph svg{overflow:visible}

/* V3.4.7 — floating lanterns and restrained ribbon animation */
.eid-floating-lantern{position:fixed;left:var(--x);top:10vh;width:26px;height:65px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 10px var(--light));opacity:.78;animation:eid-lantern-sway var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.eid-floating-lantern:before{content:"";position:absolute;left:12px;top:-16vh;height:16vh;width:1px;background:linear-gradient(transparent,#a98b5c77)}
.eid-lantern-top{display:block;position:absolute;left:4px;top:0;width:18px;height:11px;background:linear-gradient(90deg,#4c3524,#d5ae64,#614527);clip-path:polygon(50% 0,100% 100%,0 100%)}
.eid-lantern-body{position:absolute;left:1px;top:11px;width:24px;height:36px;border:3px solid #ae8650;border-radius:6px 6px 10px 10px;background:radial-gradient(ellipse,#fff6cc 0%,var(--light) 40%,#8b5a2999 90%);box-shadow:inset 0 0 12px #fff5a6a8,0 0 14px var(--light)}
.eid-lantern-body:before,.eid-lantern-body:after{content:"";position:absolute;top:0;bottom:0;width:2px;background:#73552f;left:6px}.eid-lantern-body:after{left:13px}
.eid-lantern-base{position:absolute;left:6px;top:47px;width:14px;height:8px;background:linear-gradient(90deg,#59432e,#c4a36e,#5b422a);border-radius:0 0 50% 50%}
@keyframes eid-lantern-sway{from{transform:rotate(-7deg) translateY(0);opacity:.6}to{transform:rotate(6deg) translateY(8px);opacity:.94}}
.birthday-ribbon{position:fixed;left:var(--x);top:-10vh;width:5px;height:36px;z-index:3;pointer-events:none;border-radius:50%;border-left:3px solid hsl(var(--hue) 80% 75%);transform:rotate(25deg);opacity:.7;animation:birthday-ribbon-fall var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes birthday-ribbon-fall{to{transform:translate(40px,120vh) rotate(760deg);opacity:.1}}
.christmas-menu-bulb{transition:opacity 1.8s ease,filter 1.8s ease;opacity:var(--individual-glow,1)}
.christmas-menu-bulb.christmas-bulb-soft-off{opacity:.12!important;filter:brightness(.25)!important}
@media(prefers-reduced-motion:reduce){.eid-floating-lantern,.birthday-ribbon{animation:none!important}}

/* V3.4.8 — Original-Schlittenvideo mit transparentem Chroma-Key */
.holiday-sleigh{width:clamp(380px,60vw,900px)!important;aspect-ratio:16/9;height:auto!important;overflow:visible;filter:drop-shadow(0 8px 12px #0007)}
.holiday-sleigh-video{width:100%;height:100%;display:block;object-fit:contain;background:transparent;pointer-events:none}
@media(max-width:600px){.holiday-sleigh{width:580px!important}}

/* V3.4.9 – corrected visual hierarchy and Christmas preview */
body[data-season="christmas"] .hero h1.winter-sculpted-name{margin-bottom:8px!important;}
body[data-season="christmas"] .hero-copy>h2{margin-top:15px!important;}
/* PCB floats above the scenery, but behind all glass content. */
.circuit-overlay{z-index:5!important;opacity:.72!important;}.section>.container{position:relative!important;z-index:10!important;}
.hero-grid{position:relative!important;}
.hero-copy,.hero-image,.two-cols>:first-child,.philosophy-grid>div:first-child,.teaching-inner>div:first-child,.music-inner>div:first-child,.contact-grid>div:first-child{background-color:rgba(6,15,30,.73)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;isolation:isolate;}
.hero-copy{background:linear-gradient(105deg,rgba(5,14,28,.86),rgba(5,14,28,.74))!important;}
.hero-image{background:#091628!important;}
/* Santa is a foreground animation, not a background element. */
#season-decor .holiday-sleigh{z-index:50!important;position:absolute!important;left:0!important;top:12%;width:clamp(460px,58vw,850px)!important;opacity:1;visibility:visible;will-change:transform;}
#season-decor .holiday-sleigh-video{width:100%;height:100%;display:block;object-fit:contain;}
@media(max-width:800px){body[data-season="christmas"] .hero-copy>h2{margin-top:12px!important;}#season-decor .holiday-sleigh{width:580px!important;}}

/* V3.5.0: fixed layering. Traces above scenery, under translucent panels. */
.circuit-overlay{position:fixed!important;inset:0!important;z-index:1!important;opacity:.65!important;pointer-events:none!important;isolation:auto!important;}
.hero,.section,footer{position:relative!important;z-index:2!important;isolation:auto!important;}.section>.container,footer>.container{position:relative!important;z-index:3!important;isolation:isolate!important;background:rgba(7,14,29,.28)!important;}
.hero-grid{position:relative!important;isolation:isolate!important;background:rgba(7,14,29,.28)!important;}
.hero-copy,.hero-image,.skill-card,.project-grid article,.memory-card,.form-panel,.philosophy-cards article,.section article{position:relative;z-index:2;background-color:rgba(8,17,33,.78)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
/* Keep background scenery visible through the panels, without traces drawing on top of text. */
body[data-season="christmas"] .hero h1.winter-sculpted-name{margin-bottom:26px!important;}
body[data-season="christmas"] .hero-copy>h2{margin-top:20px!important;}
#season-decor{z-index:35!important;}
#season-decor .holiday-sleigh{width:clamp(350px,48vw,720px)!important;aspect-ratio:16/9!important;z-index:70!important;}
.sleigh-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(38px,5vw,85px);filter:drop-shadow(0 0 12px #ffe7b4);white-space:nowrap;}
@media(max-width:800px){body[data-season="christmas"] .hero h1.winter-sculpted-name{margin-bottom:18px!important;}#season-decor .holiday-sleigh{width:480px!important;}}

/* V3.5.1 – gemeinsame Leiterbahn-/Elektronen-Ebene oberhalb Landschaft, unter Glas-Kacheln */
body{isolation:isolate}
.circuit-overlay{position:fixed!important;inset:0!important;z-index:12!important;opacity:.86!important;visibility:visible!important;mask-image:none!important;-webkit-mask-image:none!important;pointer-events:none!important}
.circuit-overlay svg{display:block!important;visibility:visible!important}
.circuit-overlay .pcb-traces path{stroke-width:3.7!important;opacity:1!important;visibility:visible!important;filter:drop-shadow(0 0 6px #2c9fff)!important}
#pcb-signal-canvas{z-index:12!important;opacity:1!important}
.hero,.section,footer{position:relative!important;z-index:2!important;isolation:auto!important}
.hero-grid,.section>.container,footer>.container{background:transparent!important;isolation:auto!important}
.hero-copy,.hero-image,.skill-card,.project-grid article,.memory-card,.form-panel,.philosophy-cards article,.section article{position:relative!important;z-index:14!important;background-color:rgba(8,17,33,.76)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hero h1,.hero h2,.hero p{position:relative;z-index:15}
#season-decor{z-index:80!important;overflow:visible!important}
#season-decor .holiday-sleigh{z-index:81!important;position:absolute!important;display:block!important;top:8%!important;width:clamp(440px,55vw,820px)!important;height:auto!important;aspect-ratio:16/9!important;opacity:1!important;visibility:visible!important;transform-origin:center!important}
#season-decor .holiday-sleigh-video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
body[data-season="christmas"] .hero h1.winter-sculpted-name{margin-bottom:26px!important}
@media(max-width:700px){#season-decor .holiday-sleigh{width:480px!important}}

/* V3.5.2: one coherent stacking model. PCB/electrons over scenery,
   below all glass panels. No extra opaque overlay on entire hero grid. */
body{isolation:isolate!important}
.circuit-overlay{z-index:2!important;opacity:.88!important;visibility:visible!important;mask-image:none!important;-webkit-mask-image:none!important}
#pcb-signal-canvas{z-index:2!important;opacity:1!important}
.hero,.section,footer{position:relative!important;z-index:3!important;isolation:auto!important}
.hero{background-color:transparent!important}.section>.container,footer>.container{position:relative!important;z-index:auto!important;isolation:auto!important;background:transparent!important}
.hero-grid{position:relative!important;isolation:auto!important;background:transparent!important}
.hero-copy,.hero-image{position:relative!important;z-index:4!important;isolation:isolate!important}
.hero-copy{background:linear-gradient(105deg,rgba(5,14,28,.81),rgba(5,14,28,.71))!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
.hero-image{background:rgba(7,18,35,.42)!important}
#season-decor{z-index:60!important;pointer-events:none!important}
#season-decor .holiday-sleigh{z-index:61!important;visibility:visible!important;opacity:1!important;display:block!important}
#season-decor .holiday-sleigh-video{display:block!important;object-fit:contain!important;background:transparent!important}

/* V3.5.3: Sleigh always in the topmost overlay, above header and all cards. */
body #season-decor{z-index:2147483646!important;isolation:isolate!important;pointer-events:none!important;overflow:visible!important}
body #season-decor .holiday-sleigh{z-index:2147483647!important;position:absolute!important;left:0!important;pointer-events:none!important}

/* V3.5.4: Santa original subject opacity restored; only background transparent */
body #season-decor .holiday-sleigh,body #season-decor .holiday-sleigh-video{opacity:1!important;filter:none!important;mix-blend-mode:normal!important}

/* V3.5.6 — echtes Rentierfoto statt SVG-Clipart, ohne rote Nase */
body[data-season="christmas"] .winter-reindeer:not(.winter-rudolph){width:clamp(155px,18vw,270px);opacity:1}
body[data-season="christmas"] .winter-reindeer img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 9px rgba(0,0,0,.4))}

/* V3.5.7: Lichtzentren direkt an die sichtbaren Wandlaternen ausrichten.
   Nur die Lichtkegel korrigieren, die Winterkulisse selbst bleibt unverändert. */
body[data-season="christmas"] .hero::after{
 background:radial-gradient(ellipse 11% 22% at 5% 13%,#ffca766e,transparent 80%),
 radial-gradient(ellipse 11% 22% at 94% 14%,#ffb85b69,transparent 80%),
 radial-gradient(ellipse 7% 13% at 17% 27%,#ffc47832,transparent 90%),
 radial-gradient(ellipse 7% 13% at 86% 29%,#ffcb7a32,transparent 90%)!important;
}

/* V3.6.4: PCB restored above scenery and below glass cards.
   Avoid section-level stacking contexts hiding the fixed PCB overlay. */
body{isolation:auto!important}
.hero,.section,footer{z-index:auto!important;isolation:auto!important}
.circuit-overlay{position:fixed!important;inset:0!important;z-index:20!important;opacity:.92!important;visibility:visible!important;display:block!important;pointer-events:none!important;mask-image:none!important;-webkit-mask-image:none!important;isolation:auto!important}
.circuit-overlay svg{display:block!important;width:100%!important;height:100%!important;visibility:visible!important}
.circuit-overlay .pcb-traces path{visibility:visible!important;opacity:1!important;stroke-width:3.4!important}
#pcb-signal-canvas{position:fixed!important;inset:0!important;z-index:20!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.section>.container,footer>.container{position:relative!important;z-index:25!important;isolation:isolate!important}
.hero-grid{position:relative!important;isolation:isolate!important}
.hero-copy,.hero-image{position:relative!important;z-index:26!important}
/* Keep the existing translucent panel backgrounds, including the Christmas glass. */
#season-decor{z-index:2147483646!important}

/* V3.6.5: Both animated Christmas characters share the absolute top layer.
   Keep the background circuitry and glass card stacking from V3.6.4 intact. */
body #season-decor{position:fixed!important;z-index:2147483646!important;isolation:isolate!important;overflow:visible!important;pointer-events:none!important}
body #season-decor .holiday-sleigh,
body #season-decor .winter-reindeer{position:fixed!important;z-index:2147483647!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;mix-blend-mode:normal!important}
body #season-decor .winter-reindeer{left:0!important;bottom:2%!important;will-change:transform,opacity}
body #season-decor .winter-reindeer img{display:block!important;opacity:1!important;mix-blend-mode:normal!important}

/* V3.6.7: consistent PCB stacking. Both paths and animated electrons must
   share the same fixed layer, above scenery and below translucent content.
   Avoid creating a stacking context on any ancestor of content cards. */
html body .circuit-overlay{position:fixed!important;inset:0!important;z-index:120!important;display:block!important;visibility:visible!important;opacity:.9!important;pointer-events:none!important;overflow:visible!important;isolation:auto!important;mask-image:none!important;-webkit-mask-image:none!important}
html body .circuit-overlay svg{display:block!important;visibility:visible!important;width:100%!important;height:100%!important}
html body .circuit-overlay .pcb-traces path{display:inline!important;visibility:visible!important;opacity:1!important;stroke-width:3.6!important;filter:drop-shadow(0 0 5px #399cff)!important}
html body #pcb-signal-canvas{position:fixed!important;inset:0!important;z-index:120!important;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:none!important}
html body .hero,html body .section,html body footer{z-index:auto!important;isolation:auto!important}
html body .hero-grid{z-index:auto!important;isolation:auto!important;background:transparent!important}
html body .section>.container,html body footer>.container{position:relative!important;z-index:125!important;isolation:auto!important;background:rgba(7,14,29,.14)!important}
html body .hero-copy,html body .hero-image{position:relative!important;z-index:125!important;background-color:rgba(8,17,33,.70)!important}
html body .hero h1,html body .hero h2,html body .hero p{z-index:auto!important}
html body #season-decor{z-index:2147483646!important}
html body #season-decor .holiday-sleigh,html body #season-decor .winter-reindeer{z-index:2147483647!important}

/* V3.6.9: portrait receives its own glass card, just like the left copy card.
   Preserve original circuit SVG paths; never move their endpoints. */
html body .hero-image{
 position:relative!important;z-index:125!important;isolation:isolate!important;
 background:linear-gradient(110deg,rgba(5,14,28,.89),rgba(7,21,39,.83))!important;
 -webkit-backdrop-filter:blur(7px)!important;backdrop-filter:blur(7px)!important;
 overflow:hidden!important;border-radius:28px!important;
}
html body .hero-image::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:rgba(7,18,35,.38);border-radius:inherit}
html body .hero-image>img,html body .hero-image>.portrait-halo,html body .hero-image>.floating-note{position:relative;z-index:1}
html body .hero-image>.portrait-halo{position:absolute}


/* V3.7.1: Restore original portrait presentation. Only fix the stacking
   context of the shared grid; never force padding, image dimensions,
   border-radius or clipping onto the portrait card. */
html body .hero{position:relative!important;z-index:auto!important;isolation:auto!important}
html body .hero-grid{position:relative!important;z-index:121!important;
 isolation:auto!important;background:transparent!important}
html body .hero-grid>.hero-copy,html body .hero-grid>.hero-image{
 position:relative!important;z-index:1!important;
}
/* Portrait card: preserve the original bright blue frame, edge-to-edge
   photograph and floating-note placement. */
html body .hero-grid>.hero-image{
 display:block!important;padding:0!important;align-self:center!important;
 background:rgba(8,17,33,.70)!important;
 border:2px solid #43c3ff!important;
 border-radius:26px!important;
 box-shadow:0 0 0 2px #77ddff35,0 0 26px #36b9ff85!important;
 overflow:visible!important;isolation:isolate!important;
 backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
}
html body .hero-grid>.hero-image::before{content:none!important}
html body .hero-grid>.hero-image>img{
 display:block!important;width:100%!important;height:auto!important;
 max-height:none!important;object-fit:cover!important;
 border-radius:22px!important;mask-image:none!important;
 -webkit-mask-image:none!important;
 position:relative!important;z-index:1!important;
}
html body .hero-grid>.hero-image>.portrait-halo{position:absolute!important;z-index:0!important}
html body .hero-grid>.hero-image>.floating-note{position:absolute!important;z-index:3!important}
/* Do not change original left card styling. */

/* V3.7.2: Keep portrait note fully inside the image/card. */
html body .hero-grid>.hero-image>.floating-note{
 position:absolute!important;z-index:3!important;
 right:14px!important;left:auto!important;bottom:18px!important;top:auto!important;
 max-width:calc(100% - 28px)!important;width:max-content!important;
 box-sizing:border-box!important;white-space:normal!important;
 text-align:center!important;line-height:1.45!important;
 padding:10px 14px!important;overflow-wrap:normal!important;
 background:rgba(7,19,35,.92)!important;
 border:1px solid #315b86!important;border-radius:14px!important;
}
@media(max-width:760px){html body .hero-grid>.hero-image>.floating-note{right:10px!important;bottom:10px!important;font-size:11px!important;max-width:calc(100% - 20px)!important}}

/* V3.7.3 — Halloween props above hero cards, preserving all PCB and card layers.
   The pumpkin patch is a sibling of .hero-grid and previously painted behind it.
   Raise ONLY the Halloween prop container; never change the global stacking scheme. */
body[data-season="halloween"] .hero>.halloween-pumpkin-patch{
  position:absolute!important;z-index:124!important;
  opacity:1!important;overflow:visible!important;
  pointer-events:none!important;isolation:isolate!important;
  filter:none!important;
}
body[data-season="halloween"] .hero>.halloween-pumpkin-patch>.halloween-pumpkin{
  position:relative!important;z-index:1!important;
  opacity:1!important;
  filter:drop-shadow(0 0 var(--glow-radius,12px) rgba(242,92,14,.55)) drop-shadow(0 9px 8px #000b)!important;
}
body[data-season="halloween"] .hero>.halloween-pumpkin-patch>.halloween-pumpkin-cat{
  z-index:3!important;opacity:1!important;
  filter:drop-shadow(0 12px 12px #000d)!important;
}
body[data-season="halloween"] .hero>.halloween-pumpkin-patch .witch-cat-animation{
  opacity:1!important;filter:none!important;
}

/* V3.7.4: sporadic translucent white Halloween ghosts above scenery and cards. */
body[data-season="halloween"] .halloween-ghost{position:fixed;pointer-events:none;z-index:2147483000;opacity:0;filter:drop-shadow(0 0 14px #cceeff88);will-change:transform,opacity}
body[data-season="halloween"] .halloween-ghost svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.halloween-ghost{display:none!important}}

/* V3.7.5 — birthday, New Year and Eid decorations. Do not touch hero-grid,
   portrait, PCB/electrons or existing seasonal preview code. */
body[data-season="eid-fitr"] .eid-floating-lantern,body[data-season="eid-adha"] .eid-floating-lantern{display:none!important}
.eid-ornate-lantern{position:fixed;left:var(--x);top:8vh;width:clamp(39px,4.5vw,68px);height:auto;z-index:4;pointer-events:none;transform-origin:50% -30%;animation:eid-gentle-sway var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay);filter:drop-shadow(0 0 12px #f4d89e8c)}
.eid-ornate-lantern:before{content:"";position:absolute;bottom:100%;left:50%;width:1px;height:9vh;background:linear-gradient(transparent,#d8b97688)}
.eid-ornate-lantern svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 9px #ffe1a67a);animation:eid-led-glow 5.6s ease-in-out infinite alternate}
@keyframes eid-gentle-sway{from{transform:rotate(-4deg) scale(var(--scale))}to{transform:rotate(4deg) scale(var(--scale))}}
@keyframes eid-led-glow{from{filter:drop-shadow(0 0 7px #ffdd9e75);opacity:.91}to{filter:drop-shadow(0 0 13px #ffdd9eb5);opacity:1}}
.eid-arch-trim{position:fixed;bottom:3vh;width:125px;height:130px;pointer-events:none;z-index:4;color:#d8b774;opacity:.85;border:2px solid #bd95548c;border-radius:70px 70px 8px 8px;box-shadow:inset 0 0 22px #d3aa5233,0 0 15px #d6ae5633;display:grid;place-items:center;font-family:Georgia,serif}
.eid-arch-left{left:2vw}.eid-arch-right{right:2vw}.eid-arch-moon{font-size:75px;text-shadow:0 0 14px #ffe7ad88}.eid-arch-star{position:absolute;right:18px;top:18px;font-size:24px}.eid-arch-star.small{right:22px;top:68px;font-size:17px}
body[data-season="eid-fitr"] .eid-arch-trim{border-color:#93c5aa88;color:#e4d8a5}
.birthday-bunting,.newyear-festoon{position:fixed;top:83px;left:0;right:0;height:42px;display:flex;justify-content:space-around;pointer-events:none;z-index:4;border-top:2px solid #fff5}
.birthday-bunting i{display:block;width:clamp(14px,2vw,30px);height:clamp(24px,3vw,44px);background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px #0007);transform:rotate(calc((var(--i) - 10)*.5deg))}
.birthday-present{position:fixed;bottom:8vh;width:76px;height:69px;border-radius:7px;background:linear-gradient(135deg,#e55b91,#a8387d);box-shadow:inset -12px -8px 13px #0004,0 10px 25px #0008;z-index:4;pointer-events:none;transform:rotate(-9deg)}
.birthday-present-left{left:3vw}.birthday-present-right{right:3vw;transform:rotate(11deg);background:linear-gradient(135deg,#5ecaf4,#4860bb)}
.birthday-present:before{content:"";position:absolute;left:-5px;top:-12px;width:calc(100% + 10px);height:18px;background:#ffd789;border-radius:5px;box-shadow:0 3px 5px #0004}
.gift-ribbon{position:absolute;left:42%;top:-12px;width:14px;height:81px;background:#ffe4a2;box-shadow:inset -3px 0 #b97b49}
.gift-bow{position:absolute;left:20px;top:-31px;width:36px;height:23px;border:8px solid #ffe5aa;border-radius:60% 60% 30% 30%;transform:rotate(-9deg)}
.birthday-glint{position:fixed;left:var(--x);top:var(--y);width:7px;height:7px;background:#fff7c6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);pointer-events:none;z-index:4;animation:birthday-spark var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes birthday-spark{from{opacity:.15;transform:scale(.4)}to{opacity:.85;transform:scale(1.6)}}
.newyear-festoon{height:45px;border-top:2px solid #dfc18188}
.newyear-festoon i{display:block;width:4px;height:32px;background:linear-gradient(#e8c774,transparent);transform:rotate(calc((var(--i) - 11)*1deg));box-shadow:0 0 9px #f6c66e77}
.newyear-festoon i:after{content:"✦";position:absolute;top:25px;left:-7px;color:hsl(var(--h) 80% 80%);font-size:17px}
.newyear-side-curls{position:fixed;top:20vh;width:100px;height:65vh;z-index:4;pointer-events:none}.newyear-side-left{left:0}.newyear-side-right{right:0;transform:scaleX(-1)}
.newyear-side-curls span{position:absolute;left:calc(5px + var(--n)*14px);top:calc(8% + var(--n)*14%);width:20px;height:105px;border-left:5px solid hsl(var(--h) 88% 73%);border-radius:50%;transform:rotate(calc(-30deg + var(--n)*8deg));filter:drop-shadow(0 0 4px #ffe2a4)}
.newyear-paper{position:fixed;top:-10vh;left:var(--x);width:9px;height:17px;background:hsl(var(--h) 90% 76%);pointer-events:none;z-index:4;opacity:.78;animation:newyear-paper-fall var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes newyear-paper-fall{to{transform:translate(65px,115vh) rotate(800deg);opacity:.2}}
@media(max-width:700px){.eid-arch-trim{width:65px;height:80px;bottom:4vh}.eid-arch-moon{font-size:40px}.eid-arch-star{font-size:14px;right:7px}.eid-arch-star.small{font-size:10px;right:8px;top:40px}.birthday-present{width:42px;height:42px}.gift-ribbon{height:53px;left:39%}.gift-bow{left:8px;width:25px}.newyear-side-curls{opacity:.6}}
@media(prefers-reduced-motion:reduce){.eid-ornate-lantern,.eid-ornate-lantern svg,.birthday-glint,.newyear-paper{animation:none!important}}

/* V3.7.6: physically curled ribbons, highlights and Berlin doughnuts. */
.festive-real-streamers{position:fixed;top:78px;width:clamp(90px,15vw,230px);height:clamp(190px,55vh,540px);pointer-events:none;z-index:4;opacity:.96;filter:drop-shadow(0 8px 7px #0008);transform-origin:50% 0;animation:festive-ribbon-sway 6.5s ease-in-out infinite alternate}
.festive-real-streamers img{width:100%;height:100%;object-fit:fill;display:block}
.festive-streamers-left{left:0}.festive-streamers-right{right:0;transform:scaleX(-1);animation-name:festive-ribbon-sway-right;animation-delay:-3s}
.festive-metallic{filter:drop-shadow(0 8px 9px #000a) brightness(1.13)}
@keyframes festive-ribbon-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes festive-ribbon-sway-right{from{transform:scaleX(-1) rotate(-3deg)}to{transform:scaleX(-1) rotate(3deg)}}
.newyear-berliner{position:fixed;bottom:12px;right:clamp(5px,2.5vw,46px);width:clamp(145px,22vw,310px);pointer-events:none;z-index:4;filter:drop-shadow(0 10px 18px #000b)}
.newyear-berliner img{display:block;width:100%;height:auto}
@media(max-width:700px){.festive-real-streamers{width:80px;height:240px;opacity:.85}.newyear-berliner{width:145px;bottom:18px}}
@media(prefers-reduced-motion:reduce){.festive-real-streamers{animation:none!important}}

/* V3.7.7: Eid al-Fitr photographic evening, kept behind the established
   PCB and glass cards. Eid al-Adha is deliberately unaffected. */
body[data-season="eid-fitr"] .hero{
 background-image:linear-gradient(90deg,rgba(5,12,27,.36),rgba(5,12,27,.20)),
 url("eid-fitr-evening.webp")!important;
 background-size:cover!important;background-position:center center!important;
}
body[data-season="eid-fitr"] .hero::before{opacity:.18!important}
body[data-season="eid-fitr"] .eid-ornate-lantern{filter:drop-shadow(0 0 10px #eabf7c80)}
/* Real Berliner photo with soft feathered transparency instead of flat SVG. */
body[data-season="newyear"] .newyear-berliner{
 width:clamp(180px,27vw,385px);right:clamp(6px,2vw,35px);bottom:4px;
 filter:drop-shadow(0 10px 22px #000a);opacity:.97;
}
@media(max-width:700px){
 body[data-season="eid-fitr"] .hero{background-position:55% center!important}
 body[data-season="newyear"] .newyear-berliner{width:175px}
}

/* V3.7.9: remove lower-corner Eid cliparts; leave both corners empty. */
body[data-season="eid-fitr"] .eid-arch-trim,
body[data-season="eid-adha"] .eid-arch-trim{display:none!important}
/* New Year's background includes Berliner pastries at the left edge.
   Do not place any extra Berliner overlay above the hero or portrait. */
body[data-season="newyear"] .hero{
 background-image:linear-gradient(90deg,rgba(4,10,24,.32),rgba(4,10,24,.16)),
 url("silvester-berlin-background.webp")!important;
 background-size:cover!important;
 background-position:left center!important;
 background-repeat:no-repeat!important;
}
body[data-season="newyear"] .newyear-berliner{display:none!important}
@media(max-width:700px){
 body[data-season="newyear"] .hero{background-position:18% center!important}
}

/* V3.8.0 – Eid al-Adha background only. The approved picture has the
   communal meal at left, sheep at right, and an uncluttered central area.
   Do not alter PCB/electron stacking, portrait, cards, or any other theme. */
body[data-season="eid-adha"] .hero{
 background-image:linear-gradient(90deg,rgba(5,11,25,.17),rgba(5,11,25,.12)),url("eid-adha-courtyard.webp")!important;
 background-position:center center!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
}
@media(max-width:700px){body[data-season="eid-adha"] .hero{background-position:center center!important}}

/* V3.8.1 — animated candle flames INSIDE the existing hanging Eid SVG lanterns.
   Do not modify stacking contexts, backgrounds, portrait or PCB. */
body[data-season="eid-fitr"] .eid-ornate-lantern .eid-flame,
body[data-season="eid-adha"] .eid-ornate-lantern .eid-flame{
 transform-box:view-box;transform-origin:45px 128px;
 animation:eid-candle-flame var(--flame-speed, .85s) ease-in-out infinite alternate;
 animation-delay:var(--flame-delay,0s);
 filter:drop-shadow(0 0 5px #ffae3e);
}
body[data-season="eid-fitr"] .eid-ornate-lantern .eid-flame-halo,
body[data-season="eid-adha"] .eid-ornate-lantern .eid-flame-halo{
 transform-box:view-box;transform-origin:45px 110px;
 animation:eid-candle-glow calc(var(--flame-speed,.85s) * 1.31) ease-in-out infinite alternate;
 animation-delay:var(--flame-delay,0s);
}
@keyframes eid-candle-flame{
 0%{transform:translate(-1px,0) rotate(-5deg) scale(.86,1.04);opacity:.83}
 35%{transform:translate(1px,1px) rotate(4deg) scale(1.05,.93);opacity:1}
 70%{transform:translate(-.5px,0) rotate(-2deg) scale(.93,1.12);opacity:.9}
 100%{transform:translate(1px,1px) rotate(6deg) scale(1.08,.85);opacity:1}
}
@keyframes eid-candle-glow{
 from{opacity:.42;transform:scale(.88,.95)}
 to{opacity:1;transform:scale(1.15,1.1)}
}
@media(prefers-reduced-motion:reduce){.eid-ornate-lantern .eid-flame,.eid-ornate-lantern .eid-flame-halo{animation:none!important}}

/* V3.8.2: flame sits BEHIND the glass; each lantern flickers independently.
   The glass body and warm halo react to the same per-lantern flicker value. */
body[data-season^="eid-"] .eid-ornate-lantern .eid-flame{
 opacity:.20!important;
 filter:blur(1.8px)!important;
 mix-blend-mode:screen;
}
body[data-season^="eid-"] .eid-ornate-lantern .eid-flame-halo{
 opacity:calc(var(--fire-light,.65) * .72)!important;
 filter:blur(6px);
}
body[data-season^="eid-"] .eid-ornate-lantern svg{
 animation:none!important;
 opacity:1!important;
 filter:drop-shadow(0 0 calc(4px + 23px * var(--fire-light,.65)) rgba(255,174,58,.85))
        drop-shadow(0 0 calc(2px + 12px * var(--fire-light,.65)) rgba(255,226,146,.65))!important;
}
body[data-season^="eid-"] .eid-ornate-lantern{
 filter:drop-shadow(0 0 calc(3px + 15px * var(--fire-light,.65)) rgba(255,188,88,.65))!important;
}
@media(prefers-reduced-motion:reduce){
 body[data-season^="eid-"] .eid-ornate-lantern{--fire-light:.65!important}
}

/* V3.9.0: accessible legal and holiday information pages */
.legal{max-width:900px;margin:0 auto;padding:2.5rem clamp(1rem,3vw,3rem);background:rgba(13,23,47,.87);border:1px solid rgba(135,179,224,.22);border-radius:22px;box-shadow:0 16px 60px rgba(0,0,0,.2)}
.legal h2{margin-top:2rem}.legal h3{margin-top:1.25rem;color:#a5d5ff}.legal p{line-height:1.8;margin:.75rem 0 1.1rem}.legal a{color:#83d7ff;text-decoration:underline;text-underline-offset:3px}

/* V3.9.2: fixed holiday information shortcut; unobtrusive on mobile. */
a.holiday-info-button{position:fixed;top:clamp(76px,9vh,106px);right:clamp(14px,2.8vw,38px);z-index:9000;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(195,225,255,.85);border-radius:50%;background:rgba(8,24,52,.76);color:#fff;text-decoration:none;font:italic 700 25px/1 Georgia,serif;box-shadow:0 3px 18px rgba(0,0,0,.4),inset 0 0 14px rgba(95,168,255,.16);backdrop-filter:blur(8px);transition:background .2s,transform .2s,box-shadow .2s}
a.holiday-info-button[hidden]{display:none!important}
a.holiday-info-button:hover,a.holiday-info-button:focus-visible{background:rgba(28,91,153,.95);transform:scale(1.07);box-shadow:0 0 18px rgba(128,204,255,.55);outline-offset:3px}
@media(max-width:700px){a.holiday-info-button{top:76px;right:12px;width:39px;height:39px;font-size:23px}}

/* V3.9.3: The fixed-in-view header must always be above scrolling page content.
   Override the older Christmas position:relative rule as well. */
html body .header,html body[data-season="christmas"] .header{
  position:sticky!important;top:0!important;z-index:100000!important;
  isolation:isolate!important;
  background-color:rgba(7,13,27,.96)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* Keep all page sections behind the navigation while scrolling. */
html body main,html body .hero,html body .section,html body footer{z-index:auto!important;}

/* V3.9.4: compact, accessible local-language selector. */
.lang-switch{position:fixed;right:clamp(12px,2.7vw,35px);top:12px;z-index:9500;font-size:13px;color:#fff}
.lang-switch-button{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:25px;border:1px solid #58749b;background:#0c1a31ee;color:#fff;box-shadow:0 4px 15px #0005;backdrop-filter:blur(10px);cursor:pointer}
.lang-switch-button:hover,.lang-switch-button:focus-visible{border-color:#79c9ff;outline-offset:3px}
.lang-switch-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:148px;background:#0b1c34;border:1px solid #50759c;border-radius:12px;padding:5px;box-shadow:0 14px 35px #0009}
.lang-switch-menu[hidden]{display:none!important}.lang-switch-menu button{display:block;width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:9px 10px;border-radius:7px;cursor:pointer}
.lang-switch-menu button:hover,.lang-switch-menu button:focus-visible{background:#24476c}
.language-skills{margin-top:32px;padding:24px;background:linear-gradient(125deg,#102540,#11182f);border:1px solid #35537a;border-radius:18px}
.language-skills h3{margin:0 0 15px;color:#c5eaff}.language-skill-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.language-skill-items span{display:flex;flex-direction:column;gap:4px;padding:12px 15px;border:1px solid #33527b;border-radius:12px;background:#0b192c}
.language-skill-items small{color:#b6cbe1}
@media(max-width:750px){.lang-switch{right:76px;top:15px}.language-skill-items{grid-template-columns:1fr}}

/* V3.9.5: language selector is INSIDE the sticky header, not hidden behind it.
   Reserve a normal flex item so it never overlays the main navigation. */
html body .header .nav>.lang-switch{
 position:relative!important;top:auto!important;right:auto!important;
 flex:0 0 auto;z-index:3!important;margin-left:4px;
}
html body .header .lang-switch-menu{z-index:4!important}
@media(max-width:750px){
 html body .header .nav>.lang-switch{margin-left:auto;margin-right:0}
 html body .header .nav{gap:10px}
 html body .header .brand strong{font-size:clamp(14px,3.7vw,20px)}
 html body .header .lang-switch-button{padding:6px 8px;gap:4px}
}