:root{--ink:#f2f0fa;--paper:#0b0b12;--surface:#12121d;--muted:#a19dab;--line:rgba(var(--ink-rgb),.14);--violet:#a88bff;--lavender:#24203c;--pink:#ff8fab;--lime:#d4f980;--sans:"Manrope",Arial,sans-serif;--serif:"Playfair Display",Georgia,serif;--mono:"DM Mono",monospace;--ink-rgb:242,240,250;--paper-rgb:11,11,18;--violet-rgb:168,139,255;--lime-rgb:212,249,128;--neon-cyan:#8df7ff;--neon-cyan-rgb:141,247,255;--neon-violet:#9f8bff;--neon-violet-rgb:159,139,255;--neon-pink:#f58caf;--neon-pink-rgb:245,140,175;--accent:var(--neon-cyan);--accent-rgb:var(--neon-cyan-rgb);--surface-2:#17142a;--surface-2-rgb:23,20,42;--surface-3:#201c37;--ease-out:cubic-bezier(.2,.8,.2,1);--bento-bg:rgba(20,20,20,.6);--bento-bg-hover:rgba(42,42,52,.72);--bento-border:rgba(255,255,255,.1);--bento-blur:12px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}::selection{background:var(--pink);color:#120f1a}.nav{height:78px;padding:0 5vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;background:rgba(11,11,18,.84);backdrop-filter:blur(14px)}.brand{text-decoration:none;font-size:1.2rem;font-weight:800;letter-spacing:-.055em}.brand b{color:var(--violet)}.nav-links{list-style:none;display:flex;align-items:center;gap:2rem;padding:0;margin:0}.nav-links a{text-decoration:none;font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.06em}.nav-links a:hover,.nav-links .active{color:var(--violet)}.nav-links .nav-cta{background:var(--ink);color:#120f1a;padding:.67rem 1rem;border-radius:999px;transition:.2s}.nav-links .nav-cta:hover{color:#120f1a;background:var(--lime);transform:translateY(-2px)}.eyebrow{font:.72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}.eyebrow:before{content:"";height:1px;width:24px;background:currentColor}.button{display:inline-flex;align-items:center;gap:.7rem;padding:.92rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.86rem;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(242,240,250,.13)}.button-primary{background:var(--lime);color:#120f1a}.button-outline{border:1px solid var(--ink)}
.hero{min-height:calc(100vh - 78px);padding:7rem 5vw 4rem;position:relative;overflow:hidden;display:flex;align-items:center}.hero-content{max-width:1170px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:4vw;align-items:center;position:relative;z-index:1}.hero h1{font-size:clamp(4.2rem,8.5vw,8.5rem);line-height:.9;letter-spacing:-.09em;margin:1.3rem 0 1.8rem}.hero h1 em,.display em{font-family:var(--serif);font-weight:600;color:var(--violet);letter-spacing:-.07em}.intro{font-size:1.12rem;line-height:1.75;max-width:500px;color:var(--muted);margin:0 0 2.2rem}.hero-photo{height:min(590px,62vw);border-radius:180px 180px 8px 8px;overflow:hidden;background:var(--lavender);position:relative;box-shadow:18px 18px 0 var(--pink)}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}.hero-photo:after{content:"FLORIAN / 2026";position:absolute;right:-.1rem;bottom:1.4rem;background:var(--ink);color:#120f1a;font:.63rem var(--mono);letter-spacing:.09em;padding:.65rem .7rem;writing-mode:vertical-rl}.dot{position:absolute;border-radius:50%;pointer-events:none}.dot-one{height:32vw;width:32vw;max-width:450px;max-height:450px;background:var(--lavender);right:-10vw;top:-13vw}.dot-two{height:70px;width:70px;background:var(--pink);left:45%;bottom:10%}.ticker{background:#181526;color:#fff;overflow:hidden;white-space:nowrap;padding:1.1rem 0}.ticker div{font:.78rem var(--mono);letter-spacing:.09em;text-transform:uppercase;animation:ticker 25s linear infinite;width:max-content}.ticker span{color:var(--lime);padding:0 1.6rem}@keyframes ticker{to{transform:translateX(-50%)}}
.section{max-width:1200px;padding:8rem 5vw;margin:0 auto}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:3.5rem}.section-head h1,.section-head h2{font-size:clamp(2.55rem,4.5vw,4.6rem);line-height:.98;letter-spacing:-.075em;margin:0}.section-head p{margin:0;max-width:530px;color:var(--muted);line-height:1.8}.split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}.body-copy{font-size:clamp(1.3rem,2.25vw,2rem);line-height:1.48;letter-spacing:-.045em;margin:0}.body-copy strong{color:var(--violet)}.facts{margin-top:3rem;border-top:1px solid var(--line)}.fact{padding:1.05rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:1rem;font-size:.9rem}.fact span:first-child{font:.7rem var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.photo-frame{height:560px;background:var(--lavender);padding:1rem;position:relative}.photo-frame img{height:100%;width:100%;object-fit:cover;object-position:center 35%;display:block;filter:saturate(.93)}.photo-frame:after{content:"HIER & JETZT";position:absolute;bottom:1.25rem;left:1.25rem;background:var(--lime);color:#16121e;border:2px solid #16121e;padding:.85rem 1rem;font:700 .76rem var(--mono);letter-spacing:.1em;box-shadow:4px 4px 0 #16121e;transform:none}
.work-bg{background:#17142a}.project-list{border-top:1px solid var(--line)}.project{padding:2rem 0;display:grid;grid-template-columns:85px minmax(0,1fr) auto;gap:1.3rem;align-items:start;border-bottom:1px solid var(--line);text-decoration:none;transition:.22s}.project:hover{padding-left:1rem;color:var(--violet)}.project-no,.project-type{font:.7rem var(--mono);letter-spacing:.07em;color:#aaa1d4;text-transform:uppercase}.project h3{font-size:clamp(1.45rem,2.6vw,2.5rem);letter-spacing:-.06em;margin:0}.project-copy{max-width:650px;color:var(--muted);font-size:.93rem;line-height:1.7;margin:.7rem 0 1rem}.project-tags{display:flex;gap:.5rem;flex-wrap:wrap}.project-tags span{border:1px solid rgba(var(--lime-rgb),.34);border-radius:99px;color:var(--lime);padding:.3rem .55rem;font:.62rem var(--mono);letter-spacing:.05em;text-transform:uppercase}.project-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1rem;min-width:130px}.project-arrow{font-size:1.5rem}.note{font:.7rem/1.7 var(--mono);color:#aaa1d4;margin:1.4rem 0 0}.page-hero{padding:8rem 5vw 5rem;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.page-hero-inner{max-width:1200px;margin:auto;position:relative;z-index:1}.page-hero h1{font-size:clamp(4rem,9vw,8rem);line-height:.91;letter-spacing:-.09em;margin:1.2rem 0 1.5rem}.page-hero p{max-width:560px;color:var(--muted);line-height:1.8;font-size:1.1rem;margin:0}.page-orb{position:absolute;height:430px;width:430px;border-radius:50%;background:var(--lavender);right:-100px;top:-180px}.contact-panel{max-width:970px;margin:0 auto;background:#181526;color:#fff;padding:clamp(2.2rem,7vw,6rem);text-align:center;position:relative;overflow:hidden;border:1px solid var(--line)}.contact-panel:before{content:"✦";color:var(--lime);font-size:10rem;position:absolute;left:-1.5rem;top:-3rem;opacity:.25}.contact-panel .eyebrow{justify-content:center;color:var(--lime)}.contact-panel h2{font-size:clamp(3rem,6.5vw,6.4rem);letter-spacing:-.09em;line-height:.9;margin:1.5rem 0 1.8rem}.contact-panel h2 em{font-family:var(--serif);font-weight:600;color:var(--pink)}.contact-panel p{color:#c5c0cc;margin:0 auto 2rem;max-width:500px;line-height:1.7}.contact-mail{font-size:clamp(1rem,2vw,1.6rem);font-weight:700;text-decoration:none;border-bottom:2px solid var(--pink);position:relative}.contact-mail:hover{color:var(--lime)}.contact-links{padding:2rem 0 0;display:flex;justify-content:center;gap:1.3rem;font:.7rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.contact-links a:hover{color:var(--violet)}footer{padding:1.5rem 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font:.7rem var(--mono);text-transform:uppercase;letter-spacing:.06em}footer a{text-decoration:none}footer a:hover{color:var(--violet)}.reveal{opacity:0;transform:translateY(22px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){.nav{padding:0 1.3rem}.nav-links li:not(:last-child){display:none}.hero{padding:5rem 1.35rem 4rem}.hero-content,.split{grid-template-columns:1fr}.hero h1{font-size:clamp(4rem,17vw,6.7rem)}.hero-photo{height:420px;max-width:350px;margin:1.8rem auto 0;box-shadow:10px 10px 0 var(--pink)}.dot-two{display:none}.section{padding:5.5rem 1.35rem}.section-head{grid-template-columns:1fr;gap:1.2rem;margin-bottom:2.4rem}.photo-frame{height:440px;max-width:400px}.project{grid-template-columns:35px minmax(0,1fr);gap:.8rem}.project-meta{grid-column:2;align-items:flex-start;flex-direction:row;justify-content:space-between}.project h3{font-size:1.4rem}.page-hero{padding:5rem 1.35rem 4rem}.page-orb{width:250px;height:250px;right:-100px;top:-120px}.contact-panel{margin:0 1.35rem}.fact{grid-template-columns:110px 1fr}footer{padding:1.3rem;flex-direction:column}}
/* Detailseiten für die einzelnen Projekte */
.detail-hero{max-width:1200px;margin:0 auto;padding:7rem 5vw 4rem}.back{display:inline-flex;text-decoration:none;font:.7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4rem}.back:hover{color:var(--lime)}.detail-kicker{color:var(--lime);font:.72rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.detail-hero h1{font-size:clamp(3.5rem,8vw,7.5rem);letter-spacing:-.09em;line-height:.9;margin:1rem 0 1.5rem;max-width:920px}.detail-hero h1 em{font-family:var(--serif);color:var(--violet);font-weight:600}.detail-intro{max-width:650px;font-size:1.1rem;line-height:1.8;color:var(--muted);margin:0}.detail-banner{background:linear-gradient(125deg,#1d1934,#161526 65%,#29214c);border:1px solid var(--line);margin:0 5vw;min-height:220px;display:flex;align-items:end;padding:2rem;position:relative;overflow:hidden}.detail-banner:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--violet);right:-80px;top:-185px;opacity:.25}.detail-banner:after{content:"";position:absolute;width:160px;height:160px;border:1px solid var(--lime);transform:rotate(45deg);right:15%;bottom:-115px;opacity:.6}.detail-banner span{font:700 clamp(2rem,5vw,4.5rem)/1 var(--sans);letter-spacing:-.08em;position:relative}.detail-content{max-width:1200px;padding:6rem 5vw 7rem;margin:0 auto;display:grid;grid-template-columns:1.4fr .6fr;gap:8vw}.detail-content h2{font-size:clamp(2rem,3.4vw,3.5rem);letter-spacing:-.07em;line-height:1;margin:0 0 1.3rem}.detail-content p{color:var(--muted);line-height:1.8;margin:0 0 1.2rem}.feature-list{margin:2rem 0 0;padding:0;border-top:1px solid var(--line);list-style:none}.feature-list li{padding:1rem 0;border-bottom:1px solid var(--line);font-size:.92rem}.feature-list li:before{content:"✦";color:var(--lime);margin-right:.7rem}.status-card{background:#17142a;border:1px solid var(--line);padding:1.6rem}.status-card small{font:.65rem var(--mono);color:var(--lime);letter-spacing:.08em;text-transform:uppercase}.status-card h3{font-size:1.35rem;letter-spacing:-.05em;margin:.7rem 0}.status-card p{font-size:.85rem;margin:0}.status-card a{display:inline-block;margin-top:1.5rem;color:#120f1a;background:var(--lime);padding:.75rem 1rem;border-radius:999px;text-decoration:none;font-size:.75rem;font-weight:800}@media(max-width:760px){.detail-hero{padding:4rem 1.35rem 3rem}.back{margin-bottom:2.8rem}.detail-banner{margin:0 1.35rem;min-height:170px;padding:1.4rem}.detail-content{padding:4rem 1.35rem 5rem;grid-template-columns:1fr;gap:2.5rem}}
.social-buttons{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;position:relative}.social-buttons a{display:inline-flex;align-items:center;text-decoration:none;border:1px solid rgba(var(--ink-rgb),.35);border-radius:999px;padding:.82rem 1.05rem;color:var(--ink);font-size:.8rem;font-weight:800}.social-buttons a:hover{background:var(--lime);color:#120f1a;border-color:var(--lime)}
.home-socials{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;color:var(--muted);font:.72rem var(--mono);letter-spacing:.04em;text-transform:uppercase}.home-socials a{color:var(--ink);text-decoration:none}.home-socials a:hover{color:var(--lime)}
.brand{display:inline-flex;align-items:center}.brand img{display:block;width:96px;height:auto}
.home-section{max-width:1200px;margin:0 auto;padding:6rem 5vw}.home-section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}.home-section-head h2{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.08em;line-height:.92;margin:.85rem 0 0}.text-link{font:.72rem var(--mono);color:var(--lime);text-decoration:none;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.text-link:hover{color:var(--pink)}.project-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.project-card{min-height:345px;padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:.25s;position:relative;overflow:hidden}.project-card:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-75px;top:-75px;background:var(--violet);opacity:.19;transition:.3s}.project-card:hover{border-color:var(--violet);transform:translateY(-5px);box-shadow:10px 10px 0 rgba(var(--violet-rgb),.25)}.project-card:hover:before{transform:scale(1.4)}.project-card small{font:.67rem var(--mono);color:var(--lime);letter-spacing:.07em;text-transform:uppercase;position:relative}.project-card h3{font-size:clamp(1.65rem,2.7vw,2.55rem);letter-spacing:-.07em;line-height:.95;margin:0;position:relative}.project-card p{color:var(--muted);font-size:.88rem;line-height:1.7;margin:0;position:relative}.focus-wrap{background:#17142a}.focus-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem}.focus-lead{background:var(--lime);color:#171322;padding:clamp(2rem,4vw,4rem);min-height:370px;display:flex;flex-direction:column;justify-content:space-between}.focus-lead h2{font-size:clamp(2.6rem,5vw,5.2rem);letter-spacing:-.085em;line-height:.9;margin:0;max-width:610px}.focus-lead p{font-size:.98rem;line-height:1.75;max-width:470px;margin:2rem 0 0}.focus-items{display:grid;grid-template-rows:1fr 1fr;gap:1rem}.focus-item{padding:2rem;background:#201c37;border:1px solid var(--line)}.focus-item span{font:.65rem var(--mono);color:var(--pink);letter-spacing:.08em;text-transform:uppercase}.focus-item h3{font-size:1.5rem;letter-spacing:-.05em;margin:.65rem 0}.focus-item p{font-size:.88rem;line-height:1.7;color:var(--muted);margin:0}.home-community{padding:6rem 5vw 7rem;max-width:1200px;margin:0 auto;text-align:center}.home-community h2{font-size:clamp(3rem,6.5vw,6.5rem);letter-spacing:-.09em;line-height:.9;margin:.9rem 0 1.4rem}.home-community h2 em{font:600 1em var(--serif);color:var(--pink)}.home-community p{max-width:570px;margin:0 auto 2rem;color:var(--muted);line-height:1.75}.home-community .social-buttons a{background:var(--surface)}
@media(max-width:760px){.home-section{padding:4.5rem 1.35rem}.home-section-head{align-items:start;flex-direction:column;gap:1.2rem}.project-cards,.focus-grid{grid-template-columns:1fr}.project-card{min-height:260px}.focus-lead{min-height:300px}.focus-items{grid-template-rows:auto}.home-community{padding:4.5rem 1.35rem}.home-socials{margin-top:1.1rem}}
/* Bewegung & Tiefe */
body{background-image:radial-gradient(circle at var(--cursor-x,50%) var(--cursor-y,0%),rgba(var(--violet-rgb),.09),transparent 28rem)}
.nav{position:sticky;top:0}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(var(--ink-rgb),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.035) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 76%)}.hero-content{transition:transform .45s ease}.hero-content:hover{transform:scale(1.008)}.hero-photo{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}.hero-photo:hover{transform:scale(1.025) rotate(1deg);box-shadow:24px 24px 0 var(--pink)}.dot-one{animation:drift 12s ease-in-out infinite}.dot-two{animation:float 5s ease-in-out infinite}.project-card,.focus-item,.status-card,.contact-panel{will-change:transform}.project-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}.project-card:nth-child(2){transition-delay:.07s}.project-card:nth-child(3){transition-delay:.14s}.project-card:hover{transform:translateY(-10px) scale(1.015);box-shadow:14px 16px 0 rgba(var(--violet-rgb),.22)}.focus-item{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}.focus-item:hover{transform:translateX(8px);background:#292247}.button{position:relative;overflow:hidden}.button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.34) 45%,transparent 65%);transform:translateX(-120%);transition:transform .55s}.button:hover:before{transform:translateX(120%)}.ticker{box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}.reveal.visible{animation:pop-in .7s cubic-bezier(.2,.8,.2,1) both}.detail-banner,.focus-lead{overflow:hidden}.detail-banner:hover:before{transform:scale(1.18)}.detail-banner:before{transition:transform .7s ease}.status-card{transition:transform .35s ease,border-color .35s}.status-card:hover{transform:translateY(-6px);border-color:var(--violet)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3vw,4vw) scale(1.08)}}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}@keyframes pop-in{0%{opacity:0;transform:translateY(28px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.hero-content:hover,.hero-photo:hover,.project-card:hover,.focus-item:hover,.status-card:hover{transform:none}}
/* Ruhiger Glass-Look */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 80% 14%,rgba(var(--violet-rgb),.14),transparent 28rem),radial-gradient(circle at 12% 78%,rgba(255,143,171,.08),transparent 23rem)}.nav{background:rgba(var(--paper-rgb),.62);border-bottom-color:rgba(var(--ink-rgb),.11);box-shadow:0 12px 32px rgba(0,0,0,.14)}.project-card,.focus-item,.status-card,.contact-panel{background:rgba(27,24,45,.68);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(var(--ink-rgb),.14)}.project-card:before{opacity:.12}.focus-item{background:rgba(32,28,55,.6)}.detail-banner{background:linear-gradient(120deg,rgba(38,31,69,.9),rgba(18,17,31,.75));backdrop-filter:blur(14px)}.detail-content{align-items:start}.project-read{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}.read-card{background:rgba(27,24,45,.58);border:1px solid rgba(var(--ink-rgb),.12);padding:1.25rem}.read-card small{font:.63rem var(--mono);color:var(--lime);letter-spacing:.08em;text-transform:uppercase}.read-card h3{font-size:1.05rem!important;letter-spacing:-.04em;margin:.65rem 0!important}.read-card p{font-size:.84rem!important;line-height:1.7!important;margin:0!important}.project-quote{margin:2.5rem 0 0;padding:1.3rem 1.45rem;border-left:2px solid var(--pink);background:rgba(255,143,171,.055);color:#d7d1e6;font-size:1.05rem;line-height:1.65}.project-quote span{display:block;color:var(--pink);font:.65rem var(--mono);text-transform:uppercase;letter-spacing:.07em;margin-top:.8rem}@media(max-width:760px){.project-read{grid-template-columns:1fr}.project-quote{font-size:.96rem}}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:20;background:linear-gradient(90deg,var(--pink),var(--violet),var(--lime));transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(var(--violet-rgb),.7)}.page-hero,.detail-hero{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.page-hero:hover,.detail-hero:hover{transform:translateY(-2px)}.page-hero:after{content:"";position:absolute;bottom:-1px;left:5vw;width:clamp(100px,18vw,250px);height:2px;background:linear-gradient(90deg,var(--pink),var(--violet),transparent)}.photo-frame{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s}.photo-frame:hover{transform:rotate(-.7deg) scale(1.015);box-shadow:14px 16px 0 rgba(var(--violet-rgb),.2)}.fact{transition:padding .25s ease,color .25s}.fact:hover{padding-left:.7rem;color:var(--violet)}.project{transition:padding .35s cubic-bezier(.2,.8,.2,1),background .35s}.project:hover{background:rgba(var(--ink-rgb),.035)}.read-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s}.read-card:hover{transform:translateY(-6px);border-color:rgba(var(--violet-rgb),.6);background:rgba(51,42,85,.75)}.feature-list li{transition:padding .25s ease,color .25s}.feature-list li:hover{padding-left:.6rem;color:var(--lime)}.contact-links a{transition:color .2s,letter-spacing .2s}.contact-links a:hover{letter-spacing:.12em}.is-dynamic{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}.is-dynamic.visible{opacity:1;transform:translateY(0)}
.text-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.text-reveal.visible{opacity:1;transform:translateY(0)}@media(hover:hover){.page-hero h1,.detail-hero h1,.home-section-head h2,.detail-content h2,.home-community h2,.focus-lead h2{transition:color .3s ease,text-shadow .3s ease}.page-hero h1:hover,.detail-hero h1:hover,.home-section-head h2:hover,.detail-content h2:hover,.home-community h2:hover,.focus-lead h2:hover{text-shadow:0 0 16px rgba(var(--violet-rgb),.15)}}
/* Intro, Bento-Grid und scroll-gebundene Akzente */
.intro-loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#0b0b12;transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility .75s}.intro-loader__word{font:800 clamp(2.5rem,8vw,7rem)/1 var(--sans);letter-spacing:-.1em;color:var(--ink);animation:loader-word .7s cubic-bezier(.2,.8,.2,1) both}.intro-loader__word i{color:var(--violet);font-style:normal}.page-ready .intro-loader{clip-path:inset(0 0 100% 0);visibility:hidden}.project-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(205px,auto);gap:1rem}.project-card:nth-child(1){grid-column:span 2;grid-row:span 2}.project-card:nth-child(2){grid-column:3;grid-row:1}.project-card:nth-child(3){grid-column:3;grid-row:2}.project-card.is-tilting:before{transform:translate(var(--glow-x,0px),var(--glow-y,0px)) scale(1.35)}@keyframes loader-word{from{opacity:0;transform:translateY(20px) scale(.96);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@supports (animation-timeline:view()) and (animation-range:entry 0% cover 40%){.detail-banner,.focus-lead{animation:scroll-lift linear both;animation-timeline:view();animation-range:entry 0% cover 45%}@keyframes scroll-lift{from{transform:translateY(40px) scale(.96);opacity:.35}to{transform:translateY(0) scale(1);opacity:1}}}@media(max-width:760px){.project-cards{grid-template-columns:1fr}.project-card:nth-child(n){grid-column:auto;grid-row:auto;min-height:260px;display:flex}.intro-loader__word{font-size:3rem}}@media(prefers-reduced-motion:reduce){.intro-loader{display:none}.project-card.is-tilting{transform:none!important}}
.hero-webgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.72;mix-blend-mode:screen;z-index:0}.hero-content{z-index:1}@media(max-width:760px){.hero-webgl{opacity:.35}}@media(prefers-reduced-motion:reduce){.hero-webgl{display:none}}
/* Unterseiten: Archiv, HUD & thematische Atmosphären */
body.page-about .page-hero h1{position:relative;text-shadow:2px 0 var(--neon-cyan),-2px 0 rgba(var(--neon-pink-rgb),.7);animation:terminal-glitch .55s steps(2,end) 2}.portrait-liquid{overflow:hidden}.portrait-liquid img{will-change:transform,filter;transform:scale(1.06) translate(var(--liquid-x,0),var(--liquid-y,0));transition:transform .2s ease-out,filter .35s}.portrait-liquid:before{content:"";position:absolute;z-index:1;width:170px;height:170px;left:var(--liquid-left,50%);top:var(--liquid-top,50%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--neon-cyan-rgb),.26),transparent 65%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .25s}.portrait-liquid:hover:before{opacity:1}.about-timeline{max-width:1200px;margin:0 auto;padding:1rem 5vw 6rem;position:relative}.about-timeline:before{content:"";position:absolute;left:calc(5vw + 7px);top:2rem;bottom:5.5rem;width:1px;background:rgba(var(--ink-rgb),.15)}.about-timeline:after{content:"";position:absolute;left:calc(5vw + 7px);top:2rem;width:2px;height:var(--timeline-progress,0%);background:linear-gradient(var(--violet),var(--lime));box-shadow:0 0 15px var(--violet)}.timeline-title{font:.68rem var(--mono);color:var(--lime);letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.8rem 2rem}.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:2rem;max-width:760px;margin:0 0 1.5rem 2rem;padding:1.15rem 1.25rem;border:1px solid rgba(var(--ink-rgb),.12);background:rgba(26,23,44,.55);backdrop-filter:blur(12px);position:relative}.timeline-item:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime);left:-2.32rem;top:1.55rem}.timeline-item small{font:.66rem var(--mono);color:var(--pink);letter-spacing:.08em}.timeline-item h3{margin:0 0 .4rem;font-size:1.1rem;letter-spacing:-.04em}.timeline-item p{margin:0;color:var(--muted);line-height:1.65;font-size:.86rem}.tool-hud{max-width:1200px;margin:0 auto;padding:0 5vw 6rem}.tool-hud h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.07em;margin:0 0 1.4rem}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.tool-chip{position:relative;min-height:118px;padding:1rem;border:1px solid rgba(var(--neon-cyan-rgb),.16);background:rgba(17,17,29,.65);backdrop-filter:blur(12px);cursor:default;transition:transform .25s,border-color .25s}.tool-chip strong{display:block;font-size:1rem;letter-spacing:-.04em}.tool-chip span{display:block;margin-top:.65rem;color:var(--muted);font:.7rem var(--mono)}.tool-chip:after{content:attr(data-note);position:absolute;left:1rem;right:1rem;bottom:.8rem;color:var(--lime);font:.64rem var(--mono);opacity:0;transform:translateY(5px);transition:.25s}.tool-chip:hover{transform:translateY(-5px);border-color:var(--lime);animation:rumble .25s linear}.tool-chip:hover:after{opacity:1;transform:none}.archive-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.5rem}.archive-filter{appearance:none;border:1px solid rgba(var(--ink-rgb),.18);border-radius:99px;background:transparent;color:var(--muted);padding:.6rem .85rem;font:.68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.25s}.archive-filter:hover,.archive-filter.active{color:#11101a;background:var(--lime);border-color:var(--lime)}.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;border:0}.archive-grid .project{min-height:280px;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(var(--ink-rgb),.14);background:rgba(27,24,45,.66);backdrop-filter:blur(14px);overflow:hidden}.archive-grid .project:nth-child(3){grid-column:span 2}.archive-grid .project-copy{font-size:.9rem}.archive-grid .project-meta{flex-direction:row;align-items:center;min-width:0}.metric-strip{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}.metric{padding:.65rem .75rem;border:1px solid rgba(var(--ink-rgb),.13);background:rgba(0,0,0,.18);font:.65rem var(--mono);color:var(--muted)}.metric b{color:var(--lime);font-size:1rem;margin-right:.35rem}.page-fivem{--page-accent:#ffc970}.page-minecraft{--page-accent:#a8dd8a}.page-webdesign{--page-accent:var(--neon-cyan)}.page-fivem .detail-banner{background:linear-gradient(125deg,#26221f,#151617 60%,#43352a)}.page-fivem .detail-banner:after{border-color:var(--page-accent)}.page-fivem .detail-kicker,.page-fivem .status-card small{color:var(--page-accent)}.page-fivem .status-card:after{content:"";position:absolute;right:1.4rem;top:1.35rem;width:8px;height:8px;border-radius:50%;background:var(--page-accent);box-shadow:0 0 12px var(--page-accent);animation:led 1.4s ease-in-out infinite}.page-minecraft .detail-banner{background:linear-gradient(125deg,#17221a,#111714 60%,#263b25)}.page-minecraft .detail-banner:before{background:var(--page-accent);opacity:.18}.page-minecraft .project-quote{will-change:transform;transition:transform .25s ease}.page-webdesign .detail-banner{background:linear-gradient(125deg,#09242a,#0c1114 60%,#122936)}.page-webdesign .detail-banner span{color:#eaffff;animation:heartbeat 2.2s ease-in-out infinite}.page-webdesign .feature-list li:hover{background-image:linear-gradient(rgba(var(--neon-cyan-rgb),.12) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--neon-cyan-rgb),.12) 1px,transparent 1px);background-size:10px 10px;border-color:var(--page-accent)}@keyframes terminal-glitch{0%,100%{clip-path:inset(0)}20%{clip-path:inset(12% 0 60% 0);transform:translateX(3px)}40%{clip-path:inset(65% 0 8% 0);transform:translateX(-3px)}60%{clip-path:inset(35% 0 34% 0);transform:translateX(2px)}}@keyframes rumble{25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}@keyframes led{50%{opacity:.35;box-shadow:0 0 4px var(--page-accent)}}@keyframes heartbeat{0%,100%{transform:scale(1)}10%{transform:scale(1.025)}20%{transform:scale(1)}}@media(max-width:760px){.tool-grid,.archive-grid{grid-template-columns:1fr}.archive-grid .project:nth-child(3){grid-column:auto}.about-timeline{padding-left:1.35rem;padding-right:1.35rem}.about-timeline:before,.about-timeline:after{left:1.85rem}.timeline-item{grid-template-columns:1fr;margin-left:2rem}.tool-hud{padding:0 1.35rem 4.5rem}}@media(prefers-reduced-motion:reduce){.portrait-liquid img,.tool-chip:hover,.page-webdesign .detail-banner span,.page-fivem .status-card:after{animation:none!important;transform:none!important}}
.contact-shell{max-width:1120px;margin:0 auto;padding:6rem 5vw 7rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:1rem}.contact-side,.contact-form{border:1px solid rgba(var(--ink-rgb),.14);background:rgba(27,24,45,.62);backdrop-filter:blur(18px);padding:clamp(1.5rem,3vw,2.7rem)}.contact-side h2{font-size:clamp(2.4rem,4vw,4.4rem);letter-spacing:-.08em;line-height:.93;margin:1rem 0}.contact-side p{color:var(--muted);line-height:1.75;max-width:390px}.contact-suggestions{display:grid;gap:.65rem;margin-top:2rem}.contact-suggestion{border:1px solid rgba(var(--ink-rgb),.12);background:transparent;color:var(--ink);padding:1rem;text-align:left;cursor:pointer;transition:.25s}.contact-suggestion strong{display:block;font-size:.9rem}.contact-suggestion span{display:block;color:var(--muted);font-size:.75rem;margin-top:.3rem}.contact-suggestion:hover{transform:translateX(6px);border-color:var(--violet);background:rgba(var(--violet-rgb),.09)}.contact-form{display:grid;gap:1.1rem}.contact-form label{display:grid;gap:.45rem;color:var(--muted);font:.67rem var(--mono);letter-spacing:.07em;text-transform:uppercase}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(var(--ink-rgb),.18);border-radius:0;background:rgba(5,5,10,.38);color:var(--ink);padding:.9rem 1rem;font:400 .94rem var(--sans);outline:0;transition:border-color .25s,box-shadow .25s}.contact-form textarea{resize:vertical;min-height:145px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(var(--lime-rgb),.08)}.contact-form .button{justify-content:center;border:0;cursor:pointer}.form-note{color:var(--muted);font-size:.73rem;line-height:1.6;margin:0}.contact-success{display:none;color:var(--lime);font:.75rem var(--mono)}.contact-success.visible{display:block}@media(max-width:760px){.contact-shell{padding:4rem 1.35rem 5rem;grid-template-columns:1fr}.contact-side,.contact-form{padding:1.4rem}}
/* High-end interaction layer */
.gradient-text{background:linear-gradient(105deg,var(--neon-cyan) 0%,var(--neon-violet) 48%,var(--neon-pink) 100%);background-size:180% 180%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradient-shift 7s ease infinite}.hero h1 .gradient-text{filter:drop-shadow(0 0 24px rgba(var(--neon-cyan-rgb),.15))}.ticker{transition:background .35s,color .35s}.ticker:hover{background:#211a3d}.ticker:hover div{animation-duration:50s;color:#d9d1ff;text-shadow:0 0 10px rgba(var(--lime-rgb),.55)}.ticker:hover span{color:var(--lime);text-shadow:0 0 12px rgba(var(--lime-rgb),.75)}.button{isolation:isolate;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}.button:after{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.52),transparent 31%),linear-gradient(110deg,var(--neon-cyan),var(--neon-violet) 50%,var(--neon-pink));z-index:-1;transform:scaleX(0);transform-origin:left;border-radius:inherit;transition:transform .45s cubic-bezier(.3,.8,.2,1)}.button:hover{transform:translateY(-3px) scale(1.045);box-shadow:0 14px 30px rgba(var(--violet-rgb),.2)}.button:hover:after{transform:scaleX(1)}.button-outline:hover{border-color:transparent;color:#11101a}.button-primary:after{opacity:.55}.project-card--fivem{isolation:isolate}.project-card--fivem:after{content:"MURRIETTA / LIVE";position:absolute;inset:0;z-index:-1;display:flex;align-items:flex-end;padding:1.3rem;color:rgba(var(--ink-rgb),.34);font:.64rem var(--mono);letter-spacing:.08em;background:linear-gradient(180deg,rgba(var(--paper-rgb),.18),rgba(var(--paper-rgb),.91)),repeating-linear-gradient(90deg,transparent 0 36px,rgba(var(--violet-rgb),.22) 37px 39px),linear-gradient(135deg,#443568,#15152b 54%,#31213b);background-size:auto,100% 100%,150% 150%;opacity:0;transition:opacity .55s,background-position 1.6s ease}.project-card--fivem:hover:after{opacity:1;background-position:0,13px 0,100% 100%}.voxel{position:absolute;right:12%;bottom:14%;width:86px;height:86px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(35deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.voxel i{position:absolute;inset:0;border:1px solid rgba(var(--lime-rgb),.8);background:linear-gradient(135deg,rgba(var(--lime-rgb),.5),rgba(var(--violet-rgb),.18));box-shadow:inset 0 0 26px rgba(var(--neon-cyan-rgb),.2)}.voxel i:nth-child(1){transform:translateZ(43px)}.voxel i:nth-child(2){transform:rotateY(90deg) translateZ(43px)}.voxel i:nth-child(3){transform:rotateX(90deg) translateZ(43px)}.project-card--minecraft:hover .voxel{transform:rotateX(336deg) rotateY(395deg) scale(1.15)}.mini-ui{position:absolute;right:1.6rem;bottom:1.6rem;width:170px;padding:.8rem;border:1px solid rgba(var(--ink-rgb),.22);border-radius:10px;background:rgba(10,10,18,.72);backdrop-filter:blur(12px);transition:transform .35s ease}.mini-ui b,.mini-ui i{display:block;height:7px;border-radius:99px;background:var(--violet);margin-bottom:.55rem}.mini-ui i{width:68%;background:var(--pink);opacity:.8}.mini-ui span{display:block;height:26px;border-radius:5px;background:linear-gradient(90deg,var(--lime),var(--neon-cyan));width:48%;transition:width .45s ease}.project-card--web:hover .mini-ui{transform:translate(-10px,-9px) rotate(-2deg)}.project-card--web:hover .mini-ui span{width:100%}.story-words{display:inline}.story-word{display:inline-block;opacity:0;transform:translateY(20px);transition:opacity .52s ease,transform .52s cubic-bezier(.2,.8,.2,1);margin-right:.23em}.words-visible .story-word{opacity:1;transform:translateY(0)}footer{position:relative;overflow:hidden;isolation:isolate}footer:before{content:"";position:absolute;z-index:-1;inset:-100% -10%;background:radial-gradient(ellipse at 30% 55%,rgba(var(--neon-cyan-rgb),.16),transparent 31%),radial-gradient(ellipse at 68% 35%,rgba(var(--violet-rgb),.22),transparent 35%),radial-gradient(ellipse at 50% 72%,rgba(var(--neon-pink-rgb),.13),transparent 38%);filter:blur(25px);animation:aurora 11s ease-in-out infinite alternate}.magnetic{transition:transform .18s ease-out}.magnetic:hover{border-color:var(--lime)!important}@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes aurora{from{transform:translate3d(-5%,3%,0) rotate(-5deg) scale(1)}to{transform:translate3d(6%,-4%,0) rotate(6deg) scale(1.12)}}@media(max-width:760px){.project-card--fivem:after,.voxel,.mini-ui{display:none}.button:hover{transform:translateY(-2px) scale(1.015)}}@media(prefers-reduced-motion:reduce){.gradient-text,footer:before{animation:none}.button:hover{transform:none}.project-card--minecraft:hover .voxel{transform:rotateX(-24deg) rotateY(35deg)}}

/* ============================================================
   Bento-Grid, HUD-Fakten, Terminal-Caret & GSAP-Vorbereitung
   ============================================================ */

/* --- Bento-Kacheln: edles Dark-Glass --- */
.project-card{background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));border:1px solid var(--bento-border);border-radius:16px;will-change:transform,opacity;transition:transform .4s var(--ease-out),background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.project-card:nth-child(1){padding:2.2rem}
.project-card:nth-child(1) h3{font-size:clamp(2rem,3.5vw,3.5rem)}
.project-card:nth-child(1) p{max-width:46ch}

