/**
 * main.css
 * ----------------------------------------------------------------------------
 * Haupt-Stylesheet fuer die Startseite (index.php).
 * Enthaelt: Grund-Layout, Loader-Screen, Navigation, Sections, Skill-Bars,
 * Homelab-Karten und Terminal-Komponente.
 *
 * Farbkonzept: Cyberpunk / Retro-Terminal (Neon-Gruen #00ff9f, Cyan #00ffff).
 * ----------------------------------------------------------------------------
 */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* HTML hidden-Attribut hart erzwingen.
   Wichtig fuer Mini-Game-Overlays (.reaction-overlay, .hacker-overlay,
   .bug-overlay etc.), die explizites `display: flex` haben und sonst
   das Browser-Default `[hidden] { display: none }` ueberschreiben. */
[hidden] { display: none !important; }

/* ==========================================================================
   Grundlayout
   ========================================================================== */
body {
  margin: 0;
  background: radial-gradient(circle at top, #050505, #000);
  color: #00ff9f;
  font-family: 'Share Tech Mono', 'Apple Color Emoji', 'Segoe UI Emoji',
               'Noto Color Emoji', 'Twemoji Mozilla', monospace;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Loader-Screen (wird nach Boot-Sequenz ausgeblendet)
   ========================================================================== */
#loader {
  position: fixed;
  inset: 0;
  background: black;
  color: #00ff9f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  text-align: center;
}

#log {
  white-space: pre-line;
  margin-bottom: 20px;
}

.coffee-wrap {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
}

.coffee {
  font-size: 44px;
  animation: steam 1s infinite ease-in-out;
  filter: drop-shadow(0 0 8px #00ff9f) drop-shadow(0 0 14px rgba(0,255,159,0.6));
  -webkit-font-smoothing: antialiased;
}

@keyframes steam {
  0%   { transform: translateY(0);   opacity: 0.6; }
  50%  { transform: translateY(-8px); opacity: 1;   }
  100% { transform: translateY(0);   opacity: 0.6; }
}

.loader-bar {
  width: 320px;
  height: 12px;
  border: 1px solid #00ff9f;
}

.loader-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ff9f, #00ffff, #ff00ff);
  box-shadow: 0 0 12px #00ff9f;
  transition: width 0.2s;
  overflow: hidden;
}

/* Shimmer-Sweep ON TOP of the deterministic fill: gleitender Highlight,
   `screen`-Blend laesst den Sweep additiv ueber den Gradient laufen,
   ohne die echte Progress-Anzeige zu maskieren. */
.loader-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: loader-shimmer 1.6s linear infinite;
}

@keyframes loader-shimmer {
  from { left: -40%; }
  to   { left: 100%;  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-fill::after { animation: none; opacity: 0; }
}

#press {
  margin-top: 20px;
  opacity: 0.7;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.2; }
}

/* ==========================================================================
   Haupt-Container & Ueberschrift
   ========================================================================== */
.container {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  padding-right: 220px; /* Platz fuer fixierte Nav rechts */
}

/* Matrix-Regen links/rechts vom Content – strikt ausserhalb der Text-
   und Block-Flaechen. Nav (z-index 1000) deckt den rechten Streifen
   oben ab, das ist beabsichtigt. */
#matrixRainLeft,
#matrixRainRight {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

#matrixRainLeft {
  left: 0;
  width: calc((100vw - 1000px) / 2 - 16px);
}

/* Rechte Spalte = Luecke zwischen Section-Ende (Container-right - 220px
   padding) und Viewport-Rand, minus kleiner Abstand. */
#matrixRainRight {
  right: 0;
  width: calc((100vw - 1000px) / 2 + 220px - 16px);
}

@media (max-width: 1100px) {
  #matrixRainLeft,
  #matrixRainRight { display: none; }
}

@media (max-width: 960px) {
  .container { padding-right: 40px; }
}

.glitch {
  font-size: 44px;
  font-weight: bold;
  animation: flicker 2s infinite;
  color: #00ffff;
  text-shadow: 0 0 12px #00ffff;
}

@keyframes flicker {
  0%   { opacity: 1;   }
  50%  { opacity: 0.6; }
  100% { opacity: 1;   }
}

/* ==========================================================================
   Navigation (fixiert oben rechts, Overlay)
   ========================================================================== */
.nav {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 200px;
  padding: 0;
  border: 1px solid #00ff9f;
  background: linear-gradient(180deg, rgba(0,20,14,0.95), rgba(0,0,0,0.95));
  box-shadow: 0 0 22px rgba(0,255,159,0.22), inset 0 0 10px rgba(0,255,159,0.05);
  z-index: 1000;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow: hidden;
}

/* Fenster-Kopf mit Ampel-Dots – analog zum Command-Reiter */
.nav-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0,255,159,0.08);
  border-bottom: 1px solid rgba(0,255,159,0.35);
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff9f;
  box-shadow: 0 0 6px #00ff9f;
}
.nav-dot.yellow { background: #ffd700; box-shadow: 0 0 6px #ffd700; }
.nav-dot.cyan   { background: #00ffff; box-shadow: 0 0 6px #00ffff; }

.nav-title {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #00ffff;
  text-shadow: 0 0 4px rgba(0,255,255,0.4);
}

.nav-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 12px;
}

.nav a,
.nav button {
  position: relative;
  background: rgba(0,0,0,0.55);
  color: #00ff9f;
  border: 1px solid rgba(0,255,159,0.35);
  border-left: 2px solid transparent;
  padding: 9px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: left;
  display: block;
  min-height: 38px;
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: rgba(0, 255, 159, 0.3);
  touch-action: manipulation;
}

.nav a:hover,
.nav button:hover,
.nav a:active,
.nav button:active,
.nav a:focus-visible {
  background: rgba(0,255,159,0.12);
  border-color: #00ff9f;
  border-left-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 10px rgba(0,255,159,0.25);
  transform: translateX(-2px);
  outline: none;
}

/* Mobile: Navigation nicht mehr fixiert rechts (blockiert Content),
   sondern als horizontal scrollbare Leiste oben. */
@media (max-width: 720px) {
  .nav {
    position: static;
    width: auto;
    top: auto;
    right: auto;
    margin: 10px;
  }
  .nav-body {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-body a,
  .nav-body button {
    flex: 1 1 auto;
    font-size: 12px;
    padding: 10px 12px;
  }
  .container {
    padding: 16px;
  }
  .glitch {
    font-size: 28px;
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */
/* ==========================================================================
   Hero-Section: grosser Name, Claim, 2 CTAs – setzt die Hierarchie.
   ========================================================================== */
.hero {
  margin: 32px 0 24px;
  padding: 36px 28px 34px;
  border: 1px solid rgba(0,255,159,0.45);
  background:
    linear-gradient(180deg, rgba(0,25,18,0.6), rgba(0,0,0,0.55));
  box-shadow: 0 0 26px rgba(0,255,159,0.15), inset 0 0 18px rgba(0,255,159,0.05);
  position: relative;
  overflow: hidden;
}

/* Dezenter animierter Scanline-Sweep im Hero-Hintergrund */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,159,0.035) 0 1px,
    transparent 1px 4px);
  pointer-events: none;
  animation: hero-scan 6s linear infinite;
}

@keyframes hero-scan {
  0%   { transform: translateY(-40px); }
  100% { transform: translateY(40px); }
}

.hero-tag {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 3px;
  color: #00ff9f;
  text-shadow: 0 0 4px rgba(0,255,159,0.55);
}

.hero-name {
  margin: 0 0 10px;
  font-size: clamp(34px, 5.5vw, 56px);
  letter-spacing: 3px;
  color: #00ffff;
  text-shadow:
    0 0 10px rgba(0,255,255,0.6),
    0 0 28px rgba(0,255,255,0.25);
  line-height: 1.05;
}

.hero-role {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 1.5px;
}

.hero-role-chip {
  padding: 4px 10px;
  border: 1px solid rgba(255,79,228,0.6);
  color: #ff4fe4;
  background: rgba(255,79,228,0.06);
  text-shadow: 0 0 4px rgba(255,79,228,0.4);
}

.hero-sep { color: rgba(0,255,159,0.4); }

.hero-claim {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: #cfffe8;
}

@media (max-width: 720px) {
  .hero { padding: 24px 18px; }
  .hero-claim { font-size: 15px; }
}

.section {
  margin-top: 56px;
  border-left: 2px solid #00ff9f;
  padding: 6px 0 8px 22px;
  animation: slideIn 1s ease;
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Klarere Hierarchie: groessere, hellere H2 + mehr Abstand darunter */
h2 {
  color: #00ffff;
  font-size: 26px;
  letter-spacing: 2px;
  margin: 0 0 18px;
  text-shadow: 0 0 6px #00ffff55, 0 0 18px rgba(0,255,255,0.18);
}

h3 {
  font-size: 18px;
  letter-spacing: 0.5px;
  margin: 16px 0 6px;
}

.section .section-cta {
  margin-top: 20px;
}

.section pre,
.section p {
  font-size: 17px;
  line-height: 1.55;
}

/* Emojis in Headings, Pre-Bloecken und Homelab-Karten mit dezentem Glow
   und leicht groesserem Rendering – sorgt fuer hoehere Qualitaet. */
h2, h3,
.section pre,
.homelab h3,
.homelab p {
  filter: drop-shadow(0 0 3px rgba(0,255,159,0.35));
}

.homelab h3,
.homelab p {
  filter: none;
}

h2 { font-size: 26px; }
h3 { font-size: 19px; }

/* Untertitel im "Über mich"-Bereich in Pink – dezenter Glow */
#ueber-mich h3,
#bio h3 {
  color: #ff4fe4;
  text-shadow: 0 0 4px rgba(255,79,228,0.25);
  filter: none;
}

/* ==========================================================================
   Skills-Matrix (Row-Layout: Skill+Bar links, Tools rechts)
   ----------------------------------------------------------------------------
   Konsolidiert die fruehere Card-Grid-Variante UND den Tech-Stack-Bereich
   in #system: jede Row zeigt jetzt das zugehoerige Tooling rechts.
   ========================================================================== */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.skill-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 14px 18px;
  border: 1px solid rgba(0,255,159,0.35);
  background: linear-gradient(135deg, rgba(0,255,159,0.06), rgba(0,255,255,0.03));
  box-shadow: 0 0 10px rgba(0,255,159,0.08), inset 0 0 6px rgba(0,255,159,0.04);
}

