/* ============================================================
   maniac developers GmbH — Web-Schicht
   Ergänzt maniac-ui.css um alles, was eine Marketingseite braucht.
   maniac-ui.css MUSS vorher geladen werden: alle --ms-* Tokens
   kommen von dort und werden hier niemals neu definiert.
   ============================================================ */

/* ============================================================
   Layout: schmale Topbar (wie im Handbuch) über einem ruhigen
   Band-Raster — jede Sektion eine volle Breite mit innerem
   1200px-Container. Signatur: das Richtungs-Diagramm aus dem
   Handbuch als Hero-Grafik.
   Farb- und Schrift-Tokens 1:1 aus maniac-ui.css (--ms-*).
   --web-* ergänzt nur, was eine Marketingseite zusätzlich braucht.
   ============================================================ */

:root {

  /* --- Ergänzungen nur für die Marketingseite --- */
  --web-h1:      clamp(34px, 5vw, 56px);
  --web-h2:      clamp(26px, 3.2vw, 36px);
  --web-h3:      21px;
  --web-lead:    clamp(17px, 1.5vw, 20px);
  --web-body:    17px;
  --web-eyebrow: 13px;
  --web-band:    clamp(44px, 6vw, 72px);  /* vertikaler Abstand je Band: Handy 44, Desktop höchstens 72 */
  --web-max:     1200px;
  --web-navy-bg: #152C3D;                  /* dunkle Bänder, in beiden Modi dunkel */
  --web-navy-fg: #E6EEF2;
  --web-navy-muted: #9DB2C0;
  --web-navy-line:  #2A4255;
  --web-logo-m:  #152C3D;                  /* Binnenform der Bildmarke */
  --web-grid:    rgba(21, 44, 61, .06);

  /* Wärmeschicht für die Bänder, in denen Menschen vorkommen.
     Abgeleitet aus dem Markengrün, damit nichts Markenfremdes dazukommt.
     Greift nicht in --ms-* ein, das Designsystem bleibt unberührt. */
  --web-warm-bg:      #F1F6F2;
  --web-warm-surface: #FFFFFF;
  --web-warm-line:    #D2E3D6;
  --web-warm-ink:     #0D7A23;
  --web-star:         #E8930C;   /* Bewertungssterne: Konvention, nicht Marke */
  --web-r-soft:       14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --web-navy-bg: #0C161D;
    --web-navy-line: #22394A;
    --web-logo-m: #F5F7FA;
    --web-grid: rgba(230, 238, 242, .05);
    --web-warm-bg:      #13211A;
    --web-warm-surface: #18291E;
    --web-warm-line:    #27412E;
    --web-warm-ink:     #4FBF5E;
    --web-star:         #FFC24D;
  }
}

:root[data-theme="dark"] {
  --web-navy-bg: #0C161D;
  --web-navy-line: #22394A;
  --web-logo-m: #F5F7FA;
  --web-grid: rgba(230, 238, 242, .05);
  --web-warm-bg:      #13211A;
  --web-warm-surface: #18291E;
  --web-warm-line:    #27412E;
  --web-warm-ink:     #4FBF5E;
  --web-star:         #FFC24D;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  font-size: var(--web-body);
  line-height: var(--ms-lh-ui);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--ms-surface);
}

h1, h2, h3, h4 {
  font-family: var(--ms-font-head);
  font-weight: 600;
  line-height: var(--ms-lh-tight);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--ms-accent); text-underline-offset: 2px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
  border-radius: var(--ms-r-control);
}

/* ---------- Bänder & Container ---------- */

.band { width: 100%; }
.band--alt     { background: var(--ms-surface); border-block: 1px solid var(--ms-border); }
.band--green {
  position: relative;
  background-image:
    linear-gradient(118deg, rgba(10, 107, 28, .95) 0%, rgba(16, 138, 40, .90) 55%, rgba(20, 168, 48, .86) 100%),
    url("../img/band-hintergrund.webp");
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  border: none;
}
.band--green .trust__value { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.band--green .trust__label { color: rgba(255, 255, 255, .92); }
.band--green .wrap { padding-block: var(--ms-7); }
.band--warm    { background: var(--web-warm-bg); border-block: 1px solid var(--web-warm-line); }
.band--warm .eyebrow { color: var(--web-warm-ink); }
.band--navy    { background: var(--web-navy-bg); color: var(--web-navy-fg); }
.band--navy h2, .band--navy h3 { color: var(--web-navy-fg); }

.wrap {
  max-width: var(--web-max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--web-band);
}
.wrap--tight { padding-block: var(--ms-6); }

.eyebrow {
  font-family: var(--ms-font-head);
  font-size: var(--web-eyebrow);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ms-accent);
  margin-bottom: var(--ms-3);
}
.band--navy .eyebrow { color: var(--ms-brand-blue); }

.h2 { font-size: var(--web-h2); }
.lead {
  font-size: var(--web-lead);
  line-height: var(--ms-lh-doc);
  color: var(--ms-text-muted);
  max-width: 62ch;
}
.band--navy .lead { color: var(--web-navy-muted); }

.section-head { display: grid; gap: var(--ms-4); margin-bottom: var(--ms-7); }

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--ms-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ms-border);
}
.topbar__inner {
  max-width: var(--web-max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--ms-3);
  display: flex; align-items: center; gap: var(--ms-5);
}

.lockup { display: flex; align-items: center; gap: var(--ms-2); text-decoration: none; color: inherit; flex: none; }
.lockup svg { width: 30px; height: 30px; }
.lockup__name {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: 19px; letter-spacing: .01em; line-height: 1;
}
.lockup__sub {
  font-family: var(--ms-font-head); font-weight: 500;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-text-muted); line-height: 1; margin-top: 3px;
}

.mainnav { display: flex; gap: var(--ms-5); margin-left: auto; }
.mainnav a {
  white-space: nowrap;
  color: var(--ms-text-muted); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding-block: var(--ms-2);
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ms-text); }
.mainnav a[aria-current] { color: var(--ms-text); border-bottom-color: var(--ms-accent-visual); }

/* ---------- Hamburger / Mobile-Nav ---------- */
.navtoggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 36px; height: 36px; padding: 0;
  background: none; border: none; cursor: pointer; border-radius: 4px;
  color: var(--ms-text);
}
.navtoggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mega-Menü ---------- */

.hasmenu { position: relative; display: flex; }
.hasmenu > a { display: inline-flex; align-items: center; gap: var(--ms-1); }
.hasmenu > a svg { width: 13px; height: 13px; transition: transform .15s ease; }
.hasmenu:hover > a svg, .hasmenu:focus-within > a svg { transform: rotate(180deg); }

.megamenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: var(--ms-3);
  width: min(900px, calc(100vw - 32px));
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
}
.hasmenu:hover .megamenu, .hasmenu:focus-within .megamenu { opacity: 1; visibility: visible; }

.megamenu__card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  box-shadow: var(--ms-shadow-pop);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-5);
  /* Spalten so breit wie ihr längster Eintrag, damit kein Text an die Nachbarspalte stößt */
  grid-template-columns: repeat(4, max-content) minmax(0, 1fr);
}
.megamenu__all {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ms-border);
  padding-top: var(--ms-4); margin-top: calc(var(--ms-2) * -1);
}
.megamenu .megamenu__all a { font-weight: 600; color: var(--ms-accent); }
.megamenu--klein { width: min(520px, calc(100vw - 32px)); }
.megamenu--plugins { width: min(480px, calc(100vw - 32px)); }
.megamenu--plugins .megamenu__card { grid-template-columns: minmax(0, 1fr); gap: var(--ms-4); }
.megamenu--plugins .megacol { gap: var(--ms-1); }
.megamenu a.megaplugin { display: flex; gap: var(--ms-3); align-items: flex-start; padding: 8px; margin-inline: -8px; }
.megaplugin .plugin__icon { width: 36px; height: 36px; }
.megaplugin .plugin__icon svg { width: 21px; height: 21px; }
.megaplugin__text { display: grid; gap: 2px; min-width: 0; flex: 1; white-space: normal; }
.megaplugin__name { font-weight: 600; }
.megaplugin__zeile { font-size: 13.5px; line-height: 1.4; color: var(--ms-text-muted); }
.megamenu--klein .megamenu__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Das letzte Menü (Über uns) steht ganz rechts: nach links aufklappen, sonst steht es
   über den Fensterrand und erzeugt seitliches Scrollen. */
.mainnav > .hasmenu:last-child .megamenu { left: auto; right: 0; transform: none; }
/* Knapp über der Umschaltbreite reicht der Platz nicht für alles: E-Mail- und
   Telefonsymbol entfallen dort (Telefon steht weiter in Fußzeile und Kontaktbereich). */
