/* ============================================================
   Manz Consulting – freigegebene Komponenten v1.3.0

   Farbtoken-Referenz: 10 Kernfarben + 10 abgeleitete Farben.
   Alle var(--mc-*) sind hier definiert und spiegeln exakt die
   WordPress-Palette-Slugs (manz-*) wider.
   ============================================================ */

:root {

  /* Kernfarben */
  --mc-deep-blue:       #1C3552;
  --mc-blue:            #446084;
  --mc-blue-secondary:  #5E80A0;
  --mc-neutral-dark:    #202326;
  --mc-slate:           #4A5568;
  --mc-gold:            #C9A05C;
  --mc-rust:            #7B3530;
  --mc-forest:          #3F5E4E;
  --mc-warm-white:      #F3EFE8;
  --mc-white:           #FFFFFF;

  /* Blue Ramp */
  --mc-blue-light:      #D6DFEA;
  --mc-blue-soft:       #ADBFD5;
  --mc-blue-mid:        #849FC0;
  --mc-blue-hover:      #334863;
  --mc-blue-deep:       #223042;

  /* Neutral / Slate */
  --mc-neutral-light:   #E7E9EB;
  --mc-slate-light:     #D8DCE3;

  /* Signature Light Tones */
  --mc-rust-light:      #ECD0CE;
  --mc-forest-light:    #D5E3DB;
  --mc-gold-light:      #F4ECDE;

  /* Border-Beam Timing */
  --mc-beam-duration:   6s;
  --mc-beam-size:       46px;
  --mc-beam-width:      1.5px;
}

/* ============================================================
   WordPress-Preset-Brücke

   WordPress generiert --wp--preset--color--{slug} automatisch
   aus der PHP-Palette. Die mc-Tokens oben folgen denselben
   Slugs, sodass beide Systeme auf identische Werte zeigen.
   ============================================================ */

/* Links */
a { color: var(--mc-blue); }
a:hover, a:focus { color: var(--mc-blue-hover); }
a:visited { color: var(--mc-deep-blue); }


/* ============================================================
   0. STAGE-HINTERGRUND
   ------------------------------------------------------------
   Drei-Layer-Lichtarchitektur für große Inhaltsbereiche.
   Layer 1: diagonaler Basis-Tiefenverlauf.
   Layer 2: diffuse Lichtzone links/oben (--mc-deep-blue).
   Layer 3: subtile Strukturzone rechts/unten (--mc-blue-secondary).
   ============================================================ */

.manz-bg-stage {
  background-color: var(--mc-blue-hover);
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 1500px 1200px at -20% 26%,
      rgba(28,53,82,0.30) 0%,
      rgba(28,53,82,0.16) 22%,
      rgba(28,53,82,0.06) 42%,
      rgba(28,53,82,0.01) 60%,
      transparent 72%),
    radial-gradient(ellipse 1300px 1000px at 120% 90%,
      rgba(94,128,160,0.10) 0%,
      rgba(94,128,160,0.04) 28%,
      rgba(94,128,160,0.01) 52%,
      transparent 66%),
    linear-gradient(158deg,
      var(--mc-blue-deep) 0%,
      var(--mc-blue-hover) 26%,
      var(--mc-blue-hover) 74%,
      var(--mc-blue-deep) 100%);
}

/* Manz-Icon-Wasserzeichen oben rechts — als CSS-Maske. */
.manz-bg-stage::before {
  content: "";
  position: absolute;
  top: -68px; right: -68px;
  width: 130px; height: 130px;
  background-color: var(--mc-blue-soft);
  opacity: 0.55;
  -webkit-mask-image: url("../images/manz-icon-real-mask.png");
  mask-image: url("../images/manz-icon-real-mask.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none;
  z-index: 0;
}
.manz-bg-stage > * { position: relative; z-index: 1; }

/* Hero-Overlay — Navy-Dimm-Gradient für Cover-Block-Kinder. */
.manz-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(34,48,66,0.22)   0%,
    rgba(51,72,99,0.18)  35%,
    rgba(34,48,66,0.48)  68%,
    rgba(34,48,66,0.68) 100%
  ) !important;
}

/* Bewusste Ausnahme-Flächen — tiefe Navy-Momente. */
.manz-bg-deep,
.manz-bg-stage-deep {
  background-color: var(--mc-blue-deep);
}


/* ============================================================
   Editorial-Fragenpanel
   Ghost-Ziffer → Aussage. Ruhige, nicht-interaktive Surface.
   Kein Card-Look, kein Hover. Layout kommt aus FSE.
   ============================================================ */

.manz-question-panel {
  position: relative;
}
.manz-question-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.manz-question-num {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 2.3em;
  line-height: 0.85;
  opacity: 0.2;
  flex-shrink: 0;
  user-select: none;
}
.manz-question-panel-on-light .manz-question-num {
  opacity: 0.16;
}


