/* MARKY_Design – Aussehen wie die Produktvorschau auf lpi (LPI3_marky_*): helle Seitenleiste, Akzent Himbeere mit Orange,
   kompakte Steuerelemente (Radius 7px), feine Linien, Reiter mit Unterstrich. Nur Variablen und Formen; Inhalte unverändert.
   Hell: hier. Dunkel: MARKY_Tokens_Dark (gleiche Namen). Abschalten = diese Style vom Site lösen. */
html, html .landingpage {
  --mk-bg: #f3f5f8 !important;
  --mk-surface: #ffffff !important;
  --mk-surface-2: #f8f9fb !important;
  --mk-surface-3: #f1f3f7 !important;
  --mk-ink: #0d1420 !important;
  --mk-ink-soft: #465064 !important;
  --mk-ink-mute: #687286 !important;
  --mk-line: #e8ebf1 !important;
  --mk-line-strong: #dce0e8 !important;
  --mk-brand: #d6336c !important;
  --mk-brand-ink: #ffffff !important;
  --mk-accent: #d6336c !important;
  --mk-accent-hover: #bf2a5e !important;
  --mk-accent-ink: #ffffff !important;
  --mk-accent-soft: #fbeaf0 !important;
  --mk-accent-2: #ff8a3d !important;
  --mk-accent-2-soft: #fff1e7 !important;
  --mk-sidebar: #f8f9fb !important;
  --mk-sidebar-ink: #465064 !important;
  --mk-sidebar-ink-strong: #0d1420 !important;
  --mk-sidebar-mute: #687286 !important;
  --mk-sidebar-hover: rgba(13, 20, 32, .045) !important;
  --mk-sidebar-active: rgba(214, 51, 108, .12) !important;
  --mk-sidebar-accent: #d6336c !important;
  --mk-sidebar-line: #e8ebf1 !important;
  --mk-ops-sidebar: #f1f3f7 !important;
  --mk-overlay: rgba(13, 20, 32, .4) !important;
  --mk-ok: #15803d !important;
  --mk-ok-soft: #e8f6ed !important;
  --mk-warn: #b45309 !important;
  --mk-warn-soft: #fdf3e2 !important;
  --mk-danger: #dc2626 !important;
  --mk-danger-soft: #fdecec !important;
  --mk-info: #2563eb !important;
  --mk-info-soft: #e9f0fe !important;
  --mk-radius-sm: 7px !important;
  --mk-radius: 10px !important;
  --mk-radius-lg: 14px !important;
  --mk-shadow-sm: 0 1px 2px rgba(13, 20, 32, .05) !important;
  --mk-shadow: 0 1px 2px rgba(13, 20, 32, .04), 0 6px 16px -8px rgba(13, 20, 32, .1) !important;
  --mk-shadow-lg: 0 0 0 1px rgba(13, 20, 32, .07), 0 24px 50px -14px rgba(13, 20, 32, .28), 0 6px 14px -6px rgba(13, 20, 32, .14) !important;
  --mk-focus: 0 0 0 3px rgba(214, 51, 108, .25) !important;
  --mk-btn-glow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 10px -4px rgba(214, 51, 108, .7);
  --mk-chart-1: #d6336c !important;
  --mk-chart-2: #ff8a3d !important;
  --mk-ch-landing: #d6336c !important;
  --mk-text-sm: 13.5px !important;
  --mk-text-md: 14px !important;
  --mk-text-2xl: 24px !important;
  --mk-control-h: 34px !important;
  --mk-control-h-lg: 42px !important;
  --mk-gap: 14px !important;
  --mk-card-pad: 18px !important;
  --mk-content-pad: 24px !important;
  --mk-sidebar-w: 236px !important;
  --mk-topbar-h: 54px !important;
  /* Handy-Leisten der Plattform (regeln/oberflaeche.md 1) */
  --ao-phone-surface: #ffffff !important;
  --ao-phone-ink: #0d1420 !important;
  --ao-phone-accent: #d6336c !important;
  --ao-phone-line: #e8ebf1 !important;
}
html[data-aorta-theme="dark"], html[data-aorta-theme="dark"] .landingpage {
  --ao-phone-surface: #12171f !important;
  --ao-phone-ink: #eef2f8 !important;
  --ao-phone-accent: #ff7fa8 !important;
  --ao-phone-line: #212836 !important;
  --mk-btn-glow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 4px 12px -4px rgba(255, 127, 168, .55);
}

