/* Kosmopost — gemeinsames Aussehen aller Seiten.
   Farbsystem: Eisblau = Raum · Gold = Marke · Bernstein = Kern und Posts. */

/* Inter liegt auf dem eigenen Server: Google Fonts direkt einzubinden würde
   die IP jedes Besuchers an Google übertragen — in Deutschland abmahnfähig. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --raum-0: #04070D;
  --raum-1: #081020;
  --raum-2: #10203A;
  --flaeche: #0D1524;
  --linie: #1C2942;
  --eis: #7EA6E8;
  --eis-hell: #DCE8FF;
  --gold: #C9A96A;
  --gold-hell: #F7E4BE;
  --bernstein: #FFA645;
  --text: #E7ECF6;
  --text-leise: #93A0BA;
  --breite: 760px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dreht { animation: none !important; }
}

body {
  background: var(--raum-0);
  color: var(--text);
  font: 400 16.5px/1.7 Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

a { color: var(--eis); text-decoration-color: rgba(126, 166, 232, .4); }
a:hover { color: var(--eis-hell); }
a:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; text-wrap: balance; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5.5vw, 2.9rem); }
h2 { font-size: 1.4rem; margin: 2.6rem 0 .7rem; }
h3 { font-size: 1.08rem; margin: 1.8rem 0 .4rem; }
p, li { max-width: 66ch; }
p + p { margin-top: .9rem; }
ul { padding-left: 1.3rem; margin: .6rem 0; }
li { margin: .3rem 0; }
strong { color: #FFFFFF; font-weight: 600; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 18px; padding-bottom: 18px; }
.marke { display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: var(--text); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.marke img { width: 30px; height: 30px; border-radius: 8px; }
.kopf nav { display: flex; gap: 18px; font-size: .9rem; }
.kopf nav a { color: var(--text-leise); text-decoration: none; }
.kopf nav a:hover { color: var(--text); }

/* ---------- Sternenfeld ---------- */
.sterne { position: absolute; inset: 0; pointer-events: none; }
.sterne circle { fill: var(--eis); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 74px 0 58px;
  background: radial-gradient(120% 100% at 50% 0%, var(--raum-2) 0%,
    var(--raum-1) 46%, var(--raum-0) 100%); }
.hero .wrap { position: relative; z-index: 2; text-align: center; }
.gyros { width: 148px; height: 148px; margin: 0 auto 30px; display: block; }
.dreht { animation: kreisen 46s linear infinite; transform-origin: 200px 200px; }
@keyframes kreisen { to { transform: rotate(360deg); } }
.puls { animation: pulsen 3.6s ease-in-out infinite; transform-origin: 200px 200px; }
@keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.hero p.claim { color: var(--text-leise); font-size: 1.14rem; margin: 14px auto 0;
  max-width: 40ch; }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  padding: 6px 14px; border: 1px solid var(--linie); border-radius: 99px;
  background: rgba(13, 21, 36, .7); font-size: .84rem; color: var(--text-leise); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--bernstein);
  box-shadow: 0 0 8px var(--bernstein); }

/* ---------- Inhalt ---------- */
main { padding: 54px 0 10px; }
/* Die erste Überschrift steht direkt unter dem Hero — ihr Außenabstand
   würde sich mit dessen Polsterung zu einer großen Lücke addieren. */
main > .wrap > h2:first-child { margin-top: 0; }
/* 240 px statt 215: bei vier Karten ergibt das ein sauberes 2×2 statt 3+1. */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px; margin: 26px 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 13px; padding: 19px 20px; }
.karte h3 { margin: 0 0 5px; font-size: 1rem; }
.karte p { color: var(--text-leise); font-size: .94rem; margin: 0; }

/* Rechtsseiten */
.rechtstext { padding: 40px 0 20px; }
.rechtstext h1 { font-size: clamp(1.8rem, 4.5vw, 2.3rem); }
.stand { color: var(--text-leise); font-size: .88rem; margin-top: 8px; }
.box { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 13px; padding: 17px 21px; margin: 18px 0; }
.box p:first-child { margin-top: 0; }
.zurueck { display: inline-block; color: var(--text-leise); font-size: .88rem;
  text-decoration: none; margin-bottom: 6px; }
.zurueck:hover { color: var(--text); }

/* ---------- Fuß ---------- */
footer { margin-top: 66px; border-top: 1px solid var(--linie); padding: 26px 0 46px;
  color: var(--text-leise); font-size: .88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--text-leise); text-decoration: none; }
footer a:hover { color: var(--text); }