/* =========================================================================
   PortalEngine V4 — Cyberpunk Design-System (dezent-professionell)
   Ein zentraler Ort für Farben, Schrift, Boxen, Buttons.
   Regel: Bereiche stylen NICHTS selbst inline — nur diese Klassen nutzen.
   ========================================================================= */

/* ---------- Design-Tokens ---------- */
:root {
  /* Basis (dunkel, leicht blaustichig) */
  --bg-0: #05080e;   /* Seiten-Hintergrund */
  --bg-1: #0a1018;   /* Panel-Grund */
  --bg-2: #0e1622;   /* erhöhte Fläche */
  --line: rgba(120, 200, 180, 0.14);   /* feine Trennlinien */

  /* Akzente */
  --accent:        #9fe870;   /* Marken-Grün (Haupt-Akzent) */
  --accent-strong: #b6f58a;
  --accent-deep:   #6fae3f;
  --neon:          #35e6d0;   /* Cyan (Neon-Zweitfarbe) */
  --neon-2:        #ff5db1;   /* Magenta – nur sehr sparsam */

  /* Text */
  --text:    #e7f0f8;   /* Haupttext */
  --text-dim:#9fb2c6;   /* Sekundärtext */
  --text-mut:#6f8299;   /* dezent */

  /* Glow / Schatten */
  --glow-accent: 0 0 22px rgba(159, 232, 112, 0.20);
  --glow-neon:   0 0 22px rgba(53, 230, 208, 0.22);
  --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* Maße */
  --content-max: 1120px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Schrift */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-head: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", ui-monospace, monospace;
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Inhalt füllt die Höhe → Footer immer ganz unten (Sticky-Footer) */
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* Cyberpunk-Szene als fixierter Hintergrund + kräftiger dunkler Schleier für Lesbarkeit */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, rgba(5, 8, 14, 0.74), rgba(5, 8, 14, 0.68) 45%, rgba(5, 8, 14, 0.82)),
    url(/assets/img/bg-scene.png) center center / cover no-repeat,
    var(--bg-0);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 200, 180, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 200, 180, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 92%);
}

/* ---------- Schwebende Logos im Hintergrund ---------- */
.bg-float {
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden; pointer-events: none;
}
.bg-float__i {
  position: absolute;
  width: clamp(150px, 16vw, 260px);
  opacity: 0.16;
  mix-blend-mode: screen;          /* schwarzer Hintergrund der Neon-Logos wird unsichtbar */
  filter: saturate(1.2) blur(0.4px);
  will-change: transform;
}
/* Startpositionen + eigene Flugbahnen, hin und her (kreuz und quer) */
.f1 { top: 8%;  left: 6%;  animation: drift1 34s ease-in-out infinite alternate; }
.f2 { top: 62%; left: 12%; width: clamp(120px,13vw,210px); animation: drift2 42s ease-in-out infinite alternate; }
.f3 { top: 20%; left: 74%; animation: drift3 38s ease-in-out infinite alternate; }
.f4 { top: 70%; left: 66%; width: clamp(110px,12vw,190px); opacity: 0.12; animation: drift4 48s ease-in-out infinite alternate; }
.f5 { top: 40%; left: 44%; width: clamp(100px,11vw,170px); opacity: 0.10; animation: drift5 30s ease-in-out infinite alternate; }
.f6 { top: 84%; left: 30%; animation: drift6 44s ease-in-out infinite alternate; }

@keyframes drift1 { from { transform: translate(0,0) rotate(-8deg); } to { transform: translate(46vw, 34vh) rotate(14deg); } }
@keyframes drift2 { from { transform: translate(0,0) rotate(6deg); }  to { transform: translate(60vw,-30vh) rotate(-16deg); } }
@keyframes drift3 { from { transform: translate(0,0) rotate(10deg); } to { transform: translate(-58vw, 40vh) rotate(-10deg); } }
@keyframes drift4 { from { transform: translate(0,0) rotate(-4deg); } to { transform: translate(-52vw,-44vh) rotate(18deg); } }
@keyframes drift5 { from { transform: translate(0,0) rotate(0deg); }  to { transform: translate(38vw,-36vh) rotate(-22deg); } }
@keyframes drift6 { from { transform: translate(0,0) rotate(12deg); } to { transform: translate(50vw,-56vh) rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
  .bg-float__i { animation: none !important; }
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--text-dim); }
a  { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
::selection { background: rgba(53, 230, 208, 0.28); color: #fff; }

/* Eyebrow / Bereichs-Label — monospaced, technischer Cyberpunk-Touch */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--neon);
  margin: 0 0 0.9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
}

