/*
 * DECAID Academy: gemeinsame Design-Tokens und Academy-Stil fuer alle Ressourcen-Seiten.
 * Angeglichen an die Langdock Academy (langdock.decaid.academy): Satoshi, Primaer #2a81bb,
 * Seite #f7f5fa, Text #121212, Kartenrand #ede8f4, Karten weiss mit Radius 16, Buttons Radius 10.
 *
 * Wird im <head> NACH dem Inline-<style> der Seite geladen und gewinnt darum bei gleicher
 * Spezifitaet. Variablennamen (--purple*, --accent*, --off-*, --neutral-*, --radius-*,
 * --font-primary) bleiben historisch, damit alle Inline-Styles weiter greifen.
 * Akzentfarbe per ?accent=HEX setzt /_assets/embed.js (html:root, hoehere Spezifitaet).
 */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

:root {
  --purple: #2a81bb;
  --purple-hover: #1f6a9d;
  --purple-50: color-mix(in srgb, var(--purple) 6%, white);
  --purple-100: color-mix(in srgb, var(--purple) 13%, white);
  --purple-200: color-mix(in srgb, var(--purple) 30%, white);
  --purple-300: color-mix(in srgb, var(--purple) 60%, white);
  --purple-400: color-mix(in srgb, var(--purple) 70%, white);
  --purple-600: color-mix(in srgb, var(--purple), black 18%);
  --purple-700: color-mix(in srgb, var(--purple), black 32%);
  --purple-800: color-mix(in srgb, var(--purple), black 50%);
  --purple-900: color-mix(in srgb, var(--purple), black 68%);
  --accent: var(--purple);
  --accent-50: var(--purple-50);
  --accent-100: var(--purple-100);
  --accent-200: var(--purple-200);
  --accent-600: var(--purple-600);
  --accent-700: var(--purple-700);

  --off-black: #121212;
  --off-white: #ffffff;
  --paper: #ffffff;
  --page-bg: #f7f5fa;
  --line: #ede8f4;
  --tag-bg: #ede8f4;

  --neutral-100: #f3f0f8;
  --neutral-200: #ede8f4;
  --neutral-300: #cfc8da;
  --neutral-400: #8c8696;
  --neutral-500: #5f5a68;
  --neutral-600: #45404d;
  --neutral-700: #2b2832;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --shadow-1: none;
  --shadow-2: 0 4px 16px rgba(29,37,45,.06);
  --shadow-3: 0 12px 40px rgba(29,37,45,.10);
  --shadow-hover: 0 12px 40px rgba(29,37,45,.10);

  --font-primary: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-editorial: 'Satoshi', 'Inter', system-ui, sans-serif;
}

/* ---------- Basis ---------- */
html body {
  font-family: var(--font-primary);
  background: var(--page-bg);
  color: var(--off-black);
  -webkit-font-smoothing: antialiased;
}
body::before { display: none !important; }
h1, h2 { font-family: var(--font-primary); letter-spacing: -0.015em; }
a { color: var(--purple); }
a:hover { color: var(--purple-hover); }
::selection { background: var(--purple-100); }