.landingpage { font-family: var(--mk-font) !important; font-feature-settings: "cv11", "ss01"; }

/* ---------- Seitenleiste: hell, wie das Hauptfenster der Vorschau ---------- */
.landingpage .mk-sidebar { border-right: 1px solid var(--mk-line); padding: 14px 10px; gap: 4px; }
.landingpage .mk-sidebar .mk-brand { font-size: 15px; font-weight: 700; padding: 4px 8px 12px; }
.landingpage .mk-sidebar .mk-brand img:not(.mk-wordmark) { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 10px -3px var(--mk-accent); }
.landingpage .mk-ws-btn { border-radius: 7px; border-color: var(--mk-line-strong); background: var(--mk-surface); padding: 6px 9px; }
.landingpage .mk-nav { gap: 1px; margin-top: 8px; }
.landingpage .mk-nav-group > summary { font-size: 10.5px; color: var(--mk-ink-mute); }
.landingpage .mk-nav a { gap: 10px; padding: 0 10px; min-height: 32px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--mk-sidebar-ink); }
.landingpage .mk-nav a .mk-icon { font-size: 18px; color: var(--mk-ink-mute); }
.landingpage .mk-nav a:hover { background: var(--mk-sidebar-hover); color: var(--mk-ink); }
.landingpage .mk-nav a.is-active { background: var(--mk-sidebar-active); color: var(--mk-accent); font-weight: 650; }
.landingpage .mk-nav a.is-active .mk-icon { color: var(--mk-accent); }
.landingpage .mk-nav a .mk-nav-count { min-width: 18px; height: 18px; font-size: 10.5px; border-radius: 9px; }
.landingpage .mk-sidebar-foot { border-top-color: var(--mk-line); }
.landingpage .mk-sidebar .mk-theme-switch { background: var(--mk-surface-3); border-color: var(--mk-line); border-radius: 8px; }
.landingpage .mk-sidebar .mk-theme-switch button { border-radius: 6px; height: 26px; }
.landingpage .mk-sidebar .mk-theme-switch button.is-active { background: var(--mk-surface); color: var(--mk-accent); box-shadow: var(--mk-shadow-sm); }
.landingpage .mk-sidebar .mk-lang-switch { --aorta-lang-bg: var(--mk-surface-3); --aorta-lang-active-bg: var(--mk-surface); --aorta-lang-active-ink: var(--mk-accent); --aorta-lang-radius: 8px; }
.landingpage .mk-avatar { background: color-mix(in srgb, var(--mk-accent) 14%, var(--mk-surface)); color: var(--mk-accent); }
.landingpage .mk-sidebar .mk-avatar { width: 30px; height: 30px; font-size: 11px; }

/* ---------- Kopfleiste: Brotkrumen, Aktionen ---------- */
.landingpage .mk-topbar { background: color-mix(in srgb, var(--mk-surface) 92%, transparent); padding: 0 20px; }
.landingpage .mk-crumb { font-size: 13.5px; color: var(--mk-ink-mute); }

/* ---------- Seitenkopf ---------- */
.landingpage .mk-page-head h1 { font-size: var(--mk-text-2xl); font-weight: 700; letter-spacing: -.015em; }
.landingpage .mk-page-head-text p { color: var(--mk-ink-mute); font-size: 13.5px; }