/* Marken-Wortmarke PEShield */
.pe-word { font-weight: 800; }
.pe-word__pe { color: var(--accent); text-shadow: var(--glow-accent); }

/* ---------- Layout-Hülle ---------- */
.wrap { width: min(100%, var(--content-max)); margin: 0 auto; padding-inline: 1.4rem; }
.section { padding-block: clamp(1.8rem, 3.4vw, 3rem); }
.section--center { text-align: center; }
.section--center .eyebrow { justify-content: center; }
.lead {
  max-width: 60ch; margin-inline: auto;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-dim);
}
.section--center .lead { margin-inline: auto; }

/* ---------- Panel / Box (Kern-Baustein) ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-panel);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* leuchtende Ecken-Kante oben – dezenter Cyberpunk-Rahmen */
.panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(53,230,208,0.5), transparent 35%, transparent 65%, rgba(159,232,112,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.45;
  transition: opacity .25s ease;
}
.panel:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 230, 208, 0.35);
  box-shadow: var(--shadow-panel), var(--glow-neon);
}
.panel:hover::before { opacity: 0.9; }
.panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.05rem;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(159, 232, 112, 0.08);
  border: 1px solid rgba(159, 232, 112, 0.22);
  box-shadow: inset 0 0 22px rgba(159, 232, 112, 0.05);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.panel__icon svg { width: 24px; height: 24px; }
.panel:hover .panel__icon {
  color: var(--neon);
  border-color: rgba(53, 230, 208, 0.4);
  background: rgba(53, 230, 208, 0.1);
}
.panel h3 { color: var(--text); }
.panel p  { margin: 0; color: var(--text-dim); }

/* Lese-Spalte (Fließtext, angenehm schmal) */
.reading { max-width: 66ch; }
.reading--center { margin-inline: auto; text-align: center; max-width: 82ch; }
.reading--center p { font-size: 1.05rem; }
.hero__intro { margin-top: 0.9rem; }
.hero__intro p { font-size: 0.96rem; margin-bottom: 0.7rem; }
.hero__intro p:last-child { margin-bottom: 0; }

/* Einheitlicher, zentrierter Abschnitts-Kopf (Eyebrow + H2 + Unterzeile) */
.section__head { max-width: 60ch; margin: 0 auto 1.8rem; }
.section__head h2 { margin-bottom: 0.5rem; }
.section__head .lead { margin-bottom: 0; }
.reading p { color: var(--text-dim); font-size: 1.02rem; margin-bottom: 1rem; }
.reading strong { color: var(--text); font-weight: 700; }

/* Mission-Callout: hervorgehobenes Panel mit Neon-Kante links */
.panel--mission {
  max-width: 66ch; margin-top: 1.6rem;
  border-left: 3px solid var(--neon);
  background: linear-gradient(180deg, rgba(53,230,208,0.06), var(--bg-1));
}
.panel--mission p:last-child { margin: 0; color: var(--text-dim); font-size: 1.05rem; }
.panel--mission strong { color: var(--neon); }

/* Rechtstexte (Datenschutz, Impressum, AGB) */
.legal { max-width: 76ch; margin: 0 auto; }
.legal h3 {
  margin: 2rem 0 0.5rem; color: var(--text); font-size: 1.12rem;
  padding-left: 0.7rem; border-left: 2px solid var(--neon);
}
.legal p { color: var(--text-dim); margin: 0 0 0.9rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal li { color: var(--text-dim); margin-bottom: 0.35rem; }
.legal strong { color: var(--text); }
.legal a { color: var(--neon); text-decoration: underline; text-underline-offset: 2px; }
.legal__stand {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--text-mut); letter-spacing: 0.04em;
}
.legal__note {
  margin-top: 2rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--text-mut); background: rgba(159,232,112,0.04);
}
/* Noch festzulegende Stellen sichtbar markieren */
.legal__todo {
  font-family: var(--font-mono); font-size: 0.82em; font-weight: 600;
  color: #ffd166; background: rgba(255,209,102,0.1);
  border: 1px solid rgba(255,209,102,0.3); border-radius: 4px;
  padding: 0.05em 0.4em; white-space: nowrap;
}

/* Beweggründe-Manifest – Box links oben, Intro rechts, Story 2-spaltig */
.beweg { max-width: min(100%, 1120px); margin: 0 auto; }
.beweg p { font-size: 0.95rem; line-height: 1.56; color: var(--text-dim); }
.beweg strong { color: var(--text); }
.beweg .pe-word__pe { color: var(--accent); }

