/* ============================================================
   at aura — Unterseiten im „Null Komma Null"-Design
   Gilt für die DEUTSCHEN Unterseiten (Datenschutz, Impressum,
   Support, Community-Regeln, Invite). Die englischen Seiten
   nutzen weiterhin style.css — diese Datei dort NICHT einbinden.
   Tokens und Formen folgen der Startseite: Wild Sand als Grund,
   Weiß als Fläche, Aura Pulse als einzige Farbe. Kein Dunkelmodus
   (eine bewusste Entscheidung der Startseite, hier fortgeführt).
   ============================================================ */

/* ————— Fonts: IBM Plex Mono (Brand-Typo, lokal, null externe Requests) ————— */
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#F5F5F7;            /* Wild Sand als Grund (Brand, kein Reinweiß) */
  --flaeche:#FFFFFF;       /* Karten liegen als Weiß darauf */
  --ink:#060811;           /* Midnight Core */
  --blau:#2047ED;          /* Aura Pulse, die einzige Farbe */
  --blau-tief:#1737C8;     /* Hover/Aktiv */
  --grau:#5A5E6C;          /* Sekundärtext */
  --grau2:#64687A;         /* Meta, Kleinstgrade */
  --hair:rgba(6,8,17,.13); --hair2:rgba(6,8,17,.28);
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif; /* Lesetext; die Mono bleibt die Stimme der Marke */
  --colR:clamp(28px,6vw,96px);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:400;
  overflow-x:hidden;
}
::selection{background:var(--blau);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:3px}

/* ————— Skip-Link ————— */
.skip-link{
  position:fixed;top:10px;left:50%;transform:translate(-50%,-200%);z-index:60;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  padding:.82em 1.35em;border-radius:999px;background:var(--blau);color:#fff;
  text-decoration:none;transition:transform .15s ease;
}
.skip-link:focus-visible{transform:translate(-50%,0);outline-offset:1px}

/* ————— Header: wie die Startseite — Marke links, Pillen rechts ————— */
.site-header{
  position:fixed;top:0;left:var(--colR);right:var(--colR);height:66px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;color:var(--ink);
  background:var(--bg);padding:6px 10px 6px 0;border-radius:999px;
}
.brand svg{width:21px;height:21px;display:block;fill:var(--blau)}
.site-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.82em 1.35em;border-radius:999px;border:1px solid var(--hair2);
  text-decoration:none;cursor:pointer;background:var(--bg);color:var(--ink);
  white-space:nowrap;
}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--blau);border-color:var(--blau);color:#fff}
.btn-primary:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.btn-ghost{background:transparent}
.btn .icon{width:16px;height:16px}

/* ————— Inhalt: eine ruhige Lesespalte ————— */
.subpage-main{padding:130px var(--colR) 80px}
.container{max-width:720px;margin:0 auto}
.prose h1{
  font-weight:600;letter-spacing:-.03em;line-height:1.14;
  font-size:clamp(1.7rem,2.9vw,2.4rem);max-width:23ch;
}
.prose h2{
  font-weight:600;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.15rem,1.7vw,1.4rem);max-width:30ch;
  margin-top:2.6em;
}
.prose h1 + p,.prose h2 + p,.prose h2 + ul{margin-top:1.1em}
.prose p,.prose li{
  font-family:var(--sans);letter-spacing:.005em;
  font-size:clamp(.9rem,1.05vw,1rem);line-height:1.7;color:var(--grau);
}
.prose p{margin-top:1.1em;max-width:62ch}
.prose ul{margin-top:1.1em;padding-left:1.15em}
.prose li{margin-top:.55em}
.prose strong{font-weight:600;color:var(--ink)} /* Betonung, keine Messung — Blau bleibt Signal */
.prose a{
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hair2);
}
.prose a:hover{text-decoration-color:var(--blau)}
.prose small{font-family:var(--sans);font-size:.82em;color:var(--grau2)}

/* Meta-Zeile unter der Überschrift */
.meta,.prose .meta{font-family:var(--sans);font-size:11px;letter-spacing:.03em;color:var(--grau2);margin-top:14px}

/* ————— Kästen: weiße Flächen, nahezu scharf — wie die Karten der Startseite ————— */
.box,.prose .box{
  background:var(--flaeche);border:1px solid var(--hair);border-radius:2px;
  padding:18px 20px;margin-top:1.4em;max-width:none;color:var(--grau);
}
.box-warn{border-left:2px solid var(--blau)}

/* ————— FAQ: <details> als Karte, der Wahlring zeigt Offen/Zu ————— */
.prose details{
  background:var(--flaeche);border:1px solid var(--hair);border-radius:2px;
  margin-top:10px;padding:0 20px;
}
.prose details:first-of-type{margin-top:1.4em}
.prose summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:.7em;
  font-size:13px;font-weight:500;letter-spacing:.01em;line-height:1.45;color:var(--ink);
  padding:15px 0;
}
.prose summary::-webkit-details-marker{display:none}
.prose summary::before{ /* derselbe Wahlring wie auf der Startseite: ein Zeichen fürs Wählen */
  content:"";width:9px;height:9px;border-radius:50%;flex:none;align-self:center;
  border:1.5px solid var(--hair2);
}
.prose summary:hover::before{border-color:var(--ink)}
.prose details[open] summary::before{border-color:var(--blau);background:var(--blau)}
.prose details p{margin:0;padding:0 0 18px calc(9px + .7em);max-width:none}

/* ————— CTA-Reihe (Invite) ————— */
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,36px)}

/* Invite: zentrierter Einladungs-Block, das Zeichen funkt oben */
.invite-main{text-align:center}
.invite-main .prose p{margin-left:auto;margin-right:auto}
.invite-main .cta-row{justify-content:center}
.invite-logomark{width:56px;height:56px;margin:0 auto 20px;display:block;fill:var(--blau)}

/* ————— Footer: wie die Startseite ————— */
.site-footer{
  padding:44px var(--colR) 60px;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  font-family:var(--sans);font-size:11px;letter-spacing:.03em;color:var(--grau2);
}
.site-footer nav{display:flex;flex-wrap:wrap}
.site-footer a{text-decoration:none;color:var(--grau)}
.site-footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blau)}
.site-footer a[aria-current="page"]{color:var(--ink)}

/* ————— Mobil ————— */
@media (max-width:719px){
  :root{--colR:24px}
  .site-header{left:20px;right:20px;height:auto;min-height:56px;padding:10px 0;flex-wrap:wrap}
  .brand{font-size:13px}
  .brand svg{width:18px;height:18px}
  .btn{font-size:11px;padding:.76em 1.05em}
  .subpage-main{padding-top:110px}
}