@media (min-width: 1001px) and (max-width: 1240px) {
  .topbar__actions .topbar__icon { display: none; }
  .mainnav { gap: var(--ms-4); }
}
/* Noch knapper: Der Punkt „maniacSeller“ entfällt, das Logo führt ebenfalls zur Startseite. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .mainnav > a:first-child { display: none; }
}
.megacol { display: grid; gap: var(--ms-2); align-content: start; min-width: 0; }
.megacol .navtitel {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ms-text-faint); font-weight: 600; margin-bottom: var(--ms-1);
}
.megamenu a {
  color: var(--ms-text); text-decoration: none;
  font-size: 15px; font-weight: 400; line-height: 1.3;
  padding: 5px 6px; margin-inline: -6px;
  border-bottom: none; border-radius: var(--ms-r-control);
}
.megamenu a:hover { background: var(--ms-accent-weak); color: var(--ms-accent); }

.megafeature {
  background: var(--ms-accent-weak);
  border: 1px solid var(--ms-info-line);
  border-radius: var(--ms-r-card);
  padding: var(--ms-4);
  display: grid; gap: var(--ms-2); align-content: start;
  margin: calc(var(--ms-5) * -1 + var(--ms-2)) calc(var(--ms-5) * -1 + var(--ms-2)) calc(var(--ms-5) * -1 + var(--ms-2)) 0;
}
.megafeature .navtitel {
  font-family: var(--ms-font-head); font-size: 17px; font-weight: 600;
  color: var(--ms-text); text-transform: none; letter-spacing: 0; margin: 0;
}
.megafeature p { font-size: 14px; color: var(--ms-text-muted); line-height: 1.45; }
.megamenu .megafeature a {
  font-weight: 600; color: var(--ms-accent); padding: 0; margin: 0;
}
.megamenu .megafeature a:hover { background: none; text-decoration: underline; }

.topbar__actions { display: flex; align-items: center; gap: var(--ms-3); flex: none; }

.phone {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 500;
  color: var(--ms-text); text-decoration: none;
}
.phone svg { width: 15px; height: 15px; color: var(--ms-accent-visual); }

.topbar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ms-action); text-decoration: none;
  transition: color .15s, background .15s;
}
.topbar__icon:hover { color: var(--ms-action-hover); background: var(--ms-surface-2); }
.topbar__icon svg { width: 18px; height: 18px; }
/* Termin-Symbol ersetzt mobil den Knopf „Termin buchen“, deshalb in der Knopffarbe */
.topbar__icon--termin { display: none; background: var(--ms-action); color: #FFF; }
.topbar__icon--termin:hover { background: var(--ms-action-hover); color: #FFF; }

/* ---------- Buttons ---------- */

.btn {
  font: inherit; font-weight: 600; font-family: var(--ms-font-body);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-2);
  text-align: center;
  padding: 11px var(--ms-5);
  border-radius: var(--ms-r-control);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ms-action); color: #FFF; }
.btn--primary:hover { background: var(--ms-action-hover); }
.btn--secondary {
  background: var(--ms-surface); color: var(--ms-text);
  border-color: var(--ms-border-strong);
}
.btn--secondary:hover { border-color: var(--ms-text-muted); }
.btn--onnavy {
  background: transparent; color: var(--web-navy-fg);
  border-color: var(--web-navy-line);
}
.btn--onnavy:hover { border-color: var(--ms-brand-blue); }
.btn--sm { padding: 8px var(--ms-4); font-size: 15px; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--web-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--web-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero__grid {
  display: grid; gap: var(--ms-8);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
}
.hero h1 { font-size: var(--web-h1); letter-spacing: -.01em; }
.hero h1 .accent { color: var(--ms-accent); }
/* Startseite: Zeilen füllen statt ausgleichen, „Sage 100“ in Markengrün und nie getrennt */
.hero h1.hero__h1--fuellen { text-wrap: wrap; }
.hero h1 .accent--gruen { color: var(--ms-brand-green); white-space: nowrap; }
.hero__sub { margin-top: var(--ms-5); }
.hero__sub .accent { color: var(--ms-accent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--ms-3); margin-top: var(--ms-6); }
.hero__grid--grafik { align-items: start; }
/* Grafik 10 % größer: wächst nach links in den Spaltenabstand, die Textspalte bleibt gleich breit */
@media (min-width: 1001px) {
  .hero__grid--grafik .datenfluss { width: 110%; margin-left: -10%; }
}
.hero__lead-col { display: flex; align-items: center; }
.hero__lead-col .lead { margin: 0; }
.hero__note {
  margin-top: var(--ms-3); font-size: 14px; color: var(--ms-text-faint);
}

/* ---------- Trust-Leiste ---------- */

.trust {
  display: grid; gap: var(--ms-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust__item { display: grid; gap: 2px; min-width: 0; }
.trust__value {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: 23px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.trust__label { font-size: 14px; color: var(--ms-text-muted); }
.trust__value a[href^="tel:"] { white-space: nowrap; }
/* Kontaktseite: Telefon und E-Mail-Adressen sind lang — auf dem Handy untereinander */
@media (max-width: 460px) { .trust.trust--kontakt { grid-template-columns: minmax(0, 1fr); } }
.stars { color: var(--web-star); letter-spacing: .08em; font-size: 15px; }

/* ---------- Richtungs-Diagramm ---------- */

.flow {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-5);
  min-width: 0;
}
.flowhost { max-width: 560px; margin: 0 auto var(--ms-6); }
.flow__cap {
  font-family: var(--ms-font-head); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ms-text-muted); margin-bottom: var(--ms-4);
}
.flow svg { width: 100%; height: auto; display: block; }

/* ---------- Richtungstabelle ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--ms-border); border-radius: var(--ms-r-card); background: var(--ms-surface); }
table.dirs { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 620px; }
table.dirs th {
  text-align: left; font-family: var(--ms-font-head); font-weight: 600;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ms-text-muted); background: var(--ms-surface-2);
  padding: var(--ms-3) var(--ms-4);
  border-bottom: 1px solid var(--ms-border);
}
table.dirs td { padding: var(--ms-4); border-bottom: 1px solid var(--ms-border); vertical-align: top; }
table.dirs tr:last-child td { border-bottom: none; }
.dir {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  font-family: var(--ms-font-head); font-weight: 600; font-size: 15px;
  white-space: nowrap;
}
.dir svg { width: 14px; height: 14px; color: var(--ms-accent-visual); flex: none; }

/* ---------- Karten ---------- */

.cards { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Vier Karten: zwei mal zwei statt einer einzelnen in der zweiten Reihe */
@media (min-width: 1001px) { .cards--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-3);
  align-content: start;
  min-width: 0;
}
.card--quiet { background: transparent; border-color: transparent; padding-inline: 0; }
.card h3 { font-size: var(--web-h3); }
.card p { color: var(--ms-text-muted); line-height: var(--ms-lh-doc); }
.card__icon {
  width: 38px; height: 38px; border-radius: var(--ms-r-control);
  background: var(--ms-accent-weak); color: var(--ms-accent);
  display: grid; place-items: center;
}
.card__icon svg { width: 20px; height: 20px; }

/* ---------- Kanal-Chips ---------- */

.channels { display: grid; gap: var(--ms-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.channel { display: grid; gap: var(--ms-3); align-content: start; min-width: 0; }
.channel h3 {
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ms-text-muted); font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--ms-2); }
.channel__mehr { font-size: 14px; color: var(--ms-text-muted); }
.chip {
  font-family: var(--ms-font-head); font-weight: 600; font-size: 15px;
  padding: 5px var(--ms-3);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-control);
  background: var(--ms-surface);
  color: var(--ms-text);
}
.chip--lead { border-color: var(--ms-accent-visual); color: var(--ms-accent); }
/* Echte Logos nur für die Shopsysteme; Wortmarke folgt der Textfarbe (hell/dunkel). */
.chip--logo { display: inline-flex; align-items: center; padding: 9px var(--ms-3); }
.chip--logo svg { display: block; height: 24px; width: auto; }

/* ---------- Produktbild ---------- */

.shot {
  display: grid; gap: var(--ms-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
}
.shot__frame {
  border: 1px solid var(--web-navy-line);
  border-radius: var(--ms-r-card);
  background: #0C161D;
  overflow: hidden;
  box-shadow: var(--ms-shadow-pop);
  min-width: 0;
}
.shot__bar {
  display: flex; align-items: center; gap: var(--ms-2);
  padding: var(--ms-2) var(--ms-3);
  border-bottom: 1px solid var(--web-navy-line);
  font-size: 12px; color: var(--web-navy-muted);
  font-family: var(--ms-font-head); letter-spacing: .04em;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--web-navy-line); }
.shot__body { padding: var(--ms-4); }
.shot__body svg { width: 100%; height: auto; display: block; }
.placeholder-note {
  margin-top: var(--ms-3); font-size: 14px; color: var(--web-navy-muted);
}

/* ---------- Ablauf ---------- */

.steps { display: grid; gap: var(--ms-5); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.step {
  display: grid; gap: var(--ms-3); align-content: start; min-width: 0;
  padding-top: var(--ms-4);
  border-top: 2px solid var(--web-navy-line);
}
.step__n {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: 14px; letter-spacing: .08em;
  color: var(--ms-brand-blue);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--web-h3); }
.step p { color: var(--web-navy-muted); line-height: var(--ms-lh-doc); font-size: 16px; }

/* ---------- CTA-Band ---------- */

/* Einspaltig: der Terminkalender braucht die volle Breite.
   In schmalen Spalten rechnet der TidyCal-Einbau seine Breite falsch
   und bricht das Monatsraster auf — in Firefox sichtbar, in Chrome nicht. */
.cta {
  display: grid; gap: var(--ms-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.cta > div:first-child { max-width: 70ch; }
.cta__card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-4);
  box-shadow: var(--ms-shadow-card);
  min-width: 0;
  overflow: hidden;          /* der Einbau darf nicht über die Rundung hinaus */
}
.cta__card h3 { font-size: var(--web-h3); }
.slots { display: grid; gap: var(--ms-2); }
.slot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ms-3);
  padding: var(--ms-3) var(--ms-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-control);
  background: var(--ms-bg);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
.slot span:last-child { color: var(--ms-text-muted); font-size: 14px; }
.contact-lines { display: flex; flex-wrap: wrap; gap: var(--ms-3) var(--ms-6); margin-top: var(--ms-5); }
.contact-line { display: flex; gap: var(--ms-3); align-items: baseline; font-size: 16px; }
.contact-line b { font-family: var(--ms-font-head); font-weight: 600; color: var(--ms-text-muted); }
.contact-line span { font-variant-numeric: tabular-nums; }
.contact-line a { color: var(--ms-text); text-decoration: none; border-bottom: 1px solid var(--ms-border-strong); }
.contact-line a:hover { color: var(--ms-accent); border-bottom-color: var(--ms-accent); }

/* ---------- Wissen ---------- */

.knowledge { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcard {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-left: 3px solid var(--ms-accent-visual);
  border-radius: 0 var(--ms-r-card) var(--ms-r-card) 0;
  padding: var(--ms-5);
  display: grid; gap: var(--ms-2); align-content: start;
  text-decoration: none; color: inherit;
  min-width: 0;
}
.kcard:hover { border-left-color: var(--ms-action); }
.kcard h3 { font-size: var(--web-h3); }
.kcard p { color: var(--ms-text-muted); font-size: 16px; line-height: var(--ms-lh-doc); }
.kcard__more { font-size: 15px; font-weight: 600; color: var(--ms-accent); }

/* ---------- Footer ---------- */

.footer { background: var(--web-navy-bg); color: var(--web-navy-muted); border-top: 1px solid var(--web-navy-line); }
.footer__grid { display: grid; gap: var(--ms-7); grid-template-columns: 1.3fr 1fr 1fr 1fr 1.15fr; }
.footer .navtitel {
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--web-navy-fg); margin-bottom: var(--ms-4);
}
.footer ul { display: grid; gap: var(--ms-2); }
.footer a { color: var(--web-navy-muted); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--web-navy-fg); }
.footer__legal {
  border-top: 1px solid var(--web-navy-line);
  padding-block: var(--ms-5);
  font-size: 14px;
  display: flex; flex-wrap: wrap; gap: var(--ms-4); justify-content: space-between;
}
.footer .lockup__sub { color: var(--web-navy-muted); }
.footer .lockup__name { color: var(--web-navy-fg); }

/* ---------- Plugin-Band ---------- */

.plugins { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plugin {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-2); align-content: start;
  text-decoration: none; color: inherit; min-width: 0;
  transition: border-color .15s ease;
}
.plugin:hover { border-color: var(--ms-accent-visual); }
.plugin__tag {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ms-text-faint);
}
.plugin h3 { font-size: var(--web-h3); }
.plugin p { font-size: 16px; color: var(--ms-text-muted); line-height: var(--ms-lh-doc); }
.pluginhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--ms-5); flex-wrap: wrap; margin-bottom: var(--ms-6);
}

/* Plugin-Karten (Startseite, Plugin-Übersicht, „Weitere Plugins“) */
.plugins--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plugins--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .plugins--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .plugins--drei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px)  { .plugins--vier { grid-template-columns: minmax(0, 1fr); } }
/* Fünf Karten: drei oben, zwei breitere unten — keine einzelne Karte in der letzten Reihe */
.plugins--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plugins--fuenf .plugin { grid-column: span 2; }
.plugins--fuenf .plugin:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1100px) {
  .plugins--fuenf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugins--fuenf .plugin, .plugins--fuenf .plugin:nth-child(n+4) { grid-column: auto; }
  .plugins--fuenf .plugin:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .plugins--fuenf { grid-template-columns: minmax(0, 1fr); } }
.plugins--vier .plugin, .plugins--drei .plugin, .plugins--fuenf .plugin { display: flex; flex-direction: column; gap: var(--ms-2); }
.plugin__icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--ms-r-control);
  background: var(--ms-accent-weak); color: var(--ms-accent);
  display: grid; place-items: center;
}
.plugin__icon svg { width: 24px; height: 24px; }
.plugin .plugin__icon { margin-bottom: var(--ms-2); }
.plugin__preis { margin-top: auto; padding-top: var(--ms-3); font-size: 14.5px; font-weight: 600; color: var(--ms-text); }
.plugin__kombi { display: block; font-weight: 400; color: var(--ms-text-muted); }
.plugins__paket {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-2) var(--ms-3);
  margin: var(--ms-6) 0 0; color: var(--ms-text-muted);
}
.plugins__paket b { color: var(--ms-text); }
/* Kopf einer Plugin-Seite: Icon neben der Überschrift */
.pluginkopf { display: flex; gap: var(--ms-5); align-items: flex-start; }
.plugin__icon--gross { width: 64px; height: 64px; border-radius: var(--ms-r-card); margin-top: 6px; }
.plugin__icon--gross svg { width: 36px; height: 36px; }
@media (max-width: 600px) {
  .pluginkopf { flex-direction: column; gap: var(--ms-3); }
  .plugin__icon--gross { width: 52px; height: 52px; }
  .plugin__icon--gross svg { width: 30px; height: 30px; }
}

/* ---------- Vertrauensabzeichen im Hero ---------- */

.herobadges { display: flex; flex-wrap: wrap; gap: var(--ms-2); margin-bottom: var(--ms-4); }
.hbadge {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  font-size: 14px; font-weight: 600;
  padding: 5px var(--ms-3);
  border-radius: var(--ms-r-pill);
  border: 1px solid transparent;
  text-decoration: none;
}
.hbadge svg { width: 15px; height: 15px; flex: none; }
.hbadge--cert   { background: var(--ms-accent-weak); color: var(--ms-accent); border-color: var(--ms-info-line); }
.hbadge--rating { background: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-border-strong); }
.hbadge--rating .stars { font-size: 13px; letter-spacing: .06em; color: var(--web-star); }
.hbadge--rating b { font-variant-numeric: tabular-nums; }
.hbadge--rating span { font-weight: 500; color: var(--ms-text-muted); }

/* ---------- Cloud-Grafik ---------- */

.cloudart { min-width: 0; }
.cloudart img { width: 100%; height: auto; display: block; }
.cloudart img.cloudart__dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cloudart img.cloudart__light { display: none; }
  :root:not([data-theme="light"]) .cloudart img.cloudart__dark  { display: block; }
}
:root[data-theme="dark"] .cloudart img.cloudart__light { display: none; }
:root[data-theme="dark"] .cloudart img.cloudart__dark  { display: block; }
.cloudart__cap {
  margin-top: var(--ms-3); font-size: 14px; color: var(--ms-text-muted); text-align: center;
}

/* ---------- Uebernommener Inhalt ---------- */

.inhalt { max-width: 72ch; font-size: var(--web-body); line-height: var(--ms-lh-doc); }
.inhalt > * + * { margin-top: var(--ms-4); }
.inhalt h2 { font-size: var(--web-h2); margin-top: var(--ms-7); }
.inhalt h3 { font-size: var(--web-h3); margin-top: var(--ms-6); }
.inhalt h4 { font-size: var(--ms-doc-h4); margin-top: var(--ms-5); }
.inhalt p  { color: var(--ms-text); }
.inhalt ul, .inhalt ol { padding-left: var(--ms-5); display: grid; gap: var(--ms-2); }
.inhalt ul { list-style: disc; }
.inhalt ol { list-style: decimal; }
.inhalt li::marker { color: var(--ms-accent-visual); }
.inhalt img { max-width: 100%; height: auto; border-radius: var(--ms-r-card); border: 1px solid var(--ms-border); }
.inhalt strong, .inhalt b { font-weight: 600; }
.inhalt blockquote {
  border-left: 3px solid var(--ms-accent-visual);
  padding-left: var(--ms-5); color: var(--ms-text-muted);
}
.inhalt table { width: 100%; border-collapse: collapse; font-size: 16px; }
.inhalt th, .inhalt td { padding: var(--ms-3); border-bottom: 1px solid var(--ms-border); text-align: left; vertical-align: top; }
.inhalt th { background: var(--ms-surface-2); font-family: var(--ms-font-head); font-weight: 600; }
.inhalt hr { border: 0; border-top: 1px solid var(--ms-border); margin-block: var(--ms-6); }

.stand { font-size: 15px; color: var(--ms-text-faint); margin-top: var(--ms-3); }

.rohbau {
  border-left: 3px solid var(--ms-warn-ink);
  background: var(--ms-warn-bg); color: var(--ms-warn-ink);
  padding: var(--ms-4) var(--ms-5);
  border-radius: 0 var(--ms-r-card) var(--ms-r-card) 0;
  font-size: 15px; line-height: var(--ms-lh-doc);
  margin-bottom: var(--ms-6);
}