/* Kopfbereich: Neutralitäts-Box links | Überschrift + Intro rechts */
.beweg-top {
  display: grid; grid-template-columns: 300px 1fr; gap: 2rem;
  align-items: start; margin-bottom: 1.3rem;
}
.beweg-intro h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.14;
  margin: 0.2rem 0 0.6rem;
}
.beweg-intro p:last-child { margin-bottom: 0; }

/* Fließtext mehrspaltig (nutzt die Breite → weniger Höhe) */
.beweg-body { columns: 3; column-gap: 2.4rem; }
.beweg-body p { break-inside: avoid; margin-bottom: 0.65rem; }

/* Neutralitäts-Box (jetzt Seiten-Box links) */
.beweg-note {
  margin: 0; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-left: 3px solid var(--neon);
  border-radius: var(--radius-sm);
  background: rgba(53,230,208,0.05);
  position: sticky; top: 92px;
}
.beweg-note .eyebrow { margin-bottom: 0.5rem; }
.beweg-note p:last-child { margin: 0; font-size: 0.94rem; }

.beweg-sign {
  margin-top: 1.2rem; text-align: center; font-family: var(--font-mono);
  color: var(--accent); font-size: 0.95rem; letter-spacing: 0.02em;
}
.beweg-cta { display: flex; justify-content: center; margin-top: 0.9rem; }
/* Neutralitäts-Box weiter nach links (nahe Fensterrand) */
@media (min-width: 1000px) {
  .beweg-note { margin-left: calc((100vw - var(--content-max)) / -2 + 0.4rem); }
}

@media (max-width: 1080px) { .beweg-body { columns: 2; } }
@media (max-width: 820px) {
  .beweg-top { grid-template-columns: 1fr; }
  .beweg-note { position: static; }
  .beweg-body { columns: 1; }
}

/* Zur Test App – breit & kompakt */
.app-page { width: min(100%, 1500px); margin: 0 auto; padding-inline: 1.8rem; position: relative; isolation: isolate; }
/* Cyberpunk-Szene als Hero-Backdrop oben, blendet nach unten aus. */
.app-page::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 560px; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 8, 14, 0.55), rgba(5, 8, 14, 0.82) 60%, var(--bg-0)),
    url('/assets/img/bg-app-scene.png') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  border-radius: 18px;
}
.app-page .section__head { margin-bottom: 1.2rem; }
/* Screenshot: kleines Thumbnail auf der Linie. Hover → große Vorschau schwebt mittig ein.
   Klick → echtes Vollbild (CSS-Lightbox). Kein JS, keine Cursor-Falle. */
.app-thumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; }
/* Download-Box darf den „Ziegel" der 2. Reihe überstehen lassen (ohne größer zu werden). */
.app-dl { overflow: visible; }
.app-thumb__rows { position: relative; display: inline-flex; }
.app-thumb__row { display: inline-flex; gap: 0.7rem; }
/* „Ziegelstein"-Reihe: 2. Reihe, versetzt unter die ersten Thumbnails, ragt über die Box-Unterkante. */
.app-brick-row {
  position: absolute; left: 56px; top: calc(100% + 5px); z-index: 4;
  display: inline-flex; gap: 0.7rem;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}
