:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #0f1115;
  --color-bg-alt: #171b22;
  --color-surface: #1f242d;
  --color-text: #e6e8ec;
  --color-text-dim: #9aa0b1;
  --color-accent: #f1b02b;
  --color-accent-rgb: 99 102 241;
  --color-border: #2a303c;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px -2px rgba(0 0 0 / 0.4);
  --transition: 150ms ease;
  --container-max: 1080px;
  --gradient-accent: linear-gradient(135deg, #6366f1, #8b5cf6 40%, #ec4899);
  --color-gold: #f1b02b;
  --color-gold-rgb: 241 176 43;
}

/* Light theme variables removed (single theme). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1,h2,h3 { line-height: 1.2; font-weight: 600; }

p { max-width: 70ch; }

a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; }

.skip-link { position: absolute; left: -999px; top: auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 0; top:0; width:auto; height:auto; padding:.75rem 1rem; background: var(--color-accent); color:#fff; z-index:1000; }

.site-header { position: sticky; top:0; backdrop-filter: blur(8px); background: rgba(var(--color-accent-rgb) / 0.06); border-bottom:1px solid var(--color-border); z-index: 50; transition: background .35s ease, box-shadow .35s ease; }
.site-header.is-top { background:transparent; box-shadow:none; }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:72px; transition:min-height .35s ease; }
.site-header.is-top .header-inner { min-height:120px; }
.nav { position:relative; }
.brand { font-size:1.25rem; font-weight:600; letter-spacing:.5px; }
.brand .accent { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav__toggle { display:flex; align-items:center; justify-content:center; background:var(--color-surface); border:1px solid var(--color-border); padding:.55rem .6rem; border-radius: var(--radius-sm); cursor:pointer; position:relative; width:44px; height:40px; z-index:300; }
.nav__toggle .burger, .nav__toggle .burger::before, .nav__toggle .burger::after { content:""; display:block; width:22px; height:2px; background: var(--color-gold); border-radius:2px; transition: .35s ease; position:relative; }
.nav__toggle .burger::before { position:absolute; top:-7px; }
.nav__toggle .burger::after { position:absolute; top:7px; }
.nav__toggle[aria-expanded="true"] .burger { background:transparent; }
.nav__toggle[aria-expanded="true"] .burger::before { top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .burger::after { top:0; transform:rotate(-45deg); }
.nav__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:row; gap:1rem; }
.js .nav__list { position:absolute; top:100%; right:0; margin-top:8px; flex-direction:column; background: var(--color-surface); padding:.85rem .9rem; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width:210px; opacity:0; transform:translateY(-6px); pointer-events:none; transition: opacity .25s ease, transform .3s ease; z-index:250; }
.js .nav__list.open { opacity:1; transform:translateY(0); pointer-events:auto; }
/* Top Zustand: Liste inline zeigen, Toggle verstecken */
.site-header.is-top .nav__toggle { display:none; }
.site-header.is-top .nav__list { position:static; margin:0; flex-direction:row; background:transparent; padding:0; border:0; box-shadow:none; opacity:1 !important; transform:none !important; pointer-events:auto; gap:1.25rem; }
.site-header.is-top .nav__list li { opacity:1 !important; transform:none !important; transition:none; }
.site-header:not(.is-top) .nav__list { display:none; }
.site-header:not(.is-top) .nav__list.open { display:flex; }
.site-header:not(.is-top) { box-shadow:0 4px 12px -4px rgba(0 0 0 / .5); }
.js .nav__list li { opacity:0; transform:translateX(14px); transition: opacity .35s ease, transform .5s cubic-bezier(.16,.84,.44,1); }
.js .nav__list.open li { opacity:1; transform:none; }

