/* Command Center nach Lisas Canvas (abgenommen 30.10.2026: "Genauso koennen wir es lassen").
   Vorlage: claude.ai/artifact/AGozn7xrRb7RNzDw3Vn3QB, Boards Main, Inbox, Project, Talk, TalkVoice,
   SignIn und die Telefon-Boards M-Home, M-Inbox, M-Talk, M-TalkKeyboard, M-Voice.
   Dieses Blatt kommt als letztes (kleid.py) und hat das letzte Wort.
   Lisa, 31.10.2026: "ich will keinen dark mode im command center ... die ganze seite soll im be intentional
   look sein". Darum nur hell, und die Farben sind die von Be Intentional (intentional-handy, console.css
   [data-brand="be"], gemessen auf beintentional.com): Navy #0A3154, Gelb #F6C443, Logo-Blau #357AAD fuer
   kleine Akzentschrift (Gelb auf Weiss hat 2,1:1), Eisblau #E4F3F9, Grund #F5FBFD, Schiefer #38566F.
   Figtree fuer Ueberschriften, Arial fuer den Rest, wie dort. Die Rollen des Canvas bleiben, nur die Werte
   wechseln; dieselben Werte gehen an die --dial-Token, damit auch die aelteren Seitenteile so aussehen. */

:root {
  --cc-navy-9: #061F36; --cc-navy-8: #0A3154; --cc-navy-85: #082A49;
  --cc-gold: #F6C443; --cc-gold-l: #F9DA78; --cc-gold-ink: #357AAD; --cc-gold-d: #E1A914; --cc-gold-soft: #E4F3F9;
  --cc-glow: #F9DA78;
  --cc-ink: #0A3154; --cc-ink-2: #38566F; --cc-mute: #536A7C; --cc-mute-2: #536A7C;
  --cc-bg: #F5FBFD; --cc-card: #FFFFFF; --cc-card-2: #FAFDFE; --cc-line: #D5E1E9; --cc-line-2: #DDE8EF; --cc-line-3: #E9F2F7;
  --cc-hover: #EEF7FB; --cc-me: #E4F3F9;
  --cc-red: #B84334; --cc-red-ink: #9A3628; --cc-red-soft: #F6E3DF;
  --cc-green: #3C7556; --cc-green-ink: #2F5E45; --cc-green-soft: #E1EEE6; --cc-calm: #EEF6F1;
  --cc-amber-ink: #6E5414; --cc-plan: #E4F3F9; --cc-grey: #8496A6;
  --cc-on-navy: #E0EDF4; --cc-on-navy-2: #9FBDD3;
  --cc-shadow: 0 1px 0 rgba(10,49,84,.06), 0 14px 30px -24px rgba(10,49,84,.40);
  --cc-shadow-up: 0 22px 44px -28px rgba(10,49,84,.50);
  --cc-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --cc-face: Figtree, "Helvetica Neue", Arial, sans-serif;
  --cc-max: 1360px;
  /* die aelteren Seitenteile (dial-design.css, ueber dial-design-mg.css auch --mg-*) */
  --dial-shell: #F5FBFD; --dial-sheet: #F5FBFD; --dial-card: #FFFFFF; --dial-panel: #F5FBFD;
  --dial-hover: #E4F3F9; --dial-row-hover: #EEF7FB;
  --dial-ink: #0A3154; --dial-ink-2: #38566F; --dial-ink-3: #536A7C;
  --dial-ink-4: rgba(10,49,84,.74); --dial-ink-5: rgba(10,49,84,.68); --dial-ink-6: rgba(10,49,84,.64);
  --dial-line: rgba(10,49,84,.24); --dial-line-soft: rgba(10,49,84,.14); --dial-line-faint: rgba(10,49,84,.08);
  --dial-struct-900: #0A3154; --dial-struct-800: #082A49; --dial-struct-700: #174D73;
  --dial-block: #0A3154; --dial-block-2: #082A49; --dial-block-3: #174D73;
  --dial-on-block: #E0EDF4; --dial-on-block-mid: #C7DAE6; --dial-on-block-dim: #9FBDD3;
  --dial-accent: #F6C443; --dial-accent-hi: #F9DA78; --dial-accent-ink: #357AAD; --dial-accent-bg: #E4F3F9;
  --dial-on-accent: #0A3154; --dial-action: #0A3154; --dial-focus: #357AAD;
  color-scheme: light;
}
/* Ueberschriften in Figtree, alles andere Arial (Be Intentional) */
body.cc h1, body.cc h2, body.cc h3, .cc-h1, .cc-h2 { font-family: var(--cc-face); }

/* ---------------------------------------------------------------- Grund */
body.cc { background: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font); }
body.cc .dd-main.cc-main { max-width: none; padding: 0; }
body.cc .dd-main > .page:has(> .cc-home), body.cc .dd-main > .page:has(> .cc-inbox),
body.cc .dd-main > .page:has(> .cc-talk) { padding: 0; max-width: none; }
body.cc a { color: inherit; }
.cc-sr { position: absolute; left: -9999px; }
.cc-gold { color: var(--cc-gold-ink); }
.cc-wrap { max-width: var(--cc-max); margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.cc-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-gold-ink); }
.cc-eyebrow--hell { color: var(--cc-gold-l); }
.cc-h1 { margin: 6px 0 0; font: 600 34px/1.15 var(--cc-face); letter-spacing: -.012em; }
.cc-h2 { margin: 0; font: 600 24px/1.25 var(--cc-face); letter-spacing: -.012em; }
.cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-more { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--cc-navy-8); }
.cc-note, .cc-src { font-size: 12.5px; color: var(--cc-mute-2); }
.cc-src { margin: 4px 0 0; line-height: 1.5; }
.cc-card { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: var(--cc-shadow); }
.cc-leer { padding: 20px; color: var(--cc-mute); font-size: 15px; }
.cc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cc-dot--gold { background: var(--cc-gold); }
.cc-dot--rot { background: var(--cc-red); }
.cc-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--cc-gold); color: var(--cc-navy-9); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.cc-imp { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px;
  background: var(--cc-red-soft); color: var(--cc-red-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cc-gold-ink); outline-offset: 2px; }
.cc-btn { min-height: 46px; box-sizing: border-box; padding: 0 20px; border-radius: 3px; background: var(--cc-navy-8); color: #fff !important;
  font: 600 14.5px var(--cc-font); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cc-navy-8); cursor: pointer; }
.cc-btn--quiet { background: var(--cc-card); color: var(--cc-navy-8) !important; border-color: #D5E1E9; font-weight: 500; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip { min-height: 38px; padding: 0 14px; border-radius: 3px; font: 600 13px var(--cc-font); cursor: pointer; border: 1px solid var(--cc-navy-8);
  background: transparent; color: var(--cc-navy-8); display: inline-flex; align-items: center; gap: 8px; }
.cc-chip span { font-variant-numeric: tabular-nums; opacity: .75; }
.cc-chip[aria-pressed="true"] { background: var(--cc-navy-8); color: #fff; }

/* Glyphen (Doors.dc.html): Ring navy, Funke gold, Stern gold */
.cc-glyph { flex: 0 0 auto; }
.cc-glyph .glow { fill: var(--cc-glow); fill-opacity: .35; opacity: 0; transition: opacity .25s; }
.cc-glyph .ring { fill: #fff; stroke: var(--cc-navy-8); stroke-width: 2.6; }
.cc-glyph--door .ring { fill: none; stroke-width: 2.2; }
.cc-glyph .g { fill: none; stroke: var(--cc-navy-8); stroke-linecap: round; stroke-linejoin: round; }
.cc-glyph .spark { fill: none; stroke: #D3A73A; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.cc-glyph .star { fill: var(--cc-gold); stroke: var(--cc-card); stroke-width: 3; paint-order: stroke; transform-origin: 60px 20px; transition: transform .3s; }
.cc-door { transition: border-color .2s, box-shadow .2s, transform .2s; }
.cc-door:hover, .cc-door:focus-visible { border-color: var(--cc-gold) !important; box-shadow: 0 22px 40px -22px rgba(10,49,84,.50) !important; transform: translateY(-3px); }
.cc-door:hover .glow, .cc-door:focus-visible .glow, .cc-row:hover .glow { opacity: 1; }
.cc-door:hover .star { transform: scale(1.18) rotate(45deg); }
.cc-door:hover .spark { stroke: #B8891E; }
@media (prefers-reduced-motion: reduce) { .cc-door, .cc-glyph .star, .cc-glyph .glow { transition: none; } .cc-door:hover { transform: none; } .cc-door:hover .star { transform: none; } }

/* ------------------------------------------------------------ die Leiste */
.cc-bar { background: linear-gradient(180deg, var(--cc-navy-9), var(--cc-navy-8)); position: relative; z-index: 50; }
.cc-bar__in { max-width: var(--cc-max); margin: 0 auto; padding: 0 32px; min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.cc-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cc-on-navy) !important; }
.cc-brand img { height: 36px; width: auto; }
.cc-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.cc-brand small { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-gold-l); }
.cc-brand b { font-size: 16px; font-weight: 600; }
.cc-nav { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 360px; }
.cc-nav a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 9px 14px; border-radius: 3px; color: var(--cc-on-navy-2) !important; border: 1px solid rgba(255,255,255,.2); }
.cc-nav a:hover { border-color: var(--cc-gold); color: #fff !important; }
.cc-nav a.is-on { background: var(--cc-gold); color: var(--cc-navy-9) !important; border-color: var(--cc-gold); }
.cc-nav a.is-on .cc-badge { background: var(--cc-navy-9); color: var(--cc-gold); }
.cc-bar__right { display: flex; align-items: center; gap: 12px; }
.cc-help { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--cc-on-navy);
  font: 600 16px var(--cc-font); cursor: pointer; }
.cc-acct { position: relative; }
.cc-acct > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--cc-on-navy); min-height: 44px; }
.cc-acct > summary::-webkit-details-marker { display: none; }
.cc-acct > summary i { width: 36px; height: 36px; border-radius: 50%; background: var(--cc-navy-8); box-shadow: 0 0 0 1.5px var(--cc-gold);
  display: grid; place-items: center; font: normal 600 13px var(--cc-font); }
.cc-acct > summary span { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; font-weight: 600; }
.cc-acct > summary small { font-size: 11px; color: var(--cc-gold-l); font-weight: 500; }
.cc-acct__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--cc-card); border: 1px solid var(--cc-line);
  border-radius: 4px; box-shadow: var(--cc-shadow-up); padding: 6px; display: flex; flex-direction: column; z-index: 60; }