.app-brick-row .app-stack__i { border-color: rgba(53, 230, 208, 0.7); }
.app-thumb .eyebrow { margin: 0; white-space: nowrap; }
.app-stack { position: relative; display: inline-flex; }
.app-stack__link { display: inline-flex; }
.app-stack__i {
  height: 46px; width: auto; display: block; border-radius: 6px; cursor: zoom-in;
  border: 1px solid rgba(53, 230, 208, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  transition: border-color .25s ease, transform .25s ease;
}
.app-stack__link:hover .app-stack__i { border-color: rgba(53, 230, 208, 0.85); transform: translateY(-1px); }
/* Große Hover-Vorschau – schwebt mittig ein, nur visuell (pointer-events:none). */
.app-stack__big {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  width: min(1100px, 92vw); height: auto; z-index: 9000;
  border-radius: 12px; border: 1px solid rgba(53, 230, 208, 0.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 60px rgba(53, 230, 208, 0.25);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.app-stack__link:hover .app-stack__big { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Klick-Vollbild (CSS-Lightbox, :target). Klick irgendwo schließt. */
.app-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(3, 6, 12, 0.95); padding: 3vh 3vw; cursor: zoom-out;
}
.app-lightbox:target { display: flex; }
.app-lightbox img {
  max-width: 96vw; max-height: 86vh; border-radius: 12px;
  border: 1px solid rgba(53, 230, 208, 0.35); box-shadow: 0 0 60px rgba(53, 230, 208, 0.22);
}
.app-lightbox__close {
  font-family: var(--font-mono); color: #cdeee8; font-size: 0.85rem;
  border: 1px solid rgba(53, 230, 208, 0.4); border-radius: 8px; padding: 0.4rem 1rem;
}
.app-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.6rem; align-items: stretch; margin-top: 0.4rem; }
.app-hero__side { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.app-hero__side h2 { margin: 0.2rem 0 0.4rem; }
.app-hero__side .lead { margin: 0; }
@media (max-width: 860px) { .app-hero { grid-template-columns: 1fr; } }
.app-dl h3 { color: var(--text); font-size: 1.4rem; margin-bottom: 0.4rem; }
.app-ver { font-family: var(--font-mono); font-size: 0.66em; color: var(--neon); margin-left: 0.4rem; }
.app-meta { color: var(--text-dim); }
.app-meta strong { color: var(--text); }
.app-dl__btn { margin: 1.1rem 0 0.8rem; font-size: 1rem; }
.app-warn { color: #ffd166; font-size: 0.9rem; margin: 0; }

/* App-Store-Kopf im Download-Panel */
.app-dl__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.app-dl__icon { width: 76px; height: 76px; border-radius: 18px; border: 1px solid var(--line); flex: none; box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
.app-dl__id { min-width: 0; }
.app-dl__id .eyebrow { margin-bottom: 0.2rem; }
.app-dl__id h3 { margin: 0 0 0.25rem; color: var(--text); font-size: 1.35rem; }
.app-tagline { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.4; }
.app-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.app-badge { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.03); }
.app-badge--ok { color: var(--accent); border-color: rgba(159,232,112,0.35); background: rgba(159,232,112,0.06); }

/* Feature-Raster sauber 3×2 */
.app-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .app-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-features { grid-template-columns: 1fr; } }

/* /app im Glas-Stil wie „Unser Server" – transparent, Hintergrund scheint durch */
.app-page .panel {
  background: linear-gradient(180deg, rgba(12,18,28,0.12), rgba(8,12,18,0.20));
  border-color: rgba(120,200,180,0.12);
  backdrop-filter: blur(3px);
  border-radius: 20px;
}
.app-steps .app-step {
  background: linear-gradient(180deg, rgba(12,18,28,0.12), rgba(8,12,18,0.20));
  border-radius: 18px;
}

/* Mitmachen */
.mit-deal { max-width: 900px; margin: 1.8rem auto 0; border-left: 3px solid var(--neon); text-align: left; }
.mit-deal h3 { color: var(--text); margin: 0.4rem 0 0.5rem; }
.mit-deal p { margin: 0; }
.mit-grid { margin-top: 1.4rem; }
.mit-grid .btn-row { margin-top: 1.1rem; }
.mit-close { text-align: center; margin-top: 2.2rem; font-family: var(--font-mono); color: var(--accent); letter-spacing: 0.03em; font-size: 0.95rem; }

/* Flash-Fortschritt */
.flash-grid { margin-top: 1.4rem; }
.flash-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.flash-card__chip { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-mut); letter-spacing: 0.06em; }
.flash-card h3 { color: var(--text); margin: 0 0 0.3rem; font-size: 1.12rem; }
.flash-card__goal { color: var(--accent); font-size: 0.9rem; margin: 0 0 0.6rem; }
.flash-card p:last-child { margin: 0; }
.badge--research { color: var(--neon); border-color: rgba(53,230,208,0.4); background: rgba(53,230,208,0.08); }
.app-page .panel::before { opacity: 0.3; }
.app-page .panel:hover::before { opacity: 0.6; }
.app-steps .app-step {
  background: linear-gradient(180deg, rgba(12,18,28,0.30), rgba(8,12,18,0.42));
  border-color: rgba(120,200,180,0.14);
  backdrop-filter: blur(4px);
}
.app-qr { display: flex; align-items: center; gap: 1.2rem; text-align: left; }
.app-qr img { width: 132px; height: 132px; border-radius: 14px; border: 1px solid var(--line); flex: none; }
.app-qr__txt .eyebrow { margin-bottom: 0.35rem; }
.app-qr__txt p:last-child { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.app-sec { margin-top: 1.8rem; margin-bottom: 1rem; }
.app-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.app-step { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); }
.app-step__n { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 800; color: var(--neon); line-height: 1; }
.app-step h4 { margin: 0 0 0.2rem; color: var(--text); font-size: 1rem; }
.app-step p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.app-feedback { margin: 2.6rem auto 0; max-width: 820px; text-align: center; }
.app-feedback .btn-row { justify-content: center; }
@media (max-width: 780px) { .app-download { grid-template-columns: 1fr; } }

/* Unser Server – Live-Dashboard */
.srv-status {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--text-dim); margin: 0.2rem 0 1.4rem;
}
.srv-status__txt { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; }
.srv-status__sep { color: var(--text-mut); }
.srv-status__up strong { color: var(--text); font-family: var(--font-mono); }
.srv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: nmPulse 1.6s infinite; }

