:root {
  --bg: #070a0f;
  --card: rgba(255,255,255,0.14);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.82);
  --accent: #8fe9ff;
  --border: rgba(255,255,255,0.34);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(123,220,255,0.10), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(180,120,255,0.10), transparent 60%),
              var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding: 22px;}

.watermark{position:fixed; inset:0; pointer-events:none; background:url('/assets/schloss-cappenberg.jpg') center/cover no-repeat; opacity:0.55; filter: blur(2px) saturate(0.95) contrast(1.00) brightness(0.95); transform: scale(1.03); }
.overlay{position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(7,10,15,0.50), rgba(7,10,15,0.78));}

.header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(7,10,15,0.20); border-bottom:1px solid var(--border)}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 22px;}
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand b{font-size:16px}
.brand span{font-size:12px; color:var(--muted)}
.navlinks{display:flex; gap:14px; align-items:center}
.navlinks a{color:var(--text); opacity:0.9}
.navlinks a:hover{opacity:1}

.hamburger{display:none; border:1px solid var(--border); background:var(--card); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer}
.drawer{display:none; position:fixed; inset:0; z-index:80;}
.drawer .backdrop{position:absolute; inset:0; background: rgba(0,0,0,0.55);}
.drawer .panel{position:absolute; right:0; top:0; bottom:0; width:min(380px, 90vw); background:rgba(7,10,15,0.92); border-left:1px solid var(--border); padding:18px;}
.drawer a{display:block; padding:10px 12px; border-radius:12px; color:var(--text);}
.drawer a:hover{background: rgba(255,255,255,0.06); text-decoration:none}

@media (max-width:860px){.navlinks{display:none}.hamburger{display:inline-flex}}

.hero{padding: 30px 0 10px 0}
.hero h1{margin:0; font-size:36px; letter-spacing:-0.02em}
.hero p{margin:12px 0 0; color:var(--muted); max-width:70ch}

.section{margin-top:20px; padding:18px; border:1px solid var(--border); border-radius:18px; background: rgba(255,255,255,0.10);}
.section h2{margin:0 0 10px; font-size:18px; letter-spacing:-0.01em}

.controls{display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 8px}
select,input[type=search]{background: rgba(255,255,255,0.14); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:12px; outline:none}
.table{width:100%; border-collapse:collapse; margin-top:10px}
.table th,.table td{padding:10px; border-bottom: 1px solid rgba(255,255,255,0.16); vertical-align:top}
.table th{color:var(--muted); font-weight:600; text-align:left}
.pill{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--muted); font-size:12px}

.footer{margin:22px 0 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--muted)}
.small{font-size:12px; color:var(--muted)}
.notice{background: rgba(143,233,255,0.14); border:1px solid rgba(143,233,255,0.34); padding:12px 14px; border-radius:14px; color: rgba(232,238,246,0.9)}