/* 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. */

.mh-balance-intro { color: rgba(255,255,255,0.72); }
.mh-balance h2 { max-width: 24ch; }
.mh-hero-grid { align-items: center; }
.mh-start { padding: var(--space-md) 0; background: var(--teal-tint); }
.mh-work { padding: var(--space-md) 0; background: var(--white); }
.mh-own { padding: var(--space-md) 0; background: var(--white); }

/* ---- Hero: zwei Fotos als kleine Collage --------------------- */
.mh-hc {
  position: relative;
  aspect-ratio: 1 / 1.04;
  max-width: 470px;
  width: 100%;
  justify-self: end;
}
.mh-hcard {
  --tilt: 0deg;
  position: absolute;
  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.45s var(--ease-marke);
}
.mh-hcard img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 8px;
}
.mh-hcard figcaption { margin-top: 8px; }
.mh-hcard figcaption strong {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.mh-hcard figcaption span {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--ink-soft);
}
/* Die hintere Karte liegt VOR der Hauptkarte (z2): so ueberlappt sie
   nur deren Bildflaeche und ihre eigene Beschriftung bleibt komplett
   lesbar. Die Hauptkarte traegt ihre Beschriftung unten, frei. */
.mh-hcard--main { left: 0; top: 13%; width: 62%; z-index: 1; --tilt: -1.2deg; }
.mh-hcard--side { right: 0; top: 0; width: 42%; z-index: 2; --tilt: 2.4deg; }
@media (hover: hover) {
  .mh-hc:hover .mh-hcard--main { transform: rotate(-2deg) translate(-7px, 4px); }
  .mh-hc:hover .mh-hcard--side { transform: rotate(4.2deg) translate(9px, -7px); }}


/* ---- Entstehungs-Grafik: fuenf Stationen an einer Linie ------ */
.mh-story {
  margin-top: 34px;
  padding: 30px 32px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-image:
    linear-gradient(to right, rgba(16,100,102,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,100,102,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.mh-story:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.mh-story-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.mh-story-steps::before {
  content: '';
  position: absolute; top: 8px; left: 10px; right: 10px;
  height: 2px;
  background: rgba(16,100,102,0.18);
}
.mh-step { position: relative; }
.mh-step-marker {
  position: relative; z-index: 1;
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal);
  margin-bottom: 8px;
}
.mh-step-5 .mh-step-marker { background: var(--peach); border-color: var(--peach); }
.mh-step-visual svg { display: block; width: 100%; max-width: 140px; height: auto; }
.mh-step strong {
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.35;
  color: var(--ink);
}
/* die Content-Kacheln der letzten Station poppen einzeln */
.mh-s5-t { transform-box: fill-box; transform-origin: center; }
.mh-story:hover .mh-s5-t1, .mh-story:focus-visible .mh-s5-t1 { animation: mh-tilepop2 0.4s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.mh-story:hover .mh-s5-t2, .mh-story:focus-visible .mh-s5-t2 { animation: mh-tilepop2 0.4s cubic-bezier(.2,.7,.2,1) 0.25s both; }
.mh-story:hover .mh-s5-t3, .mh-story:focus-visible .mh-s5-t3 { animation: mh-tilepop2 0.4s cubic-bezier(.2,.7,.2,1) 0.37s both; }
.mh-story:hover .mh-s5-t4, .mh-story:focus-visible .mh-s5-t4 { animation: mh-tilepop2 0.4s cubic-bezier(.2,.7,.2,1) 0.49s both; }
.mh-story:hover .mh-s5-t5, .mh-story:focus-visible .mh-s5-t5 { animation: mh-tilepop2 0.4s cubic-bezier(.2,.7,.2,1) 0.61s both; }
/* Kennzahlen als Ergebnis-Zeile am Ende der Entwicklung */
.mh-story-result {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.7;
  color: var(--ink-soft);
}
.mh-story-result-label {
  display: inline-block; margin-right: 10px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
}
.mh-story-result strong {
  font-size: 17px; font-weight: 800;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}
.mh-story-dot { margin: 0 10px; color: var(--teal-muted-light); }

/* ---- Zusammenarbeit: drei Foto-Module ------------------------ *//* ---- Zusammenarbeit: drei Foto-Module ------------------------ */
.mh-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.mh-wcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.32s var(--ease-marke), box-shadow 0.32s ease;
}
.mh-wcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.mh-wcard-media { overflow: hidden; }
.mh-wcard-media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3.4; object-fit: cover;
  transition: transform 0.55s var(--ease-marke);
}
.mh-wcard:hover .mh-wcard-media img { transform: scale(1.05); }
.mh-wcard-body { padding: 18px 22px 20px; }
.mh-wcard-body h3 { margin: 0 0 5px; font-size: 16.5px; color: var(--ink); }
.mh-wcard-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---- Einordnung: zwei gleichwertige Setup-Spalten ------------ */
.mh-balance { padding: var(--space-sm) 0; }
.mh-su-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 30px;
}
.mh-su-head {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--peach);
}
.mh-su-meta { margin-bottom: 6px; max-width: 260px; }
.mh-su-meta svg { display: block; width: 100%; height: auto; }
.mh-su-line { stroke-dasharray: 240; }
.mh-su-col:hover .mh-su-line { animation: mh-su-draw2 0.9s ease 0.1s both; }
.mh-su-col:hover .mh-su-l4 { animation-delay: 0.6s; }
.mh-su-list { list-style: none; margin: 0; padding: 0; }
.mh-su-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.mh-su-glyph svg { display: block; width: 44px; height: 44px; }
.mh-su-row strong { display: block; font-size: 15.5px; color: var(--white); margin-bottom: 3px; }
.mh-su-row p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.68); }

