/* milbo-kit v1. Baut auf den Tokens des milbo Brand Hub auf (tokens.css, unverändert).
   Die --mk-* Rollen kann theme.css pro Kunde überschreiben. Alles ist optional und im Bundle überschreibbar. */
@import url(tokens.css);

@font-face { font-family: 'General Sans'; font-weight: 400; font-display: swap; src: url(fonts/GeneralSans-Regular.woff2) format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 500; font-display: swap; src: url(fonts/GeneralSans-Medium.woff2) format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 600; font-display: swap; src: url(fonts/GeneralSans-Semibold.woff2) format('woff2'); }
@font-face { font-family: 'Clash Grotesk'; font-weight: 200 700; font-display: swap; src: url(fonts/ClashGrotesk-Variable.woff2) format('woff2'); }

:root {
  --mk-ground: var(--milbo-deep);
  --mk-on-ground: var(--milbo-white);
  --mk-on-ground-muted: var(--milbo-muted-dark);
  --mk-surface: var(--milbo-surface);
  --mk-panel: var(--milbo-bb2);
  --mk-card: var(--milbo-raised);
  --mk-ink: var(--milbo-ink);
  --mk-muted: var(--milbo-muted);
  --mk-accent: var(--milbo-accent);
  --mk-line: var(--milbo-line);
  --mk-line-strong: var(--milbo-line-strong);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mk-surface); color: var(--mk-ink); font: 500 var(--milbo-fs-body) / var(--milbo-lh-body) var(--milbo-font); font-synthesis: none; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--milbo-font-display); font-weight: var(--milbo-fw-display); letter-spacing: -.018em; font-synthesis: none; }
p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--mk-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* Seite */
.mk-page { max-width: 1296px; margin: 0 auto; padding: var(--milbo-s-7) var(--milbo-gutter) var(--milbo-s-8); }
.mk-section + .mk-section { margin-top: var(--milbo-s-8); }
.mk-section-head { margin-bottom: var(--milbo-s-5); padding-top: var(--milbo-s-4); border-top: 1px solid var(--mk-line-strong); }
.mk-section-title { font-size: var(--milbo-fs-h4); line-height: 1.17; }

/* Label: Großbuchstaben nur hier, „milbo“ bleibt trotzdem klein. */
.mk-label { color: var(--mk-muted); font-size: var(--milbo-fs-label); font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-feature-settings: 'case'; }

/* Hero: Deep Blue, flach, ohne Schatten */
.mk-hero { background: var(--mk-ground); color: var(--mk-on-ground); }
.mk-hero-inner { max-width: 1296px; margin: 0 auto; padding: var(--milbo-s-8) var(--milbo-gutter); }
.mk-hero .mk-label { color: var(--mk-on-ground-muted); margin-bottom: var(--milbo-s-4); }
.mk-title { font-size: var(--milbo-fs-h2); line-height: 1.07; }
.mk-lede { max-width: 60ch; margin-top: var(--milbo-s-5); font-size: var(--milbo-fs-lead); line-height: 1.45; }
.mk-hero .mk-lede { color: var(--mk-on-ground-muted); }

/* Selection, reduzierte Form: i unten links, 1 oben rechts, 4 u vom Rand. u = Schriftgröße / 16. */
.mk-sel { position: relative; display: inline-block; max-width: 100%; padding: .44em .75em; line-height: 1.12; }
.mk-sel::before, .mk-sel::after { content: ''; position: absolute; background: currentColor; }
.mk-sel::before {
  left: .25em; bottom: .25em; width: calc(7.5em / 16); height: calc(25em / 16);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='.5 3 7.5 25'%3E%3Cpath d='M.5 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0ZM1 11L5 11L5 25L8 25L8 28L1 28Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-sel::after {
  right: .25em; top: .25em; width: calc(7em / 16); height: 1.5em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 4 7 24'%3E%3Cpath d='M24 4L31 4L31 28L27 28L27 7L24 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-caret { display: inline-block; width: .14em; height: .84em; margin-left: .06em; background: var(--milbo-red); vertical-align: -.06em; }

/* Karten */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--milbo-gap); }
.mk-card { display: flex; flex-direction: column; padding: var(--milbo-s-5); border-radius: var(--milbo-r-l); background: var(--mk-card); box-shadow: var(--milbo-e1); color: inherit; text-decoration: none; transition: box-shadow var(--milbo-t-2) var(--milbo-fade), transform var(--milbo-t-1) var(--milbo-fade); }
a.mk-card:hover { box-shadow: var(--milbo-e2); }
a.mk-card:active { transform: scale(.98); }
.mk-card-cover { display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: var(--milbo-s-4); border-radius: var(--milbo-r-m); object-fit: cover; object-position: top; background: var(--mk-panel); }
.mk-card-title { margin-top: var(--milbo-s-2); font-family: var(--milbo-font-display); font-size: var(--milbo-fs-h4); font-weight: var(--milbo-fw-display); line-height: 1.17; letter-spacing: -.018em; }
.mk-card-note { margin-top: var(--milbo-s-3); color: var(--mk-muted); }
.mk-card-link { display: inline-flex; align-items: center; gap: var(--milbo-s-2); margin-top: auto; padding-top: var(--milbo-s-5); color: var(--mk-ground); font-size: var(--milbo-fs-body); font-weight: 600; }
.mk-card-link::after { content: ''; width: 20px; height: 20px; background: currentColor; transition: transform var(--milbo-t-2) var(--milbo-arrive);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 16h21M17 7l9 9-9 9'/%3E%3C/svg%3E") center / contain no-repeat; }
a.mk-card:hover .mk-card-link::after { transform: translateX(4px); }

/* Zahlen */
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--milbo-gap); }
.mk-stat-value { margin-top: var(--milbo-s-2); font-family: var(--milbo-font-display); font-size: var(--milbo-fs-h3); font-weight: var(--milbo-fw-display); line-height: 1.11; letter-spacing: -.018em; }