/* ============================================================
   Quote — persönliche Statements/Leitfragen.
   Kein Hintergrund, kein Border, kein Radius. Steht offen im
   Raum. Editorial statt UI-Komponente. Layout kommt aus FSE.
   ============================================================ */

.manz-quote {
  position: relative;
}
.manz-quote::before {
  content: "";
  display: block;
  width: 18px;
  height: 10px;
  margin-bottom: 22px;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cline x1='2' y1='8' x2='5' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='6' y1='8' x2='9' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='10' y1='8' x2='13' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cline x1='2' y1='8' x2='5' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='6' y1='8' x2='9' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='10' y1='8' x2='13' y2='0.5' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.manz-quote--wash::after {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 28% 15%, rgba(68,96,132,0.08), transparent 70%);
}
.manz-quote-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-left: 24px;
}
.manz-quote-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0.25em;
  width: 2px; height: 1em;
  background: var(--mc-blue-soft);
  opacity: 0.4;
}
.manz-quote-num {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 2.3em;
  line-height: 0.85;
  color: var(--mc-blue-soft);
  opacity: 0.2;
  flex-shrink: 0;
  user-select: none;
}


/* ============================================================
   Trust-/Testimonial-Surface
   Subtile Patina-Tönung (Vertrauen/Erfahrung), asymmetrisch
   über linke Akzentkante. Layout kommt aus FSE.
   ============================================================ */

.manz-trust-surface {
  background: linear-gradient(155deg, rgba(63,94,78,0.14) 0%, rgba(28,53,82,0.42) 55%, rgba(34,48,66,0.30) 100%);
  border: 1px solid rgba(173,191,213,0.18);
  border-left: 2px solid rgba(63,94,78,0.55);
  backdrop-filter: blur(8px) saturate(108%);
}


/* ============================================================
   Panel und Banner
   ============================================================ */

/* manz-panel — ruhiger Kontext-Behälter auf dunklem Hintergrund.
   Nur 5–6 % Materialabweichung zur Stage. Inhalt dominiert,
   nicht der Behälter. Radius und Padding kommen aus FSE. */
.manz-panel {
  background: rgba(28,53,82,0.06);
  border: 1px solid rgba(94,128,160,0.12);
  overflow: hidden;
}

/* manz-banner — weiche Lichtzone innerhalb der Bühne. Kein
   Border, kein Blur, kein Shadow. Padding/Layout aus FSE. */
.manz-banner {
  background:
    radial-gradient(
      ellipse 85% 130% at 50% 50%,
      rgba(68,96,132,0.28) 0%,
      rgba(28,53,82,0.16) 48%,
      transparent 76%
    ),
    rgba(34,48,66,0.36);
}


/* ============================================================
   1. EYEBROW-SYSTEM
   ------------------------------------------------------------
   Vier eigenständige Farbvarianten — jede trägt Badge-Look +
   Maskenform + Farbe komplett selbst. Eine einzige Klasse
   reicht; kein Kombinieren mehr nötig.
   ============================================================ */

.manz-eyebrow,
.manz-eyebrow-warm,
.manz-eyebrow-white,
.manz-eyebrow-blue,
.manz-eyebrow-gold {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(100deg, rgba(173,191,213,0.20) 0%, rgba(173,191,213,0.08) 100%);
  border: 1px solid rgba(173,191,213,0.28);
  backdrop-filter: blur(3px);
}

.manz-eyebrow::before,
.manz-eyebrow-warm::before,
.manz-eyebrow-white::before,
.manz-eyebrow-blue::before,
.manz-eyebrow-gold::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  aspect-ratio: 1 / 1;
  margin-right: 0.5em;
  flex-shrink: 0;
  background-color: var(--mc-blue);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 6 84 84' width='84' height='84'%3E%3Cpath fill='black' d='m31.4 35.6-19.3 19.3c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l31.1-31.1c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-24.2 24.2c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l28.9-28.8c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-45.2 45.2c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l50-50c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-40.6 40.6c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l33.7-28.7c1.5-1.3 3.5.9 2.1 2.3l-7.6 7.6c-1.1 1.1-1.1 3 0 4.1l11.8 11.8c1.8 1.8 5 .5 5-2.1v-70c0-1.6-1.3-2.9-2.9-2.9h-70.1c-2.6 0-3.9 3.1-2.1 5l16.5 16.5c1.2 1.1 1.2 2.9 0 4.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 6 84 84' width='84' height='84'%3E%3Cpath fill='black' d='m31.4 35.6-19.3 19.3c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l31.1-31.1c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-24.2 24.2c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l28.9-28.8c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-45.2 45.2c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l50-50c1.1-1.1 3-1.1 4.1 0l.6.6c1.1 1.1 1.1 3 0 4.1l-40.6 40.6c-1.1 1.1-1.1 3 0 4.1l.6.6c1.1 1.1 3 1.1 4.1 0l33.7-28.7c1.5-1.3 3.5.9 2.1 2.3l-7.6 7.6c-1.1 1.1-1.1 3 0 4.1l11.8 11.8c1.8 1.8 5 .5 5-2.1v-70c0-1.6-1.3-2.9-2.9-2.9h-70.1c-2.6 0-3.9 3.1-2.1 5l16.5 16.5c1.2 1.1 1.2 2.9 0 4.1z'/%3E%3C/svg%3E");
}

