/* florian-ernst.com — geteilter Kern für Unterseiten (Projekte, Führung, Interessen) */
:root{--bg:#070707;--panel:#0d0d0d;--ink:#f5f3ef;--mut:#9a958d;--acc:#ff3b30;--accS:rgba(255,59,48,.14);--line:rgba(245,243,239,.12)}
html[data-acc="green"]{--acc:#22c55e;--accS:rgba(34,197,94,.14)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--acc);color:#fff}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;line-height:1.6;cursor:none}
a,button{cursor:none}
@media(hover:none){body,a,button{cursor:auto}}
body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#dot{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--acc);z-index:1000;pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s,border .2s}
#dot.big{width:44px;height:44px;background:transparent;border:1.5px solid var(--acc)}
#spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),var(--accS),transparent 70%)}
.wrap{max-width:1160px;margin:0 auto;padding:0 5vw}

header{position:fixed;top:0;left:0;right:0;z-index:80;backdrop-filter:blur(14px);background:rgba(7,7,7,.55);border-bottom:1px solid transparent;transition:.3s}
header.sc{border-bottom-color:var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding:16px 5vw}
.logo{font-weight:900;letter-spacing:.3px;font-size:.98rem;white-space:nowrap;text-decoration:none;color:var(--ink)}
.logo .bar{display:inline-block;width:.5em;height:.2em;background:var(--acc);border-radius:.06em;margin:0 .16em;vertical-align:.18em}
.logo .dot{color:var(--acc);font-size:1.35em}
.hnav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.hnav a.back{color:var(--mut);text-decoration:none;font-size:.78rem;letter-spacing:2px;font-weight:700;text-transform:uppercase;transition:.25s}
.hnav a.back:hover{color:var(--ink)}
.sw{display:flex;gap:6px;align-items:center}
.sw .lng{background:transparent;border:1px solid var(--line);color:var(--mut);font-size:.7rem;font-weight:800;letter-spacing:1px;padding:5px 9px;border-radius:3px}
.sw .lng.on{color:var(--ink);border-color:var(--acc)}
.dots{display:flex;gap:7px;margin-left:6px}
.dots button{width:16px;height:16px;border-radius:50%;border:2px solid transparent;padding:0}
.dots .r{background:#ff3b30}.dots .g{background:#22c55e}
.dots button.on{border-color:var(--ink)}

.hero{padding:150px 0 30px}
.eyebrow{color:var(--acc);font-size:.78rem;letter-spacing:4px;text-transform:uppercase;font-weight:800;margin-bottom:18px}
h1.big{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;line-height:1.02;letter-spacing:-1px}
h1.big em{font-style:normal;color:var(--acc)}
.lead{color:var(--mut);max-width:760px;margin-top:22px;font-size:1.08rem}
.lead b{color:var(--ink)}

/* Sektionskopf */
.psec{padding:56px 0 12px}
.psec .head{margin-bottom:16px}
.psec .head .k{color:var(--acc);font-size:.78rem;letter-spacing:3px;text-transform:uppercase;font-weight:800}
.psec .head h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.5px;margin-top:8px}
.psec .head h2 em{font-style:normal;color:var(--acc)}
.pnote{color:var(--mut);max-width:720px;margin-top:12px;font-size:.98rem}
.pnote b{color:var(--ink)}

/* Tech-Funnel (Projekte) */
.funnel{margin:60px auto 20px}
.funnel h2{font-size:.82rem;letter-spacing:3px;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:26px;text-align:center}
.tier{margin:0 auto 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);padding:22px;position:relative;overflow:hidden;opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.22,1,.36,1)}
.tier.in{opacity:1;transform:none}
.thead{text-align:center;margin-bottom:14px}
.thead .yr{display:block;color:var(--acc);font-size:.72rem;font-weight:800;letter-spacing:2px;margin-bottom:5px}
.thead b{display:block;font-size:1.05rem}
.thead .sub{display:block;color:var(--mut);font-size:.76rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut);transition:.2s;cursor:none}
.chip:hover{color:var(--ink);border-color:var(--acc);background:var(--accS)}
.chip.hot{color:var(--ink);border-color:var(--acc);background:var(--accS)}
.t1{max-width:100%}.t2{max-width:80%}.t3{max-width:58%}
.tooling{max-width:60%;margin:10px auto 0;text-align:center;color:var(--mut);font-size:.82rem}
.tooling b{color:var(--ink)}
.funnel-note{text-align:center;color:var(--mut);font-size:.9rem;max-width:640px;margin:22px auto 0}
@media(max-width:760px){.t2,.t3,.tooling{max-width:100%}}