/* keine Boxen – nur Inhalt + Diagramme auf dem Hintergrund */
.srv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.8rem; }
@media (max-width: 900px) { .srv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .srv-grid { grid-template-columns: 1fr; } }
.stat-tile {
  position: relative; padding: 0.3rem 0.2rem;
  text-shadow: 0 1px 8px rgba(2, 6, 10, 0.6);   /* Lesbarkeit ohne Box */
}
.stat-tile__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
.stat-tile__val { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; line-height: 1.05; color: var(--text); margin-top: 0.4rem; text-shadow: var(--glow-accent); }
.stat-tile__val--sm { font-size: 1.3rem; word-break: break-word; }
.stat-tile__unit { font-size: 1rem; color: var(--text-dim); margin-left: 0.2rem; font-family: var(--font-body); font-weight: 600; }
.stat-tile__sub { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-dim); }
.stat-tile .node-monitor__spark { margin-top: 0.7rem; height: 30px; }
.meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 0.7rem; }
.meter i { display: block; height: 100%; width: 2%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--neon)); transition: width .6s ease; }
.srv-note {
  max-width: 900px; margin: 1.8rem auto 0;
  background: linear-gradient(180deg, rgba(10,16,24,0.16), rgba(8,12,18,0.24));
  border-color: rgba(120,200,180,0.14);
  backdrop-filter: blur(4px);
}

/* News-Feed */
.news-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.2rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-mut); }
.news-live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--accent); font-weight: 700; letter-spacing: 0.12em; }
.news-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: nmPulse 1.6s infinite; }
.news-meta__src { color: var(--text-dim); }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.news-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.1rem 1.2rem 1rem; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(14,22,34,0.72), rgba(10,16,24,0.78));
  border: 1px solid var(--line); border-radius: var(--radius);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  backdrop-filter: blur(3px);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.news-card:hover { border-color: rgba(53,230,208,0.4); transform: translateY(-3px); box-shadow: var(--glow-neon); }