/* Schließt direkt an den Seitenkopf (.phero) an, gleicher Hintergrund — kein zweiter Bandabstand. */
.band--inhalt > .wrap { padding-top: var(--ms-4); }
.inhalt > :first-child { margin-top: 0; }
.inhaltslayout {
  display: grid; gap: var(--ms-8);
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
.beiwerk { display: grid; gap: var(--ms-4); position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); min-width: 0; }
.beiwerk__box {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-3);
}
.beiwerk__box h2 { font-size: var(--web-h3); }
.beiwerk__box p { font-size: 15px; color: var(--ms-text-muted); line-height: var(--ms-lh-doc); }
.beiwerk__box--still { background: var(--ms-surface-2); }
.beiwerk__ruf { font-size: 15px; }
.beiwerk__ruf a { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .inhaltslayout { grid-template-columns: minmax(0, 1fr); }
  .beiwerk { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .beiwerk { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Blogliste ---------- */

.beitraege { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beitrag {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-3); align-content: start;
  text-decoration: none; color: inherit; min-width: 0;
  transition: border-color .12s ease;
}
.beitrag:hover { border-color: var(--ms-accent-visual); }
.beitrag { padding: 0; overflow: hidden; }
.beitrag > :not(.beitrag__bild) { margin-inline: var(--ms-5); }
.beitrag > :first-child:not(.beitrag__bild) { margin-top: var(--ms-5); }
.beitrag > :last-child { margin-bottom: var(--ms-5); }
.beitrag__bild {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ms-surface-2); border-bottom: 1px solid var(--ms-border);
}
.beitrag__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitrag__datum { font-size: 14px; color: var(--ms-text-faint); font-variant-numeric: tabular-nums; }
.beitrag h2 { font-size: var(--web-h3); text-wrap: balance; }
.beitrag p { font-size: 16px; color: var(--ms-text-muted); line-height: var(--ms-lh-doc); }
.beitrag__mehr { font-size: 15px; font-weight: 600; color: var(--ms-accent); margin-top: auto; }

@media (max-width: 900px) { .beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .beitraege { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formulare ---------- */

.formular { display: grid; gap: var(--ms-5); max-width: none; }
.feldreihe { display: grid; gap: var(--ms-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld { display: grid; gap: var(--ms-2); min-width: 0; align-content: start; }
.feld > label { font-size: 15px; font-weight: 600; font-family: var(--ms-font-head); }
.feld .pflicht { color: var(--ms-danger-ink); }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 16px;
  color: var(--ms-text); background: var(--ms-surface);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-r-control);
  padding: 10px var(--ms-3);
  width: 100%;
}
.feld input, .feld select { height: 44px; }
.feld select {
  appearance: none;
  padding-right: var(--ms-6);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7080' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ms-3) center;
  background-size: 16px;
  cursor: pointer;
}
.feld textarea { min-height: 150px; resize: vertical; line-height: var(--ms-lh-doc); }
.feld input:hover, .feld textarea:hover { border-color: var(--ms-text-muted); }
.feld--fehler input, .feld--fehler textarea { border-color: var(--ms-danger-ink); }
.feld__hinweis { font-size: 14px; color: var(--ms-text-muted); }
.feld__fehler { font-size: 14px; color: var(--ms-danger-ink); font-weight: 500; }

.feld__beschriftung { font-size: 15px; font-weight: 600; font-family: var(--ms-font-head); }
.wahlreihe { display: flex; flex-wrap: wrap; gap: var(--ms-2); align-items: center; min-height: 44px; }
.wahlchip {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  height: 44px; padding-inline: var(--ms-4);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-r-control);
  background: var(--ms-surface);
  font-size: 15px; cursor: pointer;
}
.wahlchip:has(input:checked) { border-color: var(--ms-accent-visual); background: var(--ms-accent-weak); color: var(--ms-accent); font-weight: 600; }
.wahlchip input { width: 17px; height: 17px; accent-color: var(--ms-action); }

.zustimmung { display: flex; gap: var(--ms-3); align-items: flex-start; font-size: 15px; line-height: var(--ms-lh-doc); }
.zustimmung input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--ms-action); }

.meldung {
  border-left: 3px solid var(--ms-info-ink);
  background: var(--ms-info-bg);
  padding: var(--ms-4) var(--ms-5);
  border-radius: 0 var(--ms-r-card) var(--ms-r-card) 0;
  line-height: var(--ms-lh-doc);
}
.meldung--erfolg { border-left-color: var(--ms-success-ink); background: var(--ms-success-bg); color: var(--ms-success-ink); }
.meldung--fehler { border-left-color: var(--ms-danger-ink); background: var(--ms-danger-bg); color: var(--ms-danger-ink); }
.meldung h3 { font-size: var(--web-h3); margin-bottom: var(--ms-2); }

/* ---------- Preiskonfigurator ---------- */

.konf { display: grid; gap: var(--ms-7); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.konf__module { display: grid; gap: var(--ms-2); }
.modul {
  display: flex; gap: var(--ms-4); align-items: flex-start;
  padding: var(--ms-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: var(--ms-surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.modul:hover { border-color: var(--ms-border-strong); }
.modul:has(input:checked) { border-color: var(--ms-accent-visual); background: var(--ms-accent-weak); }
.modul input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--ms-action); }
.modul__text { flex: 1; min-width: 0; }
.modul__name { font-family: var(--ms-font-head); font-weight: 600; font-size: 17px; display: block; }
.modul__info { font-size: 15px; color: var(--ms-text-muted); line-height: var(--ms-lh-doc); margin-top: 2px; }
.modul__preis { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.umfang { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ms-2); }
.umfang legend { padding: 0; }
.umfang__wahl {
  display: flex; gap: var(--ms-4); align-items: flex-start;
  padding: var(--ms-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: var(--ms-surface);
  cursor: pointer;
}
.umfang__wahl:has(input:checked) { border-color: var(--ms-accent-visual); background: var(--ms-accent-weak); }
.umfang__wahl input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--ms-action); }
.umfang__wahl b { font-family: var(--ms-font-head); font-weight: 600; font-size: 17px; display: block; }

.modul { cursor: default; }
.modul__name { cursor: pointer; }
.modul--fest { border-color: var(--ms-border-strong); background: var(--ms-surface-2); }
.modul--aus { opacity: .4; }
.modul--aus .modul__name { cursor: default; }
.modul__info a { font-weight: 600; white-space: nowrap; }

.konf__summe {
  position: sticky; top: calc(76px + env(safe-area-inset-top, 0px));
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-4);
  min-width: 0;
}
.zahlweise { display: flex; gap: 2px; padding: 3px; background: var(--ms-surface-2); border-radius: var(--ms-r-control); }
.zahlweise button {
  flex: 1; font: inherit; font-size: 15px; font-weight: 600; font-family: var(--ms-font-head);
  padding: 7px var(--ms-2); border: 0; border-radius: 3px;
  background: none; color: var(--ms-text-muted); cursor: pointer;
}
/* Aktive Zahlweise deutlich: grün wie die Häkchen der gewählten Module */
.zahlweise button[aria-pressed="true"] { background: var(--ms-action); color: #FFF; box-shadow: var(--ms-shadow-card); }
.zahlweise button[aria-pressed="false"]:hover { color: var(--ms-text); }

.summe__betrag {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: clamp(30px, 4vw, 40px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.summe__einheit { font-size: 17px; font-weight: 500; color: var(--ms-text-muted); }
.summe__zeilen { display: grid; gap: var(--ms-2); font-size: 15px; border-top: 1px solid var(--ms-border); padding-top: var(--ms-4); }
.summe__zeile { display: flex; justify-content: space-between; gap: var(--ms-3); }
.summe__zeile span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe__zeile--gesamt { font-weight: 700; border-top: 1px solid var(--ms-border); padding-top: var(--ms-2); margin-top: var(--ms-1); }
.summe__fuss { font-size: 14px; color: var(--ms-text-faint); line-height: var(--ms-lh-doc); }

/* Rabatt/Bundle: alter Preis durchgestrichen, neuer Preis grün */
.modul-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-2); }
/* Im Paar ist die Karte schmal: Preis unten unter dem Text, in beiden Karten auf gleicher Höhe */
.modul-paar .modul { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: var(--ms-4); row-gap: var(--ms-3); }
.modul-paar .modul input { grid-row: 1 / 3; }
.modul-paar .modul__preis { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: var(--ms-2); }
.modul-paar .modul__preis .preis__alt { display: inline; }
.modul-paar .modul__preis .preis__alt[hidden] { display: none; }
@media (max-width: 600px) { .modul-paar { grid-template-columns: minmax(0, 1fr); } }
/* Plugins: drei nebeneinander, solange der Block breit genug ist */
.konf .plugins { container-type: inline-size; }
.modul-paar--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 560px) { .modul-paar--drei { grid-template-columns: minmax(0, 1fr); } }
/* Vier Plugins: zwei mal zwei */
.modul-paar--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (max-width: 560px) { .modul-paar--vier { grid-template-columns: minmax(0, 1fr); } }
/* Bundle gewählt: beide Karten verschmelzen zu einer grünen Fläche */
.modul-paar__titel { grid-column: 1 / -1; margin: 0; font-family: var(--ms-font-head); font-weight: 600; font-size: 15px; color: var(--ms-success-ink); display: flex; align-items: center; gap: var(--ms-2); }
.modul-paar__titel[hidden] { display: none; }
.modul-paar__titel::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.modul-paar--an {
  gap: 0; row-gap: var(--ms-2); padding: var(--ms-3) var(--ms-3) 0;
  border: 2px solid var(--ms-success-ink); border-radius: var(--ms-r-card);
  background: var(--ms-success-bg);
  transition: background-color .15s ease, border-color .15s ease;
}
.modul-paar--an .modul,
.modul-paar--an .modul:has(input:checked) { border-color: transparent; background: transparent; border-radius: 0; padding-left: var(--ms-2); padding-right: var(--ms-2); }
.modul-paar--an .modul + .modul { border-left: 1px dashed var(--ms-success-line); padding-left: var(--ms-4); }
@container (min-width: 561px) {
  .modul-paar--vier.modul-paar--an .modul:nth-of-type(odd) { border-left: 0; padding-left: var(--ms-2); }
  .modul-paar--vier.modul-paar--an .modul:nth-of-type(n+3) { border-top: 1px dashed var(--ms-success-line); }
}
@container (max-width: 560px) {
  .modul-paar--vier.modul-paar--an .modul + .modul,
  .modul-paar--drei.modul-paar--an .modul + .modul { border-left: 0; border-top: 1px dashed var(--ms-success-line); padding-left: var(--ms-2); }
}
@media (max-width: 600px) {
  .modul-paar--an .modul + .modul { border-left: 0; border-top: 1px dashed var(--ms-success-line); padding-left: var(--ms-2); }
}
.modul__bundle { display: flex; width: fit-content; margin: 4px 0; }
.stufen { container-type: inline-size; display: grid; gap: var(--ms-2); }
.stufen__kopf { margin: 0; font-size: 15px; color: var(--ms-text-muted); }
.stufen__kopf b { font-family: var(--ms-font-head); font-size: 17px; font-weight: 600; color: var(--ms-text); }
.stufen__kopf a { font-weight: 600; margin-left: var(--ms-2); }
.konf__gruppe { margin: var(--ms-7) 0 var(--ms-3); font-size: 21px; }
.modul__liste { display: grid; gap: 2px; margin: 2px 0 4px; }
.modul__liste b { color: var(--ms-text); font-weight: 600; }
.modul__bundletext { display: block; margin-top: 2px; color: var(--ms-success-ink); }
.modul__preis { text-align: right; }
.preis__alt { color: var(--ms-text-faint); font-weight: 500; }
.modul__preis .preis__alt { display: block; font-size: 14px; }
.modul__preis .preis__alt[hidden] { display: none; }
.preis__neu--bundle { color: var(--ms-success-ink); font-weight: 700; }

/* Shopware-Plugins: eigener, leicht abgesetzter Block mit eigener Zahlweise */
.konf .plugins {   /* Konfigurator; .plugins allein ist die Plugin-Übersicht der Startseite */
  border: 1px dashed var(--ms-border-strong); border-radius: var(--ms-r-card);
  padding: var(--ms-5); margin-top: var(--ms-7);
  background: var(--ms-surface-2);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-4);
}
.plugins__kopf { display: flex; flex-wrap: wrap; gap: var(--ms-3) var(--ms-5); align-items: start; justify-content: space-between; }
.plugins__kopf > div:first-child { flex: 1 1 280px; }
.plugins__titel { margin: 0 0 var(--ms-1); font-size: 21px; }
.plugins__zahlweise { flex: 0 0 220px; background: var(--ms-surface); }
.plugins .modul { background: var(--ms-surface); }
.plugins .modul:has(input:checked) { background: var(--ms-accent-weak); }
.plugins .modul-paar--an .modul,
.plugins .modul-paar--an .modul:has(input:checked) { background: transparent; border-color: transparent; }
.plugins__bundle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-2) var(--ms-3); margin: 0; font-size: 15px; color: var(--ms-text-muted); }
.plugins__bundle s { color: var(--ms-text-faint); }
.plugins__bundle b { color: var(--ms-success-ink); }
.plugins__einzeln { margin-top: var(--ms-2); }   /* einzeln buchbare Plugins unter der Bundle-Zeile */
.plugins__bundle--an { color: var(--ms-text); }

.summe__plugins { display: grid; gap: var(--ms-2); }
.summe__plugins[hidden] { display: none; }
.summe__titel { margin: 0; font-family: var(--ms-font-head); font-weight: 600; font-size: 15px; }

@media (max-width: 900px) {
  .konf { grid-template-columns: minmax(0, 1fr); }
  .umfang { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ms-2); }
.umfang legend { padding: 0; }
.umfang__wahl {
  display: flex; gap: var(--ms-4); align-items: flex-start;
  padding: var(--ms-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: var(--ms-surface);
  cursor: pointer;
}
.umfang__wahl:has(input:checked) { border-color: var(--ms-accent-visual); background: var(--ms-accent-weak); }
.umfang__wahl input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--ms-action); }
.umfang__wahl b { font-family: var(--ms-font-head); font-weight: 600; font-size: 17px; display: block; }

