/* Erzeugt von bin/zusammenkopieren.sh. Nicht von Hand bearbeiten. */
/* ---- shared/css/critical.css */
/* @modell /var/www/_shared_prod/web-assets/typografie.json#tokens */
:root{--font-family-base:'Avenir', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;--font-family-headings:var(--font-family-base);--font-family-mono:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;--font-sans:var(--font-family-base);--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-base:var(--font-size-ui);--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-size-h4:clamp(0.875rem, 3vw, 1.3125rem);--font-size-h5:clamp(1rem, 2.5vw, 1.2rem);--font-size-h6:clamp(0.7rem, 1.5vw, 0.875rem);--font-size-lg:var(--font-size-ui-title);--font-size-md:var(--font-size-ui);--font-size-meta:.875rem;--font-size-reading:1.2rem;--font-size-sm:var(--font-size-meta);--font-size-ui:1rem;--font-size-ui-title:1.25rem;--font-size-xl:1.5rem;--font-size-xs:var(--font-size-meta);--line-height-base:1.8;--line-height-h1:1.15;--line-height-h2:1.2;--line-height-loose:2;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-snug:1.375;--line-height-tight:1.25}
/* === Critical Layout Rules === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-base,system-ui,sans-serif);color:var(--color-text-primary,#111);background:var(--color-bg-primary,#fff);line-height:var(--line-height-base,1.8)}
.site-header{position:sticky;top:0;z-index:1000;background:var(--color-bg-primary,#fff);border-bottom:1px solid var(--color-border,#d0d0d0)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;width:100%;gap:10px;flex-wrap:wrap}
.site-header__logo{flex:0 0 auto}
.site-header__logo img{display:block;width:50px;height:50px}
.site-header__actions{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;max-width:100%}
.nav-desktop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.nav-mobile{display:none;position:relative}
.content{max-width:var(--max-width,96ch);margin:0 auto;padding:var(--space-8,2rem) var(--space-4,1rem)}
@media(max-width:1149px){.nav-desktop{display:none!important}.nav-mobile{display:block!important}}
@media(min-width:1150px){.nav-desktop{gap:2px}.nav-desktop .nav-link{font-size:var(--font-size-ui);padding:0.2rem 0.3rem}.nav-desktop .nav-icon{width:18px;height:18px}}
/* Typography roles; the article reading scale stays separate from UI text. */
[data-typografie="ui"], [data-typografie="ui"] *, [data-typografie="ui"] *::before, [data-typografie="ui"] *::after { box-sizing:border-box; }
[data-typografie="ui"] :where(main,fieldset,input,select,textarea) { min-inline-size:0;max-inline-size:100%; }
[data-typografie="ui"] { overflow-wrap:anywhere; }
.typografie-tabelle { max-inline-size:100%;overflow:auto;overflow-wrap:normal; }
.typografie-tabelle table { min-inline-size:100%;width:max-content; }
:where(button,input,select,textarea) { font-family:inherit;font-size:var(--font-size-ui);line-height:var(--line-height-normal); }
[data-typografie="ui"] { font-family:var(--font-family-base);font-size:var(--font-size-ui);line-height:var(--line-height-base); }
[data-typografie="ui"] :where(p,li,table,label,button,input,select,textarea) { font-size:var(--font-size-ui); }
[data-typografie="ui"] :where(h1,h2,h3,legend) { font-size:var(--font-size-ui-title); }
[data-typografie="ui"] :where(small,.hint,.form-hint,.field-error) { font-size:var(--font-size-meta); }

/* ---- shared/css/bundle.css */
/*@modell /var/www/_shared_prod/web-assets/typografie.json#tokens
 */

:root {
  --font-family-base:'Avenir', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-family-headings:var(--font-family-base);
  --font-family-mono:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  --font-sans:var(--font-family-base);
  --font-size-2xl:1.875rem;
  --font-size-3xl:2.25rem;
  --font-size-base:var(--font-size-ui);
  --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-size-h4:clamp(0.875rem, 3vw, 1.3125rem);
  --font-size-h5:clamp(1rem, 2.5vw, 1.2rem);
  --font-size-h6:clamp(0.7rem, 1.5vw, 0.875rem);
  --font-size-lg:var(--font-size-ui-title);
  --font-size-md:var(--font-size-ui);
  --font-size-meta:.875rem;
  --font-size-reading:1.2rem;
  --font-size-sm:var(--font-size-meta);
  --font-size-ui:1rem;
  --font-size-ui-title:1.25rem;
  --font-size-xl:1.5rem;
  --font-size-xs:var(--font-size-meta);
  --line-height-base:1.8;
  --line-height-h1:1.15;
  --line-height-h2:1.2;
  --line-height-loose:2;
  --line-height-normal:1.5;
  --line-height-relaxed:1.625;
  --line-height-snug:1.375;
  --line-height-tight:1.25;
}

:root {
  --color-button-blue:#21588F;
  --color-button-blue-hover:#1A4773;
}

/**
 * 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-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --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: var(--color-text-secondary);

  /* 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 */

  /* Responsive Heading Sizes */

  /* Font Sizes */

  /* Line Heights */

  /* 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: var(--color-text-secondary);
    --color-h1: #7fa8d1;
    --color-h2: #c794bb;
    --color-h3: #6b9bd3;
    --color-primary: #4a7ba7;
    --color-primary-hover: #5a8bb7;
    --color-primary-light: #6b9bd3;
    --color-link: #8ab4e3;
    --color-link-hover: #b0d2f2;
    --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: var(--color-text-secondary);
  --color-h1: #7fa8d1;
  --color-h2: #c794bb;
  --color-h3: #6b9bd3;
  --color-primary: #4a7ba7;
  --color-primary-hover: #5a8bb7;
  --color-primary-light: #6b9bd3;
  --color-link: #8ab4e3;
  --color-link-hover: #b0d2f2;
  --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: var(--color-text-secondary);
  --color-h1: #2F6592;
  --color-h2: #966489;
  --color-h3: var(--color-primary);
  --color-primary: #21588F;
  --color-primary-hover: #1A4773;
  --color-primary-light: #3A6BA3;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --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-reading);
  margin-bottom: var(--space-4);
}

strong { font-weight: 700; }

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

a:hover { color: var(--color-link-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-reading); 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-reading);
}
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-link); }
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: var(--font-size-meta);
  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-link); }
.site-footer .sep { color: var(--color-text-secondary); }

/* Mobile */
@media (max-width: 640px) {
  .site-footer {
    font-size: var(--font-size-meta);
    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-link); }
