/* Creator Coach: Tokens und Komponenten aus dem Design-Kit (Stand 12.10.2026), auf .ccv begrenzt. Nicht von Hand ändern. */


.ccv {
  --bg: #ffffff;
  --surface: #f1f0f3;
  --surface-hover: #e8e7eb;
  --surface-pressed: #dedde3;
  --raised: #ffffff;
  --field: #ffffff;
  --thumb: #ffffff;
  --knob: #ffffff;
  --line: #e6e4ea;
  --line-strong: #87858e;
  --ink: #1b1a1f;
  --ink-muted: #5d5b63;
  --ink-faint: #75727c;
  --ink-disabled: #a19ea8;
  --strong: #1b1a1f;
  --on-strong: #ffffff;
  --critical: #c4261d;
  --on-critical: #ffffff;
  --tooltip: #1b1a1f;
  --on-tooltip: #ffffff;
  --scrim: rgba(20, 19, 23, 0.44);
  --ed-dachmarke: #c8391f;
  --ed-unternehmen: #1d5fd1;
  --ed-verein: #1c7a4a;
  --ed-agentur: #617214;
  --ed-selbststaendig: #9c5c00;
  --ed-creator: #b42b6b;
  --ed-privat: #0e7488;
  --on-ed: #ffffff;
  --shadow-thumb: 0 1px 3px rgba(27, 26, 31, 0.14), 0 1px 1px rgba(27, 26, 31, 0.06);
  --shadow-pop: 0 12px 32px rgba(27, 26, 31, 0.14), 0 2px 6px rgba(27, 26, 31, 0.08);
  --shadow-dialog: 0 24px 60px rgba(27, 26, 31, 0.16), 0 2px 6px rgba(27, 26, 31, 0.08);
}

:root[data-theme="dark"] .ccv {
  --bg: #141317;
  --surface: #201f24;
  --surface-hover: #2a292f;
  --surface-pressed: #333238;
  --raised: #28272d;
  --field: #18171c;
  --thumb: #3b3a41;
  --knob: #ffffff;
  --line: #302f35;
  --line-strong: #7a7782;
  --ink: #f3f2f5;
  --ink-muted: #a8a5ae;
  --ink-faint: #8d8a94;
  --ink-disabled: #5f5c66;
  --strong: #f3f2f5;
  --on-strong: #141317;
  --critical: #ff8a7a;
  --on-critical: #141317;
  --tooltip: #3b3a41;
  --on-tooltip: #f3f2f5;
  --scrim: rgba(0, 0, 0, 0.62);
  --ed-dachmarke: #ff7c5f;
  --ed-unternehmen: #78a6ff;
  --ed-verein: #4cc389;
  --ed-agentur: #a3bb4b;
  --ed-selbststaendig: #e8a53c;
  --ed-creator: #f683b6;
  --ed-privat: #3dbcd3;
  --on-ed: #141317;
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ccv {
    --bg: #141317;
    --surface: #201f24;
    --surface-hover: #2a292f;
    --surface-pressed: #333238;
    --raised: #28272d;
    --field: #18171c;
    --thumb: #3b3a41;
    --knob: #ffffff;
    --line: #302f35;
    --line-strong: #7a7782;
    --ink: #f3f2f5;
    --ink-muted: #a8a5ae;
    --ink-faint: #8d8a94;
    --ink-disabled: #5f5c66;
    --strong: #f3f2f5;
    --on-strong: #141317;
    --critical: #ff8a7a;
    --on-critical: #141317;
    --tooltip: #3b3a41;
    --on-tooltip: #f3f2f5;
    --scrim: rgba(0, 0, 0, 0.62);
    --ed-dachmarke: #ff7c5f;
    --ed-unternehmen: #78a6ff;
    --ed-verein: #4cc389;
    --ed-agentur: #a3bb4b;
    --ed-selbststaendig: #e8a53c;
    --ed-creator: #f683b6;
    --ed-privat: #3dbcd3;
    --on-ed: #141317;
    --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}


.ccv,
.ccv .cc-ed-dachmarke {
  --ed: var(--ed-dachmarke);
  --act: var(--strong);
  --on-act: var(--on-strong);
  --link: var(--ink);
  --focus: var(--ink);
  --chart: var(--ink);
}

.cc-ed-unternehmen,
.cc-ed-unternehmen [data-theme] {
  --ed: var(--ed-unternehmen);
  --act: var(--ed-unternehmen);
  --on-act: var(--on-ed);
  --link: var(--ed-unternehmen);
  --focus: var(--ed-unternehmen);
  --chart: var(--ed-unternehmen);
}

.cc-ed-verein,
.cc-ed-verein [data-theme] {
  --ed: var(--ed-verein);
  --act: var(--ed-verein);
  --on-act: var(--on-ed);
  --link: var(--ed-verein);
  --focus: var(--ed-verein);
  --chart: var(--ed-verein);
}
.cc-ed-agentur,
.cc-ed-agentur [data-theme] {
  --ed: var(--ed-agentur);
  --act: var(--ed-agentur);
  --on-act: var(--on-ed);
  --link: var(--ed-agentur);
  --focus: var(--ed-agentur);
  --chart: var(--ed-agentur);
}

.cc-ed-selbststaendig,
.cc-ed-selbststaendig [data-theme] {
  --ed: var(--ed-selbststaendig);
  --act: var(--ed-selbststaendig);
  --on-act: var(--on-ed);
  --link: var(--ed-selbststaendig);
  --focus: var(--ed-selbststaendig);
  --chart: var(--ed-selbststaendig);
}

.cc-ed-creator,
.cc-ed-creator [data-theme] {
  --ed: var(--ed-creator);
  --act: var(--ed-creator);
  --on-act: var(--on-ed);
  --link: var(--ed-creator);
  --focus: var(--ed-creator);
  --chart: var(--ed-creator);
}

.cc-ed-privat,
.cc-ed-privat [data-theme] {
  --ed: var(--ed-privat);
  --act: var(--ed-privat);
  --on-act: var(--on-ed);
  --link: var(--ed-privat);
  --focus: var(--ed-privat);
  --chart: var(--ed-privat);
}

.ccv {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-control-lg: 16px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-2xl: 34px;
  --radius-3xl: 38px;
  --radius-full: 999px;
  --control-sm: 36px;
  --control-md: 46px;
  --control-lg: 54px;
  --field-height: 50px;
  --touch-min: 44px;
  --font-display: Parkinsans, ui-rounded, system-ui, sans-serif;
  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
}

.ccv {
  --type-display-size: 64px;
  --type-display-line-height: 60px;
  --type-display-weight: 800;
  --type-display-letter-spacing: -0.035em;
  --type-error-code-size: 128px;
  --type-error-code-line-height: 120px;
  --type-error-code-weight: 800;
  --type-error-code-letter-spacing: -0.035em;
  --type-title-1-size: 34px;
  --type-title-1-line-height: 40px;
  --type-title-1-weight: 800;
  --type-title-1-letter-spacing: -0.025em;
  --type-title-2-size: 26px;
  --type-title-2-line-height: 32px;
  --type-title-2-weight: 700;
  --type-title-2-letter-spacing: -0.015em;
  --type-title-3-size: 20px;
  --type-title-3-line-height: 26px;
  --type-title-3-weight: 700;
  --type-title-3-letter-spacing: -0.01em;
  --type-coach-size: 20px;
  --type-coach-line-height: 30px;
  --type-coach-weight: 500;
  --type-coach-letter-spacing: -0.005em;
  --type-coach-sm-size: 17px;
  --type-coach-sm-line-height: 26px;
  --type-coach-sm-weight: 500;
  --type-number-size: 44px;
  --type-number-line-height: 44px;
  --type-number-weight: 800;
  --type-number-letter-spacing: -0.03em;
  --type-body-size: 16px;
  --type-body-line-height: 24px;
  --type-body-weight: 400;
  --type-body-strong-size: 16px;
  --type-body-strong-line-height: 24px;
  --type-body-strong-weight: 650;
  --type-body-sm-size: 14px;
  --type-body-sm-line-height: 20px;
  --type-body-sm-weight: 400;
  --type-label-size: 14px;
  --type-label-line-height: 20px;
  --type-label-weight: 650;
  --type-button-size: 16px;
  --type-button-line-height: 20px;
  --type-button-weight: 650;
  --type-button-sm-size: 14px;
  --type-button-sm-line-height: 18px;
  --type-button-sm-weight: 650;
  --type-caption-size: 12px;
  --type-caption-line-height: 16px;
  --type-caption-weight: 500;
}

.ccv .display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-letter-spacing);
}

