/* =========================================================
   site.css — Komponenten der Seite
   Nutzt ausschließlich die Tokens aus base.css
   ========================================================= */

:root{
  --color-border: rgba(255,255,255,0.10);
  --color-border-stark: rgba(153,69,255,0.35);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; }
img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

:focus-visible{
  outline:2px solid var(--color-neon-purple);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-notification);
  background:var(--color-neon-purple); color:#fff;
  padding:var(--space-sm) var(--space-md); font-weight:700;
  border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{ left:0; }

/* Hintergrund-Aura */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 80% -10%, #9945ff2e, transparent 60%),
    radial-gradient(700px 500px at -5% 35%, #4a008040, transparent 65%),
    var(--color-deep-purple);
}

/* ---------- Abschnittskopf ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--color-electric-violet);
  display:flex; align-items:center; gap:var(--space-sm);
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--color-neon-purple);
}
.section-head{ max-width:62ch; margin-bottom:var(--space-3xl); }
.section-head h2{
  font-size:var(--text-4xl); font-weight:800; margin-top:var(--space-md);
  background:linear-gradient(120deg,#fff 20%,var(--color-light-purple) 60%,var(--color-neon-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head p{
  margin-top:var(--space-md); color:var(--color-text-secondary);
  font-size:var(--text-base); max-width:56ch;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:.9rem 1.7rem; border-radius:var(--radius-full);
  font-weight:700; font-size:var(--text-sm); border:1px solid transparent;
  cursor:pointer; transition:transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background var(--duration-normal) var(--ease-out-expo);
}
.btn-primary{
  background:var(--gradient-neon); color:#fff; box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-glow-intense); }
.btn-ghost{
  background:#ffffff08; color:var(--color-text-primary); border-color:#ffffff26;
  backdrop-filter:blur(var(--blur-md));
}
.btn-ghost:hover{ border-color:var(--color-neon-purple); transform:translateY(-3px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-sticky);
  transition:background var(--duration-normal) var(--ease-out-expo),
             border-color var(--duration-normal) var(--ease-out-expo);
  border-bottom:1px solid transparent;
}
.site-header.stuck{
  background:rgba(13,0,21,.9);
  backdrop-filter:blur(var(--blur-lg)); -webkit-backdrop-filter:blur(var(--blur-lg));
  border-bottom-color:#ffffff14;
}
.nav{
  display:flex; align-items:center; gap:var(--space-xl);
  height:76px; max-width:1440px; margin:0 auto; padding:0 var(--space-xl);
}
.logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:var(--tracking-wide); }
.logo-mark{
  width:34px; height:34px; border-radius:var(--radius-md);
  background:var(--gradient-neon); box-shadow:var(--shadow-glow);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.85rem;
}
.nav-links{ display:flex; gap:var(--space-lg); margin-left:auto; }
.nav-links a{
  font-size:var(--text-sm); color:var(--color-text-secondary);
  position:relative; padding:.35rem 0;
  transition:color var(--duration-fast) var(--ease-out-expo);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--color-neon-purple);
  transition:width var(--duration-normal) var(--ease-out-expo);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:#fff; }
.nav-cta{ margin-left:var(--space-md); }
.burger{
  display:none; margin-left:auto; width:44px; height:44px;
  background:#ffffff0d; border:1px solid #ffffff1f; border-radius:var(--radius-md);
  color:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#fff;
  transition:transform var(--duration-normal) var(--ease-out-expo);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column; gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl) var(--space-2xl);
  background:rgba(13,0,21,.97); backdrop-filter:blur(var(--blur-lg));
  border-bottom:1px solid #ffffff14;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-size:var(--text-lg); font-weight:600; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(76px + var(--space-3xl)) 0 var(--space-4xl); overflow:hidden;
}
#particles{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero .container{ position:relative; z-index:1; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-3xl); align-items:center;
}
.hero-title{
  position:relative; font-size:var(--text-6xl); font-weight:900;
  letter-spacing:var(--tracking-tight); margin-top:var(--space-md);
  line-height:1;
}
.hero-title .layer{
  position:absolute; inset:0; opacity:.85; pointer-events:none;
}
.hero-title .layer.a{ color:var(--color-electric-violet); mix-blend-mode:screen; }
.hero-title .layer.b{ color:var(--color-neon-purple); mix-blend-mode:screen; }
.hero-title.glitching .layer.a{ transform:translate(-3px,1px); }
.hero-title.glitching .layer.b{ transform:translate(3px,-1px); }
.hero-role{
  margin-top:var(--space-lg); font-family:var(--font-mono);
  font-size:var(--text-lg); color:var(--color-light-purple);
}
.hero-role .cursor{
  display:inline-block; width:10px; height:1.1em; vertical-align:-3px;
  background:var(--color-neon-purple); margin-left:4px;
  animation:blink 1s steps(1) infinite;
}
.hero-text{
  margin-top:var(--space-lg); color:var(--color-text-secondary);
  font-size:var(--text-base); max-width:48ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-xl); }
.hero-meta{
  display:flex; align-items:center; gap:var(--space-sm); margin-top:var(--space-xl);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-secondary);
}
.status-dot{
  width:9px; height:9px; border-radius:var(--radius-full); background:#4ade80;
  box-shadow:0 0 0 4px #4ade8026; animation:pulse 2.4s var(--ease-in-out-expo) infinite;
}

/* Code-Fenster */
.code-window{
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--color-dark-surface-elevated);
  border:1px solid #ffffff14;
  box-shadow:var(--shadow-xl), 0 0 80px #9945ff26;
  animation:float 9s var(--ease-in-out-expo) infinite;
}
.code-bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.8rem 1rem; border-bottom:1px solid #ffffff0f; background:#ffffff05;
}
.code-bar i{ width:11px; height:11px; border-radius:50%; background:#ffffff1f; display:block; }
.code-bar .file{
  margin-left:.6rem; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-text-muted);
}
.code-body{
  display:flex; font-family:var(--font-mono); font-size:.82rem; line-height:1.85;
  padding:var(--space-md) 0;
}
.code-lines{
  padding:0 .9rem; text-align:right; color:var(--color-text-muted);
  user-select:none; border-right:1px solid #ffffff0d; min-width:3rem;
  white-space:pre;
}
.code-text{ padding:0 1rem; overflow-x:auto; white-space:pre; flex:1; }
.tok-key{ color:#c77dff; } .tok-fn{ color:#9945ff; } .tok-str{ color:#7ee787; }
.tok-num{ color:#ffb86c; } .tok-com{ color:var(--color-text-muted); }
.tok-punc{ color:#8b8ba0; } .tok-prop{ color:#79c0ff; }

/* ---------- Karten / Glas ---------- */
.card{
  background:var(--gradient-glass);
  border:1px solid #ffffff14; border-radius:var(--radius-xl);
  padding:var(--space-xl); position:relative; overflow:hidden;
  backdrop-filter:blur(var(--blur-md));
  transition:transform var(--duration-normal) var(--ease-out-expo),
             border-color var(--duration-normal) var(--ease-out-expo),
             box-shadow var(--duration-normal) var(--ease-out-expo);
}
.card:hover{
  transform:translateY(-6px); border-color:#9945ff66; box-shadow:var(--shadow-glow);
}

/* ---------- Über mich ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-3xl); align-items:start; }
.about-text p + p{ margin-top:var(--space-md); }
.about-text p{ color:var(--color-text-secondary); }
.offer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.offer{ padding:var(--space-lg); }
.offer .ico{ font-size:1.6rem; }
.offer h4{ margin-top:var(--space-sm); font-size:var(--text-base); font-weight:700; }
.offer p{ margin-top:.35rem; color:var(--color-text-secondary); font-size:var(--text-sm); }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg);
  margin-top:var(--space-2xl);
}
.stat{ text-align:center; padding:var(--space-lg) var(--space-md); }
.stat b{
  display:block; font-size:var(--text-4xl); font-weight:900; line-height:1;
  background:var(--gradient-neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
  display:block; margin-top:var(--space-sm); font-family:var(--font-mono);
  font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--color-text-muted);
}

/* ---------- Zeitstrahl ---------- */
.timeline{ position:relative; margin-top:var(--space-4xl); padding-left:var(--space-2xl); }
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:#ffffff14; border-radius:2px;
}
.timeline::after{
  content:""; position:absolute; left:8px; top:6px; width:2px;
  height:var(--progress,0%); background:var(--gradient-neon);
  box-shadow:var(--shadow-glow); border-radius:2px;
  transition:height .15s linear;
}
.tl-item{ position:relative; padding-bottom:var(--space-2xl); }
.tl-item::before{
  content:""; position:absolute; left:calc(-1 * var(--space-2xl) + 3px); top:8px;
  width:12px; height:12px; border-radius:50%;
  background:var(--color-dark-surface); border:2px solid var(--color-neon-purple);
}
.tl-year{ font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-electric-violet); }
.tl-item h4{ margin-top:.3rem; font-size:var(--text-lg); font-weight:700; }
.tl-item p{ margin-top:.4rem; color:var(--color-text-secondary); font-size:var(--text-sm); max-width:60ch; }

/* ---------- Skills ---------- */
.skill{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.skill-no{
  font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:700;
  color:transparent; -webkit-text-stroke:1px #9945ff80;
}
.skill h3{ font-size:var(--text-xl); font-weight:700; }
.skill > div > p{ margin-top:var(--space-sm); color:var(--color-text-secondary); font-size:var(--text-sm); max-width:70ch; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--space-md); }
.tags li{
  font-family:var(--font-mono); font-size:var(--text-xs);
  padding:.3rem .7rem; border-radius:var(--radius-full);
  background:#9945ff1a; border:1px solid #9945ff33; color:var(--color-light-purple);
}
.meter{ margin-top:var(--space-md); }
.meter-top{
  display:flex; justify-content:space-between; font-family:var(--font-mono);
  font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:.4rem;
}
.meter-rail{ height:6px; border-radius:var(--radius-full); background:#ffffff0f; overflow:hidden; }
.meter-fill{
  height:100%; width:0; border-radius:var(--radius-full);
  background:var(--gradient-neon); box-shadow:var(--shadow-glow);
  transition:width 1.4s var(--ease-out-expo);
}

/* ---------- Services ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-xl); }
.tab{
  padding:.7rem 1.4rem; border-radius:var(--radius-full);
  background:#ffffff08; border:1px solid #ffffff1a; color:var(--color-text-secondary);
  cursor:pointer; font-size:var(--text-sm); font-weight:600;
  transition:all var(--duration-normal) var(--ease-out-expo);
}
.tab:hover{ color:#fff; border-color:#9945ff66; }
.tab[aria-selected="true"]{
  background:var(--gradient-neon); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow);
}
.panel[hidden]{ display:none; }
.panel{ animation:fadeInUp var(--duration-slow) var(--ease-out-expo) both; }
.panel-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-2xl); }
.panel h3{ font-size:var(--text-2xl); font-weight:800; }
.panel > .panel-grid > div > p{ margin-top:var(--space-md); color:var(--color-text-secondary); }
.offer-list{ display:grid; gap:.8rem; }
.offer-list li{
  display:flex; gap:.8rem; align-items:flex-start;
  color:var(--color-text-secondary); font-size:var(--text-sm);
}
.offer-list li::before{
  content:"▸"; color:var(--color-neon-purple); flex:none; line-height:1.5;
}
.price-line{
  margin-top:var(--space-xl); font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--color-light-purple);
}

/* ---------- Referenzen ---------- */
.client-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); margin-bottom:var(--space-2xl); }
.client-list{ display:grid; gap:.6rem; }
.client{
  display:grid; grid-template-columns:70px 1.4fr 1fr 110px 120px;
  gap:var(--space-md); align-items:center;
  padding:var(--space-md) var(--space-lg);
  background:#ffffff05; border:1px solid #ffffff0f; border-radius:var(--radius-lg);
  transition:all var(--duration-normal) var(--ease-out-expo);
}
.client:hover{ background:#9945ff14; border-color:#9945ff4d; transform:translateX(6px); }
.client .year{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); }
.client .name{ font-weight:700; }
.client .type{ color:var(--color-text-secondary); font-size:var(--text-sm); }
.client .metric{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-light-purple); }
.badge{
  justify-self:start; font-family:var(--font-mono); font-size:var(--text-xs);
  padding:.25rem .7rem; border-radius:var(--radius-full);
  background:#4ade801a; border:1px solid #4ade8040; color:#4ade80;
}
.badge.dev{ background:#ffb86c1a; border-color:#ffb86c40; color:#ffb86c; }
.badge.done{ background:#ffffff0d; border-color:#ffffff1f; color:var(--color-text-muted); }

/* ---------- Kontakt ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-3xl); align-items:start; }
.field{ display:grid; gap:.4rem; margin-bottom:var(--space-md); }
.field label{ font-size:var(--text-sm); color:var(--color-text-secondary); }
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--text-sm); color:#fff;
  background:#ffffff08; border:1px solid #ffffff1f;
  border-radius:var(--radius-md); padding:.8rem 1rem; width:100%;
}
/* ---------- Eigene Auswahlliste ----------
   Ersetzt das native Menue, dessen Farben das Betriebssystem bestimmt.
   Ohne Javascript bleibt das normale <select> sichtbar und nutzbar. */
.field select{ color-scheme:dark; }
.auswahl{ position:relative; }
.auswahl select{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:-1px;
}
.auswahl-knopf{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:var(--text-sm); color:#fff;
  background:#ffffff08; border:1px solid #ffffff1f;
  border-radius:var(--radius-md); padding:.8rem 1rem;
  transition:border-color var(--duration-fast) var(--ease-out-expo);
}
.auswahl-knopf::after{
  content:""; width:.55rem; height:.55rem; flex:none;
  border-right:2px solid #b98cff; border-bottom:2px solid #b98cff;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--duration-fast) var(--ease-out-expo);
}
.auswahl.offen .auswahl-knopf::after{ transform:translateY(2px) rotate(225deg); }
.auswahl-knopf:hover{ border-color:#ffffff33; }
.auswahl-knopf:focus-visible,
.auswahl.offen .auswahl-knopf{
  outline:none; border-color:var(--color-neon-purple); box-shadow:0 0 0 4px #9945ff26;
}
.auswahl-liste{
  position:absolute; top:calc(100% + .35rem); left:0; right:0; z-index:60;
  margin:0; padding:.3rem; list-style:none;
  max-height:18rem; overflow-y:auto;
  background:#1f0a3d; border:1px solid #9945ff4d;
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:none;
}
.auswahl.offen .auswahl-liste{ display:block; }
.auswahl.nach-oben .auswahl-liste{ top:auto; bottom:calc(100% + .35rem); }
.auswahl-option{
  padding:.6rem .75rem; border-radius:var(--radius-sm);
  font-size:var(--text-sm); color:#fff; cursor:pointer;
}
.auswahl-option.aktiv{ background:#9945ff33; }
.auswahl-option[aria-selected="true"]{ background:var(--color-neon-purple); color:#fff; }
/* Die Karte schneidet ihren Inhalt sonst ab und die Liste waere unsichtbar. */
#anfrage.card{ overflow:visible; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-neon-purple); box-shadow:0 0 0 4px #9945ff26;
}
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
/* Honigtopf. Nicht display:none, das erkennen manche Bots. */
.honig{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form-datenschutz{
  margin-top:var(--space-sm); font-size:var(--text-xs);
  color:var(--color-text-muted); line-height:1.6;
}
.form-datenschutz a{ color:#b98cff; text-decoration:underline; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.form-note{ margin-top:var(--space-sm); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); }
.contact-links{ display:grid; gap:.6rem; margin-top:var(--space-lg); }
.contact-links a{
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  border-radius:var(--radius-lg); background:#ffffff05; border:1px solid #ffffff0f;
  font-family:var(--font-mono); font-size:var(--text-sm);
  transition:all var(--duration-normal) var(--ease-out-expo);
}
.contact-links a:hover{ border-color:#9945ff66; background:#9945ff14; transform:translateX(5px); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid #ffffff0f;
  padding:var(--space-2xl) 0;
  /* Platz, damit die schwebende Leiste und der Nach-oben-Knopf
     den Fuss nicht verdecken, wenn man ganz unten steht. */
  padding-bottom:calc(var(--space-2xl) + 5rem);
}
.footer-in{ display:flex; flex-wrap:wrap; gap:var(--space-md) var(--space-xl); align-items:center; }
.site-footer p,.site-footer a{ color:var(--color-text-muted); font-size:var(--text-sm); }
.footer-links{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.6rem var(--space-lg); }
@media (max-width:48rem){
  .footer-in{ flex-direction:column; align-items:flex-start; }
  .footer-links{ margin-left:0; }
}
.site-footer a:hover{ color:#fff; }

/* ---------- Schwebende Elemente ---------- */
.float-island{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:var(--z-notification);
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem; border-radius:var(--radius-full);
  background:rgba(26,0,51,.7); backdrop-filter:blur(var(--blur-lg));
  border:1px solid #ffffff1f;
  box-shadow:0 8px 40px #0000002e, 0 0 120px #9945ff33;
}
.float-island a,.float-island button{
  display:flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem; border-radius:var(--radius-full);
  background:transparent; border:0; color:var(--color-text-secondary);
  font-size:var(--text-xs); font-family:var(--font-mono); cursor:pointer;
  transition:all var(--duration-fast) var(--ease-out-expo);
}
.float-island a:hover,.float-island button:hover{ background:#ffffff14; color:#fff; }
.float-island .prime{ background:var(--gradient-neon); color:#fff; font-weight:700; }
.float-island .prime:hover{ box-shadow:var(--shadow-glow); }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:var(--z-notification);
  width:48px; height:48px; border-radius:50%;
  background:rgba(26,0,51,.8); border:1px solid #ffffff1f; color:#fff;
  backdrop-filter:blur(var(--blur-md)); cursor:pointer;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--duration-normal) var(--ease-out-expo),
             transform var(--duration-normal) var(--ease-out-expo);
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.to-top svg circle.track{ stroke:#ffffff1f; }
.to-top svg circle.bar{ stroke:var(--color-neon-purple); transition:stroke-dashoffset .1s linear; }

/* ---------- Reveal beim Scrollen ---------- */
.reveal{ opacity:0; transform:translateY(30px); }
.reveal.in{ animation:fadeInUp var(--duration-slower) var(--ease-out-expo) both; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero-grid,.about-grid,.panel-grid,.contact-grid{ grid-template-columns:1fr; }
  .client{ grid-template-columns:60px 1.3fr 1fr 110px; }
  .client .badge{ grid-column:4; }
  .client-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:flex; }
  .offer-grid{ grid-template-columns:1fr; }
  .client{ grid-template-columns:1fr auto; row-gap:.3rem; }
  .client .year{ grid-column:1; } .client .name{ grid-column:1; }
  .client .type{ grid-column:1; } .client .metric{ grid-column:2; text-align:right; }
  .client .badge{ grid-column:2; justify-self:end; }
  .stats{ grid-template-columns:1fr; }
  .two{ grid-template-columns:1fr; }
  .float-island{ width:calc(100% - 32px); justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .code-window{ animation:none; }
}

/* ===================== RECHTSSEITEN ===================== */
.legal{
  max-width: 78ch;
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-3xl);
}
.legal h1{
  font-size: var(--text-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: var(--space-sm);
}
.legal h2{
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.legal p,
.legal li{
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-top: var(--space-md);
}
.legal .legal-lead{
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin-top: var(--space-lg);
}
.legal ul{
  margin-top: var(--space-md);
  padding-left: 1.25rem;
  list-style: disc;
}
.legal li{ margin-top: var(--space-xs); }
.legal .adresse{
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(153, 69, 255, 0.05);
  line-height: 1.9;
  color: var(--color-text-primary);
}
.legal a{
  color: var(--color-neon-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover{ color: #fff; }
.legal .legal-stand{
  font-size: var(--text-sm);
  opacity: 0.7;
}
.legal .legal-zurueck{
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.legal .legal-zurueck a{ text-decoration: none; }

/* ===================== COOKIE-BANNER ===================== */
.cookie-box{
  position: fixed;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 9999;
  margin-inline: auto;
  max-width: 34rem;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(26, 0, 51, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.cookie-box.offen{ opacity: 1; transform: none; }
.cookie-box:focus{ outline: none; }
.cookie-titel{
  font-weight: 700;
  color: var(--color-text-primary);
}
.cookie-text{
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.cookie-text a{ color: var(--color-neon-purple); }
.cookie-knoepfe{
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
/* Beide Knoepfe gleich gewichtet. Ein auffaelliger Zustimmen-Knopf neben
   einem blassen Ablehnen-Knopf gilt als unzulaessige Beeinflussung. */
.cookie-knopf{
  flex: 1;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  padding: .75rem 1rem;
  border: 1px solid #b98cff66;
  border-radius: var(--radius-full);
  background: #9945ff26;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.cookie-knopf:hover{ background: #9945ff40; border-color: #b98cffaa; }
.cookie-knopf:focus-visible{
  outline: none; border-color: var(--color-neon-purple);
  box-shadow: 0 0 0 4px #9945ff33;
}

/* Uebersicht des tatsaechlich Gespeicherten */
.cookie-details{ margin-top: var(--space-md); }
.cookie-details summary{
  cursor: pointer;
  font-size: var(--text-xs);
  color: #b98cff;
  padding: .2rem 0;
}
.cookie-details summary:focus-visible{ outline: 2px solid var(--color-neon-purple); outline-offset: 2px; }
.cookie-gruppe{
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-primary);
}
.cookie-liste{
  margin: .3rem 0 0; padding-left: 1.1rem;
  font-size: var(--text-xs); line-height: 1.6;
  color: var(--color-text-secondary);
}
.cookie-liste li{ margin-top: .3rem; }
.cookie-liste b{ color: #fff; font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 30rem){
  .cookie-knoepfe{ flex-direction: column; }
}
/* Solange das Banner offen ist, treten die schwebenden Elemente zurueck,
   sonst liegen sie ueber den Knoepfen und fangen die Klicks ab. */
html.cookie-offen .float-island,
html.cookie-offen .to-top{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce){
  .cookie-box{ transition: none; }
}