:root{--bg:#0f1115;--card:#161a22;--text:#e7e7e7;--muted:#a7a7a7;--accent:#8bb8ff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent);text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:1rem}
header h1 a{color:var(--text)}
nav a{margin-right:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px;margin:0.5rem 0}
.list{list-style:none;padding:0}
.list li{padding:0.5rem 0;border-bottom:1px solid #222}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.post .content p{line-height:1.6}
input,textarea,button{width:100%;padding:0.7rem;border-radius:10px;border:1px solid #333;background:#0e1118;color:var(--text);}
button{cursor:pointer}
.btn{display:inline-block;padding:0.6rem 0.9rem;background:#243049;border-radius:10px}
footer{margin-top:2rem;border-top:1px solid #222;padding-top:1rem}
.newsletter{display:flex;gap:0.5rem;align-items:center}
.newsletter input{flex:1}
.error{color:#ff8484}

.site-header{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.site-header .logo img{height:64px;border-radius:8px}
.brand h1{margin:.2rem 0 .4rem;font-size:2rem}
nav a{margin-right:1rem}


/* === HERO BANNER === */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 1.5rem 0 2rem;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: #0b0b10;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('/img/Banner.jpg') center/cover no-repeat;
  filter: brightness(0.7);
  opacity: 0.9;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 80%;
}

.hero h2 {
  font-family: "EB Garamond", serif;
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.hero-sub {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.2rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  background: #d4a14b;
  color: #1b1b1b;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  background: #f1b955;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* === Typo-Upgrade === */
body { font-family: "EB Garamond", serif; }
.brand h1, .hero h2 { font-weight: 600; }

/* === Mondlicht-Glühen im Hero === */
.hero { position: relative; }
.hero::before{
  content:"";
  position:absolute; inset:0;
  /* warmes Gold oben, bläuliches Leuchten unten */
  background:
    radial-gradient(600px 280px at 50% 15%, rgba(255,223,128,.22), transparent 60%),
    radial-gradient(900px 420px at 50% 100%, rgba(65,105,225,.18), transparent 65%);
  mix-blend-mode: screen;
  pointer-events:none;
  animation: slowGlow 8s ease-in-out infinite alternate;
  z-index:1;
}
.hero-bg{ z-index:0; }           /* Hintergrundbild */
.hero-inner{ z-index:2; }        /* Text/Buttons obenauf */

@keyframes slowGlow{
  0%   { filter: blur(0.5px) brightness(1);   opacity: .85; }
  100% { filter: blur(1px)   brightness(1.08); opacity: 1;  }
}

/* Logo leicht leuchten lassen (falls im Header sichtbar) */
.site-header .logo img{
  filter: drop-shadow(0 8px 24px rgba(183,140,75,.35));
}
/* === Transparenter Header mit Übergang === */
.site-header {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background 0.4s ease;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.scrolled .site-header {
  background: rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* === Scroll Down Pfeil (final mit Glow) === */

.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20; /* Höher als Hero-Bild */
  animation: floaty 3.5s ease-in-out infinite;
}
.scroll-down a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #f2dca3;
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  transition: 0.3s ease;
}
.scroll-down a:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(3px) scale(1.05);
  color: #ffe8a0;
}
.scroll-down svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
@keyframes floaty {
  0%,100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ==== Scroll-Down Auto-Hide ==== */
.scroll-down{ transition: opacity .35s ease, transform .35s ease; }
.scroll-down.hide{ opacity:0; transform: translateX(-50%) translateY(12px); pointer-events:none; }

/* ==== Hero-Leuchtpartikel ==== */
.hero { position: relative; overflow: hidden; }
.hero-particles{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  mix-blend-mode:screen;
}
.hero-particles span{
  position:absolute; display:block; width:4px; height:4px; border-radius:50%;
  background: radial-gradient(circle,#ffd98a 0%, #ffb94d 40%, rgba(255,185,77,0) 70%);
  opacity:.75; filter: blur(.3px) drop-shadow(0 0 6px rgba(255,223,128,.6));
  animation: floatUp 14s linear infinite, twinkle 2.8s ease-in-out infinite;
}

/* zufällige Position/Größe/Verzögerung für 24 Partikel */
.hero-particles span:nth-child(odd){ width:5px; height:5px; }
.hero-particles span:nth-child(3n){ width:3px; height:3px; }

@keyframes floatUp{
  0% { transform: translateY(10%); opacity:.0 }
  10%{ opacity:.7 }
  90%{ opacity:.7 }
  100%{ transform: translateY(-90%); opacity:0 }
}
@keyframes twinkle{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(255,223,128,.5)); opacity:.7 }
  50%{ filter: drop-shadow(0 0 12px rgba(255,223,128,.9)); opacity:1 }
}

/* Verteile Partikel grob im Raum */
.hero-particles span:nth-child(1){ left:8%;  top:70%; animation-delay:.2s }
.hero-particles span:nth-child(2){ left:18%; top:65%; animation-delay:1.1s }
.hero-particles span:nth-child(3){ left:28%; top:75%; animation-delay:.6s }
.hero-particles span:nth-child(4){ left:38%; top:68%; animation-delay:1.8s }
.hero-particles span:nth-child(5){ left:48%; top:72%; animation-delay:.9s }
.hero-particles span:nth-child(6){ left:58%; top:67%; animation-delay:1.4s }
.hero-particles span:nth-child(7){ left:68%; top:73%; animation-delay:.3s }
.hero-particles span:nth-child(8){ left:78%; top:64%; animation-delay:1.9s }
.hero-particles span:nth-child(9){ left:88%; top:70%; animation-delay:.7s }
.hero-particles span:nth-child(10){ left:12%; top:80%; animation-delay:1.6s }
.hero-particles span:nth-child(11){ left:22%; top:84%; animation-delay:.5s }
.hero-particles span:nth-child(12){ left:32%; top:82%; animation-delay:1.2s }
.hero-particles span:nth-child(13){ left:42%; top:85%; animation-delay:.1s }
.hero-particles span:nth-child(14){ left:52%; top:83%; animation-delay:1.3s }
.hero-particles span:nth-child(15){ left:62%; top:86%; animation-delay:.8s }
.hero-particles span:nth-child(16){ left:72%; top:82%; animation-delay:1.7s }
.hero-particles span:nth-child(17){ left:82%; top:84%; animation-delay:.4s }
.hero-particles span:nth-child(18){ left:15%; top:60%; animation-delay:2.1s }
.hero-particles span:nth-child(19){ left:30%; top:62%; animation-delay:1.0s }
.hero-particles span:nth-child(20){ left:45%; top:60%; animation-delay:2.3s }
.hero-particles span:nth-child(21){ left:60%; top:62%; animation-delay:.95s }
.hero-particles span:nth-child(22){ left:75%; top:60%; animation-delay:2.0s }
.hero-particles span:nth-child(23){ left:85%; top:63%; animation-delay:1.5s }
.hero-particles span:nth-child(24){ left:50%; top:66%; animation-delay:.25s }

/* Layering */
.hero{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:1; }
.hero-inner{ position:relative; z-index:2; }

/* Partikel-Layer */
.hero-particles{
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero-particles span{
  position:absolute; display:block; border-radius:50%;
  background: radial-gradient(circle, #ffd98a 0%, #ffb94d 45%, rgba(255,185,77,0) 70%);
  opacity:.9;
  filter: drop-shadow(0 0 10px rgba(255,223,128,.75));
  animation: floatUp 14s linear infinite, twinkle 2.8s ease-in-out infinite;
}

/* Animationen */
@keyframes floatUp{
  0%   { transform: translateY(10%); opacity:0 }
  10%  { opacity:.9 }
  90%  { opacity:.9 }
  100% { transform: translateY(-90%); opacity:0 }
}
@keyframes twinkle{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(255,223,128,.6)); }
  50%    { filter: drop-shadow(0 0 16px rgba(255,223,128,1)); }
}
/* === Glow-Übergang beim Scrollen (globale Overlay-Ebene) === */
#pageGlow{
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .6; transition: opacity .25s ease;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,223,128,.22), transparent 60%),
    radial-gradient(1200px 700px at 50% 10%, rgba(65,105,225,.18), transparent 70%);
}
/* Seite bekommt unten im Hero schon Glow – beim Scrollen blenden wir #pageGlow aus */

/* === Signatur-Band === */
.signature{
  margin: 1.2rem auto 0; padding:.6rem 1rem; max-width:980px;
  display:flex; gap:.6rem; align-items:center; justify-content:center;
  color: var(--ink);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.sig-quill{ filter: drop-shadow(0 0 6px rgba(255,223,128,.6)); }

/* === Meteore (Sternschnuppen) === */
.hero{ position:relative; overflow:hidden; }
.hero-meteors{
  position:absolute; inset:0; z-index:4; pointer-events:none;
}
.hero-meteors .meteor{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 6px rgba(255,255,255,.9),
    12px 0 2px 1px rgba(255,223,128,.5),
    22px 0 2px 1px rgba(255,223,128,.25),
    32px 0 2px 1px rgba(255,223,128,.1);
  transform: rotate(-18deg);
  opacity: 0;
  animation: meteorFly 2.2s ease-in infinite;
}
@keyframes meteorFly{
  0%   { opacity:0; transform: translate3d(0,0,0) rotate(-18deg); }
  10%  { opacity:1; }
  100% { opacity:0; transform: translate3d(360px,120px,0) rotate(-18deg); }
}

/* (falls noch nicht vorhanden) Hero-Layering + Partikel */
.hero-bg{ position:absolute; inset:0; z-index:1; }
.hero-inner{ position:relative; z-index:2; }
.hero-particles{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; }
.hero-particles span{
  position:absolute; display:block; border-radius:50%;
  width:5px; height:5px;
  background: radial-gradient(circle, #ffd98a 0%, #ffb94d 45%, rgba(255,185,77,0) 70%);
  opacity:.9;
  filter: drop-shadow(0 0 10px rgba(255,223,128,.75));
  animation: floatUp 14s linear infinite, twinkle 2.8s ease-in-out infinite;
}
@keyframes floatUp{ 0%{transform:translateY(12%);opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{transform:translateY(-90%);opacity:0}}
@keyframes twinkle{0%,100%{filter:drop-shadow(0 0 8px rgba(255,223,128,.6))}50%{filter:drop-shadow(0 0 16px rgba(255,223,128,1))}}
/* ===== Footer ===== */
.site-footer{ margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.06); padding-top:1rem; }
.site-footer h4{ margin:.2rem 0 .4rem; color:var(--ink); font-weight:600; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:.2rem 0; }
.footer-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:1rem;
}
.site-footer .copy{ color:var(--muted); margin-top:.6rem; text-align:center; }