:root{
  /* Finn Brand */
  --f-blue:#1D4ED8;     /* Primary */
  --f-violet:#7C3AED;   /* Secondary */
  --f-electric:#0EA5FF; /* Neon accent */
  --f-cyan:#22D3EE;     /* Neon accent */
  --f-bg:#0B1020;       /* Deep Navy */
  --f-bg2:#0A0F1E;      /* Panels */
  --f-text:#FFFFFF;
  --f-muted:#94A3B8;

  /* Mapping der alten Variablen (Kompatibilität) */
  --bg: var(--f-bg);
  --fg: var(--f-text);
  --accent: linear-gradient(135deg, var(--f-blue), var(--f-violet));
  --accent-hover: linear-gradient(135deg, #2656ef, #8a4cf0);

  --shadow: 0 24px 60px rgba(0,0,0,.35);
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}

html,body{
  height:100%;
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(80% 80% at 0% 0%, rgba(14,165,255,.12), transparent 60%),
    radial-gradient(75% 75% at 100% 0%, rgba(124,58,237,.12), transparent 55%),
    linear-gradient(180deg, #0A0F1E, var(--bg));
  display:flex;
  flex-direction:column;
}

/* Header */
header{
  text-align:center;
  padding:40px 0 10px;
}
header h1{
  margin:0;
  font-size:3rem;
  letter-spacing: .5px;
  font-weight:800;
  /* Gradient Text */
  background: linear-gradient(135deg, var(--f-electric), var(--f-violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 22px rgba(14,165,255,.35);
}

/* Main */
main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:20px;
  width:100%;
  box-sizing:border-box;
}

/* Buttons */
.button{
  background: var(--accent);
  color:#fff;
  padding:15px 40px;
  border:none;
  border-radius:999px;
  font-size:1.2rem;
  font-weight:700;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 26px rgba(14,165,255,.20);
}
.button:hover{
  background: var(--accent-hover);
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 32px rgba(124,58,237,.28);
}

/* Footer */
footer{
  text-align:center;
  padding:20px 0;
  font-size:.9rem;
  color: var(--f-muted);
}

/* Recipe-Seiten */
.recipe-container{
  max-width:800px; width:100%; margin:auto;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:20px;
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: var(--shadow);
}
.recipe-media{
  width:100%;
  max-width:400px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  box-shadow: var(--shadow);
  display:block;
  margin:0 auto;
}
.recipe-text{ margin-top:20px; text-align:left; line-height:1.6; }
.back-bar{ margin-top:40px; text-align:center; }

/* Formulare (Uploader) */
input[type=text],
input[type=password],
input[type=file],
textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  font-size:1rem;
  background: rgba(255,255,255,.06);
  color: var(--fg);
  border:1px solid rgba(255,255,255,.18);
  box-sizing:border-box;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus{
  border-color: var(--f-electric);
  box-shadow: 0 0 0 3px rgba(14,165,255,.28);
}

/* Mobile */
@media (max-width:600px){
  header h1{ font-size:2rem; }
  .button{ font-size:1.05rem; padding:12px 28px; }
  .recipe-container{ padding:16px; }
}