/* ════════════════════════════════════════════════════════════════════════════
 * Werkblick Locus — Forgejo Custom Theme
 * Brutalist-Luxury / Architecture-Portfolio Aesthetic (werkblick.tech)
 *
 * Wird via custom/templates/custom/header.tmpl in alle Forgejo-Pages injiziert.
 * Forgejo nutzt Fomantic-UI (Semantic-UI-Fork) + eigene CSS-Variablen.
 * Overrides hier setzen sowohl die CSS-Custom-Properties als auch die rohen
 * Fomantic-Klassen, damit das Theming auch in Edge-Cases greift.
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root,
:root.theme-forgejo-dark,
:root.theme-gitea-dark,
:root.theme-arc-green,
:root.theme-forgejo-auto {
  /* Werkblick-CI Tokens (von werkblick.tech) */
  --wbk-snow: #F6F6F6;
  --wbk-amber: #FF6600;
  --wbk-amber-hover: #CC5100;
  --wbk-amber-soft: rgba(255, 102, 0, 0.12);
  --wbk-amber-glow: rgba(255, 102, 0, 0.18);
  --wbk-charcoal: #131415;
  --wbk-graphite: #34373A;
  --wbk-elev-1: #1E1F20;
  --wbk-elev-2: #2A2B2C;
  --wbk-muted: #7A7D80;
  --wbk-glass: rgba(19, 20, 21, 0.42);
  --wbk-glass-strong: rgba(19, 20, 21, 0.78);
  --wbk-glass-card: rgba(255, 255, 255, 0.03);
  --wbk-border: rgba(246, 246, 246, 0.08);
  --wbk-border-strong: rgba(246, 246, 246, 0.14);
  --wbk-font-headline: 'Bebas Neue', 'Oswald', sans-serif;
  --wbk-font-body: 'Satoshi', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Forgejo-Variablen überschreiben (Stand Forgejo 9.x) */
  --color-primary: var(--wbk-amber) !important;
  --color-primary-contrast: var(--wbk-charcoal) !important;
  --color-primary-dark-1: var(--wbk-amber-hover) !important;
  --color-primary-dark-2: var(--wbk-amber-hover) !important;
  --color-primary-light-1: #FF8432 !important;
  --color-primary-light-2: #FFA060 !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(--wbk-amber-hover) !important;
  --color-primary-active: var(--wbk-amber-hover) !important;

  --color-body: var(--wbk-charcoal) !important;
  --color-box-body: var(--wbk-elev-1) !important;
  --color-box-header: var(--wbk-glass-card) !important;
  --color-text: var(--wbk-snow) !important;
  --color-text-light: rgba(246, 246, 246, 0.85) !important;
  --color-text-light-1: rgba(246, 246, 246, 0.70) !important;
  --color-text-light-2: var(--wbk-muted) !important;
  --color-text-light-3: rgba(246, 246, 246, 0.45) !important;

  --color-secondary: var(--wbk-elev-2) !important;
  --color-secondary-dark-1: var(--wbk-elev-1) !important;
  --color-secondary-dark-2: var(--wbk-charcoal) !important;
  --color-secondary-light-1: var(--wbk-graphite) !important;
  --color-secondary-light-2: rgba(122, 125, 128, 0.6) !important;

  --color-input-background: rgba(246, 246, 246, 0.04) !important;
  --color-input-border: var(--wbk-border-strong) !important;
  --color-input-border-hover: var(--wbk-amber) !important;
  --color-input-text: var(--wbk-snow) !important;

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

  --color-nav-bg: var(--wbk-glass-strong) !important;
  --color-nav-hover-bg: rgba(255, 102, 0, 0.08) !important;
  --color-header-bar: var(--wbk-glass-strong) !important;
  --color-footer: var(--wbk-glass-strong) !important;

  --color-button: var(--wbk-elev-1) !important;
  --color-light-mimic-enabled: var(--wbk-elev-2) !important;
}

