/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */

.ma-hero-grid { align-items: center; }
/* Der frühere H1-Satz. Die H1 traegt jetzt Keyword und Region wie die vier
   anderen Leistungsseiten, der Anspruchssatz steht als eigene Zeile darunter.
   Bewusst kleiner als die Kurzantwort, damit die Reihenfolge stimmt:
   Ueberschrift, Anspruch, dann die sachliche Antwort. */
.ma-hero-claim {
  margin: -8px 0 20px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--teal-dark);
  max-width: 34ch;
  text-wrap: balance;
}
@media (max-width: 640px) { .ma-hero-claim { max-width: none; font-size: 17.5px; }}


/* ---- Hero: Campaign-Flow ------------------------------------ */
.ma-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 218px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  justify-self: end;
  max-width: 470px;
  width: 100%;
}
.ma-flow:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 14px; }
.ma-flow-ad {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 10px 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ma-flow-adhead {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
}
.ma-flow-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-tint);
  border: 1.5px solid rgba(16,100,102,0.35);
}
.ma-flow-ad img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 9 / 13; object-fit: cover;
  border-radius: 8px;
}
.ma-flow-cta {
  margin: 0 -10px;
  padding: 9px 0;
  text-align: center;
  font-size: 12.5px; font-weight: 800;
  color: var(--teal-dark);
  background: var(--teal-tint);
}
.ma-flow-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ma-flow-radius {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 8px;
  box-shadow: 0 10px 26px rgba(26,35,34,0.1);
  width: 100%;
}
.ma-flow-radius svg { display: block; width: 100%; height: auto; }
.ma-flow-label {
  margin: 4px 0 0;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark);
  text-align: center;
}
.ma-flow-link { width: 40px; height: 60px; }
.ma-flow-msg {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px; align-items: start;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--peach);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 12px 28px rgba(26,35,34,0.12);
}
.ma-flow-msgdot { width: 9px; height: 9px; border-radius: 50%; background: var(--peach); margin-top: 4px; }
.ma-flow-msg strong { display: block; font-size: 12.5px; color: var(--ink); }
.ma-flow-msg span { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
/* Ablauf: Radius pulst, Linie zeichnet, Anfrage faehrt ein */
.ma-fr-ring, .ma-fr-p { transform-box: fill-box; transform-origin: center; }
.ma-flow:hover .ma-fr-ring, .ma-flow:focus-visible .ma-fr-ring { animation: ma-ringin2 0.6s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.ma-flow:hover .ma-fr-p1, .ma-flow:focus-visible .ma-fr-p1 { animation: ma-pop2 0.4s ease 0.5s both; }
.ma-flow:hover .ma-fr-p2, .ma-flow:focus-visible .ma-fr-p2 { animation: ma-pop2 0.4s ease 0.62s both; }
.ma-flow:hover .ma-fr-p3, .ma-flow:focus-visible .ma-fr-p3 { animation: ma-pop2 0.4s ease 0.74s both; }
.ma-flow:hover .ma-fr-p4, .ma-flow:focus-visible .ma-fr-p4 { animation: ma-pop2 0.4s ease 0.86s both; }
.ma-flow:hover .ma-fl-line, .ma-flow:focus-visible .ma-fl-line { animation: ma-draw2 0.6s ease 0.95s both; }
.ma-flow:hover .ma-flow-msg, .ma-flow:focus-visible .ma-flow-msg { animation: ma-slidein2 0.5s cubic-bezier(.2,.7,.2,1) 1.4s both; }

/* ---- Vertrauens-Strip --------------------------------------- */
.ma-strip { padding: 26px 0; background: var(--teal-tint); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ma-strip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.ma-strip-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
  padding: 4px 28px;
  border-left: 1px solid rgba(16,100,102,0.18);
}
.ma-strip-item:first-child { padding-left: 0; border-left: 0; }
.ma-strip-glyph svg { display: block; width: 40px; height: 40px; }
.ma-strip-item strong { display: block; font-size: 14px; color: var(--ink); }
.ma-strip-item p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ---- Bento: vier ungleiche Module --------------------------- */
.ma-bento { padding: var(--space-md) 0; background: var(--white); }
.ma-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.ma-mod--wide { grid-column: span 7; }
.ma-mod-body { padding: 22px 26px 16px; }
.ma-mod-body h3 { margin: 0 0 6px; font-size: 17.5px; color: var(--ink); }
.ma-mod-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ma-mod-illu { display: block; width: 100%; height: auto; }
.ma-mod--dark { background: var(--teal-dark); border-color: rgba(255,255,255,0.14); }
.ma-mod--dark .ma-mod-body h3 { color: var(--white); }
.ma-mod--dark .ma-mod-body p { color: rgba(255,255,255,0.72); }
/* Modul 1: Creatives - drei Frames + Schnittleiste */
.ma-mod-visual--creatives { padding: 18px 24px 14px; }
.ma-crea-frames { display: flex; gap: 12px; justify-content: center; }
.ma-crea-f {
  width: 74px; height: auto;
  aspect-ratio: 9 / 15; object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  display: block;
}
.ma-crea-f2 { border-color: var(--peach); }
.ma-crea-timeline { display: block; width: 100%; max-width: 300px; margin: 12px auto 0; }
/* Hover-Ablaeufe der Module */
.ma-crea-f, .ma-opt, .ma-opt-bar { transform-box: fill-box; transform-origin: center; }
/* Kartenschrift in der Regional-Kachel. Der helle Rand ist derselbe Ton wie
   der Hintergrund der Zeichenflaeche (--teal-tint), damit Rhein, A5 und die
   Umkreislinie nicht durch die Buchstaben schneiden - so machen es gedruckte
   Karten auch. Ohne paint-order laege der Rand ueber der Schrift. */
.ma-halo { paint-order: stroke; stroke: var(--teal-tint); stroke-width: 3.4px; stroke-linejoin: round; }
.ma-kreis { transform-box: fill-box; transform-origin: center; }
.ma-crea-f { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }

/* ---- Anzeigen-Galerie (dunkel) ------------------------------ */
.ma-ads { padding: var(--space-md) 0; background: var(--ink); color: rgba(255,255,255,0.82); }
.ma-ads h2 { color: var(--white); }
.ma-ads-intro { margin: 0 0 30px; font-size: 15.5px; line-height: 1.64; max-width: 64ch; }
.ma-opt-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  max-width: 340px;
  margin: 0 auto;
}
.ma-optclip { margin: 0; }
.ma-optclip video {
  width: 100%; height: auto; display: block;
  aspect-ratio: 9 / 15; object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(16,100,102,0.25);
  background: var(--ink);
}
.ma-optclip--lead video { border-color: var(--peach); }
.ma-optclip-bar {
  display: block;
  margin-top: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(16,100,102,0.12);
  overflow: hidden;
}
.ma-optclip-bar i { display: block; height: 100%; border-radius: 4px; background: var(--teal); opacity: 0.45; }
.ma-optclip--lead .ma-optclip-bar i { background: var(--peach); opacity: 1; }
.ma-opt-note { margin: 12px 0 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--teal-dark); opacity: 0.55; }

