/* ==========================================================
   CYBER SUNSET BLAZE — EXTREME RED-ORANGE (Vollständige Version)
   - STATISCHER HINTERGRUND
   - NEON GLOW FÜR CARDS/KACHELN hinzugefügt
   ========================================================== */

/* ===== 1. BASISPALETTE (ROT-ORANGE / BLAZE) ===== */
:root{
  /* Grundfarben */
  --bg:#100300;                  /* Extrem dunkles, fast schwarzes Rot-Braun (für Tiefe) */
  --text:#ffecec;                /* Sehr helles, leicht warmes Weiß */
  --text-muted:#ffc9aa;           /* Helles Kupfer-Orange */

  --header:#2b0500;               /* Dunkles, sattes Rot-Braun für die Navbar */
  --surface:#1d0500;              /* Karten/Zellen - noch dunkler als BG für Kontrast */
  --surface-alt:#250702;          /* alternierend, minimal heller */
  --surface-hover:#4f1003;        /* Intensiver Rot-Orange-Hover */

  --accent:#ff5a1f;               /* HAUPT-AKZENT: Intensives Orange-Rot (Blaze) */
  --accent-600:#f03000;           /* Kräftiges, tiefes Rot für Hover/Active */
  --border:#ff733d;               /* Leuchtendes Rot-Orange für Kanten */
  --link:#ffad8a;                 /* Heller, weicherer Rot-Orange-Link */

  /* Zusatzpepp */
  --accent-yellow:#ffc857;        /* Golden-Yellow bleibt (guter Komplementärkontrast) */

  /* Ultra-Preset */
  --turbo:1.7;                    /* Erhöht auf 1.7 für "EXTREME" */

  /* Effekt-Skalen (werden mit --turbo multipliziert) */
  --fx-glow: calc(8px + (var(--turbo) * 10px));
  --fx-neon: calc(14px + (var(--turbo) * 18px));
  --fx-inner: calc(1px + (var(--turbo) * 1px));
  --fx-spot: calc(.22 + (var(--turbo) * .25));
  --fx-spark-op: calc(.35 + (var(--turbo) * .40));
  --fx-speed: calc(1s - (var(--turbo) * .3s));
}

