/* ==========================================================
   CYBER SUNSET BLAZE LAYOUT (KOMPLETT MIT STRUKTUR)
   ========================================================== */

/* ===== 1. BASISPALETTE (ROT-ORANGE / BLAZE) ===== */
:root{
  /* Grundfarben */
  --bg:#100300;                  
  --text:#ffecec;                
  --text-muted:#ffc9aa;           

  --header:#2b0500;               
  --surface:#1d0500;              
  --surface-alt:#250702;          
  --surface-hover:#4f1003;        

  --accent:#ff5a1f;               
  --accent-600:#f03000;           
  --border:#ff733d;               
  --link:#ffad8a;                 

  /* Zusatzpepp */
  --accent-yellow:#ffc857;        

  /* Ultra-Preset */
  --turbo:1.7;                    

  /* Effekt-Skalen */
  --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));
}

/* ==================
   2. Base / Global & STATISCHER HINTERGRUND
   ================== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  background-color: var(--bg);
  color: var(--text);
  /* Verwendung der externen Schriftart für futuristischen Look */
  font-family:'Roboto', 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;
}
.container-sm { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px;
}
main { min-height: calc(100vh - 80px); } /* Platz für den Footer lassen */

/* Statischer Hintergrund (Unverändert) */
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%);
  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;
}
.custom-navbar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
}
.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);
  font-family: 'Orbitron', sans-serif;
}
.custom-navbar .nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}
.navbar .nav-link{
  color:#ffffff !important; 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);
}
.btn-login { padding: 8px 15px !important; border-radius: 8px !important; }

/* ==================
   4. Header Section / Welcome
   ================== */
.welcome-section{
  position:relative;
  height:var(--header-height, 450px);
  /* Hintergrundbild: Platzhalter für das Cities/Sunset Bild */
  background-image: url('{{Deine-Sunset-City-Grafik-URL}}'); 
  background-repeat:no-repeat; background-size:cover; background-position: center center;
  overflow:hidden; background-attachment: fixed;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.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%);
  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; }
.welcome-section h1 { 
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem; 
    margin-bottom: 10px;
}
.welcome-section p { font-size: 1.5rem; }

/* ==================
   5. Glow Bar (Neue Sektion aus dem Bild)
   ================== */
.glow-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 40px;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 0 10px var(--accent-600), 0 0 20px rgba(255, 90, 31, 0.5) inset;
    background: color-mix(in oklab, var(--bg) 80%, #ff5a1f 10%);
}
.glow-item {
    padding: 5px 10px;
    border-radius: 4px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 0 0 8px var(--accent-yellow);
    box-shadow: 0 0 10px rgba(255, 90, 31, 0.4);
    background: rgba(255, 90, 31, 0.08);
}

/* ==================
   6. Hauptinhalt & Struktur
   ================== */
.main-content {
    padding-top: 40px;
    padding-bottom: 80px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ==================
   7. Cards / Kacheln (Mit Neon-Glow)
   ================== */
.card, .content-box, .sfourn-box, .form-select-box, .table-placeholder{
  /* Hintergrund und Border */
  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:25px;
  color:var(--text);
  backdrop-filter: blur(4px);
  /* Neon Glow */
  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;
  position: relative; /* Für die Herzen/Symbole */
}

.card:hover, .content-box:hover, .sfourn-box:hover, .form-select-box:hover, .table-placeholder: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%);
}

.card-title {
    font-size: 1.4rem;
    font-family: 'Orbitron', sans-serif;
    border-bottom: 1px solid rgba(255, 90, 31, 0.5);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--accent);
}
.accent-yellow { color: var(--accent-yellow); }
.muted { color: var(--text-muted); font-size: 0.9rem; }
.heart, .heart-alt {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--accent);
    cursor: pointer;
}
.heart-alt { font-size: 1.2rem; }

/* Spezifische Styling der Formulare / Content Boxes */
.content-box .link-placeholder {
    padding: 10px;
    background: color-mix(in oklab, var(--surface-alt) 70%, black);
    border: 1px dashed var(--link);
    color: var(--link);
    text-align: center;
    margin: 15px 0 20px;
    border-radius: 8px;
}
.sfourn-box { text-align: center; }
.form-select-box { text-align: center; }
.table-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Platzhalter für fehlende Elemente */
.label-placeholder {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(255, 90, 31, 0.3);
}
.placeholder-text {
    text-align: center;
    margin-top: 60px;
    color: var(--text-muted);
}

/* ==================
   8. Buttons (Unverändert)
   ================== */
.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%);
}
.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 1.8s cubic-bezier(.2,.6,.2,1) infinite; }
.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 0.4s ease-out 1; }
.btn-success{ background-color:var(--accent-600) !important; border:none !important; color:#ffffff !important; box-shadow: 0 0 10px var(--accent-600); }
.btn-success:hover{ background-color:var(--accent) !important; }

/* ==================
   9. Footer (Unverändert)
   ================== */
.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);
  padding: 20px 0; text-align: center;
}
.footer-links{ margin-top: 10px; }
.footer-link{ color: var(--link); text-decoration:none; margin:0 .8rem; transition: color .2s ease, text-shadow .2s ease; font-size:.9rem; }
.footer-link:hover{ color:#ffffff; text-decoration:underline; text-shadow:0 0 10px rgba(240,48,0,.55); }

/* ==================
   10. Typo & Links
   ================== */
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); }
.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%);
}

/* ==================
   11. Media Queries (Responsiveness)
   ================== */
@media (max-width: 992px) {
    .card-grid, .form-grid {
        grid-template-columns: 1fr; /* Alle Elemente untereinander auf kleinen Bildschirmen */
    }
}

/* ==================
   12. Animations
   ================== */
@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; } }