/* ---- 5-Schritte-System -------------------------------------- */
.ma-system { padding: var(--space-md) 0; background: var(--panel); }
.ma-steps { margin-top: 30px; }
.ma-step {
  display: grid;
  max-width: 940px;
  grid-template-columns: 70px minmax(0, 1fr) 130px;
  gap: 0 22px;
  align-items: center;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.ma-step + .ma-step { margin-top: 6px; }
.ma-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-style: normal; line-height: 1;
  background: var(--white); color: var(--teal);
  border: 2px solid var(--border);
  transition: opacity 0.35s ease, color 0.35s ease;
}
.ma-step-body h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.ma-step-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.ma-step-visual svg { display: block; width: 100%; max-width: 130px; height: auto; }

/* ---- Creative-Faecher --------------------------------------- */
.ma-vari { padding: var(--space-md) 0; background: var(--white); }
.ma-vari-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.ma-vari-list { list-style: none; margin: 18px 0 0; padding: 0; }
.ma-vari-list li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--border);
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.ma-vari-list li:first-child { border-top: 0; }
.ma-vari-list li::before {
  content: '';
  position: absolute; left: 2px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--peach);
}
.ma-fan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  padding: 14px 6px;
}
.ma-fan:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 14px; }
.ma-fan-card {
  --tilt: 0deg;
  position: relative;
  margin: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 8px 8px 10px;
  box-shadow: 0 16px 34px rgba(26,35,34,0.18);
  transform: rotate(var(--tilt));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.ma-fan-card img { width: 100%; height: auto; display: block; aspect-ratio: 9 / 15; object-fit: cover; border-radius: 8px; }
.ma-fan-card figcaption {
  margin-top: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-dark);
  white-space: nowrap;
}
.ma-fan-1 { --tilt: -3.5deg; top: 16px; }
.ma-fan-2 { --tilt: 0deg; top: 0; z-index: 2; }
.ma-fan-3 { --tilt: 3.5deg; top: 24px; }
@media (hover: hover) {
  .ma-fan:hover .ma-fan-1, .ma-fan:focus-visible .ma-fan-1 { transform: rotate(-5deg) translateY(-6px); }
  .ma-fan:hover .ma-fan-2, .ma-fan:focus-visible .ma-fan-2 { transform: rotate(0deg) translateY(-8px) scale(1.02); }
  .ma-fan:hover .ma-fan-3, .ma-fan:focus-visible .ma-fan-3 { transform: rotate(5deg) translateY(-6px); }}