.modul { cursor: default; }
.modul__name { cursor: pointer; }
.modul--fest { border-color: var(--ms-border-strong); background: var(--ms-surface-2); }
.modul--aus { opacity: .4; }
.modul--aus .modul__name { cursor: default; }
.modul__info a { font-weight: 600; white-space: nowrap; }

.konf__summe { position: static; }
}
@media (max-width: 620px) {
  .feldreihe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Unterseiten-Kopf ---------- */

.phero { position: relative; }
.phero .wrap { padding-block: var(--ms-7) var(--ms-6); }
.phero h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.01em; max-width: 30ch; text-wrap: balance; }
.phero .lead { margin-top: var(--ms-5); max-width: 72ch; }
/* Seitenkopf mit Bild rechts (Shop-Logo ⇄ Sage 100), auf schmalen Schirmen darunter. */
.phero__raster {
  display: grid; gap: var(--ms-7); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}
.anbindung {
  display: grid; justify-items: center; gap: var(--ms-4);
  padding: var(--ms-6) var(--ms-5);
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-card);
  background: var(--ms-surface);
}
.anbindung__logos { display: grid; justify-items: center; gap: var(--ms-4); }
.anbindung__logo svg { display: block; height: 40px; width: auto; }
.anbindung__pfeil { width: 28px; height: 28px; color: var(--ms-accent-visual); }
.anbindung__sage { font-family: var(--ms-font-head); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ms-text); white-space: nowrap; }
@media (max-width: 900px) {
  .phero__raster { grid-template-columns: minmax(0, 1fr); gap: var(--ms-6); }
  .anbindung {
    justify-self: start; max-width: 100%;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--ms-3) var(--ms-4); padding: var(--ms-4) var(--ms-5);
  }
  .anbindung__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-3); }
  .anbindung__logo svg { height: 22px; }
  .anbindung__pfeil { transform: rotate(90deg); width: 22px; height: 22px; }
  .anbindung__sage { font-size: 19px; }
}
/* Suchbegriff der Seite als kleine Zeile in der H1, darunter der Slogan in voller Größe. */
.h1-thema { display: block; margin-bottom: var(--ms-3); line-height: 1.35; text-wrap: balance; }

.krumen { display: flex; flex-wrap: wrap; gap: var(--ms-2); font-size: 14px; margin-bottom: var(--ms-4); }
.krumen a { color: var(--ms-text-muted); text-decoration: none; }
.krumen a:hover { color: var(--ms-accent); }
.krumen span { color: var(--ms-text-faint); }

/* ---------- Funktionsgruppen ---------- */

.gruppe { display: grid; gap: var(--ms-5); grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
.gruppe + .gruppe { margin-top: var(--ms-7); padding-top: var(--ms-7); border-top: 1px solid var(--ms-border); }
.gruppe h3 { font-size: var(--web-h3); }
.gruppe__intro { color: var(--ms-text-muted); font-size: 16px; line-height: var(--ms-lh-doc); margin-top: var(--ms-2); }
.merkmale { display: grid; gap: var(--ms-3); min-width: 0; }
.merkmal { display: flex; gap: var(--ms-3); align-items: flex-start; line-height: var(--ms-lh-doc); }
.merkmal svg { width: 17px; height: 17px; flex: none; color: var(--ms-success-ink); margin-top: 5px; }
.merkmal b { font-weight: 600; }
.merkmal--highlight { padding: var(--ms-4) var(--ms-5); border: 1px solid var(--ms-success-line); border-left: 4px solid var(--ms-success-ink); border-radius: var(--ms-r-card); background: var(--ms-success-bg); }
.merkmal--highlight .ms-pill { margin-right: var(--ms-2); vertical-align: 1px; }

@media (max-width: 760px) {
  .gruppe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Terminkalender ---------- */

.tidycal { min-height: 420px; overflow-x: auto; }
.tidycal-embed iframe { max-width: 100%; }
.tidycal-embed { width: 100%; }
.tidycal__laden {
  display: grid; place-items: center; gap: var(--ms-3);
  min-height: 420px; text-align: center;
  color: var(--ms-text-muted); font-size: 15px;
}
.tidycal__laden svg { width: 26px; height: 26px; color: var(--ms-accent-visual); }
.tidycal__start {
  display: grid; place-items: center; align-content: center; gap: var(--ms-4);
  min-height: 420px; text-align: center; padding: var(--ms-5);
  border: 1px dashed var(--ms-border-strong); border-radius: var(--ms-r-card);
}
.tidycal__start svg { width: 34px; height: 34px; color: var(--ms-accent-visual); }
.tidycal__start p { margin: 0; font-size: 14px; color: var(--ms-text-muted); }

/* ---------- Screenshot mit Lightbox ---------- */

.shot__zoom {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; position: relative; line-height: 0;
}
.shot__zoom img { width: 100%; height: auto; display: block; }
.shot__hint {
  position: absolute; right: var(--ms-3); bottom: var(--ms-3);
  font-family: var(--ms-font-body); font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--web-navy-fg);
  background: rgba(12, 22, 29, .82);
  border: 1px solid var(--web-navy-line);
  border-radius: var(--ms-r-pill);
  padding: 6px var(--ms-3);
  opacity: 0; transition: opacity .15s ease;
}
.shot__zoom:hover .shot__hint, .shot__zoom:focus-visible .shot__hint { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 14, 19, .92);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(var(--ms-6) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--ms-6) + env(safe-area-inset-bottom, 0px));
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--ms-r-card);
  border: 1px solid var(--web-navy-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.lightbox__close {
  position: absolute; top: calc(var(--ms-4) + env(safe-area-inset-top, 0px));
  right: calc(var(--ms-4) + env(safe-area-inset-right, 0px));
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #FFF;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--ms-r-control); cursor: pointer;
}
.lightbox__close svg { width: 18px; height: 18px; }

/* ---------- KI-Block ---------- */

.ai { display: grid; gap: var(--ms-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.ai__cases { display: grid; gap: var(--ms-4); min-width: 0; }
.aicase {
  display: flex; gap: var(--ms-4); align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--web-navy-line);
  border-radius: var(--web-r-soft);
  padding: var(--ms-5);
  min-width: 0;
}
.aicase__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--ms-r-control);
  background: rgba(36, 141, 255, .14);
  border: 1px solid rgba(36, 141, 255, .3);
  color: var(--ms-brand-blue);
  display: grid; place-items: center;
}
.aicase__icon svg { width: 20px; height: 20px; }
.aicase h3 { font-size: var(--web-h3); margin-bottom: var(--ms-2); }
.aicase p { color: var(--web-navy-muted); line-height: var(--ms-lh-doc); font-size: 16px; }

.statuspill {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 3px var(--ms-3);
  border-radius: var(--ms-r-pill);
  background: rgba(36, 141, 255, .14);
  border: 1px solid rgba(36, 141, 255, .35);
  color: var(--ms-brand-blue);
  margin-left: var(--ms-3);
}

/* ---------- Preisanriss ---------- */

.pricing { display: grid; gap: var(--ms-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.pricecard {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-6);
  display: grid; gap: var(--ms-5); min-width: 0;
}
/* Startseite: ganze Karte führt zur Preisseite */
.pricecard--link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pricecard--link:hover { border-color: var(--ms-accent-visual); box-shadow: var(--ms-shadow-pop, var(--ms-shadow-card)); }
.pricecard--link:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 3px; }
.pricecard__head { display: grid; gap: var(--ms-1); }
.pricecard__label { font-size: 14px; color: var(--ms-text-muted); }
.pricecard__num {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricecard__num small { font-size: 18px; font-weight: 500; color: var(--ms-text-muted); }
.modules { display: grid; gap: var(--ms-2); }
.module {
  display: flex; align-items: center; gap: var(--ms-3);
  padding: var(--ms-2) 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 16px;
}
.module:last-child { border-bottom: none; }
.module__box {
  width: 17px; height: 17px; border-radius: 3px; flex: none;
  border: 1px solid var(--ms-border-strong);
  display: grid; place-items: center; color: var(--ms-accent);
}
.module__box svg { width: 11px; height: 11px; }
.module__box[data-on] { background: var(--ms-accent-weak); border-color: var(--ms-accent-visual); }
.savehint {
  display: inline-flex; align-items: center; gap: var(--ms-2);
  background: var(--ms-success-bg); color: var(--ms-success-ink);
  border: 1px solid var(--ms-success-line);
  border-radius: var(--ms-r-pill);
  padding: 3px var(--ms-3); font-size: 14px; font-weight: 600;
}

/* ---------- Wiedererkennung ---------- */

.pains { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pain {
  display: grid; gap: var(--ms-4); align-content: start; min-width: 0;
  padding: var(--ms-5);
  background: var(--web-warm-surface);
  border: 1px solid var(--web-warm-line);
  border-radius: var(--web-r-soft);
}
.pain__scene {
  font-family: var(--ms-font-head); font-weight: 500;
  font-size: 19px; line-height: 1.35; text-wrap: balance;
}
.pain__fix {
  display: flex; gap: var(--ms-3); align-items: flex-start;
  padding-top: var(--ms-4);
  border-top: 1px solid var(--web-warm-line);
  color: var(--ms-text-muted); line-height: var(--ms-lh-doc);
}
.pain__fix svg { width: 18px; height: 18px; flex: none; color: var(--ms-success-ink); margin-top: 3px; }

/* ---------- Menschen ---------- */

.people { display: grid; gap: var(--ms-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 116px)); gap: var(--ms-6) var(--ms-4); justify-content: center; }
.face { display: grid; gap: var(--ms-2); align-content: start; justify-items: center; text-align: center; }
.face__img {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--web-warm-surface);
  border: 2px solid var(--web-warm-line);
  display: grid; place-items: center;
  color: var(--ms-text-faint);
}
.face__img svg { width: 42px; height: 42px; }
.face__name { font-family: var(--ms-font-head); font-weight: 600; font-size: 16px; }
.face__role { font-size: 14px; color: var(--ms-text-muted); line-height: 1.3; }

.pullquote {
  font-family: var(--ms-font-head); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.35; text-wrap: balance;
  border-left: 3px solid var(--web-warm-ink);
  padding-left: var(--ms-5);
  margin-block: var(--ms-5);
}

/* ---------- Kundenstimmen ---------- */

.voices { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voice {
  background: var(--web-warm-surface);
  border: 1px solid var(--web-warm-line);
  border-radius: var(--web-r-soft);
  padding: var(--ms-5);
  display: grid; gap: var(--ms-4); align-content: start;
  min-width: 0;
  position: relative;
}
.voice__mark {
  font-family: var(--ms-font-head); font-weight: 700;
  font-size: 46px; line-height: .6;
  color: var(--web-warm-ink); opacity: .35;
}
.voice p { line-height: var(--ms-lh-doc); }
/* Kopf der Karte: Sterne, daneben wer bewertet hat; trennt sich per Linie vom Zitat */
.voice__kopf {
  display: flex; align-items: center; gap: var(--ms-2) var(--ms-4); flex-wrap: wrap;
  padding-bottom: var(--ms-4); border-bottom: 1px solid var(--web-warm-line);
}
.voice__sterne { color: var(--web-star); font-size: 20px; letter-spacing: .06em; line-height: 1; white-space: nowrap; }
.voice__sterne-leer { color: var(--web-warm-line); }
/* Schmale Karten (Handy, enge Spalten): Sterne immer über der Person, sonst bricht
   der Kopf je nach Namenslänge mal um und mal nicht. */
.voice { container-type: inline-size; }
@container (max-width: 310px) {
  .voice__kopf { flex-direction: column; align-items: flex-start; }
}
.voice__name { display: grid; gap: 2px; min-width: 0; }
.voice__person { display: flex; align-items: center; gap: var(--ms-3); min-width: 0; }
.voice__initiale {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--ms-font-head); font-weight: 600; font-size: 18px; line-height: 1;
  color: var(--voice-farbe);
  background: color-mix(in srgb, var(--voice-farbe) 24%, var(--web-warm-surface));
  border: 1px solid color-mix(in srgb, var(--voice-farbe) 35%, transparent);
}
.voice__initiale--0 { --voice-farbe: var(--web-warm-ink); }
.voice__initiale--1 { --voice-farbe: var(--ms-accent); }
.voice__initiale--2 { --voice-farbe: var(--web-star); }
.voice__name b { font-family: var(--ms-font-head); font-weight: 600; font-size: 16px; color: var(--ms-text); }
.voice__name span { font-size: 13.5px; color: var(--ms-text-muted); }
.voice__who { display: flex; align-items: center; gap: var(--ms-3); margin-top: auto; }
.voice__who b { font-family: var(--ms-font-head); font-weight: 600; font-size: 15px; display: block; }
.voice__who span { font-size: 14px; color: var(--ms-text-muted); }

.ratingline {
  display: flex; align-items: center; gap: var(--ms-3); flex-wrap: wrap;
  margin-top: var(--ms-6); font-size: 16px; color: var(--ms-text-muted);
}

/* Mensch im Hero */
.whoyoumeet {
  display: flex; align-items: center; gap: var(--ms-3);
  margin-top: var(--ms-5);
  padding: var(--ms-3) var(--ms-4);
  background: var(--web-warm-bg);
  border: 1px solid var(--web-warm-line);
  border-radius: var(--web-r-soft);
  max-width: 44ch;
}
.whoyoumeet .face__img { width: 44px; height: 44px; border-width: 1px; flex: none; }
.whoyoumeet .face__img svg { width: 22px; height: 22px; }
.whoyoumeet p { font-size: 15px; line-height: 1.4; }

/* ---------- Theme-Schalter (nur für den Entwurf) ---------- */

.themetoggle {
  background: transparent; border: 1px solid var(--ms-border);
  color: var(--ms-text-muted); border-radius: var(--ms-r-control);
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex: none;
}
.themetoggle:hover { color: var(--ms-text); border-color: var(--ms-border-strong); }
.themetoggle svg { width: 16px; height: 16px; }

