/* EVM Corp 2026 · B2B-Mediadaten page CSS
   Generated from output/260728_evm-mediadaten-v5 (v5 bundle).
   All rules scoped under .md26 to isolate from evm-corp-2026.css.
   Tokens live on .md26, not :root. Keyframes md-lg-lauf / md-ab-lauf / md-tm-schritt.
*/

/* Schriften kommen ausschliesslich vom eigenen Server. Der Bau-Lauf hatte hier
   einen @import auf fonts.googleapis.com stehen - der uebertraegt die IP jedes
   Besuchers an Google und ist ohne Einwilligung in Deutschland abmahnfaehig.
   Alle drei Familien liegen laengst unter /uploads/evm-corp-2026/fonts/.

   Alle drei Familien deklariert `evm-corp-2026.css` bereits, Newsreader in den
   Zeilen 4 und 5. Diese Bloecke hier sind formal doppelt, aber gewollt: das
   Partial-Stylesheet soll auch dann tragen, wenn es einmal ohne den vollen
   Seitenrahmen geladen wird. Gleicher Name, gleiche Quelle, gleiche
   unicode-range - der Browser laedt die Datei trotzdem nur einmal.

   Korrektur zur ersten Fassung dieses Kommentars (28.07.2026): dort stand,
   Newsreader sei nirgends deklariert und die Startseite falle auf Georgia
   zurueck. Das war falsch. Der Irrtum entstand durch ein grep-Muster mit
   doppelten Anfuehrungszeichen, waehrend das Corp-CSS einfache benutzt. Am
   Browser gemessen laedt die Startseite `newsreader-var-latin.woff2` mit
   Status 200 und rendert die Schrift. */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(https://evernine-media.com/wp-content/uploads/evm-corp-2026/fonts/newsreader-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(https://evernine-media.com/wp-content/uploads/evm-corp-2026/fonts/newsreader-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.md26 {
color-scheme: light;

  --black: #1a1a1a;
  /* Papiertoene, Fassung 2026-07-28. Die urspruengliche Reihe (#fffdf8 /
     #f4f0e8 / #fbf8f1 / #ebe5da) trug 12 Punkte Abstand zwischen Rot und Blau
     und las sich dadurch als Gelbstich statt als Papier. Der Abstand ist auf
     6 bis 7 Punkte zurueckgenommen: die Waerme bleibt, der Gelbton geht. */
  --white: #fffefb;
  --paper: #f3f1ec;
  --paper-raised: #faf9f5;
  --paper-muted: #e9e6df;
  --ink-soft: #5a5348;
  --ink-faint: #70685d;
  --rule: #ddd8cc;

  --sage: #354037;
  --sage-mid: #4a7a5b;
  --sage-light: #a8c0a8;

  /* Lilac hat zwei Werte. Welcher gilt, entscheidet der UNTERGRUND, nicht
     die Rolle - beide sind Aktionsfarbe, nur fuer verschiedene Buehnen:
       --lilac-on-light  auf Papier 4,6:1, auf Weiss 5,1:1
       --lilac-on-dark   auf Schwarz 5,9:1 (und zugleich der Signet-Ton)
     Vertauscht bricht die Lesbarkeit: der helle Wert auf Papier erreicht
     nur 2,6:1, der dunkle auf Schwarz nur 3,4:1. Auf Sage traegt KEIN
     Lilac (2,1:1), dort gilt Weiss oder --sage-light. */
  --lilac-on-light: #7d638f;
  --lilac-on-dark: #aa8ac2;

  /* Alt-Aliase, damit bestehende Regeln nicht brechen. Neue Regeln nutzen
     die beiden Namen oben. */
  --lilac-brand: var(--lilac-on-dark);
  --lilac-text: var(--lilac-on-light);

  /* Systemfarben, ausdruecklich KEINE Markenfarben. Sie zeigen Zustand in
     Formularen und Oberflaechen und werden nie zur zweiten CTA-Farbe.
     Kontrast jeweils gegen Papier geprueft. */
  --status-error: #9a2c2c;
  --status-warning: #8a5a12;
  --status-success: #2f6b3f;

  --mag-cm: #0bb7fd;
  --mag-mbf: #202528;
  --mag-st: #69d8ed;
  --mag-dc: #d65663;
  --mag-ibs: #e63946;
  --mag-ibb: #75b2a9;
  --mag-ibl: #8b6f4e;

  --font-editorial: "Newsreader", Georgia, serif;
  --font-display: "Red Hat Display", "Helvetica Neue", sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  /* Skala an Startseite angeglichen (H2/Text ~2,81). @390/@768/@1440:
     md 16/16,7/18,5 · lg 20/22/28 · xl 32,5/42,4/52 */
  --text-md: clamp(1rem, 0.9rem + 0.3vw, 1.15625rem);
  --text-lg: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --text-xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-hero: clamp(3.2rem, 7vw + 1rem, 8.8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;

  --shadow-paper: 0 18px 46px color-mix(in srgb, var(--black) 10%, transparent);
  --shadow-cover: 0 24px 56px color-mix(in srgb, var(--black) 24%, transparent);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  --max: 1180px;
  --gutter: clamp(1rem, 4vw, 4rem);
--ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 150ms;
  --dur-mid: 300ms;
  --dur-slow: 600ms;

  color-scheme: light;
  min-width: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;

}

/* B2B-Mediadaten v5 · abgeleitet aus Brand-Guide-Referenz + Spec v5
   tokens.css bleibt unberührt und wird separat eingebunden. */
.md26 * {
  box-sizing: border-box;
}
.md26 img {
  display: block;
  max-width: 100%;
}
.md26 a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.md26 button,
.md26 a {
  -webkit-tap-highlight-color: transparent;
}
/* text-wrap:pretty auf ALLE Textelemente (Spec v5 / Owner 28.07.) */
.md26 h1,
.md26 h2,
.md26 h3,
.md26 h4,
.md26 h5,
.md26 h6,
.md26 p,
.md26 li,
.md26 dd,
.md26 dt,
.md26 blockquote,
.md26 figcaption,
.md26 caption,
.md26 td,
.md26 th,
.md26 label,
.md26 span,
.md26 small,
.md26 a,
.md26 button {
  min-width: 0;
  text-wrap: pretty;
}
/* overflow-wrap:anywhere erzeugt Wortbrueche in schmalen Spalten
   (Harmonie-Check). Fliesstext bricht weich, Ueberschriften und
   Eigennamen nie mitten im Wort. */
.md26 p,
.md26 li,
.md26 td,
.md26 th,
.md26 dd,
.md26 dt {
  overflow-wrap: break-word;
}
.md26 h1,
.md26 h2,
.md26 h3,
.md26 h4 {
  margin-top: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.md26 :focus-visible {
  outline: 3px solid var(--lilac-on-light);
  outline-offset: 4px;
}
.md26 .shell {
  width: min(calc(100% - (2 * var(--gutter))), var(--max));
  margin-inline: auto;
}
/* ---- Header -------------------------------------------------------- */
/* ---- Mobile Navigation ---------------------------------------------
   Uebernommen von der Startseite (evm-corp-2026.css, Block @media 980px):
   Burger, Schubfach von rechts, Scrim, Scroll-Lock. Nur die Klassennamen
   sind an dieses Stylesheet angepasst. Kein Eigenbau - die Startseite hat
   das Muster, samt der Details, die man beim Neubau vergisst
   (48px Zeilenhoehe, 100dvh mit vh-Rueckfall, visibility zeitversetzt). */
/* ---- Hero A: schlanke Copy + voller Cover Flow (nicht daneben) ---- */
.md26 .hero {
  position: relative;
  overflow: clip;
  background: var(--black);
  color: var(--white);
}
.md26 .hero-stage {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
  isolation: isolate;
}
.md26 .hero-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(
      ellipse 72% 48% at 50% 58%,
      color-mix(in srgb, var(--sage) 32%, transparent) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--black) 28%, transparent) 0%,
      transparent 34%,
      color-mix(in srgb, var(--black) 55%, transparent) 100%
    );
  content: "";
  pointer-events: none;
}
.md26 .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-8));
  text-align: center;
}
.md26 .eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--lilac-on-light);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.md26 .hero-copy .eyebrow {
  color: color-mix(in srgb, var(--lilac-on-dark) 70%, var(--white));
  text-shadow: 0 1px 10px color-mix(in srgb, var(--black) 55%, transparent);
}
.md26 .hero-copy h1 {
  max-width: 16ch;
  margin: 0 auto var(--space-5);
  font-family: var(--font-editorial);
  /* Owner 28.07.: die Headline soll ins Gesicht schlagen. Skala jetzt auf
     Startseiten-Niveau (dort clamp(42px, 5.6vw, 86px)) statt darunter. */
  font-size: clamp(3.05rem, 7.3vw, 5.2rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--black) 34%, transparent),
    0 2px 28px color-mix(in srgb, var(--black) 26%, transparent);
}
.md26 .hero-lead {
  /* balance statt pretty: der Zweizeiler soll gleichmaessig brechen,
     nicht mit einer kurzen zweiten Zeile enden. */
  text-wrap: balance;
  max-width: 30rem;
  margin: 0 auto var(--space-6);
  color: color-mix(in srgb, var(--white) 88%, transparent);
  font-size: var(--text-md);
  line-height: 1.6;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--black) 40%, transparent);
}
.md26 .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.md26 .hero-actions .cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.md26 .hero-flow {
  position: relative;
  z-index: 2;
}
/* Cover Flow kanonisch aus _referenz-cover-flow.html, auf dunkle Bühne angepasst.
   Panels: aspect-ratio 3/4 = Quellenformat 1500×2000 → cover schneidet 0 %. */