/* ---- Geldfluss (Showpiece, dunkelgruen) --------------------- */
.ma-money { padding: var(--space-md) 0; background: var(--ink); color: rgba(255,255,255,0.82); }
.ma-money h2 { color: var(--white); }
.ma-flowchart { margin-top: 26px; }
/* Gestapelte Fassung derselben Aussage fuer schmale Bildschirme. Im
   Grundzustand aus, der Mobil-Block unten tauscht die beiden. */
.ma-fc-mobil { display: none; }
.ma-flowchart:focus-visible { outline: 3px solid var(--peach); outline-offset: 4px; border-radius: 12px; }
.ma-flowchart svg { display: block; width: 100%; height: auto; }
.ma-fc-coin { transform-box: fill-box; transform-origin: center; }
.ma-flowchart:hover .ma-fc-line-a, .ma-flowchart:focus-visible .ma-fc-line-a { animation: hk-linedraw2 0.9s ease 0.1s both; }
.ma-flowchart:hover .ma-fc-line-b, .ma-flowchart:focus-visible .ma-fc-line-b { animation: hk-linedraw2 0.9s ease 0.6s both; }
.ma-flowchart:hover .ma-fc-coin-a, .ma-flowchart:focus-visible .ma-fc-coin-a { animation: ma-fc-run-a2 1.1s cubic-bezier(.3,.6,.2,1) 0.15s both; }
.ma-flowchart:hover .ma-fc-coin-b, .ma-flowchart:focus-visible .ma-fc-coin-b { animation: ma-fc-run-b2 1.1s cubic-bezier(.3,.6,.2,1) 0.65s both; }

/* ---- Eignung ------------------------------------------------ */
.ma-fit { padding: var(--space-sm) 0; background: var(--white); }
.ma-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  margin-top: 28px;
}
.ma-fit-col { border-top: 3px solid var(--teal-dark); padding-top: 16px; }
.ma-fit-col--nein { border-top-color: rgba(16,100,102,0.25); }
.ma-fit-head {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.ma-fit-col ul { list-style: none; margin: 0; padding: 0; }
.ma-fit-col li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--border);
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft);
}
.ma-fit-col li:first-child { border-top: 0; }
.ma-fit-col--ja li::before {
  content: '';
  position: absolute; left: 2px; top: 17px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--teal-dark);
}
.ma-fit-col--nein li::before {
  content: '';
  position: absolute; left: 2px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid rgba(16,100,102,0.4);
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 1024px) {
  .ma-bento-grid { grid-template-columns: 1fr; }}