/* ---------- Knöpfe: 7px statt Pille, Primär mit Verlauf ---------- */
.landingpage .mk-btn { border-radius: 7px; border-color: var(--mk-line-strong); color: var(--mk-ink-soft); font-size: 13.5px; padding: 0 13px; }
.landingpage .mk-btn:hover { border-color: var(--mk-line-strong); color: var(--mk-ink); background: var(--mk-surface-2); }
.landingpage .mk-btn-primary, .landingpage .mk-btn-primary:hover {
  border-color: transparent; color: var(--mk-accent-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mk-accent) 86%, #fff), var(--mk-accent));
  box-shadow: var(--mk-btn-glow);
}
.landingpage .mk-btn-primary:hover { filter: brightness(1.04); }
.landingpage .mk-btn-ghost, .landingpage .mk-btn-ghost:hover { border-color: transparent; }
.landingpage .mk-btn-danger { border-color: transparent; }
.landingpage .mk-btn-lg { padding: 0 20px; }
.landingpage .mk-btn-sm { height: 28px; border-radius: 6px; padding: 0 10px; }
.landingpage .mk-btn-icon { padding: 0; }
.landingpage .mk-file::file-selector-button { border-radius: 7px; }

/* ---------- Reiter: Unterstrich im Akzent statt Pillen ---------- */
.landingpage .mk-tabs { gap: 2px; padding: 0; border: 0; border-bottom: 1px solid var(--mk-line); border-radius: 0; background: transparent; align-self: stretch; }
.landingpage .mk-tabs a, .landingpage .mk-tabs button { height: 40px; padding: 0 11px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--mk-ink-mute); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.landingpage .mk-tabs a:hover, .landingpage .mk-tabs button:hover { color: var(--mk-ink); text-decoration: none; }
.landingpage .mk-tabs .is-active { background: transparent; box-shadow: none; color: var(--mk-ink); font-weight: 650; border-bottom-color: var(--mk-accent); }

/* ---------- Karten, Kennzahlen ---------- */
.landingpage .mk-card { border-radius: 10px; box-shadow: none; }
.landingpage .mk-card-head { padding: 12px var(--mk-card-pad); }
.landingpage .mk-card-head h2, .landingpage .mk-card-head h3 { font-size: 14px; font-weight: 650; }
.landingpage .mk-kpi { padding: 14px 16px; }
.landingpage .mk-kpi-label { color: var(--mk-ink-mute); font-size: 13px; }
.landingpage .mk-kpi-label .mk-icon { color: var(--mk-ink-mute); font-size: 16px; }
.landingpage .mk-kpi-value { font-weight: 700; margin-top: 2px; }
.landingpage .mk-kpi-sub { font-weight: 600; }

/* ---------- Tabellen und Listen ---------- */
.landingpage .mk-table th { font-size: 11px; font-weight: 650; letter-spacing: .05em; color: var(--mk-ink-mute); padding: 9px 14px; background: var(--mk-surface-2); }
.landingpage .mk-table td { padding: 10px 14px; color: var(--mk-ink-soft); }
.landingpage .mk-table td strong, .landingpage .mk-table td b { color: var(--mk-ink); font-weight: 600; }
.landingpage .mk-table tr.is-link:hover td { background: color-mix(in srgb, var(--mk-accent) 5%, transparent); }
.landingpage .mk-list-row { padding: 12px var(--mk-card-pad); }
.landingpage a.mk-list-row:hover { background: color-mix(in srgb, var(--mk-accent) 4%, transparent); }

/* ---------- Status-Chips und Tags: eckig wie „Aktiv“, „Versendet“ in der Vorschau ---------- */
.landingpage .mk-chip { height: 22px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 650; gap: 5px; }
.landingpage .mk-chip::before { width: 7px; height: 7px; }
.landingpage .mk-tag { border-radius: 5px; }
.landingpage .mk-ch { border-radius: 6px; }
.landingpage .mk-ch .mk-icon { border-radius: 5px; }
.landingpage .mk-score { border-radius: 5px; }
.landingpage .mk-wstep { border-radius: 7px; }
.landingpage .mk-meter { height: 6px; }

/* ---------- Eingaben ---------- */
.landingpage .mk-input, .landingpage .mk-select, .landingpage .mk-textarea { border-radius: 7px; border-color: var(--mk-line-strong); font-size: 14px; }
.landingpage .mk-opt { border-radius: 8px; border-width: 1px; }
.landingpage .mk-details, .landingpage .mk-rule { border-radius: 8px; }
.landingpage .mk-alert:not(:empty) { border-radius: 8px; }