.cc-acct__menu a { padding: 11px 12px; border-radius: 3px; text-decoration: none; color: var(--cc-ink) !important; font-size: 14.5px; }
.cc-acct__menu a:hover, .cc-acct__menu a.is-on { background: var(--cc-hover); }
.cc-acct__menu hr { border: 0; border-top: 1px solid var(--cc-line-2); margin: 4px 0; width: 100%; }
.cc-goldline { height: 2px; background: linear-gradient(90deg, rgba(246,196,67,0) 0%, rgba(249,218,120,.75) 25%, rgba(246,196,67,.9) 75%, rgba(246,196,67,0) 100%); }
.cc-tabs { display: none; }

/* ------------------------------------------------------------------ Home */
.cc-hero { background: linear-gradient(180deg, var(--cc-navy-8) 0%, var(--cc-navy-85) 100%); padding: 44px 0 128px; }
.cc-hero h1 { margin: 14px 0; font: 600 46px/1.08 var(--cc-face); letter-spacing: -.012em; color: var(--cc-on-navy); }
.cc-hero h1 .cc-gold { color: var(--cc-gold); }
.cc-hero p { margin: 0; max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: var(--cc-on-navy-2); }
.cc-home__main { margin-top: -92px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 48px; }
.cc-inboxcard { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--cc-shadow-up); }
.cc-inboxcard .cc-head > div { display: flex; flex-direction: column; gap: 4px; }
.cc-ib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cc-ib { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 4px; background: var(--cc-card-2); border: 1px solid var(--cc-line-2);
  text-decoration: none; color: var(--cc-ink) !important; }
.cc-ib__head { display: flex; align-items: center; gap: 12px; }
.cc-ib__name { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.cc-ib__name b { font-size: 16px; font-weight: 600; }
.cc-ib__name small, .cc-ib__txt small { font-size: 12.5px; color: var(--cc-mute); }
.cc-ib__n { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.cc-ib__n b { font-size: 30px; line-height: 1; font-weight: 600; }
.cc-ib__n small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-mute); }
.cc-ib__rows { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cc-line-2); }
.cc-ib__row { display: flex; align-items: center; gap: 10px; }
.cc-ib__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cc-ib__txt b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ib__still { font-size: 13.5px; color: var(--cc-mute); }
.cc-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--cc-navy-8); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; }
.cc-av--s { width: 30px; height: 30px; font-size: 11.5px; }
.cc-av--bild { background: var(--cc-gold-soft); overflow: hidden; }
.cc-av--bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.cc-av--geteilt { background: #3C7556; } .cc-av--mail { background: #0A3154; } .cc-av--slack { background: #357AAD; } .cc-av--whatsapp { background: #3C7556; }
.cc-ibm, .cc-appsm, .cc-only-phone, .cc-only-phone-i { display: none; }

.cc-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cc-bigdoor { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 28px 26px;
  border-radius: 4px; background: var(--cc-card); border: 1px solid var(--cc-line); box-shadow: 0 14px 32px -24px rgba(10,49,84,.40);
  text-decoration: none; color: var(--cc-ink) !important; }
.cc-door__badge { position: absolute; top: 14px; right: 14px; min-width: 26px; height: 26px; border-radius: 13px; font-size: 12.5px; }
.cc-door__n { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--cc-gold-ink); }
.cc-bigdoor strong { font-size: 21px; font-weight: 600; letter-spacing: -.008em; }
.cc-door__d { font-size: 14.5px; line-height: 1.5; color: var(--cc-mute); max-width: 30ch; }
.cc-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cc-navy-8); transition: gap .2s, color .2s; }
.cc-door:hover .cc-go { gap: 12px; color: var(--cc-gold-ink); }

.cc-alarms, .cc-appsec { display: flex; flex-direction: column; gap: 14px; }
.cc-alarm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cc-alarm { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 4px; background: var(--cc-card); box-shadow: var(--cc-shadow);
  text-decoration: none; color: var(--cc-ink) !important; }
.cc-alarm__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cc-alarm__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cc-alarm__seit { font-size: 12px; color: var(--cc-mute); }
.cc-alarm__mid { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.cc-alarm__mid b { font-size: 34px; line-height: 1; font-weight: 600; white-space: nowrap; }
.cc-alarm__mid span { font-size: 15px; font-weight: 600; line-height: 1.35; }
.cc-alarm--rot .cc-alarm__kind, .cc-alarm--rot b { color: var(--cc-red-ink); } .cc-alarm--rot .cc-dot { background: var(--cc-red); }
.cc-alarm--gelb .cc-alarm__kind, .cc-alarm--gelb b { color: var(--cc-amber-ink); } .cc-alarm--gelb .cc-dot { background: var(--cc-gold-d); }
.cc-alarm--ruhig { background: var(--cc-calm); } .cc-alarm--ruhig .cc-alarm__kind, .cc-alarm--ruhig b { color: var(--cc-green-ink); }
.cc-alarm--ruhig .cc-dot { background: var(--cc-green); }
/* Sparkline unter der Zahl (Main-Board): Farbe der Stufe, ohne Reihe ein leiser Satz */
.cc-alarm__spark { display: block; color: var(--cc-red); }
.cc-alarm--gelb .cc-alarm__spark { color: var(--cc-gold-d); }
.cc-alarm--ruhig .cc-alarm__spark { color: var(--cc-green); }
span.cc-alarm__spark { height: 36px; display: flex; align-items: flex-end; font-size: 12px; color: var(--cc-mute); }

.cc-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.cc-app { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--cc-card), var(--cc-card-2));
  box-shadow: var(--cc-shadow); text-decoration: none; color: var(--cc-ink) !important; }
.cc-app[hidden] { display: none; }
.cc-app__top { display: flex; align-items: center; gap: 12px; }
.cc-app__logo { width: 44px; height: 44px; border-radius: 10px; background: var(--cc-navy-8); color: var(--cc-gold-l); display: grid; place-items: center;
  font-size: 14px; font-weight: 700; box-shadow: 0 0 0 1px rgba(10,49,84,.08); flex: 0 0 auto; }
.cc-app__logo--s { width: 24px; height: 24px; border-radius: 6px; font-size: 9px; margin-right: -6px; box-shadow: 0 0 0 2px var(--cc-calm); }
.cc-app__name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cc-app__name b { font-size: 17px; font-weight: 600; }
.cc-app__name small { font-size: 12px; color: var(--cc-mute); }
.cc-state { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px;
  background: var(--cc-line-2); color: var(--cc-mute); white-space: nowrap; }
.cc-state--live { background: var(--cc-green-soft); color: var(--cc-green-ink); }
.cc-state--staging { background: var(--cc-gold-soft); color: var(--cc-amber-ink); }
.cc-state--down { background: var(--cc-red-soft); color: var(--cc-red-ink); }
.cc-state--building { background: var(--cc-plan); color: var(--cc-navy-8); }
.cc-app__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-variant-numeric: tabular-nums; }
.cc-app__nums > span { display: flex; flex-direction: column; gap: 2px; }
.cc-lbl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-mute); }
.cc-app__nums b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.cc-app__nums b.cc-nm { font-size: 16px; color: var(--cc-mute); font-weight: 600; line-height: 1.6; }
.cc-app__nums small:not(.cc-lbl) { font-size: 12px; color: var(--cc-mute); }
.cc-app__health { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--cc-line-2); }
.cc-app__hl { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--cc-mute); }
.cc-h { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cc-h--ok { color: var(--cc-green-ink); } .cc-h--ok .cc-dot { background: var(--cc-green); }
.cc-h--hoch { color: var(--cc-amber-ink); } .cc-h--hoch .cc-dot { background: var(--cc-gold-d); }
.cc-h--tief { color: var(--cc-red-ink); } .cc-h--tief .cc-dot { background: var(--cc-red); }
.cc-h--keine { color: var(--cc-mute); } .cc-h--keine .cc-dot { background: var(--cc-grey); }
.cc-range { position: relative; height: 8px; border-radius: 4px; background: var(--cc-line-2); display: block; }
.cc-range__band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(60,117,86,.28); }
.cc-range__mark { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--cc-green); }
.cc-range__mark--hoch { background: var(--cc-gold-d); } .cc-range__mark--tief { background: var(--cc-red); }

/* ----------------------------------------------------------------- Inbox */
.cc-inbox { padding-top: 32px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 22px; }
.cc-ihead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cc-ibody { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cc-list { flex: 999 1 560px; min-width: 0; overflow: hidden; }
.cc-group__l { padding: 12px 20px; background: var(--cc-card-2); border-bottom: 1px solid var(--cc-line-2); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cc-mute); }
.cc-group[hidden] { display: none; }
.cc-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--cc-line-3); text-decoration: none;
  color: var(--cc-ink) !important; background: var(--cc-card); transition: background .15s; }