.manz-eyebrow-warm::before  { background-color: var(--mc-warm-white); }
.manz-eyebrow-white::before { background-color: var(--mc-white); }
.manz-eyebrow-blue::before  { background-color: var(--mc-deep-blue); }
.manz-eyebrow-gold::before  { background-color: var(--mc-gold); }


/* ============================================================
   2. CARD-SYSTEM
   ------------------------------------------------------------
   Definiert bewusst KEINE Größe/Radius/Padding/Layout — das
   bleibt FSE. Nur Material, Border, Shadow, Hover.

   Pseudo-Element-Architektur:
     ::before → Glare (bewegtes Licht)
     ::after  → Signaturkante/Accent (Gold)
   Spotlight läuft als zusätzlicher Background-Layer.
   ============================================================ */

.manz-card {
  position: relative;
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.24) 0%, rgba(28,53,82,.52) 42%, rgba(34,48,66,.34) 100%);
  border: 1px solid rgba(173,191,213,.24);
  backdrop-filter: blur(10px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(243,239,232,.10),
    inset 0 -1px 0 rgba(34,48,66,.38),
    0 14px 34px rgba(34,48,66,.26);
  transition: transform 280ms cubic-bezier(.4,0,.2,1),
              box-shadow 280ms cubic-bezier(.4,0,.2,1),
              border-color 280ms cubic-bezier(.4,0,.2,1),
              background-image 280ms cubic-bezier(.4,0,.2,1);
}
/* Brücke für den Fall, dass manz-card auf einem nativen Button-Block sitzt. */
.manz-card .wp-block-button__link,
.manz-card.wp-block-button .wp-block-button__link {
  background: transparent !important;
  border: none !important;
}
.manz-card:hover {
  transform: translateY(-5px);
  border-color: rgba(243,239,232,0.4);
  box-shadow:
    inset 0 1px 0 rgba(243,239,232,.16),
    inset 0 -1px 0 rgba(34,48,66,.42),
    0 26px 50px rgba(34,48,66,.36);
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.30) 0%, rgba(28,53,82,.58) 42%, rgba(34,48,66,.38) 100%),
    linear-gradient(115deg, transparent 40%, rgba(173,191,213,0.06) 50%, transparent 60%);
}

/* manz-card-on-light — helles Pendant, dieselbe Hover-Mechanik. */
.manz-card-on-light {
  position: relative;
  background-color: var(--mc-white);
  border: 1px solid rgba(28,53,82,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 34px rgba(28,53,82,.08);
  transition: transform 280ms cubic-bezier(.4,0,.2,1),
              box-shadow 280ms cubic-bezier(.4,0,.2,1),
              border-color 280ms cubic-bezier(.4,0,.2,1);
}
.manz-card-on-light:hover {
  transform: translateY(-5px);
  border-color: rgba(28,53,82,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 26px 50px rgba(28,53,82,.14);
}
.manz-card:focus-within {
  border-color: rgba(173,191,213,0.5);
}

/* Gradient-Variante — eine Stufe mehr Tiefe/Materialität. */
.manz-card.gradient {
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.32) 0%, rgba(28,53,82,.62) 42%, rgba(34,48,66,.42) 100%);
}
.manz-card.gradient:hover {
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.38) 0%, rgba(28,53,82,.68) 42%, rgba(34,48,66,.46) 100%),
    linear-gradient(115deg, transparent 40%, rgba(173,191,213,0.07) 50%, transparent 60%);
}

/* Glass-Variante — gezielter Highlight-Moment, sparsam einsetzen. */
.manz-card.glass {
  background-color: transparent;
  background-image: linear-gradient(145deg, rgba(173,191,213,0.12) 0%, rgba(173,191,213,0.04) 60%);
  backdrop-filter: blur(14px) saturate(120%);
  border-color: rgba(255,255,255,0.18);
  overflow: hidden;
}
.manz-card.glass:hover {
  background-image: linear-gradient(145deg, rgba(173,191,213,0.16) 0%, rgba(173,191,213,0.06) 60%);
  border-color: rgba(255,255,255,0.26);
}

