/* Grundlagen: Schriften, Farben, Typografie, Container, Buttons. Farben nur als Tokens --mi-* in :root. */

@font-face {
  font-family: "Red Hat Display"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/red-hat-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Display"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/red-hat-display-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-code-pro-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-code-pro-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --mi-ink: #02000a;
  --mi-white: #fff;
  --mi-card: #0d0b12;
  --mi-panel: #0f0b13;      /* große Kästen (Ablauf, FAQ, Kontakt) */
  --mi-panel-in: #120f19;   /* Fläche innerhalb eines Kastens */
  --mi-deep: #06050d;       /* Leistungs-Kasten */
  --mi-chip: #0e0b12;
  --mi-float: #1c1c28;      /* schwebende Karten an der Code-Box */
  --mi-edge: #15141d;
  --mi-line: #35333b;
  --mi-muted: #9b9b9b;
  --mi-dim: #838288;        /* mind. 4,5:1 auf allen dunklen Flächen */
  --mi-soft: #d7d7d7;
  --mi-coral: #ff704d;
  --mi-peach: #ffc7b9;
  --mi-blush: #ffece8;
  --mi-salmon: #ff9f87;     /* Verlauf der Technik-Box */
  --mi-code-str: #ffcc99;
  --mi-code-key: #ff6600;
  --mi-card-hi: #16151e;
  --mi-card-lo: #2d2c35;
  --mi-tile-hi: #49474e;
  --mi-tile-lo: #302e34;
  --mi-pill-edge: #2c2f30;
  --mi-cta-ink: #1b1a23;
  --mi-glow: rgba(255, 112, 77, .35);
  --mi-glow-edge: rgba(255, 112, 77, .7);
  --mi-glow-soft: rgba(255, 112, 77, .18);
  --mi-haze: rgba(103, 102, 108, .5);
  --mi-shade: rgba(2, 0, 10, .72);
  --mi-veil: rgba(255, 255, 255, .2);
  --mi-veil-strong: rgba(255, 255, 255, .4);
  --mi-clear: rgba(255, 255, 255, 0);
  --mi-mask: #000;          /* nur Deckkraft für CSS-Masken, keine sichtbare Farbe */
  --mi-card-grad: radial-gradient(circle at 100% 100%, var(--mi-card-hi) 50%, var(--mi-card-lo) 100%);
  --mi-tile-grad: radial-gradient(at 0% 0%, var(--mi-tile-hi) 0, var(--mi-tile-lo) 100%);
  --mi-grad: linear-gradient(30deg, var(--mi-blush) 0%, var(--mi-peach) 50%, var(--mi-coral) 100%);
  --mi-silver: linear-gradient(60deg, var(--mi-white) 0, var(--mi-muted) 100%);
  --mi-display: "Red Hat Display", Helvetica, Arial, sans-serif;
  --mi-code: "Source Code Pro", ui-monospace, Menlo, monospace;
  /* Inhaltsbreite: 80 % des Fensters, höchstens 1152 px; breite Kästen 85 %, höchstens 1224 px */
  --mi-wrap: min(80%, 1152px);
  --mi-wrap-wide: min(85%, 1224px);
  --mi-measure: 960px;
  --mi-header-h: 122px;
  --mi-nav-pad: 18px;       /* Innenabstand links/rechts im Menürahmen */
  --mi-toggle-w: 26px;      /* Pfeil im Menü (24 px Klickfläche) inkl. Abstand; "Preise" (ohne Pfeil) bekommt denselben Platz */
}
@media (max-width: 980px) {
  :root { --mi-wrap: calc(100% - 40px); --mi-wrap-wide: calc(100% - 32px); --mi-header-h: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--mi-ink); color: var(--mi-muted);
  font: 500 16px/1.6 var(--mi-display); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { color: var(--mi-white); font-weight: 500; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mi-coral); outline-offset: 3px; }

.mi-wrap { width: var(--mi-wrap); margin-inline: auto; }
.mi-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mi-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--mi-white); color: var(--mi-ink); text-decoration: none; }
.mi-skip:focus { top: 16px; }

/* Buttons */
.mi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 18px/1 var(--mi-display);
  padding: 18px 30px; border: 0; border-radius: 100px; text-decoration: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mi-btn:hover { transform: translateY(-2px); }
.mi-btn--primary { background: linear-gradient(45deg, var(--mi-peach), var(--mi-coral)); color: var(--mi-edge); }
.mi-btn--primary:hover { box-shadow: 0 10px 40px var(--mi-glow); }
.mi-btn--ghost { background: var(--mi-edge); color: var(--mi-white); border: 1px solid var(--mi-line); }
.mi-btn--ghost:hover { box-shadow: 0 2px 30px var(--mi-haze); }
.mi-btn--quiet { background: var(--mi-edge); color: var(--mi-muted); font-size: 20px; padding: 20px 40px; }
.mi-btn--quiet:hover { color: var(--mi-white); box-shadow: 0 2px 30px var(--mi-haze); }
@media (max-width: 767px) {
  .mi-btn { font-size: 16px; padding: 16px 24px; }
  .mi-btn--quiet { font-size: 17px; padding: 16px 28px; }
}

/* Gemeinsame Bausteine */
.mi-kicker { font: 500 14px var(--mi-code); letter-spacing: 4px; text-transform: uppercase; color: var(--mi-peach); }
.mi-tile {
  display: grid; place-items: center; width: 154px; height: 160px; margin: 0 auto;
  border: 2px solid var(--mi-edge); border-radius: 20px; color: var(--mi-coral);
}
.mi-tile svg { width: 64px; height: 96px; }
.mi-giant {
  font: 600 clamp(44px, 8.4vw, 120px)/1.1 var(--mi-display); letter-spacing: -0.025em; color: var(--mi-white);
  text-align: center; margin-top: 20px;
}
.mi-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mi-chips li {
  padding: 12px 22px; border: 1px solid var(--mi-pill-edge); border-radius: 100px;
  background: var(--mi-card); color: var(--mi-soft); font: 400 15px var(--mi-code); letter-spacing: 1.5px; text-transform: uppercase;
}
@media (max-width: 767px) {
  .mi-tile { width: 110px; height: 116px; }
  .mi-tile svg { width: 44px; height: 66px; }
  .mi-chips li { font-size: 13px; padding: 10px 16px; }
}

/* Akkordeon (<details>): Leistungen und FAQ auf der Startseite */
.mi-acc { display: grid; gap: 15px; }
.mi-acc details { background: var(--mi-ink); border: 2px solid var(--mi-edge); border-radius: 10px; }
.mi-acc summary {
  position: relative; list-style: none; cursor: pointer; padding: 30px 80px 30px 30px;
  font: 500 18px/1.3 var(--mi-display); color: var(--mi-white);
}
.mi-acc summary::-webkit-details-marker { display: none; }
.mi-acc summary::after {
  content: "›"; position: absolute; right: 30px; top: 50%; translate: 0 -50%; transition: rotate .2s ease;
  font: 400 22px/1 var(--mi-display); color: var(--mi-muted);
}
.mi-acc details[open] summary { padding-bottom: 0; }
.mi-acc details[open] summary::after { content: none; }
.mi-acc details > p { padding: 20px 30px 30px; font: 500 16px/1.8 var(--mi-display); color: var(--mi-dim); }
@media (max-width: 767px) {
  .mi-acc summary { padding: 22px 56px 22px 20px; font-size: 17px; }
  .mi-acc summary::after { right: 20px; }
  .mi-acc details > p { padding: 16px 20px 22px; }
}