/* ---- Für wen: Trust-Kategorien mit Logo-Reihen --------------- */
.mh-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.mh-fit {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px 20px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-marke), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mh-fit:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(16,100,102,0.25);
}
.mh-fit h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.mh-fit-sub { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.mh-fit-beleg {
  margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.mh-fit-beleg a {
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(16,100,102,0.35);
  padding-bottom: 1px;
  white-space: nowrap;
}
.mh-fit-beleg a:hover { border-color: var(--peach); }
/* Logos als ruhige, entsaettigte Reihe; Hover holt die Farbe zurueck */
.mh-fit-logos {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mh-fit-logos img {
  height: 40px; width: auto; max-width: 120px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.mh-fit-logos img:hover {
  transform: translateY(-2px);
}

/* Case-Links in den Fit-Karten */

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 980px) {
  .mh-hc { max-width: 420px; justify-self: center; }
  /* Entstehung als vertikale Geschichte */
  .mh-story-steps { grid-template-columns: 1fr; gap: 18px; }
  .mh-story-steps::before { top: 9px; bottom: 9px; left: 8px; right: auto; width: 2px; height: auto; }
  .mh-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 6px; align-items: center; }
  .mh-step-visual svg { max-width: 120px; }
  .mh-step strong { margin-top: 0; }
  .mh-work-grid { grid-template-columns: 1fr; }
  .mh-wcard-media img { aspect-ratio: 16 / 9; }
  .mh-su-grid { grid-template-columns: 1fr; gap: 30px; }
  .mh-fit-grid { grid-template-columns: minmax(0, 1fr); }}

@media (max-width: 560px) {
  .mh-story { padding: 22px 18px 18px; }}

@media (prefers-reduced-motion: reduce) {
  .mh-hcard, .mh-wcard, .mh-wcard-media img, .mh-fit, .mh-fit-logos img { transition: none; }
  .mh-fit:hover { transform: none; }
  .mh-fit-logos img:hover { transform: none; }
  .mh-hc:hover .mh-hcard--main, .mh-hc:hover .mh-hcard--side { transform: rotate(var(--tilt)); }
  .mh-wcard:hover { transform: none; }
  .mh-wcard:hover .mh-wcard-media img { transform: none; }}


/* ============================================================
   Responsive-Notausgang für Schmalstbreiten (Audit-Schleife 2,
   gemessen bei 320px). Steht bewusst am Dateiende, damit er
   gegen die nowrap-Basisregeln gewinnt.
   ============================================================ */
@media (max-width: 379px) {
  .mh-fit-beleg a { white-space: normal; }}



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

  /* ---------- Gruppe f ---------- */
  /* /ueber-michael-hetzel/ – Fit-Karte "Handwerk & Bau": der Beleg-Link ist auf
     Mobil display:inline-flex mit min-height 44px. Dadurch wird der Link zu einem
     unteilbaren Block, der die ganze Zeile fuellt; der Satz bricht direkt hinter
     dem Link um und die naechste Zeile beginnt mit ", kompletter digitaler ...".
     Der Link ist ein Inline-Link mitten im Satz (WCAG-Ausnahme "Inline"), er darf
     deshalb wieder normal im Textfluss mitlaufen und umbrechen. */
  .mh-fit-beleg a {
    display: inline;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 1px;
    white-space: normal;
  }
  
  /* /ueber-michael-hetzel/ – Entstehungs-Grafik: unter 980px ist .mh-step ein
     Grid mit 34px-Spalte fuer den Punkt. Die Beschriftung wird automatisch in
     Zeile 2 / Spalte 1 gesetzt, also in die 34px schmale Spalte, und bricht dort
     Wort fuer Wort um ("Holger / wird / aufmerksam"), waehrend rechts daneben
     viel Platz frei bleibt. Beschriftung neben den Punkt, Bild darunter. */
  .mh-step strong { grid-column: 2; grid-row: 1; }
  .mh-step-visual { grid-column: 2; grid-row: 2; }
  .mh-step { gap: 6px 10px; }
  .mh-step-marker { margin-bottom: 0; }
  
  /* /ueber-michael-hetzel/ – Ergebniszeile unter der Grafik: die Trennpunkte
     stehen am Zeilenende in der Luft ("... organische Aufrufe ·") und "Videos"
     rutscht allein in die naechste Zeile. Label auf eine eigene Zeile, die
     Trennpunkte werden zu Zeilenumbruechen: drei saubere Kennzahl-Zeilen. */
  .mh-story-result-label { display: block; margin: 0 0 2px; }
  .mh-story-dot { display: block; font-size: 0; line-height: 0; margin: 0; }}


/* Ueber-mich, Prozessschritte: Ueberschrift und Grafik sitzen im Raster
   falsch. Mobil bereits behoben; die Grafik schaltet aber schon ab 980px auf
   die vertikale Darstellung um, dazwischen blieb es schief. */
@media (min-width: 641px) and (max-width: 980px) {
  .mh-step strong { grid-column: 2; grid-row: 1; }
  .mh-step-visual { grid-column: 2; grid-row: 2; }
  .mh-step { gap: 6px 10px; }
  .mh-step-marker { margin-bottom: 0; }}


/* ==========================================================================
   GRAFIK-FEINSCHLIFF - Phase 1 und 2 des Produktionsdurchlaufs, 03.08.2026
   --------------------------------------------------------------------------
   Sechs Pruefdurchgaenge haben jede beschriftete Grafik aller 16 Routen
   einzeln nachgemessen, bei 320 / 360 / 390 / 430 / 641 / 768 / 900 / 980 /
   1024 und 1280px. Aufgenommen ist hier ausschliesslich Fehlerbehebung:
   Beschnitt, Ueberlauf, Beschriftungen unter 11px, Linien ohne Endpunkt,
   verdeckte Texte, tote Flaeche. Vorschlaege, die Anordnung oder Aufbau einer
   Grafik aendern, sind bewusst NICHT enthalten.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- /ueber-michael-hetzel/, Entstehungs-Grafik ----------------------- */
  /* Die senkrechte Schiene lief mit bottom:9px bis zum unteren Rand der Liste,
     also rund 90px ueber den letzten (orangenen) Punkt "Social Lift entsteht"
     hinaus und endete im Leeren. Der Zielpunkt lag damit nicht am Ende der
     Linie. Schiene pro Station zeichnen, letzte Station endet am Punkt. */
  .mh-story .mh-story-steps::before { content: none; }
  .mh-story .mh-step::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: -18px;
    width: 2px;
    background: rgba(16,100,102,0.18);
  }
  .mh-story .mh-step:last-child::before { bottom: calc(100% - 18px); }}