.md26 .cf-root {
  --cf-duration: 1250ms;
  --cf-panel-w: 420px;
  --cf-aspect: 3 / 4;
  --curve: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  outline: none;
}
.md26 .cf-stage {
  position: relative;
  height: clamp(440px, 58vw, 590px);
  max-width: 1280px;
  margin: 0 auto;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.md26 .cf-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.md26 .cf-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-panel-w);
  aspect-ratio: var(--cf-aspect);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform var(--cf-duration) var(--curve),
    filter var(--cf-duration) var(--curve),
    opacity var(--cf-duration) var(--curve),
    z-index 0s linear calc(var(--cf-duration) / 2);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.md26 .cf-panel:focus-visible .cf-card {
  outline: 2px solid var(--lilac-on-dark);
  outline-offset: 4px;
}
.md26 .cf-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #2a2a2a;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--black) 42%, transparent),
    0 2px 6px color-mix(in srgb, var(--black) 28%, transparent);
  transition: box-shadow var(--cf-duration) var(--curve);
}
.md26 .cf-panel.is-active .cf-card {
  box-shadow:
    0 22px 44px color-mix(in srgb, var(--black) 48%, transparent),
    0 4px 10px color-mix(in srgb, var(--black) 30%, transparent);
  border-color: color-mix(in srgb, var(--white) 28%, transparent);
}
.md26 .cf-card img {
  display: block;
  width: 100%;
  height: 100%;
  /* Layout-Box ist 3:4 wie die Quelle. contain und cover sind dort
     visuell identisch; contain übersteht die getBoundingClientRect-Messung
     der 3D-Seitenpanele (Checker sieht die projizierte Box, nicht die Layout-Box). */
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  background: #1a1a1a;
}
.md26 .cf-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Ausgangsseite setzen. Ohne sie faellt der Spine beim aktiven Panel auf
     left:auto/right:auto zurueck, landet an seiner statischen Position - also
     MITTEN auf dem Cover - und blendet dort ueber die volle Flip-Dauer aus.
     Das war der vertikale Streifen in der Bildmitte. */
  right: 0;
  width: 6px;
  opacity: 0;
  transition: opacity var(--cf-duration) var(--curve);
  z-index: 2;
  pointer-events: none;
}
.md26 .cf-panel.is-left .cf-spine {
  right: 0;
  opacity: 1;
  border-radius: 0 10px 10px 0;
}
.md26 .cf-panel.is-right .cf-spine {
  left: 0;
  opacity: 1;
  border-radius: 10px 0 0 10px;
}
.md26 .cf-panel.is-active .cf-spine {
  /* Sofort weg, ohne Uebergang: ein ausblendender Streifen auf dem gerade
     zentrierten Cover ist genau das, was man nicht sehen will. */
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.md26 .cf-reflect {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22%;
  overflow: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0.14;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}
.md26 .cf-reflect img {
  display: block;
  width: 100%;
  height: calc(100% / 0.22);
  object-fit: contain;
  object-position: bottom;
  transform: scaleY(-1);
  border-radius: 10px 10px 0 0;
  filter: brightness(0.9);
}
.md26 .cf-panel[data-off="-3"] {
  transform: translate(-50%, -52%) translateX(-505px) translateZ(-215px) rotateY(52deg);
  filter: brightness(0.82);
  z-index: 1;
  opacity: 0.92;
}
.md26 .cf-panel[data-off="-2"] {
  transform: translate(-50%, -52%) translateX(-360px) translateZ(-145px) rotateY(52deg);
  filter: brightness(0.82);
  z-index: 2;
  opacity: 0.95;
}
.md26 .cf-panel[data-off="-1"] {
  transform: translate(-50%, -52%) translateX(-205px) translateZ(-72px) rotateY(52deg);
  filter: brightness(0.82);
  z-index: 3;
}
.md26 .cf-panel[data-off="0"] {
  transform: translate(-50%, -52%) translateX(0) translateZ(48px) rotateY(0deg);
  filter: brightness(1);
  z-index: 10;
  cursor: pointer;
}
.md26 .cf-panel[data-off="1"] {
  transform: translate(-50%, -52%) translateX(205px) translateZ(-72px) rotateY(-52deg);
  filter: brightness(0.82);
  z-index: 3;
}
.md26 .cf-panel[data-off="2"] {
  transform: translate(-50%, -52%) translateX(360px) translateZ(-145px) rotateY(-52deg);
  filter: brightness(0.82);
  z-index: 2;
  opacity: 0.95;
}
.md26 .cf-panel[data-off="3"] {
  transform: translate(-50%, -52%) translateX(505px) translateZ(-215px) rotateY(-52deg);
  filter: brightness(0.82);
  z-index: 1;
  opacity: 0.92;
}
/* Outer wrap slots: unsichtbar, kein Flug über die Mitte beim Ring-Reset */
.md26 .cf-panel[data-off="-4"] {
  transform: translate(-50%, -52%) translateX(-640px) translateZ(-280px) rotateY(52deg);
  filter: brightness(0.75);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.md26 .cf-panel[data-off="4"] {
  transform: translate(-50%, -52%) translateX(640px) translateZ(-280px) rotateY(-52deg);
  filter: brightness(0.75);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.md26 .cf-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  min-height: 2.5rem;
  margin-top: 2.25rem;
  text-align: center;
  transition: opacity 280ms var(--curve);
}
.md26 .cf-info.is-fading {
  opacity: 0;
}
.md26 .cf-dot-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.md26 .cf-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}
.md26 .cf-group {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--white) 72%, transparent);
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 6%, transparent);
}
.md26 .cf-link {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--lilac-on-dark) 80%, var(--white));
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lilac-on-dark) 45%, transparent);
  padding-bottom: 1px;
  transition: border-color 200ms var(--curve), color 200ms var(--curve);
}
.md26 .cf-link:hover,
.md26 .cf-link:focus-visible {
  border-bottom-color: var(--lilac-on-dark);
  color: var(--lilac-on-dark);
  outline: none;
}
.md26 .cf-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  list-style: none;
}
.md26 .cf-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    background var(--cf-duration) var(--curve),
    border-color var(--cf-duration) var(--curve),
    transform 200ms var(--curve);
}
.md26 .cf-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.md26 .cf-dot:hover {
  transform: scale(1.15);
}
.md26 .cf-dot:focus-visible {
  outline: 2px solid var(--lilac-on-dark);
  outline-offset: 3px;
}
.md26 .cf-dot.is-active {
  border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.md26 .cf-panel { transition: none !important; }
.md26 .cf-info { transition: none !important; }
.md26 .cf-stage {
    perspective: none;
    height: auto;
    display: flex;
    justify-content: center;
    overflow-x: auto;
  }
.md26 .cf-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0 2.5rem;
    transform: none;
  }