.cc-row[hidden] { display: none; }
.cc-row:hover { background: var(--cc-hover); }
.cc-row.is-on { background: var(--cc-hover); box-shadow: inset 3px 0 0 var(--cc-gold); }
.cc-row__src .cc-glyph .ring { stroke-width: 3.4; }
.cc-row__av { position: relative; flex: 0 0 auto; }
.cc-row__mini { display: none; position: absolute; right: -4px; bottom: -4px; }
.cc-row__mini circle { fill: #fff; stroke: var(--cc-navy-8); stroke-width: 5; }
.cc-row__mini path { fill: none; stroke: var(--cc-navy-8); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cc-row__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-row__wer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cc-mute); }
.cc-row__t { font-size: 15px; font-weight: 500; line-height: 1.35; }
.cc-row.is-neu .cc-row__t { font-weight: 600; }
.cc-row__s { font-size: 13px; color: var(--cc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-row__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: var(--cc-mute); font-variant-numeric: tabular-nums; }
.cc-aside { flex: 1 1 380px; max-width: 460px; padding: 24px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.cc-aside__who { display: flex; align-items: center; gap: 10px; }
.cc-aside__who span { display: flex; flex-direction: column; }
.cc-aside__who b { font-size: 14px; font-weight: 600; }
.cc-aside__who small { font-size: 12.5px; color: var(--cc-mute); }
.cc-aside h2 { margin: 0; font: 600 22px/1.3 var(--cc-face); letter-spacing: -.01em; }
.cc-aside__note { padding: 14px 16px; border-radius: 4px; background: var(--cc-me); font-size: 15px; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.cc-aside__note span { white-space: pre-line; }
.cc-aside__note small { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-mute); }
.cc-aside__act { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-aside__foot { font-size: 12.5px; color: var(--cc-mute); }

/* ------------------------------------------------------------------ Talk */
.cc-talk { max-width: var(--cc-max); margin: 0 auto; padding: 28px 32px 40px; box-sizing: border-box; display: grid;
  grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.cc-convs { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cc-convs__neu { justify-content: center; }
.cc-convs__find input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border-radius: 3px; border: 1px solid #D5E1E9;
  background: var(--cc-card); color: var(--cc-ink); font: 15px var(--cc-font); }
.cc-convs__g { display: flex; flex-direction: column; gap: 4px; }
.cc-convs__l { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-mute); padding: 6px 2px; }
.cc-conv { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 4px; text-decoration: none; color: var(--cc-ink) !important; }
.cc-conv:hover { background: var(--cc-card); }
.cc-conv.is-on { background: var(--cc-card); box-shadow: inset 3px 0 0 var(--cc-gold), 0 8px 20px -16px rgba(10,49,84,.36); }
.cc-conv__t { display: flex; justify-content: space-between; gap: 8px; }
.cc-conv__t b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-conv__t small { font-size: 12px; color: var(--cc-mute); flex: 0 0 auto; }
.cc-conv__s { font-size: 13px; color: var(--cc-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-talk__main { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: 0 24px 50px -30px rgba(10,49,84,.40);
  min-width: 0; overflow: hidden; }
.cc-talk__main .chat.raum { padding: 0; }
.cc-talk__main .raum__kopf { padding: 22px 40px 18px; border-bottom: 1px solid var(--cc-line-2); }
.cc-talk__main .raum__zurueck { font: 500 13px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cc-mute) !important; text-decoration: none; }
.cc-talk__main .raum__zurueck::before { content: "\2190  "; }
.cc-talk__main .raum__titel { font: 600 28px/1.2 var(--cc-face) !important; letter-spacing: -.012em; color: var(--cc-ink); margin: 6px 0 0; }
.cc-talk__main .raum__verlauf { padding: 24px 40px; }
.cc-start { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 20px; background: var(--cc-gold-soft);
  font-size: 13.5px; color: var(--cc-amber-ink); margin: 0 0 18px; }
.cc-start .cc-glyph .ring { fill: #fff; stroke-width: 4; }
.cc-start b { font-weight: 600; color: var(--cc-ink); }
.cc-talk__main .raum__du { background: var(--cc-me); color: var(--cc-ink); border-radius: 4px 4px 1px 4px; }
.cc-talk__main .raum__dial .raum__kern { font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--cc-navy-8); }
.cc-talk__main .raum__wahl .btn { min-height: 44px; border: 1px solid var(--cc-navy-8); background: var(--cc-card); color: var(--cc-navy-8);
  border-radius: 3px; font: 500 15px var(--cc-font); }
.cc-talk__main .raum__wahl .btn:hover { background: var(--cc-navy-8); color: #fff; }
.cc-talk__main form.raum__feld { border-top: 1px solid var(--cc-line); background: var(--cc-card-2); padding: 16px 40px 20px; }
.cc-talk__main .raum__senden { background: var(--cc-navy-8) !important; color: #fff !important; border-radius: 3px !important; }
.cc-talk__main .raum__senden::after { content: "  \2192"; color: var(--cc-gold); }
.cc-talk__main .dial-stimme-knopf.talk { border: 1px solid var(--cc-gold) !important; background: var(--cc-gold-soft) !important; color: var(--cc-navy-8) !important; border-radius: 22px !important; }
.cc-tor { margin-bottom: 16px; }

/* ----------------------------------------------------- Projekt (Project.dc.html) */
body.cc .pagehead h1, body.cc .band__label h2 { font-family: var(--cc-font); color: var(--cc-ink); }
body.cc .stat { background: linear-gradient(180deg, var(--cc-card), var(--cc-card-2)); border-radius: 4px; box-shadow: var(--cc-shadow); }

/* ---------------------------------------------------------------- Telefon */
@media (max-width: 760px) {
  .cc-wrap { padding: 0 16px; }
  .cc-bar__in { padding: calc(env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    min-height: 56px; gap: 10px; flex-wrap: nowrap; }
  .cc-brand img { height: 28px; }
  .cc-brand small { font-size: 9.5px; } .cc-brand b { font-size: 15px; }
  .cc-nav, .cc-help, .cc-acct > summary span { display: none; }
  .cc-bar__right { margin-left: auto; }
  .cc-acct > summary i { width: 34px; height: 34px; font-size: 12px; }
  .cc-acct__menu { position: fixed; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); }

  .cc-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-top: 1px solid var(--cc-line); }
  .cc-tabs > a, .cc-tabs > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--cc-mute); font: 500 10.5px/1.1 var(--cc-font);
    text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
  .cc-tabs svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cc-tabs > a.is-on { color: var(--cc-navy-9); background: #FBF0D2; }
  .cc-tabs > a.is-on svg { stroke-width: 2.1; }
  .cc-tabs .cc-badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; }
  body.cc .dd-main.cc-main { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body.cc .dd-main > .page { padding: 16px 16px 24px; }

  /* Home (M-Home) */
  .cc-hero { padding: 16px 0 52px; }
  .cc-hero h1 { margin: 4px 0 0; font-size: 25px; line-height: 1.15; }
  .cc-hero h1 .cc-gold { font-size: 21px; }
  .cc-hero p { display: none; }
  .cc-home__main { margin-top: -38px; gap: 12px; padding-bottom: 16px; }
  .cc-inboxcard, .cc-only-desk { display: none; }
  .cc-only-phone { display: block; }
  .cc-ibm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 4px; background: var(--cc-card); border: 1px solid var(--cc-line);
    box-shadow: 0 16px 34px -24px rgba(10,49,84,.50); text-decoration: none; color: var(--cc-ink) !important; }
  .cc-ibm__top { display: flex; justify-content: space-between; align-items: baseline; }
  .cc-ibm__top b { font-size: 16px; font-weight: 600; }
  .cc-ibm__top small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-navy-8); }
  .cc-ibm__row { display: flex; align-items: center; gap: 10px; padding-top: 9px; border-top: 1px solid var(--cc-line-2); }
  .cc-ibm__row .cc-glyph .ring { stroke-width: 3.4; }
  .cc-ibm__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .cc-ibm__txt b { font-size: 13px; font-weight: 600; }
  .cc-ibm__txt small { font-size: 12.5px; color: var(--cc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-ibm__n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
  .cc-ibm .cc-dot--rot { width: 8px; height: 8px; }
  .cc-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cc-bigdoor { padding: 12px 6px 10px; gap: 4px; box-shadow: none; }
  .cc-bigdoor .cc-glyph { width: 58px; height: 58px; }
  .cc-bigdoor strong { font-size: 13.5px; line-height: 1.2; }
  .cc-door__n, .cc-door__d, .cc-go { display: none; }
  .cc-door__badge { top: 6px; right: 6px; min-width: 20px; height: 20px; font-size: 11px; }
  .cc-alarms { gap: 6px; }
  .cc-alarms .cc-head .cc-h2 { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-mute); }
  .cc-alarms .cc-head .cc-h2 .cc-gold, .cc-alarms .cc-note { display: none; }
  .cc-alarm-grid { grid-template-columns: 1fr; gap: 6px; }
  .cc-alarm { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(10,49,84,.06); }
  .cc-alarm--ruhig { display: none; }
  .cc-alarm__top { display: contents; }
  .cc-alarm__kind { font-size: 0; gap: 0; } .cc-alarm__kind .cc-dot { width: 9px; height: 9px; }
  .cc-alarm__seit, .cc-alarm .cc-alarm__spark { display: none; }
  .cc-alarm__mid { gap: 10px; align-items: center; }
  .cc-alarm__mid b { font-size: 17px; }
  .cc-alarm__mid span { font-size: 13.5px; font-weight: 400; line-height: 1.3; }
  .cc-appsm { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; background: var(--cc-calm); text-decoration: none; color: var(--cc-ink) !important; }
  .cc-appsm__logos { display: flex; }
  .cc-appsm > span:nth-child(2) { margin-left: 8px; font-size: 13.5px; }
  .cc-appsm b { font-weight: 600; color: var(--cc-green-ink); }
  .cc-appsm small { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-navy-8); }

  /* Inbox (M-Inbox): Kopf steht, nur die Liste scrollt */
  .cc-inbox { padding-top: 16px; padding-bottom: 0; gap: 10px; }
  .cc-ihead .cc-eyebrow, .cc-ihead .cc-h1:not(.cc-only-phone-i) { display: none; }
  .cc-only-phone-i { display: block; font-size: 24px; margin: 0; }
  .cc-ihead { gap: 10px; }
  .cc-ihead .cc-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .cc-ihead .cc-chips::-webkit-scrollbar { display: none; }
  .cc-ihead .cc-chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; white-space: nowrap; }
  .cc-aside { display: none; }
  .cc-list { box-shadow: none; }
  .cc-group__l { padding: 8px 12px; }
  .cc-row { padding: 12px; gap: 10px; }
  .cc-row__src { display: none; }
  .cc-row__mini { display: block; }
  .cc-row__wer { font-size: 12px; }
  .cc-row__t { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-row__s { display: none; }
  .cc-row__r { font-size: 11.5px; }
  .cc-imp { font-size: 9.5px; padding: 2px 5px; letter-spacing: .1em; }
  .cc-inbox > .cc-src { padding-bottom: 16px; }

  /* Talk: die Liste ist die Seite; ein Gespraech fuellt den Schirm (M-Talk) */
  .cc-talk { display: block; padding: 0; }
  .cc-convs { position: static; max-height: none; padding: 16px; }
  .cc-talk--raum .cc-convs, .cc-talk--neu:not(.cc-talk--liste) .cc-convs { display: none; }
  .cc-talk--liste .cc-talk__main { display: none; }
  .cc-talk__main { border: 0; border-radius: 0; box-shadow: none; }

  /* Der Raum wie Be Intentionals Room.tsx: fest auf dem sichtbaren Teil (--vvtop, --vvh setzt
     cc-design.js aus visualViewport). Mit offener Tastatur endet er an ihr: das Feld sitzt darauf,
     ohne Sprung und ohne Luecke. Keine Leiste unten, kein Kopf der App; nur der Faden scrollt. */
  body.cc-im-raum .cc-tabs, body.cc-im-raum .cc-bar, body.cc-im-raum .dd-install { display: none; }
  body.cc-im-raum .dd-main.cc-main { padding: 0; }
  body.cc-im-raum .dd-main > .page { padding: 0; }
  /* dial-design.css haelt unten Platz fuer die Leiste frei (body.dd); im Raum gibt es keine, sonst scrollt die Seite 61px */
  body.dd.cc-im-raum { padding-bottom: 0; }
  body.cc-im-raum .cc-talk__main { position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100dvh);
    display: flex; flex-direction: column; background: var(--cc-card); z-index: 40; }
  body.cc-im-raum .cc-talk__main .chat.raum { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
  body.cc-im-raum .raum__kopf { flex: 0 0 auto; background: var(--cc-navy-9); color: var(--cc-on-navy); padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px 4px !important;
    border: 0 !important; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px; position: relative; }
  .kb-open body.cc-im-raum .raum__kopf { padding-top: 6px !important; }
  body.cc-im-raum .raum__kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, rgba(246,196,67,0), rgba(249,218,120,.75) 25%, rgba(246,196,67,.9) 75%, rgba(246,196,67,0)); }
  body.cc-im-raum .raum__zurueck { width: 44px; height: 44px; display: grid; place-items: center; font-size: 0 !important; color: var(--cc-on-navy) !important; }
  body.cc-im-raum .raum__zurueck::before { content: ""; width: 12px; height: 12px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateX(3px) rotate(45deg); }
  body.cc-im-raum .raum__titel { font-size: 16px !important; margin: 0 !important; color: var(--cc-on-navy) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.cc-im-raum .raum__kopfknoepfe { grid-column: 3; }
  body.cc-im-raum .raum__kopfknoepfe summary { color: var(--cc-on-navy) !important; background: transparent !important; border-color: rgba(255,255,255,.3) !important; min-height: 36px; }
  body.cc-im-raum .raum__verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 16px 16px 12px !important; }
  body.cc-im-raum form.raum__feld { flex: 0 0 auto; position: static !important; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--cc-card-2); border-top: 1px solid var(--cc-line); }
  .kb-open body.cc-im-raum form.raum__feld { padding-bottom: 8px !important; }
  body.cc-im-raum .raum__text { font-size: 16px !important; min-height: 44px; }
  /* beim Tippen klappt die Werkzeugreihe weg, es bleiben Feld und Send (M-TalkKeyboard) */
  .kb-open body.cc-im-raum form.raum__feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
  .kb-open body.cc-im-raum .raum__leiste { display: contents; }
  .kb-open body.cc-im-raum .raum__leiste > :not(.raum__senden) { display: none !important; }
  .kb-open body.cc-im-raum .raum__warte, .kb-open body.cc-im-raum .raum__anhang { grid-column: 1 / -1; }
}