.nav-link.is-active { color: var(--color-link); 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-gemeinschaft-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='M4 4h6a3 3 0 013 3v13a2.5 2.5 0 00-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-6a3 3 0 00-3 3v13a2.5 2.5 0 012.5-2.5H20z'/%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='M4 4h6a3 3 0 013 3v13a2.5 2.5 0 00-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-6a3 3 0 00-3 3v13a2.5 2.5 0 012.5-2.5H20z'/%3E%3C/svg%3E");
}

.nav-icon--ki-gemeinschaft-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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5z'/%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--videoraum {
  -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='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%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='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%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--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.is-open {
  display: block;
}

.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;
}

/* === Grün (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-link);
}
/**
 * Artefakte Content Styles - v2 Renderer
 * Styles für 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-button-blue);
  color: #fff;
}
.btn-blue:hover {
  background: var(--color-button-blue-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-reading);
}

.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-button-blue);
}

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

/* Typography roles; the article reading scale stays separate from UI text. */

[data-typografie="ui"], [data-typografie="ui"] *, [data-typografie="ui"] *::before, [data-typografie="ui"] *::after { box-sizing:border-box; }

[data-typografie="ui"] :where(main,fieldset,input,select,textarea) { min-inline-size:0;max-inline-size:100%; }

[data-typografie="ui"] { overflow-wrap:anywhere; }

.typografie-tabelle { max-inline-size:100%;overflow:auto;overflow-wrap:normal; }

.typografie-tabelle table { min-inline-size:100%;width:max-content; }

:where(button,input,select,textarea) { font-family:inherit;font-size:var(--font-size-ui);line-height:var(--line-height-normal); }

[data-typografie="ui"] { font-family:var(--font-family-base);font-size:var(--font-size-ui);line-height:var(--line-height-base); }

[data-typografie="ui"] :where(p,li,table,label,button,input,select,textarea) { font-size:var(--font-size-ui); }

[data-typografie="ui"] :where(h1,h2,h3,legend) { font-size:var(--font-size-ui-title); }

[data-typografie="ui"] :where(small,.hint,.form-hint,.field-error) { font-size:var(--font-size-meta); }
/* ---- shared/css/ux.css */
/* ===== UX-Layer (WCAG 2.2 + 3 Vorschau, wissenschaftliche Patterns) ===== */
/* Fitts: Targets >= 44px. Doherty: schnelles Feedback. Miller: 7+/-2. Gestalt-Nähe via Spacing. */