@media (max-width: 980px) {
  .ma-flow { justify-self: center; max-width: 440px; }
  .ma-strip-row { grid-template-columns: 1fr; gap: 14px; }
  .ma-strip-item { padding: 0; border-left: 0; }
  .ma-step { grid-template-columns: 48px minmax(0, 1fr); }
  .ma-step-visual { display: none; }
  .ma-vari-grid { grid-template-columns: 1fr; gap: 40px; }
  .ma-fan { max-width: 520px; margin: 0 auto; }
  .ma-fit-grid { grid-template-columns: 1fr; gap: 24px; }}

@media (max-width: 560px) {
  .ma-flow { grid-template-columns: 1fr; max-width: 260px; }
  .ma-flow-link { transform: rotate(0deg); height: 44px; }
  .ma-fan { gap: 10px; }
  .ma-fan-card { padding: 6px 6px 8px; }
  .ma-fan-card figcaption { font-size: 9px; letter-spacing: 0.06em; }
  .ma-opt-clips { max-width: 300px; gap: 12px; }}

@media (prefers-reduced-motion: reduce) {
  .ma-fan:hover .ma-fan-1, .ma-fan:hover .ma-fan-2, .ma-fan:hover .ma-fan-3 { transform: rotate(var(--tilt)); }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Problem-Grafik der Startseite: die drei Zettel stehen prozentual
     verteilt. Auf 338px Buehnenbreite fielen sie uebereinander und
     verdeckten sich bis zu 105x55px, "Fragen aus dem Arbeitsalltag" wurde
     mitten im Wort abgeschnitten. Der Stapel darf unordentlich aussehen,
     aber lesbar bleiben: staerker vertikal gestaffelt, weniger seitlich. */

  /* ---- Anzeigen-Faecher: die Bildunterschriften stehen auf nowrap. Ich
     hatte sie oben von 9 auf 11,5px angehoben, damit brauchen sie 126 bis
     168px - die Karte ist bei 375px aber nur 108px, bei 320px 88px breit.
     Der Text lief damit ueber die Nachbarbilder. Sie duerfen jetzt
     umbrechen und trennen. */
  .ma-fan-card figcaption {
    white-space: normal;
    letter-spacing: 0.01em;
    line-height: 1.3;
    hyphens: auto;
    overflow-wrap: anywhere;
  }


  /* ---- Geldfluss: die breite Grafik (viewBox 960x330) war auf dem Handy
     entweder unlesbar klein oder seitlich scrollbar ohne sichtbaren
     Hinweis. Stattdessen die gestapelte Fassung, gleiche Aussage. ------- */
  .ma-flowchart { display: none; }
  .ma-fc-mobil {
    display: block;
    margin-top: 24px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.05);
    padding: 18px 16px 16px;
  }
  .ma-fcm-quelle,
  .ma-fcm-ziel {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    padding: 12px 14px;
  }
  .ma-fcm-quelle strong,
  .ma-fcm-ziel strong { display: block; font-size: 15.5px; font-weight: 800; color: #fff; }
  .ma-fcm-quelle span,
  .ma-fcm-ziel span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.62); }
  .ma-fcm-zweig { position: relative; margin-top: 30px; padding-top: 26px; }
  .ma-fcm-zweig::before {
    content: '';
    /* Der Zweig hat 30px Aussen- und 26px Innenabstand nach oben. Die Linie
       muss beides ueberbruecken, sonst beginnt sie 30px unter dem Kasten
       darueber und haengt frei in der Luft. */
    position: absolute; top: -30px; left: 22px;
    width: 1.6px; height: 56px;
    background: rgba(255,255,255,0.28);
  }
  .ma-fcm-label {
    position: absolute; top: 4px; left: 36px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--peach);
  }
  .ma-fcm-fuss { margin: 18px 0 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.55); }
  
    
  /* Bento-Modul "Echte Creatives statt Vorlagen"
     (/leistungen/meta-werbeanzeigen/): drei feste 74px-Frames plus 24px
     Abstand ergeben 246px, die Modulbreite bei 320px nur 222px. Die
     Frames duerfen jetzt mitschrumpfen. */
  .ma-crea-frames { gap: 8px; }
  .ma-crea-f { flex: 0 1 74px; min-width: 0; }
  
  /* Ablauf-Schritte (/leistungen/meta-werbeanzeigen/): die 40px-Ziffer
     ist 50px breit und laeuft aus ihrer 48px-Spalte. Zusammen mit dem
     Innenabstand fressen Spalte und Rand 114 der 343px Zeilenbreite auf,
     der Fliesstext bricht danach in sehr kurze Fetzen um. Schmalere
     Ziffernspalte, kleinere Ziffer, weniger Innenabstand. */
  .ma-step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 16px 14px; }
  .ma-step-num { font-size: 30px; }}