/* ==================
   2. Base / Global & STATISCHER HINTERGRUND
   ================== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  background-color: var(--bg);
  color: var(--text);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-top:0;
  overflow-x:hidden;
  box-shadow:
    inset 0 60px 180px rgba(255, 90, 31, .25),
    inset 0 -60px 180px rgba(240, 48, 0, .20);
  position:relative;
}

/* Auswahl & Scrollbar */
::selection{
  background: color-mix(in oklab, var(--accent) 70%, var(--accent-yellow) 20%, white 10%);
  color:#150300;
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,
    var(--accent),
    color-mix(in oklab, var(--accent-600) 90%, black)
  );
  border:4px solid transparent; border-radius:12px; background-clip: padding-box;
}
::-webkit-scrollbar-track{
  background: radial-gradient(circle at 20% 0, #250702 0, var(--bg) 55%);
}

/* Hintergrund-Ebenen: Spots + Scanlines + Sparkles (STATISCH) */
body::before,
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  animation: none !important;
}
body::before{
  background:
    radial-gradient(1300px 900px at 80% 5%,
      rgba(255,90,31, var(--fx-spot)), transparent 65%
    ),
    radial-gradient(1000px 800px at 10% 85%,
      rgba(240,48,0, calc(var(--fx-spot) - .05)), transparent 60%
    ),
    radial-gradient(900px 700px at 55% 50%,
      rgba(255,200,87, calc(var(--fx-spot) - .08)), transparent 65%
    ),
    linear-gradient(180deg, #1d0500 0%, var(--bg) 65%, #080100 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
body::after{
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(2px 2px at 10% 20%, rgba(255,90,31, var(--fx-spark-op)) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 40%, rgba(255,173,138, var(--fx-spark-op)) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 75%, rgba(240,48,0, calc(var(--fx-spark-op) * .9)) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 78%, rgba(255,200,87, var(--fx-spark-op)) 50%, transparent 51%);
  background-size: 100% 3px, 3px 100%, 3000px 3000px, 4000px 4000px, 5000px 5000px, 6000px 6000px;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  mix-blend-mode:color-dodge;
  opacity: calc(.45 + (var(--turbo) * .30));
}

/* ==================
   3. Navbar
   ================== */
.custom-navbar{
  position:sticky; top:0; z-index:50;
  background-color: color-mix(in oklab, var(--header) 70%, #4f1003 30%);
  backdrop-filter: blur(16px) saturate(180%);
  transition: background-color .3s ease, box-shadow .3s ease;
  border-bottom:2px solid var(--accent-600);
  box-shadow:
    0 8px 24px rgba(0,0,0,.6),
    0 0 calc(8px + var(--turbo)*8px)
      color-mix(in oklab, var(--accent) 80%, var(--accent-600) 20%) inset;
}
.navbar-brand{
  font-size:1.5rem; color:var(--text) !important; font-weight:800; letter-spacing:.4px;
  text-shadow:0 0 16px rgba(255,90,31,.6);
}
.navbar .nav-link{
  color:#ffffff !important;
  transition:color .2s ease, text-shadow .2s ease, background-size .25s ease, transform .15s ease;
  font-size:1.05rem; font-weight:600;
  background-image: linear-gradient(90deg,
    var(--accent-600),
    color-mix(in oklab, var(--accent) 60%, var(--accent-600) 40%),
    var(--accent-yellow)
  );
  background-repeat:no-repeat;
  background-size:0% 3px;
  background-position: 0 100%;
}
.navbar .nav-link:hover{
  color:#ffffff !important;
  text-shadow:0 0 var(--fx-glow) rgba(255,50,0,.8);
  background-size:100% 3px;
  transform: translateY(-2px);
}

/* ==================
   4. Header Section
   ================== */
.welcome-section{
  position:relative;
  height:var(--header-height, 450px);
  background-image: var(--header-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--header-visible, center center);
  margin-top:0;
  overflow:hidden;
  background-attachment: fixed; /* Parallaxe */
  animation: none !important;
}
.welcome-section .overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 75% 15%,
      rgba(255,90,31, calc(.3 + var(--turbo) * .3)), transparent 65%
    ),
    radial-gradient(800px 600px at 20% 85%,
      rgba(240,48,0, calc(.25 + var(--turbo) * .25)), transparent 60%
    ),
    conic-gradient(from 200deg at 50% 10%,
      rgba(255,90,31,.45),
      rgba(240,48,0,.40),
      rgba(255,173,138,.35),
      transparent 75%
    );
  animation: none !important;
  filter: drop-shadow(0 0 calc(12px + var(--turbo)*14px)
    color-mix(in oklab, var(--accent-600) 60%, var(--accent) 40%));
}
.welcome-section .content{ z-index:2; }
main{ position:relative; z-index:2; }
.welcome-section::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px; height:80px;
  background: linear-gradient(to bottom, rgba(16,3,0,0) 0%, var(--bg) 100%);
}

/* ==================
   5. Cards / Kacheln (NEU HINZUGEFÜGT)
   ================== */
.card, .content-box{
  background:
    radial-gradient(circle at 100% 0,
      rgba(255,90,31,.2) 0, transparent 65%)
    ,color-mix(in oklab, var(--surface) 90%, black 10%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  color:var(--text);
  backdrop-filter: blur(4px);
  box-shadow:
    0 8px 25px rgba(0,0,0,.65),
    0 0 calc(10px + var(--turbo)*10px)
      color-mix(in oklab, var(--accent) 70%, var(--accent-yellow) 30%);
  transition: all .3s ease;
}

.card:hover, .content-box:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow:
    0 12px 35px rgba(0,0,0,.8),
    0 0 calc(18px + var(--turbo)*16px)
      color-mix(in oklab, var(--accent-600) 65%, var(--accent) 35%);
}

/* ==================
   6. Footer
   ================== */