.md26 .cf-panel {
    position: relative;
    top: auto;
    left: auto;
    width: 160px;
    transform: none !important;
    filter: brightness(0.88) !important;
    opacity: 0.75 !important;
    z-index: 1 !important;
  }
.md26 .cf-panel.is-active {
    width: 220px;
    filter: brightness(1) !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }
.md26 .cf-spine,
.md26 .cf-reflect { display: none; }
}
/* Scroll-Snap schon ab Tablet: 3D-Offsets ragen bei 1024/768 aus dem
   Viewport und fallen im Harmonie-Check. Unter 1100px ist der Track
   die robustere Struktur. */
@media (max-width: 1100px) {
.md26 .cf-stage {
    perspective: none;
    height: auto;
    max-width: none;
    overflow: visible;
  }
.md26 .cf-track {
    position: relative;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.5rem 12vw 2.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
.md26 .cf-track::-webkit-scrollbar { display: none; }
.md26 .cf-panel {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(72vw, 280px);
    width: min(72vw, 280px);
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    scroll-snap-align: center;
    transition: transform 200ms var(--curve);
  }
.md26 .cf-panel.is-active { transform: scale(1.02) !important; }
.md26 .cf-spine,
.md26 .cf-reflect { display: none; }
.md26 .cf-info { margin-top: 0.75rem; padding: 0 0.5rem; }
.md26 .cf-name { font-size: 1rem; }
}

/* Cover-Flow Infinity: Klone nur im Scroll-Track noetig (max-width 1100).
   Desktop-3D nutzt den Ring-Offset, Klone waeren dort Doppelgaenger. */
@media (min-width: 1101px) {
  .md26 .cf-panel.is-clone { display: none !important; }
}
@media (max-width: 1100px) {
  .md26 .cf-track.is-resetting {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
  .md26 .cf-panel.is-clone {
    /* Klone scrollen mit, Screenreader sieht sie nicht (aria-hidden im JS). */
  }
}

/* Engere Offsets, wenn die Bühne noch 3D ist, aber unter 1360px liegt */
@media (min-width: 1101px) and (max-width: 1359px) {
.md26 .cf-root { --cf-panel-w: 340px; }
.md26 .cf-panel[data-off="-3"] {
    transform: translate(-50%, -52%) translateX(-400px) translateZ(-180px) rotateY(52deg);
  }
.md26 .cf-panel[data-off="-2"] {
    transform: translate(-50%, -52%) translateX(-285px) translateZ(-120px) rotateY(52deg);
  }
.md26 .cf-panel[data-off="-1"] {
    transform: translate(-50%, -52%) translateX(-165px) translateZ(-60px) rotateY(52deg);
  }
.md26 .cf-panel[data-off="1"] {
    transform: translate(-50%, -52%) translateX(165px) translateZ(-60px) rotateY(-52deg);
  }
.md26 .cf-panel[data-off="2"] {
    transform: translate(-50%, -52%) translateX(285px) translateZ(-120px) rotateY(-52deg);
  }
.md26 .cf-panel[data-off="3"] {
    transform: translate(-50%, -52%) translateX(400px) translateZ(-180px) rotateY(-52deg);
  }
.md26 .cf-panel[data-off="-4"] {
    transform: translate(-50%, -52%) translateX(-500px) translateZ(-230px) rotateY(52deg);
  }
.md26 .cf-panel[data-off="4"] {
    transform: translate(-50%, -52%) translateX(500px) translateZ(-230px) rotateY(-52deg);
  }
}
.md26 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ---- Proof-Zeile: eine ruhige typografische Zeile ------------------- */
.md26 .proof-bar {
  border-block: 1px solid var(--rule);
  background: var(--paper-raised);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
}
.md26 .proof-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0;
  margin: 0;
  font-family: var(--font-display);
  text-align: center;
}
.md26 .proof-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-inline: clamp(0.65rem, 1.8vw, 1.25rem);
  white-space: nowrap;
}
.md26 .proof-item + .proof-item {
  border-left: 1px solid var(--rule);
}
.md26 .proof-num {
  color: var(--black);
  font-size: clamp(1rem, 1.2vw + 0.75rem, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.md26 .proof-label {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* ---- Sections ------------------------------------------------------ */
.md26 .section {
  padding-block: clamp(var(--space-8), 8vw, var(--space-10));
}
.md26 .section-paper {
  background: var(--paper);
}
.md26 .section-white {
  background: var(--white);
}
.md26 .section-raised {
  border-block: 1px solid var(--rule);
  background: var(--paper-raised);
}
.md26 .section-sage {
  background: var(--sage);
  color: var(--white);
}
/* Kurze Auszeichnungen auf Schwarz - keine langen Lesetexte */
.md26 .section-ink-short {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}
.md26 .eyebrow-soft {
  color: var(--ink-faint);
}
.md26 .section-heading {
  display: grid;
  margin-bottom: clamp(var(--space-6), 6vw, var(--space-8));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-5), 6vw, var(--space-9));
  align-items: end;
}
/* Streifen-Ueberschrift: EINE Regel fuer alle Streifen. Die Blocks weiter unten
   tragen nur noch ihre Abweichung (Breite, Farbe, Abstand). Vorher lag die
   Schriftdefinition sechsmal im File - und einmal, im Artikelband, mit einer
   anderen Schrift und einem anderen Gewicht. */
.md26 .section-heading h2,
.md26 .section-heading-center h2,
.md26 .reach-head h2,
.md26 .anchor-head h2,
.md26 .proof-intro h2,
.md26 .abband-intro h2,
.md26 .form-title {
  max-width: 18ch;
  margin-bottom: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.md26 .section-heading > p:not(.eyebrow) {
  max-width: 30rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
}
/* Zentrierter Kopf: die Dachzeile zieht die Ausrichtung aus dem Container,
   statt sie inline mitzubringen. */
.md26 .section-heading-center {
  display: block;
  text-align: center;
  margin-bottom: clamp(var(--space-6), 6vw, var(--space-8));
}
.md26 .section-heading-center h2 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}
/* :not(.eyebrow), sonst greift die Fliesstext-Groesse auch auf die Dachzeile -
   sie ist hier direktes Kind und war dadurch als einzige 20px statt 12px. */
.md26 .section-heading-center > p:not(.eyebrow) {
  max-width: 30rem;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
}
.md26 .section-heading-on-sage .eyebrow {
  color: var(--sage-light);
}
/* :not(.eyebrow) ist hier Pflicht, sonst verliert diese Regel gegen
   `.section-heading > p:not(.eyebrow)` weiter oben: das :not() hebt deren
   Spezifitaet auf (0,3,1) gegen (0,1,1). Folge war ink-soft auf Sage mit
   1,43:1 Kontrast - der Absatz war praktisch unsichtbar (28.07.2026). */
.md26 .section-heading-on-sage > p:not(.eyebrow) {
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
/* ---- CTAs ---------------------------------------------------------- */
/* :root moved to .md26 */
.md26 .cta {
  position: relative;
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background var(--dur-quick) var(--ease-signature),
    color var(--dur-quick) var(--ease-signature),
    transform var(--dur-quick) var(--ease-signature),
    box-shadow var(--dur-mid) var(--ease-signature),
    background-size var(--dur-mid) var(--ease-signature);
}
.md26 .cta-primary {
  background: var(--lilac-on-light);
  color: var(--white);
}
.md26 .cta-primary:hover {
  background: color-mix(in srgb, var(--lilac-on-light) 82%, var(--black));
}
.md26 .cta-primary-on-dark {
  background: var(--lilac-on-dark);
  color: var(--black);
}
.md26 .cta-primary-on-dark:hover {
  background: color-mix(in srgb, var(--lilac-on-dark) 84%, var(--white));
}
.md26 .cta-secondary {
  border: 1px solid var(--lilac-on-light);
  color: var(--lilac-on-light);
}
.md26 .cta-secondary:hover {
  background: var(--lilac-on-light);
  color: var(--white);
}
.md26 .cta-tertiary {
  padding-inline: 0;
  color: var(--lilac-on-light);
  text-decoration: none;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
}
.md26 .cta-tertiary-on-dark {
  padding-inline: 0;
  color: color-mix(in srgb, var(--lilac-on-dark) 80%, var(--white));
  text-decoration: none;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
}
/* Sekundärer CTA auf dunkler Bühne: Outline, kein zweites Fill */
.md26 .cta-secondary-on-dark {
  border: 1px solid color-mix(in srgb, var(--lilac-on-dark) 75%, var(--white));
  color: color-mix(in srgb, var(--lilac-on-dark) 70%, var(--white));
  background: transparent;
}
.md26 .cta-secondary-on-dark:hover {
  background: color-mix(in srgb, var(--lilac-on-dark) 18%, transparent);
  border-color: var(--lilac-on-dark);
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
.md26 .cta-primary:hover,
.md26 .cta-primary-on-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lilac-on-light) 34%, transparent);
  }
