/* Theme GOAT CODE: "Dunkle Werkbank", das Erscheinungsbild der Website seit
   dem Rebranding vom 12.10.2026 (www.goat-code.de, Projekt "Website Neu",
   assets/css/site.css). Der Kundenbereich soll sich anfuehlen wie ein Teil
   der Website: gleiche Farben, gleiche Schriften, gleiche Knoepfe und Felder.

   Regeln: dunkler Grund, Gruen nur fuer das Wichtigste (Hauptknopf, aktive
   Stelle, Fokus), keine Rundungen, keine Schatten, keine Verlaeufe. Text in
   Instrument Sans, kleine Etiketten in JetBrains Mono, Grossbuchstaben.

   Schriften: nur lokal, nichts von Google oder anderen Dritten. Die
   Schriftdateien der Website (assets/fonts/*.woff2) gehoeren nach fonts/ in
   diesem Ordner und werden dann unten mit url() eingetragen; bis dahin
   greifen installierte Schriften oder die Ersatzschriften. */

@font-face {
    font-family: "Instrument Sans";
    src: local("Instrument Sans");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: local("JetBrains Mono");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    /* Farben der Website */
    --grund: #0A0D0B;
    --flaeche: #141A16;
    --linie: #263029;
    --linie-stark: #3B4A40;
    --text-hell: #E8EFE9;
    --leise: #9BA89E;
    --gruen: #35FF6E;
    --auf-gruen: #0A0D0B;
    --stein-leer: #2C3A31;
    --ziffer: #5F7566;
    --hinweis: #FFB454;

    /* Variablen des Geruests (app.css) auf die Palette gelegt */
    --primary: var(--gruen);
    --primary-dark: var(--text-hell);
    --primary-soft: var(--stein-leer);
    --primary-tint: rgba(53, 255, 110, 0.06);
    --primary-ring: rgba(53, 255, 110, 0.25);
    --ink: var(--text-hell);
    --text: var(--text-hell);
    --muted: var(--leise);
    --border: var(--linie);
    --border-strong: var(--linie-stark);
    --bg: var(--grund);
    --card: var(--flaeche);
    --accent: var(--hinweis);
    --accent-soft: rgba(255, 180, 84, 0.08);
    --danger: #FF7A6B;
    --danger-soft: rgba(255, 122, 107, 0.1);
    --warning-soft: rgba(255, 180, 84, 0.08);
    --info-soft: rgba(53, 255, 110, 0.05);
    --topbar-bg: var(--grund);
    --topbar-text: var(--text-hell);
    --topbar-accent: var(--gruen);
    --radius: 0;
    --radius-sm: 0;
    --shadow: none;
    --shadow-sm: none;
    --font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
    --font-ui: var(--font-text);
    color-scheme: dark;
}

/* --- Grund ---------------------------------------------------------------- */

body {
    font-size: 15px;
    line-height: 1.55;
    scrollbar-color: var(--linie-stark) var(--grund);
    caret-color: var(--gruen);
}

::selection {
    background: var(--gruen);
    color: var(--auf-gruen);
}

a {
    color: var(--text-hell);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.22em;
}

a:hover {
    color: var(--gruen);
}

:focus-visible {
    outline: 2px solid var(--text-hell);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-hell);
}

/* Navigation, Tabellen, Knoepfe und Karten tragen keine Unterstreichung */
.topbar a, .subnav a, .tabs a, .table a, .btn, .stat-card, .board-card a, .fuss-links a, .vera-hinweis a {
    text-decoration: none;
}

/* --- Kopfzeile wie auf der Website ---------------------------------------- */

.topbar {
    border-top: 0;
    border-bottom: 1px solid var(--linie);
    min-height: 76px;
}

/* Die Ziege steht im Herkunftshinweis direkt neben dem Namen, nie zweimal */
.brand-logo {
    display: none;
}

.brand-name {
    color: var(--text-hell);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.powered {
    color: var(--gruen);
    font-family: var(--font-mono);
}

body.oeffentlich .powered span {
    display: none;                 /* auf den Kundenseiten steht schon GOAT code, nur die Ziege bleibt */
}

.brand-title {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--leise);
    opacity: 1;
    border-left-color: var(--linie-stark);
}

.main-nav a {
    color: var(--leise);
    font-weight: 400;
    border-radius: 0;
}

.main-nav a:hover,
.main-nav a.aktiv {
    background: none;
    color: var(--text-hell);
}

.main-nav a.aktiv {
    box-shadow: inset 0 -2px 0 var(--gruen);
}

.nav-suche .input {
    border-radius: 0;
    background: var(--grund);
    border: 1.5px solid var(--linie-stark);
}

.user-area {
    color: var(--leise);
    opacity: 1;
}