/* Entwurfs-Hinweis */
.draftbar {
  background: var(--ms-warn-bg); color: var(--ms-warn-ink);
  border-bottom: 1px solid var(--ms-warn-line);
  font-size: 14px;
}
.draftbar .wrap { padding-block: var(--ms-2); }

@media (max-width: 1000px) {
  .hero__grid, .shot, .cta, .people, .pricing, .ai { grid-template-columns: minmax(0, 1fr); gap: var(--ms-7); }
  .hero__grid--grafik .cloudart { max-width: 600px; }  .voices, .pains { grid-template-columns: minmax(0, 1fr); }
  .shot__frame { order: 2; }
  .cards, .channels, .steps, .knowledge, .plugins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .navtoggle { display: flex; }
  .topbar__actions .btn { display: none; }
  .topbar__actions .topbar__icon--termin { display: inline-flex; }
  /* Mobil kein Moduswechsel: die Seite folgt der Systemeinstellung */
  .topbar__actions .themetoggle { display: none; }

  .mainnav {
    display: none;
    position: fixed;
    top: 57px; left: 0; right: 0;
    height: calc(100dvh - 57px);
    z-index: 49;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: var(--ms-4) var(--ms-5) var(--ms-8);
    overflow-y: auto;
    background: var(--ms-surface);
    border-top: 1px solid var(--ms-border);
  }
  .mainnav.nav--open { display: flex; }

  .mainnav > a,
  .hasmenu > a {
    padding: var(--ms-4) 0;
    font-size: 17px;
    border-bottom: 1px solid var(--ms-border);
    border-top: none;
  }
  .hasmenu > a { display: flex; justify-content: space-between; align-items: center; }
  .hasmenu > a svg { display: block; width: 18px; height: 18px; transform: rotate(-90deg); }
  .megamenu, .megamenu--klein { display: none !important; }

  /* Sub-Ebene: Hauptpunkte ausblenden */
  .mainnav.nav--sub > a,
  .mainnav.nav--sub > .hasmenu { display: none; }

  /* Sub-Panel */
  .mainnav__sub { display: flex; flex-direction: column; width: 100%; }

  .mainnav__back {
    display: flex; align-items: center; gap: var(--ms-2);
    padding: var(--ms-4) 0;
    border: none; border-bottom: 1px solid var(--ms-border);
    background: none; cursor: pointer;
    color: var(--ms-accent); font-size: 15px; font-weight: 600;
    text-align: left;
  }
  .mainnav__back svg { width: 18px; height: 18px; flex-shrink: 0; }

  .mainnav__sub-title {
    display: block; padding: var(--ms-4) 0;
    font-size: 17px; font-weight: 700; color: var(--ms-text);
    text-decoration: none; border-bottom: 2px solid var(--ms-accent-visual);
    margin-bottom: var(--ms-2);
  }

  .mainnav__sublist { display: flex; flex-direction: column; }
  .mainnav__subheading {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ms-text-muted); font-weight: 600;
    padding: var(--ms-4) 0 var(--ms-1); margin: 0;
  }
  .mainnav__sublink {
    display: block; padding: var(--ms-3) 0;
    font-size: 16px; color: var(--ms-text);
    font-weight: 400; text-decoration: none;
    border-bottom: 1px solid var(--ms-border);
  }
  .mainnav__sublink:hover { color: var(--ms-accent); }
}

@media (max-width: 620px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards, .channels, .steps, .knowledge, .plugins, .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .phone span { display: none; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Videovorschau (Fassade)
   Bis zum Klick geht keine Anfrage an YouTube. Wir zeigen keine Vorschaubilder
   von i.ytimg.com, weil schon das Bild eine Verbindung zu Google waere.
   Erst der Klick laedt den Player von youtube-nocookie.com.
--------------------------------------------------------------------------- */
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--ms-accent) 26%, transparent), transparent 62%),
    var(--ms-surface-2);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.video:hover { border-color: color-mix(in srgb, var(--ms-accent) 55%, var(--ms-border)); }
.video:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 3px; }

.video__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--ms-4);
  padding: clamp(18px, 3vw, 30px);
}
.video__play {
  align-self: center;
  justify-self: center;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ms-accent);
  color: #fff;
  box-shadow: 0 10px 28px rgb(0 0 0 / .22);
  transition: transform .18s ease;
}
.video:hover .video__play { transform: scale(1.07); }
.video__play svg { width: 26px; height: 26px; margin-left: 3px; }

.video__text { display: grid; gap: 4px; }
.video__titel {
  font-family: var(--ms-font-cond, inherit);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ms-text);
}
.video__hinweis { font-size: 13.5px; color: var(--ms-text-muted); }

.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Videoseite: mehrere Fassaden je Thema im Raster */
.videoliste {
  display: grid; gap: var(--ms-5); margin-top: var(--ms-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.videoliste .video__titel { font-size: 17px; }
.videoliste .video__play { width: 52px; height: 52px; }
/* Vorschaubild: selbst gehostete Kopie unter /assets/img/videos/, keine Anfrage an Google */
.video__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video--bild { display: grid; place-items: center; }
.video--bild .video__play { position: relative; box-shadow: 0 6px 22px rgb(0 0 0 / .45); }
.video--laeuft .video__bild,
.video--laeuft .video__play { display: none; }
.videokarte { display: grid; gap: 4px; align-content: start; }
.videokarte .video { margin-bottom: var(--ms-2); }
.videokarte__titel { margin: 0; font-family: var(--ms-font-cond, inherit); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ms-text); }
.videokarte .video__hinweis { margin: 0; }
.video--laeuft { cursor: default; background: #000; }
.video--laeuft .video__inner { display: none; }

/* ---------------------------------------------------------------------------
   Bildergalerie mit Lightbox
   Fuer Funktionsseiten mit mehreren Bildschirmfotos.
--------------------------------------------------------------------------- */
.galerie {
  display: grid;
  gap: var(--ms-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.galerie__bild {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: var(--ms-surface);
  overflow: hidden;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.galerie__bild:hover { border-color: color-mix(in srgb, var(--ms-accent) 55%, var(--ms-border)); transform: translateY(-2px); }
.galerie__bild:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 3px; }
.galerie__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.galerie__bild figcaption,
.galerie__bild .galerie__text {
  padding: 0 14px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ms-text-muted);
}

/* Logoreihe (Versanddienstleister, Partner) */
.logoreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-4) var(--ms-5);
}
.logoreihe img { max-height: 44px; width: auto; }

/* ---------------------------------------------------------------------------
   Preisbox
   Steht neben einem Plugin-Text und nennt Monats- und Jahrespreis.
--------------------------------------------------------------------------- */
.preisbox {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: var(--ms-surface-2);
}
.preisbox__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}
.preisbox__wert {
  margin: 0;
  font-family: var(--ms-font-head, inherit);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.1;
  color: var(--ms-text);
}
.preisbox__wert span { font-size: .5em; font-weight: 500; color: var(--ms-text-muted); }
.preisbox__alt { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--ms-text-muted); }
.preisbox .btn { justify-self: start; }
.preisbox__doku { font-size: 14.5px; }

/* Rechte Spalte einer Plugin-Seite: Preisbox, darunter ein Highlight des Plugins */
.preisspalte { display: grid; gap: var(--ms-5); align-self: start; }
.highlight {
  display: grid; gap: var(--ms-3);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ms-success-line);
  border-left: 4px solid var(--ms-success-ink);
  border-radius: var(--ms-r-card);
  background: var(--ms-success-bg);
}
.highlight__marke { justify-self: start; }
.highlight__titel { margin: 0; font-family: var(--ms-font-head); font-size: var(--web-h3); line-height: 1.2; color: var(--ms-text); }
.highlight p { margin: 0; font-size: 16px; line-height: var(--ms-lh-doc); color: var(--ms-text-muted); }
.highlight .highlight__klein { font-size: 14.5px; }
.highlight__weg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-2); margin: 0; padding: 0; list-style: none; }
.highlight__weg li { padding: 4px 12px; border-radius: 999px; background: var(--ms-surface); border: 1px solid var(--ms-border); font-size: 14px; font-weight: 600; color: var(--ms-text); }
.highlight__weg li + li { position: relative; margin-left: 18px; }
.highlight__weg li + li::before { content: "→"; position: absolute; left: -20px; color: var(--ms-success-ink); font-weight: 400; }
@media (max-width: 420px) {
  .highlight__weg li { padding: 3px 9px; font-size: 13px; }
  .highlight__weg li + li { margin-left: 14px; }
  .highlight__weg li + li::before { left: -15px; }
}

/* Selbst gehostetes Video — kein Fremddienst, laedt erst beim Abspielen. */
.eigenvideo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  background: #000;
}

/* Kundenlogo in einer Kundenstimme — ersetzt das Platzhalter-Symbol. */
.voice__logo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.voice__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* Platzhalterflaeche fuer Beitraege ohne Beitragsbild — haelt das Raster ruhig. */
.beitrag__bild--leer {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ms-accent) 55%, transparent);
  background:
    radial-gradient(120% 150% at 20% 0%, color-mix(in srgb, var(--ms-accent) 18%, transparent), transparent 65%),
    var(--ms-surface-2);
  border-bottom: 1px solid var(--ms-border);
}
.beitrag__bild--leer svg { width: 42px; height: 42px; }

/* Logowand — freigestellte Partnerlogos, mittig und begrenzt. */
.logowand { margin: 0; text-align: center; }
.logowand img { width: 100%; max-width: 860px; height: auto; }

/* ---------------------------------------------------------------------------
   Zweispaltiger Textblock
   Ein Abschnitt aus Überschrift und Fließtext soll die Breite des Rasters
   nutzen, ohne dass die Zeilen zu lang werden: Überschrift links, Text rechts
   mit begrenztem Zeilenmaß. Unter 900 px stapeln beide Spalten.
--------------------------------------------------------------------------- */
.textzwei {
  display: grid;
  gap: var(--ms-5) var(--ms-7);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
.textzwei__text { display: grid; gap: var(--ms-5); max-width: 62ch; }
.textzwei__text > .lead:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .textzwei { grid-template-columns: 1fr; gap: var(--ms-5); }
  .textzwei__text { max-width: none; }
}

/* Zwischenzeile in der Liste der virtuellen Mitarbeiter
   ("Immer im Dienst" / "Auf Wunsch zuschaltbar"). */
.ai__gruppe {
  margin: var(--ms-3) 0 calc(var(--ms-1) * -1);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--web-navy-muted);
}
.ai__gruppe:first-child { margin-top: 0; }

/* Kopf eines virtuellen Mitarbeiters: Symbol plus Name und Rolle. */
.vma__kopf { display: flex; gap: var(--ms-4); align-items: flex-start; }
.vma__kopf h3 { margin: 0 0 var(--ms-1); }
.vma__kopf .aicase__icon { color: var(--ms-accent); background: color-mix(in srgb, var(--ms-accent) 14%, transparent); }