:root {
  --ux-tap-min: 44px;
  --ux-radius-card: 0.625rem;
  --ux-shadow-sm: 0 1px 2px rgba(15, 44, 69, 0.06), 0 1px 1px rgba(15, 44, 69, 0.04);
  --ux-shadow-md: 0 4px 12px rgba(15, 44, 69, 0.08), 0 1px 3px rgba(15, 44, 69, 0.06);
  --ux-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary, #21588F) 28%, transparent);
  --ux-transition: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ux-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ux-touch-pad: 0.625rem 0.875rem;
  --ux-text-max: 70ch;
  --ux-focus-color: #1A4773;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ux-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.4);
    --ux-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
    --ux-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary, #4a7ba7) 38%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Skip-Link (WCAG 2.4.1) */
.skip-link { position: absolute; left: -9999px; top: 0; padding: 0.625rem 1rem; background: var(--color-bg-primary, #fff); color: var(--color-link, #21588F); border: 2px solid var(--color-primary, #21588F); border-radius: 4px; z-index: 9999; font-weight: 700; }
.skip-link:focus, .skip-link:focus-visible { left: 0.5rem; top: 0.5rem; outline: 3px solid var(--ux-focus-color, #1A4773); outline-offset: 2px; }

/* Focus-Visible global (WCAG 2.4.11) */
:focus-visible { outline: 3px solid var(--ux-focus-color, #1A4773); outline-offset: 2px; border-radius: 3px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { box-shadow: var(--ux-shadow-focus); outline-offset: 3px; }

/* Tap-Target-Mindestmass (WCAG 2.5.8 / 2.5.5 AAA) */
button, .btn, .nav-link, [role="button"] { min-height: var(--ux-tap-min); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--ux-touch-pad); }
input[type="text"], input[type="email"], input[type="search"], textarea, select { min-height: var(--ux-tap-min); padding: 0.625rem 0.75rem; }

/* Form-Hierarchie + Validierung */
.form-group { display: grid; gap: 0.375rem; margin-bottom: 1rem; }
.form-group label { font-weight: 600; color: var(--color-text-primary, #111); }
.form-group .hint { font-size: 0.875rem; color: var(--color-text-secondary, #666); }
.form-group .err { font-size: 0.875rem; color: var(--color-error, #dc3545); font-weight: 600; }
input:invalid:not(:placeholder-shown) { border-color: var(--color-error, #dc3545); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error, #dc3545) 18%, transparent); }
input:user-valid { border-color: var(--color-success, #28a745); }
.required-asterisk { color: var(--color-error, #dc3545); margin-left: 0.125rem; }

/* Status-Messages (WCAG 4.1.3) */
[role="status"], [role="alert"] { padding: 0.625rem 0.875rem; border-radius: var(--ux-radius-card); margin: 0.75rem 0; font-weight: 500; }
[role="status"]:empty, [role="alert"]:empty { display: none; }
[role="status"] { background: var(--color-info-bg, #d1ecf1); color: var(--color-info-text, #0c5460); border-left: 4px solid var(--color-info, #17a2b8); }
[role="alert"] { background: var(--color-error-bg, #f8d7da); color: var(--color-error-text, #721c24); border-left: 4px solid var(--color-error, #dc3545); }

/* Reflow 320px (WCAG 1.4.10) */
img, svg, video { max-width: 100%; height: auto; }

/* Lesbarkeit Text-Spalten */
p, .lead, .prose { max-width: var(--ux-text-max); }

/* Loading-State */
[aria-busy="true"] { cursor: progress; opacity: 0.7; pointer-events: none; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ux-spin 0.7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Visually-hidden Helper (WCAG 1.3.1) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* htmx-Ladeanzeige: exakt die Regeln, die htmx ohne diese Datei selbst als inline
   style-Element erzeugt. Im Layout ist includeIndicatorStyles abgeschaltet, weil
   CSP style-src 'self' inline styles verwirft. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
/* ---- local/css/rahmen.css */
/* Tatsächliche Fettschnitte verwenden: local('Avenir') bezeichnet den normalen Schnitt. */
@font-face {
  font-family: 'Avenir';
  src: local('Avenir-Heavy'), local('Avenir Heavy'), local('Avenir-Black'), local('Avenir Black'),
       local('Arial-BoldMT'), local('Arial Bold'), local('LiberationSans-Bold'), local('Liberation Sans Bold');
  font-weight: 700;
}
/* Seitenrahmen aller Seiten unter /gmbh: links der Inhalt, dazwischen der Teiler, rechts die Welt.
   Schmal steht nur der Inhalt in voller Breite, darüber die Inselliste als eine Zeile zum Wischen, mit Hinweis. Breit stehen Welt und Inhalt
   nebeneinander; die Welt bleibt beim Lesen unter dem geteilten Kopf stehen. Farben, Abstände und Schrift aus bundle.css. */

.rahmen {
  /* Höhe des geteilten Kopfes (.site-header in critical.css: Logo 50px, 2 × 10px Abstand, 1px Linie). */
  --kopfhöhe: 71px;
  /* Anteil der Welt an der Breite in Prozent; setzt teiler.js, die Grenzen hält clamp() unten. */
  --welt-anteil: 50%;
}

.welt {
  padding: var(--space-4, 1rem);
  background: var(--color-bg-secondary, #f8f9fa);
  border-block-end: 1px solid var(--color-border-light, #e9ecef);
}
.welt__titel   { margin: 0 0 var(--space-2, .5rem); font-weight: 600; color: var(--color-text-secondary, #666); }
.welt__inseln  { display: flex; gap: var(--space-4, 1rem); margin: 0; padding: 0 0 var(--space-2, .5rem); list-style: none; overflow-x: auto; white-space: nowrap; }
.welt__inseln li { flex: none; }
.welt__hinweis { margin: var(--space-2, .5rem) 0 0; font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #666); }

.teiler { display: none; }

.inhalt { container-type: inline-size; padding: var(--space-6, 1.5rem) var(--space-4, 1rem) var(--space-12, 3rem); }
.inhalt > * { max-inline-size: 70ch; margin-inline: auto; }
/* Brotkrümelpfad und H1 bilden eine Titelzeile; verlinkte Vorgänger stehen kleiner davor. */
.pfad ol             { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .45em; margin: 0 0 var(--space-4, 1rem); padding: 0; list-style: none; font-size: var(--font-size-sm, .875rem); line-height: 1.5; color: var(--color-text-secondary, #666); }
.pfad li             { font-size: inherit; }
.pfad li:last-child  { font-size: var(--font-size-md, 1.2rem); }
.pfad li + li::before { content: ">"; margin-inline-end: .45em; color: var(--color-border, #bbb); }
.pfad a              { color: inherit; font-weight: 400; }
.pfad a:hover        { color: var(--color-link); }
.pfad h1             { display: inline; margin: 0; font-size: inherit; font-weight: 700; line-height: inherit; color: var(--color-h1, #2f6592); text-align: start; }
/* Sprungziele (#kapitel) nicht unter dem geteilten Kopf verstecken. */
.inhalt [id] { scroll-margin-block-start: calc(var(--kopfhöhe) + var(--space-4, 1rem)); }

/* Breit: Welt und Inhalt nebeneinander. Die Mindestgröße (vorerst 1200 × 700 CSS-Pixel) wird mit echten Inhalten geprüft. */
@media (min-width: 75rem) and (min-height: 43.75rem) {
  .rahmen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto clamp(20%, var(--welt-anteil), 80%);
    align-items: start;
  }
  .welt,
  .teiler {
    position: sticky;
    inset-block-start: var(--kopfhöhe);
    block-size: calc(100vh - var(--kopfhöhe));
    block-size: calc(100dvh - var(--kopfhöhe));
  }
  .welt          { grid-column: 3; grid-row: 1; overflow: auto; border-block-end: 0; }
  .welt__hinweis { display: none; }
  .teiler {
    grid-column: 2;
    grid-row: 1;
    display: block;
    inline-size: .5rem;
    background: var(--color-border-light, #e9ecef);
    cursor: col-resize;
    touch-action: none;
  }
  .teiler:hover,
  .teiler:focus-visible,
  .rahmen[data-teilt] .teiler { background: var(--color-primary-light, #3a6ba3); }
  .teiler:focus-visible  { outline: 2px solid var(--color-primary, #21588f); outline-offset: 2px; }
  .rahmen[data-teilt] { cursor: col-resize; user-select: none; }
  .inhalt { grid-column: 1; grid-row: 1; padding-inline: clamp(var(--space-4, 1rem), 5%, var(--space-12, 3rem)); }
}
/* ---- local/css/welt.css */
/* Welt: Inseln, Gegenstände, Personen und Schilder wie Kratzstadt. Die Zeichenfarben sind fest wie im Spielplatz
   (Kratzstadt 1:1) und folgen bewusst nicht dem Hell-/Dunkel-Thema der Seite. Gezeichnet wird nur in der breiten
   Anordnung (start.js); danach bleibt die Inselliste nur für Screenreader. */
.welt {
  --blau: #21588f;
  --blau-hell: #3a6ba3;
  --blau-pastell: #7fa8d1;
  --rosa: #966489;
  --rosa-hell: #c794bb;
  --rosa-tief: #7a536f;
}
.welt[data-gezeichnet] { padding: 0; }
.welt[data-gezeichnet] > :is(.welt__titel, .welt__inseln) {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.welt__symbole   { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.welt__zeichnung { display: block; inline-size: 100%; block-size: 100%; cursor: grab; touch-action: none; user-select: none; }
.welt__zeichnung.zieht,
.welt__zeichnung.zieht * { cursor: grabbing; }
.welt__zeichnung:focus-visible { outline: 2px solid var(--color-primary, #21588f); outline-offset: -4px; }

/* Inseln: die eigene Firma und die Insel der Seite in vollen Farben; andere scheinen leicht durch, bis man darüberfährt. */
.welt__zeichnung [data-insel]                             { opacity: .6; transition: opacity .3s ease; }
.welt__zeichnung [data-insel]:is(.heimat, .aktiv, .bezug, :hover) { opacity: 1; }

/* Quader: Jede Seite nimmt ihre Farbe vom Werkstoff (werkstoffe.css). */
.oben, .links, .rechts { stroke-width: .6; stroke-linejoin: round; }
.oben   { fill: var(--oben);   stroke: var(--oben); }
.links  { fill: var(--links);  stroke: var(--links); }
.rechts { fill: var(--rechts); stroke: var(--rechts); }

/* Insel wie Kratzstadt: Rand, Kanten und einheitlicher Boden. */
.welt__zeichnung, .welt__symbole {
  --rand: #aab68b; --kante-links: #b5ae80; --kante-rechts: #a59f74;
}
.insel .rand          { fill: var(--rand); }
.insel .kante-links   { fill: var(--kante-links); }
.insel .kante-rechts  { fill: var(--kante-rechts); }
.insel .feld          { fill: #c8d6ad; }
/* Regionen im Büro: ein leichter Ton über den Feldern je Gruppe von Bereichen, ihr Name kontrastreich auf dem Boden;
   der Vorplatz hell gepflastert, die Straße grauer Asphalt. */
.region             { fill-opacity: .24; }
.region-zentrale    { fill: #e8cf8f; }
.region-fuehrung    { fill: #d6a9c6; }
.region-finanzen    { fill: #94b6dc; }
.region-betrieb     { fill: #8fcab5; }
.region-markt       { fill: #efb98a; }
.region-vorplatz    { fill: #b9b3a3; fill-opacity: .4; }
.region-strasse     { fill: #6e716c; fill-opacity: .6; }
.region-name        { font: 800 13px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; fill: #28331e; }
/* Ferne Inseln zeigen nur ihr Schemen: einen einzigen blassen Pfad. */
.schemen { fill: var(--rand); opacity: .45; }

/* Schild auf dem untersten Feld wie das Stadtschild von Kratzstadt: Pfosten, Tafel mit Rand, Schrift. */
.schild      { --pfosten: #9b875b; --tafel: #f5e6bb; --tafelrand: #c0ab7a; --schrift: #000; }
.schild line { stroke: var(--pfosten); stroke-width: 3; stroke-linecap: round; }
.schild rect { fill: var(--tafel); stroke: var(--tafelrand); stroke-width: 1; }
.schild text { font: 750 7.2px system-ui, sans-serif; fill: var(--schrift); text-anchor: middle; dominant-baseline: central; }

/* Figur, Gegenstände und Vorlagen kommen über <use> als Klon in einen eigenen Schatten-Baum. Regeln dafür setzen an
   Klassen an, die mitgeklont werden, nie an Vorfahren außerhalb wie .welt__symbole: Die greifen dort nicht, und es
   bleibt Standardschwarz. Farbwerte erbt der Klon über die Variablen vom <use>.
   Mensch wie Kratzstadt: Figur in Blau. */
.person { --fußschatten: #4d5b3a24; --haut: #e4bc8c; --haar: #6c6046; --beine: #5f5d48; --oberteil: var(--blau-hell); }
.figur .fußschatten       { fill: var(--fußschatten); }
.figur .haut              { fill: var(--haut); }
.figur .haar              { fill: var(--haar); }
.figur .oberteil          { fill: var(--oberteil); }
.figur :is(.beine, .arme) { fill: none; stroke-linecap: round; }
.figur .beine             { stroke: var(--beine); stroke-width: 2; }
.figur .arme              { stroke: var(--oberteil); stroke-width: 2.2; }

/* Was für eine Seite steht, ist ein Link: Zeiger, leichtes Aufhellen, sichtbarer Fokus. Karl unterwegs fängt keine Klicks. */
.welt__ziel { cursor: pointer; }
.welt__ziel:hover, .welt__ziel:focus-visible { filter: brightness(1.06); }
.welt__ziel:focus-visible { outline: 2px solid var(--color-primary, #21588f); outline-offset: 2px; }
.welt__unterwegs { pointer-events: none; }
/* Eine Beschriftung für alles, worauf Zeiger oder Fokus liegen; beschriftung.js setzt Text und Lage (--x, --y). */
.welt__beschriftung { position: absolute; inset-inline-start: var(--x, 0); inset-block-start: var(--y, 0); z-index: 1; margin: 0; padding: .2em .6em;
  font-size: var(--font-size-sm, .875rem); white-space: nowrap; background: #fffffff2; border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-sm, 0 1px 3px #0000001a); transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; }
/* Das Ziel der Seite leuchtet; Bögen führen zu allem, womit die Seite in Wechselwirkung steht, und das leuchtet sanfter. */
:is(.welt__ziel, [data-ort]).aktiv { filter: drop-shadow(0 0 2px var(--blau-hell)) drop-shadow(0 0 6px var(--blau-pastell)); }
.welt__ziel.bezug { filter: drop-shadow(0 0 4px var(--rosa-hell)); }
.welt__bezüge     { pointer-events: none; }
.welt__bezug      { fill: none; stroke: var(--rosa); stroke-width: 1.6; stroke-dasharray: 6 5; stroke-linecap: round; opacity: .75; }

/* Flächen und Linien der Formen aus arten.json (Objekte der Bereiche, Dokumente): wenige allgemeine Klassen statt
   eigener Regeln je Gegenstand. Sie wirken auch im Klon einer Vorlage, weil sie an keinem Vorfahren hängen. */
.fl-papier  { fill: #fff; stroke: #c9ccc5; stroke-width: .4; }
.fl-dunkel  { fill: #2f3331; }
.fl-anzeige { fill: #b9c7a5; }
.fl-taste   { fill: #d9dcd4; }
.fl-glas    { fill: #fff6c4; stroke: #d8c26a; stroke-width: .6; }
.fl-schein  { fill: #fff3a8; opacity: .45; }
.fl-gelb    { fill: #f4d35e; }
.fl-blau    { fill: var(--blau-pastell); }
.fl-rosa    { fill: var(--rosa-hell); }
.fl-grün    { fill: #7cc483; }
.fl-rot     { fill: #e0574f; }
.fl-orange  { fill: #f0a04b; }
.fl-türkis  { fill: #5fb3ad; }
.fl-kork    { fill: #d7a86e; stroke: #a87a46; stroke-width: .6; }
.fl-scheibe { fill: #9fc3dd; stroke: #5d6461; stroke-width: .6; }
.fl-weiß    { fill: #fbfbf7; }
.fl-messing { fill: #e3c56c; stroke: #8a6d2c; stroke-width: .5; }
.fl-tafel   { fill: #fbfbf7; stroke: #8f9792; stroke-width: .8; }
.fl-tür     { fill: #7f8784; stroke: #5d6461; stroke-width: .6; }
.li-dunkel  { fill: none; stroke: #2f3331; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.li-fein    { fill: none; stroke: #9aa3ad; stroke-width: .6; stroke-linecap: round; }
.li-metall  { fill: none; stroke: #767e79; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.li-messing { fill: none; stroke: #8a6d2c; stroke-width: 1.4; stroke-linecap: round; }
.li-faden   { fill: none; stroke: #8a6d2c; stroke-width: .5; }
.li-stahl   { fill: none; stroke: #8f9792; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.li-band    { fill: none; stroke: #2f3331; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.li-holz    { fill: none; stroke: #8a5a2b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.li-rot     { fill: none; stroke: #c0392b; stroke-width: 1.2; stroke-linecap: round; }
.li-weiß    { fill: none; stroke: #fbfbf7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.li-ring-weiß { fill: none; stroke: #fbfbf7; stroke-width: 8; }
.li-ring-rot  { fill: none; stroke: #e0574f; stroke-width: 8; stroke-dasharray: 20.4 20.4; }

@media (prefers-reduced-motion: reduce) { .welt__zeichnung [data-insel] { transition: none; } }
/* ---- local/css/zielgruppeninsel.css */
/* Die Auswahlinsel bleibt ruhig; Rollen unterscheiden sich zusätzlich durch ihre Beschriftung. */
.welt [hidden] { display: none; }
.zielgruppeninsel { cursor: default; touch-action: auto; }
.zielgruppeninsel .person--angestellt { --oberteil: #b56e36; }
.zielgruppenfirma { --oben: #7fa8d1; --links: #f4eee1; --rechts: #ccc4b5; }
.zielgruppenfirma__name { fill: #203d5b; font: 700 17px system-ui, sans-serif; text-anchor: middle; }
.zielgruppenfahne__schwarz { fill: #161616; }
.zielgruppenfahne__rot { fill: #d22b27; }
.zielgruppenfahne__gold { fill: #f4c544; }
.zielgruppenrolle circle { fill: #fff8e7; stroke: #29496c; stroke-width: 1.5; }
.zielgruppenrolle text { fill: #203d5b; font: 700 9px system-ui, sans-serif; text-anchor: middle; }
/* ---- local/css/krankmeldung.css */
/* Bestätigte Serverzustände; Text benennt den Stand unabhängig von der Farbe. */
.krankmeldung select, .krankmeldung input[type="text"], .krankmeldung input[type="datetime-local"] { max-width: 100%; }
.krankmeldung [data-krankmeldung-punkt] { border-top: 1px solid var(--border-color, #888); margin-top: 2rem; padding-top: 1rem; }
.krankmeldungsinsel text { fill: #203d5b; font-family: system-ui, sans-serif; }
.krankmeldungsinsel__hinweis { text-anchor: middle; font-size: 14px; }
.krankmeldungsinsel__zweig rect { fill: #f6f3ec; stroke: #657480; stroke-width: 2; }
.krankmeldungsinsel__zweig[data-zustand="bestätigt"] rect,
.krankmeldungsinsel__zweig[data-zustand="entfällt begründet"] rect { fill: #e2f1e5; stroke: #3b6d46; }
.krankmeldungsinsel__zweig[data-zustand="erneut prüfen"] rect { fill: #fff0cc; stroke: #876124; }
.krankmeldungsinsel__kante { fill: none; stroke: #657480; stroke-width: 2; stroke-dasharray: 5 4; }
.krankmeldungsinsel__titel { font-size: 15px; font-weight: 650; }
.krankmeldungsinsel__stand { font-size: 14px; font-weight: 700; }
.krankmeldungsinsel__bezug { font-size: 12px; }
.krankmeldungsinsel a:focus-visible { outline: 3px solid #0a65a3; }
.krankmeldung [data-krankmeldung-punkt] > details > summary { font-weight: 650; }
.krankmeldung input:invalid:not(:user-invalid) { border-color: var(--border-color, #777); }
.krankmeldungsinsel a { text-decoration: none; font-weight: 400; }
.krankmeldungsinsel a:hover text { text-decoration: underline; }
/* ---- local/css/werkstoffe.css */
/* Werkstoffe der Welt: Farben für Oberseite, linke und rechte Seite eines Quaders, fest wie im Spielplatz (Kratzstadt 1:1).
   Blau- und Rosatöne nehmen die Zeichenfarben aus welt.css. */
.dach               { --oben: #879b91; --links: #6f867b; --rechts: #60796e; }
.holz               { --oben: #d8b78a; --links: #c29d6b; --rechts: #a98455; }
.karton-blau        { --oben: var(--blau-pastell); --links: var(--blau-hell); --rechts: var(--blau); }
.karton-gelb        { --oben: #f2d27a; --links: #dcb95d; --rechts: #c09f45; }
.karton-grün        { --oben: #9ccc9a; --links: #7fb37d; --rechts: #679a66; }
.karton-rot         { --oben: #e08a7e; --links: #c96f63; --rechts: #a95a50; }
.einband-türkis     { --oben: #8ccfca; --links: #5fb3ad; --rechts: #47948f; }
.einband-weinrot    { --oben: #c56a72; --links: #a8505a; --rechts: #8a3d47; }
.einband-lila       { --oben: #b48aa8; --links: #966489; --rechts: #7a4f70; }
.kork               { --oben: #e0b882; --links: #d7a86e; --rechts: #bb8d55; }
.lack-rot           { --oben: #e2665f; --links: #c94b45; --rechts: #a93b36; }
.leder              { --oben: #a77750; --links: #8c6140; --rechts: #734e33; }
.kunststoff-grau    { --oben: #eef0ea; --links: #d9dcd4; --rechts: #c3c7be; }
.kunststoff-schwarz { --oben: #4b514d; --links: #3c413e; --rechts: #2f3331; }
.kunststoff-weiß    { --oben: #f6f6f2; --links: #deddd6; --rechts: #cac9c2; }
.messing            { --oben: #e3c56c; --links: #caa74f; --rechts: #ad8b3b; }
.metall             { --oben: #8f9792; --links: #767e79; --rechts: #606764; }
.papier             { --oben: #ffffff; --links: #f3f3ed; --rechts: #e4e4dd; }
.polster            { --oben: var(--rosa-hell); --links: var(--rosa); --rechts: var(--rosa-tief); }
.putz               { --oben: #efe6cb; --links: #eee7cb; --rechts: #d6d3b4; }
/* ---- local/css/startseite.css */
/* Startseite: Die Dachzeile ist die eigentliche Überschrift (h1), aber klein gesetzt; die Schlagzeile darunter steht groß,
   die Begleitzeile wieder klein. Es folgen eine kurze Einführung und die Einstiege in die Übersichten als Karten. */
.start hgroup        { margin-block-end: var(--space-6, 1.5rem); }
.start h1            { margin: 0; font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-secondary, #966489); text-align: start; } /* bundle.css zentriert h1 */
.start hgroup p      { margin: .2em 0 0; font-size: clamp(2rem, 9cqi, 3.5rem); font-weight: 700; line-height: 1.05; color: var(--color-h1, #2f6592); }
.start hgroup .start__begleiter { margin-block-start: .6em; font-size: var(--font-size-sm, .875rem); font-weight: 400; line-height: 1.4; color: var(--color-text-secondary, #666); }
.start__einführung   { max-inline-size: 34em; margin: 0; font-size: var(--font-size-lg, 1.125rem); line-height: 1.55; }
.start__einstiege    { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4, 1rem); margin-block-start: var(--space-8, 2rem); }
.start__einstiege section { padding: var(--space-4, 1rem) var(--space-6, 1.5rem); background: var(--color-surface, #fff); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-sm, 0 1px 3px #0000001a); }
.start__einstiege h2 { margin: 0 0 .4em; font-size: var(--font-size-md, 1rem); }
.start__einstiege p  { margin: 0; line-height: 1.5; }
/* ---- local/css/eintrag.css */
/* Seiten, Übersichten und Glossar: Kapitel, Wechselwirkungen und Teile der Seite.
   Der Seitentitel steht im Brotkrümelpfad. Farben, Abstände und Schrift aus bundle.css. */
.eintrag { overflow-wrap: anywhere; }
.eintrag a:focus-visible { outline-color: currentColor; }
.eintrag li > a { display: inline-block; min-block-size: 24px; min-inline-size: 24px; max-inline-size: 100%; }

.eintrag h2,
.eintrag h3             { margin: var(--space-6, 1.5rem) 0 .4em; font-size: var(--font-size-md, 1.2rem); }
.eintrag p,
.eintrag li             { line-height: 1.6; }
.eintrag p, .eintrag li, .eintrag dt, .eintrag dd, .eintrag summary, .eintrag legend { font-size: var(--font-size-md, 1.2rem); }
.eintrag__bereich       { margin: 0; color: var(--color-text-secondary, #555); }
.eintrag__takt          { margin: 0 0 var(--space-4, 1rem); }
.eintrag__bezüge dl     { margin: 0; }
.eintrag__bezüge dt     { margin-block-start: var(--space-3, .75rem); font-weight: 600; color: var(--color-text-secondary, #555); }
.eintrag__bezüge dd     { margin: .25em 0 0; line-height: 1.5; }
.eintrag__erläuterung   { display: block; font-size: var(--font-size-md, 1.2rem); color: var(--color-text-secondary, #555); }
.eintrag__erläuterung p,
.eintrag__erläuterung ul { margin: .25em 0 0; font-size: inherit; }
.eintrag__erläuterung ul { padding-inline-start: 1.2em; }
.eintrag__erläuterung li { font-size: inherit; margin-block: 0; }
.eintrag__teile ul      { padding-inline-start: 1.2em; }
.eintrag__benennungen   { margin: .3em 0 0; color: var(--color-text-secondary, #666); }
/* Werke (E-Book): Autor und Untertitel unter dem Titel, ein Inhaltsverzeichnis ohne Nummern, Reflexionsfragen, Blättern. */
.werk__autor,
.werk__untertitel       { margin: .3em 0 0; color: var(--color-text-secondary, #555); }
.werk__kapitel          { margin: 0; padding: 0; list-style: none; }
.werk__kapitel li       { margin-block-end: var(--space-3, .75rem); }
.werk__kapitel .werk__untertitel { display: block; font-size: var(--font-size-md, 1.2rem); }
.werk__fragen dt        { margin-block-start: var(--space-4, 1rem); font-weight: 600; }
.werk__fragen dd        { margin: .25em 0 0; }
.werk__frage            { font-style: italic; }
.werk__blättern         { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3, .75rem); margin-block-start: var(--space-8, 2rem);
                          padding-block-start: var(--space-4, 1rem); border-block-start: 1px solid var(--color-border, #ddd); }
.ablage__vorgang        { display: block; font-size: var(--font-size-md, 1.2rem); color: var(--color-text-secondary, #555); }

/* Betriebszugehörigkeit und gesetzliche Regelfristen. */
.kuendigungsfristen {
  margin-block: var(--space-4, 1rem);
}
.kuendigungsfristen label { display: block; font-weight: 600; }
.kuendigungsfristen output { font-variant-numeric: tabular-nums; }
.kuendigungsfristen input { display: block; width: 100%; min-height: 2.75rem; margin-block: .5rem; }
.kuendigungsfristen dt { margin-block-start: .6rem; font-weight: 600; }
.kuendigungsfristen dd { margin-inline-start: 0; }

/* Gemeinsame Fragen, mit sichtbarem Auswahlzustand und nativer Tastaturbedienung. */
.eintrag [hidden] { display: none; }
.dialogfrage { margin-block: 1rem; }
.dialogfrage fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.dialogfrage legend { padding: 0; }
.dialogfrage__optionen { display: flex; flex-wrap: wrap; gap: .6rem; }
.dialogfrage__optionen--zeilen { flex-direction: column; align-items: stretch; }
.dialogfrage__optionen--zeilen [data-toggle] { display: flex; align-items: center; gap: var(--space-2); }
.dialogfrage__optionen--zeilen input[type="radio"] { margin: 0; flex-shrink: 0; accent-color: var(--color-primary); }
.dialogfrage__fehler:empty { display: none; }

/* Formulare übernehmen die vorhandene Textschrift und bleiben innerhalb der Inhaltsspalte. */
.eintrag input[type="text"], .eintrag input[type="search"], .eintrag select { font: inherit; max-inline-size: 100%; }
.fuer-wen__kriterien { margin-block-start: var(--space-4, 1rem); }
/* ---- local/css/übersicht.css */
/* Übersichten der Ebenen, Checkliste und Glossar (zusätzlich zu eintrag.css): Einleitung, Sprungmarken zu Phasen oder
   Buchstaben, lange Listen in Spalten, die Checkliste mit Wann und Wer unter jedem Punkt. */
.übersicht__einleitung   { margin: 0; font-size: var(--font-size-lg, 1.125rem); line-height: 1.55; }
.übersicht__sprünge      { display: flex; flex-wrap: wrap; gap: .3em .9em; margin: var(--space-4, 1rem) 0 0; font-weight: 600; }
.übersicht__gruppe > ul  { margin: 0; padding: 0; list-style: none; line-height: 1.7; columns: 14rem; column-gap: var(--space-6, 1.5rem); }
.übersicht__gruppe li    { break-inside: avoid; }
.übersicht__gruppe li ul { margin: 0; padding-inline-start: 1em; list-style: none; font-size: var(--font-size-sm, .875rem); }
.checkliste              { margin: 0; padding-inline-start: 1.5em; }
.checkliste > li         { margin-block: var(--space-3, .75rem); }
.checkliste__wann,
.checkliste__wer         { margin: .15em 0 0; font-size: var(--font-size-sm, .875rem); line-height: 1.5; color: var(--color-text-secondary, #555); }
.glossar dl              { margin: 0; }
.glossar dt              { margin-block-start: var(--space-3, .75rem); font-weight: 600; }
.glossar dd              { margin: .15em 0 0; line-height: 1.5; }
.glossar__siehe          { color: var(--color-text-secondary, #666); }
/* ---- local/css/verwaltung.css */
/* Verwaltung (/adm): schlichte Seiten mit Tabelle und Formular; Farben und Abstände aus den geteilten Tokens (bundle.css). */
.verwaltung__kopf { padding: var(--space-3, .75rem) var(--space-4, 1rem); border-block-end: 1px solid var(--color-border, #d0d0d0); }
.verwaltung main  { max-inline-size: 60rem; margin-inline: auto; padding: var(--space-6, 1.5rem) var(--space-4, 1rem); }

.verwaltung table  { border-collapse: collapse; }
.verwaltung th,
.verwaltung td     { padding: var(--space-2, .5rem) var(--space-3, .75rem); border-block-end: 1px solid var(--color-border, #d0d0d0); text-align: start; }

/* Eingabefelder nehmen die volle Breite; früher stand das als style-Attribut im Markup, das die CSP blockiert. */
.verwaltung__formular input[type="text"],
.verwaltung__formular textarea { inline-size: 100%; }
/* ---- local/css/dokument.css */
/* Gemeinsamer Dokumentbereich. Blattformat und Typografie gehören zur Vorlage, Werte bleiben HTML-Felder. */
.dokumentbereich {
  position: relative; padding: 0; min-inline-size: 0; max-inline-size: 100%;
  block-size: calc(100dvh - var(--kopfhöhe)); overflow: clip;
}
.dokumentwerkzeug {
  position: absolute; inset-block-end: .75rem; inset-inline-end: .75rem; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
}
.dokumentwerkzeug[hidden] { display: none; }
.dokumentseiten {
  display: grid; place-items: center; padding: 1rem; inline-size: 100%; block-size: 100%;
  box-sizing: border-box; container-type: size;
}
.dokumentbereich:has([data-dokumentnavigation]:not([hidden])) .dokumentseiten { padding-block-end: 4rem; }
.dokumentseite {
  display: none; position: relative; box-sizing: border-box; min-block-size: 0;
  inline-size: min(100cqw, calc(100cqh * var(--blatt-breite) / var(--blatt-höhe)), var(--blatt-max));
  aspect-ratio: var(--blatt-breite) / var(--blatt-höhe);
  margin: 0; padding: var(--blatt-rand); background: #fff; color: #111;
  font: var(--blatt-schriftgröße)/var(--blatt-zeilenhöhe) var(--blatt-schrift);
  font-size: min(var(--blatt-schriftgröße), calc(100cqw / var(--blatt-faktor)),
    calc(100cqh * var(--blatt-breite) / var(--blatt-höhe) / var(--blatt-faktor))); color-scheme: light;
  border: 1px solid #ccc; box-shadow: 0 2px 8px #0002;
}
.dokumentseite:first-child,
.dokumentseiten[data-dokument-bereit] .dokumentseite:not([hidden]),
.dokumentseiten:not([data-dokument-bereit]) .dokumentseite:is(:target, :has(:target)) { display: block; }
.dokumentseite[hidden],
.dokumentseiten:not([data-dokument-bereit]):has(:target) .dokumentseite:not(:target):not(:has(:target)) { display: none; }
.dokumentseite h2 { font: bold 1.273em/1.4 var(--blatt-schrift); margin: 0 0 1.09em; color: inherit; text-align: center; }
.dokumentseite [id] { scroll-margin: 4.5rem 1rem 1rem; }
.dokumentseite p { margin: 0; max-inline-size: none; font: inherit; }
.dokumentseite .dokumentfeld { position: relative; margin: 0; padding: 0; border-radius: 0; }
.dokumentseite .dokumentfeld > p { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: .25em; }
.dokumentseite input:not([type=hidden]), .dokumentseite textarea, .dokumentseite select {
  box-sizing: border-box; flex: 1; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
  min-block-size: 0; block-size: auto;
  padding: .15em 0; margin: 0; border: 0; border-block-end: 1px dotted #777;
  border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: inherit;
}
.dokumentseite input[readonly], .dokumentseite textarea[readonly] { border-color: transparent; box-shadow: none; }
.dokumentseite input:focus-visible, .dokumentseite textarea:focus-visible, .dokumentseite select:focus-visible {
  outline: 2px solid var(--color-primary, #21588f); outline-offset: 2px;
}
.dokumentseite :is(noscript, [data-speicherplatz]) button { font: inherit; line-height: inherit; min-block-size: 0; padding: .2em .4em; }
.dokumentseite noscript button { border: 0; box-shadow: 0 0 0 .06em currentColor; }
.dokumentseite .dokumentfeld[hidden] { display: none; }
.dokumentseite .dokumentbild { display: block; inline-size: 100%; block-size: 20em; object-fit: contain; }
.dokumentseite .err:empty { display: none; }
.dokumentseite .err { font: inherit; }
.dokumentseite .err:not(:empty) { display: block; white-space: normal; }
.dokumentseite :is([data-speicherplatz], noscript:has(button)) {
  position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 1;
}
.dokumentseite noscript:has(button) { display: none; }
.dokumentseiten:not([data-dokument-bereit]) .dokumentfeld:is(:focus-within, :target) noscript:has(button) { display: block; }
.dokumentseite__nummer { position: absolute; inset-block-end: 2.18em; inset-inline: 0; text-align: center; }
/* Gemeinsame Zuordnungsmarkierung und abgeleiteter Lesestatus für alle Dokumentvorlagen. */
.dokumentbezug--aktiv { background: #fde7ef; color: #111; }
.dokumenthinweis__feld { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: .5em; font-size: var(--font-size-md, 1.2rem); }
.feldstatus {
  display: inline-grid; place-items: center; box-sizing: border-box;
  inline-size: 1em; block-size: 1em; margin-block-start: .28em;
  border: 1px solid var(--color-error, #dc3545); border-radius: .18em;
}
.feldstatus[aria-checked="true"] {
  color: color-mix(in srgb, var(--color-success, #28a745) 75%, black);
  background: color-mix(in srgb, var(--color-success, #28a745) 8%, white);
  border-color: color-mix(in srgb, var(--color-success, #28a745) 35%, white);
}
.feldstatus[aria-checked="true"]::after {
  content: ''; inline-size: .25em; block-size: .5em; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-.06em) rotate(45deg);
}
.dokumentverweis strong { font-weight: 700; }
.dokumenthinweis { margin-block: 1.5rem; padding-block-end: .75rem; }
.dokumenthinweis small, .dokumenthinweis small a { font-weight: 400; }
.rahmen:has([data-dokument]) .inhalt h2 { padding-block-start: 1ch; }
.dokumenthinweis > p { margin-block: .5rem 0; }
.dokumentverweis { display: block; color: inherit; font-weight: 400; text-decoration: none; }
.dokumentverweis p, .dokumentverweis ul { margin: 0; padding: 0; list-style: none; }
.dokumentverweis:focus-visible { outline: 2px solid var(--color-primary, #21588f); outline-offset: 4px; }
@media (min-width: 75rem) and (min-height: 43.75rem) {
  .dokumentbereich { position: sticky; }
}

@font-face { font-family: 'Dokument Sans'; src: url('/assets/local/fonts/LiberationSans-Regular.ttf'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Dokument Sans'; src: url('/assets/local/fonts/LiberationSans-Bold.ttf'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Dokument Serif'; src: url('/assets/local/fonts/LiberationSerif-Regular.ttf'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Dokument Serif'; src: url('/assets/local/fonts/LiberationSerif-Bold.ttf'); font-weight: 700; font-display: block; }
.dokumentseite { overflow-wrap: anywhere; }
.dokumentseite textarea { field-sizing: content; resize: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.dokumentseite .dokumentwerkzeug { inset-block-end: .4em; inset-inline-end: .6em; font: inherit; }
.dokumentseite .dokumentwerkzeug a { font: inherit; padding: .15em .35em; }
.handelsregisterauszug__zeile { flex-wrap: wrap; }
/* ---- local/css/urkunde.css */
/* Notarieller Urkundenaufbau; Papier und Abstände folgen der vorhandenen Referenz. */
.urkunde { line-height: var(--blatt-zeilenhöhe); }
.urkunde > p { margin-block: 1em; }
.urkunde__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; }
.urkunde .dokumentfeld { min-inline-size: 0; }
.urkunde__zeile .dokumentfeld { display: inline-block; flex: 0 1 auto; }
.urkunde input[readonly] { field-sizing: content; }
.urkunde__zeile input { inline-size: auto; }
.urkunde textarea { field-sizing: content; resize: none; }
.urkunde input, .urkunde textarea, .urkunde select { text-align: start; }
.urkunde__nummer { justify-content: end; }
.urkunde h2.urkunde__verhandelt { margin-block: 8em 2em; letter-spacing: .2em; }
.urkunde__notar, .urkunde__person, .urkunde__betreff { margin-block: 1.5em; font-weight: bold; }
.urkunde__bestimmung { display: grid; grid-template-columns: 1em minmax(0,1fr); gap: .5em; margin-block: 1em; }
.urkunde > p.urkunde__abschluss { margin-block-start: 4em; }
.urkunde__unterschrift { margin-block: 3em; padding-block-start: .5em; border-block-start: 1px solid; text-align: center; }
.urkunde__unterschrift > span:not([data-feldwiederholung]) { display: block; }
.urkunde__unterschrift .urkunde__zeile { justify-content: center; }
.urkunde table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; margin-block: 1em; font: inherit; }
.urkunde td { padding: .35em 0; border: 0; font: inherit; vertical-align: top; text-align: start; }
.urkunde td:first-child { inline-size: 42%; padding-inline-end: 1em; }
/* ---- local/css/gesellschafterliste.css */
/* Gesellschafterliste, Layout 1: A4, Kopf, Anteilstabelle, Unterzeichnung wie in der Referenz. */
.gesellschafterliste__kennung { margin: 0 0 2.18em 2.18em; }
.gesellschafterliste__kennung .dokumentfeld { display: inline-block; inline-size: 7.64em; }
.gesellschafterliste__kopf { text-align: center; font-weight: bold; }
.gesellschafterliste__kopf > p { margin-block: 1.09em; }
.gesellschafterliste__kopf .dokumentfeld { margin-block: 1.09em; font-size: 1.273em; }
.gesellschafterliste__register { display: flex; justify-content: center; align-items: baseline; gap: .5em; }
.gesellschafterliste__register .dokumentfeld { inline-size: auto; max-inline-size: 60%; }
.gesellschafterliste__kapital { display: flex; justify-content: center; align-items: baseline; margin-block: .545em 2.18em; gap: .5em; }
.gesellschafterliste__kapital .dokumentfeld { inline-size: 9.82em; }
.gesellschafterliste__tabelle { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: .909em; }
.gesellschafterliste__tabelle caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.gesellschafterliste__tabelle th, .gesellschafterliste__tabelle td {
  border: 1px solid #111; padding: .72em .36em; text-align: center; vertical-align: middle;
  overflow-wrap: anywhere; white-space: normal; background: #fff; color: #111;
}
.gesellschafterliste__tabelle th { block-size: 5.455em; font-weight: bold; }
.gesellschafterliste__tabelle td { block-size: 5.455em; }
.gesellschafterliste__tabelle col { inline-size: 15%; }
.gesellschafterliste__tabelle col:nth-child(4) { inline-size: 17%; }
.gesellschafterliste__tabelle col:nth-child(5) { inline-size: 8%; }
.gesellschafterliste__unterschrift { margin: 5.455em 2.18em 0; text-align: center; border-block-start: 1px solid #111; }
.gesellschafterliste__unterschrift span { display: block; }
.gesellschafterliste__beurkundung { display: flex; align-items: baseline; gap: .5em; margin: 2.18em 2.18em; }
.gesellschafterliste__beurkundung .dokumentfeld { inline-size: 8.727em; }
/* ---- local/css/handelsregisterauszug.css */
/* Aktueller Registerinhalt nach Anlage 7 HRV; Blattparameter gehören zu dieser Vorlage. */
.handelsregisterauszug__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; border-block-end: 1px solid; padding-block-end: .75em; }
.handelsregisterauszug__kopf > div:last-of-type { text-align: end; }
.handelsregisterauszug__kopf .dokumentfeld { display: inline-block; max-inline-size: 65%; }
.handelsregisterauszug__kopf h2 { grid-column: 1 / -1; margin: .5em 0 0; font-size: 1.1em; }
.handelsregisterauszug__block { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: .5em; margin-block: .65em; }
.handelsregisterauszug__zeile { display: flex; align-items: baseline; gap: .35em; }
.handelsregisterauszug__zeile .dokumentfeld { flex: 0 1 auto; min-inline-size: 0; }
.handelsregisterauszug textarea { resize: none; field-sizing: content; }
.handelsregisterauszug__zeile input { inline-size: auto; }
.handelsregisterauszug input, .handelsregisterauszug textarea, .handelsregisterauszug select { text-align: start; }
.handelsregisterauszug__fuss { display: flex; align-items: baseline; justify-content: space-between; inset-inline: 3em; }
.handelsregisterauszug__fuss .handelsregisterauszug__zeile { max-inline-size: 55%; }
/* ---- local/css/gesellschaftsvertrag.css */
/* Anteilabsätze des Gesellschaftsvertrags; übriger Urkundenstil ist gemeinsam. */
.gesellschaftsvertrag__anteil { margin: .75em 0 .75em 1.5em; }