/* ---------------------------------------------------------------------------
 * site.css — GENERIERT von scripts/build.py aus
 *            src/templates/site.tpl.css + src/design.json
 *
 * Nicht in public/wwwroot bearbeiten. Farben, Abstaende, Rundungen und
 * Bewegungsdauern stehen ausschliesslich in src/design.json; der :root-Block
 * unten wird daraus erzeugt. Wer eine Farbe aendert, aendert sie ueberall —
 * und tests/test_kontrast.py rechnet die Kontraste beim naechsten Lauf nach.
 *
 * DSGVO (Modul 14): Fonts werden lokal aus /fonts/ geladen, nie vom Google-CDN.
 * Fehlen die WOFF2-Dateien, greift automatisch der System-Font.
 * ------------------------------------------------------------------------ */

:root{
  /* Palette */
  --farbe-grund-1: #123246;
  --farbe-grund-2: #0B1F2E;
  --farbe-grund-3: #071722;
  --farbe-karte-basis: #0B1F2E;
  --farbe-text: #EDF2F4;
  --farbe-text-leise: #8FA8B5;
  --farbe-signal: #E4442E;
  --farbe-signal-flaeche: #D2311B;
  --flaeche-karte-deckkraft: 0.62;
  --flaeche-linie: rgba(237,242,244,.14);
  --flaeche-linie-stark: rgba(237,242,244,.24);
  --flaeche-schleier: rgba(255,255,255,.04);
  --flaeche-schleier-stark: rgba(255,255,255,.08);
  --flaeche-schatten: 0 18px 48px -24px rgba(0,0,0,.75);
  --flaeche-schatten-knopf: 0 8px 20px -10px rgba(210,49,27,.7);
  --flaeche-karte: rgba(11,31,46,0.62);
  --flaeche-licht-warm: rgba(228,68,46,.16);
  --flaeche-licht-kalt: rgba(143,168,181,.14);
  --flaeche-banner: rgba(228,68,46,.12);
  --farbe-auf-signal: #ffffff;
  /* schrift */
  --schrift-familie: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --schrift-familie-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --schrift-name: clamp(3rem, 15vw, 4.2rem);
  --schrift-name-klein: clamp(1.15rem, 5vw, 1.35rem);
  --schrift-gross: clamp(2.3rem, 10vw, 3rem);
  --schrift-mittel: 1.8rem;
  --schrift-claim: clamp(1.05rem, 4.2vw, 1.2rem);
  --schrift-lead: 1.02rem;
  --schrift-basis: 0.95rem;
  --schrift-klein: 0.86rem;
  --schrift-mikro: 0.72rem;
  /* raster */
  --raster-1: 4px;
  --raster-2: 8px;
  --raster-3: 12px;
  --raster-4: 16px;
  --raster-5: 22px;
  --raster-6: 28px;
  --raster-7: 38px;
  --raster-breite: 440px;
  /* rundung */
  --rundung-klein: 10px;
  --rundung-mittel: 14px;
  --rundung-gross: 22px;
  /* bewegung */
  --bewegung-schnell: 120ms;
  --bewegung-ruhig: 220ms;
  --bewegung-kurve: cubic-bezier(.2,.7,.3,1);
}

/* Heller Modus — folgt der Systemeinstellung des Besuchers. */
@media (prefers-color-scheme: light){
  :root{
    --farbe-grund-1: #F7FAFB;
    --farbe-grund-2: #EEF3F5;
    --farbe-grund-3: #E4EBEE;
    --farbe-karte-basis: #FFFFFF;
    --farbe-text: #0B1F2E;
    --farbe-text-leise: #4E6875;
    --farbe-signal: #D2311B;
    --farbe-signal-flaeche: #C5301A;
    --flaeche-karte-deckkraft: 1;
    --flaeche-linie: rgba(11,31,46,.12);
    --flaeche-linie-stark: rgba(11,31,46,.20);
    --flaeche-schleier: rgba(11,31,46,.03);
    --flaeche-schleier-stark: rgba(11,31,46,.06);
    --flaeche-schatten: 0 16px 40px -28px rgba(11,31,46,.45);
    --flaeche-schatten-knopf: 0 8px 18px -10px rgba(197,48,26,.45);
    --flaeche-karte: rgba(255,255,255,1);
    --flaeche-licht-warm: rgba(210,49,27,.16);
    --flaeche-licht-kalt: rgba(78,104,117,.14);
    --flaeche-banner: rgba(210,49,27,.12);
    --farbe-auf-signal: #ffffff;
  }
}

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:200 800;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400 700;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--schrift-familie);
  color:var(--farbe-text);
  background:
    /* Zwei weiche Lichtquellen ueber dem Verlauf: oben das Marken-Rot als
       Hauch, unten kaltes Wasser. Gibt der Flaeche Tiefe, ohne dass ein
       zweites Bild geladen werden muss. */
    radial-gradient(120% 80% at 12% -10%, var(--flaeche-licht-warm) 0%, transparent 55%),
    radial-gradient(100% 70% at 90% 0%, var(--flaeche-licht-kalt) 0%, transparent 50%),
    linear-gradient(180deg, var(--farbe-grund-1) 0%, var(--farbe-grund-2) 52%, var(--farbe-grund-3) 100%);
  background-attachment:fixed;
  min-height:100svh;
  display:flex;justify-content:center;
  padding:var(--raster-5) var(--raster-4);
  line-height:1.5;
}
body.centered{align-items:center}