/* ---------------------------------------------------------------------------
   Virtuelle Mitarbeiter — Band auf der Startseite
   Soll sich deutlich von den übrigen dunklen Bändern abheben: farbige
   Lichtflecken in Hausblau und Hausgrün, feines Raster, größere Überschrift.
   Funktioniert in Hell- und Dunkelmodus, weil das Band selbst immer dunkel ist.
--------------------------------------------------------------------------- */
.vmaband {
  position: relative;
  overflow: hidden;
  color: var(--web-navy-fg);
  background:
    radial-gradient(55% 70% at 88% 4%,  rgba(36, 141, 255, .30), transparent 62%),
    radial-gradient(45% 60% at 4% 100%, rgba(0, 170, 0, .22),   transparent 62%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--web-navy-bg);
  border-block: 1px solid rgba(36, 141, 255, .35);
}
/* Der Abstand kommt wie bei allen Baendern aus .wrap — hier nichts zusaetzlich. */
.vmaband .eyebrow { color: #6FB6FF; }
.vmaband .lead { color: var(--web-navy-muted); }

.vmaband__kopf {
  display: grid;
  gap: var(--ms-6) var(--ms-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.vmaband__titel {
  font-family: var(--ms-font-head, inherit);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.vmaband__intro { display: grid; gap: var(--ms-4); }
.vmaband__intro .hero__cta { margin-top: var(--ms-2); }

.vmaband__beispiel {
  margin: 0 0 var(--ms-4);
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--web-navy-muted);
}

.vmaraster {
  display: grid;
  gap: var(--ms-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.vmakarte {
  display: grid; gap: var(--ms-3); align-content: start;
  padding: var(--ms-5);
  border-radius: var(--ms-r-card);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(2px);
}
.vmakarte h3 { font-size: var(--web-h3); color: #fff; margin: 0; }
.vmakarte p { margin: 0; color: var(--web-navy-muted); line-height: var(--ms-lh-doc); font-size: 15.5px; }
.vmakarte__schild {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
}
.vmakarte--immer  .vmakarte__schild { background: rgba(0, 170, 0, .18);    color: #7CDB7C; }
.vmakarte--wunsch .vmakarte__schild { background: rgba(36, 141, 255, .18); color: #8CC5FF; }
.vmakarte--immer { border-color: rgba(0, 170, 0, .35); }

.vmamehr {
  display: flex; align-items: center; gap: var(--ms-5);
  margin-top: var(--ms-4);
  padding: var(--ms-5);
  border-radius: var(--ms-r-card);
  border: 1.5px dashed rgba(255, 255, 255, .28);
  color: var(--web-navy-muted);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.vmamehr:hover { border-color: #6FB6FF; background: rgba(36, 141, 255, .08); }
.vmamehr b { color: #fff; margin-right: .3em; }
.vmamehr__pfeil { margin-left: auto; font-size: 20px; color: #6FB6FF; }

@media (max-width: 900px) {
  .vmaband__kopf { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .vmamehr { align-items: flex-start; }
  .vmamehr__pfeil { display: none; }
}

/* Offene Stelle in einem Text — muss vor dem Livegang geklaert sein.
   Absichtlich auffaellig. Suche nach class="offen" findet alle. */
mark.offen {
  background: #FFE16A;
  color: #3A2E00;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Virtuelle Mitarbeiter im Megamenue — bewusst auffaellig: dasselbe dunkle
   Band mit Lichtflecken wie auf der Startseite, ueber die ganze Breite.
--------------------------------------------------------------------------- */
.megamenu .megavma {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--ms-5);
  padding: var(--ms-3) var(--ms-4);
  /* Rechts so weit wie .megafeature */
  margin-inline: 0 calc(var(--ms-5) * -1 + var(--ms-2));
  border-radius: var(--ms-r-card);
  text-decoration: none;
  color: var(--web-navy-fg);
  /* Kraeftiger als die anderen Baender, damit es auch auf dunklem Menuegrund heraussticht. */
  --megavma-bg:
    radial-gradient(80% 160% at 100% 0%, rgba(36, 141, 255, .62), transparent 62%),
    radial-gradient(60% 160% at 0% 100%, rgba(0, 170, 0, .45), transparent 62%),
    linear-gradient(90deg, #0F2A1E, #10243A);
  background: var(--megavma-bg);
  border: 1px solid rgba(111, 182, 255, .7);
  box-shadow: 0 8px 24px rgba(36, 141, 255, .18);
  transition: border-color .18s ease, transform .18s ease;
}
.megamenu .megavma:hover {
  background: var(--megavma-bg); color: var(--web-navy-fg);
  border-color: #6FB6FF; transform: translateY(-1px);
}
.megavma__team { flex: none; display: flex; padding-left: 2px; }
.megavma__person {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  margin-left: -10px;
  background: var(--web-navy-bg);
  border: 1.5px solid rgba(111, 182, 255, .8);
  color: #8CC5FF;
}
.megavma__person:first-child { margin-left: 0; position: relative; z-index: 3; }
.megavma__person:nth-child(2) { z-index: 2; opacity: .75; }
.megavma__person:nth-child(3) { z-index: 1; opacity: .5; border-style: dashed; }
.megavma__person svg { width: 18px; height: 18px; }
.megavma__text { display: grid; gap: 2px; min-width: 0; }
.megavma__titel { font-family: var(--ms-font-head, inherit); font-size: 18px; font-weight: 600; color: #fff; }
.megavma__zeile { font-size: 14px; line-height: 1.45; color: var(--web-navy-muted); }
.megavma__mehr { margin-left: auto; flex: none; font-weight: 600; font-size: 14.5px; color: #8CC5FF; }
@media (max-width: 760px) { .megavma__mehr { display: none; } }

/* Hervorgehobene Karte — fuer die virtuellen Mitarbeiter im Funktionsraster. */
.card--akzent {
  border-color: color-mix(in srgb, var(--ms-accent) 55%, var(--ms-border));
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--ms-accent) 16%, transparent), transparent 65%),
    var(--ms-surface);
}
.card--akzent .card__icon { background: var(--ms-accent); color: #fff; }

/* Weiterlesen-Link am Fuss einer Karte */
.card__mehr { display: inline-block; margin-top: var(--ms-3); font-weight: 600; font-size: 15px; color: var(--ms-accent); text-decoration: none; }
.card__mehr:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   FAQ — Details/Summary Akkordeon
--------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border: 1px solid var(--ms-border); border-radius: var(--ms-r-card); overflow: hidden; }
.faq__item { border-bottom: 1px solid var(--ms-border); }
.faq__item:last-child { border-bottom: none; }
.faq__frage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ms-4);
  padding: var(--ms-5) var(--ms-6);
  font-family: var(--ms-font-cond, inherit);
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: var(--ms-surface);
  color: var(--ms-text);
  transition: background .15s;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: '';
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='currentColor' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='currentColor' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
  opacity: .6;
}
.faq__item[open] > .faq__frage::after { transform: rotate(180deg); }
.faq__item[open] > .faq__frage { background: var(--ms-surface-2); }
.faq__frage:hover { background: var(--ms-surface-2); }
.faq__antwort { padding: var(--ms-2) var(--ms-6) var(--ms-6); background: var(--ms-surface-2); }
.faq__antwort p { margin: 0; line-height: var(--ms-lh-doc); color: var(--ms-text-doc); }

/* ---------------------------------------------------------------------------
   Formulare (Support, Kontakt)
--------------------------------------------------------------------------- */
.formzeile { display: grid; gap: var(--ms-2); margin-bottom: var(--ms-5); }
.formzeile label { font-size: 14px; font-weight: 600; color: var(--ms-text-muted); }
.formzeile input,
.formzeile select,
.formzeile textarea {
  width: 100%; padding: var(--ms-3) var(--ms-4);
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-input, 6px);
  background: var(--ms-surface); color: var(--ms-text);
  font: inherit; font-size: 15px;
  transition: border-color .15s;
}
.formzeile input:focus,
.formzeile select:focus,
.formzeile textarea:focus { outline: none; border-color: var(--ms-accent); }
.formzeile textarea { resize: vertical; min-height: 120px; }
.form__hinweis { font-size: 13px; color: var(--ms-error, #c00); }
.form__ok  { padding: var(--ms-5) var(--ms-6); background: color-mix(in srgb, var(--ms-accent) 10%, var(--ms-surface)); border: 1px solid var(--ms-accent); border-radius: var(--ms-r-card); color: var(--ms-text); font-weight: 600; }
.form__fehler { padding: var(--ms-4) var(--ms-5); background: color-mix(in srgb, var(--ms-error, #c00) 10%, var(--ms-surface)); border: 1px solid var(--ms-error, #c00); border-radius: var(--ms-r-card); color: var(--ms-text); margin-bottom: var(--ms-5); }

/* ---------------------------------------------------------------------------
   Animierte Datenfluss-Grafik
--------------------------------------------------------------------------- */
.datenfluss { margin: 0; }
.datenfluss__wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.datenfluss__bild {
  display: block;
  width: 100%;
  height: auto;
}
/* Spezifisch genug, um .cloudart img { display:block } zu schlagen */
.datenfluss__wrap .datenfluss__bild--dunkel { display: none; }
:root[data-theme="dark"] .datenfluss__wrap .datenfluss__bild--hell   { display: none; }
:root[data-theme="dark"] .datenfluss__wrap .datenfluss__bild--dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .datenfluss__wrap .datenfluss__bild--hell   { display: none; }
  :root:not([data-theme="light"]) .datenfluss__wrap .datenfluss__bild--dunkel { display: block; }
}
.datenfluss__anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Rentabilitätsrechner (/preise/rechnet-sich-das/)
--------------------------------------------------------------------------- */
.roi {
  display: grid; gap: var(--ms-6) var(--ms-7);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--ms-6);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
}
.roi__regler {
  display: grid; gap: var(--ms-4) var(--ms-6);
  grid-template-columns: minmax(0, 1fr);
}
.roi__feld {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--ms-2) var(--ms-3);
}
.roi__feld label { font-size: 15px; font-weight: 600; color: var(--ms-text); }
.roi__feld output {
  font-family: var(--ms-font-head); font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ms-accent);
}
.roi__feld input { grid-column: 1 / -1; }

.roi input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.roi input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--ms-accent) var(--roi-anteil, 50%), var(--ms-border-strong) var(--roi-anteil, 50%));
}
.roi input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ms-border-strong); }
.roi input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ms-accent); }
.roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--ms-accent); border: 3px solid var(--ms-surface);
  box-shadow: 0 0 0 1px var(--ms-accent);
}
.roi input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ms-accent); border: 3px solid var(--ms-surface);
  box-shadow: 0 0 0 1px var(--ms-accent);
}
.roi input[type="range"]:focus-visible { outline: none; }
.roi input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ms-accent), var(--ms-focus-ring); }
.roi input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--ms-accent), var(--ms-focus-ring); }

.roi__ergebnis {
  padding: var(--ms-5);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
}
.inhalt .roi__ergebnis > * + * { margin-top: 0; }
.roi .roi__titel { font-size: 14px; font-weight: 600; color: var(--ms-text-muted); }
.roi .roi__weg {
  list-style: none; margin: var(--ms-3) 0 0; padding: 0;
  font-variant-numeric: tabular-nums;
}
.inhalt .roi__weg > li + li { margin-top: 0; }
.roi__weg li {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--ms-1) var(--ms-4);
  padding: var(--ms-3) 0;
  border-bottom: 1px solid var(--ms-border);
}
.roi__was { color: var(--ms-text-muted); font-size: 15px; }
.roi__wert { font-weight: 600; color: var(--ms-text); white-space: nowrap; margin-left: auto; }
.roi__ein { font-weight: 600; color: var(--ms-accent); }
/* Ergebnis wie unter einer Rechnung: doppelter Strich, etwas größer */
.roi__weg .roi__rest {
  border-bottom: 0; border-top: 3px double var(--ms-border-strong);
  margin-top: -1px; padding-top: var(--ms-4);
}
.roi__rest .roi__was { color: var(--ms-text); font-weight: 600; font-size: 16px; }
.roi__rest .roi__wert {
  font-family: var(--ms-font-head); font-size: 26px; line-height: 1.1;
  color: var(--ms-success-ink);
}
.roi--minus .roi__rest .roi__wert { color: var(--ms-warn-ink); }
.roi .roi__fazit { font-size: 14px; color: var(--ms-text-muted); margin-top: var(--ms-3); }
.roi .roi__hinweis {
  grid-column: 1 / -1; margin: 0;
  font-size: 13px; color: var(--ms-text-faint);
}
.inhalt .roi > * + * { margin-top: 0; }

@media (max-width: 720px) {
  .roi { grid-template-columns: minmax(0, 1fr); padding: var(--ms-5); }
}
.roi .roi__startup {
  margin-top: var(--ms-4); padding: var(--ms-3) var(--ms-4);
  font-size: 14px; line-height: 1.5;
  color: var(--ms-info-ink); background: var(--ms-info-bg);
  border: 1px solid var(--ms-info-line); border-radius: var(--ms-r-control);
}
.roi .roi__startup[hidden] { display: none; }
.roi .roi__startup b { color: var(--ms-text); }
.roi .roi__startup a { display: inline-block; margin-top: var(--ms-1); font-weight: 600; }

/* Terminkasten am Ende älterer Beiträge (ersetzt das alte WordPress-Formular) */
.terminkasten {
  margin-top: var(--ms-8);
  padding: var(--ms-5) var(--ms-6);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
}
.inhalt .terminkasten h3 { margin-top: 0; }
.inhalt .terminkasten p { color: var(--ms-text-muted); }
.inhalt .terminkasten .terminkasten__aktion {
  display: flex; flex-wrap: wrap; gap: var(--ms-3); margin-top: var(--ms-4);
}

/* Abhakliste (z. B. Projektcheckliste) — leere Kästchen statt Punkte, auch für den Ausdruck */
.inhalt ul.checkliste { list-style: none; padding-left: 0; }
.inhalt ul.checkliste li { position: relative; padding-left: 30px; }
.inhalt ul.checkliste li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid var(--ms-border-strong); background: var(--ms-surface);
}

/* Sehr schmale Handys: rechte Kopfleiste passt sonst nicht neben das Logo */
@media (max-width: 420px) {
  .topbar__actions { gap: var(--ms-1); }
}

/* Übernommenes HTML: falsch verschachtelte Absätze erzeugen leere <p>, die sonst Abstand bekommen */
.inhalt p:empty { display: none; }
.inhalt a { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .topbar__icon { width: 32px; height: 32px; }
}
/* Unter 360 px passt nicht alles neben das Logo; Kontakt steht weiter im Menü */
@media (max-width: 359px) {
  .topbar__actions { gap: 2px; }
  .topbar__actions .topbar__icon[href*="kontakt"] { display: none; }
}

/* ---------------------------------------------------------------------------
   Bilder je Modus: .nur-hell / .nur-dunkel blenden das jeweils andere aus.
--------------------------------------------------------------------------- */
:root .nur-dunkel { display: none; }
:root[data-theme="dark"] .nur-hell   { display: none; }
:root[data-theme="dark"] .nur-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nur-hell   { display: none; }
  :root:not([data-theme="light"]) .nur-dunkel { display: block; }
}

/* ---------- Rundgang durch die Oberfläche ---------- */