/* Hover: leicht vergroessern, Rahmen leuchtet in der Akzentfarbe, Grund heller */
.project-card:hover{transform:scale(1.02);background:var(--bento-bg-hover);border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 30px rgba(var(--accent-rgb),.3),0 22px 60px rgba(0,0,0,.5)}

/* Der JS-Tilt ergaenzt die Rotation, behaelt aber dieselbe Skalierung */


/* Mobile: sauber einspaltig, alle Grid-Spannen zurueckgesetzt */
@media(max-width:760px){
.project-cards{grid-template-columns:1fr;grid-auto-rows:auto;gap:.9rem}
.project-card,.project-card:nth-child(1),.project-card:nth-child(2),.project-card:nth-child(3){grid-column:auto;grid-row:auto;min-height:230px;padding:1.5rem}
.project-card:nth-child(1) h3{font-size:clamp(1.65rem,7vw,2.4rem)}
.project-card:hover{transform:none;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3)}
}

/* --- Hardware-Beschleunigung fuer GSAP-Ziele ---
   animations.js setzt die Klasse vor und entfernt sie nach der Animation,
   damit keine Compositor-Layer dauerhaft belegt bleiben. */
.gsap-anim{will-change:transform,opacity}

/* --- Key-Facts als Sci-Fi-HUD --- */
.facts{margin-top:3rem;border:1px solid rgba(var(--neon-cyan-rgb),.22);border-top:1px solid rgba(var(--neon-cyan-rgb),.22);border-radius:12px;background:linear-gradient(180deg,rgba(var(--neon-cyan-rgb),.06),transparent 55%),rgba(9,11,17,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 34px rgba(var(--neon-cyan-rgb),.07),0 0 24px rgba(var(--neon-cyan-rgb),.05);padding:0 1.15rem .35rem;position:relative;overflow:hidden}
.facts:before{content:"// SYSTEM · PROFIL";display:block;font:.6rem var(--mono);letter-spacing:.2em;color:rgba(var(--neon-cyan-rgb),.8);padding:.95rem 0 .75rem;border-bottom:1px solid rgba(var(--neon-cyan-rgb),.18)}
.facts:after{content:"";position:absolute;left:0;right:0;top:0;height:70px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--neon-cyan-rgb),.09),transparent);animation:hud-scan 5.5s linear infinite}
.fact{grid-template-columns:170px 1fr;align-items:baseline;border-bottom:1px dashed rgba(var(--neon-cyan-rgb),.16);padding:1rem 0}
.fact:last-child{border-bottom:0}
.fact span:first-child{font:.66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--neon-cyan-rgb),.85);position:relative;padding-left:1.05rem}
.fact span:first-child:before{content:"|>";position:absolute;left:0;color:var(--lime)}
.fact span:last-child{font:.88rem var(--mono);color:var(--ink)}
.fact:hover{background:rgba(var(--neon-cyan-rgb),.06);padding-left:.5rem}
.fact:hover span:last-child{color:var(--neon-cyan);text-shadow:0 0 12px rgba(var(--neon-cyan-rgb),.55)}
@keyframes hud-scan{0%{transform:translateY(-70px)}100%{transform:translateY(430px)}}