/* Eck-Akzent oben rechts (matched zu Skill-Card-Look) */
.skill-row::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-top: 10px solid #00ff9f;
  border-left: 10px solid transparent;
  opacity: 0.7;
}

.skill-row:hover {
  border-color: #00ffff;
  box-shadow: 0 0 14px rgba(0,255,255,0.25);
}

/* Linke Haelfte: Skill-Head + Bar */
.skill-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.skill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  letter-spacing: 1.5px;
}

.skill-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 4px rgba(0,255,159,0.4));
}

.skill-label {
  flex: 1;
  color: #00ff9f;
  text-transform: uppercase;
}

.skill-pct {
  font-size: 15px;
  color: #00ffff;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,255,255,0.4);
}

.skill-bar {
  background: #0a0e0c;
  border: 1px solid rgba(0,255,159,0.55);
  height: 12px;
  margin: 0;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

.skill-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00ff9f, #00ffff);
  transition: width 1.5s ease;
  box-shadow: 0 0 8px rgba(0,255,159,0.5);
}

/* Rechte Haelfte: Tooling als gestaffelte Terminal-Output-Liste.
   Jede Zeile mit einem cyan glow-prompt "›" - matched zum Look der
   Command-Rail-Eintraege. Kein Border, kein Chip. */
.skill-right {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
}

.skill-right li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  color: #cfffe8;
  transition: color 0.18s, text-shadow 0.18s;
}

.skill-right li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-cyan);
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,255,255,0.4);
  transition: color 0.18s, text-shadow 0.18s;
}

/* Mini-Header: 3 Ampel-Dots (gruen / gelb / pink) ueber der Tool-Liste,
   Pattern matched zu .nav-header / .cr-header. Kein ›-Prompt. */
.skill-right .skill-right-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  margin-bottom: 6px;
}

.skill-right .skill-right-head::before { content: none; }

.skill-right .skill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 5px var(--c-green);
}
.skill-right .skill-dot.yellow {
  background: var(--c-gold);
  box-shadow: 0 0 5px var(--c-gold);
}
.skill-right .skill-dot.pink {
  background: var(--c-pink);
  box-shadow: 0 0 5px var(--c-pink);
}

/* Card-Hover: Liste leicht heller, Prompts wechseln auf Pink -> matched
   zum kombinierten Cyan/Pink-Akzent der gehoverten Row. */
.skill-row:hover .skill-right li {
  color: #e8feff;
  text-shadow: 0 0 4px rgba(0,255,255,0.22);
}
.skill-row:hover .skill-right li::before {
  color: var(--c-pink);
  text-shadow: 0 0 5px rgba(255,79,228,0.5);
}

@media (max-width: 600px) {
  .skill-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .skill-right li { font-size: 12.5px; padding-left: 16px; }
}

/* ==========================================================================
   Homelab-Karten
   ========================================================================== */
/* ==========================================================================
   Projekt-Karten: modernes SaaS-Card-Layout (Vercel/Notion/Linear-Vibe)
   Hierarchie: Badge → Spacing → Title → Desc → Stack → Action
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: 1fr; }
}

.project-card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(255,215,0,0.06), rgba(255,215,0,0.02));
  border: 1px solid #ffd700;
  border-radius: 0;
  box-shadow:
    0 0 18px rgba(255,215,0,0.15),
    inset 0 0 10px rgba(255,215,0,0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: #fff4aa;
  box-shadow:
    0 0 26px rgba(255,215,0,0.35),
    inset 0 0 14px rgba(255,215,0,0.08);
}

/* Status-Badge oben – pill-shaped, farbkodiert */
.project-card .pc-top {
  margin-bottom: 18px;
}

/* Badges einheitlich wie die pinken Hero-Role-Chips
   (ICT POWER USER / ICT PROFESSIONAL): kantig, Share-Tech-Mono, pink. */
.project-card .pc-badge,
.pc-badge-blue,
.pc-badge-green,
.pc-badge-pink {
  display: inline-block;
  padding: 4px 10px;
  font-family: 'Share Tech Mono', 'Apple Color Emoji', 'Segoe UI Emoji',
               'Noto Color Emoji', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid rgba(255,79,228,0.6);
  color: #ff4fe4;
  background: rgba(255,79,228,0.06);
  text-shadow: 0 0 4px rgba(255,79,228,0.4);
  border-radius: 0;
  white-space: nowrap;
}

.project-card .pc-badge::before { content: none; }

/* Title + Description */
.project-card .pc-body {
  flex: 1;
}

.project-card .pc-title {
  margin: 0 0 10px;
  font-family: 'Share Tech Mono', 'Apple Color Emoji', 'Segoe UI Emoji', monospace;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255,215,0,0.35);
}

.project-card .pc-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #fff2b0;
  max-width: 42ch;
}

/* Tech-Stack-Chips */
.project-card .pc-stack {
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-card .pc-stack li {
  padding: 3px 9px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: #ffe066;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 0;
}

/* Action-Link */
.project-card .pc-actions {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.project-card .pc-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #ffd700;
  background: rgba(255,215,0,0.06);
  border: 1px solid #ffd700;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out),
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.25s;
  /* Subtiler Resting-Pulse -> "klick mich"-Affordanz ohne Aufdringlichkeit */
  animation: pc-action-pulse 3.5s ease-in-out infinite;
}

@keyframes pc-action-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
  50%      { box-shadow: 0 0 12px rgba(255,215,0,0.32); }
}

.project-card .pc-action:hover,
.project-card .pc-action:focus-visible {
  background: rgba(255,215,0,0.22);
  border-color: #fff4aa;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255,215,0,0.55), 0 6px 14px rgba(0,0,0,0.4);
  animation: none;     /* Pulse pausieren waehrend Hover */
  outline: none;
}

/* Pfeil: dezent tappend in Ruhe, schiesst nach rechts bei Hover. */
.project-card .pc-action span {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
  animation: pc-arrow-tap 2.4s ease-in-out infinite;
}
.project-card .pc-action:hover span,
.project-card .pc-action:focus-visible span {
  transform: translateX(5px);
  animation: none;
}

@keyframes pc-arrow-tap {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

/* Disabled-Variante: keine Affordanz, kein Pulse, kein Tap. */
.project-card .pc-action-disabled {
  color: rgba(255,215,0,0.45);
  background: transparent;
  border: 1px dashed rgba(255,215,0,0.45);
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}
.project-card .pc-action-disabled:hover,
.project-card .pc-action-disabled:focus-visible {
  background: transparent;
  border-color: rgba(255,215,0,0.45);
  color: rgba(255,215,0,0.45);
  transform: none;
  box-shadow: none;
  animation: none;
}
.project-card .pc-action-disabled span { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .project-card .pc-action,
  .project-card .pc-action span { animation: none; }
}

.homelab {
  border: 1px solid #ffd700;
  padding: 14px;
  margin-top: 12px;
  background: rgba(255, 215, 0, 0.06);
  box-shadow: 0 0 25px #ffd70022;
}

.homelab h3 {
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255,215,0,0.3);
}

.homelab a {
  color: #ffd700;
  text-decoration: underline dotted;
}

.homelab a:hover {
  color: #fff;
}


/* Inline-Text-Links: gelb + unterstrichen (Button-Klassen bleiben ausgenommen) */
a.inline-link,
.section a:not(.cmd-btn):not(.pc-action) {
  color: yellow;
  text-decoration: underline;
}