.ccv .error-code {
  font-family: var(--font-display);
  font-size: var(--type-error-code-size);
  line-height: var(--type-error-code-line-height);
  font-weight: var(--type-error-code-weight);
  letter-spacing: var(--type-error-code-letter-spacing);
}

.ccv .title-1 {
  font-family: var(--font-display);
  font-size: var(--type-title-1-size);
  line-height: var(--type-title-1-line-height);
  font-weight: var(--type-title-1-weight);
  letter-spacing: var(--type-title-1-letter-spacing);
}

.ccv .title-2 {
  font-family: var(--font-display);
  font-size: var(--type-title-2-size);
  line-height: var(--type-title-2-line-height);
  font-weight: var(--type-title-2-weight);
  letter-spacing: var(--type-title-2-letter-spacing);
}

.ccv .title-3 {
  font-family: var(--font-display);
  font-size: var(--type-title-3-size);
  line-height: var(--type-title-3-line-height);
  font-weight: var(--type-title-3-weight);
  letter-spacing: var(--type-title-3-letter-spacing);
}

.ccv .coach {
  font-family: var(--font-display);
  font-size: var(--type-coach-size);
  line-height: var(--type-coach-line-height);
  font-weight: var(--type-coach-weight);
  letter-spacing: var(--type-coach-letter-spacing);
}

.ccv .coach-sm {
  font-family: var(--font-display);
  font-size: var(--type-coach-sm-size);
  line-height: var(--type-coach-sm-line-height);
  font-weight: var(--type-coach-sm-weight);
}

.ccv .number {
  font-family: var(--font-display);
  font-size: var(--type-number-size);
  line-height: var(--type-number-line-height);
  font-weight: var(--type-number-weight);
  letter-spacing: var(--type-number-letter-spacing);
}

.ccv .body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
}

.ccv .body-strong {
  font-family: var(--font-sans);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line-height);
  font-weight: var(--type-body-strong-weight);
}

.ccv .body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--type-body-sm-weight);
}

.ccv .label {
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
}

.ccv .button {
  font-family: var(--font-sans);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line-height);
  font-weight: var(--type-button-weight);
}

.ccv .button-sm {
  font-family: var(--font-sans);
  font-size: var(--type-button-sm-size);
  line-height: var(--type-button-sm-line-height);
  font-weight: var(--type-button-sm-weight);
}

.ccv .caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
}

/* Creator Coach, Richtung Werkstatt.
   Liest nur die Variablen aus tokens.css. Jede Ecke folgt einem Radius-Token,
   jede Farbe einem Farb-Token. Die Editionsfarbe kommt über --ed. */

/* ---------- Edition ----------
   --ed   Markenfarbe der Edition: Logo-Strich, Unterstreichung, Editionsname, Reiter, Fokus.
   --act  Bedienfarbe: Hauptbutton, gewählte Checkbox, Radio, Switch, Kalendertag, Fortschritt.
   --link Farbe von Textlinks.
   --focus Fokusring und aktives Feld.
   --chart Datenfarbe in Diagrammen (in der Dachmarke Tinte).
   In der Dachmarke ist Tomate nur Markenfarbe. Bedienfarbe ist dort Tinte, weil Tomate
   zu nah am Fehlerrot liegt. */

.ccv, .ccv .cc-ed-dachmarke { --ed: var(--ed-dachmarke); --act: var(--strong); --on-act: var(--on-strong); --link: var(--ink); --focus: var(--ink); --chart: var(--ink); }
.cc-ed-unternehmen, .cc-ed-unternehmen [data-theme] { --ed: var(--ed-unternehmen); --act: var(--ed-unternehmen); --on-act: var(--on-ed); --link: var(--ed-unternehmen); --focus: var(--ed-unternehmen); --chart: var(--ed-unternehmen); }
.cc-ed-verein, .cc-ed-verein [data-theme] { --ed: var(--ed-verein); --act: var(--ed-verein); --on-act: var(--on-ed); --link: var(--ed-verein); --focus: var(--ed-verein); --chart: var(--ed-verein); }
.cc-ed-selbststaendig, .cc-ed-selbststaendig [data-theme] { --ed: var(--ed-selbststaendig); --act: var(--ed-selbststaendig); --on-act: var(--on-ed); --link: var(--ed-selbststaendig); --focus: var(--ed-selbststaendig); --chart: var(--ed-selbststaendig); }
.cc-ed-creator, .cc-ed-creator [data-theme] { --ed: var(--ed-creator); --act: var(--ed-creator); --on-act: var(--on-ed); --link: var(--ed-creator); --focus: var(--ed-creator); --chart: var(--ed-creator); }
.cc-ed-privat, .cc-ed-privat [data-theme] { --ed: var(--ed-privat); --act: var(--ed-privat); --on-act: var(--on-ed); --link: var(--ed-privat); --focus: var(--ed-privat); --chart: var(--ed-privat); }
.cc-ed-agentur, .cc-ed-agentur [data-theme] { --ed: var(--ed-agentur); --act: var(--ed-agentur); --on-act: var(--on-ed); --link: var(--ed-agentur); --focus: var(--ed-agentur); --chart: var(--ed-agentur); }

/* ---------- Grundlagen ---------- */