/* die Meldung nach einem Knopf (Teilen, Freigabe), oben im Faden */
.cc-meldung { margin: 0 0 16px; padding: 12px 16px; border-radius: 4px; background: var(--cc-gold-soft); color: var(--cc-amber-ink); font-size: 14.5px; }

/* der Avatar oben: gegen die alten Regeln von .dd-acct (dial-design.css) */
.cc-acct.dd-acct > summary { padding: 0; border-radius: 0; color: var(--cc-on-navy); }
.cc-acct.dd-acct > summary:hover { background: transparent; }
.cc-acct.dd-acct > summary > i { color: var(--cc-on-navy); background: var(--cc-navy-8); box-shadow: 0 0 0 1.5px var(--cc-gold); width: 36px; height: 36px; font: normal 600 13px var(--cc-font); }
.cc-acct.dd-acct > summary > span { display: flex; font-size: 14px; }
.cc-acct.dd-acct > summary small { font-family: var(--cc-font); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--cc-gold-l); font-weight: 500; }
.cc-acct.dd-acct > summary::after { border-color: var(--cc-on-navy-2); }
@media (max-width: 760px) { .cc-acct.dd-acct > summary::after { display: none; } .cc-acct.dd-acct > summary > i { width: 34px; height: 34px; font-size: 12px; } }
.cc-btn[hidden], .cc-leer[hidden] { display: none; }

/* was auf ein Ja wartet, klein ueber der Gespraechsliste */
.cc-gate { border: 1px solid var(--cc-line); border-radius: 4px; background: var(--cc-card); }
.cc-gate > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; box-sizing: border-box; }
.cc-gate > summary::-webkit-details-marker { display: none; }
.cc-gate > summary .cc-badge { margin-left: auto; }
.cc-gate__list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; border-top: 1px solid var(--cc-line-2); }
.cc-gate__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--cc-line-3); color: var(--cc-ink) !important; }
.cc-gate__row:hover { background: var(--cc-hover); }
.cc-gate__row b { font-size: 13.5px; font-weight: 600; }
.cc-gate__row small { font-size: 12.5px; color: var(--cc-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-gate .cc-src { padding: 8px 14px 12px; margin: 0; }

/* ---------------------------------------- der Faden wie Talk.dc.html: Antworten offen, Frage als Blase */
.cc-talk__main .raum__zuege { display: flex; flex-direction: column; gap: 22px; }
.cc-talk__main .raum__dial, .cc-talk__main .raum__live { background: transparent; box-shadow: none; padding: 0; max-width: 760px; border-radius: 0; }
.cc-talk__main .raum__live:not([data-ruht]) { padding: 14px 0; }
.cc-talk__main .raum__wer { font: 600 10.5px var(--cc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cc-mute); margin-bottom: 8px; }
.cc-talk__main .raum__du { padding: 12px 16px; background: var(--cc-me); box-shadow: none; font-size: 16px; line-height: 1.55; max-width: 74%; border-radius: 4px 4px 1px 4px; }
.cc-talk__main .raum__du::before { content: "You wrote"; font: 600 10.5px var(--cc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cc-mute); top: -18px; }
/* geteiltes Gespraech: wer anders fragte, steht mit Namen da; eine Quelle direkt gefragt (Bahn Linse): ihr Etikett */
.cc-talk__main .raum__du:not([data-wer="You"])::before { content: attr(data-wer) " wrote"; }
.cc-talk__main .raum__du.raum__du--direkt::before { content: attr(data-wer); }
.cc-talk__main .raum__fakten li, .cc-talk__main .raum__seite, .cc-talk__main .raum__empf, .cc-talk__main .raum__rueck { font-size: 16px; line-height: 1.55; color: var(--cc-ink); }
.cc-talk__main .raum__marke { color: var(--cc-gold-ink); font-family: var(--cc-font); font-weight: 600; }
.cc-talk__main .raum__kosten { color: var(--cc-mute-2); }
.cc-talk__main .raum__wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cc-talk__main .raum__text { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; border-radius: 4px; border: 1px solid #D5E1E9;
  background: var(--cc-card); font: 16px/1.5 var(--cc-font); color: var(--cc-ink); resize: none; }
.cc-talk__main .raum__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cc-talk__main .raum__klammer, .cc-talk__main .dial-sprechen-knopf.speak { min-height: 44px; border: 1px solid #D5E1E9 !important; background: var(--cc-card) !important;
  color: var(--cc-navy-8) !important; border-radius: 3px !important; font: 600 13.5px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.cc-talk__main .dial-stimme-knopf.talk { min-height: 44px; font: 600 13.5px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.cc-talk__main .raum__taste { margin-left: auto; font-size: 12.5px; color: var(--cc-mute-2); }
.cc-talk__main .raum__senden { min-height: 44px; padding: 0 20px !important; font: 600 14.5px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
@media (max-width: 760px) {
  .cc-talk__main .raum__taste { display: none; }
  .cc-talk__main .raum__senden { margin-left: auto; }
  .cc-talk__main .dial-stimme-knopf.talk span { font-size: 0; }
  .cc-talk__main .dial-stimme-knopf.talk span::after { content: "Talk"; font-size: 13.5px; }
  .cc-talk__main .raum__du { max-width: 82%; font-size: 15px; padding: 10px 14px; }
  .cc-talk__main .raum__du::before { display: none; }
  .cc-talk__main .raum__dial .raum__kern { font-size: 18px; }
  .cc-talk__main .raum__fakten li, .cc-talk__main .raum__seite, .cc-talk__main .raum__empf { font-size: 15px; }
}

/* der gepunktete Kopf (dial-kopf.js) gehoert in den Faden, nicht auf Home und Inbox */
.page > .dial-kopf, .cc-home .dial-kopf, .cc-inbox .dial-kopf { display: none !important; }
@media (max-width: 760px) { .cc-acct.dd-acct > summary > span { display: none; } }

/* -------------------------------------------- Sprechen: TalkVoice.dc.html und M-Voice.dc.html
   Das Fenster und seine Knoepfe baut stimme-chat.js (Vertrag der Stimm-Bahn); hier nur das Kleid.
   html body vorn, weil das Fenster sein eigenes Stylesheet spaeter in den Kopf haengt. */
html body #dial-raum { background: var(--cc-bg); }
html body #dial-raum .dl-in { width: min(1040px, calc(100vw - 64px)); height: calc(100vh - 56px); height: calc(100dvh - 56px); margin: 28px auto; padding: 0;
  align-items: stretch; background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(10,49,84,.40); font-family: var(--cc-font); }
html body #dial-raum .dl-top { flex: 0 0 auto; padding: 22px 40px 18px; border-bottom: 1px solid var(--cc-line-2); display: grid;
  grid-template-columns: 1fr auto; grid-template-areas: "eyebrow x" "titel x"; row-gap: 6px; align-items: center; box-sizing: border-box; }
html body #dial-raum .dl-eyebrow { grid-area: eyebrow; font: 600 11px var(--cc-font) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--cc-gold-ink) !important; }
html body #dial-raum .dl-eyebrow::before { display: none; }
html body #dial-raum .dl-eyebrow { font-size: 0 !important; }
html body #dial-raum .dl-eyebrow::after { content: "Talking out loud"; font-size: 11px; }
html body #dial-raum .cc-vtitel { grid-area: titel; margin: 0; font: 600 28px/1.2 var(--cc-face); letter-spacing: -.012em; color: var(--cc-ink); }
html body #dial-raum .dl-x { grid-area: x; min-height: 44px; padding: 0 16px; border: 1px solid #D5E1E9 !important; background: var(--cc-card) !important;
  color: var(--cc-navy-8) !important; font: 500 13.5px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 3px; }
html body #dial-raum .dl-feed { flex: 1 1 auto; border: 0; padding: 24px 40px; gap: 12px; }
html body #dial-raum .dl-hint { color: var(--cc-mute); font: 15px var(--cc-font); }
html body #dial-raum .dl-feed #dial-live-faden { gap: 12px; }
html body #dial-raum .dl-feed #dial-live-faden .blase { max-width: 74%; padding: 12px 16px; border-radius: 4px; font: 16px/1.55 var(--cc-font); text-align: left; }
html body #dial-raum .dl-feed #dial-live-faden .blase.du { background: var(--cc-me); color: var(--cc-ink); }
html body #dial-raum .dl-feed #dial-live-faden .blase.dial { background: var(--cc-navy-8); color: var(--cc-on-navy); font-size: 16px; }
html body #dial-raum .dl-feed #dial-live-faden .blase.dial.unterbrochen::after { color: var(--cc-gold-l); font: 600 12px var(--cc-font); }
html body #dial-raum .dl-feed #dial-live-faden .notiz { color: var(--cc-amber-ink); background: var(--cc-gold-soft); padding: 10px 14px; border-radius: 3px;
  font: 14px var(--cc-font); letter-spacing: 0; text-transform: none; align-self: flex-start; }
html body #dial-raum .cc-vblock { flex: 0 0 auto; background: linear-gradient(180deg, var(--cc-navy-8), var(--cc-navy-9)); color: var(--cc-on-navy);
  padding: 22px 40px 24px; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "orb stand" "netz netz" "dock dock";
  column-gap: 22px; row-gap: 14px; align-items: center; }
