/* weiconet-Intranet — Design System (CI aus weiconet.de).
   Hell, Lila (#28006E) + Cyan-Akzent (#79C4DB), Montserrat (Headlines) + Inter (Text).
   Struktur wie o4w: fixe Topbar oben (64px) + Sidebar links (212px ab 900px). */

:root {
  --wn-purple:      #28006E;   /* Marke / Navigation */
  --wn-purple-700:  #3A0E8C;
  --wn-cyan:        #79C4DB;   /* Akzent / Links / aktiv */
  --wn-cyan-600:    #4FA9C6;
  --wn-ink:         #2B2A2E;   /* Fliesstext */
  --wn-ink-soft:    #6B6870;
  --wn-bg:          #F4F5F8;   /* Seitenhintergrund */
  --wn-surface:     #FFFFFF;   /* Karten */
  --wn-border:      #E3E4EA;
  --wn-border-soft: #EDEEF3;
  --wn-ok:          #16A34A;
  --wn-warn:        #D97706;
  --wn-err:         #DC2626;
  --wn-shadow:      0 1px 3px rgba(40,0,110,.06), 0 6px 20px rgba(40,0,110,.05);
  --wn-font-head: 'Montserrat', system-ui, -apple-system, sans-serif;
  --wn-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--wn-font-body);
  color: var(--wn-ink);
  background: var(--wn-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wn-cyan-600); }
h1, h2, h3 { font-family: var(--wn-font-head); color: var(--wn-purple); margin: 0; }

/* ── Seiten-Container (rechts von Sidebar, unter Topbar) ─────────────────── */
.wn-main { max-width: 1180px; margin: 0 auto; padding: 28px 26px 60px; }

/* ── Hero (Navy/Lila-Kopf mit Cyan-Eyebrow) ─────────────────────────────── */
.wn-hero {
  background: linear-gradient(135deg, var(--wn-purple) 0%, var(--wn-purple-700) 100%);
  color: #fff; border-radius: 14px; padding: 30px 32px; margin-bottom: 26px;
  box-shadow: var(--wn-shadow);
}
.wn-hero .eyebrow {
  font-family: var(--wn-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wn-cyan);
  margin-bottom: 8px;
}
.wn-hero h1 { color: #fff; font-size: 26px; font-weight: 800; }
.wn-hero p { color: rgba(255,255,255,.82); margin: 8px 0 0; font-size: 14px; max-width: 62ch; }

/* ── Kachel-Grid (Hub) ──────────────────────────────────────────────────── */
.wn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.wn-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--wn-surface); border: 1px solid var(--wn-border); border-radius: 12px;
  padding: 20px; color: var(--wn-ink); box-shadow: var(--wn-shadow);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.wn-card:hover { transform: translateY(-2px); border-color: var(--wn-cyan); }
.wn-card__ic {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: rgba(121,196,219,.16); color: var(--wn-purple);
}
.wn-card__ic svg { width: 22px; height: 22px; }
.wn-card h3 { font-size: 15px; font-weight: 700; }
.wn-card p { margin: 0; font-size: 12.5px; color: var(--wn-ink-soft); }
.wn-card--admin .wn-card__ic { background: rgba(40,0,110,.09); }

/* ── generische Karte / Panel ───────────────────────────────────────────── */
.wn-panel {
  background: var(--wn-surface); border: 1px solid var(--wn-border); border-radius: 12px;
  padding: 22px; box-shadow: var(--wn-shadow); margin-bottom: 18px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.wn-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--wn-font-head); font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  background: var(--wn-purple); color: #fff; text-decoration: none;
}
.wn-btn:hover { background: var(--wn-purple-700); }
.wn-btn--ghost { background: transparent; color: var(--wn-purple); border-color: var(--wn-border); }
.wn-btn--ghost:hover { background: var(--wn-bg); border-color: var(--wn-cyan); }
.wn-btn--danger { background: var(--wn-err); }

/* ── Tabelle ────────────────────────────────────────────────────────────── */
.wn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wn-table th {
  text-align: left; font-family: var(--wn-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--wn-ink-soft);
  padding: 10px 12px; border-bottom: 2px solid var(--wn-border);
}
.wn-table td { padding: 11px 12px; border-bottom: 1px solid var(--wn-border-soft); }
.wn-table tr:hover td { background: var(--wn-bg); }
.wn-table .row--off td { opacity: .5; }

/* ── Formfelder ─────────────────────────────────────────────────────────── */
.wn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.wn-field label { font-size: 12px; font-weight: 600; color: var(--wn-ink-soft); }
.wn-field input, .wn-field select, .wn-field textarea {
  font-family: var(--wn-font-body); font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--wn-border); border-radius: 8px; background: #fff; color: var(--wn-ink);
}
.wn-field input:focus, .wn-field select:focus, .wn-field textarea:focus {
  outline: none; border-color: var(--wn-cyan); box-shadow: 0 0 0 3px rgba(121,196,219,.25);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.wn-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; font-family: var(--wn-font-head); }
.wn-badge--admin { background: rgba(40,0,110,.1); color: var(--wn-purple); }
.wn-badge--user  { background: rgba(121,196,219,.2); color: var(--wn-cyan-600); }
.wn-badge--off   { background: #F1F1F4; color: var(--wn-ink-soft); }

/* Meldungen */
.wn-msg { padding: 11px 14px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.wn-msg--err { background: #FEECEC; color: var(--wn-err); }
.wn-msg--ok  { background: #EAF7EF; color: var(--wn-ok); }