/* --- /ueber-michael-hetzel/, Entstehungs-Grafik ------------------------ */
/* Gleicher Fall, hier deutlicher: hinter dem orangenen Punkt "Social Lift
   entsteht" lief die Schiene noch rund 190px nach rechts weiter. Fuenf
   Spalten, vier Luecken a 20px. */
@media (min-width: 981px) {
  .mh-story .mh-story-steps::before { right: calc((100% - 80px) / 5 - 9px); }}


/* Tablet 641 bis 980px: dort ist die Grafik bereits die vertikale Zeitachse,
   die Schiene haengt aber genauso unter dem letzten Punkt durch wie auf dem
   Handy. Gleiche Loesung wie im Mobil-Block. */
@media (min-width: 641px) and (max-width: 980px) {
  .mh-story .mh-story-steps::before { content: none; }
  .mh-story .mh-step::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: -18px;
    width: 2px;
    background: rgba(16,100,102,0.18);
  }
  .mh-story .mh-step:last-child::before { bottom: calc(100% - 18px); }}


/* --- Ketten-Grafiken: rechte Haelfte blieb leer ------------------------- */
/* Punkt und Beschriftung standen links, das Bild darunter war auf 104px
   gedeckelt und hing ebenfalls links - ueber die halbe Zeilenbreite blieb
   ungenutzt. Jetzt drei Spalten in einer Zeile: Punkt, Bild, Beschriftung. */
@media (max-width: 640px) {

  .mh-story .mh-step {
    grid-template-columns: 34px 92px minmax(0, 1fr);
    gap: 0 12px;
  }
  .mh-story .mh-step strong { grid-column: 3; grid-row: 1; align-self: center; }
  .mh-story .mh-step-visual { grid-column: 2; grid-row: 1; }
  .mh-story .mh-step-visual svg { max-width: 92px; }}