:root{--bg-top:#0f172a;--bg-bottom:#0b0f17;--card:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--text:#e5e7eb;--muted:#9ca3af;--accent:#60a5fa;--accent2:#a78bfa}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{background:var(--bg-bottom)}
body{
  color:var(--text);
  background:
    radial-gradient(640px 300px at 50% -120px, rgba(96,165,250,.14), rgba(167,139,250,.10) 45%, transparent 75%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, scroll;
  background-size:auto, auto;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;min-height:100vh;display:flex;flex-direction:column
}
.container{width:min(1100px,92%);margin:0 auto}
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(11,15,23,.6);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.brand img{height:46px;width:auto;border-radius:6px;object-fit:contain;display:block}
.brand .name{font-weight:800;letter-spacing:.4px;font-size:1.75rem;line-height:1;display:inline-block;min-height:1em;min-width:10ch;white-space:pre;position:relative}
.brand .name .caret{display:inline-block;width:2px;height:1em;background:currentColor;margin-right:2px;animation:blink .95s steps(1,end) infinite;vertical-align:bottom}
@keyframes blink{50%{opacity:0}}
nav a{color:var(--muted);text-decoration:none;padding:.5rem .75rem;border-radius:.6rem;border:1px solid transparent}
nav a:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.03)}
main{flex:1}
.hero{padding:clamp(3rem,5vw,5rem) 0;text-align:center;position:relative}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border-radius:.6rem;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-size:.9rem}
.badge .dot{width:8px;height:8px;background:var(--accent);border-radius:999px;box-shadow:0 0 12px var(--accent)}
h1.title{font-size:clamp(2.4rem,6.5vw,3.8rem);margin:.6rem 0 0;letter-spacing:.3px;background:linear-gradient(90deg,#9dd6ff,#c9b8ff,#9dd6ff);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradflow 8s ease infinite;text-shadow:0 0 18px rgba(96,165,250,.28),0 0 32px rgba(167,139,250,.18)}
@keyframes gradflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.subtitle{color:var(--muted);margin-top:.25rem}
.hero-card{margin-top:1.2rem;display:inline-block;padding:1rem 1.1rem;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border:1px solid var(--border);border-radius:1rem}
.buttons{display:flex;justify-content:center;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:.8rem;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text)}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.btn.primary{border-color:rgba(96,165,250,.3);background:linear-gradient(180deg, rgba(96,165,250,.18), rgba(96,165,250,.06))}
.section{padding:3.2rem 0}
.section h2{margin:0 0 .6rem;font-size:clamp(1.4rem,3.2vw,2rem)}
.section .lead{color:var(--muted);margin-bottom:1.6rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:2rem 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted);margin:.4rem 0}
footer{border-top:1px solid var(--border);background:rgba(255,255,255,.03)}
.footer-inner{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:1rem 0;flex-wrap:wrap}
.links{display:flex;gap:.6rem;flex-wrap:wrap}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--text)}
.candle-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}
.candle{width:12px;height:30px;border-radius:3px;background:#fef08a;position:relative;border:1px solid rgba(0,0,0,.35);box-shadow:0 0 8px rgba(250,204,21,.45),inset 0 0 6px rgba(0,0,0,.25)}
.candle::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:6px;height:12px;background:radial-gradient(ellipse at center,#fde68a 0%,#f59e0b 60%,transparent 72%);filter:blur(.2px);border-radius:50%}
.flame{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:8px;height:16px;background:radial-gradient(ellipse at center,#fff7b3 0%,#fbbf24 55%,rgba(0,0,0,0) 75%);border-radius:50%;opacity:.9;animation:flk 1.2s ease-in-out infinite}
@keyframes flk{0%{transform:translateX(-50%) scale(1) translateY(0) rotate(0deg);opacity:.92}25%{transform:translateX(-50%) scale(1.08) translateY(-1px) rotate(-2deg);opacity:1}50%{transform:translateX(-50%) scale(.95) translateY(1px) rotate(2deg);opacity:.9}75%{transform:translateX(-50%) scale(1.1) translateY(-2px) rotate(-1deg);opacity:.98}100%{transform:translateX(-50%) scale(1) translateY(0) rotate(0deg);opacity:.92}}
.spark{position:absolute;bottom:24px;left:50%;width:2px;height:2px;background:#fde68a;border-radius:50%;opacity:.8;animation:spark 1.6s linear infinite}
@keyframes spark{0%{transform:translate(-50%,0) scale(1);opacity:.8}60%{transform:translate(calc(-50% - 2px),-8px) scale(.7);opacity:.3}100%{transform:translate(calc(-50% + 2px),-14px) scale(.4);opacity:0}}
.neon{display:inline-block;background:linear-gradient(90deg,#9dd6ff,#c9b8ff,#9dd6ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite;text-shadow:0 0 12px rgba(96,165,250,.35),0 0 24px rgba(167,139,250,.25)}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.brand .name .caret.after{margin-left:2px;margin-right:0}


/* footer copyright color */
footer small { color: var(--muted); }

/* guestbook styles */
.form{display:block;gap:1rem}
.form .row{display:block}
.form .row > div{flex:1 1 240px}
label{display:block;font-weight:600;margin:0 0 .35rem}
.input, textarea{width:100%;padding:.7rem .8rem;border-radius:.7rem;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);font:inherit}
.input:focus, textarea:focus{outline:none;border-color:rgba(96,165,250,.35);box-shadow:0 0 0 3px rgba(96,165,250,.15)}
textarea{min-height:150px;resize:vertical}
.helper{color:var(--muted);font-size:.9rem;margin-top:.35rem}
.sep{border:none;border-top:1px solid var(--border);margin:1.8rem 0}
.notice,.error{border-radius:.8rem;padding:.75rem .9rem;margin:1rem 0}
.notice{background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.35);color:#dbeafe}
.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,250,.35);color:#fecaca}
.entry{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem}
.entry header{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.5rem}
.entry header strong{font-size:1rem}
.entry header time{color:var(--muted);font-size:.9rem;white-space:nowrap}
.entry p{margin:0;color:var(--text)}
.grid .entry{padding:1rem}
button.btn{cursor:pointer}


/* scroll reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease;will-change:opacity,transform}
.reveal-visible{opacity:1;transform:none}
.reveal[data-delay]{transition-delay:var(--delay, 0s)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
}

.form .row > div{width:100%;}


/* Gästebuch-Einträge immer untereinander */
.grid.entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}


/* spacing tweaks for guestbook form */
.form .row > div { margin-bottom: 1rem; }
textarea { margin-bottom: 1rem; }
.helper { margin-bottom: 1rem; }

/* glowing primary button */
button.btn {
  padding: .7rem 1.6rem;
  border-radius: .8rem;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(96,165,250,.30), rgba(96,165,250,.15));
  border: 1px solid rgba(96,165,250,.45);
  color: var(--text);
  text-shadow: 0 0 6px rgba(96,165,250,.50);
  box-shadow: 0 0 10px rgba(96,165,250,.25);
  transition: background .2s, transform .15s, box-shadow .2s;
}
button.btn:hover {
  background: linear-gradient(180deg, rgba(96,165,250,.45), rgba(96,165,250,.20));
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(96,165,250,.40);
}


/* Rollen-Badges */
.badge {
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.4;
  margin-left:.5rem;
}

/* Teammitglied in Blau */
.badge.teammitglied {
  color:#3b82f6;
  border:1px solid #3b82f6;
  background:rgba(59,130,246,0.08);
}

/* Serverinhaber in Rot */
.badge.serverinhaber {
  color:#ef4444;
  border:1px solid #ef4444;
  background:rgba(239,68,68,0.08);
}

/* Stammspieler in Goldgelb */
.badge.stammspieler {
  color:#f59e0b;
  border:1px solid #f59e0b;
  background:rgba(245,158,11,0.08);
}


/* VIP in Gold */
.badge.vip {
  color: #fbbf24;                      /* Gold */
  border: 1px solid #fbbf24;
  background: rgba(251, 191, 36, 0.10);
}


/* Rollen-Badges mit 'ehm.' Präfix */
.badge.ehm-serverinhaber {
  color:#ef4444;
  border:1px solid #ef4444;
  background:rgba(239,68,68,0.08);
}
.badge.ehm-teammitglied {
  color:#3b82f6;
  border:1px solid #3b82f6;
  background:rgba(59,130,246,0.08);
}
.badge.ehm-stammspieler {
  color:#f59e0b;
  border:1px solid #f59e0b;
  background:rgba(245,158,11,0.08);
}
.badge.ehm-vip {
  color:#fbbf24;
  border:1px solid #fbbf24;
  background:rgba(251,191,36,0.10);
}


/* Rollen-Badges (ehm.* Varianten) */
.badge{
  display:inline-block; font-size:.7rem; font-weight:700;
  padding:2px 10px; border-radius:999px; text-transform:uppercase;
  letter-spacing:.5px; line-height:1.4; margin-left:.5rem;
}

.badge.ehm-serverinhaber{ color:#ef4444; border:1px solid #ef4444; background:rgba(239,68,68,.08); }
.badge.ehm-teammitglied{  color:#3b82f6; border:1px solid #3b82f6; background:rgba(59,130,246,.08); }
.badge.ehm-stammspieler{  color:#f59e0b; border:1px solid #f59e0b; background:rgba(245,158,11,.08); }
.badge.ehm-vip{           color:#fbbf24; border:1px solid #fbbf24; background:rgba(251,191,36,.10); }