/* Projekt-Karten (Projekte) */
.era{color:var(--mut);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin:44px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:26px;position:relative;overflow:hidden;opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.22,1,.36,1)}
.card.in{opacity:1;transform:none}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--cx,50%) var(--cy,0%),var(--accS),transparent 60%);opacity:0;transition:.3s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{border-color:var(--acc)}
.card .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.card .meta .yr{font-weight:900;color:var(--acc)}
.card .meta .m{font-size:.72rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 10px;letter-spacing:.5px;font-weight:700}
.card h3{font-size:1.24rem;font-weight:800;margin-bottom:6px;line-height:1.25}
.card .role{color:var(--acc);font-size:.82rem;font-weight:700;margin-bottom:12px}
.card p.ctx{color:var(--mut);font-size:.93rem;margin-bottom:14px}
.card ul{list-style:none;margin-bottom:16px}
.card ul li{position:relative;padding-left:18px;font-size:.9rem;margin-bottom:7px;color:var(--ink)}
.card ul li::before{content:"›";position:absolute;left:0;color:var(--acc);font-weight:900}
.card .tech{display:flex;flex-wrap:wrap;gap:6px}
.card .tech span{font-size:.7rem;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:3px 8px}

/* Highlight-/Impact-Karten (alle Unterseiten) */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:900px){.hl{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hl{grid-template-columns:1fr}}
.hl .b{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--panel);opacity:0;transform:translateY(20px);transition:.6s;position:relative;overflow:hidden}
.hl .b::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--cx,50%) var(--cy,0%),var(--accS),transparent 60%);opacity:0;transition:.3s;pointer-events:none}
.hl .b:hover::before{opacity:1}
.hl .b:hover{border-color:var(--acc)}
.hl .b.in{opacity:1;transform:none}
.hl .b .i{font-size:1.7rem;margin-bottom:12px}
.hl .b b{display:block;margin-bottom:8px;font-size:1.06rem;line-height:1.3}
.hl .b span{color:var(--mut);font-size:.9rem}

/* Panel / Listen / Zitate / Change (Führung) */
.panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:30px;opacity:0;transform:translateY(20px);transition:.6s}
.panel.in{opacity:1;transform:none}
.panel p{color:var(--mut);max-width:820px}
.plist{list-style:none;margin-top:16px;display:grid;gap:10px}
.plist li{position:relative;padding-left:20px;color:var(--ink);font-size:.96rem}
.plist li::before{content:"›";position:absolute;left:0;color:var(--acc);font-weight:900}
.plist li b{color:var(--ink)}
.quote{border-left:3px solid var(--acc);padding:6px 0 6px 18px;margin:0;font-style:italic;color:var(--ink);max-width:860px}
.quote span{display:block;color:var(--mut);font-size:.82rem;font-style:normal;margin-top:6px}
.qwrap{display:grid;gap:20px;margin-top:6px}
.certs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.certs span{border:1px solid var(--line);color:var(--mut);font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:5px}
.change{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--accS),transparent);padding:36px;opacity:0;transform:translateY(20px);transition:.6s}
.change.in{opacity:1;transform:none}
.change .big-q{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;line-height:1.3;max-width:900px}
.change .big-q em{color:var(--acc);font-style:normal}
.change p{color:var(--mut);margin-top:16px;max-width:820px}

/* Coming-soon (Interessen) */
.soon{margin-top:26px;border:1px dashed var(--line);border-radius:16px;padding:34px;text-align:center;opacity:0;transform:translateY(20px);transition:.6s}
.soon.in{opacity:1;transform:none}
.soon .i{font-size:2rem}
.soon b{display:block;margin:10px 0 6px;font-size:1.1rem}
.soon span{color:var(--mut);font-size:.95rem;max-width:620px;display:inline-block}

/* CTA / Buttons / Footer */
.cta{text-align:center;padding:80px 0 30px}
.cta h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.5px}
.cta h2 em{font-style:normal;color:var(--acc)}
.cta p{color:var(--mut);margin:16px auto 26px;max-width:560px}
.btn{display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.5px;padding:15px 30px;border-radius:8px;font-size:.92rem;margin:6px}
.btn-r{background:var(--acc);color:#fff}
.btn-o{border:1px solid var(--line);color:var(--ink)}
footer{border-top:1px solid var(--line);padding:24px 5vw;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin-top:50px}
footer a{color:var(--mut);text-decoration:none}
footer a:hover{color:var(--ink)}

/* Easter-Egg-FX */
.fx-ripple{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--acc);pointer-events:none;z-index:9999;animation:fxRip .6s ease-out forwards}
@keyframes fxRip{to{width:78px;height:78px;margin:-39px 0 0 -39px;opacity:0}}
.fx-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,12px);background:rgba(13,13,13,.92);border:1px solid var(--acc);color:#f5f3ef;font-weight:800;letter-spacing:.5px;padding:12px 22px;border-radius:999px;z-index:10000;opacity:0;transition:.4s cubic-bezier(.22,1,.36,1);box-shadow:0 12px 44px rgba(0,0,0,.55)}
#fxOverlay{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;transition:opacity .5s}
#fxOverlay.on{opacity:1}
#fxOverlay canvas{width:100%;height:100%;display:block}

@media(prefers-reduced-motion:reduce){.tier,.card,.hl .b,.panel,.change,.soon{opacity:1;transform:none;transition:none}#dot,#spot,.fx-ripple{display:none}}