/* ============================================================================
   andromed Hub — Zentrales Design-System (v1)
   Tokens + Komponenten (Präfix .hub-). Schriften lokal (DSGVO), nur WOFF2.
   Additiv: kollidiert nicht mit bestehenden Seiten-Styles.
   ============================================================================ */

/* ── Schriften (lokal, WOFF2, font-display: swap) ───────────────────────── */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url('/static/fonts/dmsans-300.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/dmsans-500.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/dmsans-600.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/dmsans-700.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/cormorant-600.woff2') format('woff2'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/syne-600.woff2') format('woff2'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/syne-700.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────────────
   Vier getrennte Gruppen: Brand / Semantic / Surface / Text (+ Skalen).      */
:root {
  /* Brand */
  --brand-primary:      #508729;
  --brand-primary-dark: #3a6120;
  --brand-primary-pale: #f0f7e8;
  --brand-gold:         #c8a96e;
  --brand-dark:         #14210c;   /* tiefes Grün für Markenflächen */

  /* Semantic */
  --success: #2e7d32;  --success-bg: #eaf3ea;
  --warning: #b06f00;  --warning-bg: #fdf4e3;
  --danger:  #c0392b;  --danger-bg:  #fbecea;
  --info:    #2563eb;  --info-bg:    #eaf0fd;

  /* Surface */
  --surface-1: #ffffff;
  --surface-2: #f6f6f3;
  --surface-3: #f0f0ec;
  --surface-border: #e4e6e1;

  /* Text */
  --text-primary: #111210;
  --text-muted:   #6b7067;
  --text-faint:   #9a9e96;
  --text-on-dark: rgba(255,255,255,.92);

  /* Skalen */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --rad-sm:8px; --rad-md:12px; --rad-lg:16px; --rad-pill:999px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
  --sh-lg: 0 20px 60px rgba(0,0,0,.18);

  /* Fonts */
  --hub-font-body:    'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --hub-font-display: 'Cormorant Garamond', Georgia, serif;
  --hub-font-accent:  'Syne', 'DM Sans', sans-serif;

  /* Fokus (Accessibility) */
  --focus-ring: 0 0 0 3px rgba(80,135,41,.28);
  --focus-ring-offset: 2px;
}

/* ── Fokus-Stil (Tastaturbedienung) ─────────────────────────────────────── */
.hub-btn:focus-visible,
.hub-input:focus-visible,
.hub-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   YAGNI: aktuell Primary genutzt; weitere Typen kommen mit ihren Seiten.     */
.hub-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--hub-font-accent); font-size:14px; font-weight:600;
  letter-spacing:.2px; line-height:1; cursor:pointer; border:1px solid transparent;
  border-radius: var(--rad-sm); padding:12px 18px;
  transition: background .15s, box-shadow .15s, transform .12s, border-color .15s;
}
.hub-btn-primary {
  background: var(--brand-primary); color:#fff;
  box-shadow: 0 1px 2px rgba(80,135,41,.25);
}
.hub-btn-primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: 0 6px 18px rgba(80,135,41,.32); transform: translateY(-1px);
}
.hub-btn-primary:active { transform:none; box-shadow:none; }
.hub-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── Inputs / Labels ────────────────────────────────────────────────────── */
.hub-field { margin-bottom: var(--sp-4); }
.hub-label {
  display:block; font-family: var(--hub-font-accent);
  font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color: var(--text-muted); margin-bottom:7px;
}
.hub-input {
  width:100%; padding:12px 14px;
  font-family: var(--hub-font-body); font-size:14px; color: var(--text-primary);
  background: var(--surface-1);
  border:1.5px solid var(--surface-border); border-radius: var(--rad-sm);
  outline:none; transition: border-color .15s, box-shadow .15s;
}
.hub-input:focus { border-color: var(--brand-primary); }
.hub-input::placeholder { color: var(--text-faint); }
.hub-input-hint { font-size:11px; color: var(--text-faint); margin-top:6px; }

/* ── Alerts (Fehler-/Hinweiszustände) ───────────────────────────────────── */
.hub-alert {
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; line-height:1.45; border-radius: var(--rad-sm);
  padding:11px 14px; margin-bottom: var(--sp-4);
  border:1px solid transparent;
}
.hub-alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color:#f1c9c3; }
.hub-alert-warning { background: var(--warning-bg); color: var(--warning); border-color:#f0dcb0; }
.hub-alert-info    { background: var(--info-bg);    color: var(--info);    border-color:#c7d6f7; }

/* ── Card (transient: Glas erlaubt, mit solidem Fallback) ───────────────── */
.hub-card {
  background: var(--surface-1);
  border:1px solid rgba(0,0,0,.05);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-md);
}
.hub-card-glass {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border:1px solid rgba(255,255,255,.6);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-lg);
}

/* ── Typografie-Helfer ──────────────────────────────────────────────────── */
.hub-display { font-family: var(--hub-font-display); font-weight:600; letter-spacing:.2px; }
.hub-eyebrow {
  font-family: var(--hub-font-accent); font-size:11px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color: var(--brand-gold);
}