/* KI AffAIrs – Komponenten-Styles. Lädt nach tokens/tokens.css. Bildpfade zeigen auf ../assets/. Schriften: Google Fonts Sora + Inter. */

.ka-root { background: var(--ground); color: var(--ink); font-family: var(--font-sans); }
.ka-hl { color: var(--text-orange); }
.ka-hl-cyan { color: var(--text-cyan); }

/* Wortmarke */
.ka-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--text-cyan); white-space: nowrap; }
.ka-wordmark .ka-ki { display: inline-block; margin-right: .28em; }
.ka-wordmark .ka-ai { color: var(--text-orange); }
.ka-wordmark--mono, .ka-wordmark--mono .ka-ai { color: var(--ink); }
.ka-wordmark--white, .ka-wordmark--white .ka-ai { color: var(--white); }

/* Buttons */
.ka-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1; padding: 14px 28px; border-radius: var(--radius-pill); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.ka-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ka-btn--primary { background: var(--orange); color: var(--on-orange); }
.ka-btn--primary:hover { box-shadow: var(--glow-orange); }
.ka-btn--tint { background: var(--orange-tint); color: var(--text-orange); border-color: var(--text-orange); }
.ka-btn--tint:hover { box-shadow: var(--glow-orange); }
.ka-btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.ka-btn--outline:hover { background: var(--surface-raised); }
.ka-btn--sm { font-size: 13px; padding: 10px 16px; }

/* Badges */
.ka-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-sm); line-height: 1.4; }
.ka-badge--du { background: var(--cyan-tint); color: var(--text-cyan); }
.ka-badge--wir { background: var(--orange-tint); color: var(--text-orange); }
.ka-badge--gemeinsam { background: var(--surface-raised); color: var(--ink); }
.ka-badge--quicky { background: var(--orange); color: var(--on-orange); }
.ka-badge--long { background: var(--cyan); color: var(--on-cyan); }
.ka-badge--trust { background: transparent; color: var(--ink-muted); padding: 0; }
.ka-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text-cyan); }

/* Stat-Kachel */
.ka-stat, .ka-box { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }

/* Schaltkreis-Ecke: 4px Eckwinkel oben links und unten rechts, folgt dem Radius, sitzt auf der Haarlinie */
.ka-stat::before, .ka-stat::after, .ka-box::before, .ka-box::after, .ka-ecke { content: ""; position: absolute; width: 28px; height: 28px; border: 0 solid var(--cyan); pointer-events: none; }
.ka-stat::before, .ka-box::before { top: -1px; left: -1px; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: var(--radius-md); }
.ka-stat::after, .ka-box::after { bottom: -1px; right: -1px; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: var(--radius-md); }
.ka-stat::before, .ka-stat::after, .ka-box--problem::before, .ka-box--problem::after { border-color: var(--orange); }
.ka-stat--cyan::before, .ka-stat--cyan::after { border-color: var(--cyan); }
.ka-box--problem { background: var(--orange-tint); }
.ka-box--loesung { background: var(--cyan-tint); }
/* Angebots-Box: größere Ecke an allen vier Ecken; die zwei zusätzlichen als <i class="ka-ecke ka-ecke--tr"></i> und <i class="ka-ecke ka-ecke--bl"></i> */
.ka-box--angebot { padding: var(--space-8); }
.ka-box--angebot::before, .ka-box--angebot::after, .ka-box--angebot > .ka-ecke { width: 36px; height: 36px; }
.ka-ecke--tr { top: -1px; right: -1px; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: var(--radius-md); }
.ka-ecke--bl { bottom: -1px; left: -1px; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: var(--radius-md); }
.ka-box__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; margin: var(--space-3) 0; }
.ka-box--problem .ka-eyebrow { color: var(--text-orange); }
.ka-stat__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--text-orange); }
.ka-stat--cyan .ka-stat__num { color: var(--text-cyan); }
.ka-stat__label { margin-top: var(--space-1); font-size: 13px; color: var(--ink-muted); }
.ka-stat__src { margin-top: var(--space-3); font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); }