/* --- Terminal-Typewriter --- */
.is-typing{min-height:1em}
.type-caret{display:inline-block;width:.5ch;height:.92em;margin-left:.08em;vertical-align:-.09em;background:var(--neon-cyan);box-shadow:0 0 14px rgba(var(--neon-cyan-rgb),.9);animation:caret-blink .9s steps(1,end) infinite;transition:opacity .6s ease}
.type-caret.is-done{opacity:0}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
.project-card,.project-card:hover,.project-card.is-tilting{transform:none!important;will-change:auto}
.facts:after,.type-caret{animation:none}
.gsap-anim{will-change:auto}
}

/* --- Ersatz fuer die frueheren Inline-Styles --- */
.accent-serif{font-family:var(--serif);font-weight:600;color:var(--violet)}
.eyebrow-center{justify-content:center}

/* --- Lesbarkeit der schmalen Bento-Kacheln ---
   Voxel und Mini-UI lagen auf dem Fliesstext, seit die Kacheln
   nur noch eine Spalte breit sind. Sie wandern nach oben rechts,
   werden kleiner und liegen jetzt unter dem Text. */
.project-card small,.project-card h3,.project-card p{position:relative;z-index:2}
.voxel,.mini-ui{z-index:1;pointer-events:none}

.project-card--minecraft .voxel{--voxel-size:60px;width:var(--voxel-size);height:var(--voxel-size);right:1.15rem;top:1rem;bottom:auto;opacity:.9}
.voxel i:nth-child(1){transform:translateZ(calc(var(--voxel-size,86px) / 2))}
.voxel i:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--voxel-size,86px) / 2))}
.voxel i:nth-child(3){transform:rotateX(90deg) translateZ(calc(var(--voxel-size,86px) / 2))}