/* --- Sichtbarer Sprunglink (Modul 36: Tastaturbedienung) ------------------ */
.skip{
  position:absolute;left:-9999px;top:var(--raster-2);
  background:var(--farbe-signal-flaeche);color:var(--farbe-auf-signal);
  padding:var(--raster-3) var(--raster-4);
  border-radius:var(--rundung-klein);
  font-weight:700;text-decoration:none;z-index:10;
}
.skip:focus{left:var(--raster-2)}

/* --- Karte ---------------------------------------------------------------- */
.card{
  width:100%;max-width:var(--raster-breite);
  border:1px solid var(--flaeche-linie);
  border-radius:var(--rundung-gross);
  background:var(--flaeche-karte);
  backdrop-filter:blur(10px);
  box-shadow:var(--flaeche-schatten);
  padding:var(--raster-7) var(--raster-6) var(--raster-6);
  position:relative;
  overflow:hidden;
}
/* Tiefenlinie am linken Rand — die Markierungen eines Tauchseils. */
.card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:14px;
  background:repeating-linear-gradient(
    to bottom, transparent 0 22px, var(--flaeche-linie) 22px 23px);
  opacity:.6;
}
.card.plain::before{content:none}
.card.plain{padding-bottom:var(--raster-5)}

.wrap{width:100%;max-width:var(--raster-breite);text-align:center}

/* --- Tap-Karte (t2): eine Handlung, sonst nichts -------------------------- */
.tap{width:100%;max-width:360px;text-align:center}
.tap .photo{width:104px;height:104px;margin-bottom:var(--raster-4)}
.tap h1{font-size:var(--schrift-mittel);line-height:1.1;margin-bottom:var(--raster-1)}
.tap .handle{margin:var(--raster-1) 0 var(--raster-7)}
.tap footer{justify-content:center;margin-top:var(--raster-7)}

/* --- Kopfbereich ---------------------------------------------------------- */
.eyebrow{
  font-family:var(--schrift-familie-mono);
  font-size:var(--schrift-mikro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--farbe-text-leise);
  margin-bottom:var(--raster-5);
}

.photo{
  width:96px;height:96px;border-radius:50%;
  border:2px solid var(--flaeche-linie-stark);
  object-fit:cover;
  margin-bottom:var(--raster-4);
  background:var(--farbe-grund-1);
}
.wrap .photo{width:88px;height:88px}

h1{
  font-size:var(--schrift-gross);
  font-weight:800;line-height:1.04;letter-spacing:-.015em;
  margin-bottom:var(--raster-1);
}
.wrap h1{font-size:var(--schrift-mittel);line-height:1.1}
h1 .j{color:var(--farbe-signal)}

.sub{
  font-family:var(--schrift-familie-mono);
  font-size:var(--schrift-klein);
  color:var(--farbe-text-leise);
  margin-bottom:var(--raster-6);
}
.handle{
  font-family:var(--schrift-familie-mono);
  font-size:var(--schrift-klein);
  color:var(--farbe-text-leise);
  margin:var(--raster-2) 0 var(--raster-6);
}

/* --- Startseite "Signal": der Name traegt die Karte ----------------------- */
.karte-signal{
  width:100%;max-width:var(--raster-breite);
  display:flex;flex-direction:column;
  border:1px solid var(--flaeche-linie);
  border-radius:var(--rundung-gross);
  background:var(--flaeche-karte);
  backdrop-filter:blur(10px);
  box-shadow:var(--flaeche-schatten);
  padding:var(--raster-6) var(--raster-5) var(--raster-5);
}
.karte-signal .photo{margin-bottom:var(--raster-5)}