/* Laufband (Systemnamen, Chips): Inhalt doppelt, die zweite Hälfte ist für Screenreader verborgen */
.mi-marquee { overflow: hidden; mask: linear-gradient(90deg, transparent, var(--mi-mask) 12%, var(--mi-mask) 88%, transparent); }
.mi-marquee-track { list-style: none; display: flex; width: max-content; animation: mi-marquee var(--mi-marquee-s, 40s) linear infinite; }
.mi-marquee--rev .mi-marquee-track { animation-direction: reverse; }
.mi-marquee:hover .mi-marquee-track { animation-play-state: paused; }
@keyframes mi-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mi-marquee { mask: none; }
  .mi-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .mi-marquee-track [aria-hidden="true"] { display: none; }
  .mi-btn, .mi-acc summary::after { transition: none; }
}

/* Kopf: Logo, Menürahmen mit Mega-Menü, Sprache, Kontakt-Knopf; mobil Logo und Menü-Overlay */

.mi-header { position: relative; z-index: 100; height: var(--mi-header-h); }
.mi-header-inner {
  position: relative;
  width: var(--mi-wrap-wide); height: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Logo: Zeichen im Verlaufsrahmen und Schriftzug, ohne Bilddatei */
.mi-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; color: var(--mi-white); }
.mi-brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
  border: 1.5px solid transparent; background: linear-gradient(var(--mi-ink), var(--mi-ink)) padding-box, var(--mi-grad) border-box;
  font: 600 15px/1 var(--mi-code); letter-spacing: -1px;
}
.mi-brand-word { font: 500 28px/1 var(--mi-display); letter-spacing: -0.01em; }

/* Menürahmen */
.mi-nav {
  --mi-nav-half: 24px;   /* halbe Höhe des Rahmens: 22 px Zeile + 2 × 12 px Innenabstand der Punkte + 2 × 1 px Rand */
  flex: 0 1 auto; min-width: 0; padding: 0 var(--mi-nav-pad);
  background: var(--mi-ink); border: 1px solid var(--mi-line); border-radius: 100px;
  transition: box-shadow .3s ease;
}
.mi-nav-list { list-style: none; display: flex; align-items: center; white-space: nowrap; }
/* Der senkrechte Abstand gehört zu den Punkten, nicht zum Rahmen: so reicht die Hover-Fläche jedes Punkts
   lückenlos bis an den Rand, und die Brücke des Panels schließt direkt an. */
.mi-nav-list > li { display: inline-flex; align-items: center; padding: 12px 7px; }
.mi-nav-list > li > a { font: 400 14px/22px var(--mi-display); color: var(--mi-white); text-decoration: none; transition: color .2s ease; }
.mi-nav-list > li > a:hover { color: var(--mi-peach); }
.mi-nav-list > .mi-nav-prices > a { color: var(--mi-peach); margin-right: var(--mi-toggle-w); }
.mi-nav-list > .mi-nav-prices > a:hover { color: var(--mi-coral); }

/* Mitlaufend: Menürahmen oben in der Mitte, sobald der Kopf aus dem Bild ist (nav.js setzt .is-stuck) */
.mi-header.is-stuck .mi-nav {
  position: fixed; top: 14px; left: 50%; translate: -50% 0; max-width: calc(100vw - 32px);
  box-shadow: 0 2px 30px var(--mi-haze);
}

.mi-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.mi-nav-cta {
  display: inline-block; padding: 11px 20px; border-radius: 100px; background: var(--mi-white); color: var(--mi-cta-ink);
  font: 500 15px/25.5px var(--mi-display); text-decoration: none; transition: box-shadow .25s ease;
}
.mi-nav-cta:hover { box-shadow: 0 2px 30px var(--mi-haze); }

/* Mega-Menü: ein Panel je Hauptpunkt. Es richtet sich an der Mitte der Kopfzeile aus (nicht am Menürahmen,
   der neben Logo und Knöpfen außermittig sitzt), damit es auch bei 1024 px im Fenster bleibt. Läuft der
   Menürahmen mit (is-stuck), sitzt er mittig und wird selbst zum Bezug. */
.mi-mm-toggle {
  /* Klickfläche 24 × 24 (WCAG 2.5.8); die negativen Ränder oben und unten halten die Zeilenhöhe bei 22 px */
  width: calc(var(--mi-toggle-w) - 2px); height: 24px; margin: -1px 0 -1px 2px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; color: var(--mi-muted); font: 400 12px/24px var(--mi-code);
}
.mi-mm-toggle::before { content: "▾"; }
.mi-mm-toggle:focus-visible { outline-offset: 2px; }
.mi-mm-panel {
  position: absolute; top: calc(50% + var(--mi-nav-half) + 14px); left: 50%; z-index: 200;
  width: min(1080px, calc(100vw - 32px)); padding: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px;
  background: var(--mi-card); border: 1px solid var(--mi-line); border-radius: 24px; box-shadow: 0 30px 80px var(--mi-shade);
  text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  /* Beim Ausblenden nicht mehr greifbar, sonst öffnet ein Mauszug über die verblassende Fläche das Menü erneut */
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mi-header.is-stuck .mi-mm-panel { top: calc(100% + 14px); }
/* Brücke über den Abstand, damit Hover beim Wechsel ins Panel nicht abreißt */
.mi-mm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.mi-mm-item.is-open > .mi-mm-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; pointer-events: auto; }
@media (hover: hover) and (min-width: 981px) {
  /* Nur ohne JavaScript; mit JavaScript steuert megamenu.js das Öffnen mit Verzögerung (.is-open) */
  .mi-nav:not(.is-js) .mi-mm-item:hover > .mi-mm-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; pointer-events: auto; }
}
.mi-mm-item.is-open .mi-mm-toggle, .mi-nav:not(.is-js) .mi-mm-item:hover .mi-mm-toggle { color: var(--mi-coral); }
.mi-mm-cols { display: grid; gap: 24px; }
.mi-mm-cols--1 { grid-template-columns: minmax(0, 1fr); }
.mi-mm-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mi-mm-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mi-mm-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mi-mm-head { margin: 0 0 10px; font: 500 12px var(--mi-code); letter-spacing: 2px; text-transform: uppercase; color: var(--mi-dim); }
.mi-mm-list { display: grid; gap: 4px; }
.mi-mm-col a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background .2s ease; }
.mi-mm-col a:hover, .mi-mm-col a:focus-visible { background: var(--mi-card-hi); outline: none; }
.mi-mm-col b { color: var(--mi-white); font: 600 15px/1.3 var(--mi-display); }
.mi-mm-col span { color: var(--mi-dim); font: 400 13px/1.45 var(--mi-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-mm-aside { display: grid; gap: 12px; align-content: start; }
.mi-mm-check { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--mi-card-grad); border: 1px solid var(--mi-glow-edge); text-decoration: none; }
.mi-mm-check b { color: var(--mi-white); font: 600 16px/1.3 var(--mi-display); }
.mi-mm-check b::after { content: "\00a0→"; color: var(--mi-coral); }
.mi-mm-check span { color: var(--mi-muted); font: 400 13px/1.5 var(--mi-display); }
.mi-mm-more { padding: 12px 16px; border-radius: 100px; border: 1px solid var(--mi-line); color: var(--mi-soft); text-align: center; font: 500 14px var(--mi-display); text-decoration: none; }
.mi-mm-more:hover { border-color: var(--mi-glow-edge); color: var(--mi-white); }
.mi-mini { display: block; width: 100%; height: auto; padding: 18px 8px; background: var(--mi-card); border-radius: 14px; }
.mi-mini-node rect { fill: var(--mi-card-hi); stroke: var(--mi-line); stroke-width: 1.5; }
.mi-mini-node .mi-t { fill: var(--mi-white); font: 600 20px var(--mi-display); }
.mi-mini-node .mi-s { fill: var(--mi-muted); font: 400 12px var(--mi-code); letter-spacing: 1.5px; }
.mi-mini-pipe rect { fill: var(--mi-coral); }
.mi-mini-pipe text { fill: var(--mi-edge); font: 700 13px var(--mi-code); letter-spacing: 1.5px; }

/* Sprachumschalter als kompakter Aufklapper */
.mi-lang { position: relative; }
.mi-lang summary {
  list-style: none; cursor: pointer; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mi-line);
  font: 500 12px var(--mi-code); letter-spacing: 1px; color: var(--mi-soft);
}
.mi-lang summary::-webkit-details-marker { display: none; }
.mi-lang summary::after { content: " ▾"; color: var(--mi-coral); }
.mi-lang[open] summary, .mi-lang summary:hover { border-color: var(--mi-glow-edge); color: var(--mi-white); }
.mi-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300; min-width: 160px; padding: 6px;
  display: grid; gap: 2px; background: var(--mi-card); border: 1px solid var(--mi-line); border-radius: 14px; box-shadow: 0 20px 50px var(--mi-shade);
}
.mi-lang-menu a, .mi-mobile-lang a {
  padding: 8px 10px; border-radius: 8px; font: 500 13px var(--mi-code); letter-spacing: .5px; color: var(--mi-soft);
  text-decoration: none; white-space: nowrap;
}
.mi-lang-menu a:hover, .mi-mobile-lang a:hover { background: var(--mi-card-hi); color: var(--mi-white); }