/* Contact-Liste: Telefon & Mail in Weiss mit dezentem Unterstrich.
   Spezifitaet via #contact -> beats `.section a:not(.cmd-btn):not(.pc-action)`. */
#contact .contact-list a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: none;
  transition: text-decoration-color 0.15s;
}
#contact .contact-list a:hover,
#contact .contact-list a:focus-visible {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.9);
  outline: none;
}

/* ==========================================================================
   Command-Button: Terminal-Stil mit Neon-Rahmen + "> [ LABEL ]"-Look
   ========================================================================== */
.cmd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Share Tech Mono', 'Apple Color Emoji', 'Segoe UI Emoji',
               'Noto Color Emoji', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00ff9f;
  text-decoration: none;
  padding: 10px 16px;
  border: 1.5px solid #00ff9f;
  border-radius: 4px;
  background: rgba(0, 255, 159, 0.05);
  box-shadow:
    0 0 6px rgba(0,255,159,0.25),
    inset 0 0 6px rgba(0,255,159,0.06);
  text-shadow: 0 0 3px rgba(0,255,159,0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s,
              box-shadow 0.2s, transform 0.1s;
}

/* Linker Prompt "> [" mit blinkendem '>'. */
.cmd-btn::before {
  content: "> [";
  color: #00ffff;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,255,255,0.5);
  animation: cmd-blink 1.1s steps(2, start) infinite;
}

/* Rechte Klammer */
.cmd-btn::after {
  content: "]";
  color: #00ffff;
  opacity: 0.85;
  font-weight: bold;
}

.cmd-btn:hover,
.cmd-btn:focus-visible {
  color: #00ffff;
  background: rgba(0, 255, 159, 0.18);
  border-color: #00ffff;
  box-shadow:
    0 0 14px rgba(0,255,255,0.55),
    0 0 22px rgba(0,255,159,0.25),
    inset 0 0 10px rgba(0,255,255,0.1);
  transform: translateX(2px);
  outline: none;
}

.cmd-btn:hover::before,
.cmd-btn:focus-visible::before {
  color: #ff4fe4;
  text-shadow: 0 0 6px rgba(255,79,228,0.5);
}

.cmd-btn:active {
  transform: translateY(1px);
}

@keyframes cmd-blink {
  50% { opacity: 0.25; }
}

/* Goldene Variante passend zu Homelab-Karten */
.homelab .cmd-btn {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(255,215,0,0.06);
  box-shadow: inset 0 0 6px rgba(255,215,0,0.08);
}
.homelab .cmd-btn::before { color: #ffd700; }
.homelab .cmd-btn::after  { color: #ffd700; opacity: 0.7; }

.homelab .cmd-btn:hover,
.homelab .cmd-btn:focus-visible {
  color: #fff;
  background: rgba(255,215,0,0.22);
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,215,0,0.45);
}
.homelab .cmd-btn:hover::before { color: #fff; }

/* ==========================================================================
   Terminal-Komponente
   ========================================================================== */
/* ==========================================================================
   Contact-Sektion: Daten + Formular in Neon-Blau-Karten
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.contact-card {
  position: relative;
  padding: 18px 20px 20px;
  background: linear-gradient(135deg, rgba(0,170,255,0.10), rgba(0,120,255,0.04));
  border: 1px solid #3cc8ff;
  box-shadow: 0 0 14px rgba(60,200,255,0.2), inset 0 0 10px rgba(60,200,255,0.06);
  color: #cbeeff;
}

/* Ecken-Akzent oben rechts (wie bei den Game-Cards) */
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-top: 14px solid #3cc8ff;
  border-left: 14px solid transparent;
  opacity: 0.9;
}

.contact-label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #3cc8ff;
  text-shadow: 0 0 4px rgba(60,200,255,0.35);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(60,200,255,0.35);
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.contact-list .ci-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 3px rgba(60,200,255,0.4));
}

/* Formular */
.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #3cc8ff;
  margin: 8px 0 4px;
}

.contact-form input,
.contact-form textarea {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(60,200,255,0.55);
  color: #cbeeff;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #3cc8ff;
  box-shadow: 0 0 8px rgba(60,200,255,0.45), inset 0 0 6px rgba(60,200,255,0.1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(203,238,255,0.35);
  font-style: italic;
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form button {
  margin-top: 14px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #3cc8ff;
  color: #3cc8ff;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 10px 14px;
  cursor: pointer;
  text-shadow: 0 0 4px rgba(60,200,255,0.4);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.contact-form button:hover {
  background: #3cc8ff;
  color: #001018;
  box-shadow: 0 0 12px #3cc8ff;
}

/* ==========================================================================
   Arcade-Terminal-Abschnitt
   ========================================================================== */
#terminal h2 .term-sub {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  color: #ff4fe4;
  letter-spacing: 2px;
  text-shadow: 0 0 4px rgba(255,79,228,0.3);
}

#terminal .term-intro {
  margin: 0 0 14px;
  color: #aaffd4;
  font-size: 15px;
}

#terminal .term-intro strong {
  color: #00ffff;
  text-shadow: 0 0 4px rgba(0,255,255,0.3);
}

/* Arcade-Bereich: Launcher + Terminal links, Command-Reiter rechts */
.arcade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: start;
}

.arcade-main { min-width: 0; }

@media (max-width: 860px) {
  .arcade-layout {
    grid-template-columns: 1fr;
  }
  .command-rail { order: 2; }
}

/* Command-Reiter (seitlich, Fenster-Optik) */
.command-rail {
  position: sticky;
  top: 20px;
  border: 1px solid #ff4fe4;
  background: linear-gradient(180deg, rgba(40,0,30,0.55), rgba(0,0,0,0.85));
  box-shadow: 0 0 16px rgba(255,79,228,0.18), inset 0 0 10px rgba(255,79,228,0.06);
  color: #ffcdf0;
  font-size: 13px;
}

.cr-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,79,228,0.35);
  background: rgba(255,79,228,0.08);
}

.cr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4fe4;
  box-shadow: 0 0 6px #ff4fe4;
}
.cr-dot.yellow { background: #ffd700; box-shadow: 0 0 6px #ffd700; }
.cr-dot.pink   { background: #00ffff; box-shadow: 0 0 6px #00ffff; }

.cr-title {
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff4fe4;
  text-shadow: 0 0 4px rgba(255,79,228,0.4);
}

.cr-list {
  list-style: none;
  margin: 0;
  padding: 8px 6px 10px;
}

.cr-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.cr-list li:hover {
  background: rgba(255,79,228,0.1);
  border-left-color: #ff4fe4;
  transform: translateX(2px);
}

.cr-list li.cr-sep {
  cursor: default;
  color: rgba(255,79,228,0.5);
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 10px 0 4px;
}
.cr-list li.cr-sep:hover {
  background: transparent;
  border-left-color: transparent;
  transform: none;
}

.cr-cmd {
  color: #00ffff;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,255,255,0.35);
}
.cr-list li.cr-game .cr-cmd { color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,0.4); }

.cr-desc {
  font-size: 11px;
  color: rgba(255,205,240,0.75);
  letter-spacing: 0.5px;
}

.cr-hint {
  padding: 8px 12px;
  font-size: 11px;
  color: rgba(255,205,240,0.55);
  border-top: 1px dashed rgba(255,79,228,0.3);
  font-style: italic;
}

/* ==========================================================================
   Responsive Game Grid (mobile-first)
   ----------------------------------------------------------------------------
   Default: 1 Spalte (Phone). Ab 480 px Auto-Fit-Cards mit min 220 px,
   ab 960 px etwas mehr Gap. Card-Innenpadding wird im 720-px-Block
   weiter unten getrimmt.
   ========================================================================== */
.game-launcher {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 20px;
}

@media (min-width: 480px) {
  .game-launcher {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
}

@media (min-width: 960px) {
  .game-launcher {
    gap: 18px;
  }
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0,255,159,0.08), rgba(0,255,255,0.05));
  border: 1px solid #00ff9f;
  color: #00ff9f;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 0 12px rgba(0,255,159,0.15), inset 0 0 8px rgba(0,255,159,0.05);
  transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
  -webkit-tap-highlight-color: rgba(0,255,159,0.3);
}

.game-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-top: 12px solid #00ff9f;
  border-left: 12px solid transparent;
  opacity: 0.8;
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0,255,159,0.18), rgba(0,255,255,0.12));
  box-shadow: 0 0 18px rgba(0,255,159,0.35);
  outline: none;
}

.game-card .game-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 4px currentColor);
}

.game-card .game-title {
  font-size: 17px;
  letter-spacing: 2px;
  color: #00ffff;
  text-shadow: 0 0 4px rgba(0,255,255,0.4);
}

.game-card .game-desc {
  font-size: 13px;
  color: #cfffe8;
  opacity: 0.85;
}