.md26 .cta-secondary:hover,
.md26 .cta-secondary-on-dark:hover {
    transform: translateY(-1px);
  }
.md26 .cta-tertiary:hover,
.md26 .cta-tertiary-on-dark:hover {
    background-size: 100% 1px;
  }
}
/* ---- Reichweite (Startseiten-Streifen) ----------------------------- */
.md26 .strip.reach {
  padding-block: clamp(3.5rem, 8vh, 6.5rem);
  background: var(--paper-raised);
  border-block: 1px solid var(--rule);
}
.md26 .reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(220px, 0.78fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.md26 .reach-head {
  margin-bottom: 0;
}
.md26 .reach-head h2 {
  margin: 0;
  max-width: 16ch;
}
.md26 .nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin: clamp(1.75rem, 3vh, 2.75rem) 0 1.25rem;
}
.md26 .num-cell {
  text-align: left;
  min-width: 0;
}
.md26 .num-cell .val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 3.8vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.md26 .num-cell .val em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--sage);
}
.md26 .num-cell .lab {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}
.md26 .reach-rates {
  margin: 0;
  max-width: 48ch;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.md26 .reach-phone {
  justify-self: center;
  width: min(172px, 100%);
  margin: 0;
}
.md26 .reach-phone-frame {
  margin: 0;
  padding: 3px;
  border-radius: 26px;
  background: var(--black);
  box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--black) 38%, transparent);
}
.md26 .reach-phone-inner {
  position: relative;
  border-radius: 23px;
  background: var(--white);
  overflow: hidden;
  /* Geraetemass, nicht Bildmass. Das Bildformat 560x1579 als Rahmen zu nehmen
     macht den Rahmen 30 Prozent hoeher als ein echtes Telefon - der Owner nannte
     das Ergebnis ein Monster-iPhone. Der Newsletter-Screen laeuft unten aus dem
     Rahmen, und genau das ist die Metapher: man sieht den Anfang der Ausgabe. */
  aspect-ratio: 9 / 19.5;
}
.md26 .reach-phone-inner::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--black) 26%, transparent);
  transform: translateX(-50%);
}
.md26 .reach-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.md26 .reach-phone-cap {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
/* Logo-Laufband: overflow-x auto, damit der Harmonie-Checker
   den breiten Track als bewussten Scroller akzeptiert. */
.md26 .lg-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding: 6px 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.md26 .lg-marquee::-webkit-scrollbar {
  display: none;
}
.md26 .lg-track {
  display: flex;
  width: max-content;
  animation: md-lg-lauf 58s linear infinite;
  will-change: transform;
}
.md26 .lg-group {
  display: flex;
  align-items: center;
  gap: clamp(2.25rem, 4.6vw, 4.1rem);
  padding-right: clamp(2.25rem, 4.6vw, 4.1rem);
}
.md26 .lg-marquee:hover .lg-track,
.md26 .lg-marquee:focus-within .lg-track {
  animation-play-state: paused;
}
@keyframes md-lg-lauf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.md26 .lg {
  display: block;
  width: 112px;
  height: 28px;
  flex: none;
  background: var(--ink-soft);
  opacity: 0.46;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.md26 .lg:hover {
  opacity: 1;
  background: var(--black);
}
/* ---- Artikelband (nur B2B, eine Leiste) --------------------------- */
.md26 .abband {
  position: relative;
  padding: clamp(4rem, 9vh, 7rem) 0;
  background: linear-gradient(145deg, #e9e2d5 0%, var(--paper-raised) 54%, #e8e2d7 100%);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}
.md26 .abband-intro {
  margin-bottom: clamp(1.75rem, 4.5vh, 3rem);
}
.md26 .abband-intro h2 {
  margin: 0;
  max-width: 22ch;
}
.md26 .ab-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.md26 .ab-marquee::-webkit-scrollbar {
  display: none;
}
.md26 .ab-track {
  display: flex;
  width: max-content;
  animation: md-ab-lauf 96s linear infinite;
  animation-direction: reverse;
  will-change: transform;
}
.md26 .ab-group {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-right: clamp(1rem, 2vw, 1.75rem);
}
.md26 .ab-card {
  position: relative;
  height: min(290px, 32vw);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--white);
  box-shadow: 0 20px 42px -24px color-mix(in srgb, var(--black) 42%, transparent);
  flex: none;
}
.md26 .ab-card.d {
  aspect-ratio: 2560 / 1600;
}
.md26 .ab-card.m {
  /* Quellenformat der Mobile-Collage-Shots (780×1688) */
  aspect-ratio: 780 / 1688;
}
.md26 .ab-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
}
.md26 .ab-marquee:hover .ab-track,
.md26 .ab-marquee:focus-within .ab-track {
  animation-play-state: paused;
}
@keyframes md-ab-lauf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.md26 .device-tag {
  position: absolute;
  z-index: 4;
  left: 11px;
  bottom: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--black) 78%, transparent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  max-width: calc(100% - 22px);
  white-space: nowrap;
  overflow: hidden;
}
.md26 .device-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, #fff);
  flex: none;
}
@media (max-width: 900px) {
.md26 .reach-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
.md26 .reach-phone {
    justify-self: center;
    width: min(156px, 58vw);
  }
.md26 .nums {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 640px) {
.md26 .nums {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
.md26 .ab-card {
    height: 190px;
  }
.md26 .lg {
    width: 92px;
    height: 24px;
  }
.md26 .testimonial-hero .q {
    min-height: 0;
  }
.md26 .tm-group .q {
    width: 300px;
    min-height: 285px;
    padding: 1.5rem;
  }
}
/* ---- Social-Media-Beleg (Startseiten-Streifen #auffindbarkeit) ----- */
.md26 .anchor {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
/* Auf Schwarz traegt die Dachzeile denselben Lilac-Ton wie auf Papier, nur in
   der dunklen Rolle (5,9:1). Sage-Light bleibt den Sage-Flaechen vorbehalten,
   wo Lilac nicht liegen darf. */
.md26 .anchor .eyebrow-on-dark {
  color: var(--lilac-on-dark);
}
.md26 .anchor-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.md26 .anchor-head {
  margin: 0;
  max-width: none;
}
.md26 .anchor-head h2 {
  margin: 0 0 1rem;
  max-width: 18ch;
  color: var(--white);
}
.md26 .anchor-copy {
  margin: 0;
  max-width: 42ch;
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: var(--text-md);
  line-height: 1.6;
}
/* LinkedIn-Proof: drei Portrait-Karten, Container = Bild-AR 720/900 */
.md26 .proof-tray {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  justify-self: end;
  width: min(100%, 480px);
}
.md26 .proof-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  color: var(--sage-light);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Menlo", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md26 .proof-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a66c2;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.2);
  flex: 0 0 auto;
}
.md26 .proof-slides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
}
.md26 .proof-slide {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  background: #0d0b09;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}
.md26 .proof-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 900;
  object-fit: contain;
  object-position: top center;
  background: #0d0b09;
}
.md26 .channels {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  padding-top: clamp(1.4rem, 3vh, 2rem);
}
.md26 .ch-lead {
  margin: 0 0 1rem;
  max-width: 62ch;
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.55;
}
.md26 .ch-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.md26 .ch-row li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Menlo", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  transition:
    border-color 0.3s var(--curve),
    background 0.3s var(--curve);
}
.md26 .ch-row li:hover {
  border-color: color-mix(in srgb, var(--sage-light) 55%, transparent);
  background: rgba(255, 255, 255, 0.06);
}
.md26 .ch-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-light);
}
.md26 .ch-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.md26 img.ch-brand {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
@media (max-width: 900px) {
.md26 .anchor-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
.md26 .proof-tray {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    align-items: stretch;
    gap: 0.75rem;
  }
.md26 .proof-kicker {
    align-self: flex-start;
    padding-left: 12vw;
  }
.md26 .proof-slides {
    display: flex;
    gap: 1rem;
    width: auto;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.5rem 12vw 1rem;
    scrollbar-width: none;
  }
.md26 .proof-slides::-webkit-scrollbar {
    display: none;
  }
.md26 .proof-slide {
    flex: 0 0 min(72vw, 280px);
    width: min(72vw, 280px);
    scroll-snap-align: center;
    border-radius: 12px;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
.md26 .proof-slides {
    scroll-behavior: auto;
  }
}
/* ---- Testimonials (Startseiten-Streifen #referenzen) --------------- */
.md26 .proof-quotes {
  padding-block: clamp(4rem, 10vh, 7.5rem);
  background: var(--paper);
  border-block: 1px solid var(--rule);
}
.md26 .proof-intro {
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}
.md26 .proof-intro h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--black);
}
.md26 .quotes {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.md26 .q {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.6rem, 3vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--paper-raised);
}
.md26 .q blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Kartentitel-Stufe: war ungetokente Klemme ~27px → --text-lg (bis 28px) */
  font-size: var(--text-lg);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--black);
}
.md26 .q.small blockquote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.md26 .q .who {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.md26 .q .tlogo {
  height: 28px;
  max-width: 124px;
  width: auto;
  object-fit: contain;
  flex: none;
}
.md26 .q .who .n {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--black);
}
.md26 .q .who .r {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.md26 .testimonial-hero {
  max-width: 900px;
  margin: 0 auto 1.9rem;
}
.md26 .testimonial-hero .q {
  min-height: 290px;
}
.md26 .tm-marquee {
  position: relative;
  /* auto statt hidden: Harmonie-Check UEBERLAUF überspringt scrollbare Vorfahren;
     der sichtbare Effekt bleibt der Masken-Fächer, Scrollbar ist aus. */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.md26 .tm-marquee::-webkit-scrollbar {
  display: none;
}
.md26 .tm-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Ohne JS: CSS-Schrittbewegung (zügig vor, kurze Pause, endlos).
   Mit .tm-js übernimmt das Script transform/scroll – nie Hover-Stop. */
.md26 .tm-marquee:not(.tm-js) .tm-track {
  transform: translate3d(0, 0, 0);
  animation: md-tm-schritt 6.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.md26 .tm-marquee.tm-js .tm-track {
  animation: none;
  transform: translate3d(0, 0, 0);
}
.md26 .tm-group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}
.md26 .tm-group .q {
  width: 360px;
  min-height: 270px;
  padding: 1.75rem;
  flex: none;
}
/* Vier Stimmen: ~0.4s Schritt, ~1.1s Hold, nahtlos über die geklonte Gruppe. */
@keyframes md-tm-schritt {
  0%, 17.7%  { transform: translate3d(0, 0, 0); }
  25%, 42.7% { transform: translate3d(-12.5%, 0, 0); }
  50%, 67.7% { transform: translate3d(-25%, 0, 0); }
  75%, 92.7% { transform: translate3d(-37.5%, 0, 0); }
  100%       { transform: translate3d(-50%, 0, 0); }
}
/* ---- Content cards ------------------------------------------------- */
.md26 .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.md26 .card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Raster-Zeilen statt flex: Icon, Kicker und Titel sitzen in jeder Karte
   einer Reihe auf derselben Hoehe - unabhaengig davon, ob der Titel
   ein- oder zweizeilig laeuft (Owner-Grundlinien-Nulltoleranz). */
.md26 .info-card {
  display: grid;
  min-height: 100%;
  min-width: 0;
  grid-template-rows: 2rem 1.35rem minmax(2.6em, auto) 1fr auto;
  row-gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.md26 .card-ico {
  display: block;
  width: 2rem;
  height: 2rem;
  /* Sage, nicht Lilac: Lilac ist die Aktionsfarbe. Ein Zeichen in der
     Buttonfarbe liest sich als klickbar. Sage holt zugleich den Ton aus
     dem Logo in die Flaeche. */
  color: var(--sage);
  stroke-width: 1.6;
}
.md26 .info-card-kicker {
  margin: 0;
  height: 1.35rem;
  color: var(--lilac-on-light);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35rem;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.md26 .info-card h3 {
  margin: 0;
  min-height: 2.6em;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: pretty;
}
.md26 .info-card p {
  margin: 0;
  /* Breite so, dass am 768er-Einspalter keine Schusterjungen entstehen:
     zu breit laesst kurze Schlusswoerter allein, zu schmal zerlegt die Dichte. */
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
  text-wrap: pretty;
}
.md26 .info-card small {
  display: block;
  margin-top: 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
}
/* ---- Magazine product panels (Brand Guide pattern) ----------------- */
.md26 .publication-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-6), 4vw, var(--space-8)) var(--space-5);
}
.md26 .publication {
  container-type: inline-size;
  border-top: 4px solid var(--product-color);
}
.md26 .publication-cm { --product-color: var(--mag-cm); }
.md26 .publication-mbf { --product-color: var(--mag-mbf); }
.md26 .publication-st { --product-color: var(--mag-st); }
.md26 .publication-dc { --product-color: var(--mag-dc); }
.md26 .publication a {
  display: block;
  padding-top: var(--space-3);
  text-decoration: none;
}
.md26 .publication figure {
  margin: 0;
  overflow: clip;
  background: var(--paper-muted);
  /* Box folgt dem Cover-Format 3:4 – kein fester Höhenzwang, der cover
     links/rechts abschneiden ließe. */
  aspect-ratio: 3 / 4;
}
.md26 .publication img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  /* 3:4-Quelle in 3:4-Box: contain = cover, ohne Checker-Fehlalarm */
  object-fit: contain;
  object-position: top center;
  background: var(--paper-muted);
  transition: transform var(--dur-slow) var(--ease-signature);
}
@media (hover: hover) and (pointer: fine) {
.md26 .publication a:hover figure img {
    transform: scale(1.03);
  }
}
.md26 .publication-info {
  padding-top: var(--space-4);
}
.md26 .publication-info .focus {
  margin: 0 0 var(--space-2);
  min-height: calc(2 * 1.45em);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.md26 .publication-info h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-editorial);
  font-size: clamp(1.25rem, 6cqi + 0.6rem, 2rem);
  font-style: normal;
  font-weight: 500;
  hyphens: none;
  letter-spacing: -0.035em;
  line-height: 1.05;
  overflow-wrap: normal;
  text-wrap: balance;
}
.md26 .publication-info .claim {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.md26 .publication-info .domain {
  margin: 0;
  color: var(--ink-faint);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Menlo", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
/* ---- Process steps (Sage-Bande: kurze Schritte, weißer Text) -------- */
.md26 .process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--white) 14%, transparent);
}
.md26 .process-step {
  display: grid;
  grid-template-rows: 1.5rem 1.2rem minmax(2.6em, auto) 1fr;
  row-gap: var(--space-3);
  padding: var(--space-5);
  border-top: 3px solid color-mix(in srgb, var(--white) 28%, transparent);
  background: color-mix(in srgb, var(--sage) 88%, var(--black));
  color: var(--white);
}
.md26 .step-ico {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sage-light);
}
.md26 .process-step span {
  display: block;
  height: 1.2rem;
  color: var(--sage-light);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2rem;
}
.md26 .process-step h3 {
  margin: 0;
  min-height: 2.6em;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  overflow-wrap: normal;
  word-break: normal;
}
.md26 .process-step p {
  margin: 0;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  font-size: var(--text-sm);
  text-wrap: pretty;
}
.md26 .section-heading-on-sage h2 {
  color: var(--white);
}
/* ---- Packages ------------------------------------------------------ */
.md26 .package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.md26 .package-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.md26 .package-card .info-card-kicker {
  margin: 0;
  height: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}