.project-card--web .mini-ui{width:112px;right:1.1rem;top:1rem;bottom:auto;padding:.55rem;opacity:.9}
.project-card--web .mini-ui b,.project-card--web .mini-ui i{height:5px;margin-bottom:.4rem}
.project-card--web .mini-ui span{height:17px}

/* Smooth Scrolling abschalten, wenn reduzierte Bewegung gewuenscht ist */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   3D-Flip-Kacheln — Projekt-Kacheln UND Fokus-Kacheln
   Der Container ist nur noch Perspektive; Hintergrund, Rahmen und
   Blur sitzen auf den beiden Kartenseiten. Sonst flacht
   backdrop-filter die 3D-Ebene ab.
   ============================================================ */
.project-cards,.focus-items{perspective:1600px}

.flip-card{display:flex;position:relative;padding:0;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.flip-card:before{content:none}
.flip-card:hover{background:none;border-color:transparent;box-shadow:none;transform:scale(1.02)}
.flip-card.is-flipped.is-tilting{transform:none}
.project-card{min-height:345px}
.focus-item{min-height:250px}

.flip-inner{position:relative;flex:1;min-height:inherit;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.flip-card:hover .flip-inner,.flip-card.is-flipped .flip-inner{will-change:transform}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}

.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem;border:1px solid var(--bento-border);border-radius:16px;background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .4s ease,box-shadow .4s ease,background-color .4s ease}
.flip-back{transform:rotateY(180deg)}
.flip-front{cursor:pointer}
.flip-card:hover .flip-face{background:var(--bento-bg-hover);border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 30px rgba(var(--accent-rgb),.3),0 22px 60px rgba(0,0,0,.5)}