.game-card .game-cmd {
  margin-top: 4px;
  font-size: 12px;
  color: #ffd700;
  letter-spacing: 1px;
}

.game-card.tetris {
  border-color: #ff4fe4;
  color: #ff4fe4;
  background: linear-gradient(135deg, rgba(255,79,228,0.1), rgba(108,90,205,0.06));
  box-shadow: 0 0 12px rgba(255,79,228,0.2), inset 0 0 8px rgba(255,79,228,0.05);
}

.game-card.tetris::before { border-top-color: #ff4fe4; }

.game-card.tetris .game-title { color: #ff4fe4; }

.game-card.tetris:hover,
.game-card.tetris:focus-visible {
  background: linear-gradient(135deg, rgba(255,79,228,0.22), rgba(108,90,205,0.14));
  box-shadow: 0 0 18px rgba(255,79,228,0.4);
}

/* --------------------------------------------------------------------------
   Hover-Glow-Layer (subtiler radialer Akzent von oben links)
   `mix-blend-mode: screen` haellt Text und Icon lesbar -- Gradient legt
   sich nur additiv ueber dunkle Bereiche.
   `::before` ist durch den Eck-Notch belegt, daher ::after.
   -------------------------------------------------------------------------- */
.game-card { isolation: isolate; }

.game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(0,255,159,0.22),
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity var(--dur-slow) var(--ease-out);
  z-index: 0;
}

.game-card:hover::after,
.game-card:focus-visible::after {
  opacity: 1;
}

/* Per-Variant: Glow-Farbe matched dem Card-Akzent. */
.game-card.tetris::after {
  background: radial-gradient(circle at top left, rgba(255,79,228,0.22), transparent 60%);
}
.game-card.snake::after {
  background: radial-gradient(circle at top left, rgba(0,255,255,0.22), transparent 60%);
}
.game-card.hacker::after {
  background: radial-gradient(circle at top left, rgba(255,215,0,0.22), transparent 60%);
}
.game-card.reaction::after {
  background: radial-gradient(circle at top left, rgba(60,200,255,0.22), transparent 60%);
}
/* .game-card.bug behaelt den Default-Gruen-Glow. */

@media (prefers-reduced-motion: reduce) {
  .game-card::after { transition: none; }
}

.terminal {
  margin-top: 20px;
  border: 1px solid #00ff9f;
  padding: 15px;
  background: #000;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#output {
  white-space: pre-line;
  min-height: 120px;
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: #00ff9f #050505;
}

.input-line {
  flex: 0 0 auto;
}

/* Webkit/Blink Scrollbars im Terminal – Neon-Look passend zur Seite */
.terminal::-webkit-scrollbar,
#output::-webkit-scrollbar {
  width: 10px;
}

.terminal::-webkit-scrollbar-track,
#output::-webkit-scrollbar-track {
  background: #050505;
  border-left: 1px solid #00ff9f33;
}

.terminal::-webkit-scrollbar-thumb,
#output::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ff9f, #00ffff);
  border: 1px solid #00ff9f;
  box-shadow: 0 0 8px #00ff9f88, inset 0 0 4px #000;
}

.terminal::-webkit-scrollbar-thumb:hover,
#output::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ffff, #ff00ff);
  box-shadow: 0 0 12px #00ffffcc;
}

.terminal::-webkit-scrollbar-corner,
#output::-webkit-scrollbar-corner {
  background: #000;
}

.input-line {
  display: flex;
  align-items: center;
}

.prompt {
  color: #00ff9f;
  margin-right: 8px;
}

#cmdInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #00ff9f;
  font-family: inherit;
}

#cmdInput::placeholder {
  color: rgba(0,255,159,0.35);
  font-style: italic;
}

/* ==========================================================================
   Space Invaders Mini-Game (per Terminal-Befehl 'invaders')
   ========================================================================== */
.invaders-wrap {
  margin-top: 24px;
  padding: 14px;
  border: 1px solid #00ffff;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 22px #00ffff33, inset 0 0 18px #00ff9f22;
}

.invaders-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: #ffd700;
  text-shadow: 0 0 6px #ffd70088;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 1px;
}

.invaders-hud button {
  margin-left: auto;
  background: black;
  color: #ff00ff;
  border: 1px solid #ff00ff;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  text-shadow: 0 0 4px #ff00ff;
}

.invaders-hud button:hover {
  background: #ff00ff;
  color: black;
}

#invCanvas,
#tetCanvas,
#snkCanvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  background: #000;
  border: 1px solid #00ff9f;
  box-shadow: 0 0 18px #00ff9f55;
  image-rendering: pixelated;
}

#tetCanvas {
  max-width: 320px;
  border-color: #ff4fe4;
  box-shadow: 0 0 18px rgba(255,79,228,0.45);
}

#snkCanvas {
  max-width: 480px;
  border-color: #00ffff;
  box-shadow: 0 0 18px rgba(0,255,255,0.45);
}

.tetris-wrap {
  border-color: #ff4fe4;
  box-shadow: 0 0 22px rgba(255,79,228,0.25), inset 0 0 18px rgba(0,255,159,0.12);
}

.snake-wrap {
  border-color: #00ffff;
  box-shadow: 0 0 22px rgba(0,255,255,0.22), inset 0 0 18px rgba(0,255,159,0.1);
}

/* Snake Game-Card in Cyan */
.game-card.snake {
  border-color: #00ffff;
  color: #00ffff;
  background: linear-gradient(135deg, rgba(0,255,255,0.12), rgba(0,255,159,0.05));
  box-shadow: 0 0 12px rgba(0,255,255,0.2), inset 0 0 8px rgba(0,255,255,0.05);
}

.game-card.snake::before { border-top-color: #00ffff; }

.game-card.snake .game-title { color: #00ffff; }

.game-card.snake:hover,
.game-card.snake:focus-visible {
  background: linear-gradient(135deg, rgba(0,255,255,0.22), rgba(0,255,159,0.12));
  box-shadow: 0 0 18px rgba(0,255,255,0.4);
}

.invaders-controls {
  display: none;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.invaders-controls button {
  flex: 1;
  max-width: 110px;
  min-height: 52px;
  background: black;
  color: #00ff9f;
  border: 1px solid #00ff9f;
  font-family: inherit;
  font-size: 18px;
  text-shadow: 0 0 6px #00ff9f;
  box-shadow: 0 0 10px #00ff9f44;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,255,159,0.3);
  touch-action: manipulation;
  user-select: none;
}

.invaders-controls button:active {
  background: #00ff9f;
  color: black;
}

.invaders-hint {
  text-align: center;
  color: #00ff9f99;
  font-size: 12px;
  margin-top: 10px;
}

/* Touch-Controls nur auf Mobile einblenden. */
@media (hover: none), (max-width: 720px) {
  .invaders-controls { display: flex; }
}

/* ==========================================================================
   Terminal Hacker Mini-Game
   ========================================================================== */

/* Launcher-Card (Gold-Akzent) */
.game-card.hacker {
  border-color: #ffd700;
  color: #ffd700;
  background: linear-gradient(135deg, rgba(255,215,0,0.10), rgba(255,79,228,0.04));
  box-shadow: 0 0 12px rgba(255,215,0,0.2), inset 0 0 8px rgba(255,215,0,0.05);
}
.game-card.hacker::before { border-top-color: #ffd700; }
.game-card.hacker .game-title { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.45); }
.game-card.hacker:hover,
.game-card.hacker:focus-visible {
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,79,228,0.1));
  box-shadow: 0 0 18px rgba(255,215,0,0.45);
}

/* Wrap-Container */
.hacker-wrap {
  border-color: #ffd700;
  box-shadow: 0 0 22px rgba(255,215,0,0.22), inset 0 0 18px rgba(0,255,159,0.08);
}

.hacker-screen {
  min-height: 260px;
  padding: 18px 14px;
  background: #000;
  border: 1px solid rgba(255,215,0,0.35);
  box-shadow: inset 0 0 22px rgba(0,255,159,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Start-/Game-Over-Overlay */
.hacker-overlay {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
}

.hacker-title {
  font-size: 22px;
  letter-spacing: 3px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,0.55);
}

.hacker-title--fail {
  color: #ff4fe4;
  text-shadow: 0 0 10px rgba(255,79,228,0.6);
  animation: hk-glitch 1.4s steps(6, end) 1;
}

.hacker-sub {
  margin: 0;
  color: #cfffe8;
  opacity: 0.85;
  line-height: 1.55;
  font-size: 14px;
}

.hacker-sub span { color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,0.4); }

.hacker-btn {
  background: black;
  color: #ffd700;
  border: 1px solid #ffd700;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(255,215,0,0.6);
  box-shadow: 0 0 10px rgba(255,215,0,0.25);
  transition: background 0.15s, color 0.15s, box-shadow 0.2s;
}
.hacker-btn:hover,
.hacker-btn:focus-visible {
  background: #ffd700;
  color: #000;
  box-shadow: 0 0 16px rgba(255,215,0,0.7);
  outline: none;
}

/* Spiel-Layout */
.hacker-game { display: flex; flex-direction: column; gap: 14px; }

/* Zeit-Balken */
.hk-bar {
  height: 8px;
  border: 1px solid rgba(255,215,0,0.6);
  background: rgba(255,215,0,0.08);
  overflow: hidden;
}
.hk-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00ff9f, #ffd700, #ff4fe4);
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
  transition: width 0.08s linear;
}

