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


/* ---- Hero-Funnel: Region -> gesponsertes Video -> Interesse -> Anfrage.
   ENDZUSTAND ist der Standard; abgesenkt nur im Ruhezustand (Hover-Geraete
   bis Hover, Touch bis .is-visible). Aufbau in vier Stufen, keine Schleifen. */
.mf2-grp, .mf2-phone, .mf2-msg {
  transform-box: fill-box; transform-origin: center;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.mf2-phone { transition-delay: 0.3s; }
.mf2-star { transform-box: fill-box; transform-origin: center bottom; transition: transform 0.45s cubic-bezier(.2,.9,.3,1.3) 0.5s; }
.mf2-linkA { transition: stroke-dashoffset 0.5s ease 0.55s; }
.mf2-linkB { transition: stroke-dashoffset 0.6s ease 0.75s; }
.mf2-linkC { transition: stroke-dashoffset 0.6s ease 0.95s; }
.mf2-msg { transition-delay: 1.1s; }
.mf2-dot { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(.2,.9,.3,1.3) 1.35s; }
@media (hover: hover) {
  .rc-hero-media:not(:hover) .mf2-grp { opacity: 0.55; }
  .rc-hero-media:not(:hover) .mf2-star { transform: scale(0.9); }
  .rc-hero-media:not(:hover) .mf2-phone { opacity: 0.55; transform: translateY(4px); }
  .rc-hero-media:not(:hover) .mf2-linkA { stroke-dashoffset: 40; }
  .rc-hero-media:not(:hover) .mf2-linkB { stroke-dashoffset: 140; }
  .rc-hero-media:not(:hover) .mf2-linkC { stroke-dashoffset: 130; }
  .rc-hero-media:not(:hover) .mf2-msg { opacity: 0.4; transform: translateY(5px); }
  .rc-hero-media:not(:hover) .mf2-dot { transform: scale(0.5); }}


/* ---- Anzeigen-Radius: der Kreis reicht nicht bis zu den anderen ---------- */
.rc-ad-ring {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.96); opacity: 0.75;
  transition: transform 0.55s var(--ease-marke), opacity 0.55s ease;
}
.rc-ad-media:hover .rc-ad-ring { transform: scale(1); opacity: 1; }
.rc-ad-sheet {
  transform-box: fill-box; transform-origin: center;
  transform: translateY(3px);
  transition: transform 0.45s var(--ease-marke);
}
.rc-ad-media:hover .rc-ad-sheet { transform: translateY(0); }
.rc-ad-seeker {
  transform-box: fill-box; transform-origin: center bottom;
  transform: scale(0.94);
  transition: transform 0.45s var(--ease-marke) 0.08s;
}
.rc-ad-media:hover .rc-ad-seeker { transform: scale(1); }
/* Die Reihe außerhalb kommt gestaffelt an: erst dadurch liest man sie als
   Menge und nicht als Deko. */
