/* ============================================================
   Above & Beyond – AI Hub
   Gemeinsame Grundlage fuer alle Seiten

   WARUM DIESE DATEI EXISTIERT
   Vorher trug jede Seite ihre eigene Kopie der Design-Tokens im
   Kopf. Vier Kopien derselben Werte laufen zwangslaeufig
   auseinander – genau das war passiert. Ab hier stehen Farben,
   Schriftskala, Raster, Kicker, Buttons, Kopfleiste und Footer
   an einer Stelle. Seitenspezifisches bleibt in der jeweiligen
   Datei.

   EINBINDUNG
   Startseite      <link rel="stylesheet" href="css/hub.css">
   Unterseiten     <link rel="stylesheet" href="../css/hub.css">
   Die Pfade sind relativ, damit die Seiten auch lokal per
   Doppelklick funktionieren. Bitte beibehalten.

   REGELN AUS DEM A&B DESIGN MANUAL – NICHT VERHANDELBAR
   Radius 0, Ausnahme Buttons und Pills 2 px. Keine Schatten,
   keine Verlaeufe, kein 3-D, keine Spiegelungen. Kein zweites
   Blau. Abstaende nur in 4-px-Schritten. Schriftgewichte 300,
   400 und 500 – Bold ueber 20 pt ist untersagt. Zeilenlaenge
   maximal 75 Zeichen. Grey 400 nie fuer Text.

   BEWEGUNG
   Ausschliesslich CSS. Die Sicherheits-Header (_headers)
   erlauben per script-src 'self' kein Inline-Skript, und die
   Seite braucht auch keins. Jede Choreografie steckt in
     @supports (animation-timeline: view())
     + @media (prefers-reduced-motion: no-preference)
   und ist damit reine Zugabe.
   ============================================================ */

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

:root{
  /* ---------- Farbe ---------- */
  --b900:#012332; --b800:#01415A; --b700:#005C82; --b600:#006EA0; --b500:#0087BE;
  --b400:#33A0CB; --b300:#66B9D8; --b200:#99D1E5; --b100:#CCE8F2; --b050:#EBF6FB;
  --ink900:#14181B; --ink700:#484B4D; --ink500:#696B6D;
  --g400:#AFAFAF; --g300:#D2D2D2; --g200:#ECEEF2; --g100:#F6F7F9;
  --deep:#01202E;

  --ff:'Roboto',Arial,Helvetica,sans-serif;

  /* ---------- Schriftskala, Verhaeltnis 1,25 ab 16 px ----------
     13 · 16 · 20 · 25 · 32 · 40 · 50 · 64 · 80 · 100
     Die 10 px des Kickers stehen bewusst ausserhalb der Skala,
     sie sind im Design Manual fest vorgegeben. */
  --t-kicker:10px;
  --t-s:13px;
  --t-m:16px;
  --t-l:20px;
  --t-xl:25px;
  --t-num:clamp(24px,2.6vw,32px);
  --t-h3:clamp(20px,2vw,25px);
  --t-h2:clamp(28px,4vw,50px);

  /* ---------- Raster ---------- */
  --cols:12;
  --gutter:24px;
  --page-max:1280px;
  --page-pad:40px;
  /* Lesebreite fuer Fliesstext-Seiten (Impressum, Datenschutz) */
  --prosa-max:820px;

  /* Optischer Randausgleich. Roboto Light haengt bei grossen
     Graden sichtbar von der Kante ab. */
  --optical:-.04em;

  /* Weiches Timing ohne Overshoot. Federn waere spielerisch,
     und spielerisch ist hier falsch. */
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--ff); font-weight:400;
  font-size:var(--t-m); line-height:1.55;
  color:var(--ink700); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--b100); color:var(--b900)}

/* ============================================================
   Tastaturbedienung
   ============================================================ */
