/* SummitGO Gestaltung — ERZEUGTE DATEI, nicht von Hand ändern.
   Quelle: bausteine/gestaltung/gestaltung.tokens.json · Bau: tokens_bauen.py */
@font-face{font-family:"Manrope";src:url("schrift/Manrope.var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  /* Schrift: eine Familie, feste Stufen (Zeilen auf dem 8er-Raster) */
  --schrift-familie:"Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gewicht-normal:400;
  --gewicht-halbfett:600;
  --gewicht-fett:700;
  --gewicht-extrafett:800;
  --schrift-klein:400 12px/16px var(--schrift-familie);
  --groesse-klein:12px; --zeile-klein:16px; --laufweite-klein:0;
  --schrift-grund:400 14px/20px var(--schrift-familie);
  --groesse-grund:14px; --zeile-grund:20px; --laufweite-grund:0;
  --schrift-betont:400 16px/24px var(--schrift-familie);
  --groesse-betont:16px; --zeile-betont:24px; --laufweite-betont:0;
  --schrift-titel3:600 16px/24px var(--schrift-familie);
  --groesse-titel3:16px; --zeile-titel3:24px; --laufweite-titel3:0;
  --schrift-titel2:700 20px/28px var(--schrift-familie);
  --groesse-titel2:20px; --zeile-titel2:28px; --laufweite-titel2:-0.01em;
  --schrift-titel1:800 24px/32px var(--schrift-familie);
  --groesse-titel1:24px; --zeile-titel1:32px; --laufweite-titel1:-0.015em;
  --schrift-riese:800 40px/48px var(--schrift-familie);
  --groesse-riese:40px; --zeile-riese:48px; --laufweite-riese:-0.02em;
  /* 8-Pixel-Raster */
  --halb:4px;
  --r1:8px;
  --r2:16px;
  --r3:24px;
  --r4:32px;
  --r5:40px;
  --r6:48px;
  --r8:64px;
  --seitenrand:80px;
  --seitenrand-tablet:24px;
  --seitenrand-telefon:16px;
  --rinne:16px;
  --spalten:12;
  /* Farben: Primitive (konsolidierte Ist-Palette) */
  --navy-900:#172538;
  --navy-800:#17324F;
  --navy-600:#246B9E;
  --navy-300:#8A9BB0;
  --navy-200:#AEBED0;
  --navy-100:#DCE4EE;
  --gold-700:#B8860B;
  --gold-500:#C2A15C;
  --gold-100:#F8E5C6;
  --gruen-600:#15715F;
  --gruen-100:#D8EEE8;
  --rot-700:#A64038;
  --rot-600:#D14343;
  --rot-100:#F6DCDA;
  --orange-700:#A45C00;
  --grau-700:#51677C;
  --grau-600:#51677C;
  --grau-400:#8A9BB0;
  --grau-300:#C6C9CF;
  --grau-200:#E3E7EB;
  --grau-100:#DCE4EE;
  --sand-200:#F3EFE2;
  --sand-100:#F3EFE2;
  --papier:#FBFBF8;
  --weiss:#FFFFFF;
  --navy-500:#51677C;
  /* Farben: Semantik — DIESE Namen gehören in Vorlagen und stil.css */
  --flaeche:var(--weiss);  /* Seitengrund — gleich der Karte; Trennung durch Rand und Schatten (30.08.2026) */
  --flaeche-ruhig:var(--sand-100);  /* ruhige Abschnitte, Seitenleisten */
  --karte:var(--weiss);  /* Karten, Tabellen, Eingabefelder */
  --tinte:var(--navy-900);  /* Text */
  --tinte-gedaempft:var(--navy-500);  /* Nebentext, Beschriftungen — abgetöntes Navy statt Grau (30.08.2026) */
  --tinte-hell:var(--weiss);  /* Text auf dunklem Grund */
  --kopf:var(--navy-800);  /* Suite-Kopfzeile, Marke */
  --akzent:var(--gold-500);  /* Markenakzent, aktive Zustände */
  --akzent-tinte:var(--gold-700);  /* goldener Text auf hellem Grund */
  --wirkung:var(--navy-600);  /* Knöpfe, Verweise, Aktionen */
  --erfolg:var(--gruen-600);  /* gelungen, frei, bereit */
  --erfolg-flaeche:var(--gruen-100);  /* grüner Hintergrund */
  --warnung:var(--orange-700);  /* Achtung, wartet */
  --fehler:var(--rot-600);  /* Fehler, gesperrt */
  --fehler-flaeche:var(--rot-100);  /* roter Hintergrund */
  --linie:rgba(23,50,79,.16);  /* Ränder — navygetönt statt grau (2.0) */
  --linie-zart:rgba(23,50,79,.09);  /* innere Trennlinien, Kartenränder (2.0) */
  /* Form */
  --rund-klein:6px;
  --rund:10px;
  --rund-gross:16px;
  --rund-voll:999px;
  --schatten-karte:0 1px 2px rgba(23,37,56,.05), 0 4px 16px rgba(23,37,56,.06);
  --schatten-schwebend:0 2px 8px rgba(23,50,79,.08), 0 16px 40px rgba(23,50,79,.16);
  --uebergang:150ms ease;
  --fokus-schein:0 0 0 3px rgba(36,107,158,.20);
}


/* Seitenlayout-Helfer (Vorgabe 30.08.2026): 12 Spalten, 16px Rinne, 80px Rand.
   .sgo-seite  = Inhaltsrahmen mit Seitenrand
   .sgo-gitter = 12-Spalten-Gitter; Kinder spannen mit .sp-3/.sp-4/.sp-6/.sp-12 */
.sgo-seite{padding-inline:var(--seitenrand)}
.sgo-gitter{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--rinne)}
.sgo-gitter>.sp-3{grid-column:span 3}
.sgo-gitter>.sp-4{grid-column:span 4}
.sgo-gitter>.sp-6{grid-column:span 6}
.sgo-gitter>.sp-12{grid-column:span 12}
@media (max-width:1024px){
  .sgo-seite{padding-inline:var(--seitenrand-tablet)}
  .sgo-gitter>.sp-3,.sgo-gitter>.sp-4{grid-column:span 6}
}
@media (max-width:640px){
  .sgo-seite{padding-inline:var(--seitenrand-telefon)}
  .sgo-gitter>.sp-3,.sgo-gitter>.sp-4,.sgo-gitter>.sp-6{grid-column:span 12}
}