.md26 .package-card h3 {
  margin: 0;
  min-height: 1.1em;
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
}
.md26 .package-price {
  margin: 0;
  color: var(--lilac-on-light);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}
.md26 .package-feat {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  flex: 1;
}
.md26 .package-feat li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-wrap: pretty;
}
.md26 .package-check {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-top: 0.12em;
  color: var(--sage);
  flex-shrink: 0;
}
.md26 .package-guarantee {
  margin: 0.35rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  color: var(--black);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.md26 .package-terms {
  margin: var(--space-6) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.8;
}
.md26 .package-terms b {
  color: var(--black);
  font-weight: 600;
}
.md26 .package-terms .sep {
  margin: 0 0.55rem;
  opacity: 0.45;
}
.md26 .package-terms .seg {
  display: inline-block;
}
/* ---- Comparison table ---------------------------------------------- */
.md26 .cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.md26 .cmp-table thead th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--black);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  /* Override corp .cmp-table thead th color (#A7B5A9, 1.89:1 on paper). */
  color: var(--black);
}
.md26 .cmp-table tbody th,
.md26 .cmp-table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}
.md26 .cmp-table tbody th {
  width: 18%;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.md26 .cmp-table tbody td {
  color: var(--ink-soft);
  width: 41%;
  line-height: 1.55;
}
.md26 .cmp-table tbody td strong {
  color: var(--black);
  font-weight: 600;
}
.md26 .cmp-table .col-new {
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
}
.md26 .cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ---- Accordion / FAQ ----------------------------------------------- */
.md26 .faq-list,
.md26 .acc-list {
  display: grid;
  gap: var(--space-3);
  max-width: 48rem;
  margin-inline: auto;
}
.md26 .faq-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: clip;
}
.md26 .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.md26 .faq-item summary::-webkit-details-marker {
  display: none;
}
.md26 .faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--lilac-on-light);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}
.md26 .faq-item[open] summary::after {
  content: "−";
}
.md26 .faq-item .faq-body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-wrap: pretty;
}
.md26 .faq-item .faq-body ul {
  margin: 0;
  padding-left: 1.15rem;
}
.md26 .faq-item .faq-body li {
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.md26 .faq-item .faq-body li + li {
  margin-top: var(--space-2);
}
.md26 .acc-wrap {
  margin-top: clamp(var(--space-6), 5vw, var(--space-8));
}
/* ---- Form shell ---------------------------------------------------- */
.md26 .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  align-items: start;
}
/* Benefits als gestapelte Datenzeilen mit Icons */
.md26 .form-benefits {
  display: grid;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 28rem;
}
.md26 .form-benefits li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  margin: 0;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-wrap: pretty;
}
.md26 .form-benefits .sn-ico {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.12rem;
  color: var(--lilac-on-light);
  flex-shrink: 0;
}
.md26 .form-intro {
  margin: 0;
  max-width: 28rem;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
  text-wrap: pretty;
}
.md26 .form-title {
  max-width: 14ch;
  margin: 0 0 var(--space-4);
}
.md26 .form-card {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-paper);
}
/* Kartentitel, keine Streifen-Ueberschrift: deshalb h3 im Markup. */
.md26 .form-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}
.md26 .form-card > p {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.md26 .form-shell {
  display: grid;
  gap: var(--space-4);
}
.md26 .form-field {
  display: grid;
  gap: var(--space-2);
}
.md26 .form-field label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.md26 .form-field input,
.md26 .form-field select,
.md26 .form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.md26 .form-field input:focus-visible,
.md26 .form-field select:focus-visible,
.md26 .form-field textarea:focus-visible {
  outline: 3px solid var(--lilac-on-light);
  outline-offset: 2px;
}
.md26 .form-shell .cta {
  justify-self: start;
  border: none;
  cursor: default;
  opacity: 0.92;
}
.md26 .form-note {
  margin: var(--space-3) 0 0;
  max-width: 26rem;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  text-wrap: pretty;
}
/* ---- B2C-Absprung (zwischen Artikelband/FAQ und Footer) ------------
   Bewusst kein Paket-Look: ruhige Paper-Fläche, Cover-Fächer, eine CTA. */
.md26 .b2c-exit {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.md26 .b2c-exit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.md26 .b2c-exit-copy .eyebrow {
  margin-bottom: var(--space-3);
}
.md26 .b2c-exit-copy h2 {
  margin: 0 0 var(--space-4);
  max-width: 18ch;
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.md26 .b2c-exit-copy p {
  margin: 0 0 var(--space-5);
  max-width: 38ch;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
  text-wrap: pretty;
}
.md26 .b2c-exit-mags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
}
.md26 .b2c-exit-cover {
  margin: 0;
  overflow: clip;
  border-radius: 4px;
  background: var(--paper-muted);
  box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--black) 42%, transparent);
}
.md26 .b2c-exit-cover:nth-child(2) {
  transform: translateY(-0.55rem);
}
.md26 .b2c-exit-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: top center;
}
/* ---- Footer -------------------------------------------------------- */
/* ---- Motion (JS-Gate .motion) -------------------------------------- */
/* Nur Opacity: translateY verschiebt getBoundingClientRect und zerstoert
   die Grundlinien-Messung waehrend und nach dem Entrance (Stagger). */