/* Ziel-Kommando */
.hk-target {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  padding: 10px 12px;
  border: 1px dashed rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.04);
  min-height: 40px;
  overflow-x: auto;
}
.hk-prompt {
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255,215,0,0.55);
  flex-shrink: 0;
}
.hk-cmd {
  color: #00ff9f;
  text-shadow: 0 0 6px rgba(0,255,159,0.45);
  letter-spacing: 1px;
  user-select: none;
  white-space: nowrap;
}

/* Eingabe */
.hk-input-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #00ff9f;
  background: #000;
  box-shadow: 0 0 10px rgba(0,255,159,0.15) inset;
}
#hkInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #00ff9f;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(0,255,159,0.4);
  caret-color: #00ff9f;
}
#hkInput::placeholder { color: rgba(0,255,159,0.4); }

/* Status-Zeile */
.hk-status {
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.hk-status--ok {
  color: #00ff9f;
  text-shadow: 0 0 8px rgba(0,255,159,0.6);
  opacity: 1;
  animation: hk-pulse 0.5s ease-out 1;
}
.hk-status--fail {
  color: #ff4fe4;
  text-shadow: 0 0 8px rgba(255,79,228,0.7);
  opacity: 1;
  animation: hk-glitch 0.5s steps(4, end) 1;
}

/* Shake bei Fehler */
.hk-shake { animation: hk-shake 0.45s cubic-bezier(.36,.07,.19,.97) 1; }

@keyframes hk-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

@keyframes hk-pulse {
  0%   { transform: scale(1);    opacity: 0.4; }
  50%  { transform: scale(1.08); opacity: 1;   }
  100% { transform: scale(1);    opacity: 1;   }
}

@keyframes hk-glitch {
  0%   { transform: translate(0);      filter: none; }
  25%  { transform: translate(-2px, 1px); filter: hue-rotate(15deg); }
  50%  { transform: translate(2px, -1px); filter: hue-rotate(-20deg); }
  75%  { transform: translate(-1px, -1px); filter: none; }
  100% { transform: translate(0);      filter: none; }
}

@media (max-width: 560px) {
  .hk-target { font-size: 16px; }
  #hkInput   { font-size: 15px; }
  .hacker-title { font-size: 18px; letter-spacing: 2px; }
}


/* ==========================================================================
   Line-Icons fuer Section-Titel (siehe includes/icon.php):
   Lucide-Stil, einheitliche Stroke-Width, dezent neongruen.
   ========================================================================== */
h2 .pix-ico {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: -6px;
  margin-right: 14px;
  color: #00ff9f;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(0,255,159,0.45));
  transition: opacity 0.2s, filter 0.2s, transform 0.2s;
  /* Kein pixelated/crispEdges – Lines sollen weich bleiben. */
}

h2:hover .pix-ico,
.section:hover h2 .pix-ico {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(0,255,159,0.85));
  transform: scale(1.05);
}

/* Responsiv: Icons skalieren mit den H2-Mobile-Stufen mit, damit das
   Verhaeltnis zur Schrift erhalten bleibt. */
@media (max-width: 720px) {
  h2 .pix-ico {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
    margin-right: 12px;
  }
}

@media (max-width: 480px) {
  h2 .pix-ico {
    width: 22px;
    height: 22px;
    vertical-align: -4px;
    margin-right: 10px;
  }
}


/* ==========================================================================
   Subtile Pixel-Animationen: Blinkcursor, Typewriter-Intro, Mini-Glitch
   ========================================================================== */

/* Blinkender Cursor im Prompt */
.prompt::after {
  content: "_";
  margin-left: 4px;
  color: #00ff9f;
  animation: caret-blink 1.05s steps(2, start) infinite;
  text-shadow: 0 0 4px rgba(0,255,159,0.5);
}

/* Zusaetzlicher Blink-Cursor nach einigen Ueberschriften/Intro-Texten */
.glitch::after,
#terminal .term-intro::after,
.cr-hint::after {
  content: "▌";
  display: inline-block;
  margin-left: 6px;
  color: #00ffff;
  animation: caret-blink 1.05s steps(2, start) infinite;
  text-shadow: 0 0 4px rgba(0,255,255,0.5);
}

.cr-hint::after { color: #ff4fe4; text-shadow: 0 0 4px rgba(255,79,228,0.5); }

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Typewriter-Intro: Text erscheint wie getippt (einmalig beim Laden).
   Funktioniert fuer einzeilige / kurze Elemente am besten. */
#terminal .term-intro {
  overflow: hidden;
  white-space: normal;
}
#terminal .term-intro > * { animation: none; }

.glitch {
  overflow: hidden;
  white-space: nowrap;
  animation:
    flicker 2s infinite,
    typewriter 1.6s steps(40, end) 0.2s 1 both;
}

@keyframes typewriter {
  from { max-width: 0; }
  to   { max-width: 100%; }
}

/* Dezenter Glitch-Effekt auf h2 beim Hover:
   Chromatische Aberration (Cyan/Magenta-Versatz) in kurzen Bursts. */
h2 {
  position: relative;
  transition: text-shadow 0.15s;
}
h2:hover {
  animation: micro-glitch 0.6s steps(3, end) 1;
}