/* Mobil: Menü-Knopf und Overlay (<details>, funktioniert auch ohne JavaScript) */
.mi-burger { display: none; }
@media (max-width: 1365px) and (min-width: 981px) {
  :root { --mi-wrap-wide: 94%; }
  .mi-nav-cta { display: none; }
}
@media (max-width: 1535px) and (min-width: 981px) {
  :root { --mi-nav-pad: 12px; }
  .mi-nav-list > li { padding: 12px 3px; }
  .mi-brand-word { font-size: 24px; }
}
@media (max-width: 1200px) {
  .mi-mm-panel { grid-template-columns: minmax(0, 1fr); }
  .mi-mm-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .mi-mm-check .mi-mini { display: none; }
}
@media (max-width: 980px) {
  .mi-header { position: sticky; top: 0; background: var(--mi-ink); }
  .mi-nav, .mi-header-actions { display: none; }
  .mi-brand-word { font-size: 22px; }
  .mi-brand-mark { width: 34px; height: 34px; font-size: 13px; }
  .mi-burger { display: block; }
  .mi-burger > summary {
    list-style: none; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px;
    color: var(--mi-white);
  }
  .mi-burger > summary::-webkit-details-marker { display: none; }
  .mi-burger-icon { width: 24px; height: 24px; }
  .mi-burger-close { display: none; }
  .mi-burger[open] .mi-burger-open { display: none; }
  .mi-burger[open] .mi-burger-close { display: block; }
  .mi-burger[open] > summary { position: fixed; top: 14px; right: 20px; z-index: 520; margin: 0; }
  .mi-mobile {
    position: fixed; inset: 0; z-index: 510; overflow-y: auto; padding: 96px 20px 48px;
    background: var(--mi-ink); animation: mi-fade .2s ease;
  }
  .mi-mobile-list { list-style: none; display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
  .mi-mobile-list > li > a, .mi-mobile-list summary {
    display: block; position: relative; padding: 20px 56px; border-radius: 100px; background: var(--mi-card-hi);
    color: var(--mi-white); text-align: center; text-decoration: none; font: 500 17px/1.2 var(--mi-display); cursor: pointer; list-style: none;
  }
  .mi-mobile-list summary::-webkit-details-marker { display: none; }
  .mi-mobile-list summary::after { content: "+"; position: absolute; right: 26px; top: 50%; translate: 0 -50%; color: var(--mi-muted); font: 400 20px var(--mi-code); }
  .mi-mobile-list details[open] summary::after { content: "–"; color: var(--mi-coral); }
  .mi-mobile-list .mi-mobile-prices > a { color: var(--mi-peach); }
  .mi-mobile-sub { list-style: none; display: grid; gap: 2px; padding: 10px 8px 4px; }
  .mi-mobile-sub a { display: block; padding: 10px 16px; border-radius: 12px; color: var(--mi-soft); text-decoration: none; text-align: center; font: 500 15px/1.35 var(--mi-display); }
  .mi-mobile-sub a:hover { background: var(--mi-card-hi); color: var(--mi-white); }
  .mi-mobile-lang { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
  .mi-mobile-lang a { padding: 10px 14px; border-radius: 100px; background: var(--mi-card-hi); }
  .mi-mobile-lang a[aria-current="true"] { color: var(--mi-peach); }
  .mi-mobile-cta { display: flex; justify-content: center; margin-top: 20px; }
}
@keyframes mi-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mi-mm-panel, .mi-nav { transition: none; }
  .mi-mobile { animation: none; }
}

/* Startseite */

.mi-section { padding: 58px 0; }

/* Hero */
.mi-hero-section { padding: 100px 0 58px; text-align: center; }
.mi-hero-kicker {
  display: inline-block; max-width: min(550px, 100%); width: 100%; padding: 8px 12px; margin-bottom: 32px;
  border: 1px solid var(--mi-pill-edge); border-radius: 100px;
  font: 500 18px/1.32 var(--mi-code); letter-spacing: 5px; text-transform: uppercase; color: var(--mi-white);
}
.mi-hero-title { font: 500 clamp(35px, 7vw, 100px)/1.2 var(--mi-display); }
.mi-hero-title span { display: block; width: fit-content; margin-inline: auto; padding: 0 3px; -webkit-background-clip: text; background-clip: text; color: transparent; }
.mi-hero-title span:first-child { background-image: var(--mi-silver); }
.mi-hero-title span:last-child { background-image: var(--mi-grad); }
.mi-hero { max-width: 1160px; margin: 32px auto 0; }
.mi-lead { font: 400 22px/1.6 var(--mi-display); color: var(--mi-muted); max-width: 760px; margin: 0 auto; }
.mi-lead b { color: var(--mi-soft); font-weight: 500; }
.mi-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
@media (max-width: 767px) {
  .mi-hero-section { padding-top: 40px; }
  .mi-hero-kicker { font-size: 13px; letter-spacing: 3px; margin-bottom: 24px; }
  .mi-lead { font-size: 17px; }
}

/* Hero-Grafik: Software-Inseln */
.mi-diagram { margin: 72px 0 0; }
.mi-diagram-wide { width: 100%; height: auto; overflow: visible; }
.mi-stop-blush { stop-color: var(--mi-blush); }
.mi-stop-peach { stop-color: var(--mi-peach); }
.mi-stop-coral { stop-color: var(--mi-coral); }
.mi-stop-tile-hi { stop-color: var(--mi-tile-hi); }
.mi-stop-tile-lo { stop-color: var(--mi-tile-lo); }
.mi-stop-card-hi { stop-color: var(--mi-card-hi); }
.mi-stop-card-lo { stop-color: var(--mi-card-lo); }
.mi-diagram figcaption { margin-top: 18px; font: 400 14px var(--mi-code); letter-spacing: 1px; color: var(--mi-dim); text-transform: uppercase; }
.mi-wire { fill: none; stroke: var(--mi-line); stroke-width: 1.5; }
.mi-flow { fill: none; stroke: var(--mi-coral); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 16; animation: mi-flow 1.8s linear infinite; }
.mi-flow.rev { animation-direction: reverse; }
@keyframes mi-flow { to { stroke-dashoffset: -38; } }
.mi-arrow { fill: none; stroke: var(--mi-coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi-pipe text { fill: var(--mi-edge); font: 600 13px var(--mi-code); letter-spacing: 1.2px; }
.mi-node > rect:first-child { stroke: var(--mi-edge); stroke-width: 2; }
.mi-node .mi-glyph { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi-node .mi-dot { fill: var(--mi-peach); }
.mi-node .mi-t { fill: var(--mi-white); font: 600 21px var(--mi-display); }
.mi-node .mi-s { fill: var(--mi-muted); font: 400 13px var(--mi-code); letter-spacing: 1.5px; }
.mi-node--hot > rect:first-child { stroke: var(--mi-glow-edge); }
.mi-node--hot .mi-s { fill: var(--mi-peach); }
.mi-diagram-stack { display: none; list-style: none; position: relative; }
.mi-diagram-stack li {
  position: relative; display: grid; gap: 4px; padding: 16px 20px; margin: 0 0 12px;
  background: var(--mi-card-grad); border: 2px solid var(--mi-edge); border-radius: 20px; text-align: left;
}
.mi-diagram-stack b { color: var(--mi-white); font: 600 18px var(--mi-display); }
.mi-diagram-stack span { color: var(--mi-dim); font: 400 12px var(--mi-code); letter-spacing: 1.5px; text-transform: uppercase; }
.mi-diagram-stack .mi-pipe-tag { justify-self: start; margin: 6px 0; padding: 6px 12px; border-radius: 100px; background: var(--mi-grad); color: var(--mi-edge); font-weight: 600; }
.mi-diagram-stack .mi-stack-hot { border-color: var(--mi-glow-edge); }
@media (max-width: 767px) {
  .mi-diagram { margin-top: 44px; }
  .mi-diagram-wide { display: none; }
  .mi-diagram-stack { display: block; }
}

/* Zwischenüberschriften (Technik, Team) */
.mi-section-head { padding: 72px 16px 56px; text-align: center; }
.mi-section-head-inner { max-width: 1040px; margin: 0 auto; }
/* Kicker, Überschrift und Einleitung zentrierter Abschnitte (Technik-Kopf, Team) */
.mi-section-kicker, .mi-home-team-kicker { margin: 0 0 16px; font: 400 14px var(--mi-code); letter-spacing: 4px; text-transform: uppercase; color: var(--mi-peach); }
.mi-section-head h2, .mi-home-team h2 { margin: 0 0 20px; font: 500 clamp(32px, 4.5vw, 56px)/1.1 var(--mi-display); letter-spacing: -0.02em; }
.mi-section-lead, .mi-home-team-lead { max-width: 680px; margin: 0 auto; font: 400 19px/1.6 var(--mi-display); color: var(--mi-muted); }

/* Technik: Tabs mit Code-Beispielen */
.mi-technik { padding-bottom: 58px; }
.mi-technik-box {
  width: var(--mi-wrap-wide); margin-inline: auto; padding: 100px 100px 85px;
  background: linear-gradient(var(--mi-salmon) 0, var(--mi-clear) 100%); border-radius: 50px 50px 0 0;
}
.mi-tabs { display: flex; gap: 0; padding: 20px; margin-top: 10px; background: var(--mi-veil); border-radius: 100px; }
.mi-tab {
  flex: 1 1 0; padding: 20px 10px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font: 600 18px/1.32 var(--mi-display); color: var(--mi-white); transition: background .25s ease;
}
.mi-tab:hover { background: var(--mi-veil); }
.mi-tab[aria-selected="true"] { background: var(--mi-veil-strong); }
.mi-tab-panel { display: grid; grid-template-columns: 20% 60% 20%; align-items: start; margin-top: 30px; }
.mi-tab-panel[hidden] { display: none; }
.mi-tab-name {
  position: relative; z-index: 1; margin: 100px -25px 0 30px; padding: 30px; border-radius: 15px; background: var(--mi-float);
  text-align: center; box-shadow: 0 20px 50px var(--mi-shade);
}
.mi-tab-name h3 { font: 500 25px/1 var(--mi-display); padding-bottom: 10px; }
.mi-tab-name p { font: 500 14px/1.7 var(--mi-display); color: var(--mi-muted); }
.mi-codebox { padding: 40px; border-radius: 20px; background: var(--mi-edge); min-width: 0; }
.mi-codebox-bar { display: flex; gap: 10px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--mi-line); }
.mi-codebox-bar i { width: 18px; height: 18px; border-radius: 50%; background: var(--mi-card-lo); }
.mi-code { margin: 0; overflow-x: auto; font: 500 17px/1.9 var(--mi-code); color: var(--mi-dim); white-space: pre; tab-size: 2; }
.mi-code .s { color: var(--mi-code-str); }
.mi-code .k { color: var(--mi-code-key); }
.mi-code .c { color: var(--mi-dim); font-style: italic; }
.mi-tab-features {
  position: relative; z-index: 1; list-style: none; display: grid; gap: 14px; margin: 280px 60px 0 -30px; padding: 32px 28px;
  border-radius: 15px; background: var(--mi-float); box-shadow: 0 20px 50px var(--mi-shade);
}
.mi-tab-features li { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.5 var(--mi-display); color: var(--mi-muted); }
.mi-tab-features svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; color: var(--mi-coral); }
@media (max-width: 1200px) {
  .mi-technik-box { padding: 60px 40px 60px; }
  .mi-tab-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mi-tab-name, .mi-tab-features { margin: 0; }
  .mi-tab-name { order: -1; }
}
@media (max-width: 767px) {
  .mi-technik-box { padding: 24px 12px 40px; border-radius: 28px 28px 0 0; }
  .mi-tabs { flex-wrap: wrap; justify-content: center; padding: 8px; border-radius: 24px; }
  .mi-tab { flex: 0 0 auto; padding: 10px 14px; font-size: 15px; }
  .mi-codebox { padding: 20px 16px; }
  .mi-code { font-size: 13px; line-height: 1.8; }
}

/* Laufband mit Systemnamen */
.mi-logos { margin-top: 32px; text-align: center; }
.mi-logos-label { font: 500 14px var(--mi-code); letter-spacing: 4px; text-transform: uppercase; color: var(--mi-dim); }
.mi-logos .mi-marquee { margin-top: 24px; }
.mi-logo { flex: 0 0 auto; padding: 0 44px; font: 600 26px/56px var(--mi-display); letter-spacing: -0.01em; color: var(--mi-dim); white-space: nowrap; }
@media (max-width: 767px) { .mi-logo { font-size: 17px; line-height: 40px; padding: 0 24px; } }

/* Automatisieren: große Überschrift und drei Chip-Laufbänder */
.mi-automation { text-align: center; }
.mi-automation .mi-marquee { margin-top: 20px; }
.mi-automation .mi-marquee:first-of-type { margin-top: 48px; }
.mi-pill-big {
  flex: 0 0 auto; margin-right: 30px; padding: 20px 30px; border: 2px solid var(--mi-edge); border-radius: 100px;
  background: var(--mi-chip); font: 500 30px/30px var(--mi-display); color: var(--mi-dim); white-space: nowrap;
}
.mi-automation-lead { max-width: 800px; margin: 40px auto 0; font: 500 23px/1.6 var(--mi-display); color: var(--mi-dim); }
@media (max-width: 767px) {
  .mi-pill-big { font-size: 18px; line-height: 20px; padding: 14px 20px; margin-right: 14px; }
  .mi-automation-lead { font-size: 18px; }
}

/* Leistungen: Akkordeon und Protokoll */
.mi-services {
  width: var(--mi-wrap); margin-inline: auto; padding: 40px 0 40px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--mi-deep); border: 2px solid var(--mi-edge); border-radius: 30px;
}
.mi-services-text .mi-kicker { font-size: 20px; color: var(--mi-dim); }
.mi-services-text h2 { margin: 16px 0 32px; font: 500 clamp(30px, 3.2vw, 45px)/1.3 var(--mi-display); }
.mi-services-log { margin-right: -40px; }
@media (max-width: 980px) {
  .mi-services { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; }
  .mi-services-log { margin-right: 0; }
}

/* Protokoll */
.mi-log { text-align: left; border-radius: 20px; overflow: hidden; background: var(--mi-card); border: 2px solid var(--mi-edge); box-shadow: 0 2px 30px var(--mi-haze); }
.mi-log-bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--mi-edge); }
.mi-log-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--mi-line); }
.mi-log-bar span { margin-left: auto; font: 400 12px var(--mi-code); color: var(--mi-dim); letter-spacing: 1px; }
.mi-log-lines { list-style: none; padding: 14px 20px 6px; display: grid; gap: 2px; }
.mi-log-lines li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--mi-edge); font: 400 13px/1.45 var(--mi-code); color: var(--mi-muted);
}
.mi-log-lines li:last-child { border-bottom: 0; }
.mi-log-lines time { color: var(--mi-dim); font-variant-numeric: tabular-nums; }
.mi-log-route { color: var(--mi-white); grid-column: 2; }
.mi-log-msg { grid-column: 2; }
.mi-log-lines b { grid-column: 3; grid-row: 1; font-weight: 500; letter-spacing: 1px; font-size: 11px; padding: 3px 8px; border-radius: 100px; }
.mi-ok { color: var(--mi-edge); background: var(--mi-grad); }
.mi-retry { color: var(--mi-peach); border: 1px solid var(--mi-glow-edge); }
.mi-log-warn .mi-log-msg { color: var(--mi-peach); }
.mi-log figcaption { padding: 14px 20px 18px; border-top: 1px solid var(--mi-edge); font: 400 14px/1.5 var(--mi-display); color: var(--mi-dim); }
.mi-log-count { margin-left: auto; font: 400 12px var(--mi-code); font-style: normal; letter-spacing: 1px; color: var(--mi-peach); }
.mi-log-count + span { margin-left: 16px; }
@media (max-width: 767px) {
  .mi-log-lines li { grid-template-columns: minmax(0, 1fr) auto; }
  .mi-log-lines time { grid-column: 1; grid-row: 1; }
  .mi-log-route { grid-column: 1 / -1; grid-row: 2; }
  .mi-log-msg { grid-column: 1 / -1; grid-row: 3; }
  .mi-log-lines b { grid-column: 2; grid-row: 1; }
}