/* Aktiver Zustand — OHNE Pseudo-Element. */
.manz-card.is-active {
  border-color: rgba(173,191,213,0.5);
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.30) 0%, rgba(28,53,82,.58) 42%, rgba(34,48,66,.38) 100%);
  box-shadow:
    inset 0 1px 0 rgba(243,239,232,.14),
    inset 0 -1px 0 rgba(34,48,66,.40),
    0 0 0 1px rgba(173,191,213,0.15),
    0 14px 34px rgba(34,48,66,.30);
}


/* ============================================================
   manz-tab — eigenständige Tab-Klassen
   Kein manz-card als Basis nötig. Padding/Radius/Größe aus FSE.
   ============================================================ */

.manz-tab {
  position: relative;
  cursor: pointer;
  background: linear-gradient(145deg,
    rgba(94,128,160,.12) 0%,
    rgba(28,53,82,.26) 42%,
    rgba(34,48,66,.17) 100%);
  border: 1px solid rgba(173,191,213,.14);
  color: rgba(243,239,232,0.52);
  font-weight: 400 !important;
  transition: color 220ms ease,
              border-color 220ms ease,
              background 220ms ease;
}
.manz-switch-tab { cursor: pointer; }
.manz-tab *,
.manz-tab-active * {
  color: inherit !important;
}
.manz-tab:hover {
  transform: none;
  background: linear-gradient(145deg,
    rgba(94,128,160,.18) 0%,
    rgba(28,53,82,.36) 42%,
    rgba(34,48,66,.24) 100%);
  border-color: rgba(173,191,213,.22);
  color: rgba(243,239,232,0.78);
}
.manz-tab-active {
  position: relative;
  background: linear-gradient(145deg,
    rgba(94,128,160,.30) 0%,
    rgba(28,53,82,.58) 42%,
    rgba(34,48,66,.38) 100%);
  border: 1px solid rgba(173,191,213,0.50);
  color: var(--mc-warm-white);
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(243,239,232,.14),
    inset 0 -1px 0 rgba(34,48,66,.40),
    0 0 0 1px rgba(173,191,213,0.15),
    0 14px 34px rgba(34,48,66,.30);
}


/* ============================================================
   Card-Modifier
   ============================================================ */

/* manz-card-accent — Gold-Signaturkante über ::after, sparsam. */
.manz-card-accent::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(var(--mc-gold), var(--mc-gold)),
    radial-gradient(ellipse 40% 22% at 50% 0%, rgba(201,160,92,0.07), transparent 75%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: calc(100% - 32px) 2px, 100% 100%;
}

/* manz-card-swash — blendet Swash erst bei Hover/Active ein. */
.manz-card-swash .manz-swash::after,
.manz-card-swash .manz-swash-gold::after,
.manz-card-swash .manz-swash-blue::after,
.manz-card-swash .manz-swash-warm::after { opacity: 0; transition: opacity 280ms ease; }
.manz-card-swash:hover .manz-swash::after,
.manz-card-swash:hover .manz-swash-gold::after,
.manz-card-swash:hover .manz-swash-blue::after,
.manz-card-swash:hover .manz-swash-warm::after,
.manz-card-swash.is-active .manz-swash::after,
.manz-card-swash.is-active .manz-swash-gold::after,
.manz-card-swash.is-active .manz-swash-blue::after,
.manz-card-swash.is-active .manz-swash-warm::after { opacity: 1; }

/* manz-card-spotlight — radiale Lichtzone oben-links beim Hover. */
.manz-card-spotlight {
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.24) 0%, rgba(28,53,82,.52) 42%, rgba(34,48,66,.34) 100%),
    radial-gradient(ellipse 70% 55% at 22% 0%, rgba(173,191,213,0) 0%, rgba(68,96,132,0) 45%, transparent 72%);
  transition: background-image 450ms ease, transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.manz-card-spotlight:hover {
  background-image:
    linear-gradient(145deg, rgba(94,128,160,.30) 0%, rgba(28,53,82,.58) 42%, rgba(34,48,66,.38) 100%),
    radial-gradient(ellipse 70% 55% at 22% 0%, rgba(173,191,213,0.10) 0%, rgba(68,96,132,0.06) 45%, transparent 72%);
}


/* ============================================================
   2b. PILL / TAG
   ------------------------------------------------------------
   Metadaten-Chip für Projekt-/Insight-Cards. Kein eigenes
   Hover, erbt den Card-Hover vom Elternelement. Keine
   Schriftgröße/Größe erzwungen.
   ============================================================ */

.manz-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(173,191,213,0.3);
  color: var(--mc-blue-soft);
  background: rgba(173,191,213,0.06);
}
.manz-pill-on-light {
  border-color: rgba(28,53,82,0.22);
  color: var(--mc-deep-blue);
  background: rgba(28,53,82,0.05);
}