@keyframes micro-glitch {
  0%   { text-shadow: 0 0 6px #00ffff33; transform: translateX(0); }
  20%  { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translateX(1px); }
  40%  { text-shadow:  2px 0 #ff00ff, -2px 0 #00ffff; transform: translateX(-1px); }
  60%  { text-shadow: -1px 0 #00ffff, 1px 0 #ff00ff; transform: translateX(0.5px); }
  100% { text-shadow: 0 0 6px #00ffff33; transform: translateX(0); }
}

/* Gelegentlicher Auto-Glitch auf dem Haupttitel – sehr dezent, alle ~7s.
   Reduce-Motion respektieren. */
.glitch {
  animation:
    flicker 2s infinite,
    typewriter 1.6s steps(40, end) 0.2s 1 both,
    auto-glitch 3s infinite 1.5s;
}

@keyframes auto-glitch {
  0%, 96%, 100% { text-shadow: 0 0 12px #00ffff; transform: translateX(0); }
  97%           { text-shadow: -2px 0 #ff00ff, 2px 0 #00ff9f; transform: translateX(1px); }
  98%           { text-shadow:  2px 0 #ff00ff, -2px 0 #00ff9f; transform: translateX(-1px); }
  99%           { text-shadow: 0 0 12px #00ffff; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch,
  .prompt::after,
  .glitch::after,
  #terminal .term-intro::after,
  .cr-hint::after,
  h2:hover {
    animation: none !important;
  }
}

/* ==========================================================================
   MOBILE-FIRST-PASS (Feintuning, kein Redesign)
   - verhindert horizontales Overflow
   - skaliert Typografie progressiv herunter
   - optimiert Touch-Targets und Spacing
   - gibt Tablet-Grid (768–900px) zurueck
   ========================================================================== */

/* Global: ueberlange Links/Strings umbrechen, Bilder/Canvas fluid halten,
   pre-Bloecke scrollen intern statt Body-Overflow zu erzeugen. */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Nur die Container-Pres, nicht die Game-Canvases (die sind fix). */
.section pre {
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
  scrollbar-width: thin;
}

.contact-list a,
.section p a,
.hero-name-row,
.homelab p {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* -------- Tablet-Tier 768–1024px: Projekt-Grid auf 2 Spalten,
   Container-Padding reduzieren, Matrix-Rain ist schon aus (<1100). */
@media (max-width: 1024px) {
  .container {
    padding: 32px 32px 48px;
    padding-right: 220px;      /* Nav rechts bleibt noch fix */
  }
}

@media (max-width: 960px) {
  .container { padding: 28px 24px 40px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* -------- Tablet-Grenze / Mobile ≤720px: Nav klappt in den Flow,
   Hero + Sections werden kompakter. */
@media (max-width: 720px) {
  .container { padding: 20px 18px 40px; }

  /* Boot-Titel kleiner */
  .glitch { font-size: clamp(22px, 6vw, 28px); }

  /* Hero kompakter */
  .hero {
    padding: 22px 18px;
    margin: 16px 0 18px;
  }
  .hero-name {
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: 2px;
  }
  .hero-role { gap: 6px; }
  .hero-role-chip { font-size: 11px; padding: 3px 8px; }
  .hero-claim { font-size: 14.5px; line-height: 1.55; margin-bottom: 0; }

  /* Sections: weniger Padding-Overhead, Titel etwas kleiner */
  .section {
    margin-top: 40px;
    padding: 4px 0 6px 16px;
    border-left-width: 2px;
  }
  h2 { font-size: 21px; letter-spacing: 1.5px; }
  h3 { font-size: 16px; }
  .section pre, .section p { font-size: 15px; line-height: 1.5; }

  /* Skills kompakter (Row-Layout, mobile stack greift ueber 600px-Block) */
  .skills-grid { gap: 10px; }
  .skill-row { padding: 14px 16px; }

  /* Projekte 1-spaltig */
  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-card { padding: 18px 18px 18px; }
  .project-card .pc-title { font-size: 17px; }

  /* Arcade-Bereich (Game-Launcher-Grid kommt mobile-first oben aus
     .game-launcher-Default; hier nur Card-Innenpadding nachjustieren) */
  .arcade-layout { gap: 14px; }
  .game-card { padding: 12px 14px; }
  .game-card .game-title { font-size: 15px; letter-spacing: 1.5px; }
  .game-card .game-desc { font-size: 12px; }
  .terminal { max-height: 340px; padding: 12px; }

  /* Command-Reiter etwas kompakter, Titel zentriert lassen */
  .command-rail { font-size: 12px; }

  /* Contact: Formular & Liste breit nutzen */
  .contact-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-card { padding: 16px 18px; }
  .contact-form input,
  .contact-form textarea { font-size: 16px; }  /* verhindert iOS-Zoom on focus */

  /* Command-Buttons: wrap statt nowrap, bessere Touch-Groesse */
  .cmd-btn {
    white-space: normal;
    padding: 10px 14px;
    min-height: 44px;
    font-size: 13px;
  }
}

/* -------- Mobile ≤480px: engste Tier, minimale Paddings */
@media (max-width: 480px) {
  .container { padding: 16px 14px 32px; }
  .glitch { font-size: clamp(20px, 7vw, 24px); padding-bottom: 0; }

  .hero { padding: 18px 14px; }
  .hero-tag { font-size: 11px; letter-spacing: 2px; }
  .hero-name { font-size: clamp(26px, 9vw, 34px); }

  h2 { font-size: 19px; }
  .section pre, .section p { font-size: 14px; }
  .section { padding-left: 12px; }

  .project-card { padding: 16px; }
  .project-card .pc-desc { font-size: 13.5px; }
  .project-card .pc-tags { font-size: 11.5px; }

  .skill-row { padding: 12px 14px; }
  .skill-head { font-size: 14px; gap: 8px; }
  .skill-icon { font-size: 20px; }

  .terminal { max-height: 300px; padding: 10px; font-size: 13px; }
  #output { font-size: 13px; }
  .prompt { font-size: 13px; }

  .invaders-wrap { padding: 10px; }
  .invaders-hud { font-size: 12px; gap: 10px; }

  .contact-list { font-size: 14px; }
  .contact-form label { font-size: 10px; }
  .contact-form button { padding: 11px 14px; min-height: 44px; }

  /* Nav-Buttons nehmen auf 50/50 Breite – saubere Grid-Optik im Flow */
  .nav-body a,
  .nav-body button {
    flex: 1 1 calc(50% - 6px);
    font-size: 11.5px;
  }
}

/* -------- Sehr kleine Geraete ≤360px: letzte Feinjustierung */
@media (max-width: 360px) {
  .container { padding: 12px 10px 28px; }
  .hero-name { font-size: clamp(22px, 10vw, 28px); letter-spacing: 1px; }
  h2 { font-size: 17px; letter-spacing: 1px; }
  .glitch { font-size: 18px; }
  .game-card .game-title { font-size: 13px; }
  .cmd-btn { font-size: 12px; letter-spacing: 1.5px; padding: 9px 12px; }
}


/* ==========================================================================
   v2 REFINEMENT PASS
   ----------------------------------------------------------------------------
   Behutsame Modernisierung – kein Redesign:
     - Spacing-/Motion-Tokens (CSS Custom Properties)
     - sanftere Section-/Hero-Entries
     - Smooth Scroll mit Anker-Padding (versteckt sich nicht hinter Nav)
     - aktiver Nav-Zustand (per main.js Scroll-Spy gesetzt)
     - einheitliche Card-Lift- und Focus-Interaktionen
     - Contact-CTA visuell verstaerkt
   Keine Farb- oder Font-Aenderungen, kein Markup-Bruch.
   ========================================================================== */

:root {
  /* Spacing-Skala – konsistente vertikale Rhythmik. */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 56px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Bestehende Palette als Tokens (nur Aliasing, keine neuen Farben). */
  --c-green: #00ff9f;
  --c-cyan:  #00ffff;
  --c-pink:  #ff4fe4;
  --c-gold:  #ffd700;
  --c-blue:  #3cc8ff;
}

/* 1) Smooth-Scroll + Atemraum unter der fixen Top-Nav. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 2) Globaler, dezent neoner Focus-Ring – einheitliche A11y. */
:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Inputs/Buttons mit eigenem Focus-Style sollen den Doppel-Ring vermeiden. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible,
.cmd-btn:focus-visible,
.game-card:focus-visible,
.nav a:focus-visible { outline: none; }

/* 3) Section-Entry: weicher als der alte X-Slide. */
.section {
  margin-top: 64px;
  animation: section-rise 0.55s var(--ease-out) both;
}
@keyframes section-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
/* Leichte Staffelung der ersten sichtbaren Sections (above the fold). */
.section:nth-of-type(1) { animation-delay: 0.02s; }
.section:nth-of-type(2) { animation-delay: 0.10s; }
.section:nth-of-type(3) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .section { animation: none; }
}
@media (max-width: 720px) {
  .section { margin-top: 44px; }
}

/* 4) Hero: zusaetzlich gestaffelter Fade-Up der Kinder.
      Konzept bleibt – nur sanfter eingefuehrt. */
.profile-hero > * {
  animation: hero-rise 0.7s var(--ease-out) both;
  animation-delay: 0.22s;
}
.profile-hero > *:nth-child(1) { animation-delay: 0.16s; }
.profile-hero > *:nth-child(2) { animation-delay: 0.24s; }
.profile-hero > *:nth-child(3) { animation-delay: 0.32s; }
.profile-hero > *:nth-child(4) { animation-delay: 0.40s; }
.profile-hero > *:nth-child(5) { animation-delay: 0.48s; }
.profile-hero > *:nth-child(6) { animation-delay: 0.56s; }
.profile-hero > *:nth-child(7) { animation-delay: 0.64s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .profile-hero > * { animation: none; }
}

/* 5) Hairline-Separator zwischen Sections – nur Desktop, sehr dezent. */
@media (min-width: 768px) {
  .container .section + .section {
    position: relative;
  }
  .container .section + .section::before {
    content: "";
    position: absolute;
    top: -32px;
    left: -22px;             /* in Hoehe der border-left-Linie der Section */
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,255,159,0.55), transparent);
    pointer-events: none;
  }
}

/* 6) Nav – aktiver Zustand (per JS gesetzt: a.is-active). */
.nav a.is-active {
  background: rgba(0,255,159,0.16);
  border-color: var(--c-cyan);
  border-left-color: var(--c-pink);
  color: var(--c-cyan);
  box-shadow:
    0 0 14px rgba(0,255,255,0.35),
    inset 0 0 8px rgba(255,79,228,0.12);
  transform: translateX(-2px);
}
/* Kleiner Indikator-Punkt vorne, damit der aktive Eintrag auch ohne Hover liest. */
.nav a.is-active::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-pink);
  box-shadow: 0 0 6px var(--c-pink);
  margin-right: 8px;
  vertical-align: middle;
}

/* 7) Card-Lift-Konsistenz: identisches Easing/Duration ueber alle Karten. */
.skill-row,
.project-card,
.contact-card,
.game-card,
.homelab {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

/* Skills: Bar-Glow auf Row-Hover etwas staerker. */
.skill-row:hover .skill-fill {
  box-shadow: 0 0 14px rgba(0,255,255,0.55);
}

/* Projekte: Title-Glow auf Card-Hover hervorheben. */
.project-card:hover .pc-title {
  text-shadow: 0 0 10px rgba(255,215,0,0.6);
}

/* 8) Contact – staerkere CTA, klarere Trennung der Info-Eintraege. */
.contact-form button {
  font-size: 15px;
  letter-spacing: 3px;
  padding: 12px 18px;
  border-width: 1.5px;
  background: linear-gradient(180deg, rgba(60,200,255,0.12), rgba(0,0,0,0.65));
  box-shadow:
    0 0 10px rgba(60,200,255,0.25),
    inset 0 0 6px rgba(60,200,255,0.08);
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.contact-form button:hover,
.contact-form button:focus-visible {
  background: var(--c-blue);
  color: #001018;
  box-shadow:
    0 0 18px rgba(60,200,255,0.7),
    0 0 32px rgba(60,200,255,0.25);
  transform: translateY(-1px);
}
.contact-form button:active { transform: translateY(0); }

.contact-info .contact-list li {
  padding: 6px 0;
  margin-bottom: 0;
  border-bottom: 1px dashed rgba(60,200,255,0.18);
}
.contact-info .contact-list li:last-child {
  border-bottom: none;
}

/* 9) Globale Link-Transition-Konsistenz. */
a { transition: color var(--dur-fast) var(--ease-out); }

/* 10) Mini-Glitch beim h2-Hover deaktivieren, wenn Reduced-Motion aktiv ist
       (war bereits fuer die Mehrzahl der Animationen geregelt – hier robuster). */
@media (prefers-reduced-motion: reduce) {
  .skill-row,
  .project-card,
  .contact-card,
  .game-card,
  .homelab,
  .contact-form button,
  .nav a {
    transition: none !important;
  }
}

/* 11) Opt-in Fade-In Utility
       ----------------------------------------------------------------------
       Auf jedes Element anwendbar, das beim Laden sanft erscheinen soll.
       Spielt einmal beim Mount – kein JS, kein Scroll-Trigger.
       Stagger via .delay-1 ... .delay-5.
       Beispiel:
         <article class="skill-row fade-in delay-2"> ... </article>
*/
.fade-in {
  animation: fade-in 0.6s var(--ease-out) both;
}
.fade-in.delay-1 { animation-delay: 0.10s; }
.fade-in.delay-2 { animation-delay: 0.20s; }
.fade-in.delay-3 { animation-delay: 0.30s; }
.fade-in.delay-4 { animation-delay: 0.40s; }
.fade-in.delay-5 { animation-delay: 0.50s; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
}


/* ==========================================================================
   IA-V2: ABOUT (Intro-Card + nested Skills) und SYSTEM (Tech-Stack-Cards)
   ----------------------------------------------------------------------------
   Strukturelle Erweiterung – nutzt vorhandene Tokens und bleibt im
   bestehenden Cyberpunk-Look (kantig, neongruen).
   ========================================================================== */

/* About-Section umschliesst Intro-Card + Skills-Sub-Section. */
.about-section .about-card {
  margin: 4px 0 24px;
  padding: 20px 22px 18px;
  border: 1px solid rgba(0,255,159,0.35);
  background: linear-gradient(180deg, rgba(0,255,159,0.05), rgba(0,255,255,0.02));
  box-shadow: 0 0 14px rgba(0,255,159,0.10), inset 0 0 8px rgba(0,255,159,0.04);
  position: relative;
}

/* Ecken-Akzent oben rechts – matched zu skill/game-card-Optik. */
.about-section .about-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-top: 12px solid #00ff9f;
  border-left: 12px solid transparent;
  opacity: 0.7;
}

.about-section .about-card h3:first-child { margin-top: 0; }
.about-section .about-card pre,
.about-section .about-card p { margin: 0 0 8px; }

/* Skills Sub-Section innerhalb der About-Section.
   Bekommt KEIN .section-Styling (border-left, slide-in) – nur Abstand und
   eine eigene H2-Variante, damit die Hierarchie lesbar bleibt. */
.about-skills {
  display: block;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed rgba(0,255,159,0.28);
  /* Sub-Section bricht aus dem normalen .section-Animationsfluss aus,
     deshalb hier eigener subtiler Fade-Up. */
  animation: section-rise 0.55s var(--ease-out) both;
  animation-delay: 0.05s;
}

.about-skills > .about-skills-title {
  /* gleiche optische Klasse wie h2, aber 1 Stufe leiser im Letter-Spacing. */
  font-size: 22px;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .about-skills { animation: none; }
}

@media (max-width: 720px) {
  .about-section .about-card { padding: 16px 16px 14px; }
  .about-skills { margin-top: 22px; padding-top: 18px; }
  .about-skills > .about-skills-title { font-size: 18px; }
}


/* ==========================================================================
   Reaction Test + Bug Hunter (Mini-Games)
   ========================================================================== */

/* -------- Launcher-Cards -------------------------------------------------- */
.game-card.reaction {
  border-color: var(--c-blue);
  color: var(--c-blue);
  background: linear-gradient(135deg, rgba(60,200,255,0.12), rgba(0,255,255,0.04));
  box-shadow: 0 0 12px rgba(60,200,255,0.22), inset 0 0 8px rgba(60,200,255,0.05);
}
.game-card.reaction::before { border-top-color: var(--c-blue); }
.game-card.reaction .game-title {
  color: var(--c-blue);
  text-shadow: 0 0 5px rgba(60,200,255,0.45);
}
.game-card.reaction:hover,
.game-card.reaction:focus-visible {
  background: linear-gradient(135deg, rgba(60,200,255,0.22), rgba(0,255,255,0.10));
  box-shadow: 0 0 18px rgba(60,200,255,0.45);
}

/* Bug-Hunter behaelt Default-Gruen, aber roter Bug-Akzent im Title */
.game-card.bug .game-icon {
  filter: drop-shadow(0 0 4px #ff5f5f);
}

/* -------- Reaction Test --------------------------------------------------- */
.reaction-wrap {
  border-color: var(--c-blue);
  box-shadow: 0 0 22px rgba(60,200,255,0.22), inset 0 0 18px rgba(0,255,159,0.06);
}

.reaction-screen {
  min-height: 260px;
  padding: 0;
  background: #000;
  border: 1px solid rgba(60,200,255,0.4);
  display: flex;
  flex-direction: column;
}

.reaction-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 28px 18px;
}

.reaction-title {
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--c-blue);
  text-shadow: 0 0 10px rgba(60,200,255,0.5);
}

.reaction-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cfffe8;
  opacity: 0.85;
}
.reaction-sub strong { color: var(--c-green); text-shadow: 0 0 5px rgba(0,255,159,0.5); }
.reaction-sub span { color: var(--c-blue); text-shadow: 0 0 4px rgba(60,200,255,0.5); }

/* Arena: Vollflaechiger Klick-Bereich, Farbwechsel signalisiert Status. */
.reaction-arena {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.reaction-arena.rx-wait {
  background: radial-gradient(circle at center, rgba(255,79,79,0.18), rgba(0,0,0,0.85));
  color: #ff8f8f;
}
.reaction-arena.rx-ready {
  background: radial-gradient(circle at center, rgba(0,255,159,0.22), rgba(0,0,0,0.7));
  color: var(--c-green);
  animation: rx-flash 0.25s var(--ease-out) 1;
}
.reaction-arena.rx-fail {
  background: radial-gradient(circle at center, rgba(255,79,228,0.25), rgba(0,0,0,0.85));
  color: var(--c-pink);
  animation: hk-shake 0.4s cubic-bezier(.36,.07,.19,.97) 1;
}

.reaction-state {
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 4px;
  text-shadow: 0 0 12px currentColor;
}
.reaction-hint {
  font-size: 13px;
  letter-spacing: 1.5px;
  opacity: 0.75;
}

@keyframes rx-flash {
  from { filter: brightness(1.6); }
  to   { filter: brightness(1);   }
}

/* -------- Bug Hunter ------------------------------------------------------ */
.bug-wrap {
  /* Default-Gruen (siehe .invaders-wrap), keine Border-Aenderung. */
}

.bug-screen {
  min-height: 320px;
  padding: 0;
  background: #000;
  border: 1px solid rgba(0,255,159,0.4);
  display: flex;
  flex-direction: column;
}

.bug-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 28px 18px;
}

.bug-title {
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--c-green);
  text-shadow: 0 0 10px rgba(0,255,159,0.5);
}

.bug-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cfffe8;
  opacity: 0.9;
}
.bug-sub span { color: var(--c-green); text-shadow: 0 0 4px rgba(0,255,159,0.4); }
.bug-sub .bug-glyph {
  display: inline-block;
  filter: drop-shadow(0 0 6px #ff5f5f);
}

/* Arena: relativ positioniert, Bugs sind absolute Children. */
.bug-arena {
  position: relative;
  flex: 1;
  min-height: 320px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,159,0.06), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,79,79,0.05), transparent 60%),
    #050505;
  overflow: hidden;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}

.bug-bug {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,95,95,0.55);
  color: #ff5f5f;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(255,95,95,0.45),
    inset 0 0 6px rgba(255,95,95,0.2);
  filter: drop-shadow(0 0 4px rgba(255,95,95,0.6));
  animation: bug-life var(--bug-life, 1500ms) linear forwards;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 0;
}

