/**
 * Design Tokens - v2 Renderer
 * Minimale, saubere Kopie der produktiven Tokens
 */

@font-face {
  font-family: 'Avenir';
  src: local('Avenir');
  font-weight: 400;
}
@font-face {
  font-family: 'Avenir';
  src: local('Avenir');
  font-weight: 700;
}

:root {
  /* Colors */
  --color-primary: #21588F;
  --color-primary-hover: #1A4773;
  --color-primary-light: #3A6BA3;
  --color-secondary: #966489;
  --color-secondary-hover: #7a536f;
  --color-accent: #3d6911;
  --color-accent-hover: #2F5209;

  /* Headings */
  --color-h1: #2F6592;
  --color-h2: #966489;
  --color-h3: var(--color-primary);

  /* Text */
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  /* Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;

  /* Borders */
  --color-border: #d0d0d0;
  --color-border-light: #e9ecef;
  --color-border-medium: #dee2e6;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-text: #333333;

  /* Semantic Colors */
  --color-error: #dc3545;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;

  /* Typography */
  --font-family-base: 'Avenir', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  /* Responsive Heading Sizes */
  --font-size-h1: clamp(1.75rem, 8vw, 2.8rem);
  --font-size-h2: clamp(1.4rem, 6vw, 2.1rem);
  --font-size-h3: clamp(1.05rem, 4vw, 1.575rem);

  /* Font Sizes */
  --font-size-sm: 0.875rem;
  --font-size-md: 1.2rem;
  --font-size-lg: 1.25rem;

  /* Line Heights */
  --line-height-base: 1.8;
  --line-height-h1: 1.15;
  --line-height-h2: 1.2;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  /* Layout */
  --max-width: 96ch;
}

/* Dark mode: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-bg-tertiary: #404040;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #d4d4d4;
    --color-text-muted: #a8a8a8;
    --color-h1: #7fa8d1;
    --color-h2: #c794bb;
    --color-h3: #6b9bd3;
    --color-primary: #4a7ba7;
    --color-primary-hover: #5a8bb7;
    --color-primary-light: #6b9bd3;
    --color-secondary: #c794bb;
    --color-secondary-hover: #d4a9cc;
    --color-accent: #7db33f;
    --color-border: #555555;
    --color-border-light: #404040;
    --color-border-medium: #555555;
    --color-surface: #2d2d2d;
    --color-text: #f5f5f5;
    --color-error: #e5737e;
    --color-error-bg: #3d1f23;
    --color-error-text: #f5b7bd;
    --color-warning-bg: #3d3520;
    --color-warning-text: #f5e0a0;
    --color-success-bg: #1f3d24;
    --color-success-text: #a8d5b0;
    --color-info-bg: #1f333d;
    --color-info-text: #a0d4e0;
  }
}

/* Dark mode: manual override */
[data-theme="dark"] {
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #404040;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #a8a8a8;
  --color-h1: #7fa8d1;
  --color-h2: #c794bb;
  --color-h3: #6b9bd3;
  --color-primary: #4a7ba7;
  --color-primary-hover: #5a8bb7;
  --color-primary-light: #6b9bd3;
  --color-secondary: #c794bb;
  --color-secondary-hover: #d4a9cc;
  --color-accent: #7db33f;
  --color-border: #555555;
  --color-border-light: #404040;
  --color-border-medium: #555555;
  --color-surface: #2d2d2d;
  --color-text: #f5f5f5;
  --color-error: #e5737e;
  --color-error-bg: #3d1f23;
  --color-error-text: #f5b7bd;
  --color-warning-bg: #3d3520;
  --color-warning-text: #f5e0a0;
  --color-success-bg: #1f3d24;
  --color-success-text: #a8d5b0;
  --color-info-bg: #1f333d;
  --color-info-text: #a0d4e0;
}

/* Light mode: manual override */
[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-h1: #2F6592;
  --color-h2: #966489;
  --color-h3: var(--color-primary);
  --color-primary: #21588F;
  --color-primary-hover: #1A4773;
  --color-primary-light: #3A6BA3;
  --color-secondary: #966489;
  --color-secondary-hover: #7a536f;
  --color-accent: #3d6911;
  --color-border: #d0d0d0;
  --color-border-light: #e9ecef;
  --color-border-medium: #dee2e6;
  --color-surface: #ffffff;
  --color-text: #333333;
  --color-error: #dc3545;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;
}
/**
 * Style - v2 Renderer
 * Typografie, Code, Links, Listen, Blockquote, Tables, Terminal, Contracts
 */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 700;
  color: var(--color-h1);
  margin-top: var(--space-8);
  margin-bottom: var(--space-16);
  text-align: center;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 700;
  color: var(--color-h2);
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  text-align: left;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  text-align: left;
}

