/* ════════════════════════════════════════════════════════════════════════════
 * Werkblick Locus — Forgejo Custom Theme · Industrial Noir
 * Verbindlich: design_handoff_werkblick_branding/tokens.css
 *
 * Wird via custom/templates/custom/header.tmpl in alle Forgejo-Pages injiziert.
 * Forgejo 9.x nutzt Fomantic-UI + eigene --color-*-Variablen. Wir überschreiben
 * beide Ebenen: die CSS-Custom-Properties UND die rohen Fomantic-Klassen.
 *
 * Prinzip: Border statt Schatten · scharfe Kanten (4px Cards / 6px Buttons-Inputs)
 *          · ein Akzent (#FF6600) · Inter · KEIN Glassmorphism · keine Bounces.
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root,
:root.theme-forgejo-dark,
:root.theme-gitea-dark,
:root.theme-arc-green,
:root.theme-forgejo-auto {
  /* ── Industrial-Noir-Tokens ──────────────────────────────────────────── */
  --wb-charcoal-900: #131415;
  --wb-charcoal-850: #17181A;
  --wb-charcoal-800: #1E1F20;
  --wb-charcoal-700: #2A2B2C;
  --wb-border:        #3D3E40;
  --wb-border-strong: #55575A;
  --wb-hairline: rgba(255, 255, 255, 0.06);

  --wb-accent:       #FF6600;
  --wb-accent-hover: #CC5100;
  --wb-accent-deep:  #993D00;
  --wb-accent-on:    #131415;
  --wb-accent-soft:  rgba(255, 102, 0, 0.10);

  --wb-fg:        #F7F7F8;
  --wb-fg-muted:  #B5B7BA;
  --wb-fg-subtle: #8B8D90;

  --wb-success: #34D399;
  --wb-warning: #FBBF24;
  --wb-danger:  #F87171;
  --wb-info:    #60A5FA;
  --wb-blue-400: #63A4E0;
  --wb-blue-700: #2B6CB0;

  --wb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wb-radius-card: 4px;
  --wb-radius-btn:  6px;
  --wb-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Forgejo-Variablen überschreiben (Stand Forgejo 9.x) ─────────────── */
  --color-primary: var(--wb-accent) !important;
  --color-primary-contrast: var(--wb-accent-on) !important;
  --color-primary-dark-1: var(--wb-accent-hover) !important;
  --color-primary-dark-2: var(--wb-accent-deep) !important;
  --color-primary-light-1: #FF8432 !important;
  --color-primary-light-2: #FF8432 !important;
  --color-primary-light-3: rgba(255, 102, 0, 0.18) !important;
  --color-primary-light-4: rgba(255, 102, 0, 0.10) !important;
  --color-primary-light-5: rgba(255, 102, 0, 0.06) !important;
  --color-primary-light-6: rgba(255, 102, 0, 0.04) !important;
  --color-primary-light-7: rgba(255, 102, 0, 0.02) !important;
  --color-primary-alpha-10: rgba(255, 102, 0, 0.10) !important;
  --color-primary-alpha-20: rgba(255, 102, 0, 0.20) !important;
  --color-primary-alpha-30: rgba(255, 102, 0, 0.30) !important;
  --color-primary-alpha-40: rgba(255, 102, 0, 0.40) !important;
  --color-primary-alpha-50: rgba(255, 102, 0, 0.50) !important;
  --color-primary-alpha-60: rgba(255, 102, 0, 0.60) !important;
  --color-primary-alpha-70: rgba(255, 102, 0, 0.70) !important;
  --color-primary-alpha-80: rgba(255, 102, 0, 0.80) !important;
  --color-primary-alpha-90: rgba(255, 102, 0, 0.90) !important;
  --color-primary-hover: var(--wb-accent-hover) !important;
  --color-primary-active: var(--wb-accent-deep) !important;

  --color-body: var(--wb-charcoal-900) !important;
  --color-box-body: var(--wb-charcoal-850) !important;
  --color-box-header: var(--wb-charcoal-800) !important;
  --color-text: var(--wb-fg) !important;
  --color-text-light: var(--wb-fg) !important;
  --color-text-light-1: var(--wb-fg-muted) !important;
  --color-text-light-2: var(--wb-fg-muted) !important;
  --color-text-light-3: var(--wb-fg-subtle) !important;

  --color-secondary: var(--wb-charcoal-700) !important;
  --color-secondary-dark-1: var(--wb-charcoal-800) !important;
  --color-secondary-dark-2: var(--wb-charcoal-900) !important;
  --color-secondary-light-1: var(--wb-border) !important;
  --color-secondary-light-2: var(--wb-border-strong) !important;

  --color-input-background: var(--wb-charcoal-800) !important;
  --color-input-border: var(--wb-border) !important;
  --color-input-border-hover: var(--wb-border-strong) !important;
  --color-input-text: var(--wb-fg) !important;

  --color-active-line: var(--wb-accent-soft) !important;
  --color-link: var(--wb-accent) !important;
  --color-link-hover: #FF8432 !important;
  --color-accent: var(--wb-accent) !important;

  --color-nav-bg: var(--wb-charcoal-850) !important;
  --color-nav-hover-bg: var(--wb-accent-soft) !important;
  --color-header-bar: var(--wb-charcoal-850) !important;
  --color-footer: var(--wb-charcoal-850) !important;

  --color-button: var(--wb-charcoal-800) !important;
  --color-light-mimic-enabled: var(--wb-charcoal-700) !important;
}