.rc-ad-crowd {
  transform-box: fill-box; transform-origin: center bottom;
  transform: translateY(7px); opacity: 0.7;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.rc-ad-media:hover .rc-ad-crowd { transform: translateY(0); opacity: 1; }
.rc-ad-p1 { transition-delay: 0.04s; }
.rc-ad-p2 { transition-delay: 0.10s; }
.rc-ad-p3 { transition-delay: 0.16s; }
.rc-ad-p4 { transition-delay: 0.22s; }
.rc-ad-p5 { transition-delay: 0.28s; }
.rc-ad-p6 { transition-delay: 0.34s; }
.rc-ad-p7 { transition-delay: 0.40s; }
.rc-ad-p8 { transition-delay: 0.46s; }
/* hintere Reihe: kleiner gezeichnet, hier zusaetzlich blasser = Tiefe */
.rc-ad-back { opacity: 0.55; }
.rc-ad-move {
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}
.rc-ad-media:hover .rc-ad-move { opacity: 1; }

/* Drei verdichtete Aussagen rechts, offene Liste statt Punktreihe */
.rc-points {
  list-style: none; margin: 8px 0 0; padding: 0;
}
.rc-points li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(16,100,102,0.14);
}
.rc-points li:first-child { border-top: 0; padding-top: 4px; }
.rc-points-num {
  font-size: 13px; font-weight: 800;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.rc-points p {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.rc1-p {
  transform-box: fill-box; transform-origin: center bottom;
  transform: translateY(8px); opacity: 0.62;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.rc1-p1 { transition-delay: 0.05s; }
.rc1-p2 { transition-delay: 0.10s; }
.rc1-p3 { transition-delay: 0.15s; }
.rc1-p4 { transition-delay: 0.20s; }

/* ---- Karte 2: der Text tritt zurück, der Betrieb tritt ins Bild --------- */
.rc2-sheet {
  transform: translateX(0); opacity: 0.85;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.rc2-card {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.97);
  transition: transform 0.5s var(--ease-marke);
}
.rc2-play {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.35s var(--ease-marke) 0.1s;
}

/* ---- Karte 3: die Mappe rückt ab, die Nachricht kommt an ---------------- */
.rc3-stack {
  transform: translateX(0); opacity: 0.85;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.rc3-bubble {
  transform-box: fill-box; transform-origin: 100% 100%;
  transform: scale(0.82); opacity: 0.65;
  transition: transform 0.45s var(--ease-marke) 0.1s, opacity 0.4s ease 0.1s;
}

/* ---- Azubi: der eigene Arbeitstag im Hochkant-Video --------------------- */
/* ---- Gegenüberstellung: Anzeige gegen Social-Media-Recruiting ----------- */
.rc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 34px;
}
.rc-compare-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-marke), box-shadow 0.4s ease;
}
.rc-compare-col:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Die Video-Spalte ist die Antwort der Seite, deshalb bekommt sie die Fläche */
.rc-compare-col-video { background: var(--teal-tint); border-color: rgba(16,100,102,0.18); }
.rc-compare-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; line-height: 1.3;
  margin: 0;
}
.rc-compare-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--teal-tint);
  color: var(--teal-dark);
}
.rc-compare-col-video .rc-compare-icon { background: var(--white); }
.rc-compare-icon svg { width: 19px; height: 19px; }
.rc-compare-list { list-style: none; margin: 18px 0 0; padding: 0; }
.rc-compare-list li {
  padding: 14px 0;
  font-size: 15.5px; line-height: 1.62;
  color: var(--ink-soft);
  border-top: 1px solid rgba(16,100,102,0.14);
}
.rc-compare-list li:first-child { border-top: 0; padding-top: 4px; }
.rc-compare-lead { display: block; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.rc-compare-note {
  margin: 28px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 15.5px; line-height: 1.66;
  color: var(--ink-soft);
}

/* ---- Fallkarte auf dunklem Grund ---------------------------------------- */
/* Steht in .sub-example (var(--ink)). .stat-number und .stat-label kommen
   von der Startseite in Petrol bzw. --ink-soft und wären hier unlesbar,
   deshalb werden beide Farben in diesem Kontext überschrieben. */

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .rc-compare { grid-template-columns: 1fr; gap: 18px; }}

@media (max-width: 760px) {
  .rc-compare-col { padding: 24px 22px 22px; }
  .rc-illu { max-width: 270px; }}


/* ---- Bewegung reduzieren ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mf2-grp, .mf2-star, .mf2-phone, .mf2-linkA, .mf2-linkB, .mf2-linkC, .mf2-msg, .mf2-dot,
  .rc-ad-ring, .rc-ad-sheet, .rc-ad-seeker, .rc-ad-crowd,
  .rc1-p, .rc2-sheet, .rc2-card, .rc2-play,
  .rc3-stack, .rc3-bubble,
  .rc-compare-col{ transition: none; }
  /* Endzustand steht sofort, die Absenkungen entfallen */
  .rc-hero-media .mf2-grp, .rc-hero-media .mf2-phone,
  .rc-hero-media .mf2-msg { opacity: 1 !important; transform: none !important; }
  .rc-hero-media .mf2-star, .rc-hero-media .mf2-dot { transform: none !important; }
  .rc-hero-media .mf2-linkA, .rc-hero-media .mf2-linkB,
  .rc-hero-media .mf2-linkC { stroke-dashoffset: 0 !important; }
  .rc-ad-move { opacity: 1; transition: none; }
  .rc-compare-col:hover { transform: none; }}

.hc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  /* linke Spalte ist seit dem Rueckbau (Fakten-Tabelle + CTA-Karte raus)
     kuerzer als die Video-Galerie: mittig ausrichten statt strecken */
  align-items: center;
}
.hc-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hc-intro { margin: 0 0 18px; font-size: 15.5px; line-height: 1.64; max-width: 58ch; }

/* Proof-Kopf: Person + Instagram, kompakt */
.hc-proof {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px; align-items: center;
  margin-bottom: 16px;
}
.hc-proof img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover; display: block;
}
.hc-proof-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--white); }
.hc-proof-ig {
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 1px;
}
.hc-proof-ig:hover { color: var(--white); border-color: var(--peach); }