/* Hover activation (desktop pointer devices) */
@media (hover: hover) and (pointer: fine) {
  .js .nav.nav--hover .nav__list { opacity:1; transform:translateY(0); pointer-events:auto; }
  .js .nav.nav--hover .nav__list li { opacity:1; transform:none; transition-delay:120ms; }
  .js .nav.nav--hover .nav__toggle .burger { background:transparent; }
  .js .nav.nav--hover .nav__toggle .burger::before { top:0; transform:rotate(45deg); }
  .js .nav.nav--hover .nav__toggle .burger::after { top:0; transform:rotate(-45deg); }
}
.nav__list a { font: inherit; background:none; border:none; color: var(--color-gold); cursor:pointer; padding:.5rem .75rem; border-radius:var(--radius-sm); font-weight:500; letter-spacing:.4px; position:relative; }
.nav__list a::after { content:""; position:absolute; left:.75rem; right:.75rem; bottom:.35rem; height:2px; background: linear-gradient(90deg, var(--color-gold), #ffdb80); transform:scaleX(0); transform-origin:left; transition: .35s ease; border-radius:2px; }
.nav__list a:hover::after, .nav__list a:focus-visible::after, .nav__list a:active::after { transform:scaleX(1); }
.nav__list a:hover, .nav__list a:focus-visible { text-decoration:none; }

.theme-toggle { font-size:1.1rem; }

.hero { padding: clamp(0rem, 10vh, 0rem) 0 2.5rem; position:relative; min-height:56vh; display:flex; align-items:center; }
.hero--image { color: #fff; }
.hero--image .hero__bg { position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(rgba(17,20,24,0.75), rgba(17,20,24,0.85)),
  url("../img/hero_img.png") center/cover no-repeat; filter: saturate(1.1); }
.hero__inner { position:relative; }
.hero-logo-wrapper { text-align:center; padding-top:.5rem; }
.hero-logo { height:110px; width:auto; display:inline-block; margin:0 0 1rem; transition: transform .6s ease; }
.hero-logo:hover { transform: scale(1.03); }
/* Crossfade Setup */
.hero-logo-wrapper { position:relative; }
.hero-logo { position:relative; z-index:1; transition: opacity .5s ease, transform .6s ease; }
.hero-logo.is-hidden { opacity:0; pointer-events:none; }
.hero-video { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:110px; width:auto; margin:0 0 1rem; border:none; outline:none; background:#000; opacity:0; pointer-events:none; transition: opacity .5s ease; 
  /* Zuschnitt: 5% oben, 10% unten; danach zentriert durch translate(-50%, -50%) */
  clip-path: inset(5% 0 10% 0);
}
.hero-video.is-visible { opacity:1; pointer-events:auto; }
@media (min-width: 900px) { .hero-video, .hero-logo { height:560px; } }
@media (min-width: 900px) { .hero-logo { height:560px; } }
.hero-highlights { list-style:none; padding:0; margin:1.5rem 0 2rem; display:grid; gap:.5rem; max-width:620px; }
.hero-highlights li { background: rgba(0 0 0 / .35); border:1px solid rgba(255 255 255 / .12); padding:.6rem .9rem; border-radius: var(--radius-sm); font-size:.9rem; backdrop-filter: blur(4px); }

/* Gold accent adaptation */
.brand .accent { background: linear-gradient(90deg, var(--color-gold), #ffe08a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn.primary { background: linear-gradient(135deg, var(--color-gold), #ffca52); }
.project-tags li { background: rgba(var(--color-gold-rgb)/0.15); color: var(--color-gold); }

/* Two column & feature grid */
.two-col { display:grid; gap:2.5rem; align-items:start; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }
.media-box img { width:100%; border-radius: var(--radius-lg); border:1px solid var(--color-border); box-shadow: var(--shadow-md); }

.feature-grid { display:grid; gap:1.5rem; margin-top:2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature { background: var(--color-surface); border:1px solid var(--color-border); padding:1.25rem 1.15rem 1.4rem; border-radius: var(--radius-md); position:relative; overflow:hidden; }
.feature h3 { margin-top:0; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.feature-tags { font-size:.7rem; letter-spacing:.6px; text-transform:uppercase; color: var(--color-text-dim); margin:.85rem 0 0; }
.feature:hover { border-color: var(--color-gold); }

/* Alternate section */
.section--alt { background: linear-gradient(180deg, var(--color-bg-alt), transparent); }

/* Check list */
.check-list { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.6rem; }
.check-list li { position:relative; padding-left:1.6rem; }
.check-list li::before { content:""; position:absolute; left:0; top:.35rem; width:1rem; height:1rem; border-radius:3px; background: linear-gradient(135deg, var(--color-gold), #ffca52); mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.2 11.6 2.6 8l1.4-1.4 2.2 2.2 5-5L12.6 5l-6.4 6.6Z"/></svg>') center/80% no-repeat; }

/* Approach steps */
.approach-steps { counter-reset: step; list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.15rem; max-width:880px; }
.approach-steps li { position:relative; padding-left:3.4rem; line-height:1.35; }
.approach-steps li::before { counter-increment: step; content:counter(step); position:absolute; left:0; top:50%; transform:translateY(-50%); width:2.4rem; height:2.4rem; display:grid; place-content:center; font-weight:600; border-radius:50%; background: linear-gradient(135deg, var(--color-gold), #ffca52); color:#111; box-shadow:0 2px 6px rgba(0 0 0 / .35); }

/* CTA block */
.cta-block { background: radial-gradient(circle at 20% 30%, rgba(var(--color-gold-rgb)/0.25), transparent 60%), var(--color-bg-alt); }
.cta-inner { display:grid; gap:2rem; align-items:center; }
@media (min-width: 880px) { .cta-inner { grid-template-columns: 1fr 420px; } }
.cta-inner .cta-image { width:100%; border-radius: var(--radius-lg); border:1px solid var(--color-border); box-shadow: var(--shadow-md); }

/* Footer small note */
.site-footer small { display:block; margin-top:.35rem; }
.lead { font-size:1.125rem; color: var(--color-text-dim); }
.cta-group { display:flex; gap:1rem; margin-top:1.5rem; }

.btn { --btn-bg: var(--color-surface); --btn-text: var(--color-text); display:inline-flex; align-items:center; gap:.5rem; background: var(--btn-bg); color: var(--btn-text); padding:.75rem 1.25rem; border-radius: var(--radius-md); font-weight:500; text-decoration:none; position:relative; box-shadow: var(--shadow-sm); transition: var(--transition); border:1px solid var(--color-border); }
.btn.primary { --btn-bg: var(--gradient-accent); --btn-text: #fff; border: none; }
.btn.secondary { outline: none; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.section { padding: 4rem 0 3rem; }
.section h2 { margin-top:0; font-size: clamp(1.5rem, 2.5vw, 2.25rem); }

.skills { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1rem 0 0; }
.skills li { list-style:none; background: var(--color-surface); padding:.5rem .75rem; border-radius: var(--radius-sm); font-size:.875rem; border:1px solid var(--color-border); }

.projects-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top:2rem; }
.project-card { background: var(--color-surface); padding:1.25rem 1.25rem 1.5rem; border-radius: var(--radius-lg); border:1px solid var(--color-border); display:flex; flex-direction:column; gap:.75rem; position:relative; overflow:hidden; }
.project-card::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(var(--color-accent-rgb)/0.08), transparent 60%); opacity:0; transition: var(--transition); pointer-events:none; }
.project-card:hover::before { opacity:1; }
.project-title { margin:0 0 .25rem; font-size:1.125rem; }
.project-desc { margin:0; font-size:.9rem; color: var(--color-text-dim); }
.project-tags { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.project-tags li { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; background: rgba(var(--color-accent-rgb)/0.15); color: var(--color-accent); padding:.25rem .5rem; border-radius:999px; font-weight:600; }
.project-links { display:flex; gap:.5rem; margin-top:auto; }
.project-links a { font-size:.75rem; padding:.4rem .65rem; border:1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); color: var(--color-text); display:inline-flex; align-items:center; gap:.25rem; }
.project-links a:hover, .project-links a:focus-visible { background: var(--color-accent); color:#fff; text-decoration:none; border-color: var(--color-accent); }

.contact-list { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.contact-list a { word-break:break-all; }

.site-footer { padding:2rem 0 3rem; border-top:1px solid var(--color-border); background: var(--color-bg-alt); margin-top:3rem; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }

.back-to-top { position:fixed; right:1rem; bottom:1rem; padding:.6rem .75rem; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); border:1px solid var(--color-border); cursor:pointer; opacity:0; transform:translateY(8px); transition: var(--transition); }
.back-to-top.show { opacity:1; transform:translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--color-accent); color:#fff; }

/* Animations */
.reveal { opacity:0; transform:translateY(16px); transition: 600ms cubic-bezier(.16,.84,.44,1); }
.reveal.visible { opacity:1; transform:none; }

/* Responsive Nav */
/* Burger menu behavior */
/* Responsive: keep inline on wide screens if JS off */

/* Light theme overrides for elements using accent backgrounds */
/* Removed light theme overrides */

/* Utilities */
.wave { display:inline-block; animation: wave 2.5s infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0deg);} 10%,20% { transform: rotate(14deg);} 30%,40% { transform: rotate(-8deg);} 50% { transform: rotate(4deg);} }

/* Goldregen Layer */
.gold-rain { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:45; mix-blend-mode:screen; }
@media (prefers-reduced-motion: reduce) { .gold-rain { display:none; } }