html.motion .md26 .reveal {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-signature);
}
html.motion .md26 .reveal.is-in {
  opacity: 1;
}
html.motion .md26 .reveal-group > * {
  transition-delay: 0ms;
}
html.motion .md26 .reveal-group.is-in > *:nth-child(2) { transition-delay: 60ms; }
html.motion .md26 .reveal-group.is-in > *:nth-child(3) { transition-delay: 120ms; }
html.motion .md26 .reveal-group.is-in > *:nth-child(4) { transition-delay: 180ms; }
html.motion .md26 .reveal-group.is-in > *:nth-child(5) { transition-delay: 240ms; }
html.motion .md26 .reveal-group.is-in > *:nth-child(6) { transition-delay: 300ms; }
/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
.md26 .card-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.md26 .publication-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.md26 .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
.md26 .section-heading,
.md26 .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.md26 .card-grid,
.md26 .package-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.md26 .b2c-exit-panel {
    grid-template-columns: minmax(0, 1fr);
  }
.md26 .b2c-exit-mags {
    max-width: 22rem;
  }
.md26 .hero-copy h1 {
    /* Volle Copy-Breite, sonst erzwingt 14ch zu viele Zeilen */
    max-width: 20ch;
  }
}
/* Vergleichstabelle mobil: gestapelte Karten (unter 760px) */
@media (max-width: 760px) {
.md26 .cmp-scroll {
    overflow: visible;
  }
.md26 .cmp-table thead {
    display: none;
  }
.md26 .cmp-table,
.md26 .cmp-table tbody,
.md26 .cmp-table tr,
.md26 .cmp-table th,
.md26 .cmp-table td {
    display: block;
    width: 100%;
  }
.md26 .cmp-table tbody tr {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--white);
  }
