/* ═══════════════════════════════════════════════════════
   Container 2 · Hybrid — 40-Stunden-Kontext mit klarer
   Hierarchie. Die Heute-Zeile ist bewusst zurückgenommen,
   die Nachher-Zeile trägt das Gewicht. Dadurch liest sich
   die untere Zeile als Verbesserung, nicht als Variante.
   ═══════════════════════════════════════════════════════ */

.hy-zone{
  display:grid;grid-template-columns:minmax(320px,.86fr) 1.14fr;
  gap:clamp(44px,5.5vw,88px);align-items:center;
}

/* ── Links ────────────────────────────────────────── */
.hy-arg .sub{margin-bottom:28px;max-width:42ch}
.punch{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.4;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 32px;padding-top:18px;
  border-top:2px solid var(--gelb);display:block;width:fit-content;
}
.btn--gross{min-height:62px;font-size:1.02rem;padding:0 32px;text-align:center;line-height:1.25}
.hy-mini{display:block;margin-top:14px;font-size:.84rem;color:var(--ink3)}

/* ── Rechts ───────────────────────────────────────── */
.hy{
  margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(30px,3.4vw,46px);
  box-shadow:0 1px 2px rgba(20,17,14,.03),0 30px 70px -50px rgba(20,17,14,.5);
}
.hy__titel{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,1.8vw,1.54rem);line-height:1.2;letter-spacing:-.03em;
  margin:0 0 14px;
}
.hy__erklaerung{
  font-size:.94rem;line-height:1.55;color:var(--ink2);
  margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.hy__basis{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 22px;
}

.hy__k{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 9px;
}
.hy__k--stark{color:var(--ink)}

.hy__balken{display:flex;gap:3px}
.hy__t{
  --w:0%;width:var(--w);border-radius:6px;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 14px;overflow:hidden;min-width:0;
  transition:width .95s cubic-bezier(.4,0,.2,1);
}
.hy__t b{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.hy__t span{line-height:1.2;margin-top:2px;white-space:nowrap;opacity:.8}

/* Heute: flach, leise, ohne Kontrast — der Status quo */
.hy__balken--klein{height:48px;opacity:.72}
.hy__t--wert-alt{background:var(--sand-d);color:var(--ink2)}
.hy__t--rep-alt{background:var(--sand-d);color:var(--ink2)}
.hy__t--rep-alt::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(20,17,14,.035) 5px 10px);
}
.hy__t--rep-alt{position:relative}
.hy__balken--klein b{font-size:.94rem}
.hy__balken--klein span{font-size:.68rem}

/* Nachher: hoch, kontrastreich, mit Zuwachs in Blau */
.hy__balken--gross{height:88px}
.hy__t--wert{background:var(--ink);color:#fff;border-radius:6px 0 0 6px}
.hy__t--plus{background:var(--blau);border-radius:0;box-shadow:inset 2px 0 0 rgba(255,255,255,.5)}
.hy__t--rep{background:var(--sand-d);color:var(--ink2);margin-left:3px;border-radius:6px;align-items:center;padding:0 8px}
.hy__balken--gross .hy__t--wert b{font-size:1.55rem}
.hy__balken--gross .hy__t--wert span{font-size:.8rem}
.hy__balken--gross .hy__t--rep b{font-size:1rem}

/* Ausgangszustand nur mit JavaScript */
.hy--start .hy__t--plus{width:0}
.hy--start .hy__t--rep{width:37.5%}

.hy__pfeil{position:relative;height:34px;margin:14px 0}
.hy__pfeil::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:20px;
  background:var(--blau);transform:translateX(-50%);
}
.hy__pfeil::after{
  content:'';position:absolute;left:50%;top:17px;width:8px;height:8px;
  border-right:1.5px solid var(--blau);border-bottom:1.5px solid var(--blau);
  transform:translateX(-50%) rotate(45deg);
}

/* Der Gewinn — das auffälligste Element der Grafik */
.hy__gewinn{
  display:flex;align-items:baseline;justify-content:flex-end;
  gap:9px;margin:0 0 12px;padding-right:4%;
  font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--ink2);
}
.hy__gewinn b{
  font-weight:800;font-size:clamp(2.2rem,3.4vw,2.9rem);
  letter-spacing:-.045em;color:var(--blau);line-height:.9;
  font-variant-numeric:tabular-nums;
}