/* Deko-Kreis wandert von der Karte auf die Kartenseiten */
.flip-face:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-75px;top:-75px;background:var(--violet);opacity:.19;transition:.3s;pointer-events:none}
.flip-card.is-tilting .flip-front:before{transform:translate(var(--glow-x,0px),var(--glow-y,0px)) scale(1.35)}

/* FiveM-Overlay: Label sitzt unten RECHTS, der Button unten links.
   Vorher lagen beide uebereinander. */
.project-card--fivem:after{content:none}
.project-card--fivem .flip-front{isolation:isolate}
.project-card--fivem .flip-front:after{content:"MURRIETTA / LIVE";position:absolute;inset:0;z-index:-1;display:flex;align-items:flex-end;justify-content:flex-end;padding:1.3rem;color:rgba(var(--ink-rgb),.34);font:.64rem var(--mono);letter-spacing:.08em;background:linear-gradient(180deg,rgba(var(--paper-rgb),.18),rgba(var(--paper-rgb),.91)),repeating-linear-gradient(90deg,transparent 0 36px,rgba(var(--violet-rgb),.22) 37px 39px),linear-gradient(135deg,#443568,#15152b 54%,#31213b);background-size:auto,100% 100%,150% 150%;opacity:0;transition:opacity .55s,background-position 1.6s ease}
.project-card--fivem:hover .flip-front:after{opacity:1;background-position:0,13px 0,100% 100%}

/* Hinweis-Button auf der Vorderseite */
.flip-hint{align-self:flex-start;margin-top:1rem;appearance:none;-webkit-appearance:none;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.07);color:var(--neon-cyan);font:.63rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.6rem .9rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:.3s;position:relative;z-index:3}
.flip-hint i{font-style:normal;display:inline-block;transition:transform .55s var(--ease-out)}
.flip-card:hover .flip-hint{background:rgba(var(--accent-rgb),.17);border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 18px rgba(var(--accent-rgb),.3)}
.flip-card:hover .flip-hint i{transform:rotate(180deg)}

/* Rueckseite: Feature-Profil */
.flip-back{background:linear-gradient(160deg,rgba(var(--accent-rgb),.1),transparent 55%),var(--bento-bg-hover);border-color:rgba(var(--accent-rgb),.35)}
.flip-back > small{font:.62rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--accent-rgb),.85)}
.feature-profile{margin:.9rem 0 0;display:block}
.feature-profile > div{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:.58rem 0;border-bottom:1px dashed rgba(var(--accent-rgb),.18)}
.feature-profile > div:last-child{border-bottom:0}
.feature-profile dt{font:.61rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.feature-profile dd{margin:0;text-align:right;font-size:.84rem;font-weight:700;color:var(--ink)}

/* Leuchtender Button - erscheint erst nach der Drehung */
.flip-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.neon-button{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.15rem;border-radius:999px;text-decoration:none;font-size:.79rem;font-weight:800;color:#07141a;background:var(--neon-cyan);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5),0 0 24px rgba(var(--accent-rgb),.55);opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s var(--ease-out),box-shadow .3s ease}
.flip-card.is-flipped .neon-button{opacity:1;transform:none;transition-delay:.36s}
.neon-button:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.85),0 0 34px rgba(var(--accent-rgb),.85);transform:translateY(-2px)}
.flip-close{appearance:none;-webkit-appearance:none;background:none;border:0;color:var(--muted);font:.65rem var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.5rem;opacity:0;transition:opacity .45s ease,color .25s}
.flip-card.is-flipped .flip-close{opacity:1;transition-delay:.42s}
.flip-close:hover{color:var(--neon-pink)}

