/* Gemeinsame Styles aller Seiten: Farben, Grundlayout, Kopf-/Fußzeile, Hero, Buttons. */

:root{
  --bg:#051420;
  --bg2:#0a1f30;
  --card:#0d2740;
  --card2:#10324f;
  --accent:#2dd4bf;
  --accent2:#38bdf8;
  --amber:#f59e0b;
  --text:#e6f2f7;
  --muted:#8fb0c0;
  --border:rgba(120,190,220,.15);
  --bar:rgba(5,20,32,.88);
  --radius:14px;
  --header-h:76px;   /* Abstand für Sprungmarken unter der fixen Kopfzeile */
  --footer-h:64px;   /* Platz für die fixe Impressum-Fußzeile */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -5%, #0b2740 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 40%, #082033 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  padding-bottom:var(--footer-h);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  padding:10px 16px;border-radius:10px;
  background:var(--accent);color:#04222b;font-weight:700;
}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:var(--bar);
  border-bottom:1px solid var(--border);
}
.site-header .nav{
  max-width:1100px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:12px;flex:none;font-weight:700;font-size:1.05rem;letter-spacing:.04em;line-height:1.25;color:var(--text)}
.logo:hover{text-decoration:none}
.logo img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 14px rgba(45,212,191,.35)}
.site-nav ul{display:flex;gap:22px;list-style:none}
.site-nav a{color:var(--muted);font-size:.93rem;white-space:nowrap;transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent);text-decoration:none}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:72px 24px 64px;
  background:linear-gradient(180deg,#0b2a44 0%,#082033 55%,#051420 100%);
}
.hero > :not(.ocean){position:relative;z-index:2}
.kicker{
  display:inline-block;margin-bottom:18px;padding:6px 18px;border-radius:999px;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.35);
}
.hero h1{
  font-size:clamp(2rem,5.5vw,3.3rem);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(2,10,18,.8);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{
  max-width:660px;margin:18px auto 0;
  color:var(--muted);font-size:1.05rem;
  text-shadow:0 1px 16px rgba(2,10,18,.9);
}
.hero .stand{display:block;margin-top:10px;font-size:.85rem;color:var(--muted);opacity:.85}

.ocean{position:absolute;inset:0;z-index:1;pointer-events:none}
.veil{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 42%, rgba(4,14,24,.45), transparent 75%)}
.bubbles span{
  position:absolute;bottom:-30px;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(215,245,255,.5), rgba(150,220,255,.06) 62%);
  border:1px solid rgba(190,235,255,.28);
  animation:rise var(--d) linear infinite;animation-delay:var(--dl);
  opacity:0;
}
@keyframes rise{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:.85}
  85%{opacity:.6}
  100%{transform:translate(16px,-640px);opacity:0}
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 32px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#04222b;font-family:inherit;font-weight:700;font-size:1rem;line-height:1.4;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 18px rgba(2,12,20,.45);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(45,212,191,.4);text-decoration:none}
.btn.ghost{background:rgba(4,18,30,.5);color:var(--accent);border:1.5px solid var(--accent)}
.btn.ghost:hover{box-shadow:0 8px 22px rgba(2,12,20,.5);background:rgba(45,212,191,.14)}
.btn.amber{background:linear-gradient(90deg,var(--amber),#fbbf24);color:#241503}
.btn.amber:hover{box-shadow:0 10px 28px rgba(245,158,11,.4)}

/* ── Inhaltsbereiche ───────────────────────────────────────────────────── */
section{max-width:1100px;margin:0 auto;padding:80px 24px}
.sec-title{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:700;margin-bottom:8px}
.sec-sub{color:var(--muted);margin-bottom:44px;max-width:640px}
.sec-sub .hl{color:var(--amber);font-weight:600}

/* ── Impressum-Fußzeile (fixiert, so flach wie möglich) ────────────────── */
.site-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  backdrop-filter:blur(10px);
  background:var(--bar);
  border-top:1px solid var(--border);
  padding:6px 24px;
  text-align:center;color:var(--muted);font-size:.78rem;line-height:1.35;
}
.site-footer b{color:var(--text);font-weight:600}

/* ── Kleine Bildschirme ────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--header-h:64px;--footer-h:84px}
  .site-header .nav{padding:8px 14px;gap:12px}
  .logo img{width:40px;height:40px}
  .logo-text{display:none}
  /* Navigation bleibt einzeilig und lässt sich seitlich wischen, statt Höhe zu kosten */
  .site-nav{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav ul{gap:18px;padding-right:24px}
  .site-footer{padding:4px 12px;font-size:.68rem;line-height:1.3}
  section{padding:56px 20px}
  .hero{padding:56px 20px 48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bubbles span{animation:none;opacity:.4}
  .btn,.btn:hover{transition:none;transform:none}
}