[class^="cc-"], [class*=" cc-"] { box-sizing: border-box; }
.cc-app {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cc-icon { flex: none; display: block; fill: currentColor; }

/* Ecken: ein Radius-Token pro Element über --r. Browser mit corner-shape
   bekommen die weiche Apple-Kurve (Superellipse), der Radius wächst dafür um 40 %,
   damit die Ecke optisch gleich groß bleibt. Alle anderen zeigen runde Ecken. */
.ccv { --sqk: 1; }
.cc-sq { border-radius: calc(var(--r) * var(--sqk)); }
@supports (corner-shape: superellipse(1.5)) {
  .ccv { --sqk: 1.4; }
  .cc-sq, .cc-sheet { corner-shape: superellipse(1.5); }
}

/* Fokus: ein Ring in der Editionsfarbe, 2 px, mit 2 px Abstand. Überall gleich. */
.cc-focus:focus-visible,
.cc-focus[data-force~="focus"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-focus:focus:not(:focus-visible) { outline: none; }

@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [class^="cc-"], [class*=" cc-"] { transition: none !important; animation: none !important; }
}

/* Auf grauen Flächen (surface) werden weiche Buttons weiß, damit sie sichtbar bleiben. */
.cc-on-surface {
  --soft: var(--thumb);
  --soft-hover: color-mix(in oklab, var(--thumb) 93%, var(--ink));
  --soft-pressed: color-mix(in oklab, var(--thumb) 87%, var(--ink));
  --plain-hover: var(--surface-hover);
}

/* ---------- Button ---------- */

.cc-btn {
  --r: var(--radius-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 20px;
  margin: 0;
  border: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.cc-btn--icon-start { padding-left: 16px; }
.cc-btn--icon-end { padding-right: 16px; }
.cc-btn--sm { --r: var(--radius-sm); height: var(--control-sm); padding: 0 14px; gap: 6px; font-size: 14px; line-height: 18px; }
.cc-btn--sm.cc-btn--icon-start { padding-left: 11px; }
.cc-btn--sm.cc-btn--icon-end { padding-right: 11px; }
.cc-btn--lg { --r: var(--radius-control-lg); height: var(--control-lg); padding: 0 24px; font-size: 17px; line-height: 22px; }
.cc-btn--full { display: flex; width: 100%; }

.cc-btn--primary { background: var(--act); color: var(--on-act); }
.cc-btn--primary:hover, .cc-btn--primary[data-force~="hover"] { background: color-mix(in oklab, var(--act) 86%, var(--bg)); }
.cc-btn--primary:active, .cc-btn--primary[data-force~="pressed"] { background: color-mix(in oklab, var(--act) 76%, var(--bg)); }

.cc-btn--strong { background: var(--strong); color: var(--on-strong); }
.cc-btn--strong:hover, .cc-btn--strong[data-force~="hover"] { background: color-mix(in oklab, var(--strong) 84%, var(--bg)); }
.cc-btn--strong:active, .cc-btn--strong[data-force~="pressed"] { background: color-mix(in oklab, var(--strong) 74%, var(--bg)); }

.cc-btn--secondary { background: var(--soft, var(--surface)); color: var(--ink); }
.cc-btn--secondary:hover, .cc-btn--secondary[data-force~="hover"] { background: var(--soft-hover, var(--surface-hover)); }
.cc-btn--secondary:active, .cc-btn--secondary[data-force~="pressed"] { background: var(--soft-pressed, var(--surface-pressed)); }

.cc-btn--plain { background: transparent; color: var(--ink); }
.cc-btn--plain:hover, .cc-btn--plain[data-force~="hover"] { background: var(--plain-hover, var(--surface)); }
.cc-btn--plain:active, .cc-btn--plain[data-force~="pressed"] { background: var(--soft-pressed, var(--surface-hover)); }

.cc-btn--danger { background: var(--soft, var(--surface)); color: var(--critical); }
.cc-btn--danger:hover, .cc-btn--danger[data-force~="hover"] { background: var(--soft-hover, var(--surface-hover)); }
.cc-btn--danger:active, .cc-btn--danger[data-force~="pressed"] { background: var(--soft-pressed, var(--surface-pressed)); }

.cc-btn--danger-strong { background: var(--critical); color: var(--on-critical); }
.cc-btn--danger-strong:hover, .cc-btn--danger-strong[data-force~="hover"] { background: color-mix(in oklab, var(--critical) 88%, var(--ink)); }
.cc-btn--danger-strong:active, .cc-btn--danger-strong[data-force~="pressed"] { background: color-mix(in oklab, var(--critical) 78%, var(--ink)); }

.cc-btn:disabled, .cc-btn[aria-disabled="true"] { background: var(--soft, var(--surface)); color: var(--ink-disabled); cursor: not-allowed; }
.cc-btn--plain:disabled, .cc-btn--plain[aria-disabled="true"] { background: transparent; }
.cc-btn[aria-busy="true"] { cursor: progress; }
.cc-btn { flex-shrink: 0; }
.cc-btn .cc-icon { width: 20px; height: 20px; }
.cc-btn--sm .cc-icon { width: 16px; height: 16px; }

.cc-iconbtn { width: var(--control-md); padding: 0; }
.cc-iconbtn.cc-btn--sm { width: var(--control-sm); padding: 0; }
.cc-iconbtn.cc-btn--round { --r: var(--radius-full); }

.cc-spinner {
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cc-spin 0.8s linear infinite;
}
.cc-spinner--sm { width: 14px; height: 14px; border-width: 1.75px; }

.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cc-actions--end { justify-content: flex-end; }
.cc-actions--stack { flex-direction: column; align-items: stretch; }

/* ---------- Textlink ---------- */

.cc-link {
  --r: var(--radius-xs);
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.cc-link:hover, .cc-link[data-force~="hover"] { text-decoration-color: currentColor; }
.cc-link--standalone { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cc-link--standalone:hover, .cc-link--standalone[data-force~="hover"] { text-decoration: underline; text-decoration-color: currentColor; }
.cc-link--quiet { color: var(--ink-muted); font-weight: 500; }
.cc-link .cc-icon { width: 14px; height: 14px; display: inline-block; vertical-align: -1px; margin-left: 2px; }

/* ---------- Reiter ---------- */

.cc-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cc-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 650;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease-out;
}
.cc-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color 0.15s ease-out; }
.cc-tab:hover, .cc-tab[data-force~="hover"] { color: var(--ink); }
.cc-tab[aria-selected="true"] { color: var(--ink); }
.cc-tab[aria-selected="true"]::after { background: var(--ed); }
.cc-tab:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.cc-tab:focus-visible, .cc-tab[data-force~="focus"] { outline: none; }
.cc-tab:focus-visible .cc-tab__label, .cc-tab[data-force~="focus"] .cc-tab__label { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-xs); }
.cc-tab__count { margin-left: 6px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Segment-Umschaltung (Unterreiter) ---------- */

.cc-seg { --r: var(--radius-md); display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: var(--space-1); background: var(--surface); }
.cc-seg--full { display: grid; width: 100%; }
.cc-seg__item {
  --r: var(--radius-sm);
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-seg__item:hover, .cc-seg__item[data-force~="hover"] { color: var(--ink); }
.cc-seg__item[aria-checked="true"] { background: var(--thumb); color: var(--ink); font-weight: 650; box-shadow: var(--shadow-thumb); }
.cc-seg__item:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.cc-seg__item:focus-visible, .cc-seg__item[data-force~="focus"] { outline: 2px solid var(--focus); outline-offset: 0; }
.cc-seg__item .cc-icon { width: 18px; height: 18px; }
.cc-seg--sm { --r: var(--radius-sm); }
.cc-seg--sm .cc-seg__item { --r: var(--radius-xs); height: 28px; padding: 0 12px; font-size: 14px; line-height: 18px; }

/* ---------- Seitenleiste ---------- */

.cc-sidebar { display: flex; flex-direction: column; gap: var(--space-5); width: 272px; height: 100%; padding: 20px 12px 12px; background: var(--bg); border-right: 1px solid var(--line); }
.cc-sidebar__brand { padding: 6px 10px 2px; color: var(--ink); }
.cc-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.cc-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.cc-navitem {
  --r: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.cc-navitem:hover, .cc-navitem[data-force~="hover"] { background: color-mix(in oklab, var(--surface) 55%, var(--bg)); color: var(--ink); }
.cc-navitem[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 650; }
.cc-navitem[aria-current="page"] .cc-icon { color: var(--ed); }
.cc-navitem .cc-icon { width: 20px; height: 20px; }
.cc-navitem__count { margin-left: auto; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cc-wsswitch {
  --r: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px 7px 7px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.cc-wsswitch:hover, .cc-wsswitch[data-force~="hover"] { background: var(--surface-hover); }
.cc-wsswitch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-wsswitch__name { font-size: 14px; line-height: 20px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-wsswitch__sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cc-wsswitch .cc-icon { width: 14px; height: 14px; color: var(--ink-muted); }

/* ---------- Tab-Bar (mobil) ---------- */

.cc-tabbar { display: flex; justify-content: space-around; align-items: flex-start; height: 84px; padding: 8px 4px 0; background: var(--bg); border-top: 1px solid var(--line); }
.cc-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.cc-tabbar__item .cc-icon { width: 26px; height: 26px; }
.cc-tabbar__item[aria-current="page"] { color: var(--ed); }

/* ---------- Kopfzeilen ---------- */

.cc-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 8px; background: var(--bg); }
.cc-topbar--line { border-bottom: 1px solid var(--line); }
.cc-topbar__back {
  --r: var(--radius-sm);
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 10px 0 4px;
  border: 0;
  background: none;
  color: var(--link);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  cursor: pointer;
}
.cc-topbar__back .cc-icon { width: 22px; height: 22px; }
.cc-topbar__title { font-size: 17px; line-height: 22px; font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-topbar__end { justify-self: end; display: flex; align-items: center; }
.cc-largetitle { margin: 0; padding: 2px 20px 10px; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.025em; }

.cc-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cc-pagehead__main { min-width: 0; }
.cc-pagehead__trail { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cc-pagehead__trail a { color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
.cc-pagehead__trail a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc-pagehead__trail .cc-icon { width: 14px; height: 14px; }
.cc-pagehead__title { margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.cc-pagehead__desc { margin: 6px 0 0; color: var(--ink-muted); max-width: 60ch; }

/* ---------- Fortschritt ---------- */

.cc-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cc-progress__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.cc-progress__label { font-weight: 650; }
.cc-progress__value { color: var(--ink-muted); }
.cc-progress__track { height: 8px; border-radius: var(--radius-full); background: var(--surface-pressed); overflow: hidden; }
.cc-progress__fill { height: 100%; border-radius: var(--radius-full); background: var(--act); transition: width 0.25s ease-out; }
.cc-steps { display: flex; flex-direction: column; gap: 10px; }
.cc-steps__label { font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ink-muted); }
.cc-steps__bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.cc-steps__bar { height: 4px; border-radius: var(--radius-full); background: var(--surface-pressed); }
.cc-steps__bar.is-done { background: var(--act); }

/* ---------- Formularfelder ---------- */

.cc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cc-field__label { font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ink); }
.cc-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cc-field__labelrow .cc-link { font-size: 14px; line-height: 20px; }
.cc-field__optional { font-weight: 400; color: var(--ink-muted); }
.cc-field__control {
  --r: var(--radius-md);
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--field-height);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.15s ease-out;
}
.cc-field__control:hover, .cc-field__control[data-force~="hover"] { box-shadow: inset 0 0 0 1px var(--ink-muted); }
.cc-field__control:focus-within, .cc-field__control[data-force~="focus"] { box-shadow: inset 0 0 0 2px var(--focus); }
.cc-field--error .cc-field__control { box-shadow: inset 0 0 0 1px var(--critical); }
.cc-field--error .cc-field__control:focus-within, .cc-field--error .cc-field__control[data-force~="focus"] { box-shadow: inset 0 0 0 2px var(--critical); }
.cc-field--disabled .cc-field__control, .cc-field--readonly .cc-field__control { background: var(--surface); box-shadow: none; }
.cc-field--disabled .cc-field__label { color: var(--ink-disabled); }
.cc-input {
  flex: 1;
  min-width: 0;
  height: var(--field-height);
  padding: 0 16px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cc-input::placeholder { color: var(--ink-faint); opacity: 1; }
.cc-input:disabled { color: var(--ink-disabled); -webkit-text-fill-color: var(--ink-disabled); }
.cc-input::-webkit-search-cancel-button { display: none; }
textarea.cc-input { height: auto; min-height: 124px; max-height: 400px; padding: 13px 16px; resize: none; field-sizing: content; }
.cc-field__control--area { align-items: stretch; }
.cc-field__lead { flex: none; display: flex; padding-left: 14px; color: var(--ink-muted); }
.cc-field__lead .cc-icon { width: 20px; height: 20px; }
.cc-field__lead + .cc-input { padding-left: 10px; }
.cc-field__trail { flex: none; display: flex; align-items: center; gap: 2px; padding-right: 7px; }
.cc-field__trail .cc-btn { --r: var(--radius-xs); }
.cc-field__suffix { padding-right: 16px; color: var(--ink-muted); }
.cc-field__foot { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-field__error { display: flex; align-items: flex-start; gap: 6px; color: var(--critical); font-weight: 500; }
.cc-field__error .cc-icon { width: 18px; height: 18px; margin-top: 1px; }
.cc-field__count { margin-left: auto; white-space: nowrap; }
.cc-field__count.is-over { color: var(--critical); font-weight: 650; }

.cc-select__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--field-height);
  padding: 0 44px 0 16px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.cc-select__trigger.is-placeholder { color: var(--ink-faint); }
.cc-select__trigger:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.cc-select__caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.cc-select__caret .cc-icon { width: 18px; height: 18px; }
.cc-select__pop { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); }

.cc-listbox { --r: var(--radius-lg); --row-hover: color-mix(in oklab, var(--raised) 91%, var(--ink)); display: flex; flex-direction: column; padding: 6px; background: var(--raised); box-shadow: var(--shadow-pop); max-height: 320px; overflow: auto; color: var(--ink); }
.cc-option {
  --r: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.cc-option:hover, .cc-option.is-active { background: var(--row-hover); }
.cc-option[aria-selected="true"] { font-weight: 650; }
.cc-option[aria-disabled="true"] { color: var(--ink-disabled); cursor: not-allowed; background: transparent; }
.cc-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-option__desc { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.cc-option__check { color: var(--act); }
.cc-option__check .cc-icon { width: 18px; height: 18px; }

/* ---------- Auswahl: Checkbox, Radio, Switch, Karten ---------- */

.cc-check, .cc-radio { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cc-check input, .cc-radio input, .cc-switch input, .cc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cc-check__box {
  --r: var(--radius-xs);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--field);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--on-act);
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-check__box .cc-icon { width: 16px; height: 16px; }
.cc-check:hover .cc-check__box, .cc-check[data-force~="hover"] .cc-check__box { box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.cc-check.is-on .cc-check__box { background: var(--act); box-shadow: none; }
.cc-check input:focus-visible + .cc-check__box, .cc-check[data-force~="focus"] .cc-check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-check.is-error .cc-check__box { box-shadow: inset 0 0 0 1.5px var(--critical); }
.cc-check.is-disabled { cursor: not-allowed; }
.cc-check.is-disabled .cc-check__box { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.cc-check.is-disabled.is-on .cc-check__box { background: var(--ink-disabled); box-shadow: none; color: var(--bg); }
.cc-check__text { display: flex; flex-direction: column; min-width: 0; }
.cc-check__label { font-size: 16px; line-height: 24px; }
.cc-check__desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-check.is-disabled .cc-check__label, .cc-radio.is-disabled .cc-check__label { color: var(--ink-disabled); }

.cc-radio__dot {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  background: var(--field);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-radio__dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--on-act); transform: scale(0); transition: transform 0.15s ease-out; }
.cc-radio:hover .cc-radio__dot, .cc-radio[data-force~="hover"] .cc-radio__dot { box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.cc-radio.is-on .cc-radio__dot { background: var(--act); box-shadow: none; }
.cc-radio.is-on .cc-radio__dot::after { transform: scale(1); }
.cc-radio input:focus-visible + .cc-radio__dot, .cc-radio[data-force~="focus"] .cc-radio__dot { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-radio.is-disabled { cursor: not-allowed; }
.cc-radio.is-disabled .cc-radio__dot { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.cc-radio.is-disabled.is-on .cc-radio__dot { background: var(--ink-disabled); }
.cc-radio.is-error .cc-radio__dot { box-shadow: inset 0 0 0 1.5px var(--critical); }
.cc-group { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cc-group__legend { padding: 0; margin-bottom: 2px; font-size: 14px; line-height: 20px; font-weight: 650; }

.cc-switch { position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.cc-switch--end { justify-content: space-between; }
.cc-switch__track {
  flex: none;
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  transition: background-color 0.2s ease-out;
}
.cc-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 2px 4px rgba(20, 19, 23, 0.2), 0 0 1px rgba(20, 19, 23, 0.2);
  transition: transform 0.2s ease-out;
}
.cc-switch.is-on .cc-switch__track { background: var(--act); }
.cc-switch.is-on .cc-switch__track::after { transform: translateX(20px); }
.cc-switch input:focus-visible ~ .cc-switch__track, .cc-switch[data-force~="focus"] .cc-switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-switch.is-disabled { cursor: not-allowed; }
.cc-switch.is-disabled .cc-switch__track { opacity: 0.4; }
.cc-switch.is-disabled .cc-check__label { color: var(--ink-disabled); }
.cc-switch .cc-check__text { flex: 1; padding-top: 3px; }

.cc-choice {
  --r: var(--radius-lg);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}
.cc-choice:hover, .cc-choice[data-force~="hover"] { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cc-choice.is-on { box-shadow: inset 0 0 0 2px var(--ed); }
.cc-choice:has(input:focus-visible), .cc-choice[data-force~="focus"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-choice.is-disabled { cursor: not-allowed; background: var(--surface); box-shadow: none; color: var(--ink-disabled); }
.cc-choice__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-choice__title { font-size: 16px; line-height: 24px; font-weight: 650; }
.cc-choice__title--brand { font-family: var(--font-display); font-size: 19px; line-height: 24px; font-weight: 700; color: var(--ed); letter-spacing: -0.01em; }
.cc-choice__desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-choice .cc-radio__dot { margin-top: 1px; }
.cc-choice.is-on .cc-radio__dot { background: var(--act); box-shadow: none; }
.cc-choice.is-on .cc-radio__dot::after { transform: scale(1); }
.cc-choices { display: grid; gap: 10px; }

/* ---------- Code-Eingabe (Zwei-Faktor) ---------- */

.cc-code { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.cc-code__cell {
  --r: var(--radius-md);
  flex: 1 1 0;
  min-width: 0;
  max-width: 50px;
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  caret-color: var(--focus);
  outline: none;
  transition: box-shadow 0.15s ease-out;
}
.cc-code__cell:focus, .cc-code__cell.is-active { box-shadow: inset 0 0 0 2px var(--focus); }
.cc-code__gap { flex: none; width: 4px; }
.cc-code--error .cc-code__cell { box-shadow: inset 0 0 0 1px var(--critical); }
.cc-code--error .cc-code__cell:focus, .cc-code--error .cc-code__cell.is-active { box-shadow: inset 0 0 0 2px var(--critical); }
.cc-code__cell:disabled { background: var(--surface); box-shadow: none; color: var(--ink-disabled); }

/* ---------- Kalender ---------- */

.cc-cal { display: inline-flex; flex-direction: column; gap: 6px; width: max-content; align-self: flex-start; color: var(--ink); }
.cc-cal__head { display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
.cc-cal__title { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 700; }
.cc-cal__nav { display: flex; gap: 2px; }
.cc-cal__grid { display: grid; grid-template-columns: repeat(7, 40px); gap: 2px; }
.cc-cal__wd { height: 28px; display: grid; place-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.cc-cal__day {
  --r: var(--radius-sm);
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
.cc-cal__day:hover, .cc-cal__day[data-force~="hover"] { background: var(--surface); }
.cc-cal__day.is-out { color: var(--ink-disabled); }
.cc-cal__day.is-today { color: var(--ed); font-weight: 750; }
.cc-cal__day.is-selected { background: var(--act); color: var(--on-act); font-weight: 650; }
.cc-cal__day:disabled { color: var(--ink-disabled); cursor: not-allowed; background: none; }
.cc-cal__mark { position: absolute; left: 50%; bottom: 5px; width: 16px; height: 5px; transform: translateX(-50%); color: var(--ed); }
.cc-cal__day.is-selected .cc-cal__mark { color: var(--on-act); }

/* ---------- Datei ablegen ---------- */

.cc-drop {
  --r: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 20px 24px;
  border: 1.5px dashed var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.cc-drop.is-over { border: 2px solid var(--focus); background: var(--surface); padding: 19.5px 19.5px 19.5px 23.5px; }
.cc-drop.is-error { border-color: var(--critical); }
.cc-drop__icon { flex: none; color: var(--ink-muted); }
.cc-drop__icon .cc-icon { width: 28px; height: 28px; }
.cc-drop.is-over .cc-drop__icon { color: var(--focus); }
.cc-drop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-drop__title { font-weight: 650; }
.cc-drop__hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-drop.is-error .cc-drop__icon { color: var(--critical); }
.cc-drop.is-error .cc-drop__hint { color: var(--critical); font-weight: 500; }
.cc-file { display: flex; align-items: center; gap: 14px; }
.cc-file__thumb { --r: var(--radius-sm); flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); color: var(--ink-muted); }
.cc-file__thumb .cc-icon { width: 22px; height: 22px; }
.cc-file__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-file__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.cc-file__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-file__meta { color: var(--ink-muted); white-space: nowrap; }

/* ---------- Überlagerungen ---------- */

.cc-scrim { display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.cc-dialog {
  --r: var(--radius-2xl);
  position: relative;
  width: 440px;
  max-width: 100%;
  padding: var(--space-5);
  background: var(--raised);
  box-shadow: var(--shadow-dialog);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cc-dialog--wide { width: 560px; }
.cc-dialog__head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.cc-dialog__title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; }
.cc-dialog__close { margin: -6px -6px 0 0; }
.cc-dialog__body { padding: 0 4px; color: var(--ink-muted); display: flex; flex-direction: column; gap: var(--space-4); }
.cc-dialog__body p { margin: 0; }
.cc-dialog__body strong { color: var(--ink); font-weight: 650; }
.cc-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.cc-closebtn {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.cc-closebtn:hover, .cc-closebtn[data-force~="hover"] { background: var(--surface-hover); color: var(--ink); }
.cc-closebtn .cc-icon { width: 16px; height: 16px; }

.cc-sheet {
  --r: var(--radius-3xl);
  width: 100%;
  padding: 8px 24px 24px;
  border-radius: calc(var(--r) * var(--sqk)) calc(var(--r) * var(--sqk)) 0 0;
  background: var(--raised);
  box-shadow: var(--shadow-dialog);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cc-sheet__grabber { width: 36px; height: 5px; margin: 0 auto 6px; border-radius: var(--radius-full); background: var(--ink-disabled); }
.cc-sheet__head { display: flex; align-items: flex-start; gap: 12px; }
.cc-sheet__title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.cc-sheet__body { color: var(--ink-muted); display: flex; flex-direction: column; gap: var(--space-4); }
.cc-sheet__body p { margin: 0; }
.cc-sheet__actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

.cc-menu { --r: var(--radius-lg); --row-hover: color-mix(in oklab, var(--raised) 91%, var(--ink)); display: flex; flex-direction: column; width: max-content; min-width: 232px; max-width: 320px; padding: 6px; background: var(--raised); box-shadow: var(--shadow-pop); color: var(--ink); }
.cc-menu__item {
  --r: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.cc-menu__item .cc-icon { width: 20px; height: 20px; color: var(--ink-muted); }
.cc-menu__item:hover, .cc-menu__item:focus-visible, .cc-menu__item.is-active { background: var(--row-hover); outline: none; }
.cc-menu__item--danger, .cc-menu__item--danger .cc-icon { color: var(--critical); }
.cc-menu__item:disabled, .cc-menu__item:disabled .cc-icon { color: var(--ink-disabled); cursor: not-allowed; background: transparent; }
.cc-menu__end { margin-left: auto; display: flex; align-items: center; color: var(--ink-muted); font-size: 13px; }
.cc-menu__end .cc-icon { width: 18px; height: 18px; }
.cc-menu__check .cc-icon { color: var(--act); }
.cc-menu__sep { height: 1px; margin: 6px 10px; background: var(--line); }
.cc-menu__label { padding: 8px 10px 4px; font-size: 13px; line-height: 18px; font-weight: 650; color: var(--ink-muted); }

.cc-popover { --r: var(--radius-lg); width: 320px; max-width: 100%; padding: 10px; background: var(--raised); box-shadow: var(--shadow-pop); color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.cc-popover__body { padding: 6px 8px 0; display: flex; flex-direction: column; gap: 4px; }
.cc-popover__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 650; }
.cc-popover__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-popover__actions { display: flex; justify-content: flex-end; gap: 8px; }
.cc-popover--plain { padding: 16px; --r: var(--radius-lg); }

.cc-tooltip { --r: var(--radius-sm); display: inline-block; max-width: 240px; padding: 6px 10px; background: var(--tooltip); color: var(--on-tooltip); box-shadow: var(--shadow-pop); font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; pointer-events: none; }
.cc-tipwrap { position: relative; display: inline-flex; }
.cc-tipwrap > .cc-tooltip { position: absolute; z-index: 20; white-space: nowrap; }
.cc-tipwrap > .cc-tooltip--top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.cc-tipwrap > .cc-tooltip--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.cc-tipwrap > .cc-tooltip--left { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.cc-tipwrap > .cc-tooltip--right { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }

/* ---------- Rückmeldung ---------- */

.cc-notice { --r: var(--radius-lg); display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--surface); color: var(--ink); }
.cc-notice__icon { flex: none; padding: 7px 0 0 6px; color: var(--ink); }
.cc-notice__icon .cc-icon { width: 22px; height: 22px; }
.cc-notice__body { flex: 1; min-width: 0; padding: 6px 0 6px 2px; }
.cc-notice__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; }
.cc-notice__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-notice__actions { flex: none; display: flex; align-items: center; gap: 8px; align-self: center; }
.cc-notice--critical .cc-notice__icon, .cc-notice--critical .cc-notice__title { color: var(--critical); }

.cc-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-status .cc-icon { width: 18px; height: 18px; }
.cc-status--error { color: var(--critical); font-weight: 500; }
.cc-status__action { margin-left: 2px; }

.cc-loading { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.cc-loading .cc-spinner { margin-top: 2px; color: var(--act); }

.cc-poststatus { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.cc-poststatus .cc-icon { width: 18px; height: 18px; }
.cc-poststatus--published { color: var(--ink); }
.cc-poststatus--failed { color: var(--critical); }

.cc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 460px; }
.cc-empty__strich { width: 72px; height: 12px; color: var(--ed); margin-bottom: 6px; }
.cc-empty__title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; }
.cc-empty__text { margin: 0; color: var(--ink-muted); }
.cc-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* ---------- Marke ---------- */

.cc-logo { display: block; color: var(--ink); overflow: visible; }
.cc-appicon { display: block; flex: none; }
.cc-underline { position: relative; display: inline-block; white-space: nowrap; font-weight: 700; }
.cc-underline__svg { position: absolute; left: -2%; width: 104%; bottom: -0.38em; height: 0.4em; overflow: visible; pointer-events: none; color: var(--ed); }
.cc-underline__svg path { stroke-width: 0.12em; }
.cc-edname { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ed); }

/* ---------- Inhalte ---------- */

.cc-card { --r: var(--radius-xl); padding: var(--space-4); background: var(--surface); color: var(--ink); }
.cc-card--outlined { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.cc-card--lg { --r: var(--radius-3xl); padding: var(--space-6); }

.cc-coach { display: flex; flex-direction: column; gap: 14px; }
.cc-coach__head { display: flex; align-items: center; gap: 10px; padding: 2px 0 0 4px; min-height: 36px; }
.cc-coach__who { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 650; }
.cc-coach__when { font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
.cc-coach__text { margin: 0; padding: 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.005em; text-wrap: pretty; }
.cc-coach--compact .cc-coach__text { font-size: 17px; line-height: 26px; }
.cc-coach__evidence { margin: 0; padding: 0 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-coach__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-coach__state { display: flex; align-items: flex-start; gap: 12px; padding: 4px 8px; color: var(--ink-muted); }
.cc-coach__state .cc-spinner { margin-top: 3px; color: var(--act); }

.cc-post { --r: var(--radius-xl); display: flex; gap: 14px; padding: var(--space-4); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.cc-post__thumb { --r: var(--radius-md); flex: none; width: 64px; height: 80px; display: grid; place-items: center; background: color-mix(in oklab, var(--ed) 14%, var(--bg)); color: var(--ed); }
.cc-post__thumb .cc-icon { width: 24px; height: 24px; }
.cc-post__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-post__top { display: flex; align-items: flex-start; gap: 8px; }
.cc-post__title { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 22px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-post__meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-post__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.cc-post__menu { margin: -6px -6px 0 0; }

.cc-slot { --r: var(--radius-sm); display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 18px; cursor: pointer; border: 0; text-align: left; font-family: var(--font-sans); width: 100%; }
.cc-slot:hover { background: var(--surface-hover); }
.cc-slot__time { display: flex; align-items: center; gap: 5px; color: var(--ink-muted); font-weight: 500; }
.cc-slot__time .cc-icon { width: 14px; height: 14px; }
.cc-slot__title { font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cc-slot--failed .cc-slot__time { color: var(--critical); }

.cc-recap { --r: var(--radius-3xl); position: relative; flex: none; width: 270px; height: 480px; padding: var(--space-6); background: var(--ed); color: var(--on-ed); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cc-recap__kicker { font-size: 16px; line-height: 22px; font-weight: 650; }
.cc-recap__number { margin-top: 14px; font-family: var(--font-display); font-size: 84px; line-height: 0.86; font-weight: 800; letter-spacing: -0.05em; }
.cc-recap__label { font-family: var(--font-display); font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.01em; }
.cc-recap__text { font-size: 15px; line-height: 22px; }
.cc-recap__strich { width: 132px; height: 14px; }
.cc-recap__foot .cc-logo { color: inherit; }
.cc-recap__foot { margin-top: auto; padding-top: 14px; border-top: 1.5px solid color-mix(in oklab, var(--on-ed) 45%, transparent); }

.cc-avatar { --s: 40px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: var(--radius-full); overflow: hidden; background: var(--surface-pressed); color: var(--ink); font-family: var(--font-sans); font-size: calc(var(--s) * 0.38); line-height: 1; font-weight: 650; letter-spacing: -0.01em; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-avatar--workspace { --r: calc(var(--s) * 0.28); background: var(--ed); color: var(--on-ed); font-family: var(--font-display); font-weight: 800; }
.cc-avatar-stack { display: inline-flex; }
.cc-avatar-stack .cc-avatar { box-shadow: 0 0 0 2px var(--bg); }
.cc-avatar-stack .cc-avatar + .cc-avatar { margin-left: -8px; }

.cc-listhead { margin: 0 0 8px; padding: 0 16px; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ink-muted); }
.cc-listfoot { margin: 8px 0 0; padding: 0 16px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cc-list { --r: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--ink); }
.cc-lrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  text-decoration: none;
}
.cc-lrow + .cc-lrow::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--surface-pressed); }
.cc-lrow.has-lead + .cc-lrow::before, .cc-lrow + .cc-lrow.has-lead::before { left: 50px; }
button.cc-lrow, a.cc-lrow { cursor: pointer; }
button.cc-lrow:hover, a.cc-lrow:hover, .cc-lrow[data-force~="hover"] { background: var(--surface-hover); }
button.cc-lrow:focus-visible, a.cc-lrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cc-lrow__lead { flex: none; color: var(--ink-muted); display: flex; }
.cc-lrow__lead .cc-icon { width: 20px; height: 20px; }
.cc-lrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-lrow__label { font-weight: 500; }
.cc-lrow__desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-lrow__value { flex: none; color: var(--ink-muted); font-size: 15px; }
.cc-lrow__chev { flex: none; color: var(--ink-faint); }
.cc-lrow__chev .cc-icon { width: 16px; height: 16px; }
.cc-lrow--danger { color: var(--critical); }
.cc-lrow--danger .cc-lrow__lead { color: var(--critical); }

.cc-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; line-height: 20px; color: var(--ink); }
.cc-table th { height: 40px; padding: 0 12px; text-align: left; font-size: 13px; line-height: 18px; font-weight: 650; color: var(--ink-muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cc-table td { height: 56px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.cc-table th:first-child, .cc-table td:first-child { padding-left: 4px; }
.cc-table th:last-child, .cc-table td:last-child { padding-right: 4px; }
.cc-table .is-num { text-align: right; }
.cc-table .is-end { text-align: right; }
.cc-table tbody tr:hover td { background: var(--surface); }
.cc-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.cc-table__sort .cc-icon { width: 14px; height: 14px; }
.cc-table__sort[data-sorted="true"] { color: var(--ink); }
.cc-table__strong { font-weight: 650; }

.cc-plan { --r: var(--radius-xl); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.cc-plan.is-current { box-shadow: inset 0 0 0 2px var(--focus); }
.cc-plan__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 0; }
.cc-plan__note { min-height: 20px; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--link); }
.cc-plan__name { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.cc-plan__price { display: flex; align-items: baseline; gap: 6px; }
.cc-plan__amount { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; }
.cc-plan__per { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-plan__desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-plan__features { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.cc-plan__features li { display: flex; gap: 10px; }
.cc-plan__features .cc-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-muted); }

/* ---------- Diagramme ---------- */

.cc-chart { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cc-chart__legitem { display: inline-flex; align-items: center; gap: 8px; }
.cc-chart__key { display: inline-block; width: 16px; height: 2.5px; border-radius: 2px; flex: none; }
.cc-chart__plot { position: relative; width: 100%; }
.cc-chart__plot svg { display: block; overflow: visible; touch-action: none; }
.cc-chart__grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.cc-chart__tick { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-muted); }
.cc-chart__end { font-family: var(--font-sans); font-size: 13px; font-weight: 650; fill: var(--ink); }
.cc-chart__line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-chart__line--prev { stroke: var(--line-strong); }
.cc-chart__area { fill: var(--chart); opacity: 0.1; }
.cc-chart__cross { stroke: var(--ink-muted); stroke-width: 1; shape-rendering: crispEdges; }
.cc-chart__dot { fill: var(--chart); stroke: var(--bg); stroke-width: 2; }
.cc-chart__dot--prev { fill: var(--line-strong); }
.cc-chart__tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); min-width: 132px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--tooltip); color: var(--on-tooltip); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 18px; pointer-events: none; white-space: nowrap; }
.cc-chart__tiplabel { opacity: 0.8; margin-bottom: 2px; }
.cc-chart__tiprow { display: flex; align-items: center; gap: 8px; }
.cc-chart__tiprow strong { font-size: 15px; font-weight: 650; }
.cc-chart__tiprow span { opacity: 0.8; }
.cc-chart__details { font-size: 14px; line-height: 20px; }
.cc-chart__summary { display: inline-block; cursor: pointer; color: var(--ink-muted); font-weight: 600; border-radius: var(--radius-xs); list-style: none; }
.cc-chart__summary::-webkit-details-marker { display: none; }
.cc-chart__summary::before { content: "+ "; }
.cc-chart__details[open] .cc-chart__summary::before { content: "− "; }
.cc-chart__details .cc-table { margin-top: 8px; }

.cc-bars { display: flex; flex-direction: column; gap: 10px; }
.cc-bars__row { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; border-radius: var(--radius-xs); outline: none; }
.cc-bars__row:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cc-bars__label { font-size: 14px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bars__label.is-hi { color: var(--ink); font-weight: 650; }
.cc-bars__track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-bars__bar { display: block; height: 20px; border-radius: 0 4px 4px 0; transition: filter 0.15s ease-out; }
.cc-bars__bar.is-hi { background: var(--chart); }
.cc-bars__bar.is-lo { background: var(--line-strong); }
.cc-bars__bar.is-active { filter: brightness(1.08); }
.cc-bars__value { flex: none; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ink); }
.cc-chart__tip--bar { left: 60%; top: 0; }

.cc-heat { display: grid; gap: 2px; align-items: center; }
.cc-heat__col { font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: center; padding-bottom: 4px; }
.cc-heat__row { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.cc-heat__cell { position: relative; height: 30px; border-radius: 4px; outline: none; }
.cc-heat__cell.is-active, .cc-heat__cell:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); z-index: 2; }
.cc-chart__tip--cell { left: 50%; top: 0; }
.cc-heat__scale { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.cc-heat__scale i { display: block; width: 22px; height: 12px; border-radius: 3px; }
.cc-heat__scale span:first-child { margin-right: 4px; }
.cc-heat__scale span:last-child { margin-left: 4px; }

/* ---------- Layout-Hilfen ---------- */

.cc-divider { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cc-divider::before, .cc-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cc-divider:empty { gap: 0; }
.cc-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cc-hstack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Nur für Vorschauen (ccx-) ---------- */

.ccx-page { padding: 24px; }
.ccx-grid { display: grid; gap: 16px 20px; align-items: center; justify-items: start; }
.ccx-h { font-size: 13px; line-height: 18px; font-weight: 650; color: var(--ink-muted); }
.ccx-sec { display: flex; flex-direction: column; gap: 14px; }
.ccx-sec + .ccx-sec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ccx-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; color: var(--ink); }
.ccx-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ccx-frames { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.ccx-frame { display: flex; flex-direction: column; gap: 10px; }
.ccx-frame--fit { width: min-content; }
.ccx-screen > * { flex-shrink: 0; }
.ccx-phone { --r: 44px; position: relative; width: 375px; height: 780px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 0 0 9px var(--surface); display: flex; flex-direction: column; color: var(--ink); }
.ccx-status { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 34px; font-size: 15px; line-height: 20px; font-weight: 650; }
.ccx-status__bars { display: flex; gap: 5px; align-items: center; }
.ccx-status__bars i { display: block; width: 17px; height: 10px; border-radius: 3px; background: var(--ink); }
.ccx-status__bars i:first-child { width: 16px; height: 10px; border-radius: 2px; background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ccx-window { --r: 14px; position: relative; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line); display: flex; color: var(--ink); }
.ccx-scroll { flex: 1; min-height: 0; overflow: hidden; }
.ccx-float { position: relative; }

/* Aus Inline-Stilen der Creator-Coach-Komponenten erzeugt */
.ccv .ccs1{flex: 1 1 0%; min-height: 0px; overflow: hidden; padding: 0px 16px 16px; display: flex; flex-direction: column; gap: 14px;}
.ccv .ccs2{width: 87.2%;}
.ccv .ccs3{width: 37.6%;}
.ccv .ccs4{width: 24.4%;}
.ccv .ccs5{flex: 1 1 0%; min-height: 0px; overflow: hidden; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 18px;}
.ccv .ccs6{gap: 12px; flex-wrap: nowrap;}
.ccv .ccs7{--s: 40px;}
.ccv .ccs8{font-weight: 650; font-size: 15px;}
.ccv .ccs9{font-size: 13px; color: var(--ink-muted);}
.ccv .ccs10{margin: 0px;}
.ccv .ccs11{--r: var(--radius-xl); padding: 12px; background: var(--surface);}
.ccv .ccs12{--r: var(--radius-lg); height: 150px; background: color-mix(in oklab, var(--ed) 16%, var(--bg)); display: grid; place-items: center; color: var(--ed);}
.ccv .ccs13{margin: 10px 4px 2px; font-size: 14px; line-height: 20px;}
.ccv .ccs14{margin: 0px; color: var(--ink-muted); font-size: 15px;}
.ccv .ccs15{margin-top: auto;}
.ccv .ccs16{margin: 0px; font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: center;}
.ccv .ccs17{height: 40px;}
.ccv .ccs18{display: block; overflow: visible; color: var(--ed);}
.ccv .ccs19{margin: auto 0px 0px; font-size: 13px; color: var(--ink-muted);}
.ccv .ccs20{flex: 1 1 0%; min-height: 0px; overflow: hidden; padding: 28px 16px 16px; display: flex; flex-direction: column; gap: 14px;}
.ccv .ccs21{display: flex; justify-content: center;}
.ccv .ccs22{display: block; overflow: visible; color: currentcolor;}