/* fe.group: Design der Startseite auf allen Unterseiten (Pouria, 11.10.2026: „nicht den Inhalt, sondern das Design“).
   Eingebunden über kopf_fuss.py hinter dem eigenen CSS jeder Unterseite. Die Unterseiten bauen ihre Farben aus
   Variablen, deshalb reicht es meist, die Variablen auf die dunkle Fläche der Startseite zu setzen. Sterne kommen aus
   /design/sterne.js. */
:root{
  --bg:#050608; --bg-soft:#0B0D12; --bg-tint:#10131B; --card:#0D1016; --feld:rgba(255,255,255,.05);
  --glass:rgba(255,255,255,.045); --glass-border:rgba(255,255,255,.10);
  --ink:#F5F6F8; --ink-dim:#B0B5C0; --ink-faint:#8A90A0; --dim:#B0B5C0;
  --line:rgba(255,255,255,.09); --navbg:rgba(5,6,8,.72);
  --blue:#6E8CFF; --acc:#6E8CFF; --c1:#6E8CFF; --c3:#6E8CFF; --c3h:#F7741F; --btn-ink:#ffffff; --stern:#F2B01E;
  --grad:linear-gradient(100deg,#3D6BFF 0%,#8A63E8 45%,#F7741F 100%);
  --shadow:0 8px 30px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}
html{background:#050608}
body{background:transparent!important;color:var(--ink)}
.sterne{position:fixed;inset:0;z-index:-1;pointer-events:none}
::selection{background:#F7741F;color:#fff}

/* Überschriften wie auf der Startseite */
main h1,.hero h1,article h1,section h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
main h2,article h2,section h2{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink)}
main h3,article h3,section h3{color:var(--ink)}
main p,article p,section p,main li,article li{color:var(--ink-dim)}
main strong,article strong,section strong,main b{color:var(--ink)}
main a:not(.btn):not([class]),article a:not(.btn):not([class]){color:#9DB0FF}
main a:not(.btn):not([class]):hover,article a:not(.btn):not([class]):hover{color:#fff}
hr{border-color:var(--line)}

/* Flächen, die hell gesetzt sind */
input,select,textarea{color:var(--ink);background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
input::placeholder,textarea::placeholder{color:#8A90A0}
option{background:#0B0D12;color:#F5F6F8}
table{color:var(--ink-dim)}
th{color:var(--ink)}
td,th{border-color:var(--line)!important}

/* Knöpfe mit heller Fläche */
.btn-ghost,.btn-secondary,.btn-outline{background:rgba(255,255,255,.06)!important;color:var(--ink)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:none}

/* Hauptknöpfe im Verlauf der Startseite */
.btn-primary,.btn-voll{background:var(--grad)!important}

/* Eyebrows wie auf der Startseite: Space Grotesk in Versalien, Verlaufslinie davor */
.eyebrow,.kicker{display:inline-flex!important;align-items:center;gap:14px;font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:500!important;font-size:15px!important;letter-spacing:3.4px!important;text-transform:uppercase!important;color:#B0B5C0!important;background:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
.eyebrow::before,.kicker::before{content:""!important;display:block!important;flex:0 0 auto;width:34px!important;height:2px!important;border-radius:2px!important;background:linear-gradient(100deg,#3D6BFF 0%,#8A63E8 45%,#F7741F 100%)!important;margin:0!important;position:static!important}
@media(max-width:699px){.eyebrow,.kicker{font-size:min(14px,3.6vw)!important;letter-spacing:min(3.4px,.6vw)!important;gap:10px;white-space:nowrap}.eyebrow::before,.kicker::before{width:24px!important}}

/* Feste Bewerbungsleiste am Handy */
.applybar{background:rgba(5,6,8,.82)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important}