/* skillfactor — Factorial-Look für Gitea.
   Tokens live von factorialhr.com extrahiert (Edge headless, 2026-07-06):
   Font "DM Sans" · Ink #25253D · Text #515164 · Brand #FF355E (hover #E51943)
   · Teal-Links #007C85 · Card-Grau #F4F4F5 · weiße Nav · Pill-Buttons (9999px)
   · Karten-Radius 16px. Basis ist das helle Gitea-Theme. */

@import url("theme-gitea-light.css");

/* DM Sans lokal (variable font, 100-1000) — OFFLINE_MODE-freundlich, kein CDN. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A,
    U+201C-201E, U+2026, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  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;
}

:root {
  --fonts-override: "DM Sans";

  /* Markenfarben */
  --color-primary: #ff355e;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #e51943;
  --color-primary-dark-2: #cc123a;
  --color-primary-dark-3: #b30d32;
  --color-primary-dark-4: #99092a;
  --color-primary-dark-5: #800622;
  --color-primary-dark-6: #66041a;
  --color-primary-dark-7: #4d0213;
  --color-primary-light-1: #ff4d70;
  --color-primary-light-2: #ff6682;
  --color-primary-light-3: #ff8094;
  --color-primary-light-4: #ff99a6;
  --color-primary-light-5: #ffb3bf;
  --color-primary-light-6: #ffe0e6;
  --color-primary-light-7: #fff0f3;
  --color-primary-alpha-10: rgba(255, 53, 94, 0.1);
  --color-primary-alpha-20: rgba(255, 53, 94, 0.2);
  --color-primary-alpha-30: rgba(255, 53, 94, 0.3);
  --color-primary-alpha-40: rgba(255, 53, 94, 0.4);
  --color-primary-alpha-50: rgba(255, 53, 94, 0.5);
  --color-primary-alpha-60: rgba(255, 53, 94, 0.6);
  --color-primary-alpha-70: rgba(255, 53, 94, 0.7);
  --color-primary-alpha-80: rgba(255, 53, 94, 0.8);
  --color-primary-alpha-90: rgba(255, 53, 94, 0.9);

  /* Typografie-Farben */
  --color-text: #25253d;
  --color-text-dark: #17172a;
  --color-text-light: #515164;
  --color-text-light-1: #515164;
  --color-text-light-2: #6b6b7d;
  --color-text-light-3: #8a8a99;

  /* Flächen */
  --color-body: #ffffff;
  --color-box-body: #ffffff;
  --color-box-header: #f9f9fa;
  --color-navbar: #ffffff;
  --color-navbar-transparent: rgba(255, 255, 255, 0);
  --color-menu: #ffffff;
  --color-card: #ffffff;
  --color-secondary-bg: #f4f4f5;
  --color-light: rgba(37, 37, 61, 0.04);
  --color-hover: rgba(37, 37, 61, 0.04);
  --color-active: rgba(37, 37, 61, 0.07);

  /* Ränder */
  --color-secondary: #ececee;
  --color-secondary-dark-1: #dededf;
  --color-light-border: #ececee;

  /* Links: Factorial-Teal */
  --color-link: #007c85;
  --color-link-hover: #00565c;
  --color-accent: #007c85;

  --border-radius: 8px;
  --border-radius-medium: 12px;
  --border-radius-full: 9999px;
}

/* Grundschrift überall durchsetzen (DM Sans wie factorialhr.com) */
body,
.ui.button,
.ui.input > input,
.ui.form input,
.ui.menu,
.ui.header {
  font-family: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* Navbar: Markenrot, sticky; wird beim Scrollen leicht transparent (Glas-Effekt).
   Transparenz via CSS scroll-driven animation (Chromium 115+); Fallback = volles Rot. */
#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ff355e;
  border-bottom: none;
  min-height: 68px;
}
@supports (animation-timeline: scroll()) {
  #navbar {
    animation: sf-nav-glass linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
}
@keyframes sf-nav-glass {
  to {
    background: rgba(255, 53, 94, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(37, 37, 61, 0.18);
  }
}
#navbar .item,
#navbar .item * {
  color: #ffffff !important;
}
#navbar .item:hover {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
}
/* Wortmarke: neue, versionierte URL als Cache-Buster (alte logo.svg klebte
   durch einen zu breiten Caddy-Cache-Header in Browsern fest) + praesenter. */
#navbar-logo img,
#navbar .navbar-left img {
  content: url("../img/skillfactor_logo_white.png?v=2");
  height: 30px !important;
  width: auto !important;
}
/* Dropdowns unter der roten Navbar bleiben hell und lesbar */
#navbar .ui.dropdown .menu .item,
#navbar .ui.dropdown .menu .item * {
  color: #25253d !important;
}

/* Buttons: Pills. Primär = Markenrot, Rest = weiß mit feinem Rand */
.ui.button {
  border-radius: 9999px;
  font-weight: 500;
}
.ui.primary.button,
.ui.green.button {
  background: #ff355e;
  color: #ffffff;
}
.ui.primary.button:hover,
.ui.green.button:hover {
  background: #e51943;
}
.ui.basic.button {
  box-shadow: inset 0 0 0 1px #dededf;
  color: #25253d !important;
}

/* Karten & Boxen: 16px-Radius, sanfte Grenzen, kein hartes Grau */
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.card,
.ui.message,
.file-view,
.markup {
  border-radius: 12px;
}
.repository-summary,
.ui.attached.header {
  border-radius: 12px 12px 0 0;
}

/* Labels/Badges runder */
.ui.label {
  border-radius: 9999px;
}

/* Fokusring in Markenfarbe statt Standardblau */
input:focus,
textarea:focus {
  border-color: #ff355e !important;
}

/* Landing-Hotfix ohne Neustart: Chips auf die Kartenraender statt ueber den Text.
   (Gleiche Werte stehen im home.tmpl; CSS-Datei laedt ohne Template-Reload.) */
.sf-page .sf-chip-2 {
  bottom: -22px !important;
  left: -28px !important;
}
.sf-page .sf-chip-3 {
  top: 46% !important;
  bottom: auto !important;
  right: -30px !important;
}
.sf-page .sf-code-card {
  padding-bottom: 48px !important;
}