/* Fakten: vier Zeilen an Haarlinien, Ergebnis hervorgehoben */

.hc-cta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin: 26px 0 0;
  font-size: 15.5px; font-weight: 700; color: var(--white);
}
.hc-note {
  margin: 16px 0 0;
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.55);
  max-width: 56ch;
}

/* ---- Video-Galerie ------------------------------------------ */
.hc-media { min-width: 0; }
.hc-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  max-width: 400px;
}

@media (max-width: 980px) {
  .hc-grid { grid-template-columns: 1fr; gap: 40px; }}

@media (max-width: 560px) {
  /* vier Vorschauen als 2x2, sonst werden die Tippflaechen zu schmal */
  .hc-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 300px; }}


.dre-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}
.dre-fact { padding: 0 26px; border-left: 1px solid rgba(16,100,102,0.18); }
.dre-fact:first-child { padding-left: 0; border-left: 0; }
.dre-fact strong {
  display: block;
  font-size: 19px; font-weight: 800;
  color: var(--teal-dark);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.dre-fact p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--ink-soft); }

/* Ablauf: weisse Flaeche, Linie hinter den Markern */
.dre-flow {
  margin-top: 30px;
  padding: 30px 32px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.dre-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dre-steps::before {
  content: '';
  position: absolute; top: 17px; left: 17px; right: 17px;
  height: 2px;
  background: rgba(16,100,102,0.16);
}

.dre-step { position: relative; }
.dre-marker {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal);
  font-size: 12px; font-weight: 800;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.dre-step h3 { margin: 0 0 5px; font-size: 16px; color: var(--ink); }
.dre-step p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--ink-soft); max-width: 34ch; }

/* btn-ghost ist fuer dunkle Flaechen (weisser Text) - auf der weissen
   Ablauf-Flaeche war der Button unsichtbar (30.07., nachgemessen). */
.dre-cta {
  margin-top: 26px;
  color: var(--teal-dark);
  border-color: rgba(16,100,102,0.4);
}
.dre-cta:hover {
  color: var(--teal-dark);
  border-color: var(--teal);
  background: var(--teal-tint);
}

@media (max-width: 860px) {
  .dre-facts { grid-template-columns: 1fr; margin-top: 28px; }
  .dre-fact { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(16,100,102,0.18); }
  .dre-fact:first-child { padding-top: 0; border-top: 0; }
  .dre-steps { grid-template-columns: 1fr; gap: 22px; }
  /* Linie vertikal statt horizontal */
  .dre-steps::before { top: 17px; bottom: 17px; left: 16px; right: auto; width: 2px; height: auto; }
  .dre-step { padding-left: 52px; }
  .dre-step .dre-marker { position: absolute; left: 0; top: 0; margin: 0; }
  .dre-flow { padding: 26px 22px; }}


/* ================================================================
   Azubi-Block auf /mitarbeiter-finden-handwerk/ (Umbau 31.07.2026)
   Smartphone mit Azubi-Video, drumherum Stationen bis zur Bewerbung.
   ================================================================ */
