:root{
  --night:#0E1524; --dusk:#16223A; --panel:#1A2740; --line:#2A3A5C;
  --horizon:#E3A94F; --signal:#8FC0E8; --text:#E9EDF4; --muted:#93A0B6;
  --w:880px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--night); color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--horizon);color:var(--night)}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--horizon);outline-offset:3px;border-radius:3px}
.mono{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,"SF Mono",Consolas,monospace}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ===== Navigation ===== */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--w);margin:0 auto;padding:20px 24px;
  position:relative;z-index:2;
}
.nav .brand{color:var(--horizon);letter-spacing:.1em;font-size:14px}
.nav .brand:hover{text-decoration:none}
.nav .links{display:flex;gap:22px}
.nav .links a{color:var(--muted);font-size:.92rem}
.nav .links a[aria-current="page"]{color:var(--text);border-bottom:2px solid var(--horizon);padding-bottom:2px}
.nav .links a:hover{color:var(--text);text-decoration:none}

/* ===== Himmel-Header ===== */
header.sky{
  position:relative;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(233,237,244,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(233,237,244,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, rgba(233,237,244,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 42%, rgba(233,237,244,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 12%, rgba(233,237,244,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 55%, rgba(233,237,244,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 30%, rgba(233,237,244,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 78%, rgba(233,237,244,.25) 50%, transparent 51%),
    linear-gradient(180deg,#0A1020 0%,#0E1524 46%,#1A2438 78%,#2A3350 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
header.sky::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:130px;
  background:linear-gradient(180deg,transparent,rgba(227,169,79,.14) 65%,rgba(227,169,79,.28));
  pointer-events:none;
}
.hero{padding:64px 0 104px;position:relative;z-index:1}
.hero.compact{padding:44px 0 84px}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--horizon);margin-bottom:18px}
h1{
  font-family:"Avenir Next",Futura,"Segoe UI",system-ui,sans-serif;
  font-weight:650;font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.08;letter-spacing:-.015em;max-width:16ch;
}
.hero.compact h1{font-size:clamp(1.9rem,4.2vw,2.8rem)}
h1 em{font-style:normal;color:var(--horizon)}
.hero p{max-width:58ch;margin-top:22px;color:var(--muted);font-size:1.04rem}

.horizon{
  position:absolute;left:0;right:0;bottom:44px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,169,79,.7) 18%,rgba(227,169,79,.7) 82%,transparent);
}
.packet{
  position:absolute;top:-2.5px;left:-3%;width:6px;height:6px;border-radius:50%;
  background:var(--horizon);box-shadow:0 0 10px 2px rgba(227,169,79,.65);
  animation:cross 10s linear infinite;
}
.packet:nth-child(2){animation-delay:5s;opacity:.7}
@keyframes cross{from{left:-3%}to{left:103%}}
@media (prefers-reduced-motion:reduce){
  .packet{animation:none;left:38%}
  .packet:nth-child(2){left:71%}
  html{scroll-behavior:auto}
}

/* ===== Abschnitte ===== */
section{padding:72px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
.label{letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--muted);margin-bottom:12px}
h2{
  font-family:"Avenir Next",Futura,"Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.4rem,2.6vw,1.85rem);
  letter-spacing:-.01em;margin-bottom:16px;
}
.lead{color:var(--muted);max-width:60ch}

/* Zeilen-Listen (Dienste, Werdegang) */
.rows{margin-top:34px;border-top:1px solid var(--line)}
.rows > div{
  display:grid;grid-template-columns:170px 1fr;gap:20px;
  padding:18px 4px;border-bottom:1px solid var(--line);
}
.rows dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon);padding-top:4px}
.rows dd{color:var(--muted);font-size:.98rem}
.rows dd strong{color:var(--text);font-weight:600}
@media (max-width:560px){.rows > div{grid-template-columns:1fr;gap:6px}}

/* Profil */
.about{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:start;margin-top:6px}
.about p+p{margin-top:16px}
.facts{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px}
.facts dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon);margin-top:16px}
.facts dt:first-child{margin-top:0}
.facts dd{font-size:.95rem;margin-top:4px}
@media (max-width:720px){.about{grid-template-columns:1fr;gap:32px}}

/* ===== Rechtsseiten ===== */
main.legal{max-width:720px;margin:0 auto;padding:56px 24px 72px}
main.legal h1{font-size:clamp(1.7rem,3.5vw,2.3rem);margin-bottom:8px}
main.legal .stand{color:var(--muted);font-size:.88rem;margin-bottom:36px}
main.legal h2{font-size:1.15rem;margin:34px 0 10px}
main.legal p, main.legal li{color:var(--muted);font-size:.97rem}
main.legal ul{padding-left:22px;margin-top:8px}
main.legal address{font-style:normal;color:var(--text)}
.topbar{border-bottom:1px solid var(--line);background:var(--night)}

footer{padding:34px 0 50px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:18px}

/* Utility */
.spaced{margin-top:32px}

/* Brand mit Logo */
.nav .brand{display:inline-flex;align-items:center;gap:9px}
.nav .brand img{display:block}

/* Wortmarke in der Nav */
.nav .brand img.mark{height:16px;width:auto}

/* ===== Responsive: globale Absicherung ===== */
img{max-width:100%}
h1,h2{overflow-wrap:break-word}

/* ===== Mobile (Smartphones) ===== */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav{padding:14px 20px}
  .nav .links{gap:14px}
  .nav .links a{padding:10px 4px}          /* größere Tap-Fläche */
  .hero{padding:40px 0 86px}
  .hero.compact{padding:30px 0 72px}
  h1{font-size:clamp(1.8rem,8.2vw,2.5rem)}
  .hero p{font-size:.99rem;margin-top:16px}
  .horizon{bottom:36px}
  section{padding:50px 0}
  .rows > div{padding:16px 2px}
  .facts{padding:20px}
  main.legal{padding:40px 20px 56px}
  footer{padding:26px 0 40px}
  footer .wrap{flex-direction:column;gap:10px}
}

/* ===== Sehr schmale Geräte ===== */
@media (max-width:400px){
  .eyebrow{letter-spacing:.1em;font-size:11.5px}
  .nav .brand img.mark{height:14px}
  .nav .links a{font-size:.88rem}
}