.rundgang {
  display: grid; gap: var(--ms-6) var(--ms-7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  align-items: start;
}
.rundgang__seite { display: grid; gap: var(--ms-6); }
.rundgang__reiter { display: grid; }
.rundgang__tab {
  display: grid; gap: var(--ms-2);
  padding: var(--ms-3) var(--ms-4);
  border: 0; border-left: 2px solid var(--web-navy-line);
  background: none; color: var(--web-navy-muted);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.rundgang__tab-titel {
  font-family: var(--ms-font-head); font-size: var(--ms-ui-h3); font-weight: 600;
  color: var(--web-navy-fg);
}
.rundgang__tab-text { display: none; font-size: 15.5px; line-height: var(--ms-lh-doc); }
.rundgang__tab:hover { border-left-color: var(--web-navy-muted); }
.rundgang__tab[aria-selected="true"] {
  border-left-color: var(--ms-brand-green);
  background: rgba(255, 255, 255, .045);
}
.rundgang__tab[aria-selected="true"] .rundgang__tab-text { display: block; }
.rundgang__tab:focus-visible { outline: 2px solid var(--ms-brand-blue); outline-offset: 2px; }
.rundgang__fenster { position: relative; }
.rundgang__panel[hidden] { display: none; }
.rundgang__steuerung { display: grid; gap: var(--ms-3); }
/* Restzeit bis zum nächsten Bereich: dünner Balken unter den Reitern */
.rundgang__lauf { display: flex; align-items: center; gap: var(--ms-3); padding-left: var(--ms-4); }
.rundgang__lauf[hidden] { display: none; }
.rundgang__balken { flex: 1; height: 2px; border-radius: 2px; background: var(--web-navy-line); overflow: hidden; }
.rundgang__balken span { display: block; height: 100%; width: 100%; background: var(--ms-brand-green); transform-origin: left; transform: scaleX(0); }
.rundgang--laeuft .rundgang__balken span { animation: rundgang-lauf var(--rundgang-dauer, 7s) linear forwards; }
.rundgang--halt .rundgang__balken span { animation-play-state: paused; }
.rundgang--angehalten .rundgang__balken span { opacity: .45; }
@keyframes rundgang-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rundgang__pause {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--web-navy-line); border-radius: 50%;
  background: none; color: var(--web-navy-muted); cursor: pointer;
}
.rundgang__pause:hover { color: var(--web-navy-fg); border-color: var(--web-navy-muted); }
.rundgang__pause:focus-visible { outline: 2px solid var(--ms-brand-blue); outline-offset: 2px; }
.rundgang__pause svg { width: 12px; height: 12px; }
.rundgang__pause .nur-pause, .rundgang--angehalten .rundgang__pause .nur-laeuft { display: none; }
.rundgang--angehalten .rundgang__pause .nur-pause { display: block; }

@media (max-width: 900px) {
  .rundgang { grid-template-columns: minmax(0, 1fr); }
  .rundgang__seite { display: contents; }
  .rundgang__seite .hero__cta { order: 3; }
}

/* ---------- Preisfindung als Bild ----------
   [data-einblenden]: Das Skript setzt erst .einblenden-bereit, beim Erreichen
   .ist-sichtbar. Ohne JavaScript bleibt alles sichtbar. */

.preisbild {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(56px, 9vw, 120px) minmax(0, 1.15fr);
  margin: 0 0 var(--ms-7);
}
.preisbild__sage {
  padding: var(--ms-5);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  box-shadow: var(--ms-shadow-card);
}
.preisbild__sage h3 { margin: var(--ms-1) 0 var(--ms-4); font-size: var(--web-h3); }
.preisbild__kopf {
  margin: 0; font-size: var(--ms-ui-sm); color: var(--ms-text-muted);
  display: flex; align-items: center; gap: var(--ms-2);
}
.preisbild__marke {
  padding: 2px 8px; border-radius: var(--ms-r-pill);
  background: var(--ms-success-bg); color: var(--ms-success-ink); font-weight: 600;
}
.preisbild__regeln { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.preisbild__regeln li {
  display: flex; justify-content: space-between; gap: var(--ms-4);
  padding: var(--ms-2) var(--ms-3);
  border-radius: var(--ms-r-control);
  font-size: var(--ms-ui-base);
  transition: background-color .25s ease, color .25s ease;
}
.preisbild__regeln b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.preisbild__regeln li.ist-quelle { background: var(--ms-accent-weak); color: var(--ms-accent); }

.preisbild__fluss { position: relative; height: 2px; background: var(--ms-border-strong); }
.preisbild__fluss::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid var(--ms-border-strong); border-right: 2px solid var(--ms-border-strong);
}
.preisbild__fluss span {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--ms-accent-visual); opacity: 0;
}
.preisbild.ist-sichtbar .preisbild__fluss span { animation: preisfluss 1.6s ease-in-out infinite; }
.preisbild.ist-pausiert .preisbild__fluss span { animation-play-state: paused; }
.preisbild.ist-sichtbar .preisbild__fluss span:nth-child(2) { animation-delay: .5s; }
.preisbild.ist-sichtbar .preisbild__fluss span:nth-child(3) { animation-delay: 1s; }
@keyframes preisfluss {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

.preisbild__shop { display: grid; gap: var(--ms-3); }
.preisbild__kunde {
  display: grid; gap: 2px var(--ms-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--ms-3) var(--ms-4);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  transition: opacity .5s ease, transform .5s ease, border-color .25s ease;
}
.preisbild__wer { font-weight: 600; }
.preisbild__preis {
  grid-row: span 2; align-self: center; text-align: right;
  font-family: var(--ms-font-head); font-size: 28px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ms-text);
}
.preisbild__preis small {
  display: block; font-family: var(--ms-font-body); font-size: 13px; font-weight: 500;
  color: var(--ms-text-muted);
}
.preisbild__wie { font-size: var(--ms-ui-sm); color: var(--ms-text-muted); }
.preisbild__kunde.ist-hervor { border-color: var(--ms-accent-visual); }
.preisbild > figcaption {
  grid-column: 1 / -1; margin-top: var(--ms-4);
  font-size: 14px; color: var(--ms-text-muted);
}
.preisbild.einblenden-bereit:not(.ist-sichtbar) .preisbild__kunde { opacity: 0; transform: translateX(-12px); }
.preisbild.ist-sichtbar .preisbild__kunde:nth-of-type(1) { transition-delay: .5s, .5s, 0s; }
.preisbild.ist-sichtbar .preisbild__kunde:nth-of-type(2) { transition-delay: 1.7s, 1.7s, 0s; }
.preisbild.ist-sichtbar .preisbild__kunde:nth-of-type(3) { transition-delay: 2.9s, 2.9s, 0s; }