.hy__wofuer{margin:12px 0 0;font-size:.9rem;color:var(--ink2)}
.hy__aufgaben{
  margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink3);line-height:1.5;
}
.hy__fuss{margin:10px 0 0;font-size:.79rem;color:var(--ink3);line-height:1.5}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width:1000px){
  .hy-zone{grid-template-columns:1fr;gap:38px;align-items:start}
  .hy-arg .sub{max-width:none}
}
@media (max-width:620px){
  .hy__gewinn{justify-content:flex-start;padding-right:0}
  .hy__balken--klein{height:44px}
  .hy__balken--gross{height:78px}
  .hy__t{padding:0 10px}
  .hy__balken--gross .hy__t--wert b{font-size:1.24rem}
  .hy__balken--gross .hy__t--wert span{font-size:.7rem}
  .hy-arg .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .hy__t{transition:none}
  .hy--start .hy__t--plus{width:22.5%}
  .hy--start .hy__t--rep{width:15%}
}

/* ── Korrektur: beide Balken zweiteilig ───────────────
   Drei Segmente zwangen zum Rechnen. Jetzt steht in
   beiden Zeilen nur schwarz gegen beige — der Zuwachs
   wird als feine Klammer über dem gewachsenen Teil
   markiert, nicht als eigener Block.                 */
.hy__balken--gross{position:relative}
.hy__t--wert{border-radius:6px}
.hy__t--rep{margin-left:3px}
.hy__balken--gross .hy__t--rep span{display:block;font-size:.7rem}

/* Die Klammer über dem Zuwachs */
.hy__zuwachs{
  position:absolute;left:62.5%;width:30%;top:-11px;height:9px;
  border:1.5px solid var(--blau);border-bottom:0;
  border-radius:4px 4px 0 0;
  opacity:1;transition:opacity .5s ease .5s;
}
.hy--start .hy__zuwachs{opacity:0}

/* Der wertschöpfende Block wächst von 62,5 auf 85 Prozent */
.hy--start .hy__t--wert{width:62.5%}
.hy--start .hy__t--rep{width:37.5%}

/* ── Ergänzungen für die aktuelle Fassung ─────────── */

/* Aufgabenzeile unter dem Heute-Balken */
.hy__aufgaben{
  margin:12px 0 0;padding-top:0;border-top:0;
  font-size:.79rem;color:var(--ink3);line-height:1.5;
}

/* Der Restanteil ist jetzt sehr schmal — Beschriftung mittig */
.hy__balken--gross .hy__t--rep{justify-content:center;align-items:center;padding:0 6px}
.hy__balken--gross .hy__t--rep b{font-size:.92rem}
.hy__balken--gross .hy__t--rep span{display:none}

/* Der Übergangssatz am Fuß */
.hy__schicht{
  margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-family:var(--display);font-weight:600;
  font-size:.87rem;letter-spacing:-.012em;color:var(--blau);
}
.hy__schicht::before,.hy__schicht::after{display:none}
.hy__fuss{margin:8px 0 0;text-align:center;font-size:.77rem;color:var(--ink3)}

/* Knopf mit gelbem Schein wie zuletzt */
.btn--gross{box-shadow:0 10px 26px -10px rgba(255,198,41,.95)}

/* ═══════════════════════════════════════════════════════
   Container 3 · Die Arbeit hinter der Arbeit
   Foto und Text als Doppelseite. Die Gegenüberstellung
   entsteht typografisch, nicht über Karten: was Menschen
   tun, steht groß — was künftig läuft, steht ruhig.
   ═══════════════════════════════════════════════════════ */

.arb{
  display:grid;grid-template-columns:47fr 53fr;
  gap:clamp(40px,5.5vw,84px);align-items:center;
}