.news-card__top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; }
.news-card__src { color: var(--neon); font-weight: 600; text-transform: uppercase; }
.news-card__time { color: var(--text-mut); white-space: nowrap; }
.news-card__title { font-size: 1.02rem; line-height: 1.32; color: var(--text); margin: 0; font-weight: 700; }
.news-card__excerpt { font-size: 0.88rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.news-card__more { margin-top: auto; padding-top: 0.3rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.news-card:hover .news-card__more { opacity: 1; transform: translateX(0); }

/* Karten-Raster */
.grid { display: grid; gap: 1.1rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.35rem; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: all .2s ease;
}
.btn--primary {
  color: #06210f; background: var(--accent); border-color: var(--accent-deep);
  box-shadow: var(--glow-accent);
}
.btn--primary:hover { background: var(--accent-strong); box-shadow: 0 0 30px rgba(159,232,112,0.4); color:#06210f; }
.btn--ghost {
  color: var(--neon); background: rgba(53, 230, 208, 0.06);
  border-color: rgba(53, 230, 208, 0.35);
}
.btn--ghost:hover { background: rgba(53, 230, 208, 0.14); box-shadow: var(--glow-neon); color: var(--neon); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.section--center .btn-row { justify-content: center; }

/* Cyberpunk-CTA: Neon-Rand, geschnittene Ecken, sanfter Glow-Puls */
.hero__cta { justify-content: center; margin-top: 1.1rem; }
.btn--cyber {
  color: var(--neon);
  background: rgba(53, 230, 208, 0.06);
  border: 1px solid rgba(53, 230, 208, 0.55);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.62rem 1.15rem;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  box-shadow: 0 0 16px rgba(53, 230, 208, 0.18), inset 0 0 12px rgba(53, 230, 208, 0.06);
  animation: cyberPulse 2.4s ease-in-out infinite;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn--cyber span { transition: transform .18s ease; display: inline-block; }
.btn--cyber:hover {
  color: #05130f; background: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 0 28px rgba(53, 230, 208, 0.55);
  animation: none;
}
.btn--cyber:hover span { transform: translateX(4px); }
@keyframes cyberPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(53,230,208,0.14), inset 0 0 12px rgba(53,230,208,0.05); }
  50%      { box-shadow: 0 0 24px rgba(53,230,208,0.34), inset 0 0 14px rgba(53,230,208,0.08); }
}
@media (prefers-reduced-motion: reduce) { .btn--cyber { animation: none; } }

/* ---------- Statusbadges ---------- */
.badge {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line);
}
.badge--live  { color: var(--accent); border-color: rgba(159,232,112,0.4); background: rgba(159,232,112,0.08); }
.badge--wip   { color: #ffd166; border-color: rgba(255,209,102,0.4); background: rgba(255,209,102,0.08); }
.badge--plan  { color: var(--text-mut); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(5, 8, 14, 0.72);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  width: 100%; margin: 0;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.85rem 1.2rem;
}
.brand { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text); }
.brand .b-portal { color: var(--text); }
.brand .b-engine { color: var(--accent); text-shadow: var(--glow-accent); }
.brand .b-v { font-family: var(--font-mono); font-size: 0.6em; color: var(--neon); margin-left: 0.35rem; letter-spacing: 0.1em; }
/* Hervorgehobener Cyberpunk-CTA links neben der Marke */
/* Button-Reihe mittig verteilt; Marke links, Login/Registrieren rechts */
.site-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; transform: translateX(3rem); }
.site-auth { flex: none; display: flex; align-items: center; gap: 0.5rem; }

/* Einheitliche Cyberpunk-Nav-Buttons */
.nav-btn {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--neon); text-decoration: none; white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(53,230,208,0.42); border-radius: 4px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background: rgba(53,230,208,0.06);
  box-shadow: 0 0 10px rgba(53,230,208,0.10);
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.nav-btn:hover, .nav-btn.active {
  color: #05130f; background: var(--neon); border-color: var(--neon);
  box-shadow: 0 0 20px rgba(53,230,208,0.45);
}
/* Auth-Varianten rechts */
.nav-btn--ghost { color: var(--text-dim); border-color: var(--line); background: transparent; box-shadow: none; }
.nav-btn--ghost:hover, .nav-btn--ghost.active { color: var(--text); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); box-shadow: none; }
.nav-btn--solid { color: #05210f; background: var(--accent); border-color: var(--accent-deep); box-shadow: var(--glow-accent); }
.nav-btn--solid:hover, .nav-btn--solid.active { color: #05210f; background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 24px rgba(159,232,112,0.4); }

/* Nav: eingeloggter Nutzer + Logout */
.nav-user { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
.logout-form { margin: 0; display: inline; }

/* Auth-Formulare (Login / Registrieren) */
.auth-wrap { display: flex; justify-content: center; }
.auth-card {
  width: min(100%, 460px);
  background: linear-gradient(180deg, rgba(12,18,28,0.42), rgba(8,12,18,0.58));
  border: 1px solid rgba(120,200,180,0.16); border-radius: 20px;
  padding: 1.9rem 1.9rem 1.7rem; box-shadow: var(--shadow-panel);
  backdrop-filter: blur(6px);
}
.auth-card h2 { margin: 0.3rem 0 0.4rem; }
.auth-sub { color: var(--text-dim); margin-bottom: 1.2rem; }
.auth-error {
  margin-bottom: 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,99,99,0.4); border-left: 3px solid #ff6363;
  background: rgba(255,99,99,0.08); color: #ffb3b3; font-size: 0.92rem;
}
.auth-info {
  margin-bottom: 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(159,232,112,0.4); border-left: 3px solid var(--accent);
  background: rgba(159,232,112,0.08); color: var(--accent-strong); font-size: 0.92rem;
}
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim); }
.auth-form input {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  background: rgba(5,8,14,0.6); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-form input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(53,230,208,0.15); }
.auth-submit { width: 100%; justify-content: center; margin-top: 0.3rem; }
.auth-hint { color: var(--text-mut); font-weight: 400; }
.auth-alt { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--text-dim); }
.auth-legal { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--text-mut); }
.app-locked { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--text-dim); }