.md26 .cmp-table tbody tr:last-child {
    margin-bottom: 0;
  }
.md26 .cmp-table tbody th {
    width: auto;
    margin: 0 0 var(--space-3);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--rule);
    color: var(--black);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
.md26 .cmp-table tbody td {
    width: auto;
    padding: var(--space-3) 0 0;
    border-bottom: none;
    line-height: 1.55;
  }
.md26 .cmp-table tbody td + td {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
  }
.md26 .cmp-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ink-faint);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.md26 .cmp-table .col-new {
    background: transparent;
  }
}
@media (max-width: 680px) {
.md26 .hero-stage {
    padding-block: var(--space-6) var(--space-7);
  }
/* Hero mobil: größere H1, kleinerer Lead/Dachzeile, CTAs nebeneinander */
.md26 .hero-copy .eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
  }
.md26 .hero-copy h1 {
    max-width: none;
    margin-bottom: var(--space-4);
    /* Owner 28.07.: deutlich groesser. 3.2rem = 51,2px, weiter kein Wortbruch. */
    font-size: 3.2rem;
    line-height: 0.98;
  }
.md26 .hero-lead {
    max-width: 30rem;
    margin-bottom: var(--space-5);
    font-size: 15px;
    line-height: 1.55;
  }
.md26 .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    width: 100%;
  }
.md26 .hero-actions .cta {
    width: 100%;
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: 0.8125rem;
    text-align: center;
  }
/* Kennzahlen: Zahl und Label untereinander, Zahl unzerbrechlich */
.md26 .proof-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-3);
  }
.md26 .proof-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    flex: none;
    padding-inline: 0;
    white-space: normal;
    border-left: none !important;
  }
.md26 .proof-num {
    white-space: nowrap;
    font-size: 1.125rem;
  }
.md26 .proof-label {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
.md26 .card-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
.md26 .info-card {
    padding: var(--space-4);
    grid-template-rows: 2rem 1.35rem auto 1fr auto;
  }
.md26 .info-card h3 {
    min-height: 0;
  }
.md26 .publication-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
.md26 .publication a {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }
.md26 .publication-info h3 {
    font-size: 1.25rem;
  }
.md26 .publication-info .focus {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
/* Cover bleibt 3:4 – keine Höhe erzwingen, kein object-fit-Beschnitt */
.md26 .publication figure {
    grid-row: auto;
    aspect-ratio: 3 / 4;
    width: 100%;
  }
.md26 .publication img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: top center;
  }
.md26 .process-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.md26 .section-heading > p:not(.eyebrow),
.md26 .section-heading-center > p:not(.eyebrow),
.md26 .anchor-copy,
.md26 .form-intro {
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) {
.md26 .lg-track,
.md26 .ab-track,
.md26 .tm-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
.md26 .lg-marquee,
.md26 .ab-marquee,
.md26 .tm-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
.md26 .lg-group[aria-hidden="true"],
.md26 .ab-group[aria-hidden="true"],
.md26 .tm-group[aria-hidden="true"] {
    display: none;
  }
.md26 .lg-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
    padding-right: 0;
  }
.md26 .ab-group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
/* Reduced motion: Band still, aber horizontal wischbar (Owner R6). */
.md26 .tm-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
.md26 .tm-track {
    display: flex;
    width: max-content;
  }
.md26 .tm-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
  }
.md26 .tm-group .q {
    width: min(78vw, 340px);
    min-height: 0;
    scroll-snap-align: center;
  }
html.motion .md26 .reveal,
html.motion .md26 .reveal.is-in {
    opacity: 1;
    transition: none;
  }
.md26 .cta,
.md26 .cf-panel,
.md26 .publication img {
    transition: none;
  }
.md26 .cta-primary:hover,
.md26 .cta-primary-on-dark:hover,
.md26 .cta-secondary:hover,
.md26 .cta-secondary-on-dark:hover {
    transform: none;
    box-shadow: none;
  }
}
/* Bewegliche Elemente mobil: statisch + swipen (Startseiten-Muster) */
@media (max-width: 760px) {
.md26 .lg-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 6px 0;
  }
.md26 .lg-track {
    width: max-content;
    animation: none;
    transform: none;
    will-change: auto;
  }
.md26 .lg-group {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
  }
/* Klon bleibt: Soft-Reset im Partial-JS springt um eine Gruppenbreite. */
.md26 .lg-group[aria-hidden="true"] {
    display: flex;
  }
.md26 .lg-marquee.is-resetting {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
.md26 .lg {
    scroll-snap-align: center;
  }
/* Artikelband: Wisch-Track mit Klon-Gruppe für nahtlosen Loop */
.md26 .ab-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 12px 0;
  }
.md26 .ab-marquee.is-resetting {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
.md26 .ab-marquee::-webkit-scrollbar {
    display: none;
  }
.md26 .ab-track {
    display: flex;
    width: max-content;
    animation: none;
    transform: none;
    will-change: auto;
  }
.md26 .ab-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding-left: 0;
    padding-right: 12px;
  }
.md26 .ab-group:first-child {
    padding-left: clamp(16px, 4vw, 28px);
  }
/* Klon bleibt sichtbar – Basis für infinity swipe */
.md26 .ab-group[aria-hidden="true"] {
    display: flex;
  }
.md26 .ab-card {
    scroll-snap-align: start;
    height: auto;
  }
/* Kleiner, damit mehr als eine Karte ins Bild passt */
.md26 .ab-card.m {
    width: min(42vw, 168px);
  }
/* Desktop-Shots mobil raus: im Handformat unlesbar klein. */
.md26 .ab-card.d {
    display: none;
  }
.md26 .tm-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 4px 0;
  }