/* Tabelle: 24 % öffnet, 12 % trennt Zeilen */
.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th, .mk-table td { padding: var(--milbo-s-3) var(--milbo-s-4) var(--milbo-s-3) 0; border-top: 1px solid var(--mk-line); text-align: left; white-space: nowrap; font-weight: 500; }
.mk-table thead th { border-top: 0; color: var(--mk-muted); font-size: var(--milbo-fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-feature-settings: 'case'; }
.mk-table tbody th { font-weight: 600; }
.mk-table .num { text-align: right; }
.mk-table .bar { width: 28%; min-width: 120px; padding-right: 0; padding-left: var(--milbo-s-5); }
.mk-bar { display: block; height: 8px; border-radius: var(--milbo-r-pill); background: var(--mk-panel); overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--mk-ground); }

/* Buttons: Pills */
.mk-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--milbo-s-2); min-height: 52px; padding: 0 22px 0 24px; border: 0; border-radius: var(--milbo-r-pill); background: var(--mk-ground); color: var(--mk-on-ground); font: 600 15px/1 var(--milbo-font); text-decoration: none; cursor: pointer; transition: background-color var(--milbo-t-1) var(--milbo-fade), transform var(--milbo-t-1) var(--milbo-fade); }
.mk-button:hover { background: var(--mk-accent); }
.mk-button:active { transform: scale(.98); }
.mk-button.outline { background: transparent; color: var(--mk-ink); box-shadow: inset 0 0 0 1px var(--mk-line-strong); }
.mk-button.outline:hover { box-shadow: inset 0 0 0 1px var(--mk-ink); }
.mk-button.on-dark { background: var(--milbo-white); color: var(--milbo-deep); }
.mk-button.on-dark:hover { background: var(--milbo-bb2); }

/* Bewegung: Kurven und Dauern aus den Tokens. Alles bewegt sich einmal und bleibt dann stehen. */
@keyframes mk-arrive { from { opacity: 0; transform: translateY(16px); } }
.mk-hero-inner > *, .mk-section-head > *, .mk-grid > *, .mk-stats > * { animation: mk-arrive var(--milbo-t-3) var(--milbo-arrive) backwards; }
:is(.mk-hero-inner, .mk-section-head, .mk-grid, .mk-stats) > :nth-child(2) { animation-delay: 60ms; }
:is(.mk-hero-inner, .mk-section-head, .mk-grid, .mk-stats) > :nth-child(3) { animation-delay: 120ms; }
:is(.mk-grid, .mk-stats) > :nth-child(4) { animation-delay: 180ms; }
:is(.mk-grid, .mk-stats) > :nth-child(5) { animation-delay: 240ms; }
:is(.mk-grid, .mk-stats) > :nth-child(n+6) { animation-delay: 300ms; }

/* Selection, schreibend: die Ecken ziehen auseinander, dann schreibt der Caret in einem Zug.
   Vorher stehen i, Caret und 1 als Emblem zusammen. --mk-write-ms: Breite in em ÷ 13 em pro Sekunde, 900–2600 ms. */
@property --mk-write { syntax: '<length-percentage>'; inherits: true; initial-value: 0%; }
@keyframes mk-write { to { --mk-write: calc(100% + .8em); } }
@keyframes mk-drag { from { right: calc(100% - 1.4em); } }
.mk-sel.write { padding-right: .95em; white-space: nowrap; animation: mk-write var(--mk-write-ms, 1600ms) var(--milbo-write) 1120ms forwards; }
.mk-sel.write::after { animation: mk-drag 1000ms var(--milbo-travel) 120ms backwards; }
.mk-sel-line { position: relative; display: inline-block; }
.mk-sel-text { display: inline-block; padding-block: .2em; margin-block: -.2em; mask-image: linear-gradient(90deg, var(--milbo-dark) calc(var(--mk-write) - .8em), transparent var(--mk-write)); }
.mk-sel-line .mk-caret { position: absolute; top: .15em; left: min(var(--mk-write), 100%); }

@media (max-width: 599px) {
  .mk-page { padding-top: var(--milbo-s-6); padding-bottom: var(--milbo-s-7); }
  .mk-hero-inner { padding-top: var(--milbo-s-7); padding-bottom: var(--milbo-s-7); }
  body { font-size: 1rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}