/* App-Mockups smart2results (hell) · Bibliothek 1.0 · 26.10.2026
   Vertrag: Die Seitenverhältnisse je Rahmen bleiben fest, damit die Seiten vor und nach dem Ausbau gleich stehen.
   Maße: --f = ein Rahmen-Pixel, --u = ein App-Pixel (beide über die Breite von .mk, Einheit cqi). Nur .mk ist Container.
   Bewegt werden nur transform und opacity (aus mockups.js), Farben wechseln über Klassen. Alle Klassen mit Präfix mk-. */

.mk { position: relative; display: block; width: 100%; container-type: inline-size; font-family: var(--schrift, "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif); color: #1a1a1a; line-height: 1.3; text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; pointer-events: none; }
.mk[data-rahmen="handy"] { aspect-ratio: 390 / 820; }
.mk[data-rahmen="tablet"] { aspect-ratio: 820 / 1000; }
.mk[data-rahmen="laptop"] { aspect-ratio: 1440 / 940; }
.mk[data-rahmen="fenster"] { aspect-ratio: 16 / 10.5; }
.mk[data-rahmen="ohne"] { aspect-ratio: 16 / 11; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.mk b { font-weight: 650; }
.mk i, .mk em { font-style: normal; }
.mk img { display: block; max-width: none; border-radius: 0; }
.mk svg { display: block; flex: none; overflow: visible; }
.mk .mk-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mk .mk-logo { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ── Rahmen ── */
.mk-geraet { position: absolute; inset: 0; }
.mk-schirm { --sw: 1; --base: 600; --u: calc(100cqi * var(--sw) / var(--base)); position: absolute; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: #fff; }
.mk-geraet--handy { --f: calc(100cqi / 390); border-radius: calc(60 * var(--f)); background: linear-gradient(150deg, #fdfdfe 0%, #eef0f3 40%, #dde1e7 100%); box-shadow: 0 0 0 1px #d2d7de, inset 0 0 0 calc(2 * var(--f)) #f9fafb, inset 0 0 0 calc(3.5 * var(--f)) #e2e6eb, 0 calc(34 * var(--f)) calc(60 * var(--f)) calc(-26 * var(--f)) rgba(20, 48, 79, .32), 0 calc(10 * var(--f)) calc(20 * var(--f)) calc(-12 * var(--f)) rgba(20, 48, 79, .16); }
.mk-geraet--handy::before, .mk-geraet--handy::after { content: ""; position: absolute; width: calc(3 * var(--f)); border-radius: calc(2 * var(--f)); background: linear-gradient(90deg, #d4d9df, #c2c8d0); }
.mk-geraet--handy::before { right: calc(-2.5 * var(--f)); top: calc(196 * var(--f)); height: calc(86 * var(--f)); }
.mk-geraet--handy::after { left: calc(-2.5 * var(--f)); top: calc(150 * var(--f)); height: calc(52 * var(--f)); box-shadow: 0 calc(68 * var(--f)) 0 #cdd2d9; }
.mk-geraet--handy .mk-schirm { --sw: .93846; --base: 300; inset: calc(12 * var(--f)); border-radius: calc(48 * var(--f)); box-shadow: 0 0 0 1px rgba(20, 48, 79, .08); }
.mk-insel { position: absolute; z-index: 3; left: 50%; top: calc(22 * var(--f)); width: calc(100 * var(--f)); height: calc(29 * var(--f)); margin-left: calc(-50 * var(--f)); border-radius: 999px; background: #121a24; }
.mk-geraet--tablet { --f: calc(100cqi / 820); border-radius: calc(46 * var(--f)); background: linear-gradient(150deg, #fdfdfe 0%, #eef0f3 40%, #dde1e7 100%); box-shadow: 0 0 0 1px #d2d7de, inset 0 0 0 calc(2 * var(--f)) #f9fafb, inset 0 0 0 calc(3.5 * var(--f)) #e2e6eb, 0 calc(40 * var(--f)) calc(70 * var(--f)) calc(-30 * var(--f)) rgba(20, 48, 79, .3), 0 calc(12 * var(--f)) calc(24 * var(--f)) calc(-14 * var(--f)) rgba(20, 48, 79, .14); }
.mk-geraet--tablet .mk-schirm { --sw: .95122; --base: 440; inset: calc(20 * var(--f)); border-radius: calc(26 * var(--f)); box-shadow: 0 0 0 1px rgba(20, 48, 79, .08); }
.mk-geraet--tablet .mk-kamera { position: absolute; left: 50%; top: calc(7 * var(--f)); width: calc(6 * var(--f)); height: calc(6 * var(--f)); margin-left: calc(-3 * var(--f)); border-radius: 50%; background: #2b3440; box-shadow: 0 0 0 calc(1.5 * var(--f)) #e8ebef; }
.mk-geraet--laptop { --f: calc(100cqi / 1440); }
.mk-deckel { position: absolute; left: calc(70 * var(--f)); top: 0; width: calc(1300 * var(--f)); height: calc(866 * var(--f)); border-radius: calc(30 * var(--f)) calc(30 * var(--f)) calc(6 * var(--f)) calc(6 * var(--f)); background: linear-gradient(180deg, #fbfbfc, #f0f2f4); box-shadow: 0 0 0 1px #d2d7de, inset 0 0 0 calc(2 * var(--f)) #fdfdfe, 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-26 * var(--f)) rgba(20, 48, 79, .3); }
.mk-geraet--laptop .mk-kamera { position: absolute; left: 50%; top: calc(10 * var(--f)); width: calc(7 * var(--f)); height: calc(7 * var(--f)); margin-left: calc(-3.5 * var(--f)); border-radius: 50%; background: #2b3440; box-shadow: 0 0 0 calc(2 * var(--f)) #e8ebef; }
.mk-geraet--laptop .mk-schirm { --sw: .875; --base: 600; left: calc(90 * var(--f)); top: calc(26 * var(--f)); width: calc(1260 * var(--f)); height: calc(816 * var(--f)); border-radius: calc(6 * var(--f)); box-shadow: 0 0 0 1px #e1e5ea; }
.mk-sockel { position: absolute; left: 0; top: calc(862 * var(--f)); width: 100%; height: calc(42 * var(--f)); border-radius: calc(4 * var(--f)) calc(4 * var(--f)) calc(46 * var(--f)) calc(46 * var(--f)) / calc(4 * var(--f)) calc(4 * var(--f)) calc(30 * var(--f)) calc(30 * var(--f)); background: linear-gradient(180deg, #f6f7f9 0%, #e6e9ed 42%, #c8ced6 100%); box-shadow: 0 0 0 1px #cdd3da; }
.mk-sockel::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: calc(-22 * var(--f)); height: calc(26 * var(--f)); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20, 48, 79, .3) 0%, rgba(20, 48, 79, 0) 70%); }
.mk-mulde { position: absolute; left: 50%; top: 0; width: calc(230 * var(--f)); height: calc(12 * var(--f)); margin-left: calc(-115 * var(--f)); border-radius: 0 0 calc(12 * var(--f)) calc(12 * var(--f)); background: linear-gradient(180deg, #d3d8de, #e7eaee); }
.mk-geraet--fenster { --f: calc(100cqi / 1000); border-radius: calc(14 * var(--f)); background: #fff; box-shadow: 0 0 0 1px #dde2e8, 0 calc(30 * var(--f)) calc(60 * var(--f)) calc(-30 * var(--f)) rgba(20, 48, 79, .32), 0 calc(4 * var(--f)) calc(12 * var(--f)) rgba(20, 48, 79, .06); }
.mk-geraet--fenster .mk-schirm, .mk-geraet--ohne .mk-schirm { inset: 0; border-radius: inherit; }
.mk-geraet--ohne { --f: calc(100cqi / 1000); border-radius: calc(16 * var(--f)); background: #fff; box-shadow: 0 0 0 1px #e1e6ec; }
/* Größenstufen: klein (größere Schrift, gestrafft), normal, breit (mit Seitenleisten) */
@container (max-width: 229px) { .mk-geraet--handy .mk-schirm { --base: 270; } }
@container (max-width: 339px) { .mk-geraet--tablet .mk-schirm { --base: 380; } }
@container (min-width: 480px) { .mk-geraet--tablet .mk-schirm { --base: 560; } }
@container (max-width: 439px) { .mk-geraet--laptop .mk-schirm, .mk-geraet--fenster .mk-schirm, .mk-geraet--ohne .mk-schirm { --base: 500; } }
@container (min-width: 640px) { .mk-geraet--laptop .mk-schirm, .mk-geraet--fenster .mk-schirm, .mk-geraet--ohne .mk-schirm { --base: 860; } }
/* App in fremdem Rahmen: mittige Spalte, Höhe passt */
.mk-geraet--tablet .mk-schirm[data-form="phone"] { --base: 520; }
.mk-geraet--laptop .mk-schirm[data-form="phone"] { --base: 985; }
.mk-geraet--fenster .mk-schirm[data-form="phone"] { --base: 994; }
.mk-geraet--ohne .mk-schirm[data-form="phone"] { --base: 890; }
.mk-geraet--laptop .mk-schirm[data-form="tablet"] { --base: 832; }
.mk-geraet--fenster .mk-schirm[data-form="tablet"] { --base: 827; }
.mk-geraet--ohne .mk-schirm[data-form="tablet"] { --base: 746; }
.mk-geraet--handy .mk-schirm[data-form="tablet"], .mk-geraet--handy .mk-schirm[data-form="desk"], .mk-geraet--tablet .mk-schirm[data-form="desk"] { --base: 600; }
.mk-schirm[data-form="phone"] > .mk-app { width: calc(300 * var(--u)); align-self: center; box-shadow: 0 0 0 1px #eceff3; }
.mk-schirm[data-form="tablet"] > .mk-app { width: calc(440 * var(--u)); align-self: center; box-shadow: 0 0 0 1px #eceff3; }
.mk-geraet--handy .mk-schirm[data-form="phone"] > .mk-app, .mk-geraet--tablet .mk-schirm[data-form="tablet"] > .mk-app, .mk-geraet--handy .mk-schirm[data-form="tablet"] > .mk-app { width: auto; align-self: stretch; box-shadow: none; }

/* Statusleiste, Heimbalken, Browserleiste */
.mk-status { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(40 * var(--u)); padding: calc(3 * var(--u)) calc(26 * var(--u)) 0 calc(36 * var(--u)); color: #111; }
.mk-uhr { font-weight: 650; font-size: calc(13.5 * var(--u)); letter-spacing: -.01em; }
.mk-status-ic { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.mk-status-ic svg { height: calc(10.5 * var(--u)); width: auto; fill: currentColor; }
.mk-geraet--tablet .mk-status { height: calc(26 * var(--u)); padding: 0 calc(18 * var(--u)); }
.mk-geraet--tablet .mk-uhr { font-size: calc(11.5 * var(--u)); }
.mk-geraet--tablet .mk-status-ic svg { height: calc(9 * var(--u)); }
.mk-heim { position: absolute; z-index: 4; left: 50%; bottom: calc(7 * var(--u)); width: calc(108 * var(--u)); height: calc(4.5 * var(--u)); margin-left: calc(-54 * var(--u)); border-radius: 99px; background: #1a1a1a; opacity: .82; }
.mk-geraet--tablet .mk-heim { width: calc(150 * var(--u)); margin-left: calc(-75 * var(--u)); bottom: calc(6 * var(--u)); height: calc(4 * var(--u)); }
.mk-leiste { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); background: #f6f7f9; border-bottom: 1px solid #e6e9ee; }
.mk-geraet--laptop .mk-leiste { height: calc(26 * var(--u)); }
.mk-punkte { display: flex; gap: calc(6 * var(--u)); }
.mk-punkte i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #dadee4; }
.mk-adresse { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); min-width: 38%; height: calc(19 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; background: #fff; border: 1px solid #e3e7ec; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); color: #4f5b67; white-space: nowrap; }
.mk-adresse .mk-ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: #1f7a4d; }
.mk-leiste .mk-probe { margin-left: auto; }
.mk-probe { flex: none; display: inline-flex; align-items: center; height: calc(17 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 99px; background: #eef1f4; color: #5c6875; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(8.5 * var(--u)); font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.mk-leiste ~ .mk-app .mk-kopf .mk-probe { display: none; }
.mk-geraet--ohne .mk-schirm > .mk-probe { position: absolute; z-index: 5; right: 50%; top: calc(11 * var(--u)); transform: translateX(50%); }
.mk-geraet--ohne .mk-schirm[data-form="phone"] > .mk-probe, .mk-geraet--ohne .mk-schirm[data-form="tablet"] > .mk-probe { display: none; }

/* ── Gemeinsame App-Bausteine ── */
.mk-app { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.mk-schirm[data-form="phone"] > .mk-app { padding-bottom: calc(20 * var(--u)); }
.mk-schirm[data-form="tablet"] > .mk-app { padding-bottom: calc(14 * var(--u)); }
.mk-kopf { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(8 * var(--u)); border-bottom: 1px solid #eef0f3; background: #fff; }
.mk-kopf-ic { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: #14304f; }
.mk-kopf-ic .mk-ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.mk-kopf-titel { font-weight: 650; font-size: calc(15.5 * var(--u)); letter-spacing: -.015em; color: #1a1a1a; white-space: nowrap; }
.mk-kopf .mk-probe { margin-left: auto; }
.mk-knopf { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: 99px; background: #14304f; color: #fff; font-weight: 600; font-size: calc(14.5 * var(--u)); letter-spacing: -.005em; white-space: nowrap; transition: background-color .35s ease, color .35s ease; }
.mk-knopf .mk-ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.mk-knopf.ist-ok { background: #1f7a4d; }
.mk-knopf--klein { height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); }
.mk-knopf--klein .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mk-knopf-ic { display: inline-grid; flex: none; }
.mk-knopf-ic > span { grid-area: 1 / 1; display: grid; place-items: center; }
.mk-knopf-ic > span + span { opacity: 0; }
.mk-tap { position: absolute; z-index: 5; left: 50%; top: 50%; width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin: calc(-17 * var(--u)) 0 0 calc(-17 * var(--u)); border-radius: 50%; background: rgba(20, 48, 79, .16); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(20, 48, 79, .3); opacity: 0; }
.mk-zeiger { position: absolute; z-index: 6; left: 58%; top: 52%; width: calc(15 * var(--u)); height: calc(21 * var(--u)); opacity: 0; transform-origin: 0 0; }
.mk-zeiger svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) rgba(20, 48, 79, .3)); }
.mk-blase { max-width: 84%; padding: calc(9 * var(--u)) calc(12 * var(--u)); border-radius: calc(17 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.38; }
.mk-blase--ich { align-self: flex-end; background: #14304f; color: #fff; border-bottom-right-radius: calc(5 * var(--u)); }
.mk-blase--ki { align-self: flex-start; background: #fff; color: #1a1a1a; box-shadow: 0 0 0 1px #e3e7ec; border-bottom-left-radius: calc(5 * var(--u)); }
.mk-blase--frage { align-self: flex-end; background: #f1f1f1; color: #1a1a1a; border-bottom-right-radius: calc(5 * var(--u)); }
.mk-tipp { display: inline-flex; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(13 * var(--u)); border-radius: calc(17 * var(--u)); border-bottom-left-radius: calc(5 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec; opacity: 0; }
.mk-tipp i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #7b8794; }
.mk-w { opacity: 0; }
.mk-caret { display: inline-block; width: calc(1.6 * var(--u)); height: 1.15em; margin-left: calc(1 * var(--u)); vertical-align: -.2em; border-radius: 1px; background: #14304f; opacity: 0; }
.mk-feldtext { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; direction: rtl; text-align: left; }
.mk-feldinnen { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.mk-platzhalter { position: absolute; left: calc(14 * var(--u)); top: 50%; height: 1.4em; margin-top: -.7em; line-height: 1.4; color: #66717d; white-space: nowrap; pointer-events: none; }
.mk-desk { flex-direction: row; background: #f6f7f9; }
.mk-nur-breit { display: none !important; }
.mk-schiene { flex: none; width: calc(52 * var(--u)); flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) 0; background: #fff; border-right: 1px solid #e8ebef; }
.mk-schiene-marke { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-bottom: calc(10 * var(--u)); border-radius: calc(9 * var(--u)); background: #14304f; color: #fff; }
.mk-schiene-marke .mk-ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.mk-schiene-i { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); color: #6b7682; }
.mk-schiene-i.ist-aktiv { background: #e6eef6; color: #14304f; }
@container (min-width: 640px) {
  .mk-nur-breit { display: flex !important; }
  .mk-nur-schmal { display: none !important; }
}

/* ── 1 Smart Size ── */
.mk-ss-fort { flex: none; padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(2 * var(--u)); }
.mk-ss-nr { display: block; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); font-weight: 500; letter-spacing: .02em; color: #5c6875; }
.mk-ss-seg { display: flex; gap: calc(4 * var(--u)); margin-top: calc(7 * var(--u)); }
.mk-ss-seg i { position: relative; flex: 1; height: calc(4 * var(--u)); border-radius: 99px; background: #e6eaef; overflow: hidden; }
.mk-ss-seg b { position: absolute; inset: 0; border-radius: inherit; background: #14304f; transform-origin: 0 50%; transform: scaleX(0); }
.mk-ss-buehne { position: relative; flex: 1; min-height: 0; }
.mk-ss-frage, .mk-ss-erg { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); }
.mk-ss-antw { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.mk-ss-antw span { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(23 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(7 * var(--u)); border-radius: 99px; background: #f1f4f7; font-size: calc(11.5 * var(--u)); color: #3c4652; }
.mk-ss-antw .mk-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: #1f7a4d; }
.mk-ss-h { margin-top: calc(16 * var(--u)); font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1.12; letter-spacing: -.03em; color: #1a1a1a; }
.mk-ss-zeile { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(6 * var(--u)); }
.mk-ss-person { position: relative; height: 90%; max-height: calc(205 * var(--u)); aspect-ratio: 2 / 3; flex: none; }
.mk-ss-person img { width: 100%; height: 100%; object-fit: contain; }
.mk-ss-mass { position: absolute; right: calc(-8 * var(--u)); top: 8%; bottom: 5.5%; width: calc(7 * var(--u)); border: calc(1.5 * var(--u)) solid #9fb0c2; border-left: 0; border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; }
.mk-ss-mass::before { content: ""; position: absolute; right: calc(-4.5 * var(--u)); top: calc(-4.5 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #ff8a00; }
.mk-ss-wert { display: flex; align-items: baseline; gap: calc(4 * var(--u)); color: #14304f; }
.mk-ss-wert b { font-weight: 700; font-size: calc(50 * var(--u)); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.mk-ss-wert small { font-size: calc(17 * var(--u)); font-weight: 500; color: #5c6875; }
.mk-ss-lineal { position: relative; flex: none; height: calc(50 * var(--u)); margin: calc(8 * var(--u)) calc(-18 * var(--u)) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.mk-ss-skala { position: absolute; left: 50%; top: 0; width: calc(520 * var(--u)); height: 100%; margin-left: calc(-.75 * var(--u)); background-image: repeating-linear-gradient(90deg, #b5bfca 0 calc(1.5 * var(--u)), transparent calc(1.5 * var(--u)) calc(8 * var(--u))), repeating-linear-gradient(90deg, #5f6f82 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(40 * var(--u))); background-size: 100% calc(14 * var(--u)), 100% calc(24 * var(--u)); background-repeat: repeat-x; background-position: 0 0, calc(-.25 * var(--u)) 0; }
.mk-ss-skala span { position: absolute; top: calc(30 * var(--u)); width: calc(30 * var(--u)); margin-left: calc(-14.25 * var(--u)); text-align: center; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); color: #5c6875; }
.mk-ss-marke { position: absolute; left: 50%; top: 0; width: calc(3 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(-1.5 * var(--u)); border-radius: 99px; background: #ff8a00; }
.mk-ss-weiter { flex: none; margin-top: calc(12 * var(--u)); }
.mk-ss-laden { position: absolute; left: 0; right: 0; top: 40%; display: flex; justify-content: center; gap: calc(8 * var(--u)); opacity: 0; }
.mk-ss-laden i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #14304f; }
.mk-ss-erg { opacity: 0; }
.mk-ss-kicker { font-size: calc(13 * var(--u)); font-weight: 650; color: #3f6e9e; }
.mk-ss-bild { position: relative; flex: 1; min-height: 0; margin-top: calc(8 * var(--u)); border-radius: calc(18 * var(--u)); overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #dce6f1 0%, #ecf2f8 55%, #f7f9fb 100%); }
.mk-ss-bild img { position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u)); height: 104%; width: auto; margin: 0 auto; transform-origin: 50% 100%; }
.mk-ss-gr { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.mk-ss-groesse { display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(9 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e1e6ec, 0 calc(10 * var(--u)) calc(20 * var(--u)) calc(-16 * var(--u)) rgba(20, 48, 79, .35); opacity: 0; }
.mk-ss-groesse span { font-size: calc(11.5 * var(--u)); color: #5c6875; }
.mk-ss-groesse b { font-size: calc(28 * var(--u)); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; color: #14304f; }
.mk-ss-ok { flex: none; margin-top: calc(12 * var(--u)); }

/* ── 2 Advisa ── */
.mk-ad { background: #f6f7f9; }
.mk-ad-kopf { gap: calc(7 * var(--u)); }
.mk-ad-ava { position: relative; display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #14304f; color: #fff; font-weight: 700; font-size: calc(14 * var(--u)); flex: none; }
.mk-ad-ava::after { content: ""; position: absolute; right: calc(-1 * var(--u)); bottom: calc(-1 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #1f9d5c; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.mk-ad-name { display: flex; flex-direction: column; line-height: 1.15; }
.mk-ad-name b { font-size: calc(14.5 * var(--u)); }
.mk-ad-name small { font-size: calc(11 * var(--u)); color: #5c6875; }
.mk-ad-korb { position: relative; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(2 * var(--u)); color: #14304f; flex: none; }
.mk-ad-korb .mk-ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.mk-ad-badge, .mk-ad-ring { position: absolute; right: calc(-3 * var(--u)); top: calc(-2 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 99px; opacity: 0; }
.mk-ad-badge { display: grid; place-items: center; background: #14304f; color: #fff; font-size: calc(9.5 * var(--u)); font-weight: 700; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.mk-ad-ring { box-shadow: 0 0 0 calc(2 * var(--u)) #ff8a00; }
.mk-ad-toast { position: absolute; z-index: 3; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(56 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #e7f3ec; color: #1d5a3a; font-size: calc(12.5 * var(--u)); font-weight: 650; box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-12 * var(--u)) rgba(20, 48, 79, .4); opacity: 0; }
.mk-ad-toast .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #1f7a4d; }
.mk-ad-verlauf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); }
.mk-ad-nachrichten { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.mk-ad-verlauf .mk-blase { opacity: 0; }
.mk-ad-tag { align-self: center; padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 99px; background: #eceff3; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(9.5 * var(--u)); color: #5c6875; }
.mk-ad-ki { position: relative; display: flex; flex-direction: column; }
.mk-ad-ki .mk-tipp { position: absolute; left: 0; top: 0; }
.mk-ad-ki .mk-blase--ki { max-width: 90%; }
.mk-ad-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.mk-ad-karte { position: relative; padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec; opacity: 0; }
.mk-ad-karte.ist-gewaehlt { box-shadow: 0 0 0 calc(2 * var(--u)) #14304f; }
.mk-ad-foto { height: calc(132 * var(--u)); border-radius: calc(10 * var(--u)); background: #eef1f4; overflow: hidden; }
.mk-ad-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 5%; }
.mk-ad-karte b { display: block; margin: calc(7 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(11.5 * var(--u)); }
.mk-ad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--u)) calc(4 * var(--u)); margin: calc(5 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(10 * var(--u)); color: #3c4652; white-space: nowrap; }
.mk-ad-meta em { padding: calc(2 * var(--u)) calc(5 * var(--u)); border-radius: 99px; background: #e6eef6; color: #14304f; font-weight: 650; }
.mk-ad-lief { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); }
.mk-ad-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #1f9d5c; flex: none; }
.mk-ad-wahl { position: absolute; right: calc(10 * var(--u)); top: calc(10 * var(--u)); display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #14304f; color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; opacity: 0; }
.mk-ad-wahl .mk-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mk-ad-look { position: relative; display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec; opacity: 0; }
.mk-ad-mini { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); background: #eef1f4; overflow: hidden; flex: none; }
.mk-ad-mini img { width: 100%; height: 100%; object-fit: contain; }
.mk-ad-mini--anzug img { object-fit: cover; object-position: 50% 12%; }
.mk-ad-look .mk-knopf { margin-left: auto; }
.mk-ad-eingabe { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); background: #fff; border-top: 1px solid #eceff3; }
.mk-ad-feld { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; background: #f1f3f6; font-size: calc(13 * var(--u)); color: #1a1a1a; }
.mk-ad-senden { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #14304f; color: #fff; flex: none; }
.mk-ad-senden .mk-ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* ── 3 Voice-Außendienst ── */
.mk-vo-kunde { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #f3f5f8; font-size: calc(13 * var(--u)); }
.mk-vo-kunde .mk-ic { color: #14304f; }
.mk-vo-buehne { position: relative; flex: 1; min-height: 0; }
.mk-vo-rek { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: calc(14 * var(--u)); }
.mk-vo-status { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: 99px; background: #f3f5f8; font-size: calc(12 * var(--u)); font-weight: 600; color: #1a1a1a; opacity: 0; }
.mk-vo-rec { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #ff8a00; }
.mk-vo-zeit { margin-top: calc(8 * var(--u)); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 500; font-size: calc(42 * var(--u)); line-height: 1.05; letter-spacing: -.03em; color: #14304f; font-variant-numeric: tabular-nums; }
.mk-vo-welle { display: flex; align-items: center; gap: calc(3.4 * var(--u)); height: calc(62 * var(--u)); margin-top: calc(14 * var(--u)); }
.mk-vo-welle i { width: calc(4.2 * var(--u)); height: calc(58 * var(--u)); border-radius: 99px; background: #3f6e9e; transform: scaleY(.1); }
.mk-vo-platz { position: relative; width: calc(92 * var(--u)); height: calc(92 * var(--u)); margin-top: calc(34 * var(--u)); }
.mk-vo-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--u)) #ff8a00; opacity: 0; }
.mk-vo-knopf { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #14304f; color: #fff; box-shadow: 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgba(20, 48, 79, .55); }
.mk-vo-mic { grid-area: 1 / 1; display: grid; place-items: center; }
.mk-vo-mic .mk-ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.mk-vo-stop { grid-area: 1 / 1; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7 * var(--u)); background: #fff; opacity: 0; }
.mk-vo-notiz { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); opacity: 0; }
.mk-vo-karte { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec, 0 calc(14 * var(--u)) calc(28 * var(--u)) calc(-22 * var(--u)) rgba(20, 48, 79, .4); }
.mk-vo-karte-kopf { display: flex; align-items: center; gap: calc(6 * var(--u)); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(11 * var(--u)); color: #5c6875; }
.mk-vo-karte-kopf .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #14304f; }
.mk-vo-text { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.5; color: #1a1a1a; }
.mk-vo-mark { border-radius: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(2 * var(--u)); margin: 0 calc(-2 * var(--u)); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .45s ease; }
.mk-vo-mark--kk.ist-an { background: #dbe7f4; }
.mk-vo-mark--so.ist-an { background: #dcefe3; }
.mk-vo-mark--au.ist-an { background: #ffe9bf; }
.mk-vo-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.mk-vo-tag { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(27 * var(--u)); padding: 0 calc(11 * var(--u)) 0 calc(8 * var(--u)); border-radius: 99px; font-size: calc(12 * var(--u)); font-weight: 650; opacity: 0; }
.mk-vo-tag .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mk-vo-tag--kk { background: #e6eef6; color: #14304f; }
.mk-vo-tag--so { background: #e7f3ec; color: #1d5a3a; }
.mk-vo-tag--au { background: #fff4db; color: #744700; }
.mk-vo-aufgabe { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec, inset calc(3 * var(--u)) 0 0 #ff8a00; line-height: 1.25; opacity: 0; }
.mk-vo-aufgabe b { display: block; font-size: calc(13 * var(--u)); }
.mk-vo-aufgabe small { display: block; font-size: calc(11 * var(--u)); color: #5c6875; }
.mk-vo-box { width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(5 * var(--u)); box-shadow: inset 0 0 0 calc(1.6 * var(--u)) #9aa6b2; flex: none; }
.mk-vo-sync { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #f3f5f8; font-size: calc(13 * var(--u)); opacity: 0; }
.mk-vo-sync > .mk-ic { color: #14304f; }
.mk-vo-sync-ok { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: auto; border-radius: 50%; background: #1f7a4d; color: #fff; opacity: 0; }
.mk-vo-sync-ok .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ── 4 Key-Account-Cockpit ── */
.mk-co-haupt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
.mk-co-kopf { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); }
.mk-co-titel { font-weight: 700; font-size: calc(17 * var(--u)); letter-spacing: -.025em; }
.mk-co-pille { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #e3e7ec; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); color: #3c4652; }
.mk-co-nutzer { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-left: auto; border-radius: 50%; background: #e6eef6; color: #14304f; }
.mk-co-nutzer .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mk-co-kpis { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.mk-co-kpi { position: relative; display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; transition: background-color .45s ease; }
.mk-co-kpi.ist-neu { background: #eaf1f8; }
.mk-co-kpi b { align-self: flex-start; font-size: calc(23 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #14304f; font-variant-numeric: tabular-nums; transform-origin: 0 100%; }
.mk-co-kpi span { font-size: calc(10.5 * var(--u)); color: #5c6875; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-co-plus { position: absolute; right: calc(10 * var(--u)); top: calc(9 * var(--u)); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); font-weight: 600; color: #a65400; opacity: 0; }
.mk-co-unten { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(10 * var(--u)); }
.mk-co-karte { position: relative; display: flex; flex-direction: column; min-height: 0; padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; }
.mk-co-karte-kopf { display: flex; align-items: center; justify-content: space-between; font-size: calc(12 * var(--u)); }
.mk-co-leg { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(10 * var(--u)); color: #5c6875; }
.mk-co-leg i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); background: #3f6e9e; }
.mk-co-leg i.mk-co-leg-plan { width: calc(12 * var(--u)); height: 0; margin-left: calc(6 * var(--u)); border-top: calc(1.5 * var(--u)) dashed #14304f; border-radius: 0; background: none; }
.mk-co-balken { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0 calc(16 * var(--u)); border-bottom: 1px solid #e3e7ec; }
.mk-co-spalte { position: relative; height: 100%; }
.mk-co-bar { position: absolute; left: 20%; right: 20%; bottom: 0; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)); background: #3f6e9e; transform-origin: 50% 100%; transform: scaleY(0); transition: background-color .45s ease; }
.mk-co-bar.ist-warn { background: #ff8a00; }
.mk-co-plan { position: absolute; z-index: 1; left: 8%; right: 8%; height: 0; border-top: calc(1.5 * var(--u)) dashed #14304f; opacity: 0; }
.mk-co-spalte span { position: absolute; left: -20%; right: -20%; bottom: calc(-15 * var(--u)); text-align: center; font-size: calc(10 * var(--u)); color: #5c6875; }
.mk-co-alarm { position: absolute; z-index: 2; left: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(-4.5 * var(--u)); border-radius: 50%; background: #ff8a00; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; opacity: 0; }
.mk-co-alarmring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 calc(1.5 * var(--u)) #ff8a00; opacity: 0; }
.mk-co-rechts { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-height: 0; }
.mk-co-hinweis { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(9 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #f1dcb2, inset calc(3 * var(--u)) 0 0 #ff8a00; opacity: 0; }
.mk-co-hinweis.ist-ok { box-shadow: 0 0 0 1px #cfe5d8, inset calc(3 * var(--u)) 0 0 #1f7a4d; }
.mk-co-hinweis-kopf { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); }
.mk-co-hinweis-kopf b { font-size: calc(12.5 * var(--u)); line-height: 1.3; }
.mk-co-hic { display: grid; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: #fff4db; color: #8a5300; transition: background-color .45s ease, color .45s ease; }
.mk-co-hic > span { grid-area: 1 / 1; display: grid; place-items: center; }
.mk-co-hic .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mk-co-hinweis.ist-ok .mk-co-hic { background: #e7f3ec; color: #1f7a4d; }
.mk-co-hinweis .mk-knopf { margin-left: calc(32 * var(--u)); }
.mk-co-feed { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; font-size: calc(11.5 * var(--u)); line-height: 1.25; }
.mk-co-feed[data-r] { opacity: 0; }
.mk-co-feed b { display: block; }
.mk-co-feed small { display: block; font-size: calc(10.5 * var(--u)); color: #5c6875; }
.mk-co-feed-ic { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #e6eef6; color: #14304f; flex: none; }
.mk-co-feed-ic .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* ── 5 KI-Atelier ── */
.mk-at { background: #f6f7f9; }
.mk-at-kopf { gap: calc(9 * var(--u)); padding-left: calc(16 * var(--u)); }
.mk-at-logo { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(8 * var(--u)); background: #14304f; color: #fff; flex: none; }
.mk-at-logo .mk-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mk-at-oben { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)); }
.mk-at-quelle { height: 84%; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.mk-at-qbild { position: relative; flex: 1; min-height: 0; aspect-ratio: 3 / 4; border-radius: calc(10 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #ebe6de, #ddd5c9); box-shadow: 0 0 0 calc(4 * var(--u)) #fff, 0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-12 * var(--u)) rgba(20, 48, 79, .4); transform: rotate(-2deg); }
.mk-at-qbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mk-at-qlabel { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 650; color: #3c4652; white-space: nowrap; }
.mk-at-qlabel .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #14304f; }
.mk-at-pfeil { flex: none; color: #9aa6b2; }
.mk-at-pfeil .mk-ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.mk-at-vorschau { position: relative; height: 100%; aspect-ratio: 3 / 4; border-radius: calc(14 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f2f5f8, #e8edf2); box-shadow: 0 0 0 1px #dfe5eb, 0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(20, 48, 79, .4); }
.mk-at-vbild, .mk-at-kbild { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #f2f5f8, #e8edf2); opacity: 0; }
.mk-at-vbild img, .mk-at-kbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mk-at-crop--front img { transform-origin: 50% 0; transform: scale(1.55) translateY(3%); }
.mk-at-crop--portraet img { transform-origin: 51% 13%; transform: scale(2.7); }
.mk-at-crop--ganz img { object-fit: contain; object-position: 50% 50%; transform: scale(.96); }
.mk-at-crop--detail img { transform-origin: 51% 30%; transform: scale(3.6); }
.mk-at-deck { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #eef2f6, #e3e9ef); }
.mk-at-deck::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 calc(6 * var(--u)), transparent calc(6 * var(--u)) calc(12 * var(--u))); opacity: .5; }
.mk-at-scan { position: absolute; left: 0; right: 0; top: 0; height: calc(2.5 * var(--u)); background: #ff8a00; box-shadow: 0 0 calc(12 * var(--u)) calc(3 * var(--u)) rgba(255, 138, 0, .45); opacity: 0; }
.mk-at-vlabel { position: absolute; z-index: 3; left: calc(9 * var(--u)); bottom: calc(9 * var(--u)); display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, .94); font-size: calc(11 * var(--u)); font-weight: 650; color: #14304f; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-6 * var(--u)) rgba(20, 48, 79, .4); opacity: 0; }
.mk-at-satzkopf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); }
.mk-at-satzkopf b { font-size: calc(13 * var(--u)); }
.mk-at-zahl { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(11 * var(--u)); color: #5c6875; font-variant-numeric: tabular-nums; }
.mk-at-satz { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); }
.mk-at-kachel { position: relative; aspect-ratio: 3 / 4; border-radius: calc(11 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #dfe5eb; }
.mk-at-kachel::before { content: ""; position: absolute; inset: calc(4 * var(--u)); border-radius: calc(8 * var(--u)); border: calc(1.2 * var(--u)) dashed #c3ccd6; }
.mk-at-kachel.ist-aktiv { box-shadow: 0 0 0 calc(2 * var(--u)) #14304f; }
.mk-at-klabel { position: absolute; z-index: 2; left: calc(5 * var(--u)); bottom: calc(5 * var(--u)); display: inline-flex; align-items: center; height: calc(18 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, .94); font-size: calc(10 * var(--u)); font-weight: 650; color: #14304f; white-space: nowrap; }
.mk-at-khaken { position: absolute; z-index: 2; right: calc(5 * var(--u)); top: calc(5 * var(--u)); display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #1f7a4d; color: #fff; opacity: 0; }
.mk-at-khaken .mk-ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mk-at-fuss { position: relative; flex: none; display: grid; place-items: center; height: calc(58 * var(--u)); }
.mk-at-fort, .mk-at-fertig { grid-area: 1 / 1; }
.mk-at-fort { width: 46%; height: calc(5 * var(--u)); border-radius: 99px; background: #e3e8ee; overflow: hidden; }
.mk-at-fort i { display: block; height: 100%; border-radius: inherit; background: #14304f; transform-origin: 0 50%; transform: scaleX(0); }
.mk-at-fertig { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; background: #e7f3ec; color: #1d5a3a; font-size: calc(13.5 * var(--u)); font-weight: 650; opacity: 0; }
.mk-at-fertig .mk-ic { color: #1f7a4d; }

/* ── 6 Virtuelle Anprobe ── */
.mk-an-foto { position: relative; flex: 1; min-height: 0; margin: calc(10 * var(--u)) calc(14 * var(--u)) 0; border-radius: calc(20 * var(--u)); overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 50% 100%, #dfe7ef 0%, #edf1f5 60%, #f6f8fa 100%); }
.mk-an-lage { position: absolute; inset: 0; overflow: hidden; }
.mk-an-innen { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 100%, #dfe7ef 0%, #edf1f5 60%, #f6f8fa 100%); }
.mk-an-nach { opacity: 0; }
.mk-an-img { position: absolute; left: 0; right: 0; top: 2%; height: 98%; width: auto; margin: 0 auto; }
/* gleiche Person: Kopf des Anzugbilds auf das eigene Foto (Halbtotale) gelegt */
.mk-an-img--neu { transform-origin: 50.7% 8%; transform: translateX(-2.5%) scale(1.8); }
.mk-an-scan { position: absolute; inset: 0; z-index: 2; opacity: 0; }
.mk-an-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(2.5 * var(--u)); background: #ff8a00; box-shadow: 0 0 calc(14 * var(--u)) calc(4 * var(--u)) rgba(255, 138, 0, .45); }
.mk-an-teiler { position: absolute; inset: 0; z-index: 2; opacity: 0; }
.mk-an-teiler::after { content: ""; position: absolute; right: calc(-1 * var(--u)); top: 0; bottom: 0; width: calc(2 * var(--u)); background: #fff; box-shadow: 0 0 calc(6 * var(--u)) rgba(20, 48, 79, .35); }
.mk-an-teiler b { position: absolute; z-index: 1; right: calc(-15 * var(--u)); top: 50%; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-top: calc(-15 * var(--u)); border-radius: 50%; background: #fff; color: #14304f; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(20, 48, 79, .3); }
.mk-an-teiler .mk-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mk-an-marke { position: absolute; z-index: 3; left: calc(10 * var(--u)); top: calc(10 * var(--u)); display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .92); color: #14304f; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) calc(-4 * var(--u)) rgba(20, 48, 79, .4); }
.mk-an-marke .mk-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mk-an-teile { flex: none; display: flex; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) 0; }
.mk-an-teil { position: relative; flex: 1; aspect-ratio: 1; border-radius: calc(12 * var(--u)); background: #f1f4f7; box-shadow: inset 0 0 0 1px #e3e7ec; overflow: hidden; }
.mk-an-teil img { width: 100%; height: 100%; object-fit: contain; }
.mk-an-teil--anzug img { object-fit: cover; object-position: 50% 12%; }
.mk-an-teil.ist-gewaehlt { box-shadow: inset 0 0 0 calc(2 * var(--u)) #14304f; }
.mk-an-teil--plus { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) #c3ccd6; color: #5c6875; }
.mk-an-teil .mk-tap { overflow: visible; }
.mk-an-knopf { flex: none; margin: calc(12 * var(--u)) calc(14 * var(--u)) 0; }

/* ── 7 SmartPulse ── */
.mk-sp { background: #fff; }
.mk-sp-seite { flex: none; width: calc(176 * var(--u)); flex-direction: column; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)); background: #f6f7f9; border-right: 1px solid #e8ebef; }
.mk-sp-marke { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.mk-sp-logo { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(8 * var(--u)); background: #14304f; color: #ff8a00; flex: none; }
.mk-sp-logo .mk-ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; }
.mk-sp-mt { display: flex; flex-direction: column; line-height: 1.15; }
.mk-sp-mt b { font-size: calc(13.5 * var(--u)); font-weight: 700; letter-spacing: -.015em; }
.mk-sp-mt small { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(8.5 * var(--u)); color: #5c6875; }
.mk-sp-nav { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.mk-sp-nav span { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(12 * var(--u)); color: #3c4652; transition: background-color .35s ease, color .35s ease; }
.mk-sp-nav .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mk-sp-nav span.ist-aktiv { background: #e6eef6; color: #14304f; font-weight: 600; }
.mk-sp-rolle { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: auto; padding: calc(8 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; font-size: calc(11.5 * var(--u)); color: #3c4652; }
.mk-sp-rolle .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #14304f; }
.mk-sp-haupt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.mk-sp-kopf { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: 1px solid #eef0f3; }
.mk-sp-rpille { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(22 * var(--u)); margin-left: auto; padding: 0 calc(9 * var(--u)); border-radius: 99px; background: #f1f4f7; font-size: calc(10.5 * var(--u)); color: #3c4652; }
.mk-sp-rpille .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #14304f; }
.mk-sp-buehne { position: relative; flex: 1; min-height: 0; }
.mk-sp-szene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)); }
.mk-sp-szene .mk-blase--frage { max-width: 76%; font-size: calc(12.5 * var(--u)); opacity: 0; }
.mk-sp-antwort { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.mk-sp-ava { position: relative; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #14304f; color: #ff8a00; flex: none; opacity: 0; }
.mk-sp-ava .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 2.2; }
.mk-sp-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--u)) #ff8a00; opacity: 0; }
.mk-sp-ak { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(9 * var(--u)); padding-top: calc(3 * var(--u)); }
.mk-sp-sucht { position: absolute; left: 0; top: 0; opacity: 0; }
.mk-sp-chip { position: relative; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 99px; background: #f1f4f7; overflow: hidden; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); color: #3c4652; white-space: nowrap; }
.mk-sp-chip .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #14304f; }
.mk-sp-lauf { position: absolute; left: 0; right: 0; bottom: 0; height: calc(2 * var(--u)); background: #3f6e9e; transform-origin: 0 50%; transform: scaleX(0); }
.mk-sp-atext { font-size: calc(15.5 * var(--u)); font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: #1a1a1a; }
.mk-sp-ref { display: inline-grid; place-items: center; width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(5 * var(--u)); vertical-align: calc(1.5 * var(--u)); border-radius: calc(5 * var(--u)); background: #e6eef6; color: #14304f; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); font-weight: 500; opacity: 0; }
.mk-sp-ref--fest { margin: 0; vertical-align: 0; opacity: 1; flex: none; }
.mk-sp-fund { width: 100%; max-width: calc(430 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec, 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-20 * var(--u)) rgba(20, 48, 79, .35); overflow: hidden; opacity: 0; }
.mk-sp-fund-kopf { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); background: #f7f8fa; border-bottom: 1px solid #eceff3; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); color: #3c4652; white-space: nowrap; }
.mk-sp-fund-kopf .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #14304f; }
.mk-sp-auszug { display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)) calc(12 * var(--u)); }
.mk-sp-auszug > i, .mk-sp-treffer > i:not(.mk-sp-mark) { display: block; height: calc(6 * var(--u)); border-radius: 99px; background: #e8ecf1; }
.mk-sp-auszug > i:nth-child(1) { width: 92%; }
.mk-sp-auszug > i:nth-child(2) { width: 76%; }
.mk-sp-auszug > i:last-child { width: 58%; }
.mk-sp-treffer { position: relative; display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); margin: 0 calc(-8 * var(--u)); }
.mk-sp-treffer > i:not(.mk-sp-mark) { position: relative; z-index: 1; background: #a9bfd6; }
.mk-sp-treffer > i:last-child { width: 64%; }
.mk-sp-mark { position: absolute; inset: 0; border-radius: calc(6 * var(--u)); background: #e6eef6; box-shadow: inset calc(3 * var(--u)) 0 0 #ff8a00; opacity: 0; }
.mk-sp-tab { width: 100%; max-width: calc(430 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec, 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-20 * var(--u)) rgba(20, 48, 79, .35); opacity: 0; }
.mk-sp-tab-kopf { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.mk-sp-tab-ic { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: #e7f3ec; color: #1f7a4d; flex: none; }
.mk-sp-tab-ic .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mk-sp-tab-kopf b { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 500; font-size: calc(11 * var(--u)); color: #1a1a1a; }
.mk-sp-zeilen { margin-left: auto; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(11 * var(--u)); color: #14304f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-sp-tfort { display: block; height: calc(3 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: 99px; background: #eef1f4; overflow: hidden; }
.mk-sp-tfort i { display: block; height: 100%; background: #1f7a4d; transform-origin: 0 50%; transform: scaleX(0); }
.mk-sp-bars { display: flex; flex-direction: column; gap: calc(7 * var(--u)); margin-top: calc(11 * var(--u)); }
.mk-sp-bz { display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr) calc(36 * var(--u)); align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: #3c4652; }
.mk-sp-spur { height: calc(11 * var(--u)); border-radius: 99px; background: #f1f4f7; overflow: hidden; }
.mk-sp-bar { display: block; height: 100%; border-radius: 99px; background: #7d9cbd; transform-origin: 0 50%; transform: scaleX(0); }
.mk-sp-bar--top { background: #14304f; }
.mk-sp-bz em { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); text-align: right; color: #1a1a1a; opacity: 0; }
.mk-sp-eingabe { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0 calc(18 * var(--u)) calc(12 * var(--u)); padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) 0; border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #dfe4ea, 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-14 * var(--u)) rgba(20, 48, 79, .3); }
.mk-sp-feld { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: #1a1a1a; }
.mk-sp-senden { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); background: #14304f; color: #fff; flex: none; }
.mk-sp-senden .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mk-sp-quellen { flex: none; width: calc(196 * var(--u)); flex-direction: column; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)); background: #f9fafb; border-left: 1px solid #e8ebef; }
.mk-sp-qkopf { display: grid; font-size: calc(11.5 * var(--u)); font-weight: 650; color: #3c4652; }
.mk-sp-qkopf span { grid-area: 1 / 1; }
.mk-sp-qbuehne { position: relative; flex: 1; min-height: 0; }
.mk-sp-seitevor, .mk-sp-tabvor { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec; opacity: 0; }
.mk-sp-seitevor > i, .mk-sp-sv-treffer > i:not(.mk-sp-sv-mark) { display: block; height: calc(5 * var(--u)); border-radius: 99px; background: #e8ecf1; }
.mk-sp-seitevor > i:nth-of-type(2n) { width: 84%; }
.mk-sp-seitevor > i:last-child { width: 50%; }
.mk-sp-sv-kopf { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(4 * var(--u)); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); color: #3c4652; white-space: nowrap; overflow: hidden; }
.mk-sp-sv-kopf .mk-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: #14304f; }
.mk-sp-sv-treffer { position: relative; display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); margin: 0 calc(-6 * var(--u)); }
.mk-sp-sv-treffer > i:not(.mk-sp-sv-mark) { position: relative; z-index: 1; background: #a9bfd6; }
.mk-sp-sv-mark { position: absolute; inset: 0; border-radius: calc(5 * var(--u)); background: #e6eef6; box-shadow: inset calc(2.5 * var(--u)) 0 0 #ff8a00; opacity: 0; }
.mk-sp-raster { position: relative; height: calc(200 * var(--u)); overflow: hidden; border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 1px #edf0f3; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.mk-sp-rz { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(7 * var(--u)); border-bottom: 1px solid #f0f2f5; }
.mk-sp-rz i { height: calc(5 * var(--u)); border-radius: 99px; background: #e3e8ee; }
.mk-sp-rz:nth-child(3n) i:first-child { background: #c9d6e3; }

/* ── 8 Smart2Index ── */
.mk-si { background: #fafafa; }
.mk-si-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); }
.mk-si-kopf { flex: none; display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.mk-si-kopf b { font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: -.015em; }
.mk-si-kopf small { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(9 * var(--u)); color: #5c6875; }
.mk-si-logo, .mk-se-logo { align-self: center; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); background: #14304f; color: #fff; flex: none; }
.mk-si-logo .mk-ic, .mk-se-logo .mk-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mk-si-frage { flex: none; display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e3e7ec, 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-16 * var(--u)) rgba(20, 48, 79, .3); font-size: calc(12.5 * var(--u)); line-height: 1.35; }
.mk-si-frage .mk-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #3f6e9e; }
.mk-si-tabs { flex: none; display: flex; gap: calc(2 * var(--u)); border-bottom: 1px solid #e6e9ee; }
.mk-si-tab { position: relative; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); color: #5c6875; white-space: nowrap; transition: color .3s ease; }
.mk-si-tab.ist-aktiv { color: #1a1a1a; font-weight: 600; }
.mk-si-strich { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); bottom: -1px; height: calc(2 * var(--u)); border-radius: 99px; background: #14304f; opacity: 0; }
.mk-si-inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(176 * var(--u)); gap: calc(10 * var(--u)); }
.mk-si-antwort { position: relative; display: flex; flex-direction: column; gap: calc(9 * var(--u)); min-height: 0; padding: calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; }
.mk-si-akopf { display: grid; }
.mk-si-ak { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #3c4652; }
.mk-si-ainhalt { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.mk-si-zl { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.mk-si-zl i { display: block; height: calc(6 * var(--u)); border-radius: 99px; background: #e8ecf1; width: 94%; }
.mk-si-zl i + i { width: 70%; }
.mk-si-liste { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.mk-si-e { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); background: #f7f8fa; opacity: 0; }
.mk-si-e--erst { display: grid; padding: 0; background: none; }
.mk-si-firma, .mk-si-ersatz { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); background: #f7f8fa; transition: background-color .35s ease; }
.mk-si-firma.ist-genannt { background: #e6eef6; box-shadow: inset calc(3 * var(--u)) 0 0 #14304f; }
.mk-si-nr { width: calc(12 * var(--u)); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10 * var(--u)); color: #5c6875; flex: none; }
.mk-si-firma b { position: relative; font-size: calc(12.5 * var(--u)); font-weight: 700; color: #14304f; }
.mk-si-unter { position: absolute; left: 0; right: 0; bottom: calc(-3 * var(--u)); height: calc(2 * var(--u)); border-radius: 99px; background: #ff8a00; transform-origin: 0 50%; transform: scaleX(0); }
.mk-si-empf { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(20 * var(--u)); margin-left: auto; padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u)); border-radius: 99px; background: #14304f; color: #fff; font-size: calc(10 * var(--u)); font-weight: 600; opacity: 0; }
.mk-si-empf .mk-ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mk-si-skel { display: block; width: 46%; height: calc(7 * var(--u)); border-radius: 99px; background: #e1e6ec; }
.mk-si-bilanz { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; }
.mk-si-zahl { font-size: calc(14.5 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: #14304f; }
.mk-si-zahl span { white-space: nowrap; }
.mk-si-pfs { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.mk-si-pf { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(11 * var(--u)); color: #3c4652; }
.mk-si-pf .mk-logo { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mk-si-st { display: grid; place-items: center; width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin-left: auto; border-radius: 50%; background: #eef1f4; color: #fff; transition: background-color .3s ease; }
.mk-si-st > span { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; }
.mk-si-st .mk-ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mk-si-st-nein::before { content: ""; width: calc(7 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 99px; background: #8c96a1; }
.mk-si-st.ist-ja { background: #1f7a4d; }
.mk-si-st.ist-ja .mk-si-st-ja, .mk-si-st.ist-nein .mk-si-st-nein { opacity: 1; }
.mk-si-st.ist-nein { background: #eef1f4; }

/* ── 9 Smart2Security ── */
.mk-se { background: #fafafa; }
.mk-se-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); }
.mk-se-kopf { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); }
.mk-se-kopf b { font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: -.015em; }
.mk-se-domain { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); margin-left: auto; padding: 0 calc(11 * var(--u)); border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #e3e7ec; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(11 * var(--u)); color: #1a1a1a; }
.mk-se-domain .mk-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #3f6e9e; }
.mk-se-inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(168 * var(--u)) minmax(0, 1fr); gap: calc(10 * var(--u)); }
.mk-se-radar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); min-height: 0; padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; }
.mk-se-kreis { position: relative; width: 100%; max-width: calc(150 * var(--u)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #f4f7fb 0%, #eef3f8 62%, #e4ecf5 100%); box-shadow: 0 0 0 1px #d8e1eb; }
.mk-se-ring { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px #d5dfea; }
.mk-se-ring--1 { inset: 17%; }
.mk-se-ring--2 { inset: 33%; }
.mk-se-kreuz { position: absolute; inset: 0; background: linear-gradient(#dde5ee, #dde5ee) center / 1px 100% no-repeat, linear-gradient(#dde5ee, #dde5ee) center / 100% 1px no-repeat; }
.mk-se-kegel { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(63, 110, 158, 0) 0deg, rgba(63, 110, 158, 0) 280deg, rgba(63, 110, 158, .34) 359deg, rgba(63, 110, 158, 0) 360deg); }
.mk-se-blip { position: absolute; z-index: 2; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u)); border-radius: 50%; background: #ff8a00; box-shadow: 0 0 0 calc(3.5 * var(--u)) rgba(255, 138, 0, .22); opacity: 0; transition: background-color .4s ease; }
.mk-se-blip.ist-ok { background: #1f7a4d; box-shadow: 0 0 0 calc(3.5 * var(--u)) rgba(31, 122, 77, .2); }
.mk-se-kern { position: absolute; z-index: 3; left: 32%; top: 32%; width: 36%; height: 36%; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #14304f; box-shadow: 0 0 0 calc(5 * var(--u)) rgba(230, 238, 246, .8), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(20, 48, 79, .16); }
.mk-se-kern > span { grid-area: 1 / 1; display: grid; place-items: center; }
.mk-se-kschild .mk-ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.mk-se-kok { color: #1f7a4d; opacity: 0; }
.mk-se-kok .mk-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.6; }
.mk-se-liste { display: flex; flex-direction: column; min-height: 0; padding: calc(10 * var(--u)) calc(13 * var(--u)) calc(6 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #e6e9ee; }
.mk-se-lkopf { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.mk-se-lkopf b { font-size: calc(12.5 * var(--u)); }
.mk-se-erg { display: inline-flex; align-items: center; height: calc(22 * var(--u)); margin-left: auto; padding: 0 calc(9 * var(--u)); border-radius: 99px; background: #f1f4f7; font-size: calc(10.5 * var(--u)); font-weight: 650; color: #3c4652; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .4s ease, color .4s ease; }
.mk-se-erg.ist-ok { background: #e7f3ec; color: #1d5a3a; }
.mk-se-fort { flex: none; display: block; height: calc(3 * var(--u)); margin-bottom: calc(4 * var(--u)); border-radius: 99px; background: #eef1f4; overflow: hidden; }
.mk-se-fort i { display: block; height: 100%; background: #3f6e9e; transform-origin: 0 50%; transform: scaleX(0); transition: background-color .4s ease; }
.mk-se-fort.ist-ok i { background: #1f7a4d; }
.mk-se-zeile { flex: 1; min-height: calc(28 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); border-bottom: 1px solid #f0f2f5; }
.mk-se-zeile:last-child { border-bottom: 0; }
.mk-se-zic { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: #f1f4f7; color: #3f6e9e; flex: none; }
.mk-se-zic .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mk-se-zeile b { font-size: calc(12 * var(--u)); font-weight: 600; }
.mk-se-anz { margin-left: auto; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(10.5 * var(--u)); color: #5c6875; font-variant-numeric: tabular-nums; opacity: 0; transition: color .4s ease; }
.mk-se-anz.ist-offen { color: #a65400; }
.mk-se-st { display: grid; justify-items: end; align-items: center; width: calc(72 * var(--u)); margin-left: calc(8 * var(--u)); flex: none; }
.mk-se-st > * { grid-area: 1 / 1; opacity: 0; }
.mk-se-wart { width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-right: calc(5 * var(--u)); border-radius: 50%; background: #d3dae2; }
.mk-se-spin { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(2 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--u)) #dfe6ee; border: calc(2 * var(--u)) solid transparent; border-top-color: #3f6e9e; }
.mk-se-ok { display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #1f7a4d; color: #fff; }
.mk-se-ok .mk-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mk-se-pille { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(21 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 99px; font-size: calc(10.5 * var(--u)); font-weight: 650; white-space: nowrap; }
.mk-se-pille .mk-ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mk-se-pille--offen { background: #fff4db; color: #744700; }
.mk-se-pille--kritisch { background: #fdecea; color: #b42318; }
.mk-se-pille--behoben { background: #e7f3ec; color: #1d5a3a; }

.mk-se-legende { gap: calc(14 * var(--u)); font-size: calc(10.5 * var(--u)); color: #5c6875; }
.mk-se-legende span { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.mk-se-legende i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #ff8a00; }
.mk-se-legende i.mk-se-legende-ok { background: #1f7a4d; }
.mk-se-bericht { flex: none; align-items: center; gap: calc(8 * var(--u)); margin: auto 0 calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(10 * var(--u)); background: #f6f8fa; box-shadow: 0 0 0 1px #e6e9ee; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(11 * var(--u)); color: #1a1a1a; opacity: 0; }
.mk-se-bericht > .mk-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #14304f; }
.mk-se-bericht-ok { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: auto; border-radius: 50%; background: #1f7a4d; color: #fff; }
.mk-se-bericht-ok .mk-ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mk-si-verlauf { flex-direction: column; gap: calc(5 * var(--u)); margin-top: auto; padding-top: calc(10 * var(--u)); border-top: 1px solid #eef0f3; }
.mk-si-saeulen { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(54 * var(--u)); }
.mk-si-saeulen i { flex: 1; border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)); background: #c9d6e3; }
.mk-si-saeulen i:last-child { background: #14304f; }
.mk-si-kw { display: flex; justify-content: space-between; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: calc(9 * var(--u)); color: #5c6875; }

/* ── Kleine Stufe: gestrafft, damit die Schrift größer bleiben kann ── */
@container (max-width: 229px) {
  .mk-geraet--handy .mk-ss-person { max-height: calc(160 * var(--u)); }
  .mk-geraet--handy .mk-ss-zeile { gap: calc(12 * var(--u)); }
  .mk-geraet--handy .mk-ad-look .mk-knopf .mk-ic { display: none; }
  .mk-geraet--handy .mk-ad-mini { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .mk-geraet--handy .mk-ad-foto { height: calc(118 * var(--u)); }
}
@container (max-width: 339px) {
  .mk-geraet--tablet .mk-at-fuss { height: calc(50 * var(--u)); }
  .mk-geraet--tablet .mk-at-oben { padding-top: calc(10 * var(--u)); }
}
@container (max-width: 439px) {
  .mk-nicht-mini { display: none !important; }
  .mk-geraet--fenster .mk-leiste { height: calc(26 * var(--u)); }
  .mk-punkte i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
  .mk-co-haupt, .mk-si-haupt, .mk-se-haupt { padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)); gap: calc(8 * var(--u)); }
  .mk-co-titel { font-size: calc(16 * var(--u)); }
  .mk-co-kpi { padding: calc(7 * var(--u)) calc(9 * var(--u)) calc(8 * var(--u)); }
  .mk-co-kpi b { font-size: calc(21 * var(--u)); }
  .mk-co-hinweis { padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); gap: calc(7 * var(--u)); }
  .mk-co-hinweis .mk-knopf { margin-left: 0; }
  .mk-co-balken { margin-bottom: calc(15 * var(--u)); }
  .mk-si-frage { padding: calc(8 * var(--u)) calc(11 * var(--u)); font-size: calc(11.5 * var(--u)); }
  .mk-si-tab { height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: calc(11 * var(--u)); }
  .mk-si-inhalt { grid-template-columns: minmax(0, 1fr) calc(132 * var(--u)); gap: calc(8 * var(--u)); }
  .mk-si-antwort { padding: calc(9 * var(--u)) calc(11 * var(--u)); gap: calc(7 * var(--u)); }
  .mk-si-e, .mk-si-firma, .mk-si-ersatz { height: calc(27 * var(--u)); }
  .mk-si-bilanz { padding: calc(10 * var(--u)); gap: calc(9 * var(--u)); }
  .mk-si-zahl { font-size: calc(14 * var(--u)); }
  .mk-si-pfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)) calc(6 * var(--u)); }
  .mk-si-pf { gap: calc(3 * var(--u)); }
  .mk-si-pf > span { display: none; }
  .mk-si-pf .mk-si-st { margin-left: 0; }
  .mk-se-inhalt { grid-template-columns: calc(128 * var(--u)) minmax(0, 1fr); gap: calc(8 * var(--u)); }
  .mk-se-radar { padding: calc(10 * var(--u)); }
  .mk-se-zeile { min-height: calc(24 * var(--u)); }
  .mk-se-st { width: calc(66 * var(--u)); }
  .mk-sp-kopf { height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); }
  .mk-sp-szene { padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)); gap: calc(9 * var(--u)); }
  .mk-sp-atext { font-size: calc(14.5 * var(--u)); }
  .mk-sp-auszug { padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)); gap: calc(6 * var(--u)); }
  .mk-sp-auszug > i:last-child { display: none; }
  .mk-sp-eingabe { margin: 0 calc(14 * var(--u)) calc(10 * var(--u)); }
}

/* ── Breite Fassung der Desktop-Apps (ab 640 px Mockup-Breite) ── */
@container (min-width: 640px) {
  .mk-co-haupt, .mk-si-haupt, .mk-se-haupt { padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); gap: calc(12 * var(--u)); }
  .mk-co-kpi { padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .mk-co-kpi b { font-size: calc(26 * var(--u)); }
  .mk-si-inhalt { grid-template-columns: minmax(0, 1fr) calc(200 * var(--u)); }
  .mk-se-inhalt { grid-template-columns: calc(240 * var(--u)) minmax(0, 1fr); }
  .mk-se-kreis { max-width: calc(200 * var(--u)); }
  .mk-se-zeile { flex: none; height: calc(52 * var(--u)); }
  .mk-si-zl--nach { margin-top: calc(6 * var(--u)); }
  .mk-sp-szene { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)); gap: calc(14 * var(--u)); }
  .mk-sp-eingabe { margin: 0 calc(26 * var(--u)) calc(16 * var(--u)); }
}

/* ── Ruhige Fassung (reduce): Bewegung kommt aus mockups.js; hier nur Kleinigkeiten ── */
.mk--ruhig .mk-at-deck::before { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .mk *, .mk *::before, .mk *::after { transition-duration: .01ms !important; } }