/* Kategorie-Modifier */
.manz-pill-organisation { border-color: rgba(63,94,78,0.70);  color: #80AA94;  background: rgba(63,94,78,0.22); }
.manz-pill-system       { border-color: rgba(68,96,132,0.50); color: var(--mc-blue-mid); background: rgba(68,96,132,0.14); }
.manz-pill-prozess      { border-color: rgba(74,85,104,0.70);  color: #B0B8C8;  background: rgba(74,85,104,0.26); }
.manz-pill-governance   { border-color: rgba(74,85,104,0.50);  color: var(--mc-slate-light); background: rgba(74,85,104,0.14); }


/* ============================================================
   manz-link — Inline-Link mit Punkt-Marker und Hover-Unter-
   streichung. Vier eigenständige Farbvarianten.
   ============================================================ */

.manz-link,
.manz-link-organisation,
.manz-link-system,
.manz-link-prozess,
.manz-link-governance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  text-decoration: none;
  color: var(--mc-blue);
  transition: color 220ms ease;
}
.manz-link              { color: var(--mc-blue); }
.manz-link-organisation { color: #80AA94; }
.manz-link-system       { color: var(--mc-blue-mid); }
.manz-link-prozess      { color: #B0B8C8; }
.manz-link-governance   { color: var(--mc-slate-light); }

/* Punkt-Marker */
.manz-link::before,
.manz-link-organisation::before,
.manz-link-system::before,
.manz-link-prozess::before,
.manz-link-governance::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  transition: transform 240ms cubic-bezier(.4,0,.2,1);
}

/* Unterstreichung — wächst beim Hover von links nach rechts. */
.manz-link::after,
.manz-link-organisation::after,
.manz-link-system::after,
.manz-link-prozess::after,
.manz-link-governance::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 12px;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.manz-link:hover::before,
.manz-link-organisation:hover::before,
.manz-link-system:hover::before,
.manz-link-prozess:hover::before,
.manz-link-governance:hover::before { transform: scale(1.4); }

.manz-link:hover::after,
.manz-link-organisation:hover::after,
.manz-link-system:hover::after,
.manz-link-prozess:hover::after,
.manz-link-governance:hover::after  { transform: scaleX(1); }


/* ============================================================
   Zahlen, Text-Highlight, Gradient-Text, Mark
   ============================================================ */

.manz-number {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.manz-number-gold { color: var(--mc-gold); }

/* Text-Highlight — Marker-Stift-Effekt für einzelne Worte.
   Nur Hellflächen-Variante. */
.manz-text-highlight {
  display: inline-block;
  background: var(--mc-blue-light);
  color: var(--mc-deep-blue);
  padding: 2px 10px;
  border-radius: 4px;
}

/* Gradient-Text — statisch, für einzelne Wörter/Wortgruppen. */
.manz-text-gradient {
  background-image: linear-gradient(90deg,
    var(--mc-blue-secondary) 0%,
    var(--mc-blue)           27%,
    var(--mc-blue-mid)       55%,
    var(--mc-blue-soft)      68%,
    var(--mc-blue)           100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* manz-mark — semantische Themenfeld-Kennzeichnung. */
.manz-mark {
  display: inline-block;
  color: var(--mc-deep-blue);
  background: rgba(28,53,82,0.06);
  border: 1px solid rgba(28,53,82,0.18);
  padding: 0.3em 0.7em;
  border-radius: 0.3em;
}
.manz-mark--on-dark {
  color: var(--mc-blue-soft);
  background: rgba(173,191,213,0.08);
  border-color: rgba(173,191,213,0.25);
}


/* ============================================================
   4. SWASH — hochwertiger Marker-/Pinselstrich
   ------------------------------------------------------------
   Jede Farbklasse trägt alles selbst. Progressive Enhancement:
   OHNE JS ist der Swash immer sichtbar. Erst wenn das Observer-
   Snippet <html> mit .manz-js-swash-ready markiert, wird der
   Swash bis zum Scroll-Trigger (.is-visible) ausgeblendet und
   dann eingezeichnet.
   ============================================================ */

.manz-swash,
.manz-swash-gold,
.manz-swash-blue,
.manz-swash-warm {
  position: relative;
  display: inline-block;
}

.manz-swash::after,
.manz-swash-gold::after,
.manz-swash-blue::after,
.manz-swash-warm::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.20em;
  width: 5em;
  aspect-ratio: 264 / 32;
  height: auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 32'%3E%3Cpath d='M6,17 C40,12 100,12.5 170,15 C210,17 240,18.5 258,17 C240,21.5 210,21.5 170,20 C100,17.5 40,18 6,21.5 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 32'%3E%3Cpath d='M6,17 C40,12 100,12.5 170,15 C210,17 240,18.5 258,17 C240,21.5 210,21.5 170,20 C100,17.5 40,18 6,21.5 Z'/%3E%3C/svg%3E");
  clip-path: inset(0 0% 0 0); /* Default: sichtbar, Fallback ohne JS */
}

.manz-swash-gold::after { background-color: var(--mc-gold); }
.manz-swash-blue::after { background-color: var(--mc-blue); }
.manz-swash-warm::after { background-color: var(--mc-warm-white); }

/* Draw-Animation — nur wenn Observer-Script aktiv. */
.manz-js-swash-ready .manz-swash::after,
.manz-js-swash-ready .manz-swash-gold::after,
.manz-js-swash-ready .manz-swash-blue::after,
.manz-js-swash-ready .manz-swash-warm::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms cubic-bezier(.22,.8,.3,1);
}
.manz-js-swash-ready .manz-swash.is-visible::after,
.manz-js-swash-ready .manz-swash-gold.is-visible::after,
.manz-js-swash-ready .manz-swash-blue.is-visible::after,
.manz-js-swash-ready .manz-swash-warm.is-visible::after {
  clip-path: inset(0 0% 0 0);
}


/* ============================================================
   5. BUTTON-SYSTEM
   ------------------------------------------------------------
   Drei Anwendungsfälle:
   - manz-button-dark-background  (Content-/CTA auf Dunkel)
   - manz-button-light-background (Content-/CTA auf Hell)
   - manz-button-hero             (Hero-Variante)
   - manz-button-menu             (Header, eigenes System)

   FSE liefert Breite/Höhe/Padding/Radius/Schriftgröße.
   Das Child Theme liefert Kontur, Hover, Dot, Fill, Icon,
   Border-Beam. Effekt-Layer nutzen border-radius:inherit.
   ============================================================ */

/* Gemeinsame Basis für alle drei Content-Button-Varianten. */
.manz-button-dark-background .wp-block-button__link,
a.manz-button-dark-background,
.manz-button-light-background .wp-block-button__link,
a.manz-button-light-background,
.manz-button-hero .wp-block-button__link,
a.manz-button-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
  padding-left: 1.2em;
  padding-right: 2.6em;
  transition: color 0.35s ease, border-color 0.35s ease;
}

/* Fill-Layer mit Icon-Reveal. Ursprung exakt am Punkt (1.5em). */
.manz-button-dark-background .wp-block-button__link::after,
a.manz-button-dark-background::after,
.manz-button-light-background .wp-block-button__link::after,
a.manz-button-light-background::after,
.manz-button-hero .wp-block-button__link::after,
a.manz-button-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  clip-path: circle(0% at 1.5em center);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1em 1em;
  background-image: url("../images/manz-icon-mark-full.png");
}
.manz-button-dark-background .wp-block-button__link:hover::after,
.manz-button-dark-background .wp-block-button__link:focus::after,
a.manz-button-dark-background:hover::after,
a.manz-button-dark-background:focus::after,
.manz-button-light-background .wp-block-button__link:hover::after,
.manz-button-light-background .wp-block-button__link:focus::after,
a.manz-button-light-background:hover::after,
a.manz-button-light-background:focus::after,
.manz-button-hero .wp-block-button__link:hover::after,
.manz-button-hero .wp-block-button__link:focus::after,
a.manz-button-hero:hover::after,
a.manz-button-hero:focus::after {
  clip-path: circle(150% at 1.5em center);
}

/* Punkt-Marker — pulsierend im Ruhezustand, verschwindet bei Hover. */
.manz-button-dark-background .wp-block-button__link::before,
a.manz-button-dark-background::before,
.manz-button-light-background .wp-block-button__link::before,
a.manz-button-light-background::before,
.manz-button-hero .wp-block-button__link::before,
a.manz-button-hero::before {
  content: "";
  width: 0.6em; height: 0.6em;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: currentColor;
  transition: opacity 0.3s ease;
  animation: manz-dot-pulse 2.4s ease-in-out infinite;
}
.manz-button-dark-background .wp-block-button__link:hover::before,
.manz-button-dark-background .wp-block-button__link:focus::before,
a.manz-button-dark-background:hover::before,
a.manz-button-dark-background:focus::before,
.manz-button-light-background .wp-block-button__link:hover::before,
.manz-button-light-background .wp-block-button__link:focus::before,
a.manz-button-light-background:hover::before,
a.manz-button-light-background:focus::before,
.manz-button-hero .wp-block-button__link:hover::before,
.manz-button-hero .wp-block-button__link:focus::before,
a.manz-button-hero:hover::before,
a.manz-button-hero:focus::before {
  opacity: 0;
  animation: none;
}
@keyframes manz-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.manz-button-dark-background .wp-block-button__link:active,
a.manz-button-dark-background:active,
.manz-button-light-background .wp-block-button__link:active,
a.manz-button-light-background:active,
.manz-button-hero .wp-block-button__link:active,
a.manz-button-hero:active { animation: manz-menu-pulse 320ms ease; }

/* Farbwelt Dunkel */
.manz-button-dark-background .wp-block-button__link,
a.manz-button-dark-background {
  color: var(--mc-warm-white);
  border: 1.5px solid rgba(173,191,213,0.35);
}
.manz-button-dark-background .wp-block-button__link::after,
a.manz-button-dark-background::after {
  background-color: var(--mc-warm-white);
}
.manz-button-dark-background .wp-block-button__link:hover,
.manz-button-dark-background .wp-block-button__link:focus,
a.manz-button-dark-background:hover,
a.manz-button-dark-background:focus {
  color: var(--mc-deep-blue) !important;
  border-color: transparent;
}
.manz-button-dark-background .wp-block-button__link:visited,
a.manz-button-dark-background:visited { color: var(--mc-warm-white); }

/* Farbwelt Hell */
.manz-button-light-background .wp-block-button__link,
a.manz-button-light-background {
  color: var(--mc-deep-blue);
  border: 1.5px solid var(--mc-deep-blue);
}
.manz-button-light-background .wp-block-button__link::after,
a.manz-button-light-background::after {
  background-color: var(--mc-deep-blue);
}
.manz-button-light-background .wp-block-button__link:hover,
.manz-button-light-background .wp-block-button__link:focus,
a.manz-button-light-background:hover,
a.manz-button-light-background:focus {
  color: var(--mc-white) !important;
  border-color: transparent;
}
.manz-button-light-background .wp-block-button__link:visited,
a.manz-button-light-background:visited { color: var(--mc-deep-blue); }

/* Farbwelt Hero — blaue Kontur, Warmweiß-Fill beim Hover. */
.manz-button-hero .wp-block-button__link,
a.manz-button-hero {
  color: var(--mc-warm-white);
  border: 1.5px solid var(--mc-blue-mid);
}
.manz-button-hero .wp-block-button__link::after,
a.manz-button-hero::after {
  background-color: var(--mc-warm-white);
}
.manz-button-hero .wp-block-button__link:hover,
.manz-button-hero .wp-block-button__link:focus,
a.manz-button-hero:hover,
a.manz-button-hero:focus {
  color: var(--mc-deep-blue) !important;
  border-color: transparent;
}
.manz-button-hero .wp-block-button__link:visited,
a.manz-button-hero:visited { color: var(--mc-warm-white); }

/* Menü-Button — kombinierbar mit manz-border-beam.
   Eigenes System, kein Fill-Effekt. */
.manz-button-menu .wp-block-button__link,
a.manz-button-menu,
button.manz-button-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  background: transparent;
  color: var(--mc-warm-white);
  border: 1px solid rgba(243,239,232,0.3);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.manz-button-menu .wp-block-button__link:hover,
.manz-button-menu .wp-block-button__link:focus,
a.manz-button-menu:hover,
a.manz-button-menu:focus,
button.manz-button-menu:hover,
button.manz-button-menu:focus {
  border-color: rgba(243,239,232,0.55);
  background: rgba(173,191,213,0.05);
}
.manz-button-menu .wp-block-button__link:visited,
a.manz-button-menu:visited { color: var(--mc-warm-white); }
.manz-button-menu .wp-block-button__link:focus:not(:focus-visible),
a.manz-button-menu:focus:not(:focus-visible),
button.manz-button-menu:focus:not(:focus-visible) {
  outline: none;
}
.manz-button-menu .wp-block-button__link:focus,
a.manz-button-menu:focus,
button.manz-button-menu:focus { animation: manz-menu-pulse-neutral 550ms ease forwards; }
@keyframes manz-menu-pulse-neutral {
  0%   { box-shadow: 0 0 0 0 rgba(173,191,213,0.75); }
  100% { box-shadow: 0 0 0 14px rgba(173,191,213,0); }
}
@keyframes manz-menu-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,160,92,0.3); }
  100% { box-shadow: 0 0 0 6px rgba(201,160,92,0); }
}