.namenszug{
  font-size:var(--schrift-name);
  line-height:.88;
  font-weight:800;
  letter-spacing:-.035em;
  margin:0;
  /* Der Vorname darf die Karte fuellen; bei langen Namen lieber umbrechen
     als ueberlaufen. */
  overflow-wrap:anywhere;
}
.namenszug .j{color:var(--farbe-signal)}
.namenszug .nachname{
  display:block;
  font-size:var(--schrift-name-klein);
  line-height:1.15;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--farbe-text-leise);
  margin-top:var(--raster-1);
}

.ort{
  font-family:var(--schrift-familie-mono);
  font-size:var(--schrift-mikro);
  color:var(--farbe-text-leise);
  margin-top:var(--raster-4);
}

.claim{
  font-size:var(--schrift-claim);
  line-height:1.35;
  font-weight:500;
  margin-top:var(--raster-3);
  max-width:22ch;
}

/* --- Rollenmarken --------------------------------------------------------- */
.marken{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:var(--raster-1);
  margin-top:var(--raster-5);
}
.marken li{display:flex}
.marke{
  font-family:var(--schrift-familie-mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--farbe-text-leise);
  border:1px solid var(--flaeche-linie-stark);
  border-radius:999px;
  padding:6px var(--raster-3);
  text-decoration:none;
  transition:border-color var(--bewegung-schnell) var(--bewegung-kurve),
             color var(--bewegung-schnell) var(--bewegung-kurve);
}
/* Als Link sind die Marken Navigation — sie duerfen sich anfuehlen wie eine. */
a.marke:hover{border-color:var(--farbe-text-leise);color:var(--farbe-text)}
/* Hoechstens EINE Marke ist gefuellt — sonst betont sich nichts mehr.
   Gefuellt statt nur farbig umrandet, weil farbiger Text bei 10px die
   4.5:1 verfehlen wuerde; Weiss auf der Signalflaeche schafft 5.0:1. */
.marke.betont{
  background:var(--farbe-signal-flaeche);
  border-color:var(--farbe-signal-flaeche);
  color:var(--farbe-auf-signal);
}
a.marke.betont:hover{filter:brightness(1.08);color:var(--farbe-auf-signal)}

/* --- Fussbereich: Handlung dort, wo der Daumen liegt ---------------------- */
.fuss{padding-top:var(--raster-6)}

/* Der Knopf soll dort liegen, wo der Daumen ist — das ist ein Argument fuer
   das Handy, nicht fuer den Schreibtisch. Auf grossen Fenstern erzeugte die
   feste Mindesthoehe nur ein Loch zwischen Marken und Knopf. */
@media (max-width: 540px){
  .karte-signal{min-height:min(80svh, 660px)}
  .karte-signal .fuss{margin-top:auto}
}

.zeile{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--raster-1) var(--raster-3);
  margin-top:var(--raster-3);
  font-family:var(--schrift-familie-mono);
  font-size:var(--schrift-mikro);
}
.zeile a{color:var(--farbe-text-leise);text-decoration:none}
.zeile a:hover{color:var(--farbe-text)}
.zeile a + a::before{
  content:"·";
  margin-right:var(--raster-3);
  color:var(--flaeche-linie-stark);
}

.karte-signal footer{justify-content:center;gap:var(--raster-2);text-align:center}

/* --- Aktionen ------------------------------------------------------------- */
.cta{
  display:block;width:100%;
  text-align:center;text-decoration:none;
  background:var(--farbe-signal-flaeche);color:var(--farbe-auf-signal);
  font-weight:800;font-size:1.05rem;
  padding:var(--raster-4) var(--raster-5);
  border-radius:var(--rundung-mittel);
  margin-bottom:var(--raster-3);
  box-shadow:var(--flaeche-schatten-knopf);
  transition:transform var(--bewegung-schnell) var(--bewegung-kurve),
             filter var(--bewegung-schnell) var(--bewegung-kurve);
}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:translateY(1px) scale(.99)}
.cta.big{font-size:1.15rem;padding:19px var(--raster-5)}

.links{display:flex;flex-wrap:wrap;gap:var(--raster-2);margin-bottom:var(--raster-6)}
/* Auf der Startseite stehen nur drei Ziele, deshalb volle Breite und mehr
   Luft. Alles Weitere liegt auf /links — weniger Entscheidungen pro Blick. */