/* ── Page-Body: flaches Charcoal-900 (kein Glow/Glass) ──────────────────── */
html,
body {
  background: var(--wb-charcoal-900) !important;
  color: var(--wb-fg) !important;
  font-family: var(--wb-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body.user.signin,
body.user.signup,
body.user.forgot_password {
  background-image: none !important;
  background-attachment: initial !important;
}

/* ── Top-Navigation: flach Charcoal-850, Border-bottom ──────────────────── */
#navbar,
.full.header,
.ui.fluid.menu.navbar,
.ui.secondary.menu.navbar {
  background: var(--wb-charcoal-850) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--wb-border) !important;
  box-shadow: none !important;
}

/* Top-Nav-Logo (kein Orange-Glow) */
#navbar #navbar-logo img,
.navbar-left #navbar-logo img,
img.ui.mini.image#navbar-logo {
  width: auto !important;
  height: 30px !important;
  max-height: 30px !important;
  filter: none !important;
}

/* ── Repository-Header + Secondary-Nav: flach, scharfe Kante ─────────────── */
.secondary-nav,
.ui.secondary.pointing.tabular.menu,
.ui.secondary.pointing.tabular.top.attached.borderless.menu,
.repository .header-wrapper,
.repository .repo-header,
.repository .repo-title,
.flex-container,
.flex-container-main,
.repository .ui.tabs.container,
.page-content.repository > .ui.container > .header-wrapper,
.user-profile-content .header,
.organization-content .header {
  background: var(--wb-charcoal-850) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
  color: var(--wb-fg) !important;
}

/* Secondary-Nav (Tabs-Bereich): dark mit Border-bottom */
.secondary-nav,
.ui.secondary.pointing.tabular.top.attached.borderless.menu.secondary-nav {
  background: var(--wb-charcoal-850) !important;
  border-bottom: 1px solid var(--wb-border) !important;
  border-radius: 0 !important;
}