/* ── Bauteil-Schicht (Fassung 2.0, Freigabe 30.08.2026) ─────────────────────
   Die abgenommenen Bausteine des Styleguides — in jedem Programm gleich.
   Unantastbar bleiben Marke, Navy, Gold/Beige und der Rettungsring. */

/* Titel tragen ihre Laufweite */
.sgo-titel1{font:var(--schrift-titel1);letter-spacing:var(--laufweite-titel1)}
.sgo-titel2{font:var(--schrift-titel2);letter-spacing:var(--laufweite-titel2)}
.sgo-riese{font:var(--schrift-riese);letter-spacing:var(--laufweite-riese)}
.sgo-vorzeile{font:var(--schrift-klein);font-weight:var(--gewicht-fett);
  text-transform:uppercase;letter-spacing:.12em;color:var(--akzent-tinte)}

/* Knoepfe: Rasterhoehen 32/40/48, Anheben statt Aufhellen, ein Fokusring */
/* Beschluss 30.08.2026 (Abend): CTAs sind VOLLRUND (Pillenform) — die eine
   sichtbare Modernisierung, zuerst Suite, dann Modul fuer Modul. */
.sgo-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--r1);
  height:var(--r5);padding:0 var(--r3);font:var(--schrift-grund);
  font-weight:var(--gewicht-halbfett);border-radius:var(--rund-voll);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:transform var(--uebergang),box-shadow var(--uebergang),
    background var(--uebergang),border-color var(--uebergang)}
.sgo-knopf:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(23,37,56,.16)}
.sgo-knopf:active{transform:translateY(0);box-shadow:none}
.sgo-knopf:focus-visible{outline:2px solid var(--wirkung);outline-offset:2px}
.sgo-knopf svg{width:16px;height:16px}
.sgo-knopf.klein{height:var(--r4);padding:0 var(--r2);font-size:var(--groesse-klein)}
.sgo-knopf.gross{height:var(--r6);padding:0 var(--r4);font-size:var(--groesse-betont)}
.sgo-knopf.primaer{background:var(--wirkung);color:var(--tinte-hell)}
.sgo-knopf.primaer:hover{background:#1F5C87}
.sgo-knopf.sekundaer{background:var(--karte);color:var(--wirkung);border-color:var(--linie)}
.sgo-knopf.sekundaer:hover{border-color:var(--wirkung)}
.sgo-knopf.still{background:transparent;color:var(--wirkung)}
.sgo-knopf.still:hover{background:var(--grau-100);box-shadow:none;transform:none}
.sgo-knopf.gefahr{background:var(--fehler);color:var(--tinte-hell)}
.sgo-knopf.akzent{background:var(--akzent);color:var(--kopf)}
.sgo-knopf.wartet{position:relative;color:transparent!important;pointer-events:none}
.sgo-knopf.wartet::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:sgo-knopf-dreh .7s linear infinite}
@keyframes sgo-knopf-dreh{to{transform:rotate(360deg)}}