/* Egal welches System */
.mi-any-section { text-align: center; padding-bottom: 0; }
.mi-any { max-width: 820px; margin: 28px auto 0; display: grid; justify-items: center; gap: 36px; }
.mi-any-lead { font: 400 22px/1.6 var(--mi-display); color: var(--mi-muted); }
@media (max-width: 767px) { .mi-any-lead { font-size: 17px; } }

/* Zwei Wege: mit und ohne API */
.mi-paths { width: min(1100px, 100%); margin: 40px auto 0; }
.mi-paths svg { width: 100%; height: auto; overflow: visible; }
.mi-paths .mi-path-line { fill: none; stroke: var(--mi-peach); stroke-width: 1.5; }
.mi-paths .mi-path-fade { fill: none; stroke-width: 1.5; }   /* Verlauf als stroke-Attribut im SVG */
.mi-path-stop-on { stop-color: var(--mi-peach); }
.mi-path-stop-off { stop-color: var(--mi-peach); stop-opacity: 0; }
.mi-paths .mi-path-pill rect { fill: var(--mi-edge); }
.mi-paths .mi-path-pill circle { fill: var(--mi-card-lo); }
.mi-paths .mi-path-pill text { fill: var(--mi-muted); font: 500 18px var(--mi-display); }
.mi-paths .mi-path-pill path { fill: none; stroke: var(--mi-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mi-paths .mi-path-done circle:first-child { fill: var(--mi-glow-soft); }
.mi-paths .mi-path-done circle:nth-child(2) { fill: var(--mi-coral); }
.mi-paths .mi-path-done path { fill: none; stroke: var(--mi-white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Ablauf und FAQ */
.mi-process-cta { display: flex; justify-content: center; padding-bottom: 29px; }
.mi-process { width: var(--mi-wrap); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; }
.mi-panel { min-width: 0; padding: 40px; background: var(--mi-panel); border: 2px solid var(--mi-edge); border-radius: 20px; }
.mi-badge {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--mi-glow-edge); border-radius: 100px; background: var(--mi-glow-soft);
  font: 500 14px/1.2 var(--mi-display); color: var(--mi-white);
}
.mi-steps { position: relative; margin-top: 24px; }
.mi-steps-track { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mi-steps-track::-webkit-scrollbar { display: none; }
.mi-step { scroll-snap-align: start; display: grid; align-content: start; justify-items: center; gap: 10px; padding: 0 4px; text-align: center; }
.mi-step h3 { font: 500 24px/1.4 var(--mi-display); color: var(--mi-soft); }
.mi-step p { font: 500 clamp(24px, 2.8vw, 40px)/1.4 var(--mi-display); color: var(--mi-dim); }
.mi-step-name { margin-top: 14px; font: 500 24px/1 var(--mi-display); color: var(--mi-white); }
.mi-step-note { font: 500 14px var(--mi-code); letter-spacing: 2px; text-transform: uppercase; color: var(--mi-dim); }
.mi-steps-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.mi-steps-nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mi-line); border-radius: 50%;
  background: var(--mi-edge); color: var(--mi-white); cursor: pointer; transition: border-color .2s ease;
}
.mi-steps-nav button:hover { border-color: var(--mi-glow-edge); }
.mi-steps-nav button:disabled { opacity: .4; cursor: default; border-color: var(--mi-line); }
.mi-steps-nav svg { width: 18px; height: 18px; }
.mi-steps-count { min-width: 64px; text-align: center; font: 500 14px var(--mi-code); letter-spacing: 2px; color: var(--mi-dim); }
@media (max-width: 980px) {
  .mi-process { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mi-panel { padding: 28px 20px; }
}

/* Team */
.mi-home-team { padding: 96px 16px 120px; text-align: center; }
.mi-home-team-inner { max-width: 1040px; margin: 0 auto; }
.mi-home-team-lead { margin-bottom: 48px; }
.mi-home-team-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; margin: 0 auto 40px; }
.mi-home-team-list li { padding: 0 0 22px; display: grid; gap: 4px; background: var(--mi-card-grad); border: 2px solid var(--mi-edge); border-radius: 24px; overflow: hidden; }
.mi-home-team-list img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.mi-home-team-list b { color: var(--mi-white); font: 600 20px var(--mi-display); }
.mi-home-team-list span { color: var(--mi-peach); font: 400 12px var(--mi-code); letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 600px) { .mi-home-team-list { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .mi-flow, .mi-flows path { animation: none; }
  .mi-tab { transition: none; }
}

/* Preisblock (Startseite und "Ablauf und Preise") */

@property --mi-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mi-home-pricing { padding: 40px 0; }
.mi-price-block { position: relative; margin: 72px 0; text-align: center; }
.mi-price-block::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: min(900px, 90%); height: 60%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--mi-glow-soft), transparent); pointer-events: none; z-index: 0;
}
.mi-price-block > * { position: relative; z-index: 1; }
.mi-price-block .mi-price-kicker { margin: 0 0 14px; font: 500 14px var(--mi-code); letter-spacing: 4px; text-transform: uppercase; color: var(--mi-peach); }
.mi-price-block .mi-price-title { margin: 0 auto 16px; font: 600 clamp(36px, 5.5vw, 68px)/1.05 var(--mi-display); letter-spacing: -0.03em; color: var(--mi-white); }
.mi-price-block .mi-price-lead { max-width: 640px; margin: 0 auto 56px; font: 400 19px/1.6 var(--mi-display); color: var(--mi-muted); }
.mi-price-block .mi-price-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; text-align: left; }
.mi-price-block .mi-plan {
  position: relative; margin: 0; padding: 36px 30px 30px; display: flex; flex-direction: column; gap: 6px;
  background: var(--mi-card-grad); border: 1px solid var(--mi-line); border-radius: 28px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), box-shadow .35s ease, border-color .35s ease;
}
.mi-plan:hover { transform: translateY(-8px) rotate(-.6deg); border-color: var(--mi-glow-edge); box-shadow: 0 30px 80px var(--mi-glow); }
.mi-plan.is-featured { border-color: transparent; transform: scale(1.04); z-index: 1; box-shadow: 0 30px 90px var(--mi-glow); }
.mi-plan.is-featured:hover { transform: scale(1.04) translateY(-8px) rotate(.6deg); }
/* Rotierender Leuchtrand um die hervorgehobene Karte */
.mi-plan.is-featured::after {
  content: ""; position: absolute; inset: -2px; border-radius: 30px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--mi-angle), var(--mi-coral), var(--mi-blush), var(--mi-peach), var(--mi-coral));
  -webkit-mask: linear-gradient(var(--mi-mask) 0 0) content-box, linear-gradient(var(--mi-mask) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--mi-mask) 0 0) content-box exclude, linear-gradient(var(--mi-mask) 0 0);
  animation: mi-spin 4s linear infinite;
}
@keyframes mi-spin { to { --mi-angle: 360deg; } }
.mi-plan-badge {
  position: absolute; top: -16px; right: 22px; z-index: 2; padding: 8px 14px; border-radius: 100px; transform: rotate(4deg);
  background: var(--mi-grad); color: var(--mi-edge); font: 700 12px var(--mi-code); letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 10px 30px var(--mi-glow);
}
.mi-price-block .mi-plan-name { margin: 0 0 10px; font: 600 15px var(--mi-code); letter-spacing: 2px; text-transform: uppercase; color: var(--mi-soft); }
.mi-price-block .mi-plan-price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mi-plan-from { font: 500 18px var(--mi-display); color: var(--mi-muted); }
.mi-price-block .mi-plan-price b {
  font: 700 clamp(48px, 5vw, 72px)/1 var(--mi-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  background: var(--mi-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mi-plan-cur { font: 700 32px var(--mi-display); color: var(--mi-peach); }
.mi-price-block .mi-plan-unit { margin: 0 0 14px; font: 400 13px var(--mi-code); letter-spacing: 1px; text-transform: uppercase; color: var(--mi-dim); }
.mi-price-block .mi-plan-desc { margin: 0 0 18px; font: 400 16px/1.6 var(--mi-display); color: var(--mi-muted); }
.mi-price-block .mi-plan-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.mi-price-block .mi-plan-list li { position: relative; margin: 0; padding: 0 0 0 30px; font: 400 15px/1.5 var(--mi-display); color: var(--mi-soft); }
.mi-price-block .mi-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mi-grad); color: var(--mi-edge); font: 700 11px/1 var(--mi-display);
}
.mi-price-block .mi-plan-cta { margin-top: auto; }
.mi-price-block .mi-price-note { max-width: 720px; margin: 36px auto 0; font: 400 14px/1.6 var(--mi-display); color: var(--mi-dim); }
@media (max-width: 980px) {
  .mi-price-block .mi-price-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 32px; }
  .mi-price-block .mi-plan.is-featured, .mi-price-block .mi-plan.is-featured:hover { transform: none; }
}
@media (max-width: 767px) {
  .mi-price-block .mi-price-lead { font-size: 17px; margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mi-price-block .mi-plan, .mi-price-block .mi-plan:hover, .mi-price-block .mi-plan.is-featured:hover { transition: none; transform: none; }
  .mi-plan.is-featured::after { animation: none; }
}

/* Kontakt: Überschrift über die volle Breite; links Personenkarte und Gespräch, rechts das Formular.
   Mobil: Personenkarte, Formular, Gespräch. */

.mi-contact { padding: 40px 0 50px; }
.mi-contact-card { width: var(--mi-wrap); margin-inline: auto; padding: 56px 48px 48px; background: var(--mi-panel); border: 2px solid var(--mi-edge); border-radius: 20px; }
.mi-contact-head { max-width: 820px; margin: 0 auto 48px; display: grid; justify-items: center; gap: 16px; text-align: center; }
.mi-contact-icon {
  display: grid; place-items: center; width: 88px; height: 82px; border-radius: 10px; border: 1px solid var(--mi-tile-hi);
  background: var(--mi-tile-grad); color: var(--mi-coral);
}
.mi-contact-icon svg { width: 48px; height: 48px; }
.mi-contact-icon .mi-mail-flap { stroke: var(--mi-tile-lo); }
.mi-contact-head .mi-kicker { font-size: 18px; color: var(--mi-dim); }
.mi-contact-head h2 { font: 500 clamp(30px, 3.6vw, 48px)/1.2 var(--mi-display); }

.mi-contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; row-gap: 28px; align-items: start;
  grid-template-areas: "person form" "chat form";
}
.mi-contact-person { grid-area: person; }
.mi-contact-chat { grid-area: chat; }
.mi-contact-form { grid-area: form; padding: 36px 32px 28px; background: var(--mi-panel-in); border-radius: 20px; }