/* Tastaturfokus — Gold als funktionaler Akzent auf dunklen Flächen. */
.manz-button-dark-background .wp-block-button__link:focus-visible,
a.manz-button-dark-background:focus-visible,
.manz-button-hero .wp-block-button__link:focus-visible,
a.manz-button-hero:focus-visible,
.manz-button-menu .wp-block-button__link:focus-visible,
a.manz-button-menu:focus-visible,
button.manz-button-menu:focus-visible {
  outline: 2px solid var(--mc-gold);
  outline-offset: 3px;
}


/* ============================================================
   6. BORDER BEAM — additiver Effekt-Modifier
   ------------------------------------------------------------
   offset-path: padding-box — folgt automatisch Umfang UND
   Radius des Trägerelements. Vier unterstützte Fälle plus
   manz-button-menu (immer mit Beam).
   ============================================================ */

a.manz-border-beam,
button.manz-border-beam,
.wp-block-button.manz-border-beam > .wp-block-button__link,
.menu-item.manz-border-beam > a,
.manz-button-menu .wp-block-button__link,
a.manz-button-menu,
button.manz-button-menu {
  position: relative;
  isolation: isolate;
}

@supports (offset-path: padding-box) {
  a.manz-border-beam::after,
  button.manz-border-beam::after,
  .wp-block-button.manz-border-beam > .wp-block-button__link::after,
  .menu-item.manz-border-beam > a::after,
  .manz-button-menu .wp-block-button__link::after,
  a.manz-button-menu::after,
  button.manz-button-menu::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    box-sizing: border-box;
    width: var(--mc-beam-size);
    height: var(--mc-beam-width);
    background: linear-gradient(90deg, transparent, var(--mc-warm-white) 45%, rgba(173,191,213,0.6) 55%, transparent);
    border-radius: 999px;
    offset-path: padding-box;
    offset-distance: 0%;
    offset-rotate: auto;
    animation: manz-beam-travel var(--mc-beam-duration) linear infinite;
    animation-delay: calc(var(--mc-beam-duration) * -0.06);
    pointer-events: none;
    z-index: 2;
  }
}