/* Platte: die Box im Social-Canvas (1080er Maß) und im Video. Anthrazitfarbenes, gebürstetes Metall – gerendert und als
   Neun-Felder-Zuschnitt eingesetzt: Ecken mit Fase und Nut bleiben, Kanten und Mitte dehnen sich. Ab 224 px Kantenlänge.
   Die Schaltkreis-Ecke leuchtet als Einlage in der Nut; Problem und Lösung werfen dazu farbiges Licht auf das Metall. */
.ka-platte { position: relative; isolation: isolate; box-sizing: border-box; padding: 56px 60px; border-radius: 36px; border: 0 solid transparent; border-image: url("../assets/Metall/platte-schatten.png") 172 fill / 172px / 60px stretch;
  --ka-e-tl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%234BBCC6' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%2300B4C0' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform=''><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%234BBCC6' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%2300939D' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23A4EEF3' stroke-width='3.6'/></g></g></svg>");
  --ka-e-br: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%234BBCC6' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%2300B4C0' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform='translate(140 140) scale(-1 -1)'><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%234BBCC6' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%2300939D' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23A4EEF3' stroke-width='3.6'/></g></g></svg>");
  --ka-e-tr: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%234BBCC6' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%2300B4C0' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform='translate(140 0) scale(-1 1)'><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%234BBCC6' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%2300939D' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23A4EEF3' stroke-width='3.6'/></g></g></svg>");
  --ka-e-bl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%234BBCC6' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%2300B4C0' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform='translate(0 140) scale(1 -1)'><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%234BBCC6' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%2300939D' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23A4EEF3' stroke-width='3.6'/></g></g></svg>"); }
.ka-platte--problem {
  --ka-e-tl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%23FF9433' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%23F47700' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform=''><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%23FF9433' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23F47700' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23FFC98A' stroke-width='3.6'/></g></g></svg>");
  --ka-e-br: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='g' x='-40%' y='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='1.5' result='a'/><feFlood flood-color='%23FF9433' flood-opacity='.95'/><feComposite in2='a' operator='in' result='n'/><feGaussianBlur in='SourceAlpha' stdDeviation='5.5' result='b'/><feFlood flood-color='%23F47700' flood-opacity='.55'/><feComposite in2='b' operator='in' result='w'/><feMerge><feMergeNode in='w'/><feMergeNode in='n'/><feMergeNode in='SourceGraphic'/></feMerge></filter><g transform='translate(140 140) scale(-1 -1)'><g transform='translate(18 18)' fill='none' filter='url(%23g)'><path d='M2.5 104V36A33.5 33.5 0 0 1 36 2.5H104' stroke='%23FF9433' stroke-opacity='.45' stroke-width='5'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23F47700' stroke-width='10'/><path d='M15 104V36A21 21 0 0 1 36 15H104' stroke='%23FFC98A' stroke-width='3.6'/></g></g></svg>"); }
.ka-platte::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 36px; pointer-events: none; }
.ka-platte--problem::before { background: radial-gradient(95% 80% at 0% 0%, rgba(244, 119, 0, .15) 0%, rgba(244, 119, 0, .05) 45%, rgba(244, 119, 0, 0) 75%), radial-gradient(70% 60% at 100% 100%, rgba(244, 119, 0, .09) 0%, rgba(244, 119, 0, 0) 70%); }
.ka-platte--loesung::before { background: radial-gradient(95% 80% at 0% 0%, rgba(0, 147, 157, .20) 0%, rgba(0, 147, 157, .07) 45%, rgba(0, 147, 157, 0) 75%), radial-gradient(70% 60% at 100% 100%, rgba(0, 147, 157, .12) 0%, rgba(0, 147, 157, 0) 70%); }
.ka-platte::after { content: ""; position: absolute; inset: -18px; z-index: -1; pointer-events: none; background: var(--ka-e-tl) left top / 140px 140px no-repeat, var(--ka-e-br) right bottom / 140px 140px no-repeat; }
.ka-platte--angebot::after { background: var(--ka-e-tl) left top / 140px 140px no-repeat, var(--ka-e-br) right bottom / 140px 140px no-repeat, var(--ka-e-tr) right top / 140px 140px no-repeat, var(--ka-e-bl) left bottom / 140px 140px no-repeat; }
.ka-platte--problem .ka-eyebrow { color: var(--text-orange, #FF9433); }
.ka-platte .ka-stat__num { font-size: 160px; }
.ka-platte .ka-stat__label { font-size: 32px; margin-top: 16px; color: var(--ink); }
.ka-platte .ka-stat__src { font-size: 34px; margin-top: 24px; }
.ka-kompassbild { display: block; width: 300px; height: 300px; margin: -30px; flex: none; }

/* Social-Canvas: in Originalgröße gebaut, per --s skaliert gezeigt */
.ka-frame { --s: .3; position: relative; overflow: hidden; width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); border-radius: 6px; flex: none; }
.ka-canvas { position: absolute; top: 0; left: 0; box-sizing: border-box; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--s)); transform-origin: 0 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); padding: var(--canvas-safe); display: flex; flex-direction: column; }
.ka-canvas--deep { background: var(--ground-deep); }
.ka-canvas--midnight { background: var(--midnight); }
.ka-canvas__top { display: flex; justify-content: space-between; align-items: flex-start; }
.ka-canvas__logo { width: 160px; height: 166px; }
.ka-canvas__fill { flex: 1; }
.ka-canvas__meta { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); }
.ka-canvas__rule { height: 8px; width: 160px; background: var(--orange); border-radius: var(--radius-pill); margin-bottom: 40px; }
.ka-canvas__rule--cyan { background: var(--cyan); }
.ka-canvas .ka-btn { font-size: 40px; padding: 30px 56px; }
.ka-canvas .ka-badge { font-size: 34px; padding: 8px 22px; }
.ka-canvas .ka-eyebrow { font-size: 34px; }
/* Mobil zuerst: Hook direkt unter der Kopfzeile, Fuß mit Quelle oder Namenszeile */
.ka-canvas__body { margin-top: 72px; display: flex; flex-direction: column; gap: 32px; }
.ka-canvas__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.ka-canvas__photo { position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; object-position: center top; }
.ka-canvas__scrim { position: absolute; left: 0; right: 0; background: linear-gradient(to top, var(--ground) 0%, rgba(26, 26, 26, 0) 100%); }
.ka-canvas__url { align-self: flex-start; background: var(--orange); color: var(--on-orange); font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; padding: 30px 44px; border-radius: var(--radius-pill); white-space: nowrap; }
.ka-qr { width: 200px; height: 200px; box-sizing: border-box; padding: 12px; background: #fff; border-radius: var(--radius-md); flex: none; }

/* Motiv-Platzhalter: steht für ein Motiv nach Bildsprache */
.ka-motif { background-color: var(--ground-deep); background-image: radial-gradient(var(--line-strong) 1.5px, transparent 1.6px); background-size: 24px 24px; border-radius: var(--radius-lg); position: relative; }
.ka-motif--cyan { background-image: radial-gradient(var(--cyan) 5px, transparent 5.5px); background-size: 48px 48px; }
.ka-motif--orange { background-image: radial-gradient(var(--orange) 5px, transparent 5.5px); background-size: 48px 48px; }
.ka-motif__label { position: absolute; left: 24px; bottom: 20px; font-family: var(--font-mono); font-size: 22px; color: var(--ink-muted); background: var(--ground); padding: 4px 12px; border-radius: var(--radius-sm); }

/* Porträt (LinkedIn persönlich): immer das echte Foto aus der Gruppe Portraits */
.ka-portrait { width: 180px; height: 180px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-raised); border: 4px solid var(--orange); flex: none; object-fit: cover; object-position: 50% 10%; }
.ka-byline { display: flex; align-items: center; gap: 32px; }
.ka-byline__name { font-family: var(--font-display); font-weight: 700; font-size: 44px; color: var(--ink); }
.ka-byline__role { font-size: 34px; color: var(--ink-muted); margin-top: 6px; }

