/* Links im Datenschutz-Hinweis deutlich als Link erkennbar */
.ks-app.ks-np .st-priv a, .ks-app.ks-np .st-priv-dlg a { color: var(--np-accent, #e11d48) !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ks-app.ks-np .st-priv-dlg h3 { font-family: var(--np-font-head, inherit); font-weight: 800; }

/**
 * KI-Kreativsuite – Design-Port auf das Site-Template NewsPulse
 * Nutzt ausschließlich die Design-Tokens des Templates (--np-*) aus media/templates/site/newspulse/css/template.css:
 * Akzentfarbe, Flächen, Text, Rahmen, Rundungen, Schatten, Schriften – inklusive Dunkelmodus ([data-bs-theme="dark"]).
 * Fehlen die Tokens (anderes Template), greifen neutrale Ersatzwerte in derselben Anmutung.
 *
 * (C) 2026 lunde24.de – GPL-2.0-or-later
 */

/* ---------------------------------------------------------------
   Tokens: App-Variablen → NewsPulse-Variablen
--------------------------------------------------------------- */
.ks-app.ks-np {
  --np-accent-f: var(--np-accent, #e11d48);
  --paper: var(--np-surface-2, #f0f1f5);
  --paper-2: color-mix(in srgb, var(--np-surface-2, #f0f1f5) 55%, var(--np-border, #e3e5eb));
  --card: var(--np-surface, #fff);
  --ink: var(--np-text, #151821);
  --ink-2: var(--np-muted, #646b7a);
  --ink-3: color-mix(in srgb, var(--np-muted, #646b7a) 78%, var(--np-surface, #fff));
  --line: var(--np-border, #e3e5eb);
  --grid: transparent;
  --red: var(--np-accent-f);
  --red-soft: color-mix(in srgb, var(--np-accent-f) 10%, var(--np-surface, #fff));
  --ok: #15803d;
  --ok-soft: color-mix(in srgb, #15803d 12%, var(--np-surface, #fff));
  --sans: var(--np-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --head: var(--np-font-head, var(--sans));
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --ks-r: var(--np-radius, 14px);
  --ks-r-sm: var(--np-radius-sm, 8px);
  --ks-shadow: var(--np-shadow, 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06));
  --ks-shadow-lg: var(--np-shadow-lg, 0 12px 40px rgba(16, 24, 40, .14));
  --ks-ease: var(--np-ease, cubic-bezier(.2, .7, .2, 1));
  --ks-chk1: color-mix(in srgb, var(--np-border, #e3e5eb) 75%, var(--np-surface, #fff));
  --ks-chk2: var(--np-surface, #fff);

  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Kopf jedes Werkzeugs (wie Seitenüberschrift + Badge im Template)
--------------------------------------------------------------- */
.ks-app.ks-np header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: var(--np-gap, 24px);
  align-items: flex-end;
}
.ks-app.ks-np .tag {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--np-accent-ink, #fff);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ks-app.ks-np h1 {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: .5rem 0 0;
  color: var(--ink);
}
.ks-app.ks-np .sub { font-family: var(--sans); font-size: .8125rem; color: var(--ink-2); }
.ks-app.ks-np .sub b { color: var(--ink); font-weight: 700; }

/* Werkzeug-Reiter (optional) – wie die Pillen/Badges des Templates */
.ks-app.ks-np .apptabs {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  border: 0; padding: 0; margin: 0 0 1.25rem; background: none;
}
.ks-app.ks-np .apptabs button {
  font-family: var(--sans); font-weight: 700; font-size: .875rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: .45rem 1rem; box-shadow: none;
}
.ks-app.ks-np .apptabs button:hover { color: var(--red); border-color: var(--red); }
.ks-app.ks-np .apptabs button[aria-pressed=true] { background: var(--red); border-color: var(--red); color: #fff; }
.ks-app.ks-np .apptabs .suite-brand { font-family: var(--head); font-weight: 800; color: var(--ink); margin-right: .5rem; }
.ks-app.ks-np .apptabs .suite-brand b { color: var(--red); }
.ks-app.ks-np .apptabs .new { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; border-radius: 999px; font-family: var(--sans); font-weight: 700; }

/* ---------------------------------------------------------------
   Karten / Panels (wie die Seitenleisten-Module des Templates)
--------------------------------------------------------------- */
.ks-app.ks-np .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ks-r);
  box-shadow: var(--ks-shadow);
}
.ks-app.ks-np .panel-h {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.ks-app.ks-np .panel-h > span:first-child::before {
  content: ""; display: inline-block; width: 5px; height: 1.05em; border-radius: 3px;
  background: var(--red); margin-right: .55rem; vertical-align: -.16em;
}
.ks-app.ks-np .panel-h > span + span { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }
.ks-app.ks-np .panel-b { padding: 1.15rem; }

/* ---------------------------------------------------------------
   Schaltflächen (wie .btn-primary des Templates: Pillenform)
--------------------------------------------------------------- */
.ks-app.ks-np .btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.3;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  box-shadow: none;
  transform: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ks-app.ks-np .btn:hover:not([disabled]) { transform: none; box-shadow: none; border-color: var(--red); color: var(--red); }
.ks-app.ks-np .btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.ks-app.ks-np .btn.primary:hover:not([disabled]) {
  background: color-mix(in srgb, var(--red) 85%, #000);
  border-color: color-mix(in srgb, var(--red) 85%, #000);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--red) 30%, transparent);
}
.ks-app.ks-np .btn.primary:active:not([disabled]) { background: color-mix(in srgb, var(--red) 75%, #000); }
.ks-app.ks-np .btn.sm { font-family: var(--sans); font-weight: 600; font-size: .8rem; padding: .38rem .85rem; }
.ks-app.ks-np .btn[disabled] { opacity: .45; }
.ks-app.ks-np .btn.rec { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* ---------------------------------------------------------------
   Formularelemente (wie .form-control/.form-select des Templates)
--------------------------------------------------------------- */
.ks-app.ks-np .label {
  font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
}
.ks-app.ks-np .label output { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.ks-app.ks-np .hint { font-size: .8rem; color: var(--ink-2); }
.ks-app.ks-np input[type=number],
.ks-app.ks-np input[type=text],
.ks-app.ks-np input[type=password],
.ks-app.ks-np input[type=url],
.ks-app.ks-np textarea,
.ks-app.ks-np select {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ks-r-sm);
}
.ks-app.ks-np input[type=number]:focus,
.ks-app.ks-np input[type=text]:focus,
.ks-app.ks-np input[type=password]:focus,
.ks-app.ks-np textarea:focus,
.ks-app.ks-np select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--red) 20%, transparent);
}
.ks-app.ks-np input[type=color] { border-radius: var(--ks-r-sm); border-color: var(--line); background: var(--card); }
.ks-app.ks-np input[type=range] { accent-color: var(--red); }

.ks-app.ks-np .chip,
.ks-app.ks-np .seg button,
.ks-app.ks-np .icos label {
  font-family: var(--sans); font-weight: 600; font-size: .8rem;
  background: var(--card); color: var(--ink); border-color: var(--line);
}
.ks-app.ks-np .chip { border-radius: var(--ks-r-sm); }
.ks-app.ks-np .chip:hover { border-color: var(--red); color: var(--red); }
.ks-app.ks-np .chip[aria-pressed=true],
.ks-app.ks-np .seg button[aria-pressed=true] { background: var(--red); border-color: var(--red); color: #fff; }
.ks-app.ks-np .seg { border-radius: var(--ks-r-sm); border-color: var(--line); background: var(--card); }
.ks-app.ks-np .seg button { color: var(--ink-2); }
.ks-app.ks-np .seg button + button { border-left-color: var(--line); }
.ks-app.ks-np .icos label { border-radius: 999px; }

/* ---------------------------------------------------------------
   Ablageflächen, Listen, Hinweise
--------------------------------------------------------------- */
.ks-app.ks-np .drop,
.ks-app.ks-np .st-photo-drop,
.ks-app.ks-np .sc-drop {
  border: 2px dashed var(--line);
  border-radius: var(--ks-r);
  background: var(--paper);
}
.ks-app.ks-np .drop:hover, .ks-app.ks-np .drop.over,
.ks-app.ks-np .st-photo-drop:hover, .ks-app.ks-np .st-photo-drop.over {
  border-color: var(--red);
  background: var(--red-soft);
}
.ks-app.ks-np .drop svg { stroke: var(--ink); }
.ks-app.ks-np .drop strong { font-family: var(--head); font-weight: 800; }
.ks-app.ks-np .drop .fmts { font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }

.ks-app.ks-np .item {
  background: var(--card); border-color: var(--line);
  border-radius: var(--ks-r); box-shadow: var(--ks-shadow);
  transition: transform .3s var(--ks-ease), box-shadow .3s;
}
.ks-app.ks-np .item:hover { box-shadow: var(--ks-shadow-lg); }
.ks-app.ks-np .thumb { border-radius: var(--ks-r-sm); border-color: var(--line); }
.ks-app.ks-np .name { font-family: var(--head); font-weight: 700; }
.ks-app.ks-np .facts { font-family: var(--sans); font-size: .78rem; color: var(--ink-2); }
.ks-app.ks-np .badge {
  font-family: var(--sans); font-weight: 800; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: .2rem .55rem; background: var(--paper); color: var(--ink); line-height: 1.3;
}
.ks-app.ks-np .badge.out { background: var(--red); color: #fff; }
.ks-app.ks-np .badge.cut { background: var(--red-soft); color: var(--red); }
.ks-app.ks-np .status { font-family: var(--sans); font-size: .78rem; font-weight: 600; }
.ks-app.ks-np .x:hover { color: var(--red); }
.ks-app.ks-np .bar, .ks-app.ks-np .pbar { border-radius: 999px; background: var(--paper); border-color: var(--line); }
.ks-app.ks-np .bar i, .ks-app.ks-np .pbar i { background: var(--red); border-radius: 999px; }

.ks-app.ks-np .empty {
  font-family: var(--sans); font-size: .875rem; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--ks-r); background: var(--card);
}
.ks-app.ks-np .notice {
  font-size: .875rem; border-radius: 0 var(--ks-r-sm) var(--ks-r-sm) 0;
  background: var(--red-soft); border-left: 4px solid var(--red);
}
.ks-app.ks-np .notice.info { background: var(--paper); border-left-color: var(--ink-2); }
.ks-app.ks-np code, .ks-app.ks-np .kbd, .ks-app.ks-np .k {
  font-family: var(--mono); background: var(--paper); border-color: var(--line); border-radius: 4px; color: var(--ink);
}

.ks-app.ks-np footer {
  font-family: var(--sans); font-size: .78rem; color: var(--ink-2);
  border-top: 1px solid var(--line); margin-top: var(--np-gap, 24px);
}

/* Schachbrett hinter transparenten Bildern */
.ks-app.ks-np .thumb,
.ks-app.ks-np .modal-in img {
  background: conic-gradient(var(--ks-chk1) 25%, var(--ks-chk2) 0 50%, var(--ks-chk1) 0 75%, var(--ks-chk2) 0) 0 0 / 12px 12px;
}
.ks-app.ks-np .ed-stage {
  background: conic-gradient(var(--ks-chk1) 25%, var(--ks-chk2) 0 50%, var(--ks-chk1) 0 75%, var(--ks-chk2) 0) 0 0 / 20px 20px;
}

/* ---------------------------------------------------------------
   Dialoge, Freistell-Editor, Meldungen
--------------------------------------------------------------- */
.ks-app.ks-np .modal { background: rgba(5, 8, 14, .62); backdrop-filter: blur(2px); }
.ks-app.ks-np .modal-in {
  background: var(--card); border: 1px solid var(--line);
  border-radius: calc(var(--ks-r) + 4px); box-shadow: var(--ks-shadow-lg); padding: 1.25rem;
}
.ks-app.ks-np .modal-in p { color: var(--ink-2); }

.ks-app.ks-np .ed { background: var(--np-bg, #f4f5f8); }
.ks-app.ks-np .ed-top { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--ks-shadow); }
.ks-app.ks-np .ed-title { font-family: var(--head); font-weight: 800; }
.ks-app.ks-np .ed-status { font-family: var(--sans); }
.ks-app.ks-np .ed-side { background: var(--card); border-left-color: var(--line); }
.ks-app.ks-np .ed-load { background: color-mix(in srgb, var(--card) 88%, transparent); }
.ks-app.ks-np .ed-load-t { font-family: var(--head); font-weight: 800; }
.ks-app.ks-np .ed-load-s, .ks-app.ks-np .ed-count { font-family: var(--sans); }
.ks-app.ks-np .tool-add[aria-pressed=true] { background: var(--red) !important; }

.ks-app.ks-np .toast {
  background: var(--np-nav-bg, #0f1420);
  color: var(--np-nav-text, #e8eaf0);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.25rem;
  box-shadow: var(--ks-shadow-lg);
}

/* ---------------------------------------------------------------
   Studio-Claude
--------------------------------------------------------------- */
.ks-app.ks-np .st-step {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.55rem; height: 1.55rem; margin-right: .55rem; padding: 0; vertical-align: -.1em;
  background: var(--red); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .75rem; letter-spacing: 0;
  border-radius: 50%;
}
/* Schritt-Nummer ersetzt den Akzentbalken */
.ks-app.ks-np .panel-h > span:first-child:has(.st-step)::before { display: none; }
.ks-app.ks-np .st-conn { font-family: var(--sans); font-weight: 600; border-radius: var(--ks-r-sm); }
.ks-app.ks-np .st-stage, .ks-app.ks-np .sc-stage { border-radius: var(--ks-r); overflow: hidden; }
.ks-app.ks-np #stLog { border-radius: var(--ks-r-sm); }
.ks-app.ks-np .st-scene, .ks-app.ks-np .st-board-scene { border-radius: var(--ks-r-sm); }
.ks-app.ks-np .st-tpl-sb, .ks-app.ks-np .st-tpl-m {
  background: var(--card); border-color: var(--line); border-radius: var(--ks-r-sm);
  transition: border-color .2s, box-shadow .2s, transform .3s var(--ks-ease);
}
.ks-app.ks-np .st-tpl-sb:hover, .ks-app.ks-np .st-tpl-m:hover { border-color: var(--red); box-shadow: var(--ks-shadow); transform: translateY(-2px); }
.ks-app.ks-np .st-tpl-sb b, .ks-app.ks-np .st-tpl-m b { font-family: var(--head); font-weight: 700; }
.ks-app.ks-np .st-tpl-sb em, .ks-app.ks-np .st-tpl-m span { font-family: var(--sans); }
.ks-app.ks-np .st-tpl-m img, .ks-app.ks-np .st-tpl-m video { border-radius: calc(var(--ks-r-sm) - 3px); }
.ks-app.ks-np .st-tpl-del { background: var(--card); border-color: var(--line); }
.ks-app.ks-np .st-tpl-del:hover { color: var(--red); border-color: var(--red); }
.ks-app.ks-np .st-tpl-prog { border-radius: 999px; border-color: var(--line); background: var(--paper); }
.ks-app.ks-np .st-tpl-prog div { background: color-mix(in srgb, var(--red) 30%, var(--card)); }
.ks-app.ks-np .st-tpl-prog span { font-family: var(--sans); font-weight: 600; }
.ks-app.ks-np #stTplPanel.over .panel-b { outline-color: var(--red); }

/* ---------------------------------------------------------------
   Schnitt
--------------------------------------------------------------- */
.ks-app.ks-np .sc-time { font-family: var(--sans); font-weight: 700; }
.ks-app.ks-np .sc-track { border-radius: 999px; }
.ks-app.ks-np .sc-sel { background: color-mix(in srgb, var(--red) 28%, transparent); border-color: var(--red); }
.ks-app.ks-np #scScrub { accent-color: var(--red); }