/* ---------- Guide-Shell (Kopfzeile, Seitenleiste, Abschnittskarten) ---------- */
.site-header { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header h1, .site-header .brand-title { font-weight: 900; }
.sidebar { background: #fff; border-right: 1px solid var(--line); }
.nav-item { border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-right: 12px; }
.content-inner { max-width: 960px; }
.section-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: box-shadow .2s ease, opacity .35s ease;
}
.section-card:hover { box-shadow: var(--shadow-hover); }
.section-card.collapsed { opacity: .75; }
.card-title-row h2, .section-card h2 { font-weight: 900; letter-spacing: -0.015em; }
.section-number { background: var(--purple-100); color: var(--purple); font-weight: 900; }
.part-header { color: var(--purple); letter-spacing: .08em; }
.card-body h3 { font-weight: 700; }
.code-block { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page-bg); }
.code-header { background: #fff; border-bottom: 1px solid var(--line); }
.code-badge { border-radius: 999px; }
.badge-template, .badge-prompt { background: var(--tag-bg); color: var(--purple); }
.card-body code { background: var(--tag-bg); color: var(--purple-700); border-radius: var(--radius-sm); }
.key-message { background: var(--purple-50); border-left-color: var(--purple); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.key-message p { color: var(--off-black); font-style: normal; }
.cost-warning, .success-signal, .stub-note { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.model-table th { background: var(--page-bg); color: var(--off-black); font-weight: 700; }
.model-table td { border-bottom-color: var(--line); }
.progress-tracker { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-footer { border-top-color: var(--line); }
.search-modal { border-radius: var(--radius-lg); }
.search-kbd-btn, .toggle-all-btn, .lang-switch {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--neutral-500);
}
.search-kbd-btn:hover, .toggle-all-btn:hover, .lang-switch:hover { background: var(--purple-50); color: var(--purple); border-color: var(--purple-200); }

/* ---------- Knoepfe ---------- */
.copy-btn, .download-btn, .dl-btn, .btn-primary {
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: 700;
}
.copy-btn:hover, .download-btn:hover, .dl-btn:hover { background: var(--purple-hover); }
.copy-btn.copied { background: var(--green, #0fa25b); }
.scroll-top-fab, .back-to-top { box-shadow: var(--shadow-2); }

/* ---------- Bibliotheks-Karten, Filter, Tags ---------- */
.card, .prompt-row, .ci-card, .vorlage-card, .vorlage, .template-card, .skill-card, .provider, .tool-card, .myth-card, .guide-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
}
.card:hover, .prompt-row:hover, .vorlage-card:hover, .skill-card:hover, .template-card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-hover);
  transform: none;
}
.card.open { border-color: var(--purple-200); box-shadow: var(--shadow-hover); }
.card-title { font-weight: 700; letter-spacing: -0.01em; }
.controls { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.search-input { border-color: var(--line); border-radius: var(--radius-md); background: #fff; }
.tag-pill, .cat-pill, .filter-tag, .chip, .filter-btn, .filter-pill {
  border-radius: 999px;
}
.tag-pill { background: #fff; border-color: var(--line); color: var(--neutral-600); }
.tag-pill:hover { background: var(--tag-bg); color: var(--purple); border-color: var(--tag-bg); }
.tag-pill.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.card-label-pill, .prompt-badge, .feature-pill { background: var(--tag-bg); color: var(--purple); border-radius: 999px; }
.foot { border-top-color: var(--line); }

/* ---------- Bibliotheks-Hero (Standalone): hell mit Keyvisual statt dunklem Verlauf ---------- */
.hero:has(> .hero-content) {
  background:
    linear-gradient(90deg, #fff 0%, #fff 45%, rgba(255,255,255,.6) 62%, rgba(255,255,255,0) 80%),
    url('https://decaid.de/assets/prismatic-ui/pui-0004.webp') right 42% / 100% auto no-repeat,
    #fff !important;
  color: var(--off-black) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.hero:has(> .hero-content)::before,
.hero:has(> .hero-content)::after { display: none !important; }
.hero:has(> .hero-content) h1 { color: var(--off-black) !important; font-weight: 900; }
.hero:has(> .hero-content) h1 .light { color: var(--neutral-400) !important; font-weight: 700; }
.hero:has(> .hero-content) p,
.hero:has(> .hero-content) .intro { color: var(--neutral-500) !important; }
.hero:has(> .hero-content) .hero-eyebrow { background: var(--tag-bg) !important; color: var(--purple) !important; border-color: transparent !important; }
.hero:has(> .hero-content) .hero-eyebrow img { filter: none !important; }
.hero:has(> .hero-content) .hero-stats,
.hero:has(> .hero-content) .hero-stats .stat { color: var(--neutral-500) !important; }
.hero:has(> .hero-content) .hero-stats strong { color: var(--off-black) !important; }
.hero:has(> .hero-content) a { color: var(--purple) !important; }
@media (max-width: 760px) {
  .hero:has(> .hero-content) { background: #fff !important; }
}
.hero-title, .hero h1 { font-weight: 900; }

/* ---------- Einbettungsmodus (iFrame oder ?branding=off) ---------- */
html.embedded { scroll-padding-top: 16px; }
html.embedded body { background: var(--page-bg); }

/* Guide-Shell: keine feste Kopfzeile, keine feste Seitenleiste, kein Fortschrittsbalken */
html.embedded .site-header {
  position: static;
  height: auto;
  min-height: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  padding: 16px 24px 0;
  max-width: 1008px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}
html.embedded .site-header .logo,
html.embedded .site-header h1,
html.embedded .site-header .brand-title,
html.embedded .site-header .edition-tag,
html.embedded .lang-switch,
html.embedded .progress-tracker,
html.embedded a.back-link[href='/'],
html.embedded a.archive-link[href='/'],
html.embedded a.back-link[href='/en/'],
html.embedded a.back-link[href='/nl/'],
html.embedded .site-footer,
html.embedded .foot { display: none !important; }
html.embedded .site-header > :last-child { margin-right: 0; }
html.embedded .content { margin: 0; padding: 16px 24px 64px; }
html.embedded .content-inner { max-width: 960px; }

/* Seitenleiste wird zur Schublade, die ueber den Knopf »Inhalt« aufgeht */
html.embedded .hamburger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 5px 12px 5px 9px;
  color: var(--off-black);
  font: 700 13px/1.4 var(--font-primary);
  cursor: pointer;
}
html.embedded .hamburger svg { width: 16px; height: 16px; }
html.embedded .hamburger::after { content: 'Inhalt'; }
html.embedded[lang='en'] .hamburger::after { content: 'Contents'; }
html.embedded[lang='nl'] .hamburger::after { content: 'Inhoud'; }
html.embedded .hamburger:hover { border-color: var(--purple-200); color: var(--purple); }
html.embedded .sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 86vw);
  transform: translateX(-105%);
  transition: transform .3s ease;
  z-index: 300;
  padding-top: 16px;
  border-right: 1px solid var(--line);
}
html.embedded .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-3); }
html.embedded .sidebar-overlay { display: none; position: fixed; inset: 0; top: 0; background: rgba(18,18,18,.25); z-index: 290; }
html.embedded .sidebar-overlay.active { display: block; }
html.embedded .toolbar-search { order: 5; flex: 1 1 260px; padding: 0; margin: 0; border: 0; background: none; }
html.embedded .toolbar-search { position: relative; }
html.embedded .toolbar-search svg { left: 12px; }
html.embedded .toolbar-search input { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding-left: 36px; }
html.embedded .search-overlay { padding-top: 8vh; }

/* Bibliotheks-Seiten: kein grosser Hero, die App hat selbst einen Kopf */
html.embedded .page { padding-top: 16px; }
html.embedded .hero {
  background: none !important;
  color: var(--off-black) !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
html.embedded .hero::before,
html.embedded .hero::after,
html.embedded .hero-eyebrow,
html.embedded .hero .eyebrow,
html.embedded .hero-visual,
html.embedded .hero-image { display: none !important; }
html.embedded .hero p,
html.embedded .hero .intro,
html.embedded .hero .lead,
html.embedded .hero-content p { color: var(--neutral-500) !important; font-size: 15px; max-width: 72ch; }
html.embedded .hero h1 { color: var(--off-black) !important; font-size: clamp(22px, 3vw, 28px) !important; font-weight: 900; margin: 0 0 6px !important; }
html.embedded .hero h1 .light, html.embedded .hero h1 span { color: var(--neutral-400) !important; }
html.embedded .hero-stats,
html.embedded .hero-stats .stat,
html.embedded .hero .meta { color: var(--neutral-500) !important; }
html.embedded .hero-stats .stat strong,
html.embedded .hero strong { color: var(--off-black) !important; }

@media (max-width: 640px) {
  html.embedded .site-header { padding: 12px 16px 0; }
  html.embedded .content { padding: 12px 16px 48px; }
}