html body #dial-raum .cc-vblock .dl-orb { grid-area: orb; width: 64px; height: 64px; margin: 0; }
html body #dial-raum .cc-vblock .dl-orb .o, html body #dial-raum .cc-vblock .dl-orb .w { inset: 12px; }
html body #dial-raum .cc-vblock .dl-stand { grid-area: stand; margin: 0; text-align: left; font: 500 18px/1.45 var(--cc-font); font-style: normal; color: #fff; }
html body #dial-raum .cc-vblock .dl-netz { grid-area: netz; }
html body #dial-raum .cc-vblock .dl-dock { grid-area: dock; align-items: stretch; padding: 0; }
html body #dial-live-bar.im-raum { background: transparent; justify-content: flex-start; gap: 10px; padding: 0; }
html body #dial-live-bar.im-raum .punkt { display: none; }
html body #dial-live-bar.im-raum select { min-height: 46px; border: 1px solid rgba(255,255,255,.3); background: transparent; border-radius: 3px; font: 14px var(--cc-font); }
html body #dial-live-bar.im-raum button { height: 46px; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); background: transparent; font-size: 0; padding: 0 18px; }
html body #dial-live-bar.im-raum button::after { font: 600 14px var(--cc-font); color: #fff; }
html body #dial-live-bar.im-raum button.pause::after { content: "Pause"; }
html body #dial-live-bar.im-raum button.pause.aktiv::after { content: "Continue"; color: var(--cc-navy-9); }
html body #dial-live-bar.im-raum button.stopp::after { content: "Stop talking"; }
html body #dial-live-bar.im-raum button.mic::after { content: "Mute me"; }
html body #dial-live-bar.im-raum button.mic.stumm::after { content: "Unmute"; color: var(--cc-navy-9); }
html body #dial-live-bar.im-raum button.hoeren::after { content: "Tap to hear"; color: var(--cc-navy-9); }
html body #dial-live-bar.im-raum button.ende { margin-left: auto; background: var(--cc-gold); border-color: var(--cc-gold); }
html body #dial-live-bar.im-raum button.ende::after { content: "End and save as text"; color: var(--cc-navy-9); font-weight: 700; }
html body #dial-raum .dl-tippen .dl-feld { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 3px; font: 16px var(--cc-font); }
html body #dial-raum .dl-tippen .dl-senden { background: var(--cc-gold) !important; color: var(--cc-navy-9) !important; border-radius: 3px; font: 600 14px var(--cc-font) !important; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  html body #dial-raum .dl-in { width: 100vw; height: var(--vvh, 100dvh); margin: 0; border: 0; border-radius: 0; }
  html body #dial-raum .dl-top { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 16px; background: var(--cc-navy-9); border: 0; }
  html body #dial-raum .dl-eyebrow { color: var(--cc-gold-l) !important; }
  html body #dial-raum .cc-vtitel { font-size: 16px; color: var(--cc-on-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #dial-raum .dl-x { background: transparent !important; color: var(--cc-on-navy) !important; border-color: rgba(255,255,255,.3) !important; }
  html body #dial-raum .dl-feed { padding: 14px; justify-content: flex-end; }
  html body #dial-raum .dl-feed #dial-live-faden .blase { max-width: 82%; font-size: 14.5px; padding: 9px 12px; }
  html body #dial-raum .cc-vblock { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr;
    grid-template-areas: "orb" "stand" "netz" "dock"; justify-items: center; }
  html body #dial-raum .cc-vblock .dl-orb { width: 92px; height: 92px; }
  html body #dial-raum .cc-vblock .dl-orb .o, html body #dial-raum .cc-vblock .dl-orb .w { inset: 18px; }
  html body #dial-raum .cc-vblock .dl-stand { text-align: center; font-size: 16px; }
  html body #dial-raum .cc-vblock .dl-dock { width: 100%; }
  html body #dial-live-bar.im-raum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  html body #dial-live-bar.im-raum select { grid-column: 1 / -1; }
  html body #dial-live-bar.im-raum button { height: 56px; padding: 0 4px; }
  html body #dial-live-bar.im-raum button::after { font-size: 12.5px; }
  html body #dial-live-bar.im-raum button.ende { grid-column: 1 / -1; margin: 0; height: 50px; }
  html body #dial-live-bar.im-raum button.ende::after { font-size: 15px; }
}

/* der Raum auf dem Telefon: die Seite darunter scrollt nicht mit */
@media (max-width: 760px) {
  html:has(body.cc-im-raum), body.cc-im-raum { overflow: hidden; height: 100%; overscroll-behavior: none; }
  body.cc-im-raum form.raum__feld { border-radius: 0 !important; box-shadow: none !important; }
  body.cc-im-raum .raum__kopfknoepfe summary { min-height: 36px !important; padding: 0 10px !important; font: 600 12px var(--cc-font) !important; letter-spacing: .08em; }
}
html body #dial-live-bar.im-raum button::after { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------- Projekt: Project.dc.html (Kopf, Reiter, Kacheln) */
body.cc .dd-main > .page:has(.cc-phead) { padding: 0 0 64px; max-width: none; }
.page:has(.cc-phead) > :not(.cc-phead) { max-width: var(--cc-max); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.cc-phead { background: var(--cc-card-2); border-bottom: 1px solid var(--cc-line); margin-bottom: 32px; }
.cc-phead__in { max-width: var(--cc-max); margin: 0 auto; padding: 28px 32px 0; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.cc-phead__back { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--cc-mute) !important; }
.cc-phead__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cc-phead__tile { width: 56px; height: 56px; border-radius: 4px; background: var(--cc-navy-8); color: var(--cc-gold-l); display: grid; place-items: center; font-size: 17px; font-weight: 700; }
.cc-phead__t { flex: 1 1 400px; display: flex; flex-direction: column; gap: 4px; }
.cc-phead__t .cc-eyebrow a { color: inherit; }
.cc-phead__t h1 { margin: 0; font: 600 36px/1.1 var(--cc-face); letter-spacing: -.012em; color: var(--cc-ink); }
.cc-ptabs.po-tabs { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; }
.cc-ptabs .po-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font: 600 12px var(--cc-font) !important; letter-spacing: .12em !important;
  text-transform: uppercase; color: var(--cc-mute) !important; text-decoration: none; border: 0 !important; background: none !important; border-radius: 0 !important; }
.cc-ptabs .po-tab.is-on { color: var(--cc-ink) !important; box-shadow: inset 0 -3px 0 var(--cc-gold); }
.page:has(.cc-phead) .band { display: block; padding: 0 32px; margin: 0 auto 28px; border: 0; }
.page:has(.cc-phead) .band__label { display: flex; justify-content: space-between; align-items: baseline; border: 0 !important; padding: 0; margin-bottom: 14px; }
.page:has(.cc-phead) .band__label h2 { font: 600 24px/1.25 var(--cc-face) !important; letter-spacing: -.012em; }
.page:has(.cc-phead) .band__body { border: 0; padding: 0; }
.page:has(.cc-phead) .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; border: 0; }
.page:has(.cc-phead) .stat { padding: 20px; border: 0; border-radius: 4px; background: linear-gradient(180deg, var(--cc-card), var(--cc-card-2)); box-shadow: var(--cc-shadow);
  display: flex; flex-direction: column-reverse; gap: 8px; }