.user-area a {
    color: var(--leise);
}

.user-area a:hover {
    color: var(--text-hell);
}

.user-area .link-button,
.user-area .rueckweg {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gruen);
}

.user-area .link-button:hover,
.user-area .rueckweg:hover {
    color: var(--text-hell);
}

.subnav {
    background: var(--grund);
    border-bottom-color: var(--linie);
}

.subnav a {
    font-weight: 400;
    color: var(--leise);
}

.subnav a:hover {
    color: var(--text-hell);
}

.subnav a.aktiv {
    color: var(--text-hell);
    border-bottom-color: var(--gruen);
}

/* --- Flaechen ------------------------------------------------------------- */

.card,
.stat-card,
.board-col {
    border-color: var(--linie);
}

a.stat-card:hover {
    border-color: var(--gruen);
}

.stat-card strong {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-hell);
    font-variant-numeric: tabular-nums;
}

.stat-card span,
.table thead th {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--leise);
}

.table thead th {
    border-bottom: 1px solid var(--linie-stark);
}

.table tbody tr:hover td {
    background: rgba(53, 255, 110, 0.03);
}

.fortschritt {
    background: var(--stein-leer);
    border-radius: 0;
}

.fortschritt > span {
    background: var(--gruen);
    border-radius: 0;
}

/* --- Knoepfe wie auf der Website ------------------------------------------ */

.btn {
    border: 0;
    background: none;
    color: var(--text-hell);
    box-shadow: inset 0 0 0 1.5px var(--linie-stark);
    font-weight: 600;
    min-height: 44px;
    padding: 0 18px;
}

.btn:hover {
    background: none;
    color: var(--gruen);
    box-shadow: inset 0 0 0 1.5px var(--gruen);
}

.btn-primary {
    background: var(--gruen);
    color: var(--auf-gruen);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--text-hell);
    color: var(--auf-gruen);
    box-shadow: none;
}

.btn:active {
    background: var(--leise);
    color: var(--auf-gruen);
}

.btn-danger {
    color: var(--danger);
}

.btn-danger:hover {
    background: none;
    color: var(--danger);
    box-shadow: inset 0 0 0 1.5px var(--danger);
}

.link-button {
    color: var(--gruen);
}

/* --- Felder wie auf der Website ------------------------------------------- */

.input {
    background: var(--grund);
    color: var(--text-hell);
    border: 1.5px solid var(--ziffer);
    border-radius: 0;
    min-height: 46px;
    padding: 10px 14px;
}

.input::placeholder {
    color: var(--leise);
    opacity: 1;
}

.input:hover {
    border-color: var(--leise);
}

.input:focus {
    outline: 2px solid var(--gruen);
    outline-offset: 2px;
    border-color: var(--gruen);
    box-shadow: none;
}

select.input option {
    background: var(--flaeche);
    color: var(--text-hell);
}

.feld-fehler {
    color: var(--hinweis);
}

/* --- Meldungen ------------------------------------------------------------ */

.flash {
    background: var(--flaeche);
    border-color: var(--linie);
    border-left-width: 3px;
    color: var(--text-hell);
}

.flash-success { border-left-color: var(--gruen); background: var(--flaeche); }
.flash-info    { border-left-color: var(--leise); background: var(--flaeche); }
.flash-warning { border-left-color: var(--hinweis); background: var(--flaeche); }
.flash-danger  { border-left-color: var(--danger); background: var(--flaeche); }

/* Etiketten wie die Preisangaben der Website: Mono, Grossbuchstaben, eckig */
.badge,
.pill,
.tab-zahl {
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge {
    background: none;
    color: var(--leise);
    box-shadow: inset 0 0 0 1px var(--linie-stark);
}

.badge-green {
    background: none;
    color: var(--gruen);
    box-shadow: inset 0 0 0 1px var(--gruen);
}

.badge-red {
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: none;
}

/* Phasen-Schrittleiste wie die Etiketten */
.phasen li {
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.phasen li.phase-erledigt {
    background: none;
    border-color: var(--gruen);
    color: var(--gruen);
}

.phasen li.phase-aktuell {
    color: var(--auf-gruen);
}

/* --- Fusszeile wie auf der Website ---------------------------------------- */

.pagefooter {
    background: var(--grund);
    border-top: 1px solid var(--linie);
    color: var(--leise);
    font-size: 14px;
    padding: 24px;
}

.fuss-links {
    gap: 8px 26px;
}

.fuss-links a {
    color: var(--leise);
}

.fuss-links a:hover,
.fuss-links a:focus-visible {
    color: var(--text-hell);
}

.pagefooter .claim {
    color: var(--leise);
    font-weight: 400;
}