.rc-az { padding: var(--space-md) 0; background: var(--white); }
.rc-az h2 { margin: 8px 0 16px; max-width: 24ch; }
.rc-az-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 52px;
  align-items: center;
}
.rc-az-steps { list-style: none; margin: 24px 0 0; padding: 0; }
.rc-az-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.rc-az-steps li:first-child { border-top: 0; padding-top: 0; }
.rc-az-steps li:hover { transform: translateX(4px); }
.rc-az-steps strong { display: block; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.rc-az-steps p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* Grafik */
.rc-az-viz {
  position: relative;
  width: 100%; max-width: 480px;
  aspect-ratio: 480 / 460;
  justify-self: center;
}
.rc-az-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-az-phone {
  position: absolute; left: 36%; top: 6%;
  width: 30%;
  background: var(--white);
  border: 1.5px solid rgba(16,100,102,0.5);
  border-radius: 22px;
  padding: 16px 8px 12px;
  box-shadow: 0 20px 44px rgba(26,35,34,0.18);
  display: grid; gap: 8px;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.rc-az-viz:hover .rc-az-phone { transform: translateY(-4px) rotate(-1deg); }
.rc-az-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 3px; background: rgba(16,100,102,0.25); }
.rc-az-video {
  position: relative;
  background: var(--teal-tint);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.rc-az-video svg { display: block; width: 100%; height: auto; }
.rc-az-badge {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  font-size: 9px; font-weight: 800; text-align: center;
  color: var(--teal-dark);
  background: rgba(255,255,255,0.92);
  border-radius: 7px;
  padding: 4px 5px;
}
.rc-az-inputline { display: block; height: 20px; border-radius: 10px; background: rgba(16,100,102,0.1); position: relative; }
.rc-az-inputline i { position: absolute; right: 7px; top: 5px; width: 0; height: 0; border-left: 8px solid rgba(11,76,78,0.45); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.rc-az-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: 0 10px 22px rgba(26,35,34,0.12);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.rc-az-chip svg { width: 17px; height: 17px; color: var(--teal); }
.rc-az-chip--bau { left: 0; top: 16%; transform: rotate(-2deg); }
.rc-az-chip--team { left: 1%; top: 70%; transform: rotate(1.6deg); }
.rc-az-viz:hover .rc-az-chip--bau { transform: rotate(-3deg) translateY(-3px); }
.rc-az-viz:hover .rc-az-chip--team { transform: rotate(2.4deg) translateY(-3px); }
.rc-az-dm {
  position: absolute; right: 0; top: 18%;
  max-width: 40%;
  background: var(--peach);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  box-shadow: 0 12px 26px rgba(226,168,104,0.45);
  transform: rotate(1.6deg);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.rc-az-viz:hover .rc-az-dm { transform: rotate(2.6deg) translateY(-3px) scale(1.03); }
.rc-az-dm span { display: block; font-size: 13px; font-weight: 700; color: var(--teal-dark); line-height: 1.35; }
.rc-az-dm small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 600; color: rgba(11,76,78,0.6); }
.rc-az-ok {
  position: absolute; right: 2%; top: 68%;
  display: flex; align-items: center; gap: 10px;
  max-width: 46%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 12px 26px rgba(26,35,34,0.14);
  transform: rotate(-1.4deg);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.rc-az-viz:hover .rc-az-ok { transform: rotate(-2.2deg) translateY(-3px); }
.rc-az-ok-check {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal); color: #fff;
}
.rc-az-ok-check svg { width: 13px; height: 13px; }
.rc-az-ok strong { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.rc-az-ok small { display: block; font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
.rc-az-note {
  margin: 34px auto 0;
  max-width: 640px;
  padding: 16px 22px;
  border-left: 3px solid var(--peach);
  background: var(--teal-tint);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.rc-az-note strong { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 980px) {
  .rc-az-grid { grid-template-columns: 1fr; gap: 36px; }
  .rc-az-viz { max-width: 420px; }}

@media (max-width: 480px) {
  .rc-az-dm span { font-size: 11px; }
  .rc-az-ok strong { font-size: 11px; }
  .rc-az-chip { font-size: 11px; padding: 6px 10px; }}

@media (prefers-reduced-motion: reduce) {
  .rc-az-steps li, .rc-az-phone, .rc-az-chip, .rc-az-dm, .rc-az-ok { transition: none; }
  .rc-az-steps li:hover { transform: none; }
  .rc-az-viz:hover .rc-az-phone { transform: none; }
  .rc-az-viz:hover .rc-az-chip--bau { transform: rotate(-2deg); }
  .rc-az-viz:hover .rc-az-chip--team { transform: rotate(1.6deg); }
  .rc-az-viz:hover .rc-az-dm { transform: rotate(1.6deg); }
  .rc-az-viz:hover .rc-az-ok { transform: rotate(-1.4deg); }}



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

  /* ---- Azubi-Grafik: das Telefon steht auf 30% der Grafikbreite, bei 320px
     also 82px. Das Badge "Mein erster Monat als Azubi" bricht darin auf
     sechs Zeilen um, wird 91px hoch und deckt das 90px hohe Videobild
     vollstaendig zu. Ein breiteres Telefon loest es, ohne die Komposition
     zu aendern. */
  .rc-az-phone { left: 26%; width: 46%; }
  .rc-az-dm { max-width: 34%; }
  .rc-az-ok { max-width: 38%; }
  
  /* /mitarbeiter-finden-handwerk/ - Beleg-Link unter dem Hellmuth-Zitat:
     Die Tippflaechen-Regel macht den Link zu display:inline-flex. Flexboxen
     verwerfen reine Leerzeichen-Textknoten, deshalb klebte der Pfeil direkt am
     Wort ("Instagram->"). Die Luecke muss als gap zurueckkommen. */
  .hc-proof-ig { gap: 6px; }
  
  /* /mitarbeiter-finden-handwerk/ - Azubi-Grafik, Karte "Bewerbung eingegangen":
     Die Karte ist bei 390px nur 133px breit, davon 69px Text. "Bewerbung
     eingegangen" bricht auf zwei, "ohne Anschreiben, ohne Lebenslauf" auf vier
     Zeilen; die Karte wird 121px hoch und deckt das Telefon grossflaechig zu.
     Etwas mehr Breite plus schlankerer Haken/Innenabstand ergeben 2+2 Zeilen
     und 86px Hoehe. Der 320px-Wert wird unten wieder auf 38% zurueckgesetzt. */
  .rc-az-ok { max-width: 46%; padding: 9px 11px; gap: 8px; }
  .rc-az-ok-check { flex: 0 0 22px; width: 22px; height: 22px; }}


/* ==========================================================================
   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) {

  /* --- /mitarbeiter-finden-handwerk/, beide Illustrationen -------------- */
  /* Hero-Funnel und Anzeigen-Radius waren mobil auf 270px gedeckelt. Bei
     390px blieben dadurch 72px Kartenbreite ungenutzt und die Beschriftungen
     landeten bei 10.3 bis 10.5px, also kleiner als am Desktop. */
  .rc-illu { max-width: min(100%, 340px); }

  /* Die beiden Mikro-Label im Hero-Funnel ("Gesponsert", "Neue
     Kontaktanfrage") lagen bei 8.0px. Beide haben in ihrem Rahmen Luft. */
  .mf2-phone text,
  .mf2-msg text:first-of-type { font-size: 10.5px; }

  /* Die Vorschaureihe unter dem Hellmuth-Player war 300px breit, der Player
     340px: rechts blieb eine 40px-Stufe stehen. */
  .hc-thumbs { max-width: 340px; }

  /* --- /mitarbeiter-finden-handwerk/, Drehtag-Ablauf -------------------- */
  /* Die senkrechte Schiene lief bis 17px ueber den unteren Rand der Liste,
     also rund 70px unter die letzte Station 03. Das liest sich wie ein
     fehlender vierter Schritt. Statt einer durchgehenden Schiene jetzt ein
     Verbinder je Schrittpaar, der exakt an der naechsten Station endet. */
  .dre-steps::before { content: none; }
  .dre-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16px; top: 34px; bottom: -22px;
    width: 2px;
    background: rgba(16,100,102,0.16);
  }}

@media (min-width: 641px) and (max-width: 760px) {
  .rc-illu { max-width: 372px; }}


/* --- /mitarbeiter-finden-handwerk/, Drehtag-Ablauf --------------------- */
/* Desktop: die Schiene lief 320px ueber die letzte Station 03 hinaus und
   endete frei im Raum. Sie endet jetzt exakt in der Mitte des dritten Markers
   (drei gleiche Spalten, 28px Abstand, Marker 34px). Erst ab 861px, weil die
   Schiene darunter senkrecht steht und dort right:auto braucht. */
@media (min-width: 861px) {
  .dre-steps::before { right: calc(33.3333% - 35.7px); }}


/* Gleiches Muster im Tablet-Band, wo der Ablauf bereits einspaltig steht:
   Verbinder je Schrittpaar statt einer durchlaufenden Schiene. */
@media (min-width: 641px) and (max-width: 860px) {
  .dre-steps::before { content: none; }
  .dre-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16px; top: 34px; bottom: -22px;
    width: 2px;
    background: rgba(16,100,102,0.16);
  }}


/* --- /mitarbeiter-finden-handwerk/, Hellmuth-Case --------------------- */
/* Der Hauptplayer war 248px breit, die Vorschaureihe darunter 400px. Das
   kleine Element war also breiter als das grosse, und rechts standen zwei
   verschiedene Kanten in einer 484px-Spalte. Beide Bloecke teilen sich jetzt
   eine Breite; der Player wird dabei groesser, nicht die Vorschauen kleiner.
   Die Beschriftungen bleiben zweizeilig ohne Wortbruch. */
@media (min-width: 981px) {
  .hc-thumbs { max-width: 360px; gap: 10px; }}

@media (min-width: 641px) and (max-width: 980px) {
  .hc-thumbs { max-width: 340px; gap: 10px; }}


/* /mitarbeiter-finden-handwerk/: bei 480px passte die Zeile ins
   Bestaetigungs-Abzeichen, bei 481px nicht mehr - die Schrift springt dort
   von 11 auf 12,5px, das Abzeichen blieb aber gleich breit. */
@media (min-width: 481px) {
  .rc-az-ok { max-width: 54%; }}