@media (max-width: 760px) {
  .preisbild { grid-template-columns: minmax(0, 1fr); }
  .preisbild__fluss { width: 2px; height: 48px; justify-self: center; }
  .preisbild__fluss::after { right: auto; top: auto; left: 50%; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .preisbild__fluss span { display: none; }
}

/* ---------- Meldungsverlauf der virtuellen Mitarbeiter ---------- */

.vmmeldungen {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ms-r-card);
  background: rgba(6, 14, 20, .55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.vmmeldungen__bar {
  display: flex; justify-content: space-between; gap: var(--ms-3);
  padding: var(--ms-3) var(--ms-4);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-family: var(--ms-font-head); font-size: 14px; color: var(--web-navy-fg);
}
.vmmeldungen__beispiel { color: var(--web-navy-muted); font-family: var(--ms-font-body); font-size: 13px; }
.vmmeldungen__fenster {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
          mask-image: linear-gradient(#000 78%, transparent);
}
.vmmeldungen__liste { list-style: none; margin: 0; padding: var(--ms-2) 0; }
/* Neue Meldung von oben: kurz aufleuchten, dann normal. */
.vmmeldung--rein { animation: vmrein 1.6s ease both; }
@keyframes vmrein {
  0%   { opacity: 0; background: rgba(36, 141, 255, .14); }
  25%  { opacity: 1; background: rgba(36, 141, 255, .14); }
  100% { opacity: 1; background: transparent; }
}
.vmmeldung {
  display: grid; gap: var(--ms-3);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--ms-3) var(--ms-4);
  transition: opacity .45s ease, transform .45s ease;
}
.vmmeldung + .vmmeldung { border-top: 1px solid rgba(255, 255, 255, .06); }
.vmmeldung__icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(36, 141, 255, .16); color: #8CC5FF;
}
.vmmeldung__icon svg { width: 18px; height: 18px; }
.vmmeldung__kopf { margin: 0; font-size: 14px; color: var(--web-navy-fg); }
.vmmeldung__kopf time { margin-left: var(--ms-2); color: var(--web-navy-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.vmmeldung__text { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--web-navy-muted); }
.vmmeldung__status {
  padding: 3px 10px; border-radius: var(--ms-r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: rgba(36, 141, 255, .18); color: #8CC5FF;
}
.vmmeldung--erledigt .vmmeldung__status { background: rgba(0, 170, 0, .18); color: #7CDB7C; }
.vmmeldung--pruefen  .vmmeldung__status { background: rgba(242, 174, 92, .18); color: #F2AE5C; }
.vmmeldung--erledigt .vmmeldung__icon,
.vmmeldung--pruefen  .vmmeldung__icon { background: rgba(0, 170, 0, .16); color: #7CDB7C; }

.vmmeldungen.einblenden-bereit:not(.ist-sichtbar) .vmmeldung { opacity: 0; transform: translateY(8px); }
.vmmeldungen.ist-sichtbar .vmmeldung:nth-child(2) { transition-delay: .9s; }
.vmmeldungen.ist-sichtbar .vmmeldung:nth-child(3) { transition-delay: 1.8s; }
.vmmeldungen.ist-sichtbar .vmmeldung:nth-child(4) { transition-delay: 2.7s; }
.vmmeldungen.ist-sichtbar .vmmeldung:nth-child(5) { transition-delay: 3.6s; }
.vmmeldungen.ist-sichtbar .vmmeldung:nth-child(1) { transition-delay: .2s; }

@media (max-width: 560px) {
  .vmmeldung { grid-template-columns: 34px minmax(0, 1fr); }
  .vmmeldung__status { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   Startseite, Abschnitt Zugriff: Schema des Tunnels (Browser → Cloudflare →
   Tunnel → maniacSeller im Firmennetz). Die Punkte im Tunnel wandern nach oben:
   Der maniacSeller baut die Verbindung von innen nach außen auf.
--------------------------------------------------------------------------- */
.tunnel {
  display: grid; gap: var(--ms-8); align-items: center;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-top: var(--ms-8); padding-top: var(--ms-8);
  border-top: 1px solid var(--ms-border);
}
.tunnel__bild { margin: 0; width: 100%; max-width: 340px; justify-self: center; }
.tunnel__bild svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ms-font-body); }
.tunnel__h { font-size: var(--web-h3); }
.tunnel__box { fill: var(--ms-surface); stroke: var(--ms-border-strong); stroke-width: 1.5; }
.tunnel__box--cf { stroke: var(--ms-accent); }
.tunnel__box--ms { stroke: var(--ms-brand-green); }
.tunnel__box--klein { stroke: color-mix(in srgb, var(--ms-brand-green) 55%, var(--ms-border)); }
.tunnel__box--klein + .tunnel__ico { stroke: var(--ms-brand-green); }
.tunnel__zweig { fill: none; stroke: color-mix(in srgb, var(--ms-brand-green) 55%, var(--ms-border)); stroke-width: 1.5; }
.tunnel__netz {
  fill: color-mix(in srgb, var(--ms-brand-green) 7%, transparent);
  stroke: color-mix(in srgb, var(--ms-brand-green) 55%, var(--ms-border));
  stroke-width: 1.5; stroke-dasharray: 6 5;
}
.tunnel__ico { fill: none; stroke: var(--ms-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tunnel__box--ms + .tunnel__ico { stroke: var(--ms-brand-green); }
.tunnel__titel { font-family: var(--ms-font-head); font-weight: 600; font-size: 17px; fill: var(--ms-text); }
.tunnel__klein { font-size: 12px; fill: var(--ms-text-muted); }
.tunnel__linie { stroke: var(--ms-accent); stroke-width: 2; }
.tunnel__schloss rect { fill: var(--ms-surface); }
.tunnel__schloss { fill: none; stroke: var(--ms-brand-green); stroke-width: 2; stroke-linecap: round; }
.tunnel__rohr { stroke: color-mix(in srgb, var(--ms-accent) 20%, transparent); stroke-width: 16; stroke-linecap: round; }
.tunnel__fluss {
  stroke: var(--ms-accent); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1 11; animation: tunnelfluss 1.1s linear infinite;
}
@keyframes tunnelfluss { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .tunnel__fluss { animation: none; } }
@media (max-width: 900px) { .tunnel { grid-template-columns: minmax(0, 1fr); } }

/* Plugin-Seiten: Text und Preisbox schließen ohne eigenen Abstand an den Kopf an,
   die Preisbox beginnt auf Höhe des Textes. */
.band--anschluss > .wrap { padding-top: var(--ms-4); }
.band--anschluss .shot { align-items: start; }

/* Newsletter-Hinweis am Ende von Beiträgen, Blogübersicht und FAQ */
.nl-hinweis {
  margin-top: var(--ms-8);
  padding: var(--ms-4) var(--ms-5);
  border: 1px solid var(--ms-border);
  border-left: 4px solid var(--ms-accent);
  border-radius: var(--ms-r-control);
  background: var(--ms-surface);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ms-1) var(--ms-3);
}
.nl-hinweis__titel { flex-basis: 100%; }
.nl-hinweis a { font-weight: 600; white-space: nowrap; }

/* ---------- Landingpages ($landing): Kopf ohne Menü ---------- */
.lockup + .topbar__actions { margin-left: auto; }
.topbar__tel {
  font-family: var(--ms-font-head); font-weight: 600; font-size: 15px;
  color: var(--ms-text); text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topbar__tel:hover { color: var(--ms-accent); }
.topbar__start { font-size: 15px; font-weight: 600; color: #00AA00; text-decoration: none; white-space: nowrap; }
/* Weiß beim Überfahren — im hellen Modus wäre Weiß auf dem weißen Kopf unsichtbar, dort Textfarbe. */
.topbar__start:hover { color: var(--ms-text); }
:root[data-theme="dark"] .topbar__start:hover { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar__start:hover { color: #FFFFFF; } }
@media (max-width: 420px) { .topbar__tel { display: none; } }

/* ---------- Landingpage /evolution/ ----------
   Seitenkopf = virtuelle Mitarbeiter (Meldungsfenster läuft). Weiter unten die Bühne:
   dieselbe Oberfläche, nur der Rahmen wechselt (App-Fenster, Browser im Firmennetz,
   Browser über den sicheren Tunnel). Ein Ziel: der Terminbereich #kontakt. */

.evo-held .wrap { padding-top: var(--ms-7); }
.evo-held__h1 {
  font-family: var(--ms-font-head); font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.1; letter-spacing: -.01em; color: #fff; text-wrap: balance;
}
.evo-held__h1 .h1-thema { color: #6FB6FF; }
.evo-punkte-liste { list-style: none; padding: 0; margin: var(--ms-2) 0 0; display: grid; gap: var(--ms-3); }
.evo-punkte-liste li {
  position: relative; padding-left: 28px;
  font-size: 18px; line-height: 1.45; color: var(--web-navy-muted);
}
.evo-punkte-liste li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--ms-brand-green) 25%, transparent);
  box-shadow: inset 0 0 0 4px var(--ms-brand-green);
}
.evo-punkte-liste b { color: #fff; font-weight: 600; }
.evo-held .vmaband__beispiel { margin-top: var(--ms-8); }
.evo-held__fuss { margin-top: var(--ms-5); font-size: 15px; color: var(--web-navy-muted); max-width: 70ch; }

.evo-ueberall {
  display: grid; gap: var(--ms-8); align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.evo-buehne { display: grid; gap: var(--ms-4); justify-items: center; }
.evo-fenster {
  position: relative; width: 100%;
  border: 1px solid var(--web-navy-line); border-radius: 12px;
  background: #0C161D; overflow: hidden;
  box-shadow: var(--ms-shadow-pop), 0 0 0 0 transparent;
  transition: box-shadow .6s ease, border-color .6s ease;
}
.evo-fenster img { display: block; width: 100%; height: auto; }
/* Das Bild bleibt immer gleich groß, nur die Leiste wechselt. Unterwegs: Ring in Akzentfarbe
   für die gesicherte Verbindung. */
.evo-buehne[data-ort="unterwegs"] .evo-fenster {
  border-color: var(--ms-accent);
  box-shadow: var(--ms-shadow-pop), 0 0 0 6px color-mix(in srgb, var(--ms-accent) 22%, transparent);
}
.evo-fenster::before { content: ""; display: block; height: 38px; background: #13212B; border-bottom: 1px solid #22394A; }
.evo-leiste {
  position: absolute; inset: 0 0 auto 0; height: 38px;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font-size: 13px; color: #9DB2C0;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.evo-buehne[data-ort="app"] .evo-leiste--app,
.evo-buehne[data-ort="browser"] .evo-leiste--browser,
.evo-buehne[data-ort="unterwegs"] .evo-leiste--unterwegs { opacity: 1; transform: none; transition-delay: .15s; }
.evo-leiste__logo { width: 14px; height: 14px; fill: var(--ms-brand-green); }
.evo-leiste--app span:nth-child(2) { font-weight: 600; color: #E6EEF2; }
.evo-leiste__knoepfe { margin-left: auto; display: flex; gap: 18px; }
.evo-leiste__knoepfe i { font-style: normal; color: #9DB2C0; }
.evo-punkte { display: flex; gap: 6px; }
.evo-punkte i { width: 10px; height: 10px; border-radius: 50%; background: #2A4255; }
.evo-adresse {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 24px; padding: 0 10px; border-radius: 6px; background: #0C161D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evo-adresse svg { width: 14px; height: 14px; flex: none; color: var(--ms-brand-green); }
/* Adresse in Markengrün, damit der Wechsel zwischen den Orten sofort auffällt. */
.evo-adresse__text { color: var(--ms-brand-green); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.evo-orte {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--ms-border); border-radius: 999px; background: var(--ms-surface);
}
.evo-ort {
  position: relative; overflow: hidden;
  font: 600 15px/1 var(--ms-font-head); color: var(--ms-text-muted);
  padding: 9px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
}
.evo-ort:hover { color: var(--ms-text); }
.evo-ort[aria-selected="true"] { color: var(--ms-text); background: var(--ms-surface-2); }
.evo-ort:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.evo-ort__lauf { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; }
.evo-ort__lauf span { display: block; height: 100%; background: var(--ms-accent-visual); transform: scaleX(0); transform-origin: left; }
.evo-buehne--laeuft .evo-ort[aria-selected="true"] .evo-ort__lauf span { animation: rundgang-lauf 4.5s linear forwards; }
.evo-ortstext { width: 100%; min-height: 3.2em; text-align: center; font-size: 16px; color: var(--ms-text-muted); }
.evo-ortstext b { color: var(--ms-text); }

.evo-neu { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ms-2) var(--ms-5); padding: 0; margin: 0; }
.evo-neu li { display: flex; align-items: center; gap: var(--ms-2); color: var(--web-navy-muted); font-size: 16px; }
.evo-neu li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-brand-green); }

.evo-wege { display: grid; gap: var(--ms-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evo-weg {
  display: grid; gap: var(--ms-4); align-content: start; justify-items: start;
  padding: var(--ms-6); border: 1px solid var(--ms-border); border-radius: var(--ms-r-card);
  background: var(--ms-surface);
}
.evo-weg h2 { font-size: var(--web-h3); }
.evo-weg p { color: var(--ms-text-muted); max-width: 52ch; }

.evo-leiste-unten { display: none; }

@media (max-width: 1000px) {
  .evo-ueberall { grid-template-columns: minmax(0, 1fr); gap: var(--ms-7); }
}
@media (max-width: 760px) {
  .evo-wege { grid-template-columns: minmax(0, 1fr); }
  .evo-weg { padding: var(--ms-5); }
  .evo-leiste-unten:not([hidden]) {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ms-surface) 94%, transparent);
    backdrop-filter: blur(8px); border-top: 1px solid var(--ms-border);
  }
  .evo-leiste-unten .btn { display: flex; justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .evo-fenster, .evo-leiste { transition: none; }
}

/* ---------- Landingpage-Test /evolution/index3.php ----------
   Grüner Seitenkopf (Bild band-hintergrund.webp) als Bühne; davor schweben die
   Datenfluss-Grafik, das Meldungsfenster der virtuellen Mitarbeiter und eine Karte zum
   Zugriff von außen. Einmal einfliegen, danach sanftes Schweben (nicht bei reduzierter Bewegung). */

.evo3 {
  position: relative; overflow: hidden; color: #fff;
  background-image:
    radial-gradient(60% 70% at 85% 30%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(100deg, rgba(8, 92, 24, .96) 0%, rgba(12, 120, 34, .9) 42%, rgba(20, 168, 48, .74) 100%),
    url("../img/band-hintergrund.webp");
  background-size: cover; background-position: center;
}
.evo3__raster {
  display: grid; gap: var(--ms-7); align-items: center;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: min(760px, calc(100vh - 64px));
  padding-block: var(--ms-8);
}
.evo3__marke {
  display: inline-block; margin: 0 0 var(--ms-4);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  font: 600 15px/1.2 var(--ms-font-head); letter-spacing: .02em;
}
.evo3 h1 {
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.01em;
  color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 40, 10, .35);
}
.evo3__lead { margin-top: var(--ms-5); font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 46ch; }
.evo3 .hero__cta { margin-top: var(--ms-6); }
.evo3__btn { background: #fff; color: #0A6B1C; box-shadow: 0 10px 28px rgba(0, 40, 10, .3); }
.evo3__btn:hover { background: #F1FAF2; color: #075216; }
.evo3__btn--rand { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.evo3__btn--rand:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.evo3__belege { list-style: none; padding: 0; margin: var(--ms-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--ms-2) var(--ms-5); font-size: 15px; color: rgba(255, 255, 255, .88); }
.evo3__belege li { display: flex; align-items: center; gap: 6px; }
.evo3__belege span { color: #FFD54A; letter-spacing: 1px; }

/* Bühne: nur die Datenfluss-Animation, frei auf dem grünen Grund — ohne Kasten. */
.evo3__buehne { min-width: 0; }
.evo3__buehne .datenfluss {
  filter: drop-shadow(0 18px 40px rgba(0, 30, 8, .35));
  animation: evo3-rein .9s cubic-bezier(.2,.7,.2,1) .1s both, evo3-schweben 8s ease-in-out 1.2s infinite;
}
/* Auf dem Grün in beiden Modi die helle Fassung: weiße Kacheln heben sich am besten ab.
   Spezifischer als die Regeln mit :root[data-theme] in .datenfluss__wrap. */
:root .evo3 .datenfluss__wrap .datenfluss__bild.datenfluss__bild--hell { display: block; }
:root .evo3 .datenfluss__wrap .datenfluss__bild.datenfluss__bild--dunkel { display: none; }

@keyframes evo3-rein { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes evo3-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (max-width: 1100px) {
  .evo3__raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .evo3__buehne .datenfluss { animation: none; }
}

/* ---------- Mobile Auftragserfassung ----------
   Der Beleg im Seitenkopf ist das eine auffällige Element: Satz sprechen, Maske füllt sich.
   Blau markiert wie im Programm, was die KI gerade geändert hat. */

.mob-kopf {
  display: grid; gap: var(--ms-8); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
}
.mob-beleg {
  margin: 0; min-width: 0;
  display: grid; gap: var(--ms-4); padding: var(--ms-5);
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-card);
  background: var(--ms-surface); box-shadow: var(--ms-shadow-pop);
}
.mob-beleg__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ms-3);
  font: 700 20px/1.25 var(--ms-font-head); color: var(--ms-text);
}
.mob-beleg__beispiel { font: 400 13px/1.2 var(--ms-font-body); color: var(--ms-text-muted); }

.mob-eingabe {
  display: flex; align-items: flex-start; gap: var(--ms-3); min-height: 72px;
  margin-top: var(--ms-4); padding: var(--ms-3);
  border: 1px solid var(--ms-border-strong); border-radius: var(--ms-r-control);
  font-size: 16px; line-height: 1.4; color: var(--ms-text);
}
.mob-eingabe__mikro {
  flex: none; width: 22px; height: 22px; color: var(--ms-text-muted);
  transition: color .2s ease;
}
.mob-eingabe--hoert { border-color: var(--ms-brand-green); }
.mob-eingabe--hoert .mob-eingabe__mikro { color: var(--ms-brand-green); animation: mob-hoert 1s ease-in-out infinite; }
@keyframes mob-hoert { 50% { transform: scale(1.18); } }

.mob-felder { display: grid; grid-template-columns: 2fr 3fr; gap: var(--ms-3); margin: var(--ms-4) 0 0; }
.mob-felder dt, .mob-summe dt { font-size: 13px; color: var(--ms-text-muted); font-weight: 400; }
.mob-felder dd { margin: 2px 0 0; padding: 2px 6px; margin-left: -6px; border-radius: 4px; font-weight: 600; color: var(--ms-text); }

.mob-zeilen { display: grid; gap: 2px; margin-top: var(--ms-4); min-height: 68px; }
.mob-zeile {
  display: grid; gap: var(--ms-2); align-items: center;
  grid-template-columns: minmax(0, 1fr) 32px 62px 68px;
  padding: 5px 6px; margin-inline: -6px; border-radius: 4px;
  font-size: 15px; color: var(--ms-text);
  transition: opacity .3s ease;
}
.mob-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.mob-neu { background: color-mix(in srgb, var(--ms-brand-blue) 16%, transparent); }
.mob-leer { opacity: 0; transition: none; }

.mob-summe { display: grid; gap: 3px; margin: var(--ms-3) 0 0; padding-top: var(--ms-3); border-top: 1px solid var(--ms-border); transition: opacity .3s ease; }
.mob-summe > div { display: flex; justify-content: space-between; gap: var(--ms-3); }
.mob-summe dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ms-text); }
.mob-summe__brutto dt, .mob-summe__brutto dd { font: 600 17px/1.3 var(--ms-font-head); color: var(--ms-text); }

.mob-anlegen {
  display: block; margin-top: var(--ms-4); padding: 10px var(--ms-4);
  border-radius: var(--ms-r-control); text-align: center; font-weight: 600;
  background: var(--ms-action); color: #FFF;
  transition: opacity .3s ease, box-shadow .3s ease;
}
.mob-anlegen--bereit { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ms-brand-green) 28%, transparent); }
.mob-nochmal {
  justify-self: start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ms-accent); text-decoration: underline;
}
/* Platz bleibt reserviert, damit die Karte und der Text daneben beim Einblenden nicht springen */
.mob-nochmal[hidden] { display: block; visibility: hidden; }

.mob-titel { margin-bottom: var(--ms-6); }
.mob-orte { display: grid; gap: var(--ms-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mob-ort {
  display: grid; gap: var(--ms-4); align-content: start; padding: var(--ms-6);
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-card); background: var(--ms-surface);
}
.mob-ort h3 { font-size: var(--web-h3); }
.mob-ort__satz { font-size: 18px; line-height: 1.5; color: var(--ms-text-muted); }

@media (max-width: 1000px) {
  .mob-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--ms-7); }
}
@media (max-width: 760px) {
  .mob-orte { grid-template-columns: minmax(0, 1fr); }
  .mob-ort { padding: var(--ms-5); }
}
@media (prefers-reduced-motion: reduce) {
  .mob-eingabe--hoert .mob-eingabe__mikro { animation: none; }
}

/* 404-Seite: Abstand zwischen Überschrift und Wegweiser-Karten */
.wegweiser { margin-top: var(--ms-6); }

/* Konfigurator „Nur Shopware-Plugins“: ausgeblendete Teile der Summenspalte */
.konf__summe [hidden] { display: none !important; }

/* Plugin-Karten: kleiner Screenshot oben, randlos bis an die Kartenkante */
.plugin__bild {
  display: block; overflow: hidden;
  margin: calc(-1 * var(--ms-5)) calc(-1 * var(--ms-5)) var(--ms-3);
  height: 136px;
  border-bottom: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card) var(--ms-r-card) 0 0;
  background: #fff;
}
.plugin__bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: left top;
  transition: transform .4s ease;
}
.plugin:hover .plugin__bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .plugin__bild img { transition: none; } .plugin:hover .plugin__bild img { transform: none; } }
:root[data-theme="dark"] .plugin__bild img { filter: brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plugin__bild img { filter: brightness(.88); } }

/* Kacheln auf hellem Band (.band--alt): Das Band selbst hat schon die Kartenfarbe,
   deshalb setzen sich die Kacheln mit der nächsten Flächenstufe davon ab. */
.band--alt :is(.card, .plugin, .kcard, .cta__card, .beitrag, .pricecard, .beiwerk__box) {
  background: var(--ms-surface-2);
}