.bug-bug:hover {
  border-color: #ffaa55;
  box-shadow: 0 0 16px rgba(255,170,85,0.7);
}

.bug-bug.is-hit {
  animation: bug-hit 0.22s ease-out forwards;
  pointer-events: none;
}

@keyframes bug-life {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
  10%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
  20%  { opacity: 1;   transform: translate(-50%, -50%) scale(1);   }
  85%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1);   }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.7); }
}
@keyframes bug-hit {
  0%   { transform: translate(-50%, -50%) scale(1);   filter: brightness(1) drop-shadow(0 0 4px #ff5f5f); }
  100% { transform: translate(-50%, -50%) scale(1.8); filter: brightness(2) drop-shadow(0 0 14px #00ff9f); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reaction-arena.rx-ready,
  .reaction-arena.rx-fail,
  .bug-bug,
  .bug-bug.is-hit { animation: none; }
}


/* ==========================================================================
   BIOS-Title (POST-Style Intro oberhalb der ersten Section)
   ----------------------------------------------------------------------------
   Container .bios-title ersetzt die alte single-line .glitch.
   Die "main"-Zeile behaelt alle bestehenden .glitch-Animationen
   (typewriter / flicker / auto-glitch / Cursor).
   Die "small" Zeilen erscheinen staggered nach dem Loader-Dismiss.
   ========================================================================== */
.bios-title {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Hauptzeile groesser, line-height eng -> visuell buendig zu den .small-Lines.
   white-space: nowrap verhindert, dass Indent-Whitespace aus dem HTML
   die Zeile aufsplittet (das .bios-line-Default ist pre-wrap). */
.bios-title .glitch.main {
  font-size: 56px;
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;
}

/* Per-Word-Coloring innerhalb des Boot-Titels:
   semantisches Farbtripel matched zur bestehenden Palette, aber leicht
   in Richtung Weiss aufgeweicht (~65 % Saettigung). Sanfter fuers Auge,
   Hue bleibt erkennbar. Text-Shadow wird vom .glitch-Parent geerbt --
   auto-glitch feuert weiter, weil die Spans kein text-shadow ueberschreiben. */
.bios-title .glitch.main .bw-cmd   { color: #5cffff; }                    /* Command (soft cyan) */
.bios-title .glitch.main .bw-state { color: #5cffc4; }                    /* State-Verb (soft mint) */
.bios-title .glitch.main .bw-file  { color: #ffe66e; }                    /* Filename (soft gold) */
.bios-title .glitch.main .bw-dots  { color: rgba(0,255,255,0.38); }       /* Loading-Indicator */

@media (max-width: 720px) {
  .bios-title .glitch.main { font-size: clamp(28px, 7vw, 38px); line-height: 1.05; }
}
@media (max-width: 480px) {
  .bios-title .glitch.main { font-size: clamp(24px, 8vw, 30px); }
}

.bios-line {
  font-family: inherit;
  white-space: pre-wrap;
}

.bios-line.small {
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(0,255,159,0.65);
  text-shadow: 0 0 3px rgba(0,255,159,0.22);
  opacity: 0;
  animation: bios-line-in 0.32s var(--ease-out) forwards;
}

/* Stagger ueber nth-child – Position 2 ist die .main-Zeile (nicht staggern). */
.bios-line.small:nth-child(1) { animation-delay: 0.00s; }
.bios-line.small:nth-child(3) { animation-delay: 0.18s; }
.bios-line.small:nth-child(4) { animation-delay: 0.32s; }
.bios-line.small:nth-child(5) { animation-delay: 0.46s; }

@keyframes bios-line-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
  .bios-line.small {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .bios-line.small { font-size: 11.5px; letter-spacing: 0.5px; }
}

/* Decorative Sweep-Bar unter den BIOS-Lines.
   Dezent, duenn, gruen -- "Boot laeuft im Hintergrund weiter"-Vibe,
   kein Progress-Anspruch. */
.boot-bar {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  background: rgba(0,255,159,0.06);
  border: 1px solid rgba(0,255,159,0.25);
  overflow: hidden;
  opacity: 0;
  animation: bios-line-in 0.32s var(--ease-out) 0.62s forwards;
}

.boot-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg,
    transparent,
    var(--c-green) 30%,
    #e8fff7 50%,
    var(--c-green) 70%,
    transparent);
  box-shadow: 0 0 8px rgba(0,255,159,0.5);
  animation: boot-bar-sweep 1.8s linear infinite;
}

@keyframes boot-bar-sweep {
  from { left: -40%; }
  to   { left: 100%;  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-bar { animation: none; opacity: 1; }
  .boot-bar::before { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   BIOS-Block Spacing-Tightening: Block sitzt naeher am Viewport-Top und
   die erste Section rueckt naeher an den BIOS-Block.
   Container-Right-Padding (Nav) bleibt unangetastet, nur Top wird reduziert.
   -------------------------------------------------------------------------- */
.container { padding-top: 20px; }
.bios-title { margin-bottom: 10px; }
.bios-title + .section { margin-top: 28px; }

@media (max-width: 720px) {
  .container { padding-top: 14px; }
  .bios-title + .section { margin-top: 22px; }
}

/* --------------------------------------------------------------------------
   CRT-Scanline-Overlay (siteweit, gruen-getoent)
   ----------------------------------------------------------------------------
   Liegt fix ueber dem Content (z 50: ueber Sections/Nav-Body, unter Loader,
   Cursor und Game-Wrapper). `pointer-events: none` -> Klicks gehen durch.
   Hero behaelt seine lokalen Scanlines -> dort minimale Intensivierung
   als bewusster Akzent.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,159,0.02),
    rgba(0,255,159,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 50;
  opacity: 0.85;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  /* statisch ohnehin – kein Eingriff noetig, Regel zur Doku. */
}

/* Hero-Emoji als Icon in der Role-Zeile (rechts neben "ICT PROFESSIONAL").
   Fixe Icon-Groesse, eigener weicher Cyan-Glow, Text-Shadow lokal gekillt
   damit Emoji-Farben nicht ueberfaerbt werden.
   Color-Emoji-Fonts werden explizit forciert -> auf modernen Systemen
   skalieren COLR/SVG-Glyphen sauber statt verpixelter Bitmaps. */
.hero-emoji {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 10px;
  letter-spacing: normal;
  text-shadow: none;
  filter: drop-shadow(0 0 5px rgba(0,255,255,0.45));
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "EmojiOne Color", "Twemoji Mozilla", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Modifier: groesser + leicht staerkerer Glow -> Hero-Akzent */
.hero-emoji.hero-emoji--lg {
  font-size: 36px;
  filter: drop-shadow(0 0 7px rgba(0,255,255,0.5));
}

@media (max-width: 480px) {
  .hero-emoji { font-size: 20px; margin-left: 8px; }
  .hero-emoji.hero-emoji--lg { font-size: 30px; }
}

/* Hero-Slogan immer auf einer Zeile (Desktop / Tablet).
   Auf engen Mobile-Viewports darf er umbrechen, sonst sprengt er das Layout. */
.profile-hero .hero-claim {
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .profile-hero .hero-claim {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ==========================================================================
   "Ziel"-Highlight innerhalb der About-Card
   ----------------------------------------------------------------------------
   Subtile Pink-Umrandung mit weichem Glow + langsamer Pulse.
   Pink (#ff4fe4) ist bereits H3-Akzent in #ueber-mich -> rein nativ.
   Border-Radius bewusst 0 (kantig wie der Rest der Site).
   ========================================================================== */
.ziel-highlight {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,79,228,0.4);
  background: linear-gradient(135deg, rgba(255,79,228,0.05), rgba(255,79,228,0.02));
  box-shadow:
    0 0 8px rgba(255,79,228,0.10),
    inset 0 0 6px rgba(255,79,228,0.03);
  animation: ziel-pulse 6s ease-in-out infinite;
}

.ziel-highlight h3:first-child { margin-top: 0; }
.ziel-highlight p:last-child   { margin-bottom: 0; }

@keyframes ziel-pulse {
  0%, 100% {
    box-shadow:
      0 0  8px rgba(255,79,228,0.10),
      inset 0 0 6px rgba(255,79,228,0.03);
    border-color: rgba(255,79,228,0.4);
  }
  50% {
    box-shadow:
      0 0 14px rgba(255,79,228,0.22),
      inset 0 0 8px rgba(255,79,228,0.05);
    border-color: rgba(255,79,228,0.6);
  }
}

@media (max-width: 720px) {
  .ziel-highlight { padding: 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ziel-highlight { animation: none; }
}

/* --------------------------------------------------------------------------
   Fix: USER-PROFILE-h2 verschwindet beim Hover
   ----------------------------------------------------------------------------
   Globales `h2:hover { animation: micro-glitch }` ueberschreibt sonst die
   hero-rise-Entry-Animation -> Browser startet sie beim Un-Hover neu
   (opacity 0 -> 1 mit 0.16s Delay) -> Title verschwindet kurzzeitig.
   Hier verketten wir beide Animationen, sodass hero-rise an Position 0
   NICHT neu startet (Browsers matchen Animationen per Listenposition).
   -------------------------------------------------------------------------- */
.profile-hero h2:hover {
  animation:
    hero-rise 0.7s var(--ease-out) 0.16s both,
    micro-glitch 0.6s steps(3, end) 1;
}