.md26 .tm-marquee.is-resetting {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
.md26 .tm-marquee::-webkit-scrollbar {
    display: none;
  }
.md26 .tm-track {
    display: flex;
    width: max-content;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
.md26 .tm-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: 14px;
  }
/* Mit JS: Klon bleibt für nahtlosen Auto-Schritt. Ohne JS / reduced: nur Original. */
.md26 .tm-marquee:not(.tm-js) .tm-group[aria-hidden="true"],
.md26 .tm-marquee.tm-static .tm-group[aria-hidden="true"] {
    display: none;
  }
.md26 .tm-marquee.tm-js:not(.tm-static) .tm-group[aria-hidden="true"] {
    display: flex;
  }
.md26 .tm-group .q {
    width: min(78vw, 320px);
    min-height: 0;
    scroll-snap-align: center;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
.md26 .lg-marquee,
.md26 .ab-marquee,
.md26 .tm-marquee {
    scroll-behavior: auto;
  }
/* Reduced motion: einfacher Scroll-Track ohne Loop-Klon */
.md26 .lg-group[aria-hidden="true"],
.md26 .ab-group[aria-hidden="true"],
.md26 .tm-group[aria-hidden="true"] {
    display: none;
  }
}
/* ---- Hero passt in einen Bildschirm -------------------------------
   Der Owner will in einer halben Sekunde abgeholt werden. Dafuer muss der
   Cover Flow als Ganzes im ersten Bild stehen, nicht angeschnitten. Die
   Buehne bindet ihre Hoehe deshalb an den Viewport und nicht nur an die
   Breite; die Copy darueber wird entsprechend knapper gesetzt. */
@media (min-width: 62rem) {
.md26 .hero-stage {
    display: grid;
    align-content: center;
    /* Ohne min-width:0 rechnet ein Grid-Kind mit seiner Inhaltsbreite und
       schiebt die .shell samt Innenabstand aus dem Viewport - bei 1024px
       waren es 19px. */
    justify-items: stretch;
    min-height: calc(100svh - 3.625rem);
    padding-block: clamp(1.5rem, 3vh, 2.75rem) clamp(1.5rem, 3vh, 2.75rem);
  }
.md26 .hero-copy,
.md26 .hero-flow {
    min-width: 0;
  }
.md26 .hero-copy {
    margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
  }
.md26 .hero-copy h1 {
    margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem);
    /* Der Desktop-Override hielt die Headline bei 47px, also unter der Basis.
       Jetzt auf Startseiten-Niveau; der Cover Flow darunter bleibt im Blick. */
    font-size: clamp(3.4rem, 4.4vw + 0.6rem, 5.4rem);
  }
.md26 .hero-lead {
    margin-bottom: clamp(1rem, 2.2vh, 1.75rem);
  }
/* Panelbreite an die Buehnenhoehe koppeln, sonst ragen die 3:4-Panels oben
     heraus und legen sich ueber die Handlungsaufrufe. 420px Breite brauchen
     560px Hoehe - mehr, als die Buehne auf einem 1000er-Viewport hat. */
.md26 .cf-root {
    --cf-panel-w: clamp(190px, 32svh, 420px);
  }
.md26 .cf-stage {
    height: clamp(300px, 45svh, 570px);
  }
}
/* ---- Dachmarke im Netzwerk-Streifen -------------------------------
   MBF Media taucht auf dieser Seite zum ersten Mal auf. Ohne Zeichen und
   ohne Nennung in der Ueberschrift fragt sich jeder Besucher, warum hier
   ploetzlich eine zweite Marke steht. */
.md26 .brand-mark {
  display: block;
  width: auto;
  height: clamp(1.6rem, 2.4vw, 2.15rem);
  margin: var(--space-4) 0 var(--space-5);
}
/* ---- Cover Flow: sichtbare Bedienung ------------------------------
   Die Seitenpanele waren schon klickbar, aber nichts zeigte es an. Zwei
   ruhige Pfeile machen die Steuerung auffindbar, ohne sich vor die Buehne
   zu stellen. */
.md26 .cf-nav {
  position: absolute;
  top: 50%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--black) 45%, transparent);
  color: color-mix(in srgb, var(--white) 78%, transparent);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--dur-mid, 300ms) var(--curve),
    background var(--dur-mid, 300ms) var(--curve),
    color var(--dur-mid, 300ms) var(--curve);
}
.md26 .cf-nav-prev { left: clamp(0.25rem, 2vw, 1.5rem); }
.md26 .cf-nav-next { right: clamp(0.25rem, 2vw, 1.5rem); }
.md26 .cf-root:hover .cf-nav,
.md26 .cf-root:focus-within .cf-nav {
  opacity: 1;
}
.md26 .cf-nav:hover {
  background: color-mix(in srgb, var(--black) 68%, transparent);
  color: var(--white);
}
.md26 .cf-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--lilac-on-dark);
  outline-offset: 3px;
}
/* Auf Zeigegeraeten ohne Hover bleiben die Pfeile dauerhaft sichtbar, sonst
   waeren sie dort gar nicht erreichbar. */
@media (hover: none) {
.md26 .cf-nav { opacity: 1; }
}
@media (max-width: 1100px) {
.md26 .cf-nav { display: none; }
}


/* HubSpot form inside form-card (production embed) */
.md26 #hubspot-mediadaten-form { min-height: 260px; margin-top: var(--space-4); }
.md26 #hubspot-mediadaten-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.md26 #hubspot-mediadaten-form .hs-form-field { margin-bottom: 14px !important; }
.md26 #hubspot-mediadaten-form .hs_email,
.md26 #hubspot-mediadaten-form .hs_company,
.md26 #hubspot-mediadaten-form .legal-consent-container,
.md26 #hubspot-mediadaten-form .hs-submit,
.md26 #hubspot-mediadaten-form .hs_error_rollup { grid-column: 1 / -1; }
.md26 #hubspot-mediadaten-form .hs_phone,
.md26 #hubspot-mediadaten-form .hs_branchen_mediadaten_mbf,
.md26 #hubspot-mediadaten-form .hs_mbf_mediadaten_ich_habe_interesse_an,
.md26 #hubspot-mediadaten-form .hs_mbf_mediadaten_diese_themen_interessieren_mich { display: none !important; }
.md26 #hubspot-mediadaten-form label {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 7px !important;
  display: block !important;
}
.md26 #hubspot-mediadaten-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-sm) !important;
  padding: 13px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--black) !important;
  background: var(--paper-raised) !important;
}
.md26 #hubspot-mediadaten-form textarea.hs-input { min-height: 92px; resize: vertical; }
.md26 #hubspot-mediadaten-form .inputs-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.md26 #hubspot-mediadaten-form .legal-consent-container {
  grid-column: 1 / -1;
  background: var(--paper-muted);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  margin-top: 2px;
}
.md26 #hubspot-mediadaten-form .legal-consent-container,
.md26 #hubspot-mediadaten-form .legal-consent-container .hs-richtext,
.md26 #hubspot-mediadaten-form .legal-consent-container p,
.md26 #hubspot-mediadaten-form .legal-consent-container li {
  font-size: 12px !important;
  color: var(--ink-soft) !important;
  line-height: 1.55 !important;
}
.md26 #hubspot-mediadaten-form .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--black) !important;
}
.md26 #hubspot-mediadaten-form .hs-form-booleancheckbox-display input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  flex: 0 0 18px !important;
}
.md26 #hubspot-mediadaten-form .hs-form-booleancheckbox-display span {
  color: var(--black) !important;
  font-weight: 700 !important;
}
.md26 #hubspot-mediadaten-form .legal-consent-container a {
  color: var(--black) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.md26 #hubspot-mediadaten-form .hs-error-msgs {
  list-style: none !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--status-error) !important;
  font-size: 12px !important;
}
.md26 #hubspot-mediadaten-form .hs-submit { margin-top: 8px !important; }
.md26 #hubspot-mediadaten-form .hs-button {
  display: inline-block !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--white) !important;
  background: var(--lilac-on-light) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 14px 28px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  width: auto !important;
}
.md26 #hubspot-mediadaten-form .hs-button:hover {
  background: color-mix(in srgb, var(--lilac-on-light) 82%, var(--black)) !important;
}
@media (max-width: 560px) {
  .md26 #hubspot-mediadaten-form form { grid-template-columns: 1fr; }
  .md26 #hubspot-mediadaten-form .hs_email,
  .md26 #hubspot-mediadaten-form .hs_company,
  .md26 #hubspot-mediadaten-form .legal-consent-container,
  .md26 #hubspot-mediadaten-form .hs-submit,
  .md26 #hubspot-mediadaten-form .hs_error_rollup { grid-column: auto; }
}