.secondary-nav .item,
.ui.secondary.pointing.tabular.menu .item {
  color: var(--wb-fg-muted) !important;
  font-family: var(--wb-font-sans) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.secondary-nav .item:hover,
.ui.secondary.pointing.tabular.menu .item:hover {
  color: var(--wb-fg) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Active-Tab: 2px-Orange-Unterstrich */
.secondary-nav .active.item,
.ui.secondary.pointing.tabular.menu .active.item {
  color: var(--wb-fg) !important;
  border-color: var(--wb-accent) !important;
  background: transparent !important;
  border-bottom-width: 2px !important;
}

/* Repo-Title + Owner/Repo-Name */
.repository .repo-header .repo-title,
.repository .header-wrapper .ui.header,
.repository h1.ui.header {
  color: var(--wb-fg) !important;
  background: transparent !important;
}

/* PRIVAT / INTERN Badge (Pill) */
.repository .ui.basic.label,
.repository .ui.tag.label {
  background: var(--wb-accent-soft) !important;
  color: var(--wb-accent) !important;
  border: 1px solid rgba(255, 102, 0, 0.28) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Counter-Badges (Watch, Star, Fork) */
.repository .ui.labeled.button > .label,
.repository .ui.label.basic {
  background: var(--wb-charcoal-700) !important;
  color: var(--wb-fg-muted) !important;
  border: 1px solid var(--wb-border) !important;
}

#navbar .item,
.ui.fluid.menu.navbar .item {
  color: var(--wb-fg-muted) !important;
  font-family: var(--wb-font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#navbar .item:hover,
.ui.fluid.menu.navbar .item:hover {
  color: var(--wb-fg) !important;
  background: transparent !important;
}

#navbar .active.item,
#navbar .item.active {
  color: var(--wb-fg) !important;
  background: var(--wb-accent-soft) !important;
  border-radius: var(--wb-radius-btn) !important;
}

/* Nav-Wordmark (Inter 700, sentence-case) */
#navbar .item.brand,
.navbar .item.brand,
.logo {
  font-family: var(--wb-font-sans) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  color: var(--wb-fg) !important;
}

#navbar img.ui.mini.image,
#navbar img.ui.tiny.image,
#navbar .navbar-brand img,
img.ui.mini.image {
  filter: none !important;
}

/* ── Headlines: Inter 700, -0.02em (nicht uppercase) ─────────────────────── */
h1.ui.header,
h2.ui.header,
h3.ui.header,
h4.ui.header,
h5.ui.header,
.ui.header > .content {
  font-family: var(--wb-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--wb-fg) !important;
}

.user.signin h1,
.user.signup h1,
.repository h1.ui.header,
.user.profile h1.ui.header {
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

/* ── Cards / Segments: flach, scharfe 4px-Kante, Border statt Schatten ───── */
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.card,
.ui.cards > .card,
.flash-message,
.repo-header,
.repository .navbar,
#repo-files-table,
.dashboard .item {
  background: var(--wb-charcoal-850) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
  color: var(--wb-fg) !important;
  box-shadow: none !important;
}

.ui.attached.segment.header {
  border-radius: var(--wb-radius-card) var(--wb-radius-card) 0 0 !important;
  border-bottom: 1px solid var(--wb-border) !important;
}

.ui.attached.segment:not(:last-child) {
  border-radius: var(--wb-radius-card) var(--wb-radius-card) 0 0 !important;
}

.ui.attached.segment + .ui.attached.segment {
  border-top: 0 !important;
  border-radius: 0 0 var(--wb-radius-card) var(--wb-radius-card) !important;
}

/* Login-Form-Card: bordered Charcoal-850, kein Glass/Shadow */
.user.signin .ui.container.medium,
.user.signin form.ui.form,
.user.signup form.ui.form,
.user.forgot_password form.ui.form {
  background: var(--wb-charcoal-850) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
  padding: clamp(28px, 4vw, 44px) !important;
  box-shadow: none !important;
  max-width: 440px !important;
  margin: 60px auto !important;
}

/* ── Inputs: Charcoal-800, Orange-Fokus-Ring, 6px ───────────────────────── */
.ui.input > input,
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="url"],
.ui.form input[type="search"],
.ui.form textarea,
.ui.form select,
.ui.dropdown,
.ui.selection.dropdown {
  background-color: var(--wb-charcoal-800) !important;
  border: 1px solid var(--wb-border) !important;
  color: var(--wb-fg) !important;
  border-radius: var(--wb-radius-btn) !important;
  font-family: var(--wb-font-sans) !important;
  font-size: 14px !important;
  transition: border-color 180ms var(--wb-ease-out),
              box-shadow 180ms var(--wb-ease-out) !important;
}

.ui.input > input:hover,
.ui.form input:hover,
.ui.form textarea:hover {
  border-color: var(--wb-border-strong) !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.dropdown:focus,
.ui.dropdown.active {
  border-color: var(--wb-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15) !important;
  outline: none !important;
  background-color: var(--wb-charcoal-800) !important;
}

.ui.input > input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder {
  color: var(--wb-fg-subtle) !important;
}

.ui.form .field > label,
.ui.form label {
  color: var(--wb-fg-muted) !important;
  font-family: var(--wb-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Buttons: Orange Primary (kein Glow/Scale) ──────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button,
button.primary,
.ui.button.primary {
  background: var(--wb-accent) !important;
  color: var(--wb-accent-on) !important;
  font-family: var(--wb-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--wb-radius-btn) !important;
  border: 1px solid var(--wb-accent) !important;
  padding: 11px 20px !important;
  box-shadow: none !important;
  transition: background-color 180ms var(--wb-ease-out),
              color 180ms var(--wb-ease-out) !important;
}

.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.button.primary:hover {
  background: var(--wb-accent-hover) !important;
  border-color: var(--wb-accent-hover) !important;
  color: var(--wb-fg) !important;
  transform: none !important;
  box-shadow: none !important;
}

.ui.primary.button:active {
  transform: translateY(1px) !important;
  background: var(--wb-accent-deep) !important;
  border-color: var(--wb-accent-deep) !important;
}

/* Default-Buttons */
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.yellow):not(.blue):not(.labeled):not(.icon) {
  background: var(--wb-charcoal-800) !important;
  border: 1px solid var(--wb-border) !important;
  color: var(--wb-fg) !important;
  border-radius: var(--wb-radius-btn) !important;
  font-family: var(--wb-font-sans) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
}

.ui.button:not(.primary):hover {
  background: var(--wb-charcoal-700) !important;
  border-color: var(--wb-border-strong) !important;
  color: var(--wb-fg) !important;
}

.ui.basic.button {
  background: var(--wb-charcoal-800) !important;
  border: 1px solid var(--wb-border) !important;
  color: var(--wb-fg) !important;
  box-shadow: none !important;
}

.ui.basic.button:hover {
  background: var(--wb-charcoal-700) !important;
  border-color: var(--wb-border-strong) !important;
  color: var(--wb-fg) !important;
}

/* ── Links (Orange) ─────────────────────────────────────────────────────── */
a,
.muted-links a,
.text.primary {
  color: var(--wb-accent) !important;
}

a:hover {
  color: #FF8432 !important;
  text-decoration: none !important;
}

/* Repo-/Datei-Links: fg → Orange beim Hover */
.repository .repo-title a,
.repository .breadcrumb a,
#repo-files-table .name a {
  color: var(--wb-fg) !important;
}

.repository .repo-title a:hover,
#repo-files-table .name a:hover {
  color: var(--wb-accent) !important;
}

/* ── Footer: flach ──────────────────────────────────────────────────────── */
.page-footer,
footer.page-footer,
.full.footer {
  background: var(--wb-charcoal-850) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--wb-border) !important;
  color: var(--wb-fg-subtle) !important;
  font-family: var(--wb-font-sans) !important;
}

.page-footer a,
.full.footer a {
  color: var(--wb-fg-muted) !important;
}

.page-footer a:hover,
.full.footer a:hover {
  color: var(--wb-accent) !important;
}

/* Forgejo "powered by"-Branding abdämpfen */
.footer-links .powered-by,
.full.footer .item:has(svg[viewBox*="forgejo"]),
.footer .ui.left.dropdown.link.item {
  opacity: 0.4 !important;
}

/* ── Code-Ansicht ───────────────────────────────────────────────────────── */
.code-view,
.file-view {
  background: var(--wb-charcoal-800) !important;
  border-radius: var(--wb-radius-card) !important;
}

/* ── Markdown-Content ──────────────────────────────────────────────────── */
.markup,
.markdown {
  font-family: var(--wb-font-sans) !important;
}

.markup h1,
.markup h2,
.markup h3,
.markdown h1,
.markdown h2,
.markdown h3 {
  font-family: var(--wb-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--wb-fg) !important;
  border-bottom: 1px solid var(--wb-hairline) !important;
}

.markup blockquote,
.markdown blockquote {
  border-left: 3px solid var(--wb-accent) !important;
  background: var(--wb-accent-soft) !important;
  color: var(--wb-fg-muted) !important;
  border-radius: 0 var(--wb-radius-card) var(--wb-radius-card) 0 !important;
  padding: 12px 18px !important;
}

.markup code,
.markup pre,
.markdown code,
.markdown pre {
  background: var(--wb-charcoal-800) !important;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
}

/* ── Labels & Tags (Pill — Badges) ──────────────────────────────────────── */
.ui.label,
.ui.basic.label {
  border-radius: 9999px !important;
  font-family: var(--wb-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 4px 10px !important;
}

/* ── Checkboxen ─────────────────────────────────────────────────────────── */
.ui.checkbox input ~ label,
.ui.toggle.checkbox label {
  color: var(--wb-fg) !important;
}

.ui.checkbox input:checked ~ .box::before,
.ui.checkbox input:checked ~ label::before {
  background: var(--wb-accent) !important;
  border-color: var(--wb-accent) !important;
}

.ui.checkbox input:checked ~ .box::after,
.ui.checkbox input:checked ~ label::after {
  color: var(--wb-accent-on) !important;
}

/* ── Tabellen (Repo-Listing, Pulls, Issues) ─────────────────────────────── */
table,
.ui.table {
  background: transparent !important;
  color: var(--wb-fg) !important;
}

.ui.table thead th {
  background: var(--wb-charcoal-800) !important;
  color: var(--wb-fg-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--wb-border) !important;
}

.ui.table tbody tr td,
.ui.table tbody tr {
  border-bottom: 1px solid var(--wb-hairline) !important;
}

.ui.table tbody tr:hover {
  background: var(--wb-charcoal-800) !important;
}

/* ── Dropdowns ──────────────────────────────────────────────────────────── */
.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: var(--wb-charcoal-850) !important;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ui.dropdown .menu .item {
  color: var(--wb-fg) !important;
  border-bottom: 1px solid var(--wb-hairline) !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .selected.item {
  background: var(--wb-charcoal-800) !important;
  color: var(--wb-fg) !important;
}

/* ── Flash-Messages / Alerts (10% Fläche + 28% Rand) ────────────────────── */
.flash-message.flash-error,
.flash-message.flash-warning,
.flash-message.flash-info,
.flash-message.flash-success {
  border-radius: var(--wb-radius-card) !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--wb-font-sans) !important;
}

.flash-message.flash-error {
  background: rgba(248, 113, 113, 0.10) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
  color: var(--wb-danger) !important;
}

.flash-message.flash-success {
  background: rgba(52, 211, 153, 0.10) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
  color: var(--wb-success) !important;
}

.flash-message.flash-warning {
  background: rgba(251, 191, 36, 0.10) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
  color: var(--wb-warning) !important;
}

.flash-message.flash-info {
  background: rgba(96, 165, 250, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  color: var(--wb-info) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ui.pagination.menu {
  background: var(--wb-charcoal-850) !important;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-card) !important;
}

.ui.pagination.menu .active.item {
  background: var(--wb-accent) !important;
  color: var(--wb-accent-on) !important;
}

/* ── Scrollbar (subtle, kein Orange) ────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--wb-charcoal-900);
}
::-webkit-scrollbar-thumb {
  background: var(--wb-border) !important;
  border-radius: 5px;
  border: 2px solid var(--wb-charcoal-900);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wb-border-strong) !important;
}

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
  background: rgba(255, 102, 0, 0.25);
  color: var(--wb-fg);
}

/* ── Mobile-Optimierung ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .user.signin form.ui.form,
  .user.signup form.ui.form {
    margin: 24px auto !important;
    padding: 24px !important;
    border-radius: var(--wb-radius-card) !important;
  }

  .ui.primary.button {
    padding: 12px 20px !important;
  }

  .ui.input > input,
  .ui.form input,
  .ui.form textarea {
    font-size: 16px !important; /* iOS-Zoom-Schutz */
  }
}

/* ── Login-Page-Header: Werkblick-Wordmark ──────────────────────────────── */
body.user.signin .ui.container.medium > .ui.attached.header,
body.user.signin h2.ui.attached.header,
body.user.signin form.ui.form > .ui.attached.header {
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  font-family: var(--wb-font-sans) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  padding-bottom: 24px !important;
}

/* Werkblick-Wordmark als Decoration über dem Form (kein Glow) */
body.user.signin form.ui.form::before,
body.user.signup form.ui.form::before {
  content: "";
  display: block;
  height: 44px;
  margin-bottom: 16px;
  background-image: url('/werkblick-assets/img/logo-wordmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none;
}