/* Abschnitt 4 „In Ihren Programmen“ · Studio Display mit arbeitendem digitalem Personal
   Aus lab-systeme/mx.css übernommen (Owner 26.09.). Präfix mx-, Tokens auf den Abschnitt begrenzt;
   Reset, :root und Section-Kopf kommen aus hero.css / sections.css. */
#systeme {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --klara: #2F6FEB; --sebastian: #3F8F63; --frida: #E7865A;
}
/* Labor-Reset auf den Bildschirm begrenzt (0-Spezifität, Klassenregeln gewinnen weiter):
   v3 setzt figure-Ränder, line-height 1.5 und img/svg als Block – das Labor rechnete mit Browser-Normal. */
:where(#systeme .mx-imac, #systeme .mx-imac *, #systeme .mx-steps, #systeme .mx-steps *) { margin: 0; padding: 0; }
:where(#systeme .mx-imac, #systeme .mx-steps) { line-height: normal; }

/* ---------- iMac (24", aktuelle Generation): heller Rahmen, Kinn, Standfuß ---------- */
.mx-imac { width: min(1040px, 100%); margin: 0 auto; }
.mx-body {
  position: relative; padding: 1.35% 1.35% 0; border-radius: 18px 18px 16px 16px;
  background: linear-gradient(180deg, #FBFBFB 0%, #F2F2F3 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 50px 70px -50px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.04);
}
.mx-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px;
  background: #0B0B0C; box-shadow: 0 0 0 3px #0B0B0C;   /* schmaler schwarzer Displayrand im hellen Rahmen */
}
.mx-chin { height: clamp(40px, 8.4vw, 86px); border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #ECECEE 0%, #E1E1E4 100%); margin: 0 -1.35%; margin-top: 1.35%; box-shadow: inset 0 1px 0 rgba(0,0,0,.05); }
.mx-stand { position: relative; height: clamp(46px, 9vw, 96px); }
.mx-neck { position: absolute; left: 50%; top: 0; width: 21%; height: 86%; transform: translateX(-50%); background: linear-gradient(90deg, #D4D4D7, #ECECEE 40%, #E4E4E7 60%, #CACACD); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.mx-foot { position: absolute; left: 50%; bottom: 0; width: 25%; height: 14%; transform: translateX(-50%); border-radius: 2px 2px 8px 8px; background: linear-gradient(180deg, #E3E3E6, #C9C9CC); box-shadow: 0 10px 18px -8px rgba(0,0,0,.35); }

/* ---------- Desktop (1280 × 720, per transform auf die Displaygröße skaliert) ---------- */
.mx-desk { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; font-family: var(--font-ui); color: #1D1D1F; letter-spacing: -.01em; user-select: none; }
.mx-wall { position: absolute; inset: 0; background:
  radial-gradient(60% 70% at 72% 78%, rgba(255,59,48,.20), transparent 70%),
  radial-gradient(55% 60% at 18% 20%, rgba(255,214,196,.55), transparent 70%),
  linear-gradient(160deg, #F7F4F1 0%, #EEE9EC 55%, #E6E4EC 100%); }
.mx-menubar { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 0 16px; font-size: 13px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.mx-mb-app { font-weight: 700; }
.mx-mb-menu { display: flex; gap: 18px; }
.mx-mb-menu span { padding: 2px 7px; margin: 0 -7px; border-radius: 5px; }
.mx-mb-menu span.is-on { background: rgba(0,0,0,.1); }
.mx-mb-right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
.mx-mb-ic { width: 20px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px rgba(0,0,0,.55); position: relative; }
.mx-mb-ic::after { content: ""; position: absolute; inset: 2.5px 6px 2.5px 2.5px; border-radius: 1.5px; background: rgba(0,0,0,.7); }

/* Dock */
.mx-dock { position: absolute; left: 50%; bottom: 8px; z-index: 50; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; padding: 8px 10px; border-radius: 22px;
  background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 0 0 .5px rgba(0,0,0,.12), 0 10px 30px -10px rgba(0,0,0,.25); }
.mx-di { position: relative; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.mx-di.is-run::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0,0,0,.55); }
.mx-di-sep { width: 1px; height: 44px; margin: 0 2px 4px; background: rgba(0,0,0,.14); }
.mx-di--finder { background: linear-gradient(90deg, #3E8BF7 50%, #E8F1FD 50%); }
.mx-di--finder i { width: 26px; height: 22px; border-radius: 3px; background:
  radial-gradient(circle at 30% 38%, #0D2B55 2px, transparent 2.5px), radial-gradient(circle at 70% 38%, #0D2B55 2px, transparent 2.5px),
  radial-gradient(ellipse 40% 22% at 50% 76%, transparent 60%, #0D2B55 62%, #0D2B55 78%, transparent 80%); }
.mx-di--mail { background: linear-gradient(180deg, #5AC8FA, #1E88F5); }
.mx-di--mail i { width: 30px; height: 21px; border-radius: 3px; background: #fff; position: relative; overflow: hidden; }
.mx-di--mail i::before { content: ""; position: absolute; left: 50%; top: -12px; width: 24px; height: 24px; transform: translateX(-50%) rotate(45deg); border: 1.5px solid #1E88F5; border-radius: 3px; }
.mx-di--cal { background: #fff; flex-direction: column; gap: 0; }
.mx-di--cal b { font-size: 9px; font-weight: 700; color: var(--brand); letter-spacing: .04em; margin-top: 6px; }
.mx-di--cal em { font-style: normal; font-size: 26px; font-weight: 300; line-height: 1; margin-top: -2px; }
.mx-di--xls { background: linear-gradient(135deg, #21A366, #107C41); }
.mx-di--doc { background: linear-gradient(135deg, #41A5EE, #185ABD); }
.mx-di--xls i, .mx-di--doc i { font-style: normal; font-weight: 800; font-size: 24px; color: #fff; font-family: var(--font-text); }
.mx-di--pdf { background: linear-gradient(180deg, #fff, #EDEDED); }
.mx-di--pdf i { width: 26px; height: 32px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); position: relative; }
.mx-di--pdf i::after { content: "PDF"; position: absolute; left: -4px; right: -4px; bottom: 5px; padding: 1px 0; font: 700 8px/1 var(--font-text); color: #fff; text-align: center; background: var(--brand); border-radius: 2px; }

/* ---------- Fenster ---------- */
.mx-wins { position: absolute; inset: 0; }
.mx-win { position: absolute; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 22px 60px -14px rgba(0,0,0,.38), 0 4px 12px rgba(0,0,0,.06); }
.mx-win[hidden] { display: none; }
.mx-tb { flex: none; position: relative; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3A3A3C; background: #F4F4F5; border-bottom: 1px solid #E3E3E5; }
.mx-tb::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #FF5F57; box-shadow: 20px 0 0 #FEBC2E, 40px 0 0 #28C840; }
.mx-tb--xls { background: #107C41; color: #fff; border-color: #0B6A37; }
.mx-tb--doc { background: #185ABD; color: #fff; border-color: #134A9C; }
.mx-tb small { font-weight: 400; opacity: .7; }

/* Mail */
.mx-mail { flex: 1; display: grid; grid-template-columns: 170px 290px 1fr; min-height: 0; }
.mx-side { background: #F2F1F3; border-right: 1px solid #E3E3E5; padding: 12px 8px; font-size: 13px; }
.mx-side p { padding: 6px 10px; border-radius: 7px; display: flex; justify-content: space-between; color: #2C2C2E; }
.mx-side p b { font-weight: 400; color: #8A8A8E; font-variant-numeric: tabular-nums; }
.mx-side p.is-sel { background: rgba(0,0,0,.07); font-weight: 600; }
.mx-side p.is-drop { background: #2F6FEB; color: #fff; }
.mx-side p.is-drop b { color: #fff; }
.mx-side h6 { font-size: 11px; font-weight: 600; color: #8A8A8E; padding: 10px 10px 4px; }
.mx-list { border-right: 1px solid #E3E3E5; overflow: hidden; }
.mx-row { position: relative; padding: 10px 14px 10px 24px; border-bottom: 1px solid #EFEFF1; font-size: 12.5px; line-height: 1.35; }
.mx-row.is-unread::before { content: ""; position: absolute; left: 9px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #2F6FEB; }
.mx-row .mx-r1 { display: flex; justify-content: space-between; gap: 8px; }
.mx-row .mx-r1 b { font-weight: 700; }
.mx-row .mx-r1 span { color: #8A8A8E; font-size: 11.5px; }
.mx-row .mx-r2 { font-weight: 500; }
.mx-row .mx-r3 { color: #8A8A8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-row.is-sel { background: #2F6FEB; color: #fff; border-radius: 8px; margin: 0 6px; border-color: transparent; padding-left: 18px; }
.mx-row.is-sel::before { display: none; }
.mx-row.is-sel .mx-r1 span, .mx-row.is-sel .mx-r3 { color: rgba(255,255,255,.8); }
.mx-row .mx-clip { display: inline-block; width: 9px; height: 11px; margin-left: 4px; border: 1.5px solid currentColor; border-radius: 5px; opacity: .6; vertical-align: -1px; }
.mx-read { padding: 20px 26px; font-size: 13px; line-height: 1.55; overflow: hidden; }
.mx-read .mx-empty { height: 100%; display: grid; place-items: center; color: #A1A1A6; font-size: 14px; }
.mx-read h4 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.mx-read .mx-from { color: #6E6E73; font-size: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #EFEFF1; }
.mx-read p + p { margin-top: 10px; }
.mx-read ul { margin: 8px 0 0 2px; }
.mx-read li { padding-left: 14px; position: relative; }
.mx-read li::before { content: "·"; position: absolute; left: 3px; font-weight: 700; }
.mx-att { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px 8px 8px; border-radius: 10px; background: #F4F4F5; box-shadow: inset 0 0 0 1px #E6E6E8; font-size: 12px; }
.mx-att i { width: 22px; height: 28px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); position: relative; }
.mx-att i::after { content: "PDF"; position: absolute; left: -3px; right: -3px; bottom: 4px; font: 700 7px/1.4 var(--font-text); color: #fff; text-align: center; background: var(--brand); border-radius: 2px; }
.mx-att span b { display: block; font-weight: 600; }
.mx-att span small { color: #8A8A8E; }
.mx-att.is-sel { background: #DCE7FC; box-shadow: inset 0 0 0 1px #9DBBF5; }
.mx-mbtns { display: flex; gap: 6px; margin-top: 18px; }
.mx-mbtns span { padding: 5px 12px; border-radius: 7px; background: #F1F1F3; font-size: 12px; font-weight: 500; }

/* Verfassen */
.mx-compose .mx-cf { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.mx-cf-row { display: flex; gap: 8px; padding: 9px 18px; border-bottom: 1px solid #EFEFF1; }
.mx-cf-row span { color: #8A8A8E; width: 52px; }
.mx-cf-body { flex: 1; padding: 14px 18px; line-height: 1.55; white-space: pre-wrap; }
.mx-cf-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid #EFEFF1; }
.mx-send { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; background: #2F6FEB; color: #fff; font-size: 12.5px; font-weight: 600; }
.mx-send svg { width: 13px; height: 13px; fill: #fff; }
.mx-send.is-press { transform: scale(.95); }

/* Tabellenkalkulation */
.mx-fx { flex: none; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-bottom: 1px solid #E3E3E5; font-size: 12.5px; background: #fff; }
.mx-fx .mx-ref { width: 54px; padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px #D8D8DA; color: #3A3A3C; }
.mx-fx .mx-fxv { color: #3A3A3C; }
.mx-fx .mx-fxv::before { content: "fx"; font-style: italic; color: #8A8A8E; margin-right: 10px; }
.mx-grid { flex: 1; overflow: hidden; }
.mx-grid table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mx-grid th, .mx-grid td { height: 30px; padding: 0 10px; border: 1px solid #E7E7E9; text-align: left; white-space: nowrap; }
.mx-grid thead th { background: #F4F4F5; color: #6E6E73; font-weight: 500; text-align: center; height: 22px; font-size: 11.5px; }
.mx-grid td:first-child { width: 34px; background: #F4F4F5; color: #6E6E73; text-align: center; font-size: 11.5px; }
.mx-grid .mx-h td { font-weight: 700; background: #F9F9FA; }
.mx-grid .mx-h td:first-child { font-weight: 400; }
.mx-grid .num { text-align: right; }
.mx-grid td.is-act { box-shadow: inset 0 0 0 2px #107C41; background: #fff; }
.mx-grid td.is-flash { animation: mx-flash 700ms var(--ease-out); }
.mx-grid tr.is-row td:not(:first-child) { background: #EAF4EE; }
.mx-grid .mx-tot td { font-weight: 700; border-top: 2px solid #3A3A3C; }
.mx-chip-ok { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: #DDF1E4; color: #1E6B3B; font-weight: 600; font-size: 11.5px; }
@keyframes mx-flash { from { background: #CDEBD8; } to { background: transparent; } }

/* Textverarbeitung */
.mx-docbg { flex: 1; background: #E9EAEC; padding: 22px 0; overflow: hidden; }
.mx-page { width: 520px; margin: 0 auto; min-height: 560px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 42px 56px; font-family: var(--font-text); font-size: 12px; line-height: 1.6; color: #222; }
.mx-page .mx-lh { display: flex; justify-content: space-between; font-size: 10.5px; color: #6E6E73; margin-bottom: 30px; }
.mx-page .mx-lh b { color: #222; font-size: 13px; }
.mx-page h5 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.mx-page p { min-height: 19px; }
.mx-page p + p { margin-top: 8px; }
.mx-page .mx-tbl { margin-top: 16px; border-top: 1px solid #DADADC; }
.mx-page .mx-tbl div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #EEE; }
.mx-page .mx-tbl .mx-sum { font-weight: 700; border-bottom: 0; }
.mx-page .mx-sumv { padding: 0 4px; border-radius: 3px; transition: background-color 600ms ease; }
.mx-page .mx-sumv.is-hl { background: #DDF1E4; transition: none; }
.mx-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: #1D1D1F; animation: mx-blink 1s steps(1) infinite; }
@keyframes mx-blink { 50% { opacity: 0; } }

/* Dropdown-Menü aus der Menüleiste */
.mx-dd { position: absolute; z-index: 60; top: 26px; min-width: 220px; padding: 5px; border-radius: 10px; font-size: 13px;
  background: rgba(246,246,247,.86); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 12px 32px -8px rgba(0,0,0,.3); }
.mx-dd p { padding: 4px 12px; border-radius: 5px; display: flex; justify-content: space-between; }
.mx-dd p small { color: #8A8A8E; }
.mx-dd p.is-hl { background: #2F6FEB; color: #fff; }
.mx-dd p.is-hl small { color: rgba(255,255,255,.8); }
.mx-dd hr { border: 0; height: 1px; background: rgba(0,0,0,.1); margin: 4px 8px; }

/* Vorschau (PDF) */
.mx-pdfbg { flex: 1; background: #DCDCDF; padding: 18px; overflow: hidden; }
.mx-inv { background: #fff; padding: 28px 30px; font-size: 11.5px; line-height: 1.55; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.mx-inv h5 { font-size: 15px; margin-bottom: 2px; }
.mx-inv .mx-im { color: #6E6E73; margin-bottom: 16px; }
.mx-inv .mx-ir { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #EEE; }
.mx-inv .mx-ir.b { font-weight: 700; border-bottom: 0; border-top: 1.5px solid #333; margin-top: 4px; }
.mx-inv mark { background: transparent; border-radius: 2px; transition: background-color 200ms ease; color: inherit; }
.mx-inv mark.is-hl { background: #FFE58A; }

/* Finder */
.mx-finder { flex: 1; display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.mx-fpath { flex: none; padding: 6px 16px; font-size: 12px; color: #6E6E73; border-bottom: 1px solid #EFEFF1; }
.mx-flist { padding: 6px 8px; font-size: 12.5px; }
.mx-flist p { display: grid; grid-template-columns: 22px 1fr 110px 90px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.mx-flist p:nth-child(even) { background: #F7F7F8; }
.mx-flist p i { width: 16px; height: 20px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); position: relative; }
.mx-flist p i::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 3px; height: 5px; background: var(--brand); border-radius: 1px; }
.mx-flist p span { color: #8A8A8E; font-size: 11.5px; }
.mx-flist p.is-new { background: #DCE7FC; }
.mx-flist.is-drop { box-shadow: inset 0 0 0 2px #2F6FEB; border-radius: 8px; }
.mx-tagc { display: inline-flex; align-items: center; gap: 5px; color: #9A5B00 !important; font-weight: 600; }
.mx-tagc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF9F0A; }

/* Kalender */
.mx-calw { flex: 1; display: grid; grid-template-columns: 46px repeat(5, 1fr); grid-template-rows: 34px 1fr; min-height: 0; font-size: 11.5px; }
.mx-calw .mx-dh { display: flex; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid #E3E3E5; color: #6E6E73; }
.mx-calw .mx-dh b { color: #1D1D1F; font-weight: 600; }
.mx-calw .mx-dh.is-today b { background: var(--brand); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.mx-calw .mx-hcol { position: relative; }
.mx-calw .mx-hcol span { position: absolute; right: 6px; font-size: 10.5px; color: #8A8A8E; transform: translateY(-50%); }
.mx-calw .mx-dcol { position: relative; border-left: 1px solid #EFEFF1; background-image: linear-gradient(#EFEFF1 1px, transparent 1px); background-size: 100% 52px; }
.mx-ev { position: absolute; left: 3px; right: 3px; padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; overflow: hidden; border-left: 3px solid; }
.mx-ev--b { background: #DCE8FD; color: #1A4FB8; border-color: #2F6FEB; }
.mx-ev--g { background: #DDF1E4; color: #1E6B3B; border-color: #34A853; }
.mx-ev--o { background: #FFE9DA; color: #A34A12; border-color: #FF8A3D; }
.mx-ev--new { background: #FFE3E1; color: #B3160C; border-color: var(--brand); transform-origin: top; }

/* Mitteilungen oben rechts */
.mx-toasts { position: absolute; right: 12px; top: 36px; z-index: 55; display: grid; gap: 8px; width: 320px; }
.mx-toast { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 11px 14px 11px 11px; border-radius: 18px; font-size: 12.5px; line-height: 1.35;
  background: rgba(246,246,247,.82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 12px 30px -10px rgba(0,0,0,.3); }
.mx-toast b { display: block; font-weight: 600; }
.mx-toast span { color: #6E6E73; }
.mx-toast .mx-tic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #34C759; }
.mx-toast .mx-tic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Mauszeiger mit Namensschild (wie in v3: Pfeil, Porträt, Name) */
.mx-cur { position: absolute; left: 0; top: 0; z-index: 70; pointer-events: none; transform: translate(1100px, 600px); will-change: transform; }
.mx-cur svg { display: block; width: 18px; height: 22px; fill: #1D1D1F; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); transform-origin: 2px 2px; }
.mx-cur.is-down svg { transform: scale(.86); }
.mx-tag { position: absolute; left: 14px; top: 18px; display: flex; align-items: center; gap: 0; }
.mx-tag img { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--who, var(--klara)); position: relative; z-index: 1; }
.mx-tag b { margin-left: -6px; padding: 3px 9px 3px 11px; border-radius: 999px; background: var(--who, var(--klara)); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.mx-carry { position: absolute; left: 10px; top: -4px; }
.mx-ghost { transform: rotate(-2deg); opacity: .92; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); border-radius: 8px; pointer-events: none; }
.mx-ripple { position: absolute; z-index: 69; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--who, var(--klara)); opacity: 0; pointer-events: none; }

/* ---------- Reiter unter dem iMac ---------- */
.mx-steps { width: min(1040px, 100%); margin: clamp(28px, 4vw, 44px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-steps button { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px; border-radius: 18px; text-align: left; color: var(--ink-3); transition: color 200ms ease, background-color 200ms ease; overflow: hidden; }
.mx-steps button > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-steps b { font-size: 15px; font-weight: 600; }
.mx-steps button > span > span { font-size: 13px; }
.mx-steps img { flex: none; border-radius: 50%; filter: grayscale(1); opacity: .55; transition: filter 300ms ease, opacity 300ms ease; }
.mx-steps button[aria-pressed="true"] { color: var(--ink); background: var(--bg-subtle); }
.mx-steps button[aria-pressed="true"] img { filter: none; opacity: 1; }
.mx-steps button[aria-pressed="true"] > span > span { color: var(--ink-2); }
.mx-prog { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 1px; background: var(--line); opacity: 0; transition: opacity 200ms ease; }
.mx-prog::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
.mx-steps button[aria-pressed="true"] .mx-prog { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .mx-steps button:hover { color: var(--ink); } }
.mx-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 699px) {
  .mx-steps { grid-template-columns: 1fr; gap: 4px; }
  .mx-steps button { padding: 12px 14px 16px; }
  .mx-body { border-radius: 12px 12px 10px 10px; }
  .mx-chin { border-radius: 0 0 10px 10px; }
}

/* ---------- Studio Display (Owner 26.09.: statt iMac) ----------
   Schmaler, gleichmäßiger schwarzer Rahmen, kein Kinn; Aluminium-Standfuß als schlanker Block
   mit runder Gelenkscheibe oben und flacher, heller Fußplatte. */
.mx-sd .mx-body {
  padding: 1.05%; border-radius: 14px; background: #0A0A0B;
  box-shadow: inset 0 0 0 1px #2A2A2C, 0 0 0 1px rgba(0,0,0,.35), 0 40px 60px -40px rgba(0,0,0,.45);
}
.mx-sd .mx-screen { border-radius: 4px; box-shadow: none; }
.mx-sd .mx-stand { height: clamp(120px, 21vw, 230px); margin-top: -2px; }   /* Hals ≈ 0,42 × Displayhöhe wie beim Original */
.mx-sd .mx-neck {
  top: 0; width: 24%; height: calc(100% - 12px); clip-path: none; border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #2B2B2D 0%, #5A5A5D 28%, #8E8E92 70%, #A7A7AB 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(0,0,0,.3);
}
.mx-sd .mx-neck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28)); }
.mx-sd .mx-hinge {
  position: absolute; left: 50%; top: -14px; z-index: 1; width: 5.4%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 50% 35%, #E9E9EB, #9C9CA0 70%, #6E6E72);
  box-shadow: 0 0 0 2px #0A0A0B, inset 0 -2px 3px rgba(0,0,0,.35);
  clip-path: inset(50% 0 0 0);   /* nur die untere Hälfte schaut unter dem Display hervor */
}
.mx-sd .mx-hinge::after { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; background: #0A0A0B; }
.mx-sd .mx-foot {
  bottom: 0; width: 26%; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #D9D9DC 0%, #F1F1F3 45%, #B9B9BD 100%);
  box-shadow: 0 10px 16px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8);
}
@media (max-width: 699px) { .mx-sd .mx-body { border-radius: 9px; } .mx-sd .mx-foot { height: 7px; } .mx-sd .mx-neck { height: calc(100% - 7px); } }

/* =====================================================================
   macOS 26 · Liquid Glass (Owner 26.09.)
   Rezeptur 1:1 aus den vorhandenen Komponenten (v3 hero.css: .glass / iOS-Banner):
   helle Fläche 72 %, Unschärfe 14 px, Sättigung 1,8, hauchdünne Kante, weißer Innenglanz oben.
   ===================================================================== */
.mx-desk {
  --lg-bg: rgba(246,246,247,.72);
  --lg-filter: blur(14px) saturate(1.8);
  --lg-edge: 0 0 0 .5px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04), inset 0 1px 1px rgba(255,255,255,.9);
}
/* Menüleiste: in Tahoe ohne Hintergrund */
.mx-menubar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mx-mb-menu span.is-on { background: var(--lg-bg); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); box-shadow: var(--lg-edge); }

/* Dock: Glasfläche mit Glanzkante oben und leiser Kante unten */
.mx-dock { border-radius: 26px; padding: 9px 11px;
  background: rgba(246,246,247,.40); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.10), 0 12px 32px -12px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.35); }
.mx-di { border-radius: 13px; }

/* Fenster: größere Radien, Titelzeile verschmilzt mit dem Inhalt */
.mx-win { border-radius: 20px; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 26px 64px -16px rgba(0,0,0,.34), 0 4px 12px rgba(0,0,0,.05); }
.mx-tb { height: 46px; background: #fff; border-bottom: 0; justify-content: flex-start; padding-left: 90px; font-size: 13.5px; }
.mx-tb::before { left: 18px; }
.mx-tb--xls { background: #107C41; }
.mx-tb--doc { background: #185ABD; }
/* Werkzeug-Kapsel rechts in der Titelzeile, im selben Glas */
.mx-tb::after {
  content: ""; position: absolute; right: 12px; top: 8px; width: 92px; height: 30px; border-radius: 15px;
  background-color: var(--lg-bg); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); box-shadow: var(--lg-edge);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A3C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A3C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A3A3C'%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 15px 15px;
  background-position: 16px 50%, 38px 50%, 60px 50%;
}
.mx-tb--xls::after, .mx-tb--doc::after { background-color: rgba(255,255,255,.18); box-shadow: 0 0 0 .5px rgba(255,255,255,.25), inset 0 1px 1px rgba(255,255,255,.45);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3C/svg%3E"); }
.mx-compose .mx-tb::after, .mx-win[data-app="pdf"] .mx-tb::after { width: 64px; background-position: 14px 50%, 36px 50%, 200px 50%; }

/* Seitenleisten (Mail, Finder): schwebende Glas-Paneele */
.mx-mail, .mx-finder { background: #fff; }
.mx-side { margin: 0 0 8px 8px; border: 0; border-radius: 14px; padding: 10px 6px;
  background: rgba(242,242,244,.78); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), inset 0 1px 1px rgba(255,255,255,.9); }
.mx-side p { border-radius: 9px; }
.mx-side p.is-sel { background: rgba(0,0,0,.06); }
.mx-list { border-right: 0; }
.mx-read { border-left: 1px solid #EFEFF1; }
.mx-mail .mx-mbtns span, .mx-att { box-shadow: var(--lg-edge); }

/* Menüs, Mitteilungen, Senden-Knopf: dasselbe Glas */
.mx-dd, .mx-toast { background: var(--lg-bg); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 14px 34px -12px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.9); }
.mx-dd { border-radius: 14px; }
.mx-dd p { border-radius: 8px; }
.mx-toast { border-radius: 22px; }
.mx-send { border-radius: 999px; box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }

/* Owner 26.09.: Hals ganz eingefahren, Office-Icons im Dock, Fortschritt linear */
.mx-sd .mx-stand { height: clamp(64px, 11vw, 124px); }
.mx-di--ms { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16), inset 0 0 0 .5px rgba(0,0,0,.06); }
.mx-di--ms img { width: 34px; height: 34px; object-fit: contain; }
.mx-prog::after { display: none; }
.mx-prog > i { position: absolute; inset: 0; background: var(--ink); border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* =====================================================================
   Freigabe (Owner 26.09.): zwei Varianten zum Vergleich
   ===================================================================== */
/* Wartender Mitarbeiter: Namensschild pulsiert leise */
.mx-cur.is-wait .mx-tag b { animation: mx-waitp 1.4s ease-in-out infinite; }
@keyframes mx-waitp { 50% { opacity: .72; } }

/* Variante A · im Display: Glas-Mitteilung mit Aktionen + Ihr Zeiger „Sie“ */
.mx-ask { grid-template-columns: 36px 1fr; row-gap: 10px; width: 330px; }
.mx-ask img { border-radius: 9px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
.mx-ask-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-ask-acts span { display: grid; place-items: center; height: 32px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #1D1D1F;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.9); transition: transform 120ms ease; }
.mx-ask-acts span.is-main { background: #1D1D1F; color: #fff; }
.mx-ask-acts span.is-press { transform: scale(.94); }
.mx-cur--you { z-index: 71; opacity: 0; transition: opacity 240ms ease; transform: translate(1400px, 820px); }
.mx-cur--you.is-on { opacity: 1; }
.mx-cur--you svg { fill: #fff; stroke: #1D1D1F; }
.mx-cur--you .mx-tag b { background: #636366; margin-left: 0; padding: 3px 10px; }

.mx-tagc.is-ok { color: #1E6B3B !important; }
.mx-tagc.is-ok::before { background: #34C759; }
@media (max-width: 1240px) { .mx-phone { right: 1.5%; bottom: 2%; width: 17%; } }

/* =====================================================================
   iPhone 1:1 aus dem Hero (v3 hero.css: .phone/.frame/.bezel/.screen/.hw/.island/.banner),
   Präfix mx-ph-. Erscheint nur zur Freigabe (Owner 26.09.).
   ===================================================================== */
.mx-imac { position: relative; }
.mx-phone { position: absolute; z-index: 3; right: -4%; bottom: 0; width: 15%; aspect-ratio: 432 / 904; pointer-events: none;
  opacity: 0; transform: translateY(18%) scale(.94); transition: transform 420ms var(--ease-out), opacity 240ms ease; }
.mx-phone.is-in { opacity: 1; transform: none; transition: transform 620ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease; }
.mx-phone::before { content: ""; position: absolute; inset: 0; border-radius: 17.8% / 8.5%;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 22px 44px -18px rgba(0,0,0,.24), 0 56px 100px -40px rgba(0,0,0,.22); }
.mx-ph { position: absolute; left: 0; top: 0; width: 432px; height: 904px; transform: scale(var(--ps, .35)); transform-origin: 0 0; font-family: var(--font-ui); }
.mx-ph-frame { position: absolute; inset: 0; border-radius: 77px;
  background: linear-gradient(150deg, #F4F4F5 0%, #C9CACD 18%, #E7E8EA 50%, #BDBEC1 80%, #EEEEEF 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 0 0 2.5px rgba(160,162,166,.35), 0 0 0 .5px rgba(0,0,0,.10); }
.mx-ph-bezel { position: absolute; inset: 4.5px; border-radius: 72.5px; background: #0B0B0C; box-shadow: 0 0 0 .75px rgba(120,122,126,.5); }
.mx-ph-screen { position: absolute; inset: 10.5px; border-radius: 62px; overflow: hidden; isolation: isolate; color: #000; -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
  background: radial-gradient(70% 45% at 70% 82%, var(--wall-glow, rgba(255,59,48,.30)), transparent 70%), linear-gradient(170deg, var(--wall-1, #F4EDE9), var(--wall-2, #E4DDE6));
  filter: brightness(.35) saturate(.6); transition: filter 380ms ease; }
.mx-phone.is-awake .mx-ph-screen { filter: none; }
.mx-hw { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #B9BABD, #E9EAEC 55%, #C4C5C8); }
.mx-hw-action { left: -2.5px; top: 190px; height: 34px; }
.mx-hw-volup { left: -2.5px; top: 252px; height: 64px; }
.mx-hw-voldn { left: -2.5px; top: 330px; height: 64px; }
.mx-hw-side { right: -2.5px; top: 282px; height: 104px; background: linear-gradient(270deg, #B9BABD, #E9EAEC 55%, #C4C5C8); }
.mx-hw-cam { right: -1.5px; top: 548px; height: 66px; width: 3px; background: linear-gradient(270deg, #A9AAAD, #D8D9DC); }
.mx-ph-sb { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 6; }
.mx-ph-sbi { position: absolute; right: 31px; top: 24px; display: flex; align-items: center; gap: 6px; color: #000; }
.mx-sb-cell { width: 18px; height: 12px; fill: currentColor; }
.mx-sb-wifi { width: 16px; height: 12px; fill: currentColor; }
.mx-sb-batt { width: 28px; height: 13px; fill: currentColor; margin-left: 1px; }
.mx-ph-island { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; background: #000; z-index: 7; }
.mx-ph-home { position: absolute; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; z-index: 4; }
.mx-ph-date { position: absolute; top: 96px; left: 0; right: 0; text-align: center; font-size: 21px; font-weight: 600; color: rgba(29,29,31,.72); }
.mx-ph-time { position: absolute; top: 118px; left: 0; right: 0; text-align: center; font-size: 104px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: rgba(29,29,31,.82); }
/* Mitteilung: gleiche Bauweise und dasselbe dunkle Glas wie das Banner im Hero */
.mx-ph-note { position: absolute; left: 12px; right: 12px; top: 520px; z-index: 8;
  display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center;
  padding: 12px 16px 13px 13px; border-radius: 26px; color: #fff;
  background: rgba(28,28,30,.86); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 0 0 .6px rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  opacity: 0; transform: translateY(40px) scale(.96); transition: transform 380ms var(--ease-out), opacity 240ms ease; }
.mx-ph-note.is-in { opacity: 1; transform: none; transition: transform 620ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease; }
.mx-ph-note.is-press { transform: scale(1.04); transition: transform 260ms var(--ease-out); }
.mx-ph-ic { width: 38px; height: 38px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .6px rgba(255,255,255,.2); }
.mx-ph-ic img { width: 27px; height: 27px; }
.mx-ph-body { min-width: 0; }
.mx-ph-top { display: flex; justify-content: space-between; align-items: baseline; }
.mx-ph-top b { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.02em; }
.mx-ph-top span { font-size: 13px; color: rgba(235,235,245,.6); }
.mx-ph-title, .mx-ph-text { display: block; font-size: 15px; line-height: 20px; letter-spacing: -.02em; }
.mx-ph-title { font-weight: 600; }
.mx-ph-note.is-ok .mx-ph-title { color: #7EE2A0; }
/* Aktionen erscheinen nach langem Drücken unter der Mitteilung, wie in iOS */
.mx-ph-acts { position: absolute; left: 12px; right: 12px; top: 624px; z-index: 8; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  opacity: 0; transform: translateY(-10px) scale(.98); transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.mx-ph-acts.is-in { opacity: 1; transform: none; }
.mx-ph-acts span { display: grid; place-items: center; height: 52px; border-radius: 26px; font-size: 16px; font-weight: 600; color: #fff;
  background: rgba(28,28,30,.78); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 0 0 .6px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10); transition: transform 120ms ease; }
.mx-ph-acts span.is-main { background: #fff; color: #1D1D1F; }
.mx-ph-acts span.is-press { transform: scale(.94); }
.mx-ph-tap { position: absolute; z-index: 9; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(60,60,67,.28); box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); opacity: 0; transform: scale(1.35); transition: opacity 140ms ease, transform 160ms ease; pointer-events: none; }
.mx-ph-tap.is-on { opacity: 1; transform: scale(1); }
.mx-ph-tap.is-hold { transform: scale(.82); transition: transform 520ms ease; }
@media (max-width: 1240px) { .mx-phone { right: 1.5%; bottom: 1%; width: 16%; } }

/* =====================================================================
   Desktop-Tönung je Mitarbeiter (Owner 26.09.): Farbe aus dem Lichtband des Porträts
   Klara #C3CFE4 · Sebastian #CDD6BC · Frida #F3C9B2 – Verlauf bleibt, nur die Farbe wechselt weich.
   ===================================================================== */
@property --wall-1 { syntax: "<color>"; inherits: true; initial-value: #F2F4F8; }
@property --wall-2 { syntax: "<color>"; inherits: true; initial-value: #E4EAF4; }
@property --wall-hi { syntax: "<color>"; inherits: true; initial-value: rgba(221,230,245,.7); }
@property --wall-glow { syntax: "<color>"; inherits: true; initial-value: rgba(142,166,214,.45); }
.mx-imac { transition: --wall-1 1.2s ease, --wall-2 1.2s ease, --wall-hi 1.2s ease, --wall-glow 1.2s ease; }
.mx-imac[data-who="klara"] { --wall-1: #F2F4F8; --wall-2: #E1E8F4; --wall-hi: rgba(221,230,245,.75); --wall-glow: rgba(142,166,214,.50); }
.mx-imac[data-who="sebastian"] { --wall-1: #F4F5F0; --wall-2: #E4E9DA; --wall-hi: rgba(230,236,220,.75); --wall-glow: rgba(164,184,132,.50); }
.mx-imac[data-who="frida"] { --wall-1: #F8F2EE; --wall-2: #F0E0D6; --wall-hi: rgba(248,225,212,.8); --wall-glow: rgba(240,165,126,.50); }
.mx-wall { background:
  radial-gradient(60% 70% at 72% 78%, var(--wall-glow), transparent 70%),
  radial-gradient(55% 60% at 18% 20%, var(--wall-hi), transparent 70%),
  linear-gradient(160deg, var(--wall-1) 0%, var(--wall-2) 100%); }

/* =====================================================================
   macOS 27 „Golden Gate“ / iOS 27 (Review 26.09., Quellen im Sub-Agent-Bericht)
   ===================================================================== */
/* Glas: Standardstufe „mittel“ – etwas dichter, dunklere Kanten, hellere Glanzlichter */
.mx-desk {
  --lg-bg: rgba(246,246,247,.80);
  --lg-edge: 0 0 0 .5px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.95), inset 0 0 0 .5px rgba(255,255,255,.6), inset 0 -1px 1.5px rgba(0,0,0,.06);
}
.mx-dock { background: rgba(246,246,247,.55); }
.mx-di { border-radius: 23%; }   /* Squircle-Annäherung (Apple-Vorlage ≈ 22,4 %) */
.mx-mbi { width: 15px; height: 13px; fill: currentColor; }
.mx-mb-right { gap: 16px; }

/* Einheitlicher, kleinerer Fensterradius; Werkzeug-Kapsel konzentrisch */
.mx-win { border-radius: 16px; }
.mx-tb::after { height: 28px; top: 9px; border-radius: 14px; }
/* Ampelknöpfe mit Glas-Glanz; Hintergrundfenster grau */
.mx-tb::before { background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.55), transparent 55%), #FF5F57;
  box-shadow: 20px 0 0 #FEBC2E, 40px 0 0 #28C840, inset 0 0 0 .5px rgba(0,0,0,.18); }
.mx-win:not(.is-front) .mx-tb::before { background: #DCDCDE; box-shadow: 20px 0 0 #DCDCDE, 40px 0 0 #DCDCDE; }
.mx-win:not(.is-front) .mx-tb { color: #9A9AA0; }
.mx-win:not(.is-front) .mx-row.is-sel { background: #E4E4E8; box-shadow: none; }

/* Office für Mac: neutrale Titelleiste („Aluminum“), Menüband darunter */
.mx-tb--xls, .mx-tb--doc { background: #fff; color: #1D1D1F; border: 0; }
.mx-tb--xls::after, .mx-tb--doc::after { background-color: var(--lg-bg); box-shadow: var(--lg-edge);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A3C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A3C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A3A3C'%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3C/svg%3E"); }
.mx-rib { flex: none; background: #fff; border-bottom: 1px solid #E3E3E5; }
.mx-rib-tabs { display: flex; gap: 20px; height: 32px; align-items: flex-end; padding: 0 16px; font-size: 12.5px; color: #3A3A3C; }
.mx-rib-tabs span { padding-bottom: 7px; border-bottom: 3px solid transparent; }
.mx-rib--xls .mx-rib-tabs span.is-on { border-color: #107C41; font-weight: 600; }
.mx-rib--doc .mx-rib-tabs span.is-on { border-color: #185ABD; font-weight: 600; }
.mx-rib-tools { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; }
.mx-rib-tools i { width: 22px; height: 22px; border-radius: 6px; background: #E9E9EB; }
.mx-rib-tools i.w { width: 58px; }
.mx-rib-tools em { width: 1px; height: 22px; background: #E3E3E5; margin: 0 4px; }
.mx-sheets { flex: none; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-top: 1px solid #E3E3E5; background: #F7F7F8; font-size: 11.5px; color: #6E6E73; }
.mx-sheets span { padding: 2px 12px; border-radius: 5px; }
.mx-sheets span.is-on { background: #fff; color: #107C41; font-weight: 600; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.mx-page { font-family: "Aptos", var(--font-text); }

/* Seitenleiste reicht wieder bis an den Fensterrand (auch in die Titelzeile), mit blauen Symbolen */
.mx-side { margin: 0; border-radius: 0; background: rgba(0,0,0,.04); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-right: 1px solid rgba(0,0,0,.08); }
.mx-side p > span { display: inline-flex; align-items: center; gap: 7px; }
.mx-fi { width: 14px; height: 14px; fill: none; stroke: #0A84FF; stroke-width: 1.4; stroke-linejoin: round; flex: none; }
.mx-side p.is-drop .mx-fi { stroke: #fff; }
.mx-win[data-app="mail"]:not(.mx-compose) .mx-tb { background: linear-gradient(90deg, #F4F4F5 0 170px, #fff 170px); box-shadow: inset 170px 0 0 -169px rgba(0,0,0,.08); }
.mx-win[data-app="finder"] .mx-tb { background: linear-gradient(90deg, #F4F4F5 0 150px, #fff 150px); }
.mx-finder { flex: 1; display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.mx-fmain { display: flex; flex-direction: column; min-height: 0; }
.mx-fmain .mx-flist { flex: 1; }
.mx-fmain .mx-fpath { border-bottom: 0; border-top: 1px solid #EFEFF1; }

/* Outlook: Suchfeld mittig, „Neue E-Mail“, hellblaue Auswahl mit Balken */
.mx-tb--ol { justify-content: center; padding-left: 0; }
.mx-search { width: 280px; height: 28px; border-radius: 14px; display: flex; align-items: center; padding-left: 30px; font-size: 12.5px; font-weight: 400; color: #8A8A8E; position: relative;
  background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.mx-search::before { content: ""; position: absolute; left: 10px; top: 7px; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mx-newmail { display: flex; align-items: center; justify-content: center; height: 32px; margin: 0 6px 6px; border-radius: 16px; background: #0F6CBD; color: #fff; font-size: 12.5px; font-weight: 600; }
.mx-row.is-sel { background: #DCEBFA; color: #1D1D1F; box-shadow: inset 3px 0 0 #0F6CBD; }
.mx-row.is-sel .mx-r1 span, .mx-row.is-sel .mx-r3 { color: #6E6E73; }

/* Dock: Papierkorb, minimierte Fenster rechts vom Trenner */
.mx-di--trash { background: rgba(255,255,255,.5); }
.mx-di--trash svg { width: 30px; height: 34px; }
.mx-dock-min { display: flex; gap: 8px; align-items: flex-end; }
.mx-dock-min:empty { display: none; }
.mx-thumb { width: 52px; height: 40px; border-radius: 6px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18), inset 0 7px 0 #F4F4F5; margin-bottom: 6px; }
.mx-thumb--xls { box-shadow: 0 2px 5px rgba(0,0,0,.18), inset 0 7px 0 #F4F4F5, inset 0 -26px 0 -18px #E7F3EC; }
.mx-thumb--doc { box-shadow: 0 2px 5px rgba(0,0,0,.18), inset 0 7px 0 #F4F4F5, inset 0 -26px 0 -18px #E6EEFA; }

/* macOS-Mitteilung: App-Symbol, Titel + „jetzt“, Text */
.mx-toast { grid-template-columns: 36px 1fr; }
.mx-tapp { width: 36px; height: 36px; border-radius: 8.3px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
.mx-tapp img { width: 26px; height: 26px; object-fit: contain; }
.mx-tbody { min-width: 0; }
.mx-t1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mx-t1 small { font-size: 11px; color: #8A8A8E; }
.mx-tbody > span:last-child { display: block; color: #6E6E73; }

/* iOS 27 Sperrbildschirm: Mitteilung unten, Taschenlampe/Kamera, langes Drücken = Unschärfe + Aktionsliste */
.mx-ph-note { top: auto; bottom: 112px; }
.mx-ph-note.is-up { transform: translateY(-124px); transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1); }
.mx-ph-av { position: relative; width: 38px; height: 38px; }
.mx-ph-av img:first-child { width: 38px; height: 38px; border-radius: 50%; }
.mx-ph-badge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px rgba(28,28,30,1); }
.mx-ph-text { font-size: 15px; line-height: 20px; letter-spacing: -.02em; display: block; }
.mx-ph-note.is-ok .mx-ph-text { color: #7EE2A0; }
.mx-ph-acts { top: auto; bottom: 112px; display: block; border-radius: 22px; overflow: hidden;
  background: rgba(28,28,30,.86); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 0 0 .6px rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10); }
.mx-ph-acts span, .mx-ph-acts span.is-main { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 18px; border-radius: 0;
  font-size: 17px; line-height: 22px; font-weight: 400; color: #fff; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mx-ph-acts span + span { border-top: .5px solid rgba(255,255,255,.12); }
.mx-ph-acts span.is-no { color: #FF453A; }
.mx-ph-acts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-ph-acts span.is-press { background: rgba(255,255,255,.12); transform: none; }
.mx-ph-focus { position: absolute; inset: 0; z-index: 7; background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.mx-ph-screen.is-focus .mx-ph-focus { opacity: 1; }
.mx-ph-qb { position: absolute; bottom: 40px; z-index: 6; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 .5px rgba(0,0,0,.06); }
.mx-ph-qb svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; }
.mx-ph-qb--l { left: 44px; } .mx-ph-qb--r { right: 44px; }

/* Seitenleiste: Ordnernamen einzeilig */
.mx-side p { white-space: nowrap; }
.mx-side p > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-side { padding: 10px 4px; }
.mx-mail { grid-template-columns: 182px 280px 1fr; }
.mx-win[data-app="mail"]:not(.mx-compose) .mx-tb { background: linear-gradient(90deg, #F4F4F5 0 182px, #fff 182px); }

/* =====================================================================
   Owner 26.09. (spät): Einfrieren beim Warten, „Aufgabe erledigt“, Space-Wechsel
   ===================================================================== */
.mx-space { position: absolute; inset: 0; background: #1A1A1C; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.mx-space--shot { z-index: 1; pointer-events: none; }
.mx-imac.is-swiping { transition: none; }
.mx-dock { z-index: 50; }
/* Einfrieren: grau, entsättigt, leicht abgedunkelt; Zeiger (z 70/71) und Kapsel bleiben klar */
.mx-freeze { position: absolute; inset: 0; z-index: 65; pointer-events: none; opacity: 0; transition: opacity 420ms ease;
  background: rgba(58,58,62,.26); -webkit-backdrop-filter: grayscale(.9) brightness(.94); backdrop-filter: grayscale(.9) brightness(.94); }
.mx-freeze.is-on { opacity: 1; transition: opacity 320ms ease; }
.mx-freeze-pill { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #1D1D1F; white-space: nowrap;
  background: rgba(246,246,247,.80); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.10), 0 10px 26px -10px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.95); }
.mx-freeze-pill i { width: 8px; height: 8px; border-radius: 50%; background: #FF9F0A; box-shadow: 0 0 0 0 rgba(255,159,10,.5); animation: mx-ping 1.4s ease-out infinite; }
@keyframes mx-ping { 0% { box-shadow: 0 0 0 0 rgba(255,159,10,.55); } 100% { box-shadow: 0 0 0 9px rgba(255,159,10,0); } }
/* „Aufgabe erledigt“: Glas-Karte mittig, Haken zeichnet sich */
.mx-done { position: absolute; left: 50%; top: 50%; z-index: 45; width: 300px; padding: 28px 24px 24px; margin: -110px 0 0 -150px; border-radius: 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: #6E6E73;
  background: rgba(246,246,247,.80); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.10), 0 30px 60px -20px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.95);
  opacity: 0; transform: scale(.9); pointer-events: none; }
.mx-done.is-in { opacity: 1; transform: none; transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 200ms ease; }
.mx-done b { margin-top: 10px; font-size: 18px; font-weight: 700; color: #1D1D1F; }
.mx-done-ck { width: 64px; height: 64px; }
.mx-done-ck svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mx-done-ck circle { fill: #34C759; stroke: none; transform-origin: center; }
.mx-done-ck path { stroke: #fff; stroke-width: 4.5; stroke-dasharray: 36; stroke-dashoffset: 36; }
.mx-done.is-in .mx-done-ck circle { animation: mx-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.mx-done.is-in .mx-done-ck path { animation: mx-draw 380ms ease-out 200ms forwards; }
@keyframes mx-pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-done-ck path { stroke-dashoffset: 0; } .mx-freeze-pill i { animation: none; } }

/* Owner 26.09. (spät): Namensschild fließt ins Porträt – eine Form, links keine eigene Rundung */
.mx-tag { left: 13px; top: 17px; height: 26px; padding: 0 11px 0 0; border-radius: 13px; background: var(--who, var(--klara)); gap: 6px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.mx-tag img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--who, var(--klara)); box-shadow: none; box-sizing: border-box; }
.mx-tag b { margin: 0; padding: 0; background: none; font-size: 12.5px; line-height: 26px; border-radius: 0; }
.mx-cur--you .mx-tag { padding-left: 11px; background: #636366; }
.mx-cur--you .mx-tag b { background: none; padding: 0; }

/* iPhone-Auftritt: von unten, Deckkraft 0 → 1 im selben Atemzug (ease-out); Abgang exakt umgekehrt */
.mx-phone { opacity: 0; transform: translateY(16%); transition: transform 440ms cubic-bezier(0.55, 0, 1, 0.45), opacity 440ms cubic-bezier(0.55, 0, 1, 0.45); }
.mx-phone.is-in { opacity: 1; transform: none; transition: transform 620ms cubic-bezier(0.23, 1, 0.32, 1), opacity 620ms cubic-bezier(0.23, 1, 0.32, 1); }
.mx-ph-screen, .mx-phone.is-awake .mx-ph-screen { filter: none; transition: none; }

/* Finder schmaler: Spalten angepasst */
.mx-flist p { grid-template-columns: 20px 1fr 96px 58px; }

/* =====================================================================
   Studio Display ganz heruntergefahren (Owner 26.09., Abgleich mit Referenz):
   Display sitzt fast auf dem Fuß – sichtbar nur ein kurzes Stück des dunklen Arms,
   die Gelenkscheibe direkt unter der Kante und die flache, helle Fußplatte. Kein Schattenschleier hinter dem Fuß.
   ===================================================================== */
.mx-sd .mx-body { box-shadow: inset 0 0 0 1px #2A2A2C, 0 0 0 1px rgba(0,0,0,.35); }
.mx-sd .mx-stand { height: clamp(40px, 6vw, 66px); margin-top: 0; }
.mx-sd .mx-neck {
  top: 0; width: 24%; height: calc(100% - 9px); border-radius: 0;
  background: linear-gradient(180deg, #1C1C1E 0%, #2E2E31 22%, #505054 70%, #66666A 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(0,0,0,.35);
}
.mx-sd .mx-neck::after { background: linear-gradient(90deg, rgba(0,0,0,.30), transparent 16%, transparent 84%, rgba(0,0,0,.30)); }
.mx-sd .mx-hinge { width: 5.2%; top: -50%; transform: translateX(-50%) translateY(0); top: auto; margin-top: -2.6%; }
.mx-sd .mx-foot {
  width: 26%; height: 9px; border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #F4F4F6 0%, #DCDCDF 35%, #B7B7BB 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(0,0,0,.18), 0 14px 22px -10px rgba(0,0,0,.35);
}
@media (max-width: 699px) { .mx-sd .mx-stand { height: 30px; } .mx-sd .mx-foot { height: 6px; } .mx-sd .mx-neck { height: calc(100% - 6px); } }

/* iPhone größer (Owner 26.09.: besser erkennbar) */
.mx-phone { width: 20%; right: -7%; }
@media (max-width: 1240px) { .mx-phone { width: 21%; right: 1%; bottom: 1%; } }
@media (max-width: 699px) { .mx-phone { width: 26%; right: 0; } }

/* =====================================================================
   Studio-Display-Ständer 1:1 nach dem offiziellen Apple-Produktfoto (apple.com/de/studio-display, 26.09.):
   Hals und Fuß sind EIN gebogenes, silbernes Aluminiumblech (gleich breit, ≈ 24 % der Displaybreite),
   oben eine halbrunde Kabel-Aussparung (Loch, kein Gelenk), unten helle Biegekante + zwei kleine Füße.
   Höhe wieder wie zuvor (Owner: „so war es gut“).
   ===================================================================== */
.mx-sd .mx-hinge { display: none; }
.mx-sd .mx-stand { height: clamp(64px, 11vw, 124px); }
.mx-sd .mx-neck {
  top: 0; width: 24%; height: calc(100% - 10px); border-radius: 0; overflow: hidden;
  background: linear-gradient(180deg, #A7A8AC 0%, #C4C5C8 7%, #D1D2D5 45%, #DCDDDF 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(0,0,0,.10);
}
.mx-sd .mx-neck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 14%, transparent 86%, rgba(0,0,0,.06)); }
.mx-sd .mx-neck::before {   /* halbrunde Kabel-Aussparung direkt unter dem Display */
  content: ""; position: absolute; left: 50%; top: 0; width: 27%; aspect-ratio: 1; transform: translate(-50%, -58%); border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 -2px 3px rgba(0,0,0,.14), 0 1.5px 0 rgba(255,255,255,.85); z-index: 1;
}
.mx-sd .mx-foot {
  bottom: 0; width: 24%; height: 10px; border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #F3F4F6 0, #F3F4F6 3px, #D0D1D4 3px, #BFC0C3 100%);
  box-shadow: 0 16px 22px -12px rgba(0,0,0,.30);
}
.mx-sd .mx-foot::before, .mx-sd .mx-foot::after { content: ""; position: absolute; bottom: -2px; width: 6%; height: 2px; border-radius: 0 0 1px 1px; background: #2C2C2E; }
.mx-sd .mx-foot::before { left: 1.5%; } .mx-sd .mx-foot::after { right: 1.5%; }
@media (max-width: 699px) { .mx-sd .mx-stand { height: 44px; } .mx-sd .mx-foot { height: 6px; background: linear-gradient(180deg, #F3F4F6 0, #F3F4F6 2px, #C8C9CC 2px); } .mx-sd .mx-neck { height: calc(100% - 6px); } }

/* Sebastian sortiert: Kopfzeile mit Sortierpfeil, Umbenennen-Feld wie im Finder */
.mx-fhead { display: grid; grid-template-columns: 20px 1fr 96px 58px; gap: 8px; padding: 6px 16px 4px; font-size: 11px; color: #8A8A8E; border-bottom: 1px solid #EFEFF1; }
.mx-fhead b { font-weight: 600; color: #3A3A3C; }
.mx-fhead b::after { content: " ▲"; font-size: 8px; vertical-align: 1px; }
.mx-flist p { transition: background-color 300ms ease; }
.mx-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-fname.is-edit { padding: 1px 4px; margin: -2px -4px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px #0A84FF; overflow: visible; }
.mx-fname.is-sel { background: #BBD6FB; border-radius: 3px; }

/* „Aufgabe erledigt“ im Fokus: Rest abdunkeln + einmaliger Erfolgs-Ring am Haken (Owner 26.09.) */
.mx-dim { position: absolute; inset: 0; z-index: 44; pointer-events: none; opacity: 0; transition: opacity 280ms ease;
  background: rgba(18,18,20,.34); -webkit-backdrop-filter: blur(3px) saturate(.9); backdrop-filter: blur(3px) saturate(.9); }
.mx-dim.is-on { opacity: 1; transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.mx-done-ck { position: relative; }
.mx-done-ck::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(52,199,89,.55); opacity: 0; }
.mx-done.is-in .mx-done-ck::after { animation: mx-ring 900ms cubic-bezier(0.23, 1, 0.32, 1) 260ms 1 both; }
@keyframes mx-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 100% { opacity: 0; box-shadow: 0 0 0 22px rgba(52,199,89,0); } }
@media (prefers-reduced-motion: reduce) { .mx-done.is-in .mx-done-ck::after { animation: none; } }

.mx-flist p .mx-fname { color: #1D1D1F; font-size: 12.5px; }

/* Menüleisten-Symbole wie im Original: WLAN gefüllt, Kontrollzentrum und Spotlight als feine Linien, leicht zurückgenommen */
.mx-mb-right { color: rgba(0,0,0,.82); }
.mx-mbi--line { fill: none; stroke: currentColor; }
.mx-mbi--line circle[fill] { fill: currentColor; stroke: none; }

/* Zeiger des Mitarbeiters größer und in seiner Farbe (Owner 26.09.) */
.mx-cur svg { width: 24px; height: 30px; fill: var(--who, var(--klara)); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 1.5px 3px rgba(0,0,0,.35)); }
.mx-cur .mx-tag { left: 17px; top: 23px; height: 30px; border-radius: 15px; padding-right: 13px; gap: 7px; }
.mx-cur .mx-tag img { width: 30px; height: 30px; }
.mx-cur .mx-tag b { font-size: 14px; line-height: 30px; }
/* Ihr Zeiger „Sie“ bleibt neutral */
.mx-cur--you svg { width: 24px; height: 30px; fill: #fff; stroke: #1D1D1F; }
.mx-cur--you .mx-tag { padding-left: 13px; }

/* Dock: echtes Finder-Icon (macOS Tahoe, Wikimedia Commons, gemeinfrei), Kalender im macOS-27-Stil,
   Papierkorb frei stehend; minimierte Fenster schieben sich weich ins Dock */
.mx-di--img { background: none; box-shadow: none; }
.mx-di--img img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.mx-di--cal { background: linear-gradient(180deg, #FFFFFF, #F1F1F2); justify-content: center; gap: 0; }
.mx-di--cal b { margin-top: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0; color: #FF3B30; font-family: var(--font-ui); }
.mx-di--cal em { font-size: 27px; font-weight: 400; margin-top: -1px; letter-spacing: -.02em; color: #1D1D1F; font-family: var(--font-ui); }
.mx-di--trash { background: none; box-shadow: none; }
.mx-di--trash svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.mx-dock-min, .mx-dock-min:empty { display: flex; gap: 0; margin-left: -10px; }
.mx-thumb { flex: none; margin-left: 10px; overflow: hidden; }

/* iPhone: Taschenlampe/Kamera mit iOS-Kontrast – dunkles Glas, weiße gefüllte Symbole */
.mx-ph-qb { background: rgba(28,28,30,.46); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 0 0 .5px rgba(0,0,0,.12); }
.mx-ph-qb svg { fill: #fff; stroke: none; width: 22px; height: 22px; }


/* =====================================================================
   v5 · Zusammenarbeit (Owner 26.09.): delegiert.-App auf dem iPhone
   Maße im iPhone-Raster 432 × 904 (skaliert mit --ps). Bewegungen: iOS-Kurve (0.32, 0.72, 0, 1).
   ===================================================================== */
.mx-imac .mx-body { position: relative; z-index: 1; transition: filter 600ms ease, transform 700ms cubic-bezier(0.32, 0.72, 0, 1); }
.mx-imac .mx-phone { z-index: 3; }
/* V1 Staffel: Handy groß vorn, Desktop tritt zurück → dann umgekehrt */
.mx-imac.is-chat .mx-body { filter: blur(5px) brightness(.97) saturate(.85); transform: scale(.975); }
.mx-imac.is-chat .mx-phone.is-in { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, 1)); z-index: 6;
  transition: transform 720ms cubic-bezier(0.32, 0.72, 0, 1), opacity 300ms ease; }
.mx-imac.is-back .mx-phone.is-in { transform: translate(2%, 3%) scale(.9); opacity: .92; filter: saturate(.75) brightness(.98);
  transition: transform 720ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms ease, filter 500ms ease; }
.mx-imac .mx-phone.is-in { transition: transform 720ms cubic-bezier(0.32, 0.72, 0, 1), opacity 400ms ease, filter 400ms ease; }
/* Abgang (Owner 26.09.): identisch zur Freigabe im Sperrbildschirm – 16 % nach unten + ausblenden, 440 ms ease-in */
.mx-imac.is-chat.is-out .mx-phone.is-in { transform: translate(var(--fx, 0), var(--fy, 0)) translateY(calc(16% * var(--fs, 1))) scale(var(--fs, 1)); opacity: 0;
  transition: transform 440ms cubic-bezier(0.55, 0, 1, 0.45), opacity 440ms cubic-bezier(0.55, 0, 1, 0.45); }
.mx-imac.is-chat.is-out .mx-body { filter: none; transform: none; }

/* App-Oberfläche */
.mx-app { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #F2F2F7; color: #000; font-family: var(--font-ui);
  opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; }
.mx-phone.is-app .mx-app { opacity: 1; visibility: visible; transition: opacity 280ms ease; }
.mx-phone.is-app .mx-ph-home { z-index: 9; }
.mx-phone.is-app .mx-ph-sbi { color: #000; }
.mx-ap-list, .mx-ap-chat { position: absolute; inset: 0; transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1); }
.mx-ap-list { padding-top: 70px; }
.mx-ap-chat { display: flex; flex-direction: column; background: #fff; transform: translateX(100%); box-shadow: -10px 0 30px rgba(0,0,0,.08); }
.mx-app.is-chat .mx-ap-list { transform: translateX(-28%); }
.mx-app.is-chat .mx-ap-chat { transform: none; }
.mx-ap-brand { display: flex; align-items: center; gap: 9px; padding: 0 24px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #1D1D1F; }
.mx-ap-brand img { width: 26px; height: 26px; border-radius: 7px; }
.mx-ap-h { margin: 20px 24px 14px; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.mx-ap-rows { margin: 0 16px; border-radius: 16px; overflow: hidden; background: #fff; }
.mx-ap-row { position: relative; display: grid; grid-template-columns: 52px 1fr 16px; gap: 14px; align-items: center; padding: 12px 16px; transition: background-color 140ms ease; }
.mx-ap-row + .mx-ap-row::before { content: ""; position: absolute; top: 0; left: 82px; right: 0; border-top: .5px solid rgba(60,60,67,.2); }
.mx-ap-row img { width: 52px; height: 52px; border-radius: 50%; }
.mx-ap-row b { display: block; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.02em; }
.mx-ap-row > span > span { display: block; font-size: 16px; line-height: 21px; color: #8A8A8E; }
.mx-ap-row svg { width: 16px; height: 16px; fill: none; stroke: #C4C4C7; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-ap-row.is-press { background: #E5E5EA; }
.mx-ap-nav { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 60px 0 12px;
  background: rgba(249,249,250,.96); border-bottom: .5px solid rgba(60,60,67,.16); }
.mx-ap-nav img { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 2px; }
.mx-ap-nav b { font-size: 15px; line-height: 19px; font-weight: 600; }
.mx-ap-nav small { font-size: 12.5px; line-height: 16px; color: #8A8A8E; }
.mx-ap-back { position: absolute; left: 14px; top: 76px; width: 34px; height: 34px; }
.mx-ap-back svg { width: 100%; height: 100%; fill: none; stroke: #1D1D1F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-ap-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 14px 10px; overflow: hidden; }
.mx-b { max-width: 82%; padding: 11px 16px 12px; border-radius: 22px; font-size: 18px; line-height: 23px; letter-spacing: -.015em; }
.mx-b.is-me { align-self: flex-end; background: #1D1D1F; color: #fff; border-bottom-right-radius: 7px; transform-origin: 100% 100%; }
.mx-b.is-them { align-self: flex-start; background: #E9E9EB; color: #000; border-bottom-left-radius: 7px; transform-origin: 0 100%; }
.mx-b.is-dots { display: flex; gap: 5px; padding: 16px 18px; }
.mx-b.is-dots i { width: 9px; height: 9px; border-radius: 50%; background: #8E8E93; animation: mx-dot 1.1s ease-in-out infinite; }
.mx-b.is-dots i:nth-child(2) { animation-delay: .16s; } .mx-b.is-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes mx-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.mx-ap-comp { flex: none; display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: end; padding: 8px 12px 44px; }
.mx-ap-field { min-height: 48px; padding: 12px 18px; border-radius: 24px; border: 1px solid rgba(60,60,67,.24); font-size: 18px; line-height: 23px; letter-spacing: -.015em; background: #fff; }
.mx-ap-ph { color: #A1A1A6; }
.mx-ap-send { width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; display: grid; place-items: center; background: #1D1D1F; opacity: .22; transition: opacity 160ms ease, transform 120ms ease; }
.mx-ap-send svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mx-ap-send.is-ready { opacity: 1; }
.mx-ap-send.is-press, .mx-ap-acts .is-press { transform: scale(.9); }
/* Freigabe-Karte im Chat */
.mx-ap-card { display: grid; gap: 10px; max-width: 88%; }
.mx-ap-file { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; }
.mx-ap-file i { width: 34px; height: 42px; border-radius: 5px; background: linear-gradient(#FF3B30 0 34%, #F2F2F7 34%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.mx-ap-file b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.mx-ap-file small { display: block; font-size: 14px; line-height: 18px; color: #6E6E73; font-variant-numeric: tabular-nums; }
.mx-ap-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-ap-acts > span { display: grid; place-items: center; height: 44px; border-radius: 22px; font-size: 17px; font-weight: 600; background: #fff; color: #1D1D1F; transition: transform 120ms ease; }
.mx-ap-acts > span.is-ok { background: #1D1D1F; color: #fff; }
.mx-ap-done { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 22px; font-size: 17px; font-weight: 600; color: #fff; background: #34C759; }
.mx-ap-done svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .mx-b.is-dots i { animation: none; } }

/* App liegt über dem Sperrbildschirm: dessen Knöpfe und Uhr ausblenden */
.mx-phone.is-app .mx-ph-qb, .mx-phone.is-app .mx-ph-date, .mx-phone.is-app .mx-ph-time, .mx-phone.is-app .mx-ph-focus { visibility: hidden; }

/* Finder (Owner 26.09.): Fenstertitel sitzt rechts neben der Seitenleiste, nicht über ihr */
.mx-win[data-app="finder"] .mx-tb { padding-left: 168px; }

/* =====================================================================
   Owner 26.09. (3): Handy unten rechts voll deckend und größer; Klaras Wissen deutlicher
   ===================================================================== */
.mx-imac .mx-phone { width: 23%; right: -8%; }
@media (max-width: 1240px) { .mx-imac .mx-phone { width: 24%; right: .5%; bottom: 1%; } }
@media (max-width: 699px) { .mx-imac .mx-phone { width: 30%; right: 0; } }
.mx-imac.is-back .mx-phone.is-in { transform: none; opacity: 1; filter: none; }

/* Wissen am Zeiger: bündig unter dem Namensschild (links 13 px, 6 px Abstand), dunkel und klar lesbar */
.mx-src { position: absolute; left: 13px; top: 49px; display: grid; justify-items: start; gap: 6px; pointer-events: none; }
.mx-src > span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 9px; border-radius: 14px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; background: rgba(29,29,31,.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 .5px rgba(255,255,255,.08), 0 8px 20px -8px rgba(0,0,0,.45); transform-origin: 0 50%; }
.mx-src em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); }
.mx-src svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mx-src .is-own svg { color: #64D2FF; } .mx-src .is-ext svg { color: #DA8FFF; } .mx-src .is-learn svg { color: #30D158; fill: currentColor; stroke: none; }
.mx-src .is-load { background: var(--who, var(--klara)); }
.mx-src .is-load b { font-weight: 600; }
.mx-src .is-done .mx-src-ck { stroke-width: 2.2; color: #fff; }
.mx-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: mx-spin .7s linear infinite; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mx-spin { animation: none; } }
/* Wissen am Zeiger – vermessen (Owner 26.09.): Namensschild sitzt bei links 17 / oben 23, 30 hoch →
   Hinweise bündig links (17), 6 px Abstand darunter (59), gleiche Höhe wie das Schild; alles dunkel, Haken grün */
.mx-src { left: 17px; top: 59px; }
.mx-src > span { height: 30px; border-radius: 15px; }
.mx-src .is-load { background: rgba(29,29,31,.92); }
.mx-src .is-done .mx-src-ck { color: #30D158; }