/* ==========================================================================
   ZukunftSTARK AKADEMIE . Rechtsseiten
   Gemeinsame Gestaltung fuer Impressum und Datenschutzerklaerung.
   Tokens, Schriften und Farben sind unveraendert aus der Startseite
   uebernommen, damit die Seiten sich wie ein Teil der Hauptseite anfuehlen.
   Kein externer Request, keine Schriftquelle von aussen, kein Skript.
   ========================================================================== */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fonts/dmsans-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:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;
  src:url("fonts/dmsans-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;}
@font-face{font-family:'Farray';src:url("fonts/FARRAY.otf") format("opentype");font-display:swap;}

:root{
  --night:#0E0C14;
  --night-2:#16131E;
  --night-3:#08070C;
  --paper:#F7F3EB;
  --paper-2:#FCF9F3;
  --paper-3:#EFE9DD;

  --blau:#3427D6;
  --blau-hi:#7C6BFF;
  --petrol:#5DE4B2;
  --pink:#EE2578;
  --orange:#FF9100;

  --on-dark:#F7F3EB;
  --on-dark-dim:#ABA5B4;
  --on-light:#16131E;
  --on-light-dim:#5A5560;
  --edge-d:rgba(247,243,235,.15);
  --edge-l:rgba(22,19,30,.14);

  --pad:clamp(20px,5vw,64px);
  --maxw:820px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--on-light);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-weight:400;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:2px}
.on-night :focus-visible{outline-color:var(--petrol)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:100;background:var(--on-light);color:var(--paper);
  padding:.7em 1em;border-radius:3px;font-weight:700;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* --------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */
header{background:var(--night-3);color:var(--on-dark);padding-block:18px}
header .inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between}
header img{height:clamp(44px,5.6vw,64px);width:auto}
header nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.85rem}
header nav a{color:var(--on-dark-dim);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:6px}
header nav a:hover{color:var(--on-dark);border-bottom-color:currentColor}
header nav a[aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--petrol)}

/* --------------------------------------------------------------------------
   Titelblock
   -------------------------------------------------------------------------- */
.title{background:var(--night-3);color:var(--on-dark);
  padding-block:clamp(30px,6vw,64px) clamp(38px,7vw,76px)}
.title .kick{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--petrol);margin-bottom:16px}
.title h1{font-family:'Farray','DM Sans',sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.94;letter-spacing:.004em;font-size:clamp(2.1rem,6.4vw,3.6rem)}
.title p{margin-top:16px;color:var(--on-dark-dim);font-size:clamp(1rem,1.7vw,1.12rem);
  max-width:56ch;line-height:1.62}

/* --------------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------------- */
main{padding-block:clamp(38px,7vw,74px) clamp(48px,9vw,96px)}

main h2{font-weight:900;letter-spacing:-.03em;line-height:1.18;
  font-size:clamp(1.24rem,2.5vw,1.62rem);
  margin-top:clamp(38px,6vw,58px);margin-bottom:14px;
  padding-top:clamp(24px,4vw,34px);border-top:1px solid var(--edge-l);
  scroll-margin-top:20px}
main > .wrap > h2:first-child{margin-top:0;padding-top:0;border-top:0}

main h3{font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.02rem,1.7vw,1.14rem);margin-top:30px;margin-bottom:8px}

main p,main li{font-size:clamp(1rem,1.3vw,1.06rem);line-height:1.74}
main p{margin-bottom:14px;max-width:70ch}
main ul{margin:0 0 16px;padding-left:1.15em;max-width:70ch}
main li{margin-bottom:6px}
main li::marker{color:var(--blau)}
main a{color:var(--blau);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px}
main a:hover{text-decoration-thickness:2px}
main strong{font-weight:700}

/* Anschriftenblock: Zeilenumbrueche wie geschrieben, ohne Listenpunkte */
.adr{font-style:normal;line-height:1.72;margin-bottom:14px}

/* Ruhiger Kasten fuer Kontakt und Hinweise.
   Gebaut wie .card auf der Startseite: heller Grund, Haarlinie ringsum,
   4px Radius. Bewusst KEIN farbiger Balken an der linken Kante. Den
   verwendet die Head-Seite nur ein einziges Mal, fuer das grosse
   Pull-Quote .pull, und dort als typografisches Mittel ohne Flaeche.
   Wo ein Kasten einen Farbakzent braucht, traegt ihn der Kicker
   darueber, genau wie .card__aud und .pillar .who b. */
.box{background:var(--paper-2);border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--edge-l);
  padding:clamp(16px,3vw,22px) clamp(18px,3.2vw,26px);
  margin:20px 0 24px;max-width:70ch}
.box p:last-child{margin-bottom:0}

/* Kicker im Kasten. Farbwerte wie auf der Startseite: auf hellem Grund traegt
   LEBEN #A81254 statt #EE2578, reines Pink erreicht dort nur 3,0:1. */
.box .lbl{display:block;font-size:.66rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blau);margin-bottom:10px}
.box.pink .lbl{color:#A81254}

/* Inhaltsverzeichnis der Datenschutzerklaerung */
.toc{background:var(--paper-2);border:1px solid var(--edge-l);border-radius:4px;
  padding:clamp(18px,3vw,26px);margin-bottom:clamp(30px,5vw,44px)}
.toc h2{margin:0 0 12px;padding:0;border:0;font-size:.7rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-light-dim)}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:34px}
.toc li{margin-bottom:5px;font-size:.95rem;break-inside:avoid}
.toc a{color:var(--on-light);text-decoration:none;
  border-bottom:1px solid var(--edge-l)}
.toc a:hover{border-bottom-color:var(--blau);color:var(--blau)}
@media(max-width:620px){.toc ol{columns:1}}

.stand{margin-top:clamp(38px,6vw,58px);padding-top:22px;border-top:1px solid var(--edge-l);
  font-size:.86rem;color:var(--on-light-dim)}

/* --------------------------------------------------------------------------
   Fuss
   -------------------------------------------------------------------------- */
footer{background:var(--night-3);color:var(--on-dark);
  padding-block:clamp(34px,6vw,52px)}
footer .inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
footer img{height:clamp(44px,6vw,58px);width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem}
footer nav a{color:var(--on-dark-dim);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:7px}
footer nav a:hover{color:var(--on-dark);border-bottom-color:currentColor}
footer .fine{width:100%;padding-top:22px;border-top:1px solid var(--edge-d);
  font-size:.74rem;color:var(--on-dark-dim);line-height:1.65}

/* --------------------------------------------------------------------------
   Startseite der Subdomain (Auswahl)
   -------------------------------------------------------------------------- */
.cards{display:grid;gap:16px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:660px){.cards{grid-template-columns:1fr 1fr}}
.card{display:block;background:var(--paper-2);border:1px solid var(--edge-l);
  border-radius:5px;padding:clamp(20px,3.4vw,28px);text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--blau);transform:translateY(-2px)}
.card b{display:block;font-weight:900;letter-spacing:-.028em;
  font-size:clamp(1.14rem,2.2vw,1.34rem);margin-bottom:8px}
.card span{display:block;color:var(--on-light-dim);font-size:.95rem;line-height:1.62}
.card em{display:block;font-style:normal;margin-top:12px;color:var(--blau);
  font-weight:700;font-size:.86rem}

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