.links.wenige{flex-direction:column;gap:var(--raster-2)}
.links.wenige .link{
  flex:none;width:100%;
  text-align:left;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--raster-3);
  padding:var(--raster-4);
  font-size:var(--schrift-basis);
}
.links.wenige .link::after{
  content:"›";
  font-family:var(--schrift-familie-mono);
  color:var(--farbe-text-leise);
  font-size:1.1rem;line-height:1;
}
.link{
  flex:1 1 45%;
  text-align:center;text-decoration:none;
  color:var(--farbe-text);
  border:1px solid var(--flaeche-linie);
  border-radius:var(--rundung-klein);
  padding:var(--raster-3) var(--raster-2);
  font-size:var(--schrift-klein);font-weight:600;
  background:var(--flaeche-schleier);
  transition:border-color var(--bewegung-schnell) var(--bewegung-kurve),
             background var(--bewegung-schnell) var(--bewegung-kurve),
             transform var(--bewegung-schnell) var(--bewegung-kurve);
}
.link:hover{
  border-color:var(--farbe-text-leise);
  background:var(--flaeche-schleier-stark);
  transform:translateY(-1px);
}
.link:active{transform:translateY(0)}

.banner{
  display:block;flex:none;width:100%;
  margin-top:var(--raster-5);margin-bottom:0;
  border-color:var(--farbe-signal);
  background:var(--flaeche-banner);
  color:var(--farbe-text);
}

.btn{
  display:block;text-decoration:none;color:var(--farbe-text);
  border:1px solid var(--flaeche-linie);
  border-radius:var(--rundung-mittel);
  padding:var(--raster-4);
  font-size:var(--schrift-basis);font-weight:700;
  margin-bottom:var(--raster-2);
  background:var(--flaeche-karte);
  transition:border-color var(--bewegung-schnell) var(--bewegung-kurve),
             transform var(--bewegung-schnell) var(--bewegung-kurve),
             background var(--bewegung-schnell) var(--bewegung-kurve);
}
.btn:hover{border-color:var(--farbe-text-leise);background:var(--flaeche-schleier-stark)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--farbe-signal-flaeche);
  border-color:var(--farbe-signal-flaeche);
  color:var(--farbe-auf-signal);
  box-shadow:var(--flaeche-schatten-knopf);
}
.btn small{
  display:block;font-weight:400;font-size:.74rem;
  color:var(--farbe-text-leise);margin-top:2px;
}
/* Volles Weiss statt 85 %: Die Unterzeile ist mit 11.8px kleine Schrift und
   braucht 4.5:1. Die Abstufung entsteht ueber Groesse und Schnitt, nicht
   ueber Kontrast. */
.btn.primary small{color:var(--farbe-auf-signal)}

/* Fokusring fuer ALLE interaktiven Elemente (Modul 36, WCAG 1.4.11) */
a:focus-visible{
  outline:2px solid var(--farbe-text);
  outline-offset:3px;
  border-radius:var(--rundung-klein);
}

/* --- Auszeichnungen: Zertifikate, Faehigkeiten ---------------------------- */
.auszeichnungen{
  list-style:none;
  margin-bottom:var(--raster-2);
}
.auszeichnungen li{
  display:flex;gap:var(--raster-3);align-items:baseline;
  padding:var(--raster-2) 0;
  border-bottom:1px solid var(--flaeche-linie);
  font-size:var(--schrift-basis);
}
.auszeichnungen li:last-child{border-bottom:none}
.auszeichnungen li::before{
  content:"";
  flex:none;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--farbe-signal);
  transform:translateY(-2px);
}

/* --- Fliesstext ----------------------------------------------------------- */
.lead{font-size:var(--schrift-lead);line-height:1.55;margin-bottom:var(--raster-2)}
.card h2{
  font-family:var(--schrift-familie-mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--farbe-text-leise);
  margin:var(--raster-5) 0 var(--raster-2);
}
.card p{font-size:var(--schrift-basis);line-height:1.6}
.card .cta{margin-top:var(--raster-5)}
.card a{color:var(--farbe-text)}
.back{
  display:inline-block;
  font-family:var(--schrift-familie-mono);
  font-size:.75rem;color:var(--farbe-text-leise);text-decoration:none;
}
.back:hover{color:var(--farbe-text)}

/* --- Fusszeile ------------------------------------------------------------ */
footer{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--raster-3);flex-wrap:wrap;
  margin-top:var(--raster-5);
  padding-top:var(--raster-4);
  border-top:1px solid var(--flaeche-linie);
  font-family:var(--schrift-familie-mono);
  font-size:.68rem;color:var(--farbe-text-leise);
}
.wrap footer{display:block;margin-top:var(--raster-6)}
footer a{color:var(--farbe-text-leise)}
/* Der Sprachumschalter ist Navigation, kein Fliesstext. */
footer a[hreflang]{color:var(--farbe-text);font-weight:700}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .link:hover,.cta:active,.btn:active{transform:none}
  body{background-attachment:scroll}
}