/* Pillen: Statuspunkt, feste Hoehe 24 */
.sgo-pille{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  font:var(--schrift-klein);font-weight:var(--gewicht-halbfett);border-radius:var(--rund-voll)}
.sgo-pille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.sgo-pille.bereit{background:var(--erfolg-flaeche);color:var(--erfolg)}
.sgo-pille.aufbau{background:var(--gold-100);color:var(--warnung)}
/* Beschluss 30.08. (Nacht): EINE gedaempfte Pille fuer alles Nicht-Fertige —
   inaktiv, arbeit, server sehen gleich aus; nur der Wortlaut unterscheidet. */
.sgo-pille.inaktiv, .sgo-pille.arbeit, .sgo-pille.server{
  background:rgba(81,103,124,.12);color:var(--tinte-gedaempft)}
.sgo-pille.fehler{background:var(--fehler-flaeche);color:var(--fehler)}

/* Eingaben: Hoehe 40, ruhiger Fokus-Schein, Hilfe- und Fehlertexte */
.sgo-feld{display:flex;flex-direction:column;gap:var(--halb)}
.sgo-feld>label{font:var(--schrift-klein);font-weight:var(--gewicht-halbfett)}
.sgo-feld>label em{color:var(--fehler);font-style:normal}
.sgo-feld>input,.sgo-feld>select{height:var(--r5);font:var(--schrift-betont);padding:0 var(--r2);
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--karte);color:var(--tinte);
  transition:border-color var(--uebergang),box-shadow var(--uebergang)}
.sgo-feld>textarea{font:var(--schrift-betont);padding:var(--r1) var(--r2);
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--karte);color:var(--tinte);
  transition:border-color var(--uebergang),box-shadow var(--uebergang)}
.sgo-feld>input:hover,.sgo-feld>select:hover,.sgo-feld>textarea:hover{border-color:var(--navy-300)}
.sgo-feld>input:focus,.sgo-feld>select:focus,.sgo-feld>textarea:focus{outline:none;
  border-color:var(--wirkung);box-shadow:var(--fokus-schein)}
.sgo-feld .hilfe{font:var(--schrift-klein);color:var(--tinte-gedaempft)}
.sgo-feld.fehlerhaft>input,.sgo-feld.fehlerhaft>select,.sgo-feld.fehlerhaft>textarea{
  border-color:var(--fehler);box-shadow:0 0 0 3px rgba(209,67,67,.14)}
.sgo-feld.fehlerhaft .hilfe{color:var(--fehler)}

/* Karten: Ruhe / Schwebe / Gewaehlt / Inaktiv — ueberall gleich */
.sgo-kachel{position:relative;background:var(--karte);border:1px solid var(--linie-zart);
  border-radius:var(--rund-gross);padding:var(--r2);text-decoration:none;color:inherit;
  box-shadow:var(--schatten-karte);
  transition:transform var(--uebergang),border-color var(--uebergang),box-shadow var(--uebergang)}
/* Beschluss 30.08. (Nacht): Karten-Schwebe ohne Schatten — nur der Goldrand. */
a.sgo-kachel:hover,button.sgo-kachel:hover{border-color:var(--akzent)}
.sgo-kachel:focus-visible{outline:2px solid var(--wirkung);outline-offset:2px}
.sgo-kachel.gewaehlt{border:2px solid var(--wirkung);padding:calc(var(--r2) - 1px)}
.sgo-kachel.gewaehlt::after{content:"¹3";position:absolute;top:var(--r1);right:var(--r1);
  width:20px;height:20px;border-radius:50%;background:var(--wirkung);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center}
.sgo-kachel.inaktiv{border-style:dashed;box-shadow:none;opacity:.6;pointer-events:none}

/* Tabellen: Zeilen-Schwebe, haftender Kopf, tabellarische Ziffern */
.sgo-tabelle{border-collapse:collapse;width:100%;font:var(--schrift-grund);background:var(--karte)}
.sgo-tabelle th{font:var(--schrift-klein);font-weight:var(--gewicht-halbfett);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinte-gedaempft);text-align:left;padding:var(--r1) var(--r2);
  border-bottom:2px solid var(--linie);position:sticky;top:0;background:var(--karte);z-index:1}
.sgo-tabelle td{padding:var(--r1) var(--r2);border-bottom:1px solid var(--linie-zart);
  font-variant-numeric:tabular-nums}
.sgo-tabelle tbody tr{transition:background var(--uebergang)}
.sgo-tabelle tbody tr:hover{background:var(--flaeche-ruhig)}

@media (prefers-reduced-motion:reduce){
  .sgo-knopf,.sgo-kachel,.sgo-tabelle tbody tr{transition:none}
  .sgo-knopf:hover,a.sgo-kachel:hover,button.sgo-kachel:hover{transform:none}
  .sgo-knopf.wartet::after{animation:none}
}