.arb__bild{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.arb__bild img{width:100%;height:100%;object-fit:cover;object-position:52% 30%;display:block}

.arb__text .sub{margin-bottom:38px;max-width:44ch}

.arb__gruppe{padding:26px 0;border-top:1px solid var(--line)}
.arb__gruppe--ai{padding-bottom:30px}

.arb__k{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 16px;
}
.arb__k--blau{color:var(--blau)}

.arb__liste{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.arb__liste li{
  position:relative;padding-left:19px;
  font-family:var(--display);font-weight:600;
  font-size:1rem;letter-spacing:-.015em;color:var(--ink2);
}
.arb__liste li::before{
  content:'';position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:50%;background:var(--blau);
}

/* Was Menschen tun, steht größer — die Größe ist das Argument */
.arb__liste--gross li{
  font-weight:800;color:var(--ink);
  font-size:clamp(1.28rem,2vw,1.68rem);letter-spacing:-.03em;
  padding-left:24px;
}
.arb__liste--gross li::before{
  width:9px;height:9px;top:.5em;background:var(--gelb);
}

.arb__schluss{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.16rem,1.85vw,1.5rem);line-height:1.28;letter-spacing:-.028em;
  color:var(--ink3);margin:0;padding-top:26px;border-top:2px solid var(--ink);
}
.arb__schluss b{font-weight:800;color:var(--ink)}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width:1000px){
  .arb{grid-template-columns:1fr;gap:34px}
  .arb__bild{aspect-ratio:16/10}
  .arb__bild img{object-position:52% 26%}
  .arb__text .sub{max-width:none}
}
@media (max-width:620px){
  .arb__liste{gap:9px 20px}
  .arb__liste--gross li{font-size:1.24rem}
}

/* ── Zuständigkeitstafel statt zweier Listen ──────────
   Wer links, was rechts — zwei Zeilen einer Tabelle.
   Damit liest es sich als Arbeitsteilung, nicht als
   Aufzählung. Die Größe der Einträge trägt die Wertung. */

.arb{grid-template-columns:49fr 51fr}

.teilung{margin:0 0 34px;border-top:1px solid var(--line)}
.teilung__zeile{
  display:grid;grid-template-columns:132px 1fr;
  gap:8px 22px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.teilung__zeile--ai{
  background:rgba(27,77,255,.035);
  margin:0 -18px;padding:24px 18px;border-radius:10px;
  border-bottom:0;
}
.teilung__wer{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0;padding-top:.45em;line-height:1.45;
}
.teilung__wer--blau{color:var(--blau)}

.teilung__was{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.teilung__was li{
  font-family:var(--display);font-weight:600;
  font-size:.99rem;letter-spacing:-.015em;color:var(--ink2);
}
.teilung__was--gross li{
  font-weight:800;color:var(--ink);
  font-size:clamp(1.26rem,1.95vw,1.62rem);letter-spacing:-.032em;line-height:1.2;
}

/* Abschlusssatz deutlich größer */
.arb__schluss{
  font-size:clamp(1.44rem,2.5vw,2.05rem);line-height:1.2;
  padding-top:30px;border-top:2px solid var(--ink);
}

@media (max-width:620px){
  .teilung__zeile{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .teilung__zeile--ai{margin:0 -14px;padding:20px 14px}
  .teilung__was--gross li{font-size:1.24rem}
}

/* Headline auf die Spaltenbreite einstellen, damit jeder
   Satz auf einer Zeile bleibt — der Gegensatz lebt vom
   Zweizeiler, nicht von einem zufälligen Umbruch. */
#arbeit .h2{font-size:clamp(1.62rem,2.85vw,2.44rem)}

/* ═══════════════════════════════════════════════════════
   Nachträge 21.08.2026
   ═══════════════════════════════════════════════════════ */

/* Die Heute-Zeile in Grau statt Sand — sie soll als Status quo
   neutral wirken und sich klar vom schwarzen Nachher absetzen. */
.hy__t--wert-alt{background:#C9C5BF;color:#4A453E}
.hy__t--rep-alt{background:#DAD6D0;color:#5A544B}
.hy__t--rep-alt::before{
  background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(20,17,14,.07) 5px 10px);
}
.hy__balken--klein{opacity:1}   /* Deckkraft nicht mehr nötig, das Grau dämpft selbst */

/* Knopf über die volle Breite der Argumentspalte */
.hy-arg .btn--gross{display:flex;width:100%;align-items:center;justify-content:center}

/* Die beiden Schlusszeilen linksbündig wie alles in der Box */
.hy__schicht{text-align:left}
.hy__fuss{text-align:left}

/* Beide Restblöcke zeigen dieselbe Sache — wiederkehrende Arbeit.
   Also dieselbe Farbe und dieselbe Schraffur in beiden Zeilen.
   Der Unterschied liegt allein in der Breite: 37,5 % → 7,5 %. */
.hy__t--rep{
  background:#DAD6D0;color:#5A544B;position:relative;
}
.hy__t--rep::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(20,17,14,.07) 5px 10px);
}
.hy__t--rep b{position:relative}