/* Seitenwerk — Gemeinsamer Produktrahmen für Bibliothek & Ghostwriter
   Monochromes Studio-Designsystem im Einklang mit Forttrieb & NOWIK 0.17.1 (reine Wortmarke ohne G-Emblem). */

@font-face {
  font-family: "Nowik Sans";
  src: url("/nowik/fonts/NowikSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sw-font: "Nowik Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sw-serif: "Newsreader", "Iowan Old Style", Georgia, "Noto Serif", serif;
  --sw-r-sm: 6px;
  --sw-r-md: 8px;
  --sw-r-lg: 10px;

  --sw-bg: #f4f4f5;
  --sw-panel: #ffffff;
  --sw-raised: #ececef;
  --sw-well: #e3e3e8;
  --sw-text: #111113;
  --sw-secondary: #3f3f46;
  --sw-muted: #52525b;
  --sw-line: #d4d4da;
  --sw-line-strong: #6e6e77;
  --sw-accent: #121215;
  --sw-accent-hover: #27272c;
  --sw-on-accent: #fafafa;
  --sw-focus: #1b5ca8;
  --sw-cover: #e7e6e2;
  --sw-shadow: 0 16px 40px rgb(0 0 0 / 0.06);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sw-bg: #0c0c0d;
  --sw-panel: #141416;
  --sw-raised: #1b1b1e;
  --sw-well: #101012;
  --sw-text: #f4f4f3;
  --sw-secondary: #c4c4ca;
  --sw-muted: #a1a1aa;
  --sw-line: #2a2a2e;
  --sw-line-strong: #8c8c96;
  --sw-accent: #f0f0ee;
  --sw-accent-hover: #ffffff;
  --sw-on-accent: #0e0e10;
  --sw-focus: #8ec5ff;
  --sw-cover: #18181b;
  --sw-shadow: 0 20px 48px rgb(0 0 0 / 0.42);
}

/* ── Einheitlicher Seitenwerk-Kopfbereich (Bibliothek & Ghostwriter) ── */
.sw-header {
  font-family: var(--sw-font);
  background: var(--sw-panel);
  border-bottom: 1px solid var(--sw-line);
}

.sw-header-inner {
  width: 100%;
  max-width: 1600px;
  min-height: 62px;
  margin-inline: auto;
  padding: 8px clamp(16px, 3vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

.sw-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  color: var(--sw-text);
  white-space: nowrap;
  flex: none;
}

.sw-brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.065em;
  line-height: 1;
}

.sw-brand-dot {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  background: currentColor;
}

.sw-brand-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-muted);
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--sw-line);
  line-height: 1.2;
}

.sw-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sw-nav a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--sw-r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--sw-muted);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.sw-nav a:hover {
  color: var(--sw-text);
  background: var(--sw-raised);
}

.sw-nav a[aria-current="page"] {
  color: var(--sw-text);
  background: var(--sw-raised);
  border-color: var(--sw-line-strong);
  font-weight: 650;
}

.sw-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sw-appearance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--sw-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.sw-appearance select {
  min-height: 38px;
  max-width: 142px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r-sm);
  background: var(--sw-raised);
  color: var(--sw-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.sw-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--sw-r-sm);
  border: 1px solid var(--sw-accent);
  background: var(--sw-accent);
  color: var(--sw-on-accent);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.sw-account:hover {
  background: var(--sw-accent-hover);
  border-color: var(--sw-accent-hover);
}

@media (pointer: coarse) {
  .sw-nav a,
  .sw-appearance select,
  .sw-account {
    min-height: 44px;
  }
}

.sw-header a:focus-visible,
.sw-appearance select:focus-visible {
  outline: 2px solid var(--sw-focus);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .sw-brand-sub { display: none; }
}

@media (max-width: 639px) {
  .sw-header-inner {
    justify-content: space-between;
    gap: 8px 12px;
    padding-block: 8px;
  }
  .sw-brand-mark { font-size: 15.5px; }
  .sw-nav { gap: 4px; margin-left: auto; }
  .sw-nav a { padding-inline: 10px; font-size: 13px; min-height: 40px; }
  .sw-tools {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--sw-line);
  }
  .sw-appearance > span { font-size: 12px; }
  .sw-appearance select { max-width: 136px; min-height: 38px; font-size: 12.5px; }
  .sw-account { min-height: 38px; padding-inline: 12px; font-size: 13px; }
}