/* Blog */
.ka-blog { max-width: 720px; }
.ka-blog__hero { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.ka-blog__meta { font-size: 13px; color: var(--ink-muted); }
.ka-blog__lead { font-size: 18px; line-height: 1.6; color: var(--ink); }
.ka-tip { background: var(--cyan-tint); border-radius: var(--radius-md); padding: var(--space-6); }
.ka-tip__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-cyan); margin-bottom: var(--space-2); }

/* Preview-Hilfen */
.ka-row { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.ka-cap { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: var(--space-2); letter-spacing: .04em; }

/* Bewegung im Web: dieselben Zeiten und Kurven wie im Video (Token-Familien duration und easing).
   Wege sind ein Drittel der Video-Wege, weil das UI ein Drittel so groß ist. */
@keyframes ka-kommt { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ka-steigt { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes ka-ecke-tl { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ka-ecke-br { from { clip-path: inset(100% 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.ka-kommt { animation: ka-kommt var(--duration-normal) var(--ease-rein) both; }
.ka-zeile { display: block; overflow: hidden; }
.ka-zeile > span { display: block; animation: ka-steigt var(--duration-normal) var(--ease-rein) both; }
.ka-box--zeichnen::before { animation: ka-ecke-tl var(--duration-ruhig) var(--ease-zeichnen) both; }
.ka-box--zeichnen::after { animation: ka-ecke-br var(--duration-ruhig) var(--ease-zeichnen) var(--duration-sofort) both; }
@media (prefers-reduced-motion: reduce) { .ka-kommt, .ka-zeile > span, .ka-box--zeichnen::before, .ka-box--zeichnen::after { animation: none; } }

/* Bewegtbild-Vorschauen */
.ka-film { display: block; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ground-deep); }
.ka-kachel { display: flex; flex-direction: column; gap: var(--space-2); }
.ka-kachel__titel { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.ka-kachel__wert { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-muted); }
.ka-zonen { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ground-deep); flex: none; }
.ka-zonen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka-zonen__sperre { position: absolute; left: 0; right: 0; background: rgba(244, 119, 0, 0.3); border: 0 dashed var(--orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--white); text-align: center; }
.ka-zonen__feed { position: absolute; left: 0; right: 0; box-sizing: border-box; border: 2px solid var(--cyan-glow); pointer-events: none; }

/* V23 · Karussell und Social-Profile (nur Ergänzungen, V22-Klassen unverändert) */
/* Kennzeichnung generierter Motive: exakt „KI GENERIERT“, mindestens slide-meta, auf der fertigen Seite gesetzt */
.ka-ki-label { position: absolute; left: 40px; bottom: 40px; z-index: 2; font-family: var(--font-sans); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--white); background: var(--ground); padding: 16px 26px; border-radius: var(--radius-pill); white-space: nowrap; }
/* Motiv als Fläche auf einer Seite: Träger für Bild und Kennzeichnung */
.ka-canvas__motiv { position: relative; overflow: hidden; border-radius: var(--radius-lg); flex: none; }
.ka-canvas__motiv > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka-canvas__motiv--randlos { border-radius: 0; margin: 0 calc(var(--canvas-safe) * -1) calc(var(--canvas-safe) * -1); }
/* Kontaktabschluss im persönlichen Karussell */
.ka-portrait--cyan { border-color: var(--cyan); }
.ka-kontakt { display: flex; flex-direction: column; gap: 28px; }
.ka-kontakt__kopf { display: flex; align-items: center; gap: 40px; }
.ka-kontakt .ka-portrait { width: 260px; height: 260px; border-width: 6px; }
.ka-kontakt__name { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.1; color: var(--ink); }
.ka-kontakt__rolle { font-size: 34px; line-height: 1.3; color: var(--ink-muted); margin-top: 8px; }
.ka-kontakt__zeilen { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--ink); }
.ka-kontakt__zeilen span { color: var(--text-cyan); }
/* Vorschau-Hilfe: Rasterausschnitt 3:4 auf Instagram (34 px je Seite) */
.ka-zone-raster { position: absolute; top: 0; bottom: 0; width: 34px; background: rgba(244, 119, 0, .35); z-index: 3; pointer-events: none; }
.ka-zone-raster--l { left: 0; } .ka-zone-raster--r { right: 0; }
/* Vorschau-Hilfe: Storyboard-Zeile unter einer Seite */
.ka-rolle { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-muted); margin-top: var(--space-2); max-width: 216px; }
.ka-rolle b { color: var(--text-cyan); font-weight: 600; }