/* Personenkarte */
.mi-person-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border: 2px solid var(--mi-edge); border-radius: 20px; background: var(--mi-card-grad); }
.mi-person-card img { width: 112px; height: 112px; border-radius: 16px; object-fit: cover; object-position: center 20%; }
.mi-person-card b { display: block; font: 600 20px/1.3 var(--mi-display); color: var(--mi-white); }
.mi-person-role { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mi-code); letter-spacing: 1px; text-transform: uppercase; color: var(--mi-peach); }
.mi-person-reply { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 400 13px/1.4 var(--mi-code); color: var(--mi-dim); }
.mi-person-reply svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--mi-coral); }

/* Beispiel-Gespräch */
.mi-chat { list-style: none; display: grid; gap: 10px; }
.mi-chat li { position: relative; max-width: 88%; padding: 12px 16px; border-radius: 18px; font: 400 15px/1.5 var(--mi-display); box-shadow: 0 10px 30px var(--mi-shade); }
.mi-chat-us { justify-self: start; background: var(--mi-card-hi); border: 1px solid var(--mi-line); color: var(--mi-soft); border-bottom-left-radius: 6px; }
.mi-chat-you { justify-self: end; background: var(--mi-grad); color: var(--mi-edge); font-weight: 500; border-bottom-right-radius: 6px; }
/* Animiert: Blasen halten ihren Platz und tippen erst, bevor der Text erscheint */
.mi-chat.is-animated li { transition: opacity .35s ease, transform .35s ease; }
.mi-chat.is-animated li:not(.is-shown):not(.is-typing) { opacity: 0; transform: translateY(8px); }
.mi-chat.is-animated li.is-typing { color: transparent; background: transparent; border-color: transparent; box-shadow: none; }
.mi-chat.is-animated li.is-typing::after {
  content: "• • •"; position: absolute; left: 0; top: 0; padding: 8px 14px; border-radius: 18px 18px 18px 6px;
  background: var(--mi-card-hi); border: 1px solid var(--mi-line); color: var(--mi-muted); letter-spacing: 2px; animation: mi-dots 1s ease-in-out infinite;
}
.mi-chat.is-animated li.mi-chat-you.is-typing::after { left: auto; right: 0; border: 0; border-radius: 18px 18px 6px 18px; background: var(--mi-grad); color: var(--mi-edge); }
@keyframes mi-dots { 50% { opacity: .35; } }