@media (max-width: 359px) {
  .sw-appearance > span { display: none; }
}

@media (forced-colors: active) {
  .sw-nav a[aria-current="page"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ── Ghostwriter-Schreibwerkstatt: dieselben Studio-Tokens wie die Bibliothek ── */
html[data-area="writer"] {
  --sw-bg: #f4f4f5;
  --sw-panel: #ffffff;
  --sw-raised: #ececef;
  --sw-text: #111113;
  --sw-muted: #52525b;
  --sw-line: #d4d4da;
  --sw-accent: #121215;
  --sw-on-accent: #fafafa;
}

html[data-area="writer"][data-theme="dark"] {
  --sw-bg: #0c0c0d;
  --sw-panel: #141416;
  --sw-raised: #1b1b1e;
  --sw-text: #f4f4f3;
  --sw-muted: #a1a1aa;
  --sw-line: #2a2a2e;
  --sw-accent: #f0f0ee;
  --sw-on-accent: #0e0e10;
}

html[data-area="writer"]:root, html[data-area="writer"] dialog.gespraech {
  color-scheme: light;
  --gw-schwarz: var(--sw-bg);
  --gw-oberflaeche: var(--sw-panel);
  --gw-erhoeht: var(--sw-raised);
  --gw-rand: var(--sw-line);
  --gw-rand-aktiv: #6e6e77;
  --gw-text: var(--sw-text);
  --gw-gedaempft: var(--sw-muted);
  --gw-weiss: var(--sw-accent);
  --gw-weiss-hover: #27272c;
  --gw-auf-weiss: var(--sw-on-accent);
  --gw-geprueft: #1a663e;
  --gw-fehler: #b42b24;
  --gw-aktiv: #1b5ca8;
  --gw-entscheidung: #875500;
  --marke-zeichen: var(--sw-text);
}

html[data-area="writer"][data-theme="dark"]:root, html[data-area="writer"][data-theme="dark"] dialog.gespraech {
  color-scheme: dark;
  --gw-rand-aktiv: #8c8c96;
  --gw-weiss-hover: #ffffff;
  --gw-geprueft: #7ee0a3;
  --gw-fehler: #f29389;
  --gw-aktiv: #8ec5ff;
  --gw-entscheidung: #f0c46c;
}

.nw .kopf.sw-header { background: var(--sw-panel); border-bottom: 1px solid var(--sw-line); }
.nw .sw-brand { color: var(--sw-text); }
.nw .sw-tools .konto-knopf { width: 44px; height: 44px; }
.nw .fuss { background: var(--sw-bg); }
.nw dialog.profil-dialog { background: var(--sw-panel); color: var(--sw-text); border-color: var(--sw-line); }
.nw :is(.profil-hilfe, .profil-login > span) { color: var(--sw-muted); }
.nw :is(.profil-login, .profil-avatarinhalt, .profil-upload) { border-color: var(--sw-line); }
.nw .profil-avatarinhalt { background: var(--sw-raised); }
.nw .profil-leseschrift input { accent-color: var(--sw-accent); }
.nw .profil-bild { background: var(--sw-accent); color: var(--sw-on-accent); }
.nw .profil-fuss { background: var(--sw-panel); border-color: var(--sw-line); }
.nw .profil-leseschrift small { color: var(--sw-muted); }

html[data-area="writer"][data-theme="light"] {
  --nw-color-canvas: var(--sw-bg);
  --nw-color-surface: var(--sw-panel);
  --nw-color-surface-raised: var(--sw-raised);
  --nw-color-surface-active: #dfdfe5;
  --nw-color-text: var(--sw-text);
  --nw-color-text-secondary: var(--sw-muted);
  --nw-color-text-muted: var(--sw-muted);
  --nw-color-border: var(--sw-line);
  --nw-color-border-interactive: #8b8b95;
  --nw-color-inverse: var(--sw-accent);
  --nw-color-on-inverse: var(--sw-on-accent);
  --nw-color-on-inverse-secondary: #dddddf;
  --nw-color-inverse-hover: #27272c;
  --nw-color-focus: #1b5ca8;
}

html[data-area="writer"] body.nw { color: var(--sw-text); color-scheme: inherit; }