:root{
  --bg:#0d0d10; --text:#e9eaef; --muted:#9aa0a6; --panel:#121217; --border:#1f2228; --accent:#ff6a00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;line-height:1.6}
.container{max-width:1160px;margin:0 auto;padding:0 16px}
.site-header{background:#0f0f14;border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--text)}
.title-wrap{display:flex;flex-direction:column}
.site-title{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700;line-height:1.1}
.subtitle{font-weight:300;font-size:.78em;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.main-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;transition:color .2s,background .2s,transform .2s}
.main-nav a:hover{color:var(--accent);background:rgba(255,255,255,.06);transform:scale(1.08)}
.main-nav a.active{color:var(--accent);background:rgba(255,255,255,.08)}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px}
.icon-link img{width:16px;height:16px;display:block;filter:brightness(0) invert(1);transition:filter .25s,transform .2s}
.icon-link:hover{background-color:rgba(255,255,255,.06)}
.icon-link:hover img{filter:brightness(1) saturate(1) invert(41%) sepia(97%) saturate(2473%) hue-rotate(8deg) brightness(101%) contrast(103%);transform:scale(1.125)}
body{padding-top:72px}
.hero{background:linear-gradient(180deg,#14141b,transparent);border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;padding:36px 0;align-items:center}
.hero-text h1{margin:0 0 8px 0;font-size:clamp(1.4rem,4vw,2.2rem)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.badge{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:.92rem;color:var(--muted)}
.cta-row{display:flex;gap:12px;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid var(--border);transition:color .2s,background .2s,transform .2s}
.btn.primary{background:var(--accent);border:none;color:#fff}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn:hover{transform:scale(1.05)}
.hero-photo{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Avatar pseudo-element crop */
:root{--heroAvatar:160px}
.hero-photo img{display:none}
.hero-photo::before{content:"";width:var(--heroAvatar);height:var(--heroAvatar);border-radius:50%;display:block;background-image:url('../bilder/heiko.jpg');background-repeat:no-repeat;background-size:115% auto;background-position:58% 50%;border: 2px solid var(--accent); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hero-cta-solo{display:flex;justify-content:flex-end;margin-top:6px;width:100%}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr}.hero-photo{align-items:center}.hero-photo::before{width:130px;height:130px}.hero-cta-solo{justify-content:center}}
.section{padding:34px 0}
.section.alt{background:#111118;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.card h3{margin-top:8px}
.icon{width:44px;height:44px;color:#fff;opacity:.95;filter:drop-shadow(0 4px 10px rgba(255,255,255,.08))}
/* Projects: 3 items */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;will-change:transform;transition:transform .35s,box-shadow .35s}
.tile img{display:block;width:100%;height:auto;transition:transform .6s}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.45),0 0 0 1px var(--border)}
.tile:hover img{transform:scale(1.06)}
.tile:focus-within{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 12px 26px rgba(0,0,0,.45)}
/* Contact layout */
.contact-layout{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.contact-left{display:flex;justify-content:center}
.qr-card{width:240px}
.qr-wrap.left{justify-content:center;padding:0;background:transparent;border:none;box-shadow:none;border-radius:0}
.qr-wrap.left img{display:block;border-radius:12px;width:200px;height:200px}
.mindmap.card{align-items:stretch;padding-right:10px}
.mindmap-frame{overflow:visible;background:transparent;border:none;box-shadow:none;display:flex;justify-content:center;align-items:flex-start}
.mindmap-obj{display:block;width:100%;height:auto;transform-origin:top left;border:none;box-shadow:none;border-radius:0;margin:0 auto}
.footer{padding:20px 0 60px;color:var(--muted);border-top:1px dashed var(--border);margin-top:20px}
.footer a{color:var(--muted);text-decoration:none;transition:color .2s,transform .2s}
.footer a:hover{color:var(--accent);transform:scale(1.08)}
main a:not(.btn):not(.icon-link), .section a:not(.btn):not(.icon-link), .card a:not(.btn):not(.icon-link){color:var(--text);text-decoration:none;border-radius:6px;padding:0 2px;transition:color .2s,background .2s,transform .2s}
main a:not(.btn):not(.icon-link):hover, .section a:not(.btn):not(.icon-link):hover, .card a:not(.btn):not(.icon-link):hover{color:var(--accent);background:rgba(255,255,255,.06);transform:scale(1.04)}
.main-nav a:focus-visible,.footer a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.tile,.tile img,.main-nav a,.btn{transition:none!important}}
@media (max-width:860px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.gallery{grid-template-columns:repeat(2,1fr)}}


/* v62-dark: tweaks */
.cards .icon { display: none; }
.section h2, .card h3 { color: var(--accent); }


/* v66: combined About + Contact */
.contact-layout { grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.about-card { display: block; }
.about-card h2 { margin-top: 0; color: var(--accent); }

/* v72: pills & badges (ensure present) */
.badges .badge { background: rgba(255,255,255,0.06); border: 1px solid var(--border); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: .92rem;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.pill:hover { transform: scale(1.04); color: var(--accent); background: rgba(255,255,255,0.1); }

/* v80: language switch */
.lang-switch{display:flex;gap:8px;align-items:center;margin-left:8px}
.lang-switch .lang{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.04);text-decoration:none;transition:transform .15s ease, background .15s ease}
.lang-switch .lang.active{outline:2px solid var(--accent); outline-offset:2px}
.lang-switch img{display:block;width:20px;height:14px;border-radius:2px}
.lang-switch .lang:hover{transform:scale(1.06);background:rgba(255,255,255,.08)}


/* v82: robust language switch placement */
.header-inner{flex-wrap:wrap}
.main-nav{flex-wrap:wrap}
.main-nav .lang-switch{margin-left:auto; display:flex; gap:8px; align-items:center}
.lang-switch .lang{display:inline-flex; align-items:center; justify-content:center; width:28px; height:22px; border-radius:6px; border:1px solid var(--border); background:rgba(255,255,255,.04); text-decoration:none; transition:transform .15s ease, background .15s ease}
.lang-switch .lang.active{outline:2px solid var(--accent); outline-offset:2px}
.lang-switch img{display:block; width:20px; height:14px; border-radius:2px}
.lang-switch .lang:hover{transform:scale(1.06); background:rgba(255,255,255,.08)}
@media (max-width: 840px){
  .main-nav a{padding:6px 8px}
}


/* v83: language switch icon-only */
.lang-switch{display:flex;gap:8px;align-items:center;margin-left:8px}
.lang-switch .lang{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;width:auto;height:auto}
.lang-switch img{display:block;width:20px;height:14px;border-radius:2px;opacity:.7;transition:transform .15s ease, opacity .15s ease}
.lang-switch .lang.active img{opacity:1}
.lang-switch .lang:hover img{transform:scale(1.08);opacity:1}
/* keep nav wrapping to avoid cutoff */
.header-inner{flex-wrap:wrap}
.main-nav{flex-wrap:wrap}
.main-nav .lang-switch{margin-left:auto}
@media (max-width: 840px){
  .main-nav a{padding:6px 8px}
}


/* v84: language switch outside nav & icon-only */
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lang-switch{display:flex;align-items:center;margin-left:12px}
.lang-switch .lang{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent}
.lang-switch img{display:block;width:20px;height:14px;border-radius:2px;opacity:.8;transition:transform .15s ease,opacity .15s ease}
.lang-switch .lang:hover img{transform:scale(1.08);opacity:1}
@media (max-width:860px){
  .main-nav a{padding:6px 8px}
}


/* v85: place lang-switch after brand, push menu right */
.header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.main-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.lang-switch{display:flex;align-items:center;margin-left:8px}
.lang-switch .lang{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent}
.lang-switch img{display:block;width:20px;height:14px;border-radius:2px;opacity:.8;transition:transform .15s ease,opacity .15s ease}
.lang-switch .lang:hover img{transform:scale(1.08);opacity:1}
@media (max-width:860px){.main-nav a{padding:6px 8px}}


/* v85r5: mail icon next to QR email link */
.eml-link{display:inline-flex;align-items:center;gap:6px}
.icon.mail{width:14px;height:14px;display:inline-block;vertical-align:middle;opacity:.9}