/* Formular */
.mi-form { display: grid; gap: 14px; }
.mi-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mi-field { display: grid; gap: 6px; }
.mi-field span { font: 400 12px var(--mi-code); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mi-muted); }
.mi-field input, .mi-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--mi-card-hi); border: 1px solid var(--mi-line); color: var(--mi-white);
  font: 400 16px/1.5 var(--mi-display); transition: border-color .2s ease, box-shadow .2s ease;
}
.mi-field textarea { resize: vertical; min-height: 120px; }
.mi-field input:focus, .mi-field textarea:focus { outline: none; border-color: var(--mi-coral); box-shadow: 0 0 0 3px var(--mi-glow); }
.mi-field input[aria-invalid], .mi-field textarea[aria-invalid] { border-color: var(--mi-coral); }
.mi-field textarea::placeholder { color: var(--mi-dim); }
.mi-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mi-form-privacy { font: 400 13px/1.55 var(--mi-display); color: var(--mi-dim); }
.mi-form-privacy a, .mi-form-alt a { color: var(--mi-peach); text-decoration: underline; text-underline-offset: 3px; }
.mi-form-submit { width: 100%; margin-top: 4px; }
.mi-form-submit:disabled { opacity: .6; cursor: progress; transform: none; }
.mi-form-status { min-height: 1.5em; font: 400 14px/1.5 var(--mi-display); }
.mi-form-status.is-ok { color: var(--mi-peach); }
.mi-form-status.is-error { color: var(--mi-coral); }
.mi-form-alt { margin-top: 10px; font: 400 14px/1.5 var(--mi-display); color: var(--mi-muted); text-align: center; }