@supports not (offset-path: padding-box) {
  a.manz-border-beam::after,
  button.manz-border-beam::after,
  .wp-block-button.manz-border-beam > .wp-block-button__link::after,
  .menu-item.manz-border-beam > a::after,
  .manz-button-menu .wp-block-button__link::after,
  a.manz-button-menu::after,
  button.manz-button-menu::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    border-radius: inherit;
    padding: var(--mc-beam-width);
    background: conic-gradient(from -20deg,
      transparent 0%, transparent 92%,
      var(--mc-warm-white) 96%,
      transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    animation: manz-beam-fallback var(--mc-beam-duration) linear infinite;
    pointer-events: none;
    z-index: 2;
  }
  @keyframes manz-beam-fallback {
    0%, 78% { opacity: 0; transform: rotate(0deg); }
    82% { opacity: 1; }
    98% { opacity: 1; transform: rotate(340deg); }
    100% { opacity: 0; transform: rotate(360deg); }
  }
}

@keyframes manz-beam-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  40%  { offset-distance: 40%;  opacity: 0; }
  41%  { opacity: 1; }
  90%  { opacity: 1; }
  91%  { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}


/* ============================================================
   7. GLARE HOVER — diagonaler Lichtreflex beim Hover.
   Nur auf echten Hover-Geräten. Kombinierbar: manz-card manz-glare.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .manz-glare {
    position: relative;
    overflow: hidden;
  }
  .manz-glare::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: linear-gradient(-40deg, transparent 42%, rgba(173,191,213,0.10) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform 700ms ease;
    pointer-events: none;
  }
  .manz-glare:hover::before {
    transform: translateX(130%);
  }
}


/* ============================================================
   prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .manz-button-dark-background .wp-block-button__link,
  a.manz-button-dark-background,
  .manz-button-light-background .wp-block-button__link,
  a.manz-button-light-background,
  .manz-button-hero .wp-block-button__link,
  a.manz-button-hero,
  .manz-button-menu .wp-block-button__link,
  a.manz-button-menu,
  button.manz-button-menu {
    transition: none !important;
    animation: none !important;
  }
  .manz-button-dark-background .wp-block-button__link::before,
  a.manz-button-dark-background::before,
  .manz-button-light-background .wp-block-button__link::before,
  a.manz-button-light-background::before,
  .manz-button-hero .wp-block-button__link::before,
  a.manz-button-hero::before {
    animation: none;
  }
  .manz-card,
  .manz-card-on-light,
  .manz-card-spotlight { transition: none !important; }
  .manz-swash::after,
  .manz-swash-gold::after,
  .manz-swash-blue::after,
  .manz-swash-warm::after { clip-path: inset(0 0% 0 0) !important; transition: none; }
  .manz-glare::before { transition: none !important; transform: none !important; display: none; }
  a.manz-border-beam::after,
  button.manz-border-beam::after,
  .wp-block-button.manz-border-beam > .wp-block-button__link::after,
  .menu-item.manz-border-beam > a::after,
  .manz-button-menu .wp-block-button__link::after,
  a.manz-button-menu::after,
  button.manz-button-menu::after {
    animation: none;
    display: none;
  }
}