:focus-visible{outline:2px solid var(--b500); outline-offset:3px}
.hero :focus-visible,.band--dunkel :focus-visible,
.topbar :focus-visible,footer :focus-visible{outline-color:#fff}

.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:#fff; color:var(--b700); padding:12px 16px;
  font-size:var(--t-s); font-weight:500;
}
.skip:focus{left:0}

/* ============================================================
   Raster
   ============================================================ */
.wrap{max-width:var(--page-max); margin-inline:auto; padding-inline:var(--page-pad)}
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);
}
.col-text{grid-column:1/span 7}
.col-full{grid-column:1/-1}

/* ============================================================
   Kicker – 10 px, Versalien, Laufweite .19em, Gewicht 500
   ============================================================ */
.kicker{
  font-size:var(--t-kicker); letter-spacing:.19em;
  text-transform:uppercase; font-weight:500;
  color:var(--b700); margin-bottom:20px;
}
.band--dunkel .kicker{color:var(--b300)}

/* ============================================================
   Bausteine der Bewegung
   ============================================================ */
@keyframes wachsen{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes aufsteigen{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes zeileHoch{from{transform:translateY(105%)} to{transform:translateY(0)}}
@keyframes linieZiehen{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Aufstieg beim Laden – zeitgesteuert, laeuft in jedem Browser */
.rise{animation:aufsteigen .9s var(--ease) both}
.rise--1{animation-delay:.10s}
.rise--2{animation-delay:.20s}

/* Zeilenweise Maske fuer Ueberschriften */
.zeile{display:block; overflow:hidden; padding-bottom:.06em}
.zeile>span{display:block; animation:zeileHoch 1s var(--ease) both}
.zeile:nth-child(2)>span{animation-delay:.13s}
.zeile:nth-child(3)>span{animation-delay:.26s}

/* Lesefortschritt. Ohne Unterstuetzung bleibt die Linie bei
   scaleX(0), also unsichtbar – kein halber Zustand. */
.fortschritt{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:55;
  background:var(--b500); transform:scaleX(0); transform-origin:0 50%;
}

/* ============================================================
   Buttons
   Blue 700 statt Blue 500: weisser 13-px-Text auf Blue 500
   erreicht nur rund 4:1 Kontrast, Blue 700 rund 7:1.
   ============================================================ */
.btnrow{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:40px}
.btn{
  display:inline-block; font-family:inherit;
  font-size:var(--t-s); font-weight:500; letter-spacing:.03em;
  padding:14px 28px; border-radius:2px; text-decoration:none;
  background:var(--b700); color:#fff; border:1px solid var(--b700);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{background:var(--b900); border-color:var(--b900)}
.btn--linie{background:transparent; color:var(--b700); border-color:var(--b700)}
.btn--linie:hover{background:var(--b700); color:#fff}

/* ============================================================
   Statusmarke
   Versalien unter 12 pt, darum Laufweite .15em nach Manual.
   Radius 2 px ist fuer Pills zugelassen.
   ============================================================ */
.pill{
  display:inline-block; font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:4px 8px; border-radius:2px; white-space:nowrap;
  background:var(--b700); color:#fff;
}
.pill--offen{background:var(--g200); color:var(--ink700)}

/* ============================================================
   Kopfleiste der Unterseiten
   ============================================================ */
.topbar{background:var(--deep); color:#fff}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:20px;
}
.topbar img{width:148px; height:45px; display:block}
.topbar__label{
  font-size:var(--t-kicker); letter-spacing:.19em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.56);
}
.topbar a{display:block; border:0}

/* ============================================================
   Fliesstext-Seiten: Impressum, Datenschutz
   ============================================================ */
.prosa{max-width:var(--prosa-max); padding-block:96px 112px}

.prosa h1{
  font-weight:300; font-size:var(--t-h2); line-height:1.08;
  letter-spacing:-.018em; color:var(--ink900);
  margin-left:var(--optical); text-wrap:balance;
}
.prosa .sub{
  font-size:var(--t-l); font-weight:300; color:var(--ink500);
  margin-top:16px; max-width:60ch;
}
.prosa .stand{font-size:var(--t-s); color:var(--ink500); margin-top:12px}

.prosa h2{
  font-weight:500; font-size:var(--t-l); line-height:1.3;
  letter-spacing:-.005em; color:var(--ink900);
  margin-top:56px; padding-top:24px; border-top:1px solid var(--g300);
}
.prosa h2:first-of-type{margin-top:64px}
.prosa h3{
  font-weight:500; font-size:var(--t-m); color:var(--ink900);
  margin-top:32px;
}
.prosa p,.prosa ul,.prosa address{
  margin-top:12px; max-width:68ch; text-wrap:pretty;
}
.prosa ul{padding-left:20px}
.prosa li{margin-top:6px}
.prosa address{font-style:normal}
.prosa a{
  color:var(--b700); text-decoration:none;
  border-bottom:1px solid var(--b200);
  transition:border-color .16s ease;
}
.prosa a:hover{border-bottom-color:var(--b700)}
.prosa code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; background:var(--g200); padding:2px 6px;
}

/* Untergeordneter Rechtsteil (Haftung, Urheberrecht) */
.prosa .klein{margin-top:64px; padding-top:32px; border-top:1px solid var(--g300)}
.prosa .klein h3{font-size:var(--t-s); margin-top:28px}
.prosa .klein p{font-size:var(--t-s); color:var(--ink500)}

/* ============================================================
   Hinweisblock
   Linke Kante in Blue 500 – eine Linie, keine Flaeche, damit
   der Signaturmoment der Startseite selten bleibt.
   ============================================================ */
.note{
  border-left:2px solid var(--b500); background:var(--g100);
  padding:20px 24px; margin-top:24px; max-width:68ch;
  font-size:var(--t-s); line-height:1.6;
}
.note b{color:var(--ink900); font-weight:500}

/* ============================================================
   Footer – auf allen Seiten gleich
   ============================================================ */
footer{
  position:relative; z-index:1;
  background:var(--deep); color:rgba(255,255,255,.66);
  padding-block:64px 48px; font-size:var(--t-s);
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:32px;
  justify-content:space-between; align-items:flex-end;
}
footer img{width:132px; height:40px; display:block; margin-bottom:16px}
footer a{
  color:rgba(255,255,255,.66); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .16s ease,border-color .16s ease;
}
footer a:hover{color:#fff; border-bottom-color:#fff}
.footer__links{display:flex; gap:24px; flex-wrap:wrap}

/* ============================================================
   Gemeinsame Choreografie
   Langschreibweise ist Pflicht: die Kurzform `animation:` setzt
   animation-duration auf ihren Ausgangswert zurueck,
   scrollgesteuerte Animationen brauchen dort `auto`.
   ============================================================ */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){

  .fortschritt{
    animation-name:wachsen; animation-timing-function:linear;
    animation-fill-mode:both; animation-duration:auto;
    animation-timeline:scroll(root block);
  }

  .reveal{
    animation-name:aufsteigen; animation-timing-function:linear;
    animation-fill-mode:both; animation-duration:auto;
    animation-timeline:view();
    animation-range:entry 6% cover 24%;
  }

  .split .zeile>span{
    animation-name:zeileHoch; animation-timing-function:linear;
    animation-fill-mode:both; animation-duration:auto;
    animation-delay:0s;
    animation-timeline:view();
    animation-range:entry 10% cover 26%;
  }
}
}

/* Seitenuebergaenge zwischen allen Seiten des Hub.
   Wirkt dokumentuebergreifend nur, wenn jede beteiligte Seite
   diese Regel traegt – deshalb steht sie hier, nicht lokal. */
@view-transition{navigation:auto}

/* ============================================================
   Schmale Ansichten
   ============================================================ */
@media (max-width:900px){
  .col-text{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--page-pad:24px; --gutter:16px}
  .prosa{padding-block:64px 80px}
  .prosa h2:first-of-type{margin-top:48px}
  .topbar img{width:120px; height:37px}
}