@media (max-width: 980px) {
  .mi-contact-card { padding: 36px 20px 28px; }
  .mi-contact-head { margin-bottom: 32px; }
  .mi-contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "person" "form" "chat"; }
  .mi-contact-form { padding: 24px 18px 20px; }
}
@media (max-width: 600px) {
  .mi-form-row { grid-template-columns: minmax(0, 1fr); }
  .mi-person-card { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .mi-person-card img { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .mi-chat.is-animated li { transition: none; }
}

/* Fußzeile: vier Spalten mit je zwei Gruppen, darunter Copyright */

.mi-footer { padding: 40px 0 48px; }
.mi-footer-cols { width: var(--mi-wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.mi-footer-col { display: grid; align-content: start; gap: 36px; }
.mi-footer h2 { margin-bottom: 14px; font: 500 16px/1.4 var(--mi-code); letter-spacing: 1px; text-transform: uppercase; color: var(--mi-dim); }
.mi-footer ul { list-style: none; display: grid; gap: 8px; }
.mi-footer li a { font: 500 14px/1.6 var(--mi-display); color: var(--mi-muted); text-decoration: none; transition: color .2s ease; }
.mi-footer li a:hover { color: var(--mi-peach); }
.mi-copyright {
  width: var(--mi-wrap); margin: 64px auto 0; text-align: center;
  font: 500 13px/1.6 var(--mi-code); letter-spacing: 2px; text-transform: uppercase; color: var(--mi-dim);
}
.mi-copyright a { color: var(--mi-soft); text-underline-offset: 3px; }
@media (max-width: 980px) {
  .mi-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 480px) {
  .mi-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .mi-copyright { letter-spacing: 1px; }
}

/* Unterseiten (Leistungen, Schnittstellen, Systeme, Ratgeber, Recht) */

.mi-page-section { padding: 40px 0 80px; }
.mi-page { width: var(--mi-wrap); margin: 0 auto; font: 400 18px/1.7 var(--mi-display); color: var(--mi-muted); }
.mi-page h1 { max-width: 18ch; margin: 0 0 24px; font: 500 clamp(40px, 6vw, 72px)/1.05 var(--mi-display); letter-spacing: -0.02em; }
.mi-page h2 { margin: 48px 0 12px; font: 600 22px/1.3 var(--mi-display); }
.mi-page h3 { margin: 0 0 8px; font: 600 19px/1.35 var(--mi-display); }
.mi-page p { margin: 0 0 16px; }
.mi-page a { color: var(--mi-peach); }
/* Links im Fließtext nicht nur über die Farbe erkennbar */
.mi-page p a { text-decoration: underline; text-underline-offset: 3px; }
.mi-page .mi-btn { text-decoration: none; }
.mi-page .mi-btn--primary { color: var(--mi-edge); }
.mi-page .mi-btn--ghost { color: var(--mi-white); }
.mi-page ul, .mi-page ol { margin: 0 0 20px; padding-left: 22px; }
.mi-page li { margin: 0 0 8px; }
.mi-page b, .mi-page strong { color: var(--mi-soft); font-weight: 600; }
.mi-page code { font: 400 15px var(--mi-code); color: var(--mi-peach); }
.mi-page-lead { font-size: 22px; color: var(--mi-soft); }
.mi-page-meta { margin-top: 48px; font: 400 13px var(--mi-code); letter-spacing: 1px; color: var(--mi-dim); text-transform: uppercase; }
/* Nur Fließtext bleibt bei lesbarer Zeilenlänge */
.mi-page > p, .mi-page > ul:not(.mi-cards):not(.mi-team), .mi-page > ol:not(.mi-dataflow),
.mi-page > h2, .mi-page > h3, .mi-page .mi-faq, .mi-page .mi-sources, .mi-page .mi-note, .mi-page-cta > p { max-width: var(--mi-measure); }

/* Brotkrumen */
.mi-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 28px; padding: 0; font: 400 13px var(--mi-code); letter-spacing: 1px; text-transform: uppercase; color: var(--mi-dim); }
.mi-crumbs li { margin: 0; }
.mi-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--mi-line); }
.mi-page .mi-crumbs a { color: var(--mi-muted); text-decoration: none; }
.mi-page .mi-crumbs a:hover { color: var(--mi-peach); }

/* Kurzantwort unter der H1 */
.mi-page .mi-answer { margin: 0 0 40px; padding: 0 0 0 20px; border-left: 3px solid var(--mi-coral); font-size: 21px; line-height: 1.6; color: var(--mi-soft); }

/* Datenfluss A -> B */
.mi-page .mi-dataflow { list-style: none; margin: 28px 0 36px; padding: 24px; display: grid; gap: 10px; background: var(--mi-card-grad); border: 2px solid var(--mi-edge); border-radius: 20px; }
.mi-dataflow::before {
  content: attr(data-from) "  →  " attr(data-to); display: block; margin: 0 0 8px;
  font: 600 13px var(--mi-code); letter-spacing: 2px; text-transform: uppercase; color: var(--mi-peach);
}
.mi-page .mi-dataflow li { position: relative; margin: 0; padding: 12px 16px 12px 44px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; background: var(--mi-card); border: 1px solid var(--mi-edge); border-radius: 12px; font-size: 16px; color: var(--mi-muted); }
.mi-dataflow li::before { content: "→"; position: absolute; left: 16px; top: 11px; color: var(--mi-coral); font: 600 16px var(--mi-code); }
.mi-dataflow li[data-dir="both"]::before { content: "⇄"; }
.mi-dataflow li span { margin-left: auto; font: 400 12px var(--mi-code); letter-spacing: 1px; text-transform: uppercase; color: var(--mi-dim); }

/* Karten */
.mi-page .mi-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0 36px; padding: 0; }
.mi-page .mi-cards > li { margin: 0; padding: 22px; background: var(--mi-card-grad); border: 2px solid var(--mi-edge); border-radius: 20px; }
.mi-page .mi-cards p { margin: 0; font-size: 16px; line-height: 1.6; }
.mi-page .mi-cards--links > li { padding: 0; transition: border-color .25s ease, transform .25s ease; }
.mi-page .mi-cards--links > li:hover { border-color: var(--mi-glow-edge); transform: translateY(-2px); }
.mi-page .mi-cards--links a { display: block; height: 100%; padding: 22px; color: inherit; text-decoration: none; }
.mi-cards--links h3::after { content: "\00a0→"; color: var(--mi-coral); }
.mi-auto { margin-top: 56px; }