.footer-glow{
  background:
    radial-gradient(circle at 10% 0,
      rgba(255,200,87,.35) 0, transparent 60%)
    ,var(--header);
  border-top:2px solid var(--accent-600);
  color:var(--text);
  box-shadow: 0 -10px 30px rgba(0,0,0,.65);
}
.footer-links{ font-size:.9rem; }
.footer-link{
  color: var(--link);
  text-decoration:none;
  margin:0 .5rem;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-link:hover{
  color:#ffffff;
  text-decoration:underline;
  text-shadow:0 0 10px rgba(240,48,0,.55);
}
/* Fancy Footer-Box */
.footer-box{
  max-width:800px;
  margin:40px auto 0;
  padding:25px;
  text-align:center;
  font-size:.9rem;
  color:#ffefdb;
  border-radius:18px;
  background:
    radial-gradient(circle at 0 0,
      rgba(255,90,31,.25) 0, transparent 60%)
    ,rgba(255,255,255,.06);
  box-shadow:
    0 4px 18px rgba(0,0,0,.55),
    0 0 0 1px rgba(240,48,0,.15) inset;
  backdrop-filter: blur(8px);
}
.footer-box a{ color:#ff8a2f; text-decoration:none; margin:0 8px; font-weight:600; }
.footer-box a:hover{ text-decoration:underline; }

/* ==================
   7. Links global
   ================== */
a{
  color:var(--link);
  text-decoration:none;
  transition: color .2s ease, text-shadow .2s ease, filter .2s ease, transform .12s ease;
}
a:hover{
  color:#ffffff;
  text-shadow:
    0 0 calc(var(--fx-glow) - 1px)
      color-mix(in oklab, var(--accent-600) 75%, var(--accent) 25%),
    0 0 calc(var(--fx-neon) - 4px) rgba(255,50,0,.6);
  filter: saturate(calc(1.2 + var(--turbo) * .15));
  transform: translateY(-1px);
}

/* ==================
   8. Buttons
   ================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px;
  border-radius:18px; border:none; cursor:pointer;
  font-weight:700; letter-spacing:.4px;
}
.btn-primary, .btn-vorschlagen{
  background:linear-gradient(135deg,
    var(--accent-600),
    var(--accent),
    var(--accent-yellow)
  ) !important;
  color:#150300 !important;
  box-shadow:
    0 0 0 calc(var(--fx-inner) + 1px) rgba(255,224,193,.5) inset,
    0 12px 28px rgba(0,0,0,.65),
    0 0 calc(var(--fx-neon) + 4px)
      color-mix(in oklab, var(--accent-600) 70%, var(--accent) 30%);
  position:relative; overflow:hidden;
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-primary:hover, .btn-vorschlagen:hover{
  filter:brightness(1.15) saturate(1.2);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 calc(var(--fx-inner) + 2px) rgba(255,224,193,.7) inset,
    0 18px 36px rgba(0,0,0,.8),
    0 0 calc(var(--fx-neon) + 16px)
      color-mix(in oklab, var(--accent-600) 75%, var(--accent) 25%);
}
/* Glanzstreifen */
.btn-primary::after, .btn-vorschlagen::after{
  content:''; position:absolute; inset:-50% -20% auto; height:220%;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255,255,255,.7) 50%,
    transparent 65%
  );
  transform: translateX(-130%) rotate(8deg);
  animation: sheen calc(1.8s - (var(--turbo) * .4s)) cubic-bezier(.2,.6,.2,1) infinite;
}
/* Ripple beim Klick */
.btn-primary:active::before, .btn-vorschlagen:active::before{
  content:''; position:absolute; left:50%; top:50%; width:14px; height:14px;
  background: rgba(240,48,0,.6); border-radius:50%;
  transform: translate(-50%,-50%);
  animation: ripple calc(.4s - (var(--turbo) * .1s)) ease-out 1;
}
.btn-success{
  background-color:#28a745 !important;
  border:none !important;
  color:#02110a !important;
}
.btn-success:hover{ background-color:#218838 !important; }

/* ==================
   9. Formulare
   ================== */
label{
  display:block; margin-bottom:8px;
  font-weight:600; color:#ffefdd;
  text-shadow:0 0 8px rgba(0,0,0,.7);
}
.form-select,
.form-select:focus{
  background-color: color-mix(in oklab, var(--surface-alt) 80%, #3e1608 20%);
  color: var(--text-muted);
  border:1px solid color-mix(in oklab, var(--border) 75%, #a44d1e 25%);
  box-shadow:none;
  border-radius:12px; padding:10px 12px; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease, transform .12s ease;
}
.form-select:focus{
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px rgba(240,48,0,.35),
    0 0 calc(14px + var(--turbo)*14px)
      color-mix(in oklab, var(--accent-600) 70%, var(--accent) 30%);
  transform: translateY(-2px);
}
.input{
  width:100%;
  background-color: color-mix(in oklab, var(--surface-alt) 80%, #3e1608 20%);
  color: var(--text);
  border:1px solid color-mix(in oklab, var(--border) 75%, #a44d1e 25%);
  border-radius:12px; padding:10px 12px; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease, transform .12s ease;
}
.input:focus{
  border-color: var(--accent-600);
  box-shadow:
    0 0 0 4px rgba(240,48,0,.35),
    0 0 calc(14px + var(--turbo)*14px)
      color-mix(in oklab, var(--accent-600) 70%, var(--accent) 30%);
  background-color: color-mix(in oklab, var(--surface-alt) 70%, white 30%);
  transform: translateY(-2px);
}

/* ==================
   10. Tabellen
   ================== */
.table{
  background-color: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:18px; border:2px solid var(--border);
}
.table thead{
  background: linear-gradient(90deg, #4f1003, #7a1d05);
}
.table thead th{
  background-color: transparent !important;
  color: #fff4ec !important;
  border-color: var(--border) !important;
  padding:14px 16px; text-align:left; border-bottom:2px solid var(--accent-600);
  text-shadow:0 0 6px rgba(0,0,0,1);
}
.table td{
  background-color: var(--surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  padding:12px 16px; border-top:1px solid color-mix(in oklab, var(--border) 65%, black);
}
.table tbody tr:nth-child(odd) td{
  background-color: var(--surface-alt) !important;
}
.table tbody tr:hover td{
  background:
    radial-gradient(circle at 0 0,
      rgba(255,90,31,.3) 0, transparent 60%)
    ,var(--surface-hover) !important;
  color:#ffffff !important;
  position:relative;
  box-shadow:
    inset 0 0 0 9999px rgba(255,90,31, calc(.08 + var(--turbo)*.08)),
    0 0 calc(8px + var(--turbo)*10px)
      color-mix(in oklab, var(--accent-600) 70%, var(--accent) 30%);
}

/* ==================
   11. Alerts
   ================== */
.alert-success, .alert-info{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--header) 70%, #5b1b08 30%) 0%,
    color-mix(in oklab, var(--surface) 80%, #2c0c05 20%) 100%);
  border-color: var(--accent-600);
  color: var(--text-muted);
  position:relative;
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(255,90,31,.25) inset,
    0 8px 20px rgba(0,0,0,.6);
}
.alert-success::before, .alert-info::before{
  content:''; position:absolute; left:-2px; top:-2px; bottom:-2px; width:8px;
  background: linear-gradient(180deg,
    var(--accent-600),
    var(--accent),
    var(--accent-yellow)
  );
  border-top-left-radius:14px; border-bottom-left-radius:14px;
  box-shadow: 0 0 calc(16px + var(--turbo)*12px)
    color-mix(in oklab, var(--accent-600) 65%, var(--accent) 35%);
}

/* ==================
   12. Glows / Typo
   ================== */
.text-glow{
  color:#fff8f2;
  text-shadow:
    0 0 var(--fx-glow)
      color-mix(in oklab, var(--accent-600) 50%, var(--accent) 30%, var(--accent-yellow) 20%),
    0 0 calc(var(--fx-neon) + 4px)
      color-mix(in oklab, var(--accent-yellow) 50%, var(--accent) 50%);
}
.neon-text{
  color:#ffecdc;
  text-shadow:
    0 0 calc(var(--fx-glow) + 2px)
      color-mix(in oklab, var(--accent-600) 70%, var(--accent) 30%),
    0 0 calc(var(--fx-neon) + 8px)
      color-mix(in oklab, var(--accent-600) 60%, var(--accent-yellow) 40%);
}

/* ==================
   13. Animations
   ================== */
@keyframes fadein{
  from{ opacity:0; transform: translateY(20px); }
  to{ opacity:1; transform: translateY(0); }
}
.animate-fadein{ animation: fadein 1.0s ease-out forwards; opacity:0; }
.fadein-section{ opacity:0; transform: translateY(30px); transition: all .8s ease-out; }
.fadein-section.visible{ opacity:1; transform: translateY(0); }
@keyframes sheen{
  0%{ transform: translateX(-130%) rotate(8deg); opacity:.0; }
  20%{ opacity:.95; }
  60%{ opacity:.0; }
  100%{ transform: translateX(130%) rotate(8deg); opacity:0; }
}
@keyframes ripple{
  from{ width:14px; height:14px; opacity:.6; }
  to{ width:260px; height:260px; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
}