/* Text */
p {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
}

strong { font-weight: 700; }

/* Links */
a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-primary-hover); }

/* Lists */
ul {
  list-style: square;
  padding-left: var(--space-8);
  padding-bottom: var(--space-4);
}

ol {
  padding-left: var(--space-8);
  padding-bottom: var(--space-4);
}

ul li, ol li { font-size: var(--font-size-md); margin-bottom: var(--space-2); }

/* Inline Code */
code {
  font-family: var(--font-family-mono);
  background: var(--color-bg-tertiary);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-md);
  font-size: 0.9em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Code Blocks: Terminal-Style (Light Mode) */
pre {
  display: block;
  background: #fafafa;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  margin: var(--space-6) 0;
  font-family: var(--font-family-mono);
  font-size: 0.85em;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: var(--space-4);
  white-space: pre;
  overflow-x: auto;
  color: #3a3a3a;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

/* Terminal Window — Light default, Dark via [data-theme] */
.terminal-window {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  margin: var(--space-6) 0;
  font-family: var(--font-family-mono);
}
.terminal-header {
  background: linear-gradient(180deg, #f5f5f5, #e8e8e8);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d0d0d0;
  color: #666;
  font-size: 13px;
  text-align: center;
}
.terminal-header::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  margin-right: 48px;
  flex-shrink: 0;
}
.terminal-window > pre {
  margin: 0; padding: 20px; border: none; box-shadow: none;
  background: #fafafa; color: #3a3a3a; white-space: pre;
  overflow-x: auto; border-radius: 0;
  font-size: 0.85em; line-height: 1.5;
}
.terminal-window > pre code {
  background: none; padding: 0; border-radius: 0; font-size: inherit;
}

/* Terminal Colors */
.term-green { color: #2e7d32; }
.term-red { color: #c62828; }
.term-yellow { color: #f9a825; }
.term-blue { color: #1565c0; }
.term-cyan { color: #00838f; }
.term-white { color: #1a1a1a; }
.term-dim { color: #9e9e9e; }
.term-bold { font-weight: 600; color: #1a1a1a; }

/* Collapsible Terminal */
.terminal-window details { margin: 0; }
.terminal-window details summary {
  cursor: pointer; padding: 12px 20px; background: #f0f0f0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #555;
}
.terminal-window details summary::-webkit-details-marker { display: none; }
.terminal-window details summary::before { content: "\25B6"; font-size: 10px; transition: transform 0.2s ease; }
.terminal-window details[open] summary::before { transform: rotate(90deg); }
.terminal-window details summary:hover { background: #e8e8e8; }

/* Dark Mode: pre blocks */
[data-theme="dark"] pre {
  background: #1e1e1e;
  border-color: var(--color-border-medium);
  color: #d4d4d4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Dark Mode: Terminal */
[data-theme="dark"] .terminal-window {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .terminal-header {
  background: linear-gradient(180deg, #3d3d3d, #2d2d2d);
  border-bottom-color: var(--color-border-medium);
  color: var(--color-text-muted);
}
[data-theme="dark"] .terminal-window > pre { background: var(--color-bg-primary); color: #d4d4d4; }
[data-theme="dark"] .term-green { color: #4ec9b0; }
[data-theme="dark"] .term-red { color: #f14c4c; }
[data-theme="dark"] .term-yellow { color: #dcdcaa; }
[data-theme="dark"] .term-blue { color: #569cd6; }
[data-theme="dark"] .term-cyan { color: #9cdcfe; }
[data-theme="dark"] .term-dim { color: #6a6a6a; }
[data-theme="dark"] .term-bold { color: #fff; }
[data-theme="dark"] .terminal-window details summary { color: var(--color-text-secondary); background: var(--color-bg-tertiary); }
[data-theme="dark"] .terminal-window details summary:hover { background: var(--color-bg-secondary); }

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-secondary);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
th {
  font-weight: 600;
  background: var(--color-bg-secondary);
  white-space: nowrap;
}
th a { color: var(--color-text); text-decoration: none; }
th a:hover { color: var(--color-primary); }
tr:hover { background: var(--color-bg-secondary); }
.table-responsive { overflow-x: auto; }

/* Details/Summary */
details { margin-bottom: var(--space-4); }
summary { cursor: pointer; padding: var(--space-2) 0; }

/* Contract Rules */
.rule-block {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-border-medium);
}
.rule-block h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0;
}
.rule-id {
  font-family: var(--font-family-mono);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Badges */
.severity-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.severity-badge.severity-critical { background: var(--color-error-bg); color: var(--color-error-text); }
.severity-badge.severity-major { background: var(--color-warning-bg); color: var(--color-warning-text); }
.severity-badge.severity-minor { background: var(--color-info-bg); color: var(--color-info-text); }
.severity-badge.severity-info { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

.type-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}
.type-badge.type-forbidden { background: var(--color-error-bg); color: var(--color-error-text); }
.type-badge.type-required { background: var(--color-success-bg); color: var(--color-success-text); }
.type-badge.type-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* Fix Suggestion */
.fix-suggestion {
  margin-top: var(--space-4);
  padding: 0.75rem 1rem;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

/* Rule Pattern */
.rule-pattern { margin-top: var(--space-4); }
.rule-pattern strong {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}

/* Contract TOC */
.toc-contracts { list-style: none; padding: 0; }
.toc-contracts > li { margin-bottom: var(--space-4); }
.toc-rules { list-style: none; padding-left: var(--space-6); margin-top: var(--space-2); }
.toc-rules li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0;
}
.toc-count { color: var(--color-text-muted); font-size: 0.85rem; }
.toc-severity {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
}
.toc-severity-critical { background: var(--color-error-bg); color: var(--color-error-text); }
.toc-severity-major { background: var(--color-warning-bg); color: var(--color-warning-text); }
.toc-severity-minor { background: var(--color-info-bg); color: var(--color-info-text); }
.toc-severity-info { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

/* Utility */
.text-muted { color: var(--color-text-muted); }

/* Images */
img { max-width: 100%; height: auto; }

/* Footer */
.site-footer {
  max-width: var(--max-width);
  margin: var(--space-16) auto 0;
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 400;
}

.site-footer a:hover { color: var(--color-primary); }
.site-footer .sep { color: var(--color-border); }

/* Mobile */
@media (max-width: 640px) {
  .site-footer {
    font-size: 0.7rem;
    gap: 0.6rem;
  }
}

@media (max-width: 768px) {
  .terminal-window > pre { padding: 15px; font-size: 11px; }
}
/**
 * Navigation - v2 Renderer
 * SVG Icons als CSS mask-image (erben Textfarbe via currentColor)
 */

.nav-link {
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-fast);
}

.nav-link:hover { color: var(--color-primary); }
.nav-link.is-active { color: var(--color-primary); font-weight: 600; }

/* Icon Base */
.nav-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

/* Icons als data URI */
.nav-icon--karlscore {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7' stroke-dasharray='4 2'/%3E%3Ccircle cx='12' cy='12' r='10' stroke-opacity='.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7' stroke-dasharray='4 2'/%3E%3Ccircle cx='12' cy='12' r='10' stroke-opacity='.5'/%3E%3C/svg%3E");
}

.nav-icon--ki-gemeinschaft {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='17' r='2.5'/%3E%3Ccircle cx='19' cy='17' r='2.5'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M8 14l4 0'/%3E%3Cpath d='M16 14l-4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='17' r='2.5'/%3E%3Ccircle cx='19' cy='17' r='2.5'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M8 14l4 0'/%3E%3Cpath d='M16 14l-4 0'/%3E%3C/svg%3E");
}

.nav-icon--ki-wissen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 3L2 9l10 6 10-6-10-6z'/%3E%3Cpath d='M2 17l10 6 10-6'/%3E%3Cpath d='M2 13l10 6 10-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 3L2 9l10 6 10-6-10-6z'/%3E%3Cpath d='M2 17l10 6 10-6'/%3E%3Cpath d='M2 13l10 6 10-6'/%3E%3C/svg%3E");
}

.nav-icon--systemisch-denken {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='8' cy='19' r='2'/%3E%3Ccircle cx='16' cy='19' r='2'/%3E%3Cpath d='M10.5 6.5L6.5 10.5M13.5 6.5L17.5 10.5M6.5 13.5L8 17M17.5 13.5L16 17M10 19h4' stroke-opacity='.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='8' cy='19' r='2'/%3E%3Ccircle cx='16' cy='19' r='2'/%3E%3Cpath d='M10.5 6.5L6.5 10.5M13.5 6.5L17.5 10.5M6.5 13.5L8 17M17.5 13.5L16 17M10 19h4' stroke-opacity='.6'/%3E%3C/svg%3E");
}

.nav-icon--erstgespraech {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.nav-icon--anmelden {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}

.nav-icon--abmelden {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.nav-icon--start {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.nav-icon--profil {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.nav-icon--termine {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.nav-icon--chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
}

.nav-icon--forum {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E");
}

.nav-icon--videos {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}

.nav-icon--beratung {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Mobile Toggle */
.mobile-menu-toggle {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  cursor: pointer;
}

/* Mobile Dropdown */
.mobile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 1001;
  padding: var(--space-2) 0;
  display: none;
}

.mobile-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-md);
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

.mobile-dropdown a:last-child { border-bottom: none; }
.mobile-dropdown a:hover { background: var(--color-bg-secondary); }

.mobile-dropdown .nav-icon { width: 20px; height: 20px; }

/* Dark Mode */
[data-theme="dark"] .mobile-dropdown {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .mobile-menu-toggle {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
/**
 * Boxes - v2 Renderer
 * Fenced-Div Farbvarianten: :::callout :::info :::warning :::danger :::highlight :::note
 * HSL-Pattern aus ki-seminar.karlkratz.de
 */

/* === Base === */
.callout, .info, .warning, .danger, .highlight, .note {
  padding: 1.25rem 1.5rem;
  border: 1px solid;
  border-radius: var(--radius-lg);
  margin: var(--space-4, 1rem) 0;
}

.callout p:last-child,
.info p:last-child,
.warning p:last-child,
.danger p:last-child,
.highlight p:last-child,
.note p:last-child {
  margin-bottom: 0;
}

.callout strong,
.info strong,
.warning strong,
.danger strong,
.highlight strong,
.note strong {
  display: inline;
}

/* === Gruen (Hinweis, Tipp) === */
.callout {
  background: hsl(145, 40%, 95%);
  border-color: hsl(145, 35%, 85%);
}
.callout strong { color: hsl(145, 50%, 30%); }

/* === Blau (Information) === */
.info {
  background: hsl(210, 40%, 95%);
  border-color: hsl(210, 35%, 85%);
}
.info strong { color: hsl(210, 50%, 35%); }

/* === Gelb (Warnung) === */
.warning {
  background: hsl(45, 80%, 95%);
  border-color: hsl(45, 80%, 70%);
}
.warning strong { color: hsl(45, 80%, 30%); }

/* === Rot (Fehler, kritisch) === */
.danger {
  background: hsl(0, 60%, 97%);
  border-color: hsl(0, 60%, 85%);
}
.danger strong { color: hsl(0, 60%, 35%); }

/* === Rosa (Brand-Hervorhebung) === */
.highlight {
  background: hsl(330, 40%, 95%);
  border-color: hsl(330, 35%, 85%);
}
.highlight strong { color: hsl(330, 50%, 35%); }

/* === Grau (Nebeninfo) === */
.note {
  background: var(--color-bg-secondary, #f8f9fa);
  border-color: var(--color-border, #d0d0d0);
}
.note strong { color: var(--color-text-primary, #111); }

/* === Dark Mode === */
[data-theme="dark"] .callout {
  background: hsl(145, 25%, 15%);
  border-color: hsl(145, 20%, 25%);
}
[data-theme="dark"] .callout strong { color: hsl(145, 45%, 65%); }

[data-theme="dark"] .info {
  background: hsl(210, 25%, 15%);
  border-color: hsl(210, 20%, 25%);
}
[data-theme="dark"] .info strong { color: hsl(210, 45%, 65%); }

[data-theme="dark"] .warning {
  background: hsl(45, 40%, 15%);
  border-color: hsl(45, 35%, 30%);
}
[data-theme="dark"] .warning strong { color: hsl(45, 70%, 65%); }

[data-theme="dark"] .danger {
  background: hsl(0, 30%, 15%);
  border-color: hsl(0, 30%, 28%);
}
[data-theme="dark"] .danger strong { color: hsl(0, 55%, 65%); }

[data-theme="dark"] .highlight {
  background: hsl(330, 25%, 15%);
  border-color: hsl(330, 20%, 25%);
}
[data-theme="dark"] .highlight strong { color: hsl(330, 45%, 70%); }

[data-theme="dark"] .note {
  background: var(--color-bg-secondary, #2d2d2d);
  border-color: var(--color-border, #555);
}
.toc {
  background: var(--color-surface);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.toc strong {
  display: block;
  margin-bottom: var(--spacing-sm);
}

.toc ol {
  padding-left: var(--spacing-md);
}

.toc li {
  margin-bottom: var(--spacing-xs);
}

.toc-level-3 {
  padding-left: var(--spacing-md);
}

.toc a {
  color: var(--color-text);
  font-size: 0.9rem;
}

.toc a:hover {
  color: var(--color-primary);
}
/**
 * Artefakte Content Styles - v2 Renderer
 * Styles fuer migrierte Artefakte-Seiten, basierend auf V2 Design Tokens
 */

/* === Layout === */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.text-left { text-align: left; }
.text-center { text-align: center; }

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 0.7em 1.2em;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-md);
  transition: background-color var(--transition-normal);
  cursor: pointer;
  line-height: 1.4;
}

.btn-green {
  background: var(--color-accent);
  color: #fff;
}
.btn-green:hover {
  background: var(--color-accent-hover);
  color: #fff;
}

.btn-blue {
  background: var(--color-primary);
  color: #fff;
}
.btn-blue:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* === Insight Boxes === */
.insight-box {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: var(--space-4) 0;
  border: 1px solid;
}

.insight-box p:last-child { margin-bottom: 0; }

.insight-box.success {
  background: hsl(145, 40%, 95%);
  border-color: hsl(145, 35%, 85%);
}
.insight-box.success strong { color: hsl(145, 50%, 30%); }

.insight-box.primary {
  background: hsl(210, 40%, 95%);
  border-color: hsl(210, 35%, 85%);
}
.insight-box.primary strong { color: hsl(210, 50%, 35%); }

.insight-box.warning {
  background: hsl(45, 80%, 95%);
  border-color: hsl(45, 80%, 70%);
}
.insight-box.warning strong { color: hsl(45, 80%, 30%); }

.insight-box.error {
  background: hsl(0, 60%, 97%);
  border-color: hsl(0, 60%, 85%);
}
.insight-box.error strong { color: hsl(0, 60%, 35%); }

/* Details/Summary in Insight Boxes */
details.insight-box { cursor: pointer; }
details.insight-box summary { list-style: none; }
details.insight-box summary::-webkit-details-marker { display: none; }

.insight-summary {
  font-weight: 600;
  font-size: var(--font-size-md);
}

.insight-details {
  margin-top: var(--space-4);
}

.insight-flexbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.insight-box.static { cursor: default; }

/* === Article Grid === */
.article-grid {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-8) 0;
}

@media (min-width: 769px) {
  .article-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.article-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
}

.article-card:hover {
  box-shadow: var(--shadow-md);
}

.article-image {
  position: relative;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-image-link,
.article-title-link {
  text-decoration: none;
}

.article-content {
  padding: var(--space-4);
  flex: 1;
}

.article-content h3 {
  margin-top: 0;
}

.article-marker {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.article-marker.gelesen {
  background: var(--color-accent);
}

/* === Content Switching (div-selector) === */
.div-selector {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

.div-selector button,
.div-selector [data-toggle] {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  font-family: var(--font-family-base);
  transition: all var(--transition-fast);
}

.div-selector button:hover,
.div-selector [data-toggle]:hover {
  background: var(--color-bg-tertiary);
}

.div-selector button.active,
.div-selector [data-toggle].active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.content-div {
  display: none;
}

.content-div.active {
  display: block;
}

/* === Utilities === */
.seminar-spacing {
  margin-top: var(--space-8);
}

/* === Glossar Term Link === */
.glossar-term {
  border-bottom: 1px dotted var(--color-primary);
  text-decoration: none;
}

.glossar-term:hover {
  border-bottom-style: solid;
}

/* === Dark Mode Artefakte === */
[data-theme="dark"] .insight-box.success {
  background: hsl(145, 25%, 15%);
  border-color: hsl(145, 20%, 25%);
}
[data-theme="dark"] .insight-box.success strong { color: hsl(145, 45%, 65%); }

[data-theme="dark"] .insight-box.primary {
  background: hsl(210, 25%, 15%);
  border-color: hsl(210, 20%, 25%);
}
[data-theme="dark"] .insight-box.primary strong { color: hsl(210, 45%, 65%); }

[data-theme="dark"] .insight-box.warning {
  background: hsl(45, 40%, 15%);
  border-color: hsl(45, 35%, 30%);
}
[data-theme="dark"] .insight-box.warning strong { color: hsl(45, 70%, 65%); }

[data-theme="dark"] .insight-box.error {
  background: hsl(0, 30%, 15%);
  border-color: hsl(0, 30%, 28%);
}
[data-theme="dark"] .insight-box.error strong { color: hsl(0, 55%, 65%); }

[data-theme="dark"] .article-card {
  border-color: var(--color-border);
}

[data-theme="dark"] .btn-green {
  background: var(--color-accent);
}

[data-theme="dark"] .btn-blue {
  background: var(--color-primary);
}

.merkliste-link,.sysebook-impulse-tasks__footer{display:none}