/* Passwort-Feld mit Auge */
.auth-field { position: relative; display: block; }
.auth-field input { width: 100%; padding-right: 5.4rem; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--neon);
  background: rgba(53,230,208,0.08); border: 1px solid rgba(53,230,208,0.3);
  border-radius: 6px; padding: 0.32rem 0.55rem; cursor: pointer;
}
.auth-eye:hover { background: rgba(53,230,208,0.18); }

/* Passwort-Stärke */
.pw-strength { display: flex; align-items: center; gap: 0.7rem; margin: -0.3rem 0 0.3rem; height: 6px; }
.pw-strength > i { height: 6px; width: 0; border-radius: 3px; background: var(--accent); box-shadow: 0 0 6px currentColor; transition: width .25s ease, background .25s ease; }
.pw-strength > span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-mut); white-space: nowrap; margin-left: auto; }

/* Passwort-Übereinstimmung */
.pw-match { font-size: 0.8rem; margin: -0.3rem 0 0.3rem; min-height: 1.1rem; }
.pw-match.ok { color: var(--accent); }
.pw-match.bad { color: #ff8b8b; }

/* AGB-Häkchen */
.auth-check { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; }
.auth-check input { width: auto; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.auth-check a { color: var(--neon); }

/* Willkommens-Seite */
.wk-verify { max-width: 640px; margin: 0.4rem auto 0; border-left: 3px solid #ffd166; text-align: left; }
.wk-verify--ok { border-left-color: var(--accent); }
.wk-verify .eyebrow { margin-bottom: 0.4rem; }
.wk-verify .btn-row { margin-top: 0.9rem; }
.wk-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--text-mut); }

/* Mein Konto */
.konto-card { max-width: 640px; margin: 0.4rem auto 0; }
.konto-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.konto-row:last-child { border-bottom: 0; }
.konto-k { color: var(--text-dim); font-size: 0.9rem; }
.konto-v { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 0.6rem; text-align: right; }
.konto-actions { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; }
.konto-logout { margin: 0; }
a.nav-user { text-decoration: none; }
a.nav-user:hover { color: var(--accent-strong); }

/* Streifen direkt unter der Navbar: links Label, mittig Gruß */
.site-subbar {
  width: 100%;
  padding: 0.5rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: rgba(53, 230, 208, 0.05);
  border-bottom: 1px solid var(--line);
}
.site-subbar__label {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--neon);
}
.site-subbar__welcome {
  justify-self: center; text-align: center;
  font-family: var(--font-head);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--neon);
  text-shadow: var(--glow-neon);
}
.site-subbar__spacer { justify-self: end; }
@media (max-width: 720px) {
  .site-subbar { grid-template-columns: 1fr; }
  .site-subbar__label, .site-subbar__spacer { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding: 2rem 0;
  color: var(--text-mut); font-size: 0.85rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--text-dim); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(0.8rem, 1.6vw, 1.4rem); padding-bottom: clamp(0.8rem, 1.6vw, 1.4rem); text-align: center; }
.hero h1 {
  max-width: 24ch; margin: 0 auto 0.6rem;
  line-height: 1.02; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.hero h1 .nw { white-space: nowrap; }
.hero h1 .hw { color: var(--accent); white-space: nowrap; text-shadow: var(--glow-accent); }
.hero__logo {
  display: block; margin: 0 auto 0.4rem; width: 84px; height: auto;
  filter: drop-shadow(0 0 22px rgba(159, 232, 112, 0.28));
}
.hero .lead { margin-top: 0.7rem; max-width: 68ch; font-size: clamp(0.98rem, 1.2vw, 1.08rem); }
.hero .btn-row { margin-top: 1.8rem; }

/* Hero: Text bleibt zentriert, Live-Monitor schwebt als HUD rechts oben (ab Desktop) */
.hero { position: relative; }
.node-monitor { display: none; }
@media (min-width: 1200px) {
  .node-monitor {
    display: block; position: absolute; top: 2.4rem; width: 440px;
    right: calc((100vw - var(--content-max)) / -2 + 1.4rem);
  }
}

/* Live-Monitor (Cyberpunk-HUD) */
.node-monitor { text-align: left; }
.node-monitor__cap {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mut); margin: 0 0 0.45rem 0.25rem;
}
.node-monitor__panel {
  background: linear-gradient(180deg, rgba(10,16,24,0.10), rgba(8,12,18,0.16));
  border: 1px solid rgba(53,230,208,0.28);
  border-radius: 4px;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  padding: 1rem 1.2rem 1.1rem;
  box-shadow: 0 0 24px rgba(53,230,208,0.08), inset 0 0 18px rgba(53,230,208,0.025);
  backdrop-filter: blur(2px);
}
.node-monitor__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon);
}
.node-monitor__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: nmPulse 1.6s ease-in-out infinite;
}
@keyframes nmPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.node-monitor__big { display: flex; align-items: center; gap: 0.55rem; margin: 0.7rem 0 0.2rem; }
.node-monitor__big #nm-nodes {
  font-family: var(--font-head); font-weight: 800; font-size: 2.7rem; line-height: 1;
  color: var(--text); text-shadow: var(--glow-accent);
}
.node-monitor__unit { font-size: 0.72rem; line-height: 1.1; color: var(--text-dim); }
.node-monitor__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.76rem; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--line);
}
.node-monitor__k { color: var(--text-dim); }
.node-monitor__v { font-family: var(--font-mono); color: var(--neon); font-weight: 600; }
.node-monitor__spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 0.7rem; }
.node-monitor__spark i {
  flex: 1; min-height: 10%; border-radius: 1px;
  background: linear-gradient(180deg, var(--neon), rgba(53,230,208,0.18));
  transition: height .5s ease;
}
.node-monitor__foot {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-mut);
  margin-top: 0.6rem; letter-spacing: 0.03em;
}
@media (prefers-reduced-motion: reduce) { .node-monitor__dot { animation: none; } }