/* ── Page-Body: Background-Glow wie werkblick.tech Hero ──────────────────── */
html,
body {
  background: var(--wbk-charcoal) !important;
  color: var(--wbk-snow) !important;
  font-family: var(--wbk-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image:
    radial-gradient(900px circle at 15% 15%, rgba(255, 102, 0, 0.06) 0%, transparent 55%),
    radial-gradient(1100px circle at 85% 85%, rgba(43, 108, 176, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #0E0F10 0%, #131415 100%) !important;
  background-attachment: fixed !important;
}

/* Login-Page: full-bleed Glow */
body.user.signin,
body.user.signup,
body.user.forgot_password {
  background-image:
    radial-gradient(900px circle at 18% 22%, rgba(255, 102, 0, 0.12) 0%, transparent 55%),
    radial-gradient(900px circle at 82% 78%, rgba(43, 108, 176, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0E0F10 0%, #131415 100%) !important;
}

/* ── Top-Navigation: Glassmorphism wie nav--scrolled auf werkblick.tech ──── */
#navbar,
.full.header,
.ui.fluid.menu.navbar,
.ui.secondary.menu.navbar {
  background: rgba(19, 20, 21, 0.45) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid var(--wbk-border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Top-Nav-Logo: Das Werkblick-Logo (Infinity-Dots) ist breiter als das alte
   W-Square. Größer skalieren + Schutzzone, sonst quetschen die Nav-Items. */
#navbar #navbar-logo img,
.navbar-left #navbar-logo img,
img.ui.mini.image#navbar-logo {
  width: auto !important;
  height: 32px !important;
  max-height: 32px !important;
  filter: drop-shadow(0 2px 8px rgba(255, 102, 0, 0.20));
}

/* ── Repository-Header + Secondary-Nav: weißes Feld dark machen ─────────── */
.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: rgba(19, 20, 21, 0.55) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-color: var(--wbk-border) !important;
  border-radius: 12px !important;
  color: var(--wbk-snow) !important;
}

/* Secondary-Nav: Tabs Bereich speziell — kein Glow, nur dark mit border-bottom */
.secondary-nav,
.ui.secondary.pointing.tabular.top.attached.borderless.menu.secondary-nav {
  background: rgba(30, 31, 32, 0.6) !important;
  border-bottom: 1px solid var(--wbk-border) !important;
  border-radius: 0 0 12px 12px !important;
}

.secondary-nav .item,
.ui.secondary.pointing.tabular.menu .item {
  color: var(--wbk-snow) !important;
  font-family: var(--wbk-font-body) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

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

.secondary-nav .active.item,
.ui.secondary.pointing.tabular.menu .active.item {
  color: var(--wbk-amber) !important;
  border-color: var(--wbk-amber) !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(--wbk-snow) !important;
  background: transparent !important;
}

/* PRIVAT / PUBLIC Badge */
.repository .ui.basic.label,
.repository .ui.tag.label {
  background: var(--wbk-amber-soft) !important;
  color: var(--wbk-amber) !important;
  border: 1px solid rgba(255, 102, 0, 0.30) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Counter-Badges im Repo-Header (Watch, Star, Fork) */
.repository .ui.labeled.button > .label,
.repository .ui.label.basic {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--wbk-snow) !important;
  border: 1px solid var(--wbk-border) !important;
}

#navbar .item,
.ui.fluid.menu.navbar .item {
  color: var(--wbk-snow) !important;
  font-family: var(--wbk-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

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

#navbar .active.item,
#navbar .item.active {
  color: var(--wbk-amber) !important;
  background: var(--wbk-amber-soft) !important;
  border-radius: 8px !important;
}

/* Logo in der Nav: Werkblick-Wordmark statt Forgejo-Tannenbaum */
#navbar .item.brand,
.navbar .item.brand,
.logo {
  font-family: var(--wbk-font-headline) !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--wbk-snow) !important;
}

#navbar img.ui.mini.image,
#navbar img.ui.tiny.image,
#navbar .navbar-brand img,
img.ui.mini.image {
  filter: drop-shadow(0 2px 8px rgba(255, 102, 0, 0.30));
}

/* ── Headlines: Bebas Neue, brutalist ────────────────────────────────────── */
h1.ui.header,
h2.ui.header,
h3.ui.header,
h4.ui.header,
h5.ui.header,
.ui.header > .content {
  font-family: var(--wbk-font-headline) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--wbk-snow) !important;
}

/* Page-Headlines: stark vergrößert, uppercase */
.user.signin h1,
.user.signup h1,
.repository h1.ui.header,
.user.profile h1.ui.header {
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
}

/* ── Cards / Segments: Glassmorphism ─────────────────────────────────────── */
.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(--wbk-glass-card) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--wbk-border) !important;
  border-radius: 14px !important;
  color: var(--wbk-snow) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30) !important;
}

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

.ui.attached.segment:not(:last-child) {
  border-radius: 14px 14px 0 0 !important;
}

.ui.attached.segment + .ui.attached.segment {
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
}

/* Login-Form-Card: extra prominent */
.user.signin .ui.container.medium,
.user.signin form.ui.form,
.user.signup form.ui.form,
.user.forgot_password form.ui.form {
  background: var(--wbk-glass) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid var(--wbk-border) !important;
  border-radius: 24px !important;
  padding: clamp(28px, 4vw, 48px) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  max-width: 480px !important;
  margin: 60px auto !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.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: rgba(246, 246, 246, 0.04) !important;
  border: 1px solid var(--wbk-border-strong) !important;
  color: var(--wbk-snow) !important;
  border-radius: 10px !important;
  font-family: var(--wbk-font-body) !important;
  font-size: 15px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ui.input > input:hover,
.ui.form input:hover,
.ui.form textarea:hover {
  border-color: rgba(255, 102, 0, 0.55) !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.dropdown:focus,
.ui.dropdown.active {
  border-color: var(--wbk-amber) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18) !important;
  outline: none !important;
  background-color: rgba(246, 246, 246, 0.06) !important;
}

.ui.input > input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder {
  color: rgba(246, 246, 246, 0.35) !important;
}

.ui.form .field > label,
.ui.form label {
  color: var(--wbk-muted) !important;
  font-family: var(--wbk-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
}

/* ── Buttons: Brutalist-Style, Orange Primary ───────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button,
button.primary,
.ui.button.primary {
  background: var(--wbk-amber) !important;
  color: var(--wbk-charcoal) !important;
  font-family: var(--wbk-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  border-radius: 10px !important;
  border: 1px solid var(--wbk-amber) !important;
  padding: 14px 28px !important;
  box-shadow: 0 12px 32px rgba(255, 102, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.button.primary:hover {
  background: var(--wbk-amber-hover) !important;
  border-color: var(--wbk-amber-hover) !important;
  color: var(--wbk-snow) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(255, 102, 0, 0.40) !important;
}

.ui.primary.button:active {
  transform: translateY(0);
}

/* Default-Buttons (Outline) */
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.yellow):not(.blue):not(.labeled):not(.icon) {
  background: rgba(246, 246, 246, 0.04) !important;
  border: 1px solid var(--wbk-border-strong) !important;
  color: var(--wbk-snow) !important;
  border-radius: 10px !important;
  font-family: var(--wbk-font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 12px !important;
  padding: 11px 22px !important;
}

.ui.button:not(.primary):hover {
  background: rgba(255, 102, 0, 0.06) !important;
  border-color: var(--wbk-amber) !important;
  color: var(--wbk-amber) !important;
}

.ui.basic.button {
  background: transparent !important;
  border: 1px solid var(--wbk-border-strong) !important;
  color: var(--wbk-snow) !important;
  box-shadow: none !important;
}

.ui.basic.button:hover {
  background: rgba(255, 102, 0, 0.06) !important;
  border-color: var(--wbk-amber) !important;
  color: var(--wbk-amber) !important;
}

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

a:hover {
  color: var(--wbk-snow) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--wbk-amber) !important;
  text-underline-offset: 3px !important;
}

/* Repo-Links sollen lesbar bleiben */
.repository .repo-title a,
.repository .breadcrumb a,
#repo-files-table .name a {
  color: var(--wbk-snow) !important;
}

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

/* ── Footer ──────────────────────────────────────────────────────────────── */
.page-footer,
footer.page-footer,
.full.footer {
  background: var(--wbk-glass-strong) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-top: 1px solid var(--wbk-border) !important;
  color: var(--wbk-muted) !important;
  font-family: var(--wbk-font-body) !important;
}

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

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

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

/* ── Code-Highlighting bleibt (nicht überfärben) ────────────────────────── */
.code-view,
.file-view {
  background: var(--wbk-elev-1) !important;
  border-radius: 12px !important;
}

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

.markup h1,
.markup h2,
.markup h3,
.markdown h1,
.markdown h2,
.markdown h3 {
  font-family: var(--wbk-font-headline) !important;
  letter-spacing: -0.01em !important;
  color: var(--wbk-snow) !important;
  border-bottom: 1px solid var(--wbk-border) !important;
}

.markup blockquote,
.markdown blockquote {
  border-left: 3px solid var(--wbk-amber) !important;
  background: rgba(255, 102, 0, 0.04) !important;
  color: rgba(246, 246, 246, 0.85) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 18px !important;
}

.markup code,
.markup pre,
.markdown code,
.markdown pre {
  background: var(--wbk-elev-2) !important;
  border: 1px solid var(--wbk-border) !important;
  border-radius: 8px !important;
}

/* ── Labels & Tags ──────────────────────────────────────────────────────── */
.ui.label,
.ui.basic.label {
  border-radius: 100px !important;
  font-family: var(--wbk-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
}

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

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

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

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

.ui.table thead th {
  background: var(--wbk-glass-card) !important;
  color: var(--wbk-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  border-bottom: 1px solid var(--wbk-border) !important;
}

.ui.table tbody tr:hover {
  background: rgba(255, 102, 0, 0.03) !important;
}

/* ── Dropdowns ──────────────────────────────────────────────────────────── */
.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: var(--wbk-elev-1) !important;
  border: 1px solid var(--wbk-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

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

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .selected.item {
  background: var(--wbk-amber-soft) !important;
  color: var(--wbk-snow) !important;
}

/* ── Flash-Messages / Alerts ────────────────────────────────────────────── */
.flash-message.flash-error,
.flash-message.flash-warning,
.flash-message.flash-info,
.flash-message.flash-success {
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--wbk-font-body) !important;
}

.flash-message.flash-error {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
  color: #FCA5A5 !important;
}

.flash-message.flash-success {
  background: rgba(52, 211, 153, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
  color: #6EE7B7 !important;
}

.flash-message.flash-warning {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
  color: #FCD34D !important;
}

.flash-message.flash-info {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
  color: #93C5FD !important;
}

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

.ui.pagination.menu .active.item {
  background: var(--wbk-amber) !important;
  color: var(--wbk-charcoal) !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--wbk-charcoal);
}
::-webkit-scrollbar-thumb {
  background: var(--wbk-border-strong);
  border-radius: 5px;
  border: 2px solid var(--wbk-charcoal);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wbk-amber);
}

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
  background: var(--wbk-amber);
  color: var(--wbk-charcoal);
}

/* ── 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: 20px !important;
  }

  .ui.primary.button {
    padding: 14px 24px !important;
  }
}

/* ── Login-Page-Header: Werkblick-Wordmark statt nur "Sign In" ──────────── */
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(--wbk-font-headline) !important;
  font-size: 32px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  padding-bottom: 24px !important;
}

/* Werkblick-Wordmark als Decoration über dem Form */
body.user.signin form.ui.form::before,
body.user.signup form.ui.form::before {
  content: "";
  display: block;
  height: 56px;
  margin-bottom: 16px;
  background-image: url('/werkblick-assets/img/logo-wordmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 18px rgba(255, 102, 0, 0.20));
}