/* ---------- Öffentliche Seiten: Band in Akzentfarben statt dunkler Seitenleiste ---------- */
.landingpage .mk-band { background: linear-gradient(135deg, color-mix(in srgb, var(--mk-accent) 10%, var(--mk-surface)), color-mix(in srgb, var(--mk-accent-2) 14%, var(--mk-surface))); border: 1px solid var(--mk-line); color: var(--mk-ink); }
.landingpage .mk-band p, .landingpage .mk-stat span { color: var(--mk-ink-soft); }

/* ===================== Aufbau wie die Vorschau (11.11., Muster FakturaS/Buchbar) ===================== */
/* Seitenleiste: Kopf (Logo, Marky, Arbeitsbereich) klappt die Arbeitsbereiche an Ort und Stelle auf (MARKY_Shell) */
.landingpage .mk-side-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--mk-ink); font: inherit; text-align: left; cursor: pointer;
}
.landingpage .mk-side-head:hover { background: var(--mk-sidebar-hover); }
.mk-side-head img { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; box-shadow: 0 4px 10px -3px var(--mk-accent); }
.mk-side-head-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mk-side-head-n { font-size: 14px; font-weight: 700; color: var(--mk-ink); }
.mk-side-head-ws { font-size: 11.5px; color: var(--mk-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-side-fold { font-size: 18px !important; color: var(--mk-ink-mute); transition: transform .15s ease; }
.mk-sidebar.mk-ws-open .mk-side-fold { transform: rotate(180deg); }
.mk-side-top { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.mk-side-wss { display: none; flex-direction: column; border: 1px solid var(--mk-line-strong); border-radius: 9px; background: var(--mk-surface); overflow: hidden; }
.mk-sidebar.mk-ws-open .mk-side-wss { display: flex; }
.mk-side-wss:empty { display: none !important; }
.landingpage .mk-side-ws {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-top: 1px solid var(--mk-line);
  background: transparent; color: var(--mk-ink-soft); font: inherit; font-size: 13px; font-weight: 550; text-align: left; cursor: pointer; text-decoration: none;
}
.landingpage .mk-side-ws:first-child { border-top: 0; }
.landingpage .mk-side-ws:hover { background: var(--mk-sidebar-hover); color: var(--mk-ink); text-decoration: none; }
.landingpage .mk-side-ws.is-current { background: color-mix(in srgb, var(--mk-accent) 8%, transparent); color: var(--mk-ink); font-weight: 650; }
.mk-side-ws .mk-icon { font-size: 17px; color: var(--mk-accent); }
.mk-side-ws-new .mk-icon { color: var(--mk-ink-mute); width: 24px; text-align: center; }
.mk-side-ws-av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 750; color: #fff; background: linear-gradient(135deg, var(--mk-accent), var(--mk-accent-2)); }
.mk-side-ws-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mk-side-ws-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-side-ws-r { font-size: 11px; font-weight: 500; color: var(--mk-ink-mute); }
.mk-side-ws-r:empty { display: none; }
.landingpage .mk-side-find {
  width: 100%; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px 0 10px; border: 1px solid var(--mk-line-strong); border-radius: 7px;
  background: var(--mk-surface); color: var(--mk-ink-mute); font-size: 13px; text-decoration: none;
}
.landingpage .mk-side-find:hover { color: var(--mk-ink-soft); border-color: color-mix(in srgb, var(--mk-accent) 35%, var(--mk-line-strong)); }
.mk-side-find .mk-icon { font-size: 17px; }
.mk-side-find-t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kbd { font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 5px; border: 1px solid var(--mk-line-strong); border-radius: 4px; background: var(--mk-surface-2); color: var(--mk-ink-mute); white-space: nowrap; }
html.ao-phone .mk-side-find .mk-kbd { display: none; }
@media (pointer: coarse) { .mk-side-find .mk-kbd { display: none; } }
/* Zähler wie in der Vorschau: grau, beim aktiven Punkt und bei neuen Leads im Akzent */
.landingpage .mk-nav a .mk-nav-count { background: var(--mk-surface-3); color: var(--mk-ink-mute); font-weight: 650; border-radius: 5px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.landingpage .mk-nav a.is-active .mk-nav-count, .landingpage .mk-nav a .mk-nav-count-accent { background: var(--mk-accent); color: var(--mk-accent-ink); border-radius: 9px; }
.landingpage .mk-nav-group > summary { padding: 14px 10px 4px; }
/* Gruppe Anzeigen: Plattformen mit Farbpunkt (aus den Schaltungen) */
.mk-side-ads { display: flex; flex-direction: column; gap: 1px; }
.mk-side-ads:empty { display: none; }
.mk-side-label { padding: 14px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink-mute); }
.mk-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 3px; margin: 0 5px; background: #94a3b8; }
.mk-side-ad-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fuß: Farbschema und Sprache in einer Zeile, darunter Person mit Tarif, Zahnrad, Abmelden */
.landingpage .mk-sidebar-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.landingpage .mk-sidebar-foot > .mk-lang-switch { justify-self: end; }
.landingpage .mk-sidebar-foot > .mk-user { grid-column: 1 / -1; gap: 6px; }
.mk-user-text span { font-size: 11.5px; color: var(--mk-ink-mute); }
.landingpage .mk-sidebar-foot .mk-user .mk-btn-icon { width: 30px; height: 30px; min-height: 30px; flex: none; }
.landingpage .mk-sidebar-foot .mk-user-text { flex: 1; min-width: 0; }
@media (max-width: 900px), (pointer: coarse) {
  .landingpage .mk-sidebar-foot { grid-template-columns: minmax(0, 1fr); }
  .landingpage .mk-sidebar-foot > .mk-lang-switch { justify-self: start; }
  .landingpage .mk-sidebar-foot .mk-user .mk-btn-icon { width: 40px; height: 40px; min-height: 40px; }
  .mk-user-text b, .mk-user-text span { white-space: normal; overflow-wrap: anywhere; }
}

/* Kopfleiste: Brotkrumen links */
.landingpage .mk-crumb { display: flex; align-items: center; gap: 4px; font-size: 13.5px; }
.landingpage .mk-crumb a.mk-crumb-i { color: var(--mk-ink-mute); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.landingpage .mk-crumb a.mk-crumb-i:hover { color: var(--mk-ink); }
.mk-crumb-sep { font-size: 16px !important; color: var(--mk-ink-mute); opacity: .7; flex: none; }
.mk-crumb-cur { color: var(--mk-ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (min-width: 901px) {
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-topbar > [data-node-id="MK_App_TB_Search"] { display: none; }
  html.mk-page-primary:not(.ao-phone) .mk-app:not(.mk-ops) .mk-topbar > .mk-btn-primary { display: none; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-topbar .mk-crumb { padding-right: var(--mk-head-w, 0px); }
  /* Seitenkopf: Titel steht in den Brotkrumen, die Aktionen der Seite wandern rechts in die Kopfleiste (sticky geht nicht) */
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-stack > div:has(> .mk-page-head),
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-stack > .mk-page-head,
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-stack > div > .mk-page-head { display: contents; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-stack .mk-page-head > .mk-page-head-text,
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-stack .mk-page-head > .mk-page-actions:not(.mk-head-acts) { display: none; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-app-main .mk-head-acts {
    position: fixed; top: 0; right: calc(20px + var(--mk-tb-new, 0px)); left: auto; z-index: 45;
    height: var(--mk-topbar-h); margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; pointer-events: none;
    max-width: calc(100vw - var(--mk-sidebar-w) - 300px - var(--mk-tb-new, 0px));
  }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-app-main .mk-head-acts > * { pointer-events: auto; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-head-acts .mk-row, html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-head-acts .mk-tags { flex-wrap: nowrap; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-head-acts .mk-btn { height: 32px; min-height: 32px; white-space: nowrap; }
  html:not(.ao-phone) .mk-app:not(.mk-ops) .mk-head-acts .mk-btn-sm { height: 30px; min-height: 30px; }
}