
:root { color-scheme: dark; --bg:#07111f; --panel:#0d1b2d; --panel2:#11263d; --ink:#f2f7fd; --muted:#a9bdd2; --line:#27415c; --cyan:#6ed9fb; --blue:#659dff; --warn:#f9c67b; }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 104px }
body { margin:0; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.72; background: radial-gradient(ellipse 80% 25% at 50% 0%,#163d60 0%,transparent 80%), var(--bg); color:var(--ink) }
a { color:var(--cyan); text-underline-offset:4px }
a:hover { color:white }
.wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto }
.topbar { position:sticky; top:0; z-index:5; backdrop-filter:blur(16px); background:rgba(7,17,31,.90); border-bottom:1px solid rgba(100,153,203,.2) }
.topbar-in { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.01em; white-space:nowrap }
.brand-icon { font-size:27px; line-height:1; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,#1a6395,#335bca); box-shadow:inset 0 1px 0 #ffffff55 }
.topnav { display:flex; flex-wrap:wrap; gap:8px }
.topnav a { color:var(--muted); padding:8px 13px; border-radius:9px; text-decoration:none; font-size:.92rem; font-weight:650 }
.topnav a:hover,.topnav a[aria-current='page'] { color:white; background:#1b334d }
.hero { padding:72px 0 35px; position:relative }
.eyebrow { display:inline-block; border:1px solid #37678d; border-radius:99px; padding:5px 13px; color:#a6e8ff; background:#11324b; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
h1 { margin:20px 0 12px; font-size:clamp(2.3rem,6vw,4.4rem); line-height:1.09; letter-spacing:-.045em; max-width:900px }
.gradient { background:linear-gradient(115deg,#fff 35%,#84d5ff 72%,#79a8ff); background-clip:text; -webkit-background-clip:text; color:transparent }
.lead { color:var(--muted); font-size:1.1rem; max-width:690px; margin:0 }
.updated { display:inline-flex; margin-top:16px; font-size:.88rem; color:var(--muted) }
.tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:28px 0 24px }
.tile { text-decoration:none; display:block; background:linear-gradient(130deg,#142d47,#102036); border:1px solid #2b4c6a; border-radius:18px; padding:22px; color:var(--ink); transition:transform .15s,border-color .15s }
.tile:hover { transform:translateY(-3px); border-color:var(--cyan) }
.tile .emoji { display:block; font-size:27px; margin-bottom:7px }
.tile strong { display:block; font-size:1.15rem }
.tile span:not(.emoji) { display:block; font-size:.92rem; color:var(--muted); margin-top:5px }
.notice { margin:27px 0 25px; padding:16px 18px; border-radius:14px; background:#30261c; border:1px solid #9b7441; color:#ffe2ae }
.notice strong { color:#fff3dc }
.notice p { margin:5px 0 0; font-size:.93rem }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:42px 0 14px }
.section-head h2 { margin:0; font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.16; letter-spacing:-.025em }
.section-head p { margin:7px 0 0; color:var(--muted) }
.chip { flex:none; background:#142f45; color:#a7e6ff; border:1px solid #386f91; border-radius:99px; padding:4px 12px; font-size:.75rem; font-weight:700 }
.legal { background:linear-gradient(155deg,rgba(18,38,60,.98),rgba(12,28,47,.98)); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,4vw,44px); box-shadow:0 18px 55px #0003; overflow-wrap:anywhere }
.legal h2 { font-size:1.23rem; letter-spacing:-.015em; margin:35px 0 10px; padding-top:25px; border-top:1px solid var(--line); line-height:1.3 }
.legal h2:first-child { margin-top:0; padding-top:0; border:0 }
.legal p, .legal li { color:#d7e4f1; font-size:.98rem }
.legal p { margin:8px 0 17px }
.legal li { padding-bottom:4px }
.legal ul { padding-left:22px }
.legal strong { color:#fff }
.placeholder { color:#ffe1ad; border-radius:5px; background:#624222; padding:2px 5px; font-weight:750; box-decoration-break:clone }
.backtop { display:inline-block; margin-top:17px; padding:9px 0; font-size:.9rem }
.footer { margin-top:66px; border-top:1px solid var(--line); color:var(--muted); padding:27px 0 45px; font-size:.88rem }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px }
.footer a { color:var(--muted) }
@media(max-width:650px) { .topbar-in{align-items:flex-start; flex-direction:column; padding:10px 0; gap:5px } .topnav a{padding:5px 9px} .hero{padding-top:42px}.tiles{grid-template-columns:1fr}.section-head{flex-direction:column}.legal{border-radius:14px} }

/* Erweiterte Rechtstexte */
.table-of-contents{background:#10263b;border:1px solid #315472;border-radius:17px;padding:22px;margin:24px 0}
.table-of-contents h2{margin:0;font-size:1.25rem}
.table-of-contents p{margin:2px 0 15px;color:var(--muted)}
.toc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 15px}
.toc-links a{text-decoration:none;display:flex;align-items:baseline;gap:10px;padding:7px;border-radius:7px;font-size:.9rem;color:#d8e9f8}
.toc-links a:hover{background:#1c3b59}
.toc-links span{font-size:.75rem;color:#78cbff;font-weight:800}
.legal-section{scroll-margin-top:100px}
.legal-section:first-child h2{margin-top:0}
.legal code{font-size:.92em;background:#0c2135;padding:2px 5px;border-radius:4px}
.data-table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.55;margin:14px 0 25px}
.data-table th,.data-table td{padding:11px;border-bottom:1px solid #30516d;text-align:left;vertical-align:top}
.data-table th{background:#17324a;color:#e5f6ff}
.provider-links li{margin-bottom:7px}
@media(max-width:650px){.toc-links{grid-template-columns:1fr}.data-table{font-size:.81rem}.data-table th,.data-table td{padding:7px}}

/* Clear separation from main StormWeatherEU website */
.scope-note {margin: 0 0 22px; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(146,188,220,.28); color: #d5e9f7; background: rgba(18,41,66,.55); font-size: .94rem; line-height: 1.55;}

/* Bilingual top navigation */
.nav-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.language-switch{display:inline-flex;gap:3px;padding:4px;border:1px solid #3d617e;background:#0c2034;border-radius:12px;white-space:nowrap}
.language-switch a{color:#bcd5e8;text-decoration:none;border-radius:8px;padding:6px 11px;font-size:.82rem;font-weight:800}
.language-switch a:hover{color:#fff;background:#1d3b59}
.language-switch a[aria-current="true"]{background:linear-gradient(125deg,#276392,#334eac);color:#fff}
@media(max-width:780px){.topbar-in{align-items:flex-start;flex-direction:column;padding:12px 0}.nav-controls{width:100%;justify-content:space-between}.topnav{gap:3px}.topnav a{font-size:.82rem;padding:6px 9px}}
@media(max-width:500px){.language-switch{margin-top:5px}.nav-controls{align-items:flex-start;flex-direction:column}}
@media print{.language-switch{display:none}.topbar{position:static}}