/* Sehr schmale Geraete: die SVG-Beschriftungen skalieren mit der Zeichenflaeche
   mit und fallen unter die 11px-Grenze der Seite. Die Werte sind
   SVG-Nutzereinheiten, nicht Pixel: bei 320px Viewport ergeben 13.5 Einheiten
   wieder rund 11px auf dem Schirm. */
@media (max-width: 379px) {
  /* Videoseite: Aufnahmeanzeige "REC" in der zweiten Kontaktbogen-Skizze */
  /* Werbeanzeigenseite: "Dein Betrieb", "Werbekonto", "laeuft auf deinen
     Namen" im dunklen Bento-Modul */
  .ma-mod--dark .ma-mod-illu text { font-size: 12.5px; }}


/* --- /leistungen/meta-werbeanzeigen/, Bento "Echte Creatives" ---------- */
/* Die drei Standbilder stehen fest auf 74px, zusammen mit den Abstaenden also
   246px. Das Modul ist bei 1280px 652px breit (Farbflaeche 604px), zwischen
   641 und 1024px sogar volle Containerbreite. Zwei Folgen: die Kachel wirkt
   halb leer, und weil .ma-mod-visual mit margin-top:auto unten sitzt, beginnt
   ihr Farbband 56px tiefer als das der Nachbarkachel derselben Zeile.
   Groessere Standbilder fuellen die Flaeche und bringen beide Farbbaender auf
   eine Hoehe; 340px entspricht dem Mass der Clips im Modul "Laufende
   Optimierung". */
@media (min-width: 641px) {
  .ma-mod-visual--creatives .ma-crea-frames { gap: 14px; }
  .ma-crea-frames .ma-crea-f { width: 108px; }
  .ma-mod-visual--creatives .ma-crea-timeline { max-width: 352px; }}


/* --- /leistungen/meta-werbeanzeigen/, Anzeigen-Faecher ----------------- */
/* "Hook 3 - Stellenanzeige" braucht bei 11px und 0.09em Sperrung rund 169px,
   die Karte bietet bei 1280px aber nur 142px. Mit white-space:nowrap ragte die
   Zeile sichtbar links und rechts aus der Karte heraus (bei 1140px am
   deutlichsten, dort auch bei "Hook 1 - Kontrast"). Gleiche Loesung wie auf
   dem Handy: umbrechen statt ueberstehen. */
@media (min-width: 641px) {
  .ma-fan-card figcaption {
    white-space: normal;
    letter-spacing: 0.04em;
    line-height: 1.3;
    hyphens: auto;
    overflow-wrap: anywhere;
  }}


/* --- /leistungen/meta-werbeanzeigen/, Geldfluss-Grafik ----------------- */
/* Die breite Fassung (viewBox 960x330) wird bis 640px gegen die gestapelte
   Fassung getauscht. Zwischen 641 und 1080px lief aber weiterhin die breite
   Fassung, und weil SVG-Text mitskaliert, standen dort saemtliche
   Beschriftungen bei 8 bis 10px (auf 768px gemessen: 8.25px gegen 15px
   Fliesstext daneben). Die gestapelte Fassung traegt dieselbe Aussage und
   bleibt lesbar. Ab 1081px erreicht die breite Fassung wieder mindestens 11px
   und bleibt unveraendert. */