.page:has(.cc-phead) .stat b { font: 600 36px/1 var(--cc-face) !important; font-variant-numeric: tabular-nums; color: var(--cc-ink); }
.page:has(.cc-phead) .stat span { font: 600 11px var(--cc-font) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-mute); }
.page:has(.cc-phead) .rows { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: var(--cc-shadow); overflow: hidden; }
.page:has(.cc-phead) .rows .row { padding: 14px 20px; border-bottom: 1px solid var(--cc-line-3); }
.page:has(.cc-phead) .po-quelle { font: 12px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cc-mute-2) !important; }
@media (max-width: 760px) {
  .page:has(.cc-phead) > :not(.cc-phead), .page:has(.cc-phead) .band { padding-left: 16px; padding-right: 16px; }
  body.cc .dd-main > .page:has(.cc-phead) { padding: 0 0 24px; }
  .cc-phead { margin-bottom: 18px; }
  .cc-phead__in { padding: 14px 16px 0; gap: 12px; }
  .cc-phead__row { gap: 12px; flex-wrap: nowrap; }
  .cc-phead__tile { width: 44px; height: 44px; font-size: 14px; flex: 0 0 auto; }
  .cc-phead__t { flex: 1 1 auto; min-width: 0; }
  .cc-phead__t h1 { font-size: 24px; }
  .cc-ptabs.po-tabs { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .cc-ptabs .po-tab { padding: 0 12px; flex: 0 0 auto; }
  .page:has(.cc-phead) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page:has(.cc-phead) .stat { padding: 14px; }
  .page:has(.cc-phead) .stat b { font-size: 26px !important; }
}

/* Projects: Karten oben, die ganze Liste darunter */
body.cc .dd-main > .page:has(> .cc-projekte) { padding: 0; max-width: none; }
.cc-projekte { padding-top: 32px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 28px; }
.cc-alle .band { display: block; padding: 0; margin: 0 0 24px; border: 0; }
.cc-alle .band__label { display: flex; justify-content: space-between; border: 0 !important; padding: 0; margin-bottom: 12px; }
.cc-alle .band__label h2 { font: 600 24px/1.25 var(--cc-face) !important; }
.cc-alle .band__body { border: 0; padding: 0; }
.cc-alle .rows { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: var(--cc-shadow); overflow: hidden; }
.cc-alle .rows .row { padding: 14px 20px; border-bottom: 1px solid var(--cc-line-3); }
@media (max-width: 760px) {
  .cc-projekte { padding-top: 16px; gap: 16px; }
  .cc-projekte .cc-h1 { font-size: 24px; }
  .cc-projekte .cc-only-desk, .cc-projekte .cc-appsec { display: flex; }
  .cc-apps { grid-template-columns: 1fr; gap: 10px; }
}

/* Connections: Lisas Zustellung je Verbindung */
.cc-zustellung { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.cc-zustellung .cc-head { margin-bottom: 10px; }
.cc-zrow { display: grid; grid-template-columns: 150px 130px 210px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--cc-line-3); font-size: 14px; }
.cc-zrow b { font-weight: 600; }
.cc-zrow__wer { color: var(--cc-mute); }
.cc-zrow__satz { color: var(--cc-mute); font-size: 13px; }
@media (max-width: 760px) { .cc-zrow { grid-template-columns: 1fr 1fr; } .cc-zrow__satz { grid-column: 1 / -1; } .cc-zustellung { padding: 16px; } }

/* Kopf des Raums auf dem Desktop: Titel links, Share und Files rechts als ruhige Knoepfe */
@media (min-width: 761px) {
  .cc-talk__main .raum__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zurueck knoepfe" "titel knoepfe"; column-gap: 16px; row-gap: 6px; align-items: end; }
  .cc-talk__main .raum__zurueck { grid-area: zurueck; }
  .cc-talk__main .raum__titel { grid-area: titel; }
  .cc-talk__main .raum__kopfknoepfe { grid-area: knoepfe; display: flex; gap: 8px; align-items: flex-start; }
}
.cc-talk__main .raum__kopfknoepfe summary { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 3px; border: 1px solid #D5E1E9 !important;
  background: var(--cc-card) !important; color: var(--cc-navy-8) !important; font: 500 14px var(--cc-font) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; list-style: none; }
.cc-talk__main .raum__kopfknoepfe summary::-webkit-details-marker { display: none; }
.cc-talk__main .raum__mehr[open] > div { position: absolute; right: 40px; z-index: 30; width: min(420px, 90vw); background: var(--cc-card); border: 1px solid var(--cc-line);
  border-radius: 4px; box-shadow: var(--cc-shadow-up); padding: 16px; }
.cc-talk__main .raum__kopf { position: relative; }
/* durch eine Tuer begonnen: das Zeichen ersetzt die erste Frage (Talk.dc.html zeigt keine Blase davor) */
.cc-start ~ .raum__zuege > .raum__du--neu:first-child { display: none; }

/* ------------------------------------------------------------ Sign in (SignIn.dc.html) */
body.cc-sign { margin: 0; background: var(--cc-bg); }
.cc-sign__in { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cc-sign__links { background: linear-gradient(180deg, var(--cc-navy-8), var(--cc-navy-9)); color: var(--cc-on-navy); padding: 56px 64px; display: flex; flex-direction: column; gap: 20px; justify-content: center; position: relative; }
.cc-sign__links img { width: 72px; height: auto; }
.cc-sign__name { display: flex; flex-direction: column; }
.cc-sign__name b { font-size: 22px; font-weight: 600; }
.cc-sign__name small { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-gold-l); }
.cc-sign__satz { margin: 24px 0 0; font: 600 44px/1.1 var(--cc-face); letter-spacing: -.012em; }
.cc-sign__satz span { color: var(--cc-gold); }
.cc-sign__rechts { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.cc-sign__form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.cc-sign__logo { height: 40px; width: auto; align-self: flex-start; margin-bottom: 12px; }
.cc-sign__form form { display: flex; flex-direction: column; gap: 14px; }
.cc-sign__form label { display: flex; flex-direction: column; gap: 6px; font: 600 11px var(--cc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cc-mute); }
.cc-sign__form input { min-height: 48px; padding: 0 14px; border-radius: 3px; border: 1px solid #D5E1E9; background: var(--cc-card); color: var(--cc-ink); font: 16px var(--cc-font); letter-spacing: 0; text-transform: none; }
.cc-sign__form button { min-height: 50px; border: 0; border-radius: 3px; background: var(--cc-navy-8); color: #fff; font: 600 15px var(--cc-font); cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; margin-top: 6px; }
.cc-sign__form button span { font-size: 11px; letter-spacing: .14em; color: var(--cc-gold); }
.cc-sign__lead { margin: 0; color: var(--cc-mute); font-size: 15px; line-height: 1.5; }
.cc-sign__fehler { margin: 0; padding: 12px 14px; border-radius: 3px; background: var(--cc-red-soft); color: var(--cc-red-ink); font-size: 14.5px; }
.cc-sign__weg { margin: 6px 0 0; font-size: 14px; }
.cc-sign__weg a, .cc-sign__form p a { color: var(--cc-ink); text-decoration-color: rgba(246,196,67,.7); }
@media (max-width: 760px) {
  .cc-sign__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cc-sign__links { padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 28px; gap: 10px; }
  .cc-sign__links img { width: 44px; }
  .cc-sign__satz { font-size: 26px; margin-top: 8px; }
  .cc-sign__rechts { align-items: flex-start; padding: 28px 20px; }
}
/* warum das Brain einen Faden fuer wichtig haelt (inbox_urteil) */
.cc-aside__warum { margin: 0; padding: 10px 14px; border-radius: 3px; background: var(--cc-red-soft); color: var(--cc-red-ink); font-size: 14px; line-height: 1.45; }
.cc-aside__warum::before { content: "Why it matters: "; font-weight: 600; }
.cc-aside__warum[hidden] { display: none; }
/* echte Logos (app-logo-*.svg/png); ohne Logo bleiben die Initialen auf Navy */
.cc-app__logo--bild { background: #fff; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cc-app__logo--s.cc-app__logo--bild { padding: 2px; }
.cc-app__logo--navy { background: #0E1C3B; }
.cc-app__logo--voll { padding: 0; background: transparent; object-fit: cover; }
.cc-app__logo--s.cc-app__logo--voll { padding: 0; }

/* Connections (31.10.): der Stoerungssatz unter einer Verbindung, rot wie die Alarme */
.cc-vstoer { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; color: var(--cc-red-ink); font-size: 13.5px; line-height: 1.45; }
.cc-vstoer .cc-dot { flex: 0 0 auto; width: 8px; height: 8px; background: var(--cc-red); transform: translateY(-1px); }
/* Zwei row__meta in einer Zeile (Art und Knopf) lagen in dial-papier.css in derselben Rasterzelle uebereinander
   (Connections: "EMAIL" unter "CONNECTED"). Die zweite steht jetzt darunter, beide rechtsbuendig. */
.rows .row > .row__meta { grid-area: 1 / 2; justify-self: end; text-align: right; }
.rows .row > .row__meta ~ .row__meta { grid-area: 2 / 2; }
.rows .row > .row__meta .btn-gold, .rows .row > .row__meta .btn-quiet { white-space: nowrap; }
@media (max-width: 640px) {
  .rows .row { grid-template-columns: minmax(0, 1fr); }
  .rows .row > .row__meta, .rows .row > .row__meta ~ .row__meta { grid-area: auto; justify-self: start; text-align: left; margin-top: 6px; }
}

/* Zahlen in Figtree, wie --dial-font-number und Be Intentional */
.cc-alarm__mid b, .cc-app__nums b, .cc-ib__n b, .cc-ibm__n, .cc-bigdoor strong, .cc-door__n, .cc-badge, .cc-app__name b { font-family: var(--cc-face); }

/* WhatsApp-Fragen (Bahn Strang): an wen gefragt, und bei beantworteten wo und wann */
.cc-row__an { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--cc-gold-ink); }
.cc-row__s--antwort { color: var(--cc-green-ink); }

/* ----------------------------------------------------- Faden (WhatsApp, Teams) im CC, brett/cc_faden.py (01.11.) */
.cc-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 12px; font: 600 10.5px var(--cc-font);
  letter-spacing: .12em; text-transform: uppercase; background: var(--cc-hover); color: var(--cc-slate, #38566F); white-space: nowrap; }
.cc-pill--gold { background: var(--cc-gold); color: var(--cc-navy-9); }
.cc-pill--blau { background: var(--cc-gold-soft); color: var(--cc-gold-ink); }
.cc-pill--whatsapp { background: #E3F1E8; color: #2D6046; }
.cc-pill--teams { background: #ECEAF7; color: #4B4A8C; }
.cc-faden__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cc-faden__head .raum__zurueck { flex: 0 0 100%; }
.cc-faden__head .raum__titel { margin: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-faden__kopf { border: 1px solid var(--cc-line); border-radius: 4px; padding: 18px 20px; background: var(--cc-card-2); margin-bottom: 14px; }
.cc-faden__lead { margin: 0 0 14px; font-size: 15.5px; line-height: 1.5; color: var(--cc-ink); max-width: 80ch; }
.cc-faden__fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 22px; margin-bottom: 14px; }
.cc-faden__fakten > div { display: flex; flex-direction: column; gap: 3px; font-size: 14px; min-width: 0; }
.cc-faden__fakten a { color: var(--cc-gold-ink); }
.cc-faden__wartet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 4px;
  background: var(--cc-gold-soft); font-size: 14.5px; }
.cc-faden__wartet > span { flex: 1 1 280px; min-width: 0; }
.cc-faden__wartet form { margin: 0; }
.cc-faden__wartet.is-ruhig { background: var(--cc-hover); }
.cc-faden__frueher { display: inline-flex; margin: 4px 0 10px; padding: 8px 14px; border: 1px dashed var(--cc-line); border-radius: 18px;
  font-size: 13.5px; color: var(--cc-mute); text-decoration: none; }
.cc-faden__frueher.is-still { cursor: default; }
.cc-faden__msgs { display: flex; flex-direction: column; }
.cc-msg { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--cc-line-2); scroll-margin-top: 90px; }
.cc-msg.is-mark { background: var(--cc-hover); box-shadow: inset 3px 0 0 var(--cc-gold); padding-left: 10px; padding-right: 10px; border-radius: 4px; }
.cc-msg__body { flex: 1 1 auto; min-width: 0; }
.cc-msg__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 4px; }
.cc-msg__kopf b { font-size: 15px; font-weight: 600; color: var(--cc-ink); }
.cc-msg__kopf .mono { font-size: 12.5px; color: var(--cc-mute); font-variant-numeric: tabular-nums; }
.cc-msg__zitat { border-left: 3px solid var(--cc-line); padding: 2px 0 2px 12px; margin: 2px 0 8px; font-size: 13.5px; color: var(--cc-mute); }
.cc-msg__text { font-size: 16px; line-height: 1.55; color: var(--cc-ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.cc-msg--ich .cc-msg__text { background: var(--cc-me); padding: 10px 14px; border-radius: 4px 4px 4px 1px; display: inline-block; }
.cc-msg__re { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cc-msg__rf { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.cc-msg__re .cc-chip { min-height: 30px; padding: 0 10px; font-size: 13px; border-color: var(--cc-line); background: var(--cc-card); color: var(--cc-ink); }
.cc-msg__re .cc-chip.is-mein { border-color: var(--cc-gold); background: var(--cc-gold-soft); }
.cc-msg__re .cc-chip.is-still { cursor: default; display: inline-flex; align-items: center; }
.cc-msg__re .cc-chip.is-leer { border-style: dashed; color: var(--cc-mute); display: inline-flex; align-items: center; list-style: none; }
.cc-msg__eigen { display: inline-flex; align-items: center; gap: 6px; }
.cc-msg__eigen summary::-webkit-details-marker { display: none; }
.cc-msg__eigen input { width: 3.4em; min-height: 30px; text-align: center; font-size: 15px; border: 1px solid var(--cc-line); border-radius: 15px; }
.cc-faden__mehr { margin: 18px 0 6px; border-top: 1px solid var(--cc-line); padding-top: 12px; }
.cc-faden__mehr > summary { cursor: pointer; font: 600 12px var(--cc-font); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-mute); }
.cc-faden__fkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.cc-talk--faden .raum__klammer { display: inline-flex; align-items: center; color: var(--cc-mute); }
@media (max-width: 760px) {
  body.cc-im-raum .cc-talk__main .chat.raum.cc-faden { min-width: 0; width: 100%; }
  /* Kopf am Telefon: zurueck, Name, Zustand; der Kanal steht schon in der Inbox-Zeile und im Feld */
  body.cc-im-raum .raum__kopf.cc-faden__head { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cc-faden__head .cc-pill--whatsapp, .cc-faden__head .cc-pill--teams { display: none; }
  .cc-faden__head .cc-pill { min-height: 20px; padding: 0 8px; font-size: 9.5px; grid-column: 3; grid-row: 1; }
  .cc-faden__head .raum__titel { grid-column: 2; grid-row: 1; }
  .cc-faden__kopf, .cc-faden__fakten > div, .cc-msg, .cc-msg__body { min-width: 0; max-width: 100%; }
  .cc-faden__kopf { padding: 14px; }
  .cc-faden__fakten { grid-template-columns: 1fr 1fr; }
  .cc-msg__text { font-size: 15px; }
  .kb-open body.cc-im-raum .cc-faden__fkopf { display: none; }
}
/* dial-kopf.js haengt den Kopf des Brains an jeden .chat.raum; im Faden redet niemand mit dem Brain */
.cc-faden > .dial-kopf { display: none !important; }
/* Mailfaden (cc_faden.mail_html) */
.cc-pill--mail { background: #E4EEF7; color: var(--cc-navy-8); }
.cc-msg__adr { font-size: 12.5px; color: var(--cc-mute); overflow-wrap: anywhere; }
.cc-msg__an { display: block; font-size: 13px; color: var(--cc-mute); margin-bottom: 6px; }
.cc-msg__betreff { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.cc-msg--mail .cc-msg__text { max-width: 78ch; }
.cc-msg--mail.cc-msg--ich .cc-msg__text { display: block; }
.cc-faden__knoepfe { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.cc-btn--leer { background: var(--cc-card) !important; color: var(--cc-navy-8) !important; border: 1px solid var(--cc-navy-8); }
.cc-btn--gold { background: var(--cc-gold) !important; color: var(--cc-navy-9) !important; }
.cc-faden__entwurf { margin: 18px 0 6px; border: 1px solid var(--cc-line); border-radius: 4px; padding: 16px 18px; background: var(--cc-card-2); }
.cc-faden__entwurfkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; font-size: 14px; }
.cc-faden__entwurftext { width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 14px; border: 1px solid var(--cc-line); border-radius: 4px;
  font: 15.5px/1.55 var(--cc-font, inherit); background: var(--cc-card); white-space: pre-wrap; }
.cc-faden__regel { margin: 10px 0 0; font-size: 13.5px; color: var(--cc-mute); }
.cc-msg__text b { font-weight: 700; }
.cc-msg__text a { color: var(--cc-gold-ink); overflow-wrap: anywhere; }
.cc-msg__text code { font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--cc-hover); padding: 1px 5px; border-radius: 3px; }
/* Offene Punkte im Faden: Titel und Knoepfe, keine Erklaerungen (01.11.) */
.cc-faden__offen { margin: 20px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.cc-offen { border: 1px solid var(--cc-line); border-radius: 4px; padding: 14px 16px; background: var(--cc-card-2); }
.cc-offen h3 { margin: 0; font: 600 16px/1.35 var(--cc-face, inherit); color: var(--cc-ink); }
.cc-offen .cc-faden__knoepfe { align-items: center; }
.cc-offen .cc-faden__knoepfe form { margin: 0; }
.cc-offen .cc-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
.cc-offen__entwurf { margin-top: 10px; }
.cc-offen__park { display: inline-flex; align-items: center; gap: 8px; }
.cc-offen__park summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.cc-offen__park summary::-webkit-details-marker { display: none; }
.cc-offen__park[open] form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cc-offen__park input { min-height: 40px; padding: 0 10px; border: 1px solid var(--cc-line); border-radius: 3px; font: inherit; font-size: 14px; }

/* Inbox nach Thema (Lisa 01.11.): unter der Themen-Zeile der ganze Verlauf zum Aufklappen */
.cc-verlauf { border-bottom: 1px solid var(--cc-line-3); background: var(--cc-card-2); }
.cc-verlauf[hidden] { display: none; }
.cc-verlauf > summary { cursor: pointer; padding: 8px 20px 8px 72px; font-size: 13px; font-weight: 600; color: var(--cc-gold-ink); list-style: none; }
.cc-verlauf > summary::-webkit-details-marker { display: none; }
.cc-verlauf > summary::before { content: "▸ "; }
.cc-verlauf[open] > summary::before { content: "▾ "; }
.cc-verlauf > summary .mono { color: var(--cc-mute); font-weight: 400; margin-left: 4px; }
.cc-verlauf ol { list-style: none; margin: 0; padding: 0 20px 12px 72px; max-height: 420px; overflow-y: auto; }
.cc-verlauf__z { padding: 8px 0; border-top: 1px solid var(--cc-line-3); font-size: 14px; line-height: 1.45; color: var(--cc-ink); white-space: pre-line; }
.cc-verlauf__k { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.cc-verlauf__k small { color: var(--cc-mute); font-size: 12px; }
.cc-verlauf__z a { color: var(--cc-ink); text-decoration: none; }
.cc-verlauf__z a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .cc-verlauf > summary { padding-left: 12px; }
  .cc-verlauf ol { padding: 0 12px 12px 12px; }
}

/* ------------------------------------------------- Home als Chat-Start (Lisa 03.11.2026, brett/home_chat.py)
   Abgenommen: claude.ai/artifact/UAVYXXZPoWr6TGye2oJLtb (Main, P-Start). Das Feld ist dasselbe wie in Talk. */
.cc-home--chat .cc-home__main { gap: 32px; }
/* Lisa 03.11.2026: nur das runde Feld, kein weisser Block drumherum, und breiter (nicht 880 px wie in Talk) */
.cc-askcard { background: transparent; border: 0; box-shadow: none; padding: 0; }
.cc-askcard .cc-ask.raum { max-width: none; }
.cc-ask .raum__verlauf[hidden] { display: none !important; }
.cc-askcard form.raum__feld { position: static; margin-top: 0; border-top: 0; background: var(--cc-card); padding: 16px 20px 14px;
  box-shadow: 0 0 0 1px var(--cc-line), var(--cc-shadow-up); }
.cc-askcard .raum__text { font-size: 19px; min-height: 84px; }
.cc-askcard .raum__senden { background: var(--cc-navy-8) !important; color: #fff !important; border-radius: 3px !important; }
.cc-askcard .raum__senden::after { content: "  \2192"; color: var(--cc-gold); }
.cc-askcard .dial-stimme-knopf.talk { border: 1px solid var(--cc-gold) !important; background: var(--cc-gold) !important;
  color: var(--cc-navy-9) !important; border-radius: 22px !important; font-weight: 700 !important; }
.cc-sugs { display: flex; flex-direction: column; gap: 10px; margin-top: -12px; }
.cc-sugs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cc-sug { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 4px; background: var(--cc-card);
  border: 1px solid var(--cc-line); text-decoration: none; color: var(--cc-ink) !important; text-align: left; font: inherit;
  cursor: pointer; box-shadow: 0 1px 0 rgba(10,49,84,.06); min-height: 44px; }
.cc-sug:hover, .cc-sug:focus-visible { border-color: var(--cc-navy-8); }
.cc-sug[disabled] { opacity: .6; cursor: default; }
.cc-sug b { font: 600 15.5px/1.35 var(--cc-font); }
.cc-sug small { font-size: 13px; color: var(--cc-mute); }
@media (max-width: 760px) {
  .cc-home--chat .cc-hero { padding-bottom: 56px; }
  /* auf dem Telefon dockt dial-design.js das Feld unten an; die Karte drumherum bleibt leer und faellt weg */
  .cc-askcard { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; }
  .cc-home--chat .cc-home__main { gap: 14px; margin-top: -50px; }
  .cc-askcard .raum__text { font-size: 17px; min-height: 64px; }
  .cc-askcard .raum__taste, .cc-askcard .dial-sprechen-knopf { display: none !important; }
  .cc-sugs { margin-top: 0; }
  .cc-sugs__grid { grid-template-columns: 1fr; gap: 8px; }
  .cc-sugs__grid .cc-sug:nth-child(n+4) { display: none; }
}

/* ------------------------------------------- Die Feldleiste in einer Reihe (Lisa 03.11.2026)
   Links Klammer, Mikrofon (Dictate), Talk; rechts Send. Kein Satz zu Enter und neuer Zeile. Ueberall, wo das Feld steht. */
.raum__leiste { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; }
.raum__leiste .raum__klammer { order: 1; flex: 0 0 auto; }
.raum__leiste .dial-sprechen-knopf { order: 2; }
.raum__leiste .dial-stimme-knopf { order: 3; flex: 0 0 auto !important; }
.raum__leiste .raum__still { order: 4; flex: 1 1 auto; min-width: 0; }
.raum__leiste .raum__senden { order: 5; margin-left: auto !important; }
.raum__taste { display: none !important; }
.raum__leiste .raum__klammer, .raum__leiste .dial-sprechen-knopf.speak {
  flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 44px; min-height: 44px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important;
  border: 1px solid #D5E1E9 !important; background: var(--cc-card) !important; color: var(--cc-navy-8) !important; }
.raum__leiste .raum__klammer:hover, .raum__leiste .dial-sprechen-knopf.speak:hover { background: var(--cc-hover) !important; }
.dial-sprechen-knopf.speak > span, .dial-sprechen-knopf.speak > .orb { position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dial-sprechen-knopf.speak { position: relative; }
.dial-sprechen-knopf.speak .mic { display: block; }
.dial-sprechen-knopf.speak.nimmt { background: var(--cc-gold-soft) !important; box-shadow: 0 0 0 2px var(--cc-gold); }
.dial-sprechen-knopf.speak.stoert { box-shadow: 0 0 0 2px var(--cc-red); }

/* Lisa 03.11.2026: alle Knoepfe der Leiste wie eine Einheit: gleiche Hoehe (44 px), runde Form, gleiche Schrift.
   Klammer und Mikrofon als Kreise mit gleicher Linie; Talk gold, Send navy, beide als Pille. */
.raum__leiste .dial-stimme-knopf.talk, .raum__leiste .raum__senden {
  height: 44px !important; min-height: 44px !important; box-sizing: border-box; padding: 0 20px !important; border-radius: 22px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  font: 600 13.5px var(--cc-font) !important; letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1 !important; }
.raum__leiste .dial-stimme-knopf.talk { border: 1px solid var(--cc-gold) !important; background: var(--cc-gold) !important; color: var(--cc-navy-9) !important; }
.raum__leiste .raum__senden { border: 1px solid var(--cc-navy-8) !important; background: var(--cc-navy-8) !important; color: #fff !important; min-width: 0 !important; }
.raum__leiste .raum__klammer svg, .raum__leiste .dial-sprechen-knopf.speak .mic { width: 22px; height: 22px; }

/* ---------------------------------------- Talk wie ChatGPT (Lisa 03.11.2026: "IMMER so wenig scrolls wie moeglich")
   Am Computer steht die Seite still: nur das Gespraech scrollt, das Feld ist unten fest. Kopf eine Zeile,
   Views nur als kleines +, keine Schrittzeile unter dem denkenden Brain. */
.cc-talk__main .raum__schritt { display: none !important; }
.cc-talk__main .lin-leiste .lin-etikett { display: none; }
.cc-talk__main .lin-leiste { padding: 0 40px; margin: 8px 0 0; gap: 6px; }
.cc-talk__main .lin-dazu { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid #D5E1E9; font-size: 0; display: inline-grid; place-items: center; color: var(--cc-navy-8); background: var(--cc-card); }
.cc-talk__main .lin-dazu::before { content: "+"; font: 400 22px/1 var(--cc-font); }
.cc-talk__main .lin-dazu:hover { background: var(--cc-hover); }
@media (min-width: 761px) {
  body.cc:has(.cc-talk) { overflow: hidden; }
  .cc-talk { height: calc(100dvh - 70px); padding-top: 20px !important; padding-bottom: 20px !important; align-items: stretch !important; }
  .cc-convs { position: static !important; max-height: none !important; height: 100%; overflow-y: auto; }
  .cc-talk__main { height: 100%; display: flex; flex-direction: column; }
  .cc-talk__main .chat.raum { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: none; }
  .cc-talk__main .raum__kopf { flex: 0 0 auto; padding-top: 14px !important; padding-bottom: 12px !important; }
  .cc-talk__main .raum__titel { font-size: 22px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-talk__main .raum__verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .cc-talk__main form.raum__feld { flex: 0 0 auto; position: static !important; margin: 0 !important; }
}

/* ------------------------------------------------------------------ Your documents (Scott 03.11.2026)
   Ein fester Ort fuer alles, was DIAL gemacht hat; Link in der Gespraechsliste und unter jeder Datei im Zug. */
.cc-docs { padding-top: 28px; padding-bottom: 64px; }
.cc-docs__satz { margin: 8px 0 0; color: var(--cc-mute); font-size: 15.5px; }
.cc-docs .row__meta { display: inline-flex; gap: 8px; align-items: center; }
.cc-docs .cc-btn { min-height: 38px; font-size: 13.5px; padding: 0 14px; }
.cc-doc:target { box-shadow: inset 3px 0 0 var(--cc-gold); background: var(--cc-hover); }
.cc-convs__docs { display: block; padding: 6px 2px; font-size: 13.5px; color: var(--cc-navy-8) !important; }
.raum__ablage { margin-left: 10px; font-size: 13px; color: var(--cc-mute) !important; }

/* ------------------------------------------------------------------ Kunden-Termin (Schritt 1c, Lisa 04.11.2026)
   Boards Prep und AfterCall: die Terminkarte, das Paket, die Karte an den Kunden im Zug, der Hinweis aufs Ja. */
.cc-kt__stapel { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.cc-kt { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: var(--cc-shadow); overflow: hidden; }
.cc-kt__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px 0; }
.cc-kt__rechts { margin-left: auto; }
.cc-kt__dl { display: grid; grid-template-columns: 72px 1fr; gap: 8px 14px; margin: 0; padding: 12px 18px 14px; font-size: 15px; line-height: 1.45; }
.cc-kt__dl dt { color: var(--cc-mute); font-size: 13px; padding-top: 2px; }
.cc-kt__dl dd { margin: 0; color: var(--cc-ink); }
.cc-kt__dl a { color: var(--cc-gold-ink); }
.cc-kt__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 10px; }
.cc-kt__pill--aussen { margin-left: auto; background: var(--cc-plan); color: var(--cc-gold-ink); }
.cc-kt__pill--ok { background: var(--cc-green-soft); color: var(--cc-green-ink); }
.cc-kt__pill--teil { background: var(--cc-line-3); color: var(--cc-ink-2); }
.cc-kt__pill--warn { background: #FFF4D6; color: var(--cc-amber-ink); }
.cc-kt__rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-red); }
.cc-kt__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cc-line-2); background: var(--cc-card-2); }
.cc-kt__schalter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; }
.cc-kt__sw { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cc-ink); }
.cc-kt__sw i { width: 30px; height: 18px; border-radius: 9px; background: var(--cc-green); position: relative; flex: 0 0 auto; }
.cc-kt__sw i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.cc-kt__sw--aus i { background: var(--cc-grey); }
.cc-kt__sw--aus i::after { right: auto; left: 2px; }
.cc-kt__lnk { background: none; border: 0; padding: 8px 2px; min-height: 44px; font: 600 14px var(--cc-font); color: var(--cc-gold-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cc-kt__pk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px 18px 16px; }
.cc-kt__b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 4px; background: var(--cc-card-2); border: 1px solid var(--cc-line-3); }
.cc-kt__b--breit { grid-column: 1 / -1; }
.cc-kt__b h3 { margin: 0; font: 600 15px var(--cc-face); color: var(--cc-ink); }
.cc-kt__b p, .cc-kt__b ul { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--cc-ink); }
.cc-kt__b ul { padding-left: 18px; }
.cc-kt__fit { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.5; }
.cc-kt__fit b { flex: 0 0 64px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cc-kt__fit--y { color: var(--cc-green-ink); } .cc-kt__fit--m { color: var(--cc-amber-ink); } .cc-kt__fit--n { color: var(--cc-red-ink); }
.cc-kt__talk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; background: var(--cc-plan); font-size: 14px; line-height: 1.45; color: var(--cc-ink); }
.cc-kt__orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--cc-gold-l), var(--cc-gold-d)); flex: 0 0 auto; }
.cc-kt__stapel .card { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 4px; box-shadow: var(--cc-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cc-kt__stapel .card h3 { margin: 0; font: 600 18px var(--cc-face); color: var(--cc-ink); }
.cc-kt__stapel .card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cc-ink-2); }
.cc-kt__stapel .card textarea { width: 100%; box-sizing: border-box; font: 15px/1.5 var(--cc-font); color: var(--cc-ink); border: 1px solid var(--cc-line); border-radius: 3px; padding: 12px 14px; background: var(--cc-card-2); }
.cc-kt__stapel .card form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.cc-kt__stapel .card form > p { flex: 1 0 100%; font-size: 13px; color: var(--cc-mute); }
@media (max-width: 640px) {
  .cc-kt__dl { grid-template-columns: 1fr; gap: 2px; }
  .cc-kt__dl dt { padding-top: 8px; }
  .cc-kt__pill--aussen { margin-left: 0; }
}
.cc-kt__warn { margin: 0; padding: 10px 14px; border-radius: 4px; background: #FFF4D6; color: var(--cc-amber-ink); font-size: 14px; line-height: 1.45; }

/* Lead-Strang (Board 22, Lisa 04.11.2026): Belegstempel und was gelesen wurde */
.cc-st { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.cc-st--v { background: var(--cc-green-soft); color: var(--cc-green-ink); }
.cc-st--r { background: var(--cc-plan); color: var(--cc-ink); }
.cc-st--s { background: #FFF4D6; color: var(--cc-amber-ink); }
.cc-st--i { background: var(--cc-line-3); color: var(--cc-ink-2); }
.cc-lr__prog { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--cc-ink); }
.cc-lr__prog span { display: flex; align-items: center; gap: 8px; }
.cc-ok { color: var(--cc-green-ink); font-style: normal; font-weight: 700; }
.cc-no { color: var(--cc-mute); font-style: normal; font-weight: 700; }
.cc-kt__b ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--cc-ink); }
/* Lead-Strang P2: nach Call 1 (lead_html._nach_call, karte_teil) */
.cc-kt__satz { font-size: 15.5px; line-height: 1.55; color: var(--cc-ink); margin: 4px 0 14px; }
.cc-lr__zitat { display: block; font-style: italic; margin-top: 3px; }
.cc-lr__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cc-lr__zwei h4 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink-2); margin: 0 0 6px; }
.cc-lr__zwei ul { margin: 0; padding-left: 18px; }
.cc-lr__zwei li { font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; }
.cc-lr__prog a { color: var(--cc-ink); }
@media (max-width: 640px) { .cc-lr__zwei { grid-template-columns: 1fr; } }
.cc-talk__main .raum__urteil button { color: var(--cc-mute); font-family: var(--cc-font); }