/* Fokus-Kacheln bekommen Pink als Akzent, damit sie sich von den
   Projekt-Kacheln unterscheiden */
.focus-item .flip-face{background:rgba(32,28,55,.72);border-color:rgba(var(--ink-rgb),.12)}
.focus-item .flip-face:before{background:var(--neon-pink);opacity:.13}
.focus-item:hover .flip-face{border-color:rgba(var(--neon-pink-rgb),.6);box-shadow:0 0 0 1px rgba(var(--neon-pink-rgb),.32),0 0 30px rgba(var(--neon-pink-rgb),.26),0 22px 60px rgba(0,0,0,.45)}
.focus-item .flip-hint{color:var(--neon-pink);border-color:rgba(var(--neon-pink-rgb),.4);background:rgba(var(--neon-pink-rgb),.08)}
.focus-item:hover .flip-hint{background:rgba(var(--neon-pink-rgb),.18);border-color:rgba(var(--neon-pink-rgb),.7);box-shadow:0 0 18px rgba(var(--neon-pink-rgb),.3)}
.focus-item .flip-back{background:linear-gradient(160deg,rgba(var(--neon-pink-rgb),.12),transparent 55%),rgba(38,32,60,.82);border-color:rgba(var(--neon-pink-rgb),.35)}
.focus-item .flip-back > small{color:rgba(var(--neon-pink-rgb),.9)}
.focus-item .feature-profile > div{border-bottom-color:rgba(var(--neon-pink-rgb),.18)}
.focus-item .neon-button{background:var(--neon-pink);color:#1c0a12;box-shadow:0 0 0 1px rgba(var(--neon-pink-rgb),.5),0 0 24px rgba(var(--neon-pink-rgb),.55)}
.focus-item .neon-button:hover{box-shadow:0 0 0 1px rgba(var(--neon-pink-rgb),.85),0 0 34px rgba(var(--neon-pink-rgb),.85)}

@media(max-width:760px){
.project-cards,.focus-items{perspective:1000px}
.flip-card,.project-card:nth-child(1),.project-card:nth-child(2),.project-card:nth-child(3){min-height:320px;padding:0}
.flip-face{padding:1.35rem}
}
@media(prefers-reduced-motion:reduce){
.flip-inner{transition:transform .01ms}
.neon-button,.flip-close{opacity:1;transform:none;transition:none}
}

/* Der JS-Tilt muss NACH .flip-card:hover stehen, sonst gewinnt
   der Hover-Transform und die Neigung greift nie. */
.flip-card.is-tilting{transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.02);transition:transform .12s ease-out,background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.flip-card.is-flipped.is-tilting{transform:none}
@media(prefers-reduced-motion:reduce){.flip-card,.flip-card:hover,.flip-card.is-tilting{transform:none!important}}

/* --- Flicker-Fix waehrend der Drehung ---
   Chrome kann backdrop-filter nicht sampeln, solange das Element in
   einer 3D-Rotation steckt - die Flaeche wird dann kurz leer gerendert.
   Fuer die Dauer der Drehung ersetzt eine deckende Farbe den Blur. */
.flip-card.is-animating .flip-face{-webkit-backdrop-filter:none;backdrop-filter:none;background:#141419}
.flip-card.is-animating .flip-back{background:linear-gradient(160deg,rgba(var(--accent-rgb),.12),transparent 55%),#191922}
.focus-item.is-animating .flip-face{background:#221d38}
.focus-item.is-animating .flip-back{background:linear-gradient(160deg,rgba(var(--neon-pink-rgb),.14),transparent 55%),#241e3c}

/* --- Der gruene Block bekommt ebenfalls Kartenform (ohne Flip) --- */
.focus-lead{border-radius:16px;border:1px solid rgba(var(--lime-rgb),.55);box-shadow:0 0 0 1px rgba(var(--lime-rgb),.12),0 22px 60px rgba(0,0,0,.38);overflow:hidden;position:relative;transition:box-shadow .4s ease,transform .4s var(--ease-out)}
.focus-lead:hover{box-shadow:0 0 0 1px rgba(var(--lime-rgb),.35),0 0 34px rgba(var(--lime-rgb),.26),0 26px 70px rgba(0,0,0,.45)}
@media(max-width:760px){.focus-lead{border-radius:14px}}

/* Fokus-Kacheln sind flacher als die Projekt-Kacheln (Rasterhoehe
   richtet sich nach dem gruenen Block) - Rueckseite entsprechend
   kompakter, sonst laeuft der Button unten heraus. */
.focus-item .flip-face{padding:1.3rem}
.focus-item .feature-profile{margin-top:.6rem}
.focus-item .feature-profile > div{padding:.36rem 0;gap:.7rem}
.focus-item .feature-profile dt{font-size:.58rem}
.focus-item .feature-profile dd{font-size:.79rem}
.focus-item .flip-actions{margin-top:.7rem;gap:.5rem}
.focus-item .neon-button{padding:.62rem .95rem;font-size:.74rem}
.focus-item .flip-close{font-size:.6rem;padding:.4rem}

/* ============================================================
   Detailseiten: eigene Logos und spielnahe UI
   Alle Logos sind Eigenbau (SVG bzw. CSS) - kein fremdes
   Markenmaterial von Mojang oder Cfx.re.
   ============================================================ */
.detail-hero--game{position:relative}
.game-logo{position:absolute;right:5vw;top:5rem;width:clamp(110px,13vw,190px);pointer-events:none;z-index:1}
.game-logo img{width:100%;height:auto;display:block}
@media(max-width:900px){
.game-logo{position:static;width:120px;margin:0 0 1.5rem}
.game-logo--wd{width:auto}
}

/* ---------------- Minecraft: Inventar, Herzen, XP ---------------- */
.mc-hud{max-width:1200px;margin:2.2rem auto 0;padding:0 5vw;display:grid;gap:.7rem}
.mc-hud-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:.9rem 1.1rem;background:linear-gradient(180deg,#23262a,#1a1d20);box-shadow:inset 2px 2px 0 rgba(255,255,255,.09),inset -2px -2px 0 rgba(0,0,0,.55)}
.mc-label{font:.64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a8e063;min-width:150px}
.mc-hearts{display:flex;gap:.25rem}
.mc-heart{width:19px;height:19px;display:block;fill:#3a3f36}
.mc-heart.is-on{fill:#ff4d5a;filter:drop-shadow(0 0 6px rgba(255,77,90,.6))}
.mc-xp{flex:1;display:flex;align-items:center;gap:.9rem;min-width:230px}
.mc-xp i{position:relative;flex:1;height:22px;display:block;background:#12150f;box-shadow:inset 2px 2px 0 rgba(0,0,0,.6),inset -2px -2px 0 rgba(255,255,255,.07);overflow:hidden}
.mc-xp i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--xp,0%);background:linear-gradient(180deg,#c8ff6a,#6fbf3a);box-shadow:0 0 16px rgba(168,224,99,.6);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.mc-xp b{font:.64rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#a8e063;white-space:nowrap}

/* Inventar-Raster statt Textwand */
.mc-inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:2rem}
.mc-inventory .read-card{background:#2f3235;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px);border:0;border-radius:2px;padding:1.2rem;box-shadow:inset 3px 3px 0 rgba(255,255,255,.13),inset -3px -3px 0 rgba(0,0,0,.55);transition:transform .25s var(--ease-out),box-shadow .25s}
.mc-inventory .read-card small{color:#a8e063;font:.62rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mc-inventory .read-card h3{margin:.6rem 0 .5rem;font-size:1.15rem;letter-spacing:-.03em}
.mc-inventory .read-card p{font-size:.85rem;line-height:1.7;color:#c3c8bd;margin:0}
.mc-inventory .read-card:hover{transform:translateY(-4px);box-shadow:inset 3px 3px 0 rgba(255,255,255,.2),inset -3px -3px 0 rgba(0,0,0,.55),0 0 26px rgba(111,191,58,.32)}

/* Feature-Liste als Quest-Log */
.mc-quests{border-top:0;margin-top:2.2rem}
.mc-quests li{border-bottom:1px solid rgba(168,224,99,.16);padding:.95rem 0 .95rem 2.2rem;position:relative;font:.86rem/1.6 var(--mono)}
.mc-quests li:before{content:"";position:absolute;left:0;top:.95rem;width:15px;height:15px;margin:0;background:#1b1f18;box-shadow:inset 2px 2px 0 rgba(0,0,0,.6),inset -2px -2px 0 rgba(255,255,255,.1),0 0 0 1px rgba(168,224,99,.35);color:transparent}
.mc-quests li:after{content:"";position:absolute;left:4px;top:1.28rem;width:7px;height:4px;border-left:2px solid #a8e063;border-bottom:2px solid #a8e063;transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform .3s var(--ease-out)}
.mc-quests li:hover:after{transform:rotate(-45deg) scale(1)}
.mc-quests li:hover{color:#dff5c4}

/* ---------------- Murrietta / FiveM: HUD im Asphalt-Look ---------------- */
.page-fivem{--page-accent:#ff9d2e;--mh-pink:#ff2f6d;--mh-led:#ffb020}
.mh-hud{max-width:1200px;margin:2.2rem auto 0;padding:0 5vw}
.mh-hud-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.85rem 1.1rem;background:linear-gradient(180deg,#1c1f25,#131519);border:1px solid rgba(255,157,46,.26);border-bottom:0;font:.66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mh-led{width:10px;height:10px;border-radius:50%;background:var(--mh-led);box-shadow:0 0 12px var(--mh-led);animation:mh-pulse 1.7s ease-in-out infinite;flex:none}
@keyframes mh-pulse{50%{opacity:.3;box-shadow:0 0 3px var(--mh-led)}}
.mh-state b{color:var(--mh-led);font-weight:700}
.mh-tag{margin-left:auto;font-size:.58rem;letter-spacing:.07em;color:rgba(var(--ink-rgb),.4);text-transform:none}
.mh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,157,46,.22);border:1px solid rgba(255,157,46,.26);padding:1px}
.mh-stat{position:relative;overflow:hidden;background:linear-gradient(180deg,#181a1f,#0f1114);padding:1.35rem 1.15rem}
.mh-stat > span{display:block;font:.6rem var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.mh-stat > b{display:block;margin-top:.45rem;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.045em;color:var(--page-accent);text-shadow:0 0 18px rgba(255,157,46,.4)}
.mh-stat:nth-child(even) > b{color:var(--mh-pink);text-shadow:0 0 18px rgba(255,47,109,.4)}
.mh-stat:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.page-fivem .detail-banner{background:linear-gradient(125deg,#23252a,#141518 55%,#2a1d23)}
.page-fivem .detail-banner:before{background:var(--mh-pink);opacity:.2}
.page-fivem .detail-banner:after{border-color:var(--page-accent)}
.mh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.mh-cards .read-card{background:linear-gradient(180deg,rgba(24,26,31,.9),rgba(15,17,20,.9));border:1px solid rgba(255,157,46,.2);border-radius:8px;padding:1.3rem;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-out)}
.mh-cards .read-card small{color:var(--page-accent)}
.mh-cards .read-card:hover{transform:translateY(-4px);border-color:rgba(255,47,109,.6);box-shadow:0 0 28px rgba(255,47,109,.22)}

/* ---------------- Webdesign: Dashboard und Gitternetz ---------------- */
.page-webdesign main{position:relative}
.page-webdesign main:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(var(--neon-cyan-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--neon-cyan-rgb),.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 50% 18%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 18%,#000 0%,transparent 72%)}
.wd-window{max-width:1200px;margin:2.2rem auto 0;border:1px solid rgba(var(--neon-cyan-rgb),.22);border-radius:10px;overflow:hidden;background:rgba(10,14,18,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.wd-window-bar{display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;background:linear-gradient(180deg,#171d23,#11161b);border-bottom:1px solid rgba(var(--neon-cyan-rgb),.16)}
.wd-dot{width:11px;height:11px;border-radius:50%;background:#3a4450;flex:none}
.wd-dot:nth-child(1){background:#ff5f57}
.wd-dot:nth-child(2){background:#febc2e}
.wd-dot:nth-child(3){background:#28c840}
.wd-tab{margin-left:.6rem;font:.65rem var(--mono);padding:.34rem .7rem;border-radius:5px;background:rgba(var(--neon-cyan-rgb),.1);color:var(--neon-cyan)}
.wd-tab--muted{background:transparent;color:var(--muted)}
.wd-code{display:block;padding:1.1rem 1.2rem;font:.79rem/1.95 var(--mono);overflow-x:auto}
.wd-row{display:block;white-space:pre}
.wd-ln{display:inline-block;width:2.6rem;color:rgba(var(--ink-rgb),.28);-webkit-user-select:none;user-select:none}
.wd-t{color:var(--neon-cyan)}
.wd-a{color:#ffb86c}
.wd-s{color:#a8e063}
.wd-c{color:rgba(var(--ink-rgb),.42);font-style:italic}
.wd-dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.wd-dashboard .read-card{position:relative;overflow:hidden;background:rgba(12,16,21,.74);border:1px solid rgba(var(--neon-cyan-rgb),.18);border-radius:10px;padding:1.3rem;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-out)}
.wd-dashboard .read-card:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(var(--neon-cyan-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--neon-cyan-rgb),.05) 1px,transparent 1px);background-size:22px 22px}
.wd-dashboard .read-card small{color:var(--neon-cyan);position:relative}
.wd-dashboard .read-card h3,.wd-dashboard .read-card p{position:relative}
.wd-dashboard .read-card:hover{transform:translateY(-4px);border-color:rgba(var(--neon-cyan-rgb),.55);box-shadow:0 0 28px rgba(var(--neon-cyan-rgb),.2)}

/* Code-Tag-Logo, tippt sich beim Hovern selbst */
.game-logo--wd{pointer-events:auto;width:auto;right:5vw}
.code-logo{display:inline-flex;align-items:baseline;font:800 clamp(1.7rem,3.2vw,2.8rem)/1 var(--mono);color:var(--neon-cyan);text-shadow:0 0 22px rgba(var(--neon-cyan-rgb),.45);cursor:pointer;outline:none;padding:.4rem .2rem}
.code-logo i{font-style:normal;opacity:.8}
.code-logo__type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;transition:max-width .85s steps(8,end)}
.code-logo:hover .code-logo__type,.code-logo:focus-visible .code-logo__type{max-width:8.2ch}
.code-logo__type b{font-weight:800;padding:0 .18em;color:var(--ink)}
.code-logo:focus-visible{box-shadow:0 0 0 2px rgba(var(--neon-cyan-rgb),.6);border-radius:6px}

@media(max-width:900px){
.mh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.mc-inventory,.mh-cards,.wd-dashboard{grid-template-columns:1fr}
}
@media(max-width:760px){
.mc-hud,.mh-hud{padding:0 1.35rem}
.wd-window{margin-left:1.35rem;margin-right:1.35rem}
.mc-label{min-width:auto}
.mh-tag{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
.game-logo--mc img,.mh-led{animation:none}
.mc-xp i:after{transition:none}
.code-logo__type{transition:none}
}
.code-logo.is-typed .code-logo__type{max-width:8.2ch}

/* ---- Animierter Text-Feed statt Logo (Minecraft / Murrietta) ----
   Fuenf Zeilen, die letzte wiederholt die erste - dadurch laeuft
   der Sprung zurueck auf Position 0 unsichtbar durch. */
.game-feed{position:absolute;right:5vw;top:5rem;z-index:1;pointer-events:none;display:flex;flex-direction:column;gap:.5rem;max-width:min(340px,42vw)}
.game-feed__label{font:.58rem var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.game-feed__window{height:1.7em;overflow:hidden;font:.82rem/1.7 var(--mono)}
.game-feed__list{animation:feed-scroll 12s cubic-bezier(.7,0,.2,1) infinite}
.game-feed__list span{display:block;height:1.7em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-feed__caret{width:8px;height:2px;display:block;animation:feed-caret 1s steps(1,end) infinite}
@keyframes feed-scroll{
0%,17%{transform:translateY(0)}
21%,38%{transform:translateY(-1.7em)}
42%,59%{transform:translateY(-3.4em)}
63%,80%{transform:translateY(-5.1em)}
84%,100%{transform:translateY(-6.8em)}
}
@keyframes feed-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Minecraft: Konsolen-Gruen auf dunklem Panel */
.game-feed--mc{padding:.85rem 1rem;background:linear-gradient(180deg,#23262a,#1a1d20);box-shadow:inset 2px 2px 0 rgba(255,255,255,.09),inset -2px -2px 0 rgba(0,0,0,.55)}
.game-feed--mc .game-feed__label{color:#a8e063}
.game-feed--mc .game-feed__window{color:#cfe6b4}
.game-feed--mc .game-feed__caret{background:#a8e063;box-shadow:0 0 8px rgba(168,224,99,.8)}

/* Murrietta: Funkverkehr in Neon-Orange */
.game-feed--mh{padding:.85rem 1rem;background:linear-gradient(180deg,#1c1f25,#131519);border:1px solid rgba(255,157,46,.28);border-radius:6px}
.game-feed--mh .game-feed__label{color:#ff9d2e}
.game-feed--mh .game-feed__window{color:#ffd9b0}
.game-feed--mh .game-feed__caret{background:#ff2f6d;box-shadow:0 0 8px rgba(255,47,109,.8)}

@media(max-width:900px){
.game-feed{position:static;max-width:none;margin:0 0 1.6rem}
}
@media(prefers-reduced-motion:reduce){
.game-feed__list,.game-feed__caret{animation:none}
}

/* ============================================================
   Globale Interaktionsschicht: Headline-Glitch
   ============================================================ */

/* ---- Digital-Glitch auf Headlines der Unterseiten ----
   Arbeitet direkt auf dem Element, nicht ueber content:attr().
   Dadurch bleiben <br> und <em> in den Ueberschriften erhalten. */
.glitch{position:relative}
.is-glitching{animation-duration:.42s;animation-timing-function:steps(2,end);animation-iteration-count:1}
.glitch-v1.is-glitching{animation-name:glitch-v1}
.glitch-v2.is-glitching{animation-name:glitch-v2}
.glitch-v3.is-glitching{animation-name:glitch-v3}

@keyframes glitch-v1{
0%,100%{clip-path:inset(0);transform:translateX(0);text-shadow:none}
14%{clip-path:inset(6% 0 68% 0);transform:translateX(4px);text-shadow:-3px 0 var(--neon-cyan),3px 0 var(--neon-pink)}
28%{clip-path:inset(0);transform:translateX(0)}
46%{clip-path:inset(64% 0 10% 0);transform:translateX(-4px);text-shadow:3px 0 var(--neon-cyan),-3px 0 var(--neon-pink)}
62%{clip-path:inset(0);transform:translateX(0)}
78%{clip-path:inset(36% 0 40% 0);transform:translateX(2px);text-shadow:-2px 0 var(--lime),2px 0 var(--neon-cyan)}
}
@keyframes glitch-v2{
0%,100%{clip-path:inset(0);transform:translateX(0);text-shadow:none}
18%{clip-path:inset(44% 0 30% 0);transform:translateX(-6px);text-shadow:4px 0 var(--neon-pink),-2px 0 var(--neon-cyan)}
34%{clip-path:inset(0);transform:translateX(0)}
52%{clip-path:inset(12% 0 74% 0);transform:translateX(5px);text-shadow:-4px 0 var(--lime)}
70%{clip-path:inset(0);transform:translateX(0)}
86%{clip-path:inset(72% 0 6% 0);transform:translateX(-2px);text-shadow:2px 0 var(--neon-cyan)}
}
@keyframes glitch-v3{
0%,100%{clip-path:inset(0);transform:translateX(0);text-shadow:none}
10%{clip-path:inset(26% 0 54% 0);transform:translateX(3px) skewX(-1.5deg);text-shadow:-3px 0 var(--neon-cyan)}
24%{clip-path:inset(0);transform:translateX(0)}
40%{clip-path:inset(58% 0 22% 0);transform:translateX(-5px) skewX(1.5deg);text-shadow:4px 0 var(--neon-pink),-2px 0 var(--lime)}
58%{clip-path:inset(0);transform:translateX(0)}
74%{clip-path:inset(4% 0 82% 0);transform:translateX(4px);text-shadow:-3px 0 var(--neon-pink)}
90%{clip-path:inset(0);transform:translateX(0)}
}

@media(prefers-reduced-motion:reduce){
.is-glitching{animation:none!important}
}

/* ============================================================
   Stil-Angleichung: alles auf die Kartensprache der Startseite
   Gleiche Tokens wie die Flip-Kacheln (--bento-*), gleiche
   Rundung, gleicher Cyan-Glow beim Hovern.
   ============================================================ */

/* ---- Projekt-Archiv (projekte.html) ---- */
.archive-grid .project{position:relative;padding:1.7rem;border-radius:16px;border:1px solid var(--bento-border);background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));transition:transform .35s var(--ease-out),border-color .35s ease,box-shadow .35s ease,background-color .35s ease}
.archive-grid .project:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;top:-70px;background:var(--violet);opacity:.16;pointer-events:none;transition:transform .4s var(--ease-out)}
.archive-grid .project:hover{transform:translateY(-5px);background:var(--bento-bg-hover);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3),0 0 28px rgba(var(--accent-rgb),.25),0 20px 50px rgba(0,0,0,.45)}
.archive-grid .project:hover:before{transform:scale(1.3)}
.archive-grid .project > *{position:relative}
.archive-grid .project-no{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);color:var(--neon-cyan);font:.62rem var(--mono);letter-spacing:.08em}
.archive-grid .project-arrow{transition:transform .3s var(--ease-out)}
.archive-grid .project:hover .project-arrow{transform:translate(3px,-3px)}

/* Filter-Pillen passend zum Karten-Akzent */
.archive-filter{border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.archive-filter:hover,.archive-filter.active{color:#07141a;background:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 20px rgba(var(--accent-rgb),.4)}

/* ---- Ueber mich: Foto, Timeline, Tools ---- */
.photo-frame{border-radius:18px;border:1px solid var(--bento-border);box-shadow:0 24px 60px rgba(0,0,0,.42)}
.photo-frame img{border-radius:11px}

.timeline-item{border-radius:14px;border:1px solid var(--bento-border);background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));transition:transform .3s var(--ease-out),border-color .3s ease,box-shadow .3s ease}
.timeline-item:hover{transform:translateX(6px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 0 26px rgba(var(--accent-rgb),.18)}

.tool-chip{border-radius:14px;border:1px solid var(--bento-border);background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur))}
.tool-chip:hover{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 26px rgba(var(--accent-rgb),.22)}

/* ---- Detailseiten: Banner, Sidebar, Zitat, Kennzahlen ---- */
.detail-banner{border-radius:18px;border-color:var(--bento-border)}
.status-card{border-radius:16px;border:1px solid var(--bento-border);background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));padding:1.7rem}
.project-quote{border-radius:14px;border:1px solid var(--bento-border);border-left:2px solid var(--neon-pink);background:linear-gradient(120deg,rgba(var(--neon-pink-rgb),.09),transparent 60%),var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));padding:1.5rem 1.6rem}
.metric{border-radius:999px;border-color:var(--bento-border);background:rgba(var(--paper-rgb),.45)}

/* ---- Kontaktseite ---- */
.contact-side,.contact-form{border-radius:18px;border-color:var(--bento-border);background:var(--bento-bg)}
.contact-suggestion{border-radius:12px}

/* ---- Startseite: Community-Block bekommt Kartenform ---- */
.home-community{width:min(1200px,calc(100% - 10vw));max-width:none;margin:0 auto 6rem;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem);position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--bento-border);background:var(--bento-bg);-webkit-backdrop-filter:blur(var(--bento-blur));backdrop-filter:blur(var(--bento-blur));box-shadow:0 26px 70px rgba(0,0,0,.35)}
.home-community:before{content:"";position:absolute;left:50%;top:-240px;width:440px;height:440px;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(var(--neon-pink-rgb),.22),transparent 68%)}
.home-community > *{position:relative}
.home-community .social-buttons a{background:rgba(var(--paper-rgb),.5);border-color:var(--bento-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .3s,background-color .3s}
.home-community .social-buttons a:hover{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 0 22px rgba(var(--accent-rgb),.3)}

@media(max-width:760px){
.home-community{width:calc(100% - 2.7rem);padding:3rem 1.4rem;border-radius:18px;margin-bottom:4rem}
.detail-banner{border-radius:14px}
.archive-grid .project{padding:1.4rem;border-radius:14px}
.photo-frame{border-radius:14px}
}

/* ============================================================
   Uebergang Community-Karte -> Footer
   Vorher: harte border-top plus ein Aurora-Leuchten, das durch
   overflow:hidden schlagartig anfing. Jetzt blendet das Leuchten
   ueber eine Maske ein, die Trennlinie laeuft an den Raendern aus.
   ============================================================ */
.home-community{margin-bottom:clamp(5rem,10vw,9rem)}

footer{border-top:0;padding:clamp(3rem,6vw,4.5rem) 5vw clamp(1.8rem,3vw,2.4rem);background:linear-gradient(180deg,transparent,rgba(var(--violet-rgb),.06))}
footer:before{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);mask-image:linear-gradient(180deg,transparent 0%,#000 62%)}
footer:after{content:"";position:absolute;left:5vw;right:5vw;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bento-border) 25%,var(--bento-border) 75%,transparent)}

@media(max-width:760px){
.home-community{margin-bottom:4.5rem}
footer{padding:2.8rem 1.35rem 2rem;flex-direction:column}
footer:after{left:1.35rem;right:1.35rem}
}

/* ============================================================
   Weiche Kanten an den Farbbloecken
   .focus-wrap und .work-bg hatten eine flache Volltonfarbe, die
   oben und unten hart gegen den Seitenhintergrund stiess. Der
   Verlauf blendet an beiden Enden auf 0 Alpha aus - dadurch
   uebernimmt der Body-Hintergrund unsichtbar.
   ============================================================ */
.focus-wrap,.work-bg{background:linear-gradient(180deg,rgba(var(--surface-2-rgb),0) 0%,rgb(var(--surface-2-rgb)) 9%,rgb(var(--surface-2-rgb)) 91%,rgba(var(--surface-2-rgb),0) 100%)}

/* ============================================================
   Hero-Portrait im neuen Stil
   Vorher: harter pinker Versatzschatten (18px 18px 0). Jetzt ein
   Verlaufsrahmen und weiche Tiefe, passend zu den Glass-Karten.
   ============================================================ */
.hero-photo{border-radius:190px 190px 22px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 70px rgba(var(--violet-rgb),.2)}
.hero-photo:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1.5px;background:linear-gradient(155deg,rgba(var(--neon-pink-rgb),.85),rgba(var(--violet-rgb),.4) 42%,rgba(var(--neon-cyan-rgb),.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.hero-photo img{filter:saturate(.96) contrast(1.04)}
.hero-photo:after{right:1rem;bottom:1.2rem;border-radius:999px;border:1px solid var(--bento-border);background:rgba(var(--paper-rgb),.66);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.8rem .55rem;z-index:3}
.hero-photo:hover{box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 90px rgba(var(--neon-pink-rgb),.28)}

@media(max-width:760px){
.hero-photo{height:420px;max-width:350px;margin:1.8rem auto 0;border-radius:150px 150px 18px 18px;box-shadow:0 22px 55px rgba(0,0,0,.5),0 0 50px rgba(var(--violet-rgb),.18)}
}

/* Werte in den Statistik-Kacheln nach unten ausrichten, damit sie
   auf einer Linie bleiben, auch wenn ein Label zweizeilig umbricht. */
.mh-stat{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}
.mh-stat > b{margin-top:0}