.mi-note { margin: 28px 0; padding: 18px 22px; background: var(--mi-card); border: 1px solid var(--mi-glow-edge); border-radius: 16px; }
.mi-page .mi-note p:last-child { margin: 0; }

.mi-table { width: 100%; border-collapse: collapse; margin: 24px 0 36px; font-size: 16px; display: block; overflow-x: auto; }
.mi-table th, .mi-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--mi-edge); }
.mi-table th { color: var(--mi-white); font-weight: 600; background: var(--mi-card); }

/* FAQ als <details> */
.mi-page .mi-faq details { border-bottom: 1px solid var(--mi-edge); padding: 4px 0; }
.mi-page .mi-faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative; color: var(--mi-white); font: 600 18px/1.4 var(--mi-display); }
.mi-page .mi-faq summary::-webkit-details-marker { display: none; }
.mi-page .mi-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--mi-coral); font: 400 24px var(--mi-code); }
.mi-page .mi-faq details[open] summary::after { content: "–"; }
.mi-page .mi-faq details p { margin: 0 0 16px; }

.mi-sources { margin-top: 56px; font-size: 14px; }
.mi-page .mi-sources h2 { font-size: 16px; }
.mi-sources li { margin: 0 0 6px; }

/* Kontakt-Aufruf am Seitenende */
.mi-page-cta { margin: 64px 0 0; padding: 32px; background: var(--mi-card-grad); border: 2px solid var(--mi-glow-edge); border-radius: 24px; box-shadow: 0 10px 60px var(--mi-glow); }
.mi-page .mi-page-cta h2 { margin-top: 0; font-size: 28px; }
.mi-page-cta .mi-btn { margin-top: 8px; }

/* Team-Seite */
.mi-page .mi-team { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 36px 0; padding: 0; }
.mi-page .mi-team > li { margin: 0; background: var(--mi-card-grad); border: 2px solid var(--mi-edge); border-radius: 24px; overflow: hidden; }
.mi-team-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mi-page .mi-team h3 { margin: 22px 24px 4px; font-size: 24px; }
.mi-page .mi-team-role { margin: 0 24px 12px; font: 400 13px var(--mi-code); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mi-peach); }
.mi-page .mi-team p:last-child { margin: 0 24px 24px; font-size: 16px; }

@media (max-width: 767px) {
  .mi-page-section { padding-top: 24px; }
  .mi-page { font-size: 17px; }
  .mi-page .mi-answer { font-size: 18px; }
  .mi-page .mi-dataflow { padding: 16px; }
  .mi-dataflow li span { margin-left: 0; width: 100%; }
  .mi-page-cta { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mi-page .mi-cards--links > li { transition: none; }
}

/* Scroll-Effekte der Startseite (nur mit JavaScript und ohne "Bewegung reduzieren": Klasse .mi-fx am <html>) */

.mi-ghost { visibility: hidden; }

/* B: Software-Inseln rasten zusammen, die Grafik bleibt dafür kurz stehen */
.mi-fx .mi-diagram-wide .mi-node, .mi-fx .mi-diagram-wide .mi-pipe { transform-box: fill-box; transform-origin: center; will-change: transform; }
@media (min-width: 768px) {
  /* Abstandhalter im Fluss (nicht padding): sticky bewegt sich nur innerhalb der Inhaltsbox */
  .mi-fx .mi-pin::after { content: ""; display: block; height: 70vh; }
  .mi-fx .mi-pin > .mi-diagram { position: sticky; top: max(110px, calc(50vh - 240px)); }
}
.mi-fx .mi-diagram figcaption { transition: color .4s ease; }
.mi-fx .mi-diagram.is-joined figcaption { color: var(--mi-peach); }

/* A: Datenstrom am linken Rand */
.mi-stream { position: absolute; top: 0; left: 0; z-index: 50; pointer-events: none; overflow: visible; }
.mi-stream-track { fill: none; stroke: var(--mi-edge); stroke-width: 2; }
.mi-stream-glow { fill: none; stroke: var(--mi-glow); stroke-width: 8; stroke-linecap: round; }
.mi-stream-line { fill: none; stroke: var(--mi-coral); stroke-width: 2; stroke-linecap: round; }
.mi-stream-node { fill: var(--mi-ink); stroke: var(--mi-line); stroke-width: 2; transition: fill .3s ease, stroke .3s ease; }
.mi-stream-node.is-on { fill: var(--mi-coral); stroke: var(--mi-peach); }
.mi-stream-dot { fill: var(--mi-blush); }
.mi-stream-halo { fill: var(--mi-glow); transform-box: fill-box; transform-origin: center; animation: mi-pulse 1.6s ease-in-out infinite; }
@keyframes mi-pulse { 50% { transform: scale(1.5); opacity: .4; } }
.mi-stream-label { fill: var(--mi-peach); font: 500 11px var(--mi-code); letter-spacing: 2px; text-transform: uppercase; }
.mi-stream.is-narrow .mi-stream-label { display: none; }
.mi-stream-head { transition: opacity .3s ease; }
.mi-stream-head.is-idle { opacity: 0; }

/* C: Protokoll schreibt sich beim Scrollen */
.mi-fx .mi-log-lines li { transition: background-color .3s ease; }
.mi-fx .mi-log-lines li.is-typing { background-color: var(--mi-card-hi); }
.mi-fx .mi-log-lines li b { transition: opacity .3s ease, transform .3s ease; }
.mi-fx .mi-log-lines li:not(.is-done) b { opacity: 0; transform: scale(.6); }
.mi-fx .mi-log-lines .is-caret .mi-ghost::before { content: "▍"; visibility: visible; color: var(--mi-coral); animation: mi-blink 1s steps(1) infinite; }
@keyframes mi-blink { 50% { opacity: 0; } }