:root{
  --bg:#050505;--panel:#111;--panel2:#171717;--text:#f2f2f2;--muted:#aaa;
  --accent:#f2b705;--blood:#a30d0d;--danger:#d72d2d;--line:#2b2b2b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top,#181414 0,#050505 45%);color:var(--text);font-family:"Special Elite",Georgia,"Times New Roman",serif;line-height:1.6;position:relative;overflow-x:hidden}

/* --- Nebel / Fog --- */
.fog-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:.5}
.fog{position:absolute;width:160%;height:340px;background:radial-gradient(ellipse at center,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);filter:blur(6px)}
.fog1{top:-40px;left:-30%;animation:driftRight 38s linear infinite}
.fog2{bottom:-80px;left:-50%;animation:driftLeft 52s linear infinite;opacity:.7}
@keyframes driftRight{0%{transform:translateX(0)}100%{transform:translateX(35%)}}
@keyframes driftLeft{0%{transform:translateX(0)}100%{transform:translateX(-35%)}}

/* --- Hero --- */
.hero{position:relative;min-height:74vh;display:grid;place-items:center;text-align:center;padding:48px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.88)),radial-gradient(circle at 50% 20%,rgba(163,13,13,.18),transparent 60%);overflow:hidden}
.hero-inner{max-width:850px;position:relative;z-index:2}
.web{position:absolute;width:190px;height:190px;opacity:.6;z-index:1}
.web-tl{top:-10px;left:-10px}
.web-tr{top:-10px;right:-10px;transform:scaleX(-1)}
.eyebrow,.section-kicker{color:var(--accent);font-weight:800;letter-spacing:.16em;font-size:.8rem}
.eyebrow{text-shadow:0 0 8px rgba(242,183,5,.5)}
h1{font-family:"Creepster",cursive;font-weight:400;font-size:clamp(2.6rem,11vw,6.4rem);line-height:1;margin:16px 0 22px;letter-spacing:.03em;color:#f4f4f4}
.spooky-title{color:#eee;text-shadow:0 0 6px rgba(163,13,13,.85),0 0 18px rgba(163,13,13,.55),0 0 40px rgba(163,13,13,.35);animation:flicker 6s infinite}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{opacity:1}
  20%,22%,79%{opacity:.72}
}
h2{font-family:"Creepster",cursive;font-weight:400;font-size:clamp(1.9rem,6.5vw,3.2rem);line-height:1.1;margin:6px 0 14px;letter-spacing:.02em}
h3{font-size:1.2rem;margin:0 0 8px;font-family:"Special Elite",serif}
.lead{font-size:1.1rem;color:#d0d0d0;max-width:650px;margin:0 auto 28px}
.btn{display:inline-block;border:0;background:var(--accent);color:#090909;text-decoration:none;font-weight:900;padding:13px 22px;border-radius:7px;cursor:pointer;box-shadow:0 5px 0 #8b6800,0 0 22px rgba(242,183,5,.35);transition:transform .15s,box-shadow .15s;font-family:"Special Elite",serif;letter-spacing:.03em}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #8b6800,0 0 26px rgba(242,183,5,.5)}

main{max-width:1100px;margin:auto;position:relative;z-index:2}
.section{padding:70px 18px}
.section-head{max-width:850px;margin:0 auto 32px}
.section-head p{color:var(--muted)}

.warning-grid{display:grid;grid-template-columns:1fr;gap:16px}
.warning-card{display:grid;grid-template-columns:66px 1fr;gap:18px;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-left:4px solid var(--blood);border-radius:12px;padding:20px;position:relative;transition:box-shadow .2s,border-color .2s}
.warning-card:hover{border-left-color:var(--accent);box-shadow:0 0 0 1px rgba(242,183,5,.15),0 8px 24px rgba(0,0,0,.45)}
.warning-card.wide{grid-column:auto}
.warning-card p{margin:7px 0;color:#c7c7c7}
.warning-card strong{color:#fff}

/* --- DIN-Stil Warnzeichen (PNG) --- */
.sign{width:62px;height:56px;flex-shrink:0}
.sign img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* --- Blaues Hinweisschild (Notruf) --- */
.emergency-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:850px;margin:auto;align-items:center}
.emergency ol{margin:0;padding-left:25px}
.emergency li{margin:10px 0}
.info-badge{display:flex;flex-direction:column;align-items:center;gap:10px;justify-self:center}
.info-badge img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(20,71,230,.45))}
.info-badge span{font-weight:900;letter-spacing:.06em;color:#fff;font-family:"Special Elite",serif}

.emergency{background:#0b0b0b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.standards-box{border:1px solid var(--line);background:#0e0e0e;padding:18px;border-radius:10px}

.rating-section{padding-bottom:90px}
.rating-form{max-width:700px;margin:auto;background:#101010;border:1px solid var(--line);border-radius:14px;padding:24px}
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;margin:5px 0 18px}
.stars input{position:absolute;opacity:0}
.stars label{font-size:2.3rem;color:#555;cursor:pointer;line-height:1}
.stars label:hover,.stars label:hover~label,.stars input:checked~span{color:var(--accent);text-shadow:0 0 10px rgba(242,183,5,.6)}
.check{display:block;margin:18px 0}
.check input{width:18px;height:18px;vertical-align:middle;margin-right:8px}
.rating-form label[for=comment]{display:block;font-weight:700;margin:15px 0 7px}
.rating-form label[for=comment] span{color:var(--muted);font-weight:400}
textarea{width:100%;resize:vertical;min-height:110px;background:#080808;color:var(--text);border:1px solid #3a3a3a;border-radius:8px;padding:12px;font:inherit;margin-bottom:16px}
.form-message{min-height:1.5em;color:var(--accent)}
.honeypot{position:absolute;left:-10000px;opacity:0}
footer{text-align:center;border-top:1px solid var(--line);padding:28px 18px;color:#888;font-size:.9rem;position:relative;z-index:2}

@media (min-width:760px){
  .warning-grid{grid-template-columns:1fr 1fr}
  .warning-card.wide{grid-column:1/-1}
  .section{padding-left:28px;padding-right:28px}
  .emergency-grid{grid-template-columns:1fr auto}
}

/* --- Mobile-Optimierung --- */
@media (max-width:600px){
  .hero{min-height:auto;padding:64px 16px 40px}
  .web{width:100px;height:100px;opacity:.35}
  h1{font-size:clamp(2.1rem,13vw,3.2rem)}
  .lead{font-size:1rem}
  .section{padding:48px 16px}
  .warning-card{grid-template-columns:52px 1fr;gap:12px;padding:16px}
  .sign{width:48px;height:44px}
  h3{font-size:1.08rem}
  .stars label{font-size:2rem}
  .rating-form{padding:18px}
  .info-badge img{width:68px;height:68px}
}

@media (prefers-reduced-motion: reduce){
  .spooky-title{animation:none}
  .fog1,.fog2{animation:none}
}