/* Willkommen: zweispaltig (Text | Seitenleiste) */
.welcome-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 1.8rem; align-items: start; margin-top: 1.2rem;
}
.welcome-grid .reading { max-width: none; }
.welcome-side { display: grid; gap: 1.1rem; position: sticky; top: 92px; }
.welcome-side .panel--mission { max-width: none; margin-top: 0; }

/* Fakten-Box */
.factbox .facts { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.facts li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.facts li:last-child { border-bottom: 0; }
.facts__k { color: var(--text-dim); }
.facts__v { color: var(--accent); font-family: var(--font-mono); font-size: 0.84rem; font-weight: 600; }

@media (max-width: 820px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-side { position: static; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-nav { display: none; }  /* mobile Nav folgt später */
}

/* ===== Unser CyberAgent News – Banner unter der Navbar ===== */
.cybernews-bar{display:flex;align-items:center;gap:.9rem;padding:.42rem 1rem;background:rgba(6,10,16,.72);border-bottom:1px solid rgba(53,230,208,.18);font-size:.82rem;overflow:hidden}
.cybernews-bar__label{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--neon,#35e6d0);font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.cybernews-bar__label:hover{filter:brightness(1.2)}
.cybernews-bar__dot{width:8px;height:8px;border-radius:50%;background:var(--neon,#35e6d0);box-shadow:0 0 8px var(--neon,#35e6d0);animation:cybernews-pulse 1.6s ease-in-out infinite}
@keyframes cybernews-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cybernews-bar__viewport{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.cybernews-bar__track{display:inline-flex;width:max-content;animation:cybernews-marq var(--marq,45s) linear infinite}
.cybernews-bar:hover .cybernews-bar__track{animation-play-state:paused}
.cybernews-run{display:inline-flex;align-items:center;gap:.9rem;padding-right:.9rem;white-space:nowrap}
@keyframes cybernews-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cybernews-item{color:#cdd6e2;text-decoration:none;white-space:nowrap}
.cybernews-item:hover{color:#fff}
.cybernews-item__src{color:var(--accent,#f5b942);font-weight:600;margin-right:.4rem}
.cybernews-sep{color:rgba(255,255,255,.25)}
@media (prefers-reduced-motion:reduce){.cybernews-bar__track{animation:none}}

/* ===== Mitmachen – App-Look: Cut-Corner-Kacheln mit Neon-Akzent ===== */
.mit-tile{position:relative;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));border:1px solid rgba(53,230,208,0.22);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mit-tile:hover{transform:translateY(-3px);border-color:rgba(53,230,208,0.55);box-shadow:0 10px 30px -12px rgba(53,230,208,0.45)}
.mit-tile .panel__icon{color:var(--neon,#35e6d0)}
.mit-erleuchtung{border-color:rgba(245,185,66,0.4);background:linear-gradient(180deg,rgba(245,185,66,0.06),rgba(6,10,16,0.4))}
.mit-erleuchtung:hover{border-color:rgba(245,185,66,0.7);box-shadow:0 10px 30px -12px rgba(245,185,66,0.5)}
.mit-erleuchtung .panel__icon{color:var(--accent,#f5b942)}