@media (min-width: 641px) and (max-width: 1080px) {
  .ma-flowchart { display: none; }
  .ma-fc-mobil {
    display: block;
    max-width: 620px;
    margin-top: 26px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.05);
    padding: 20px 18px 18px;
  }
  .ma-fcm-quelle,
  .ma-fcm-ziel {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    padding: 12px 14px;
  }
  .ma-fcm-quelle strong,
  .ma-fcm-ziel strong { display: block; font-size: 16px; font-weight: 800; color: #fff; }
  .ma-fcm-quelle span,
  .ma-fcm-ziel span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); }
  .ma-fcm-zweig { position: relative; margin-top: 30px; padding-top: 26px; }
  .ma-fcm-zweig::before {
    content: '';
    /* Der Zweig hat 30px Aussen- und 26px Innenabstand nach oben. Die Linie
       muss beides ueberbruecken, sonst beginnt sie 30px unter dem Kasten
       darueber und haengt frei in der Luft. */
    position: absolute; top: -30px; left: 22px;
    width: 1.6px; height: 56px;
    background: rgba(255,255,255,0.28);
  }
  .ma-fcm-label {
    position: absolute; top: 4px; left: 36px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--peach);
  }
  .ma-fcm-fuss { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.55); }}


/* --- /leistungen/meta-werbeanzeigen/, 5-Schritte-System ---------------- */
/* .ma-step-visual wird ab 980px abwaerts komplett ausgeblendet, obwohl
   zwischen 641 und 980px reichlich Platz ist. Die Zeilen endeten dadurch nach
   dem Fliesstext und liessen rechts eine leere Spalte stehen. Die Icons kehren
   zurueck, Ziffern- und Icon-Spalte etwas schmaler als im Desktop-Raster,
   damit der Fliesstext nicht in kurze Fetzen bricht. */
@media (min-width: 641px) and (max-width: 980px) {
  .ma-steps .ma-step { grid-template-columns: 56px minmax(0, 1fr) 104px; gap: 0 18px; }
  .ma-step .ma-step-visual { display: block; }
  .ma-step .ma-step-visual svg { max-width: 104px; }}


/* --- /leistungen/meta-werbeanzeigen/, Standbilder im ersten Bento ------ */
/* Feste 108px bringen die beiden Farbbaender der ersten Zeile ab rund 1200px
   auf eine Hoehe, im schmalen Zweispalter ab 1025px kippt der Versatz dadurch
   aber in die Gegenrichtung (gemessen -41px bei 1025px). Die passende Breite
   waechst mit dem Fenster: gemessen 84px bei 1025, 92 bei 1080, 100 bei 1140,
   108 ab 1220. Genau das leistet der fluide Wert; unter 1025px stehen die
   Module gestapelt, dort bleiben die festen 108px. */
@media (min-width: 1025px) {
  .ma-crea-frames .ma-crea-f { width: clamp(84px, calc(13.3vw - 52px), 108px); }}


@media (max-width: 640px) {

  /* --- /leistungen/meta-werbeanzeigen/ --------------------------------- */
  /* Die beiden Zweig-Label der Geldfluss-Grafik standen auf 10,5px. */
  .ma-fcm-label { font-size: 11px; }

  /* Die Bildunterschriften des Anzeigen-Faechers wurden mitten im Wort
     getrennt und liefen auf drei bis vier Zeilen: "STELLEN-A-NZEIGE". */
  .ma-fan { gap: 6px; padding-left: 0; padding-right: 0; }
  .ma-fan-card { padding: 5px 5px 8px; }
  .ma-fan-card figcaption {
    font-size: 11px;
    letter-spacing: 0;
    hyphens: none;
    overflow-wrap: normal;
  }}