/* 21-project-page.css — Projekt-Unterseite (projekt.html)
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/12-projekt-unterseite.md.

   Aufbau nach dem Figma-Entwurf "Magazine Split" (Variante B, 19.09.2026):
   Sticky-Sidebar links, Hero mit Text links und grossem Bild rechts, darunter
   der Prozess als Karten mit wechselnder Bildseite, Key Learnings als
   Kartenreihe, danach die restlichen Bilder.

   --accent / --accent-soft setzt js/12-project-page.js pro Projekt aus
   tagColor, damit dieselben Regeln fuer Teal, Apricot, Electric und Lime
   gelten. Fuer Text immer die -d-Variante (Kontrast, siehe CLAUDE.md). */

.pp {
  --accent: var(--teal);
  --accent-d: var(--teal-d);
  --accent-soft: var(--teal-soft);
  --pp-nav-h: 90px;
  background: var(--paper);
}

/* ── Zweispaltiges Grundgeruest ─────────────────────────────────────────── */
.pp-shell {
  display: flex;
  max-width: 1500px;
  margin: 0 auto;
  gap: 0;
}

/* Die Navigation liegt fixed ueber dem Inhalt (top:12px, ca. 62px hoch),
   deshalb oben genug Luft, damit der Zurueck-Button frei steht. */
.pp-main {
  flex: 1;
  min-width: 0;
  padding: 104px clamp(20px, 4vw, 56px) 96px;
}

/* Wechselt man ueber die Sidebar das Projekt, wird der Inhalt getauscht statt
   die Seite neu zu laden — diese Animation macht den Wechsel sichtbar. */
.pp-main.is-entering {
  animation: pp-enter 0.42s var(--ease-out) both;
}
@keyframes pp-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.pp-side {
  position: sticky;
  top: var(--pp-nav-h);
  align-self: flex-start;
  height: calc(100vh - var(--pp-nav-h));
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(185, 216, 214, 0.35);
}
.pp-side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 32px 16px 16px;
  scrollbar-width: none;
}
.pp-side-scroll::-webkit-scrollbar { display: none; }

.pp-side-label {
  display: block;
  padding: 0 10px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.pp-side-label + .pp-side-label { margin-top: 20px; }

.pp-side-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.pp-side-item:hover { background: rgba(185, 216, 214, 0.18); }
.pp-side-item.is-active { background: color-mix(in srgb, var(--item-accent, var(--teal)) 12%, transparent); }

.pp-side-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--grey);
}
.pp-side-item.is-active .pp-side-num { color: var(--item-accent, var(--teal)); }

.pp-side-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(98, 115, 125, 0.3);
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast);
}
.pp-side-item.is-active .pp-side-dot {
  background: var(--item-accent, var(--teal));
  transform: scale(1.4);
}

.pp-side-title {
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--grey);
}
.pp-side-item.is-active .pp-side-title {
  color: var(--ink);
  font-weight: 600;
}

.pp-side-foot {
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(185, 216, 214, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-progress {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(185, 216, 214, 0.4);
  overflow: hidden;
}
.pp-progress span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-smooth);
}
.pp-progress-label {
  font-size: 11px;
  color: var(--grey);
}

/* ── Kopf der Unterseite ────────────────────────────────────────────────── */
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid rgba(185, 216, 214, 0.5);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast);
}
.pp-back:hover {
  transform: translateX(-3px);
  border-color: var(--accent);
}

/* ── Hero: Text links, grosses Bild rechts ──────────────────────────────── */
.pp-hero {
  display: grid;
  grid-template-columns: 1fr 45%;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  padding-bottom: 8px;
}
.pp-hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}
.pp-eyebrow {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.pp-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.pp-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.pp-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.pp-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey);
}
.pp-lead strong { color: var(--ink); }

/* Rollen-Karte mit Skill-Pillen */
.pp-rolecard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.pp-role {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.pp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-pill {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-d);
  font-size: 12px;
  font-weight: 700;
}

/* Aktions-Buttons (Prototyp / Praesentation) */
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast);
}
.pp-action:hover { transform: translateY(-2px); opacity: 0.9; }
.pp-action.is-ghost {
  background: #fff;
  color: var(--accent-d);
  border: 1.5px solid var(--accent);
}

/* Stand 25.09.2026: jeder Aktions-Link bekommt eine kurze Unterzeile, was er
   ist (Figma-Prototyp, selbst gebauter React-Prototyp, PDF ...) — vorher war
   das nur an der Button-Beschriftung ("Prototyp ansehen") nicht erkennbar. */
.pp-action-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pp-action-note { font-size: 11.5px; color: var(--grey); font-weight: 500; padding-left: 4px; }

/* ── Bilder: gemeinsame Basis ───────────────────────────────────────────── */
.pp-hero-img,
.pp-step-img,
.pp-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
.pp-hero-img img,
.pp-step-img img,
.pp-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-smooth);
}
.pp-hero-img:hover img,
.pp-shot:hover img { transform: scale(1.03); }
.pp-step-img:hover img { transform: scale(1.05); }

.pp-hero-img {
  height: min(520px, 46vw);
  min-height: 280px;
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(16, 43, 60, 0.08);
}

/* Bildbeschriftung als gefuellte Akzent-Pille, zweizeilig gedeckelt —
   die Captions sind hier ganze Saetze, keine Ein-Wort-Labels. */
.pp-img-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: min(calc(100% - 24px), 30ch);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pp-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.pp-hero-img:hover .pp-zoom,
.pp-step-img:hover .pp-zoom,
.pp-shot:hover .pp-zoom { opacity: 1; }

/* ── Bloecke unterhalb des Heros ────────────────────────────────────────── */
.pp-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 44px;
}
.pp-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.pp-prose {
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 78ch;
}
.pp-prose strong { color: var(--ink); }

/* ── Prozess: Karten mit wechselnder Bildseite ──────────────────────────── */
.pp-steps { display: flex; flex-direction: column; gap: 16px; }
.pp-step-row {
  display: flex;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.pp-step-row.is-flipped { flex-direction: row-reverse; }
.pp-step-text {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 28px 30px;
}
.pp-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pp-step-title {
  margin: 4px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.pp-step-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
}
.pp-step-img { width: 45%; flex-shrink: 0; }
.pp-step-row.is-textonly .pp-step-text { padding-right: 40px; }

/* ── Key Learnings / Stolpersteine als Kartenreihe ──────────────────────── */
.pp-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-insight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.pp-insight p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey); }
.pp-insight-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-d);
  font-size: 12px;
  font-weight: 700;
}
.pp-block.is-challenge .pp-insight-num {
  background: var(--apricot-soft);
  color: var(--apricot-d);
}

/* ── Weitere Einblicke ──────────────────────────────────────────────────── */
.pp-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-shot {
  height: 210px;
  border-radius: 18px;
  border: 1px solid rgba(185, 216, 214, 0.45);
}

/* ── Persona ────────────────────────────────────────────────────────────── */
.pp-persona {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 20px;
  background: #fff;
}
.pp-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--electric-soft);
  overflow: hidden;
  font-size: 22px;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-persona-body { min-width: 0; }
.pp-persona-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
}
.pp-persona-name span { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--grey); }
.pp-quote {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 3px solid var(--electric);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}
.pp-persona-bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey); }

/* ── Modul-Tabs (nur anamea) ────────────────────────────────────────────── */
.pp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 40px 0 0;
}
.pp-tab {
  padding: 9px 18px;
  border: 1.5px solid rgba(185, 216, 214, 0.7);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--grey);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.pp-tab:hover { border-color: var(--accent); color: var(--accent-d); }
.pp-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-d);
}

/* ── Chart (nur Projekte mit researchChart) ─────────────────────────────── */
.pp-chart-wrap {
  position: relative;
  height: 240px;
  padding: 20px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}

/* ── Blaettern ──────────────────────────────────────────────────────────── */
.pp-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 56px 0 0;
  margin-top: 48px;
  border-top: 1px solid rgba(185, 216, 214, 0.45);
}
.pp-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  padding: 16px 22px;
  border: 1px solid rgba(185, 216, 214, 0.5);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast);
}
.pp-pager a:hover { transform: translateY(-2px); border-color: var(--accent); }
.pp-pager .pp-pager-dir { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.pp-pager .pp-pager-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.pp-pager a:last-child { text-align: right; margin-left: auto; }

/* ── Fehlerfall ─────────────────────────────────────────────────────────── */
.pp-missing { padding: 80px 0; text-align: center; }
.pp-missing h1 { font-size: 28px; margin-bottom: 12px; }

/* ── Dark Mode ──────────────────────────────────────────────────────────── */
[data-theme='dark'] .pp-back,
[data-theme='dark'] .pp-tab,
[data-theme='dark'] .pp-pager a,
[data-theme='dark'] .pp-rolecard,
[data-theme='dark'] .pp-step-row,
[data-theme='dark'] .pp-insight,
[data-theme='dark'] .pp-persona,
[data-theme='dark'] .pp-chart-wrap,
[data-theme='dark'] .pp-hero-img,
[data-theme='dark'] .pp-shot { background: #152530; }
[data-theme='dark'] .pp-action.is-ghost { background: #152530; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pp-side { display: none; }
  .pp-main { padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); }
  .pp-insights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* Hero untereinander, Bild zuerst — auf dem Handy traegt das Bild den Einstieg. */
  .pp-hero { grid-template-columns: 1fr; gap: 24px; }
  .pp-hero-img { order: -1; height: min(320px, 58vw); min-height: 0; }
  .pp-step-row,
  .pp-step-row.is-flipped { flex-direction: column; }
  .pp-step-img { width: 100%; height: 200px; }
  .pp-shots { grid-template-columns: 1fr 1fr; }
  .pp-persona { flex-direction: column; gap: 12px; }
}
@media (max-width: 620px) {
  .pp-insights { grid-template-columns: 1fr; }
  .pp-shots { grid-template-columns: 1fr; }
  .pp-num { font-size: 40px; }
  .pp-step-text { padding: 22px; }
  .pp-actions { width: 100%; }
  .pp-action { flex: 1; justify-content: center; }
  .pp-pager { flex-direction: column; }
  .pp-pager a { max-width: 100%; }
  .pp-pager a:last-child { text-align: left; margin-left: 0; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pp-main.is-entering { animation: none; }
  .pp-hero-img img, .pp-step-img img, .pp-shot img { transition: none; }
  .pp-hero-img:hover img, .pp-step-img:hover img, .pp-shot:hover img { transform: none; }
  .pp-back:hover, .pp-action:hover, .pp-pager a:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY — erzaehlter Projektaufbau (aktuell nur anamea)
   Bloecke aus js/01-data-projects.js, gerendert von js/12-project-page.js.
   Kein Folien-Screenshot: Zahlen sind Grafik, Entscheidungen sind Karten,
   UI-Screens sind echte Screens aus dem Prototyp.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs { display: flex; flex-direction: column; }
.cs-block { display: flex; flex-direction: column; gap: 14px; padding-top: 40px; }

.cs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.cs-body { margin: 0; font-size: 16px; line-height: 1.7; color: var(--grey); max-width: 78ch; }
.cs-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey); font-style: italic; }
.cs-source { margin: 0; font-size: 12px; line-height: 1.5; color: var(--grey); opacity: 0.75; }

/* Kapitelmarke */
.cs-chapter {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 2px solid var(--accent-soft);
}
.cs-chapter:first-child { margin-top: 44px; }
.cs-chapter-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.cs-chapter-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cs-chapter-sub { margin: 4px 0 0; font-size: 13px; color: var(--grey); }

/* Zitat und Kernaussage */
.cs-quote {
  margin: 0;
  padding: 26px 30px;
  border-left: 4px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background: var(--accent-soft);
}
.cs-quote p {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.cs-quote cite { font-size: 13px; font-style: normal; color: var(--accent-d); font-weight: 700; }

.cs-statement {
  margin: 0;
  padding: 24px 28px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* Karten */
.cs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.cs-cards.is-four { grid-template-columns: repeat(4, 1fr); }
.cs-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.cs-card.is-out { background: transparent; border-style: dashed; }
.cs-card.is-out .cs-card-title,
.cs-card.is-out .cs-card-text { opacity: 0.68; }
.cs-card.is-in { border-color: var(--accent); box-shadow: 0 8px 24px rgba(16, 43, 60, 0.06); }
.cs-card.is-limit { background: var(--apricot-soft); border-color: transparent; }

.cs-card-num {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-d);
  font-size: 12px; font-weight: 700;
}
.cs-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.cs-card-label.is-out { color: var(--apricot-d); }
.cs-card-label.is-in { color: var(--accent-d); }
.cs-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.cs-card-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey); }
.cs-card-note {
  margin: 4px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(185, 216, 214, 0.45);
  font-size: 13px; line-height: 1.55; color: var(--apricot-d);
}

/* Annahme gegen Realitaet */
.cs-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.cs-side {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  background: #fff;
}
.cs-side p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey); }
.cs-side.is-before { border-style: dashed; }
.cs-side.is-before p { text-decoration: line-through; text-decoration-color: rgba(168, 63, 34, 0.45); }
.cs-side.is-after { border-color: var(--accent); background: var(--accent-soft); }
.cs-side.is-after p { color: var(--ink); font-weight: 500; }
.cs-vs { color: var(--accent); display: flex; }

/* Zahlen */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.cs-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.cs-stat-value {
  position: relative;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  padding-bottom: 12px;
}
/* Der Balken zeigt den Anteil — die Zahl allein waere nur Dekoration. */
.cs-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  width: var(--fill);
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  opacity: 0.35;
}
.cs-stat-label { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cs-stat-n { font-size: 12px; color: var(--grey); }
.cs-stat.is-muted .cs-stat-value { color: var(--grey); }
.cs-stat.is-muted .cs-bar { background: var(--grey); }

/* Kreislauf */
.cs-loop {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.cs-loop li { display: flex; align-items: center; gap: 10px; }
.cs-loop-step {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-d);
  font-size: 14px; font-weight: 700;
}
.cs-loop-arrow { color: var(--accent); font-size: 16px; }
.cs-loop li:last-child .cs-loop-arrow { font-size: 19px; }

/* Spalten (Scope, System) */
.cs-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 14px;
}
.cs-column {
  padding: 20px 22px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.cs-column.is-in { border-color: var(--accent); background: var(--accent-soft); }
.cs-column.is-out { border-style: dashed; background: transparent; }
.cs-column ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-column li { font-size: 14px; line-height: 1.5; color: var(--grey); padding-left: 16px; position: relative; }
.cs-column li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.cs-column.is-out li::before { background: var(--grey); opacity: 0.5; }

/* UI-Screens */
.cs-screens { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.cs-screens.has-side { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 36px; align-items: center; }
.cs-screen { margin: 0; cursor: zoom-in; }
.cs-screen img {
  width: 100%;
  max-width: 300px;
  display: block;
  border-radius: 20px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  background: #fff;
  transition: transform var(--dur-normal) var(--ease-smooth);
}
.cs-screen.is-small img { max-width: 240px; }
.cs-screen:hover img { transform: translateY(-3px); }
.cs-screen figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--grey); max-width: 300px; }

.cs-fixpoints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cs-fixpoints li { display: flex; gap: 14px; align-items: flex-start; }
.cs-fix-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px; font-weight: 700;
}

/* Lo-Fi gegen Mid-Fi */
.cs-ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs-ba-item {
  padding: 18px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 20px;
  background: #fff;
}
.cs-ba-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.cs-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-ba-pair figure { margin: 0; cursor: zoom-in; }
.cs-ba-pair img {
  width: 100%; display: block;
  border-radius: 12px;
  border: 1px solid rgba(185, 216, 214, 0.5);
  transition: transform var(--dur-normal) var(--ease-smooth);
}
.cs-ba-pair figure:hover img { transform: translateY(-3px); }
.cs-ba-pair figcaption {
  margin-top: 6px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey);
}

/* Breites Diagramm (User Flow) */
.cs-figure { margin: 0; cursor: zoom-in; }
.cs-figure img {
  width: 100%; display: block;
  border-radius: 16px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  background: #fff;
  padding: 18px;
}
.cs-figure.is-wide { overflow-x: auto; }
.cs-figure.is-wide img { min-width: 680px; }

.cs-pdfs { padding-top: 48px; }

[data-theme='dark'] .cs-card,
[data-theme='dark'] .cs-side,
[data-theme='dark'] .cs-stat,
[data-theme='dark'] .cs-column,
[data-theme='dark'] .cs-statement,
[data-theme='dark'] .cs-ba-item,
[data-theme='dark'] .cs-figure img,
[data-theme='dark'] .cs-screen img { background: #152530; }

@media (max-width: 1000px) {
  .cs-cards.is-four { grid-template-columns: 1fr 1fr; }
  .cs-screens.has-side { grid-template-columns: 1fr; gap: 24px; }
  .cs-ba { grid-template-columns: 1fr; }
  .cs-ba-pair { max-width: 420px; }
}
@media (max-width: 700px) {
  .cs-cards, .cs-cards.is-four, .cs-columns { grid-template-columns: 1fr; }
  .cs-contrast { grid-template-columns: 1fr; }
  .cs-vs { transform: rotate(90deg); justify-content: center; }
  .cs-chapter { margin-top: 48px; }
  .cs-chapter-num { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-screen:hover img, .cs-ba-pair figure:hover img { transform: none; }
}

/* Logos duerfen nicht beschnitten werden — anders als Screenshots. */
.pp-hero-img.is-logo {
  background: #fff;
  border: 1px solid rgba(185, 216, 214, 0.45);
}
.pp-hero-img.is-logo img {
  object-fit: contain;
  padding: clamp(28px, 5vw, 64px);
}
.pp-hero-img.is-logo:hover img { transform: none; }
[data-theme='dark'] .pp-hero-img.is-logo { background: #152530; }

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY — Erweiterung Modul 4 (24.09.2026)
   Neue Blocktypen: overview, persona, feature, verdicts, duel, findings,
   swatches, prototype, testcard; dazu screens.flow und stats.prefix.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero mit Querformat-Foto statt Logo: ganzes Bild zeigen, nicht beschneiden */
.pp-hero-img.is-wide { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
.pp-hero-img.is-wide:hover img { transform: scale(1.02); }

/* Sprungziele: die fixe Navigation darf die Kapitelmarke nicht verdecken */
.cs-chapter { scroll-margin-top: 110px; }

/* Einheitlicher Abstand zwischen Titel und Inhalt, auch bei Blöcken mit Text */
.cs-block > .cs-title + .cs-body { margin-top: -4px; }

/* ── Auf einen Blick ─────────────────────────────────────────────────────── */
.cs-overview {
  margin-top: 40px;
  padding: 26px 28px 24px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 22px;
  background: #fff;
  gap: 18px;
}
.cs-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.cs-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-fact dt {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-d);
}
.cs-fact dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.cs-overview-insight {
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--accent-soft);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.cs-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-toc a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(185, 216, 214, 0.7);
  border-radius: var(--radius-pill);
  color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.cs-toc a span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-d);
  font-size: 11px; font-weight: 800;
}
.cs-toc a:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs-toc a:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }

/* Zoombare Bilder sind seit 25.09.2026 per tabindex="0" fokussierbar
   (Barrierefreiheits-Audit) — hier der dazugehoerige Fokus-Rahmen. */
.pp-hero-img:focus-visible,
.pp-step-img:focus-visible,
.pp-shot:focus-visible,
.cs-screen:focus-visible,
.cs-ba-pair figure:focus-visible,
.cs-figure:focus-visible,
.cs-feature-img:focus-visible {
  outline: 2px solid var(--accent-d);
  outline-offset: 3px;
}

/* ── Persona ─────────────────────────────────────────────────────────────── */
.cs-persona {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 22px;
  background: #fff;
}
.cs-persona-img {
  width: 180px; height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--accent-soft), #fff);
}
.cs-persona-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-persona-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-persona-name {
  margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink);
}
.cs-persona-name span { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--grey); }
.cs-persona-quote {
  margin: 0; padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 17px; font-style: italic; font-weight: 500; color: var(--ink);
}

/* ── Bild mit Text daneben (Aufsteller) ──────────────────────────────────── */
.cs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.cs-feature-img { margin: 0; cursor: zoom-in; }
.cs-feature-img img {
  width: 100%; display: block;
  border-radius: 20px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  transition: transform var(--dur-normal) var(--ease-smooth);
}
.cs-feature-img:hover img { transform: translateY(-3px); }
.cs-feature-img figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--grey); }
.cs-feature-text { display: flex; flex-direction: column; gap: 20px; }

/* ── Testfragen mit Ergebnis ─────────────────────────────────────────────── */
.cs-verdicts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-verdict {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.cs-verdict-q { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-verdict-a {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 12px; color: var(--grey); white-space: nowrap;
}
.cs-verdict-a strong {
  padding: 4px 12px;
  border-radius: var(--radius-chip);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-d);
}
.cs-verdict.is-fail { border-color: rgba(168, 63, 34, 0.35); }
.cs-verdict.is-fail .cs-verdict-a strong { background: var(--apricot-soft); color: var(--apricot-d); }
.cs-verdict.is-fail .cs-card-num { background: var(--apricot-soft); color: var(--apricot-d); }

/* ── Zwei Zahlen gegeneinander ───────────────────────────────────────────── */
.cs-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-duel-item {
  display: flex; gap: 20px; align-items: center;
  padding: 24px 26px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 20px;
  background: #fff;
}
.cs-duel-value {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-d);
}
.cs-duel-item > div { display: flex; flex-direction: column; gap: 4px; }
.cs-duel-item.is-alert { background: var(--apricot-soft); border-color: transparent; }
.cs-duel-item.is-alert .cs-duel-value { color: var(--apricot-d); }
.cs-duel-item.is-alert .cs-card-text { color: var(--ink); }

/* ── Befunde: Beobachtung -> Bedeutung -> Aenderung ──────────────────────── */
.cs-findings {
  display: flex; flex-direction: column;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.cs-finding {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 96px;
  gap: 20px;
  align-items: start;
  padding: 16px 22px;
  border-top: 1px solid rgba(185, 216, 214, 0.45);
}
.cs-finding:first-child { border-top: 0; }
.cs-finding.is-head {
  padding-top: 14px; padding-bottom: 12px;
  background: rgba(217, 241, 237, 0.45);
}
.cs-finding.is-head span {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey);
}
.cs-finding p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grey); }
.cs-finding .cs-finding-obs { color: var(--ink); font-weight: 500; }
.cs-finding .cs-finding-fix { color: var(--ink); }
.cs-finding-lbl { display: none; }
.cs-prio {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
.cs-prio.is-kritisch { background: var(--apricot-soft); color: var(--apricot-d); }
.cs-prio.is-wichtig  { background: var(--accent-soft); color: var(--accent-d); }
.cs-prio.is-spaeter  { background: rgba(98, 115, 125, 0.12); color: var(--grey); }

/* ── Farbrollen ──────────────────────────────────────────────────────────── */
.cs-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cs-swatch {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(185, 216, 214, 0.45);
  border-radius: 18px;
  background: #fff;
}
.cs-swatch-chip { display: block; height: 64px; border-radius: 12px; margin-bottom: 8px; }
.cs-swatch .cs-card-title { font-size: 14px; }
.cs-swatch .cs-card-text { font-size: 12.5px; line-height: 1.45; }
.cs-swatch-hex { margin: 0; font-size: 12px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--grey); }

/* ── Hi-Fi-Flow: sechs Screens in einer Reihe ────────────────────────────── */
.cs-screens.is-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.cs-screens.is-flow .cs-screen img { max-width: none; border-radius: 16px; }
.cs-screens.is-flow .cs-screen figcaption { font-size: 12px; font-weight: 600; color: var(--ink); }

/* Vorher/Nachher mit Erklaersatz */
.cs-ba-text { margin-top: 12px; }

/* ── Prototyp: erst nach Klick einbetten ─────────────────────────────────── */
.cs-proto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 40px;
  align-items: center;
  padding: 28px;
  border-radius: 24px;
  background: var(--accent-soft);
}
.cs-proto-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cs-proto-text .cs-body { color: var(--ink); }
.cs-proto-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-proto-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cs-proto-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.cs-proto-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 874;
  max-height: 780px;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(185, 216, 214, 0.7);
  justify-self: center;
}
.cs-proto-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
.cs-proto-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-proto-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 24px 20px;
  background: linear-gradient(to top, rgba(16, 43, 60, 0.82) 0%, rgba(16, 43, 60, 0.35) 45%, rgba(16, 43, 60, 0) 70%);
}
.cs-proto-overlay .pp-action { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cs-proto-overlay p { margin: 0; font-size: 12px; color: #fff; text-align: center; }

/* ── Test Card ───────────────────────────────────────────────────────────── */
.cs-testcard {
  display: flex; flex-direction: column; gap: 14px;
}
.cs-testcard-head {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 26px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: #fff;
}
.cs-testcard-hyp {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.cs-testcard-meta { margin: 0; font-size: 12.5px; color: var(--grey); }
.cs-testcard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-testcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-rating {
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  background: var(--accent-soft); color: var(--accent-d);
  font-size: 11px; font-weight: 800;
}
.cs-testcard-steps .cs-card:first-child .cs-rating { background: var(--apricot-soft); color: var(--apricot-d); }
.cs-guard {
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--apricot-soft);
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.cs-guard strong { color: var(--apricot-d); }

/* Dark Mode */
[data-theme='dark'] .cs-overview,
[data-theme='dark'] .cs-persona,
[data-theme='dark'] .cs-verdict,
[data-theme='dark'] .cs-duel-item:not(.is-alert),
[data-theme='dark'] .cs-findings,
[data-theme='dark'] .cs-swatch,
[data-theme='dark'] .cs-testcard-head { background: #152530; }

/* Responsive */
@media (max-width: 1200px) {
  .cs-screens.is-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cs-testcard-steps { grid-template-columns: 1fr 1fr; }
  .cs-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-feature { grid-template-columns: 1fr; gap: 22px; }
  .cs-proto { grid-template-columns: 1fr; gap: 24px; }
  .cs-proto-frame { max-width: 360px; }
  /* Befunde als gestapelte Karten statt Tabelle */
  .cs-finding.is-head { display: none; }
  .cs-finding { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .cs-finding > span[role="cell"] { order: -1; }
  .cs-finding-lbl {
    display: block; margin-bottom: 2px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey);
  }
}
@media (max-width: 700px) {
  .cs-overview { padding: 20px; }
  .cs-facts { grid-template-columns: 1fr; gap: 14px; }
  .cs-persona { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .cs-persona-img { width: 132px; height: 132px; }
  .cs-verdict { grid-template-columns: auto 1fr; }
  .cs-verdict-a { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
  .cs-duel { grid-template-columns: 1fr; }
  .cs-duel-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cs-screens.is-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-swatches { grid-template-columns: 1fr 1fr; }
  .cs-testcard-steps { grid-template-columns: 1fr; }
  .cs-proto { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-feature-img:hover img { transform: none; }
  .cs-toc a { transition: none; }
}

/* Nachschaerfung nach Sichtpruefung */
.cs-stats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-proto { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.cs-screens.has-side { grid-template-columns: minmax(0, 300px) minmax(0, 460px); gap: 56px; }
@media (max-width: 1000px) {
  .cs-screens.has-side { grid-template-columns: 1fr; gap: 24px; }
  .cs-proto { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cs-stats.is-three { grid-template-columns: 1fr; }
}
/* Auf dem Handy streckt .pp-action sich per flex:1 — im Overlay nicht. */
.cs-proto-overlay .pp-action { flex: 0 0 auto; width: auto; }

/* ── Zweite Leseebene: "Mehr Details" (natives <details>) ────────────────── */
.cs-more { margin-top: 24px; }
.cs-more.is-inline { margin-top: 0; }
.cs-more > summary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(185, 216, 214, 0.9);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--accent-d);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more > summary:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs-more > summary:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 3px; }
.cs-more-state::after { content: '↓'; }
.cs-more[open] > summary .cs-more-state::after { content: '↑'; }
.cs-more[open] > summary .cs-more-label::after { content: ' – schließen'; font-weight: 500; }
.cs-more-body { padding-bottom: 8px; }
.cs-more-body > .cs-block:first-child { padding-top: 24px; }
.cs-more.is-inline[open] > .cs-testcard-steps { margin-top: 14px; }
[data-theme='dark'] .cs-more > summary { background: #152530; }
@media (prefers-reduced-motion: reduce) { .cs-more > summary { transition: none; } }

/* Prototyp als schmale Leiste (compact) */
.cs-proto-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--accent-soft);
}
.cs-proto-bar .cs-card-text { color: var(--ink); }
.cs-proto-more[open] .cs-proto-frame { margin-top: 16px; max-width: 340px; justify-self: start; }
.cs-testcard-ev { margin: 14px 0 4px; }
.cs-more.is-inline[open] .cs-testcard-meta { margin-bottom: 14px; }
/* Persona: Leitfrage im Kartenfuss */
.cs-persona-hmw {
  margin: 4px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(185, 216, 214, 0.45);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
}
.cs-persona-hmw span { display: block; margin-bottom: 4px; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-d); }

/* Drei Eckdaten statt vier (Rolle steht schon im Hero) */
.cs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Handy: Reihen seitlich wischen statt untereinander stapeln ────────────
   Vorher/Nachher, Hi-Fi-Flow, verworfene Richtungen und Kennzahlen wurden
   auf 390px zu langen Stapeln (Seite ~15.000px). Als Wischreihe mit
   angeschnittener naechster Karte bleibt der Inhalt, die Seite halbiert sich. */
@media (max-width: 700px) {
  .cs-facts { grid-template-columns: 1fr; }
  .cs-ba,
  .cs-screens.is-flow,
  .cs-cards.is-four,
  .cs-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding: 2px 20px 6px;
    scroll-padding-left: 20px;
  }
  .cs-ba::-webkit-scrollbar,
  .cs-screens.is-flow::-webkit-scrollbar,
  .cs-cards.is-four::-webkit-scrollbar,
  .cs-stats::-webkit-scrollbar { display: none; }
  .cs-ba > *,
  .cs-cards.is-four > *,
  .cs-stats > * { flex: 0 0 82%; scroll-snap-align: start; }
  .cs-screens.is-flow > * { flex: 0 0 46%; scroll-snap-align: start; }
  .cs-ba-pair { max-width: none; }
  .cs-swipe-hint { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BILDER GANZ ZEIGEN + LABELS UNTER DEM BILD (24.09.2026)
   Vorher: object-fit: cover in festen Hoehen -> Screens wurden beschnitten,
   und die Caption-Pille lag ueber dem Bild. Jetzt: jedes Bild vollstaendig
   (contain) in einem ruhigen Rahmen, Beschriftung als Designsystem-Label
   darunter — sie verdeckt nichts und darf so lang sein, wie sie ist.
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-hero-img,
.pp-step-img,
.pp-shot {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.pp-img-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background: #F2F7F5;
}
.pp-hero-img .pp-img-frame img,
.pp-step-img .pp-img-frame img,
.pp-shot .pp-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.pp-hero-img:hover img, .pp-shot:hover img, .pp-step-img:hover img { transform: none; }
.pp-img-frame:hover .pp-zoom,
.pp-hero-img:hover .pp-zoom, .pp-step-img:hover .pp-zoom, .pp-shot:hover .pp-zoom { opacity: 1; }

/* Hero: Bild in seinem echten Seitenverhaeltnis, gedeckelt auf 560px Hoehe */
.pp-hero-img {
  border: 1px solid rgba(185, 216, 214, 0.45);
  box-shadow: 0 16px 48px rgba(16, 43, 60, 0.07);
}
.pp-hero-img .pp-img-frame { max-height: 560px; }
.pp-hero-img .pp-img-frame img { height: auto; max-height: 560px; }
.pp-hero-img.is-wide { aspect-ratio: auto; }
.pp-hero-img.is-logo .pp-img-frame { background: #fff; aspect-ratio: 4 / 3; }
.pp-hero-img.is-logo .pp-img-frame img { height: 100%; padding: clamp(28px, 5vw, 64px); }

/* Prozessschritte: Bild mittig, ganz sichtbar, Hoehe begrenzt */
.pp-step-img { align-self: stretch; border-left: 1px solid rgba(185, 216, 214, 0.45); }
.pp-step-row.is-flipped .pp-step-img { border-left: 0; border-right: 1px solid rgba(185, 216, 214, 0.45); }
.pp-step-img .pp-img-frame { flex: 1; min-height: 220px; max-height: 380px; padding: 16px; }
.pp-step-img .pp-img-frame img { max-height: 348px; border-radius: 10px; }

/* Galerie: einheitliche Kacheln (4:3), Bild vollstaendig darin */
.pp-shot { height: auto; background: #fff; }
.pp-shot .pp-img-frame { aspect-ratio: 4 / 3; padding: 10px; }
.pp-shot .pp-img-frame img { border-radius: 8px; }

/* Label — Designsystem: flache Toenung, 6px-Radius, DM Sans 11px/700,
   dunkle Akzentfarbe als Text (Kontrast >= 4.5:1 auf der Toenung). */
.pp-img-tag {
  position: static;
  display: block;
  align-self: flex-start;
  max-width: none;
  margin: 12px 14px 14px;
  padding: 5px 10px;
  border-radius: var(--radius-chip);
  background: var(--accent-soft);
  color: var(--accent-d);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Skill-Pillen im Hero sind Labels, keine Buttons -> 6px-Radius */
.pp-pill { border-radius: var(--radius-chip); padding: 5px 10px; }

/* Kontrast (CLAUDE.md-Regel): helle Markenfarben nur fuer Flaechen,
   Text und kleine UI immer in der -d-Variante. Weiss auf Apricot (2,3:1)
   oder Teal (4,05:1) fiel durch, die Projektnummer in Lime war unsichtbar. */
.pp-action { background: var(--accent-d); }
.pp-action.is-ghost { background: #fff; color: var(--accent-d); border-color: var(--accent-d); }
.pp-step-num { background: var(--accent-d); }
.pp-num { color: var(--accent-d); }
.cs-fix-num { background: var(--accent-d); }

/* Hero: Bild und Text vertikal mittig zueinander — Querformat-Bilder standen
   sonst oben mit viel Leere darunter. */
.pp-hero { align-items: center; }
/* Sidebar: Luft vor der zweiten Gruppe, auch wenn davor das aktive Projekt steht */
.pp-side-item + .pp-side-label { margin-top: 22px; }

@media (max-width: 900px) {
  .pp-hero { align-items: start; }
  .pp-hero-img { height: auto; }
  .pp-hero-img .pp-img-frame,
  .pp-hero-img .pp-img-frame img { max-height: 420px; }
  .pp-step-img { width: 100%; height: auto; border-left: 0 !important; border-right: 0 !important; border-top: 1px solid rgba(185, 216, 214, 0.45); }
  .pp-step-img .pp-img-frame { min-height: 0; max-height: 320px; }
  .pp-step-img .pp-img-frame img { max-height: 288px; }
  .pp-shots { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 620px) {
  .pp-shots { grid-template-columns: 1fr 1fr; }
  .pp-img-tag { margin: 10px 10px 12px; font-size: 11px; }
}

/* Titel der Projektseiten: gleiche, lockerere Laufweite wie die Startseite */
.pp-title { letter-spacing: -0.012em; line-height: 1.2; }
.cs-chapter-title { letter-spacing: -0.01em; }


/* KI in diesem Kapitel (Stand 28.09.2026) — js/12-project-page.js aiHtml() */
.cs-ai {
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--electric-soft);
  border: 1px solid rgba(65, 49, 183, 0.14);
}
.cs-ai-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--electric-d);
}
.cs-ai-icon { display: inline-flex; color: var(--electric-d); }
.cs-ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-ai-list li { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: baseline; }
.cs-ai-tool {
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  background: #fff;
  color: var(--electric-d);
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.cs-ai-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.cs-ai-mine {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(65, 49, 183, 0.16);
  font-size: 14px; line-height: 1.6; color: var(--ink);
}
.cs-ai-mine strong { color: var(--electric-d); }
@media (max-width: 640px) {
  .cs-ai { padding: 16px 18px; }
  .cs-ai-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Prototyp-Rahmen offen statt aufklappbar (Stand 28.09.2026) */
.cs-proto-open { margin-top: 16px; }
.cs-proto-open .cs-proto-frame { max-width: 340px; }
.cs-testcard-ev { margin-top: 12px; }
.cs-testcard-meta + .cs-testcard-steps, .cs-testcard-ev + .cs-testcard-steps { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LUFT UND RUHE IM CASE (Stand 28.09.2026, Nicos Wunsch "zu voll, zu generisch")
   Prinzip: Kapitel sind klare Zäsuren, Abstand ersetzt Rahmen. Karten nur,
   wo sie Hierarchie tragen (weiterverfolgte Idee, Grenze, Persona, Befunde).
   Alles andere steht frei auf der Fläche, getrennt durch eine feine Linie.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs .cs-block { padding-top: 72px; gap: 18px; }
.cs .cs-chapter + .cs-block { padding-top: 48px; }
.cs .cs-body { max-width: 64ch; }
.cs .cs-note { max-width: 72ch; }
.cs .cs-title { font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -0.01em; }

/* Kapitel: großer Zahlanker, kein Strich, viel Raum davor */
.cs .cs-chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: end;
  margin-top: 150px;
  padding-top: 0;
  border-top: 0;
}
.cs .cs-overview + .cs-chapter { margin-top: 110px; }
.cs .cs-chapter-num {
  font-size: clamp(64px, 8vw, 112px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.9;
}
.cs .cs-chapter-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.cs .cs-chapter-sub { margin-top: 10px; font-size: 13.5px; }

/* Zitat: groß gesetzt, ohne Kasten und ohne Seitenstreifen */
.cs .cs-quote { padding: 0; border: 0; border-radius: 0; background: none; }
.cs .cs-quote p { max-width: 32ch; }
.cs .cs-quote p { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 16px; }
.cs .cs-quote cite { font-size: 13px; }

/* Kernaussage: Typo statt Karte */
.cs .cs-statement {
  padding: 0; border: 0; border-radius: 0; background: none;
  max-width: 44ch;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; letter-spacing: -0.01em;
}

/* Karten: frei stehend mit feiner Linie oben, Kästen nur mit Bedeutung */
.cs .cs-cards { gap: 36px 32px; }
.cs .cs-card {
  padding: 18px 0 0;
  border: 0; border-top: 1px solid rgba(16, 43, 60, 0.14);
  border-radius: 0; background: none; box-shadow: none;
}
.cs .cs-card.is-out { border-top-style: dashed; }
.cs .cs-card.is-in,
.cs .cs-card.is-limit { padding: 22px 24px; border-top: 0; border-radius: 18px; }
.cs .cs-card.is-in { background: var(--accent-soft); }
.cs .cs-card.is-limit { background: var(--apricot-soft); }
.cs .cs-card-note { border-top: 0; padding-top: 2px; }

/* Zahlen: frei, groß */
.cs .cs-stats { gap: 32px; }
.cs .cs-stat { padding: 18px 0 0; border: 0; border-top: 1px solid rgba(16, 43, 60, 0.14); border-radius: 0; background: none; }
.cs .cs-stat-value { font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -0.03em; padding-bottom: 16px; }

/* Vorher/Nachher: ruhige Fläche statt weißer Karte */
.cs .cs-ba { gap: 28px; }
.cs .cs-ba-item { padding: 18px; border: 0; border-radius: 20px; background: rgba(217, 241, 237, 0.35); }

/* Farbrollen: nur Chip und Text */
.cs .cs-swatches { gap: 20px; }
.cs .cs-swatch { padding: 0; border: 0; border-radius: 0; background: none; }
.cs .cs-swatch-chip { height: 88px; border-radius: 16px; margin-bottom: 12px; }

/* Befunde: mehr Luft pro Zeile */
.cs .cs-finding { padding: 20px 26px; gap: 24px; }
.cs .cs-finding.is-head { padding-top: 16px; padding-bottom: 14px; }

/* Test Card: Schritte frei nebeneinander */
.cs .cs-testcard { gap: 22px; }
.cs .cs-testcard-steps { gap: 32px; }
.cs .cs-testcard-head { padding: 26px 30px; }

/* Persona und Übersicht: mehr Innenraum */
.cs .cs-persona { padding: 32px 36px; gap: 40px; }
.cs .cs-overview { padding: 34px 36px 30px; gap: 24px; }

/* Duell-Zahlen */
.cs .cs-duel { gap: 20px; }
.cs .cs-duel-item { padding: 30px 32px; }

/* ── Prototyp: Handy links, Info rechts ─────────────────────────────────── */
.cs .cs-proto.is-media-left {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: 28px;
}
.cs .cs-proto.is-media-left .cs-proto-frame { justify-self: stretch; max-width: 340px; }
.cs .cs-proto.is-media-left .cs-proto-text { gap: 18px; max-width: 46ch; }
.cs .cs-proto.is-media-left .cs-proto-list { gap: 12px; }
.cs .cs-proto.is-media-left .cs-proto-list li { font-size: 15px; }

/* ── Werkzeug-Kasten ────────────────────────────────────────────────────── */
.cs .cs-toolbox-wrap { padding-top: 120px; scroll-margin-top: 110px; }
.cs-toolbox {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  border: 1px solid rgba(185, 216, 214, 0.7);
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
}
.cs-toolbox-main { padding: clamp(24px, 3.6vw, 44px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-toolbox-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--electric-d);
}
.cs-toolbox-kicker svg { width: 16px; height: 16px; }
.cs-tools { list-style: none; margin: 14px 0 0; padding: 0; }
.cs-tool {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(16, 43, 60, 0.1);
}
.cs-tool:last-child { padding-bottom: 0; }
.cs-tool-head { display: flex; align-items: center; gap: 14px; align-self: start; }
.cs-tool-ico {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: #F2F4F6;
  color: var(--electric-d);
}
.cs-tool-ico img { width: 24px; height: 24px; display: block; }
.cs-tool.is-miro .cs-tool-ico { background: #FFD02F; }
.cs-tool-badge {
  position: absolute; right: -5px; bottom: -5px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #fff;
  background: var(--electric-d); color: #fff;
}
.cs-tool-badge svg { width: 11px; height: 11px; }
.cs-tool-name { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); }
.cs-tool-kind { margin: 2px 0 0; font-size: 12.5px; color: var(--grey); }
.cs-tool-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-tool-uses li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cs-tool-uses li span { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.cs-ch-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 30px; padding: 0 6px;
  border-radius: var(--radius-chip);
  background: var(--accent-soft); color: var(--accent-d);
  font-size: 11px; font-weight: 800; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.cs-ch-chip:hover { background: var(--accent-d); color: #fff; }
.cs-ch-chip:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.cs-toolbox-mine {
  padding: clamp(24px, 3.6vw, 44px);
  background: var(--electric-soft);
  display: flex; flex-direction: column; gap: 18px;
}
.cs-toolbox-mine .cs-tool-uses { gap: 14px; }
.cs-toolbox-mine .cs-ch-chip { background: #fff; color: var(--electric-d); }
.cs-toolbox-mine .cs-ch-chip:hover { background: var(--electric-d); color: #fff; }
.cs-toolbox-note {
  margin: 6px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(65, 49, 183, 0.16);
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--electric-d);
}
.cs-toc a span svg { width: 13px; height: 13px; }
[data-theme='dark'] .cs-toolbox { background: #152530; }

@media (prefers-reduced-motion: reduce) { .cs-ch-chip { transition: none; } }

@media (max-width: 1000px) {
  .cs-toolbox { grid-template-columns: 1fr; }
  .cs-tool { grid-template-columns: 1fr; gap: 14px; }
  .cs .cs-proto.is-media-left { grid-template-columns: 1fr; }
  .cs .cs-proto.is-media-left .cs-proto-frame { max-width: 300px; justify-self: center; }
}
@media (max-width: 700px) {
  .cs .cs-block { padding-top: 52px; }
  .cs .cs-chapter + .cs-block { padding-top: 32px; }
  .cs .cs-chapter { margin-top: 96px; column-gap: 16px; grid-template-columns: 1fr; row-gap: 10px; }
  .cs .cs-overview + .cs-chapter { margin-top: 72px; }
  .cs .cs-chapter-num { font-size: 56px; }
  .cs .cs-persona { padding: 22px; gap: 18px; }
  .cs .cs-overview { padding: 22px; }
  .cs .cs-cards { gap: 24px; }
  .cs .cs-toolbox-wrap { padding-top: 80px; }
  /* Wischreihen: freie Karten brauchen hier wieder eine Fläche */
  .cs .cs-cards.is-four > .cs-card:not(.is-in),
  .cs .cs-stats > .cs-stat { padding: 18px 18px 20px; border-top: 0; border-radius: 18px; background: #fff; border: 1px solid rgba(185, 216, 214, 0.45); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORYTELLING (Stand 30.09.2026)
   Die Geschichte in fünf Sätzen als Sprungnavigation, Kreislauf-Diagramm,
   Befund-IDs mit Verweis aus der Iteration, Ziel-gegen-Test-Balken und ein
   Schluss mit Kontakt. Kontrastkorrekturen im Case (Audit 30.09.2026).
   ═══════════════════════════════════════════════════════════════════════════ */
.cs { --grey-d: #4E5E67; }

/* ── Geschichte in fünf Sätzen ─────────────────────────────────────────── */
.cs-story { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.cs-story-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cs-story-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(16, 43, 60, 0.14);
}
.cs-story-list li { display: flex; }
.cs-story-step {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
  padding: 18px 18px 20px 0;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}
.cs-story-list li + li .cs-story-step { padding-left: 18px; border-left: 1px solid rgba(16, 43, 60, 0.1); }
.cs-story-step::before {
  /* Fortschrittslinie: füllt sich beim Überfahren */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--accent-d);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-out);
}
.cs-story-step:hover::before,
.cs-story-step:focus-visible::before { transform: scaleX(1); }
.cs-story-step:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 4px; border-radius: 6px; }
.cs-story-num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  color: var(--accent-d);
  font-variant-numeric: tabular-nums;
}
.cs-story-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-d);
}
.cs-story-text {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; line-height: 1.4;
  text-wrap: balance;
}
.cs-story-arrow {
  margin-top: auto;
  color: var(--accent-d);
  transform: translateY(0);
  transition: transform var(--dur-normal) var(--ease-out);
}
.cs-story-step:hover .cs-story-arrow { transform: translateY(4px); }
.cs-story-tools {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--electric-soft);
  color: var(--electric-d);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.cs-story-tools svg { width: 16px; height: 16px; }
.cs-story-tools:hover { background: #D6D0FF; }
.cs-story-tools:focus-visible { outline: 2px solid var(--electric-d); outline-offset: 2px; }

/* ── Kreislauf ─────────────────────────────────────────────────────────── */
.cs-cycle {
  position: relative;
  width: min(100%, 700px);
  aspect-ratio: 1 / 1;
  margin: 12px auto 4px;
}
.cs-cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cs-cycle-ring path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 1.4 1.6;
  opacity: 0.8;
}
.cs-cycle-ring marker path { fill: var(--accent); stroke: none; opacity: 1; }
.cs-cycle-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent-d);
  text-wrap: balance;
}
.cs-cycle-nodes { list-style: none; margin: 0; padding: 0; }
.cs-cycle-node {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 186px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid rgba(16, 43, 60, 0.12);
  box-shadow: 0 10px 28px -14px rgba(16, 43, 60, 0.25);
}
.cs-cycle-node .cs-card-title { font-size: 15px; }
.cs-cycle-node .cs-card-text { font-size: 13px; line-height: 1.5; color: var(--grey-d); }
.cs-cycle-idx {
  width: 24px; height: 24px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-d); color: #fff;
  font-size: 12px; font-weight: 800;
}
.cs-cycle-node:last-child .cs-cycle-idx { background: var(--apricot-d); }

@media (max-width: 860px) {
  .cs-cycle { width: 100%; aspect-ratio: auto; margin-top: 4px; }
  .cs-cycle-ring { display: none; }
  .cs-cycle-center {
    position: static; transform: none; width: auto; text-align: left;
    margin-bottom: 14px; font-size: 20px;
  }
  .cs-cycle-nodes { display: flex; flex-direction: column; gap: 0; }
  .cs-cycle-node {
    position: relative; left: auto; top: auto; transform: none; width: auto;
    margin-left: 12px; padding: 12px 0 18px 26px;
    border: 0; border-left: 2px dashed rgba(0, 140, 149, 0.45); border-radius: 0;
    background: none; box-shadow: none;
  }
  .cs-cycle-idx { position: absolute; left: -13px; top: 10px; }
  .cs-cycle-node:last-child::after {
    content: 'zurück zu 1';
    display: inline-block; margin-top: 10px;
    font-size: 12px; font-weight: 700; color: var(--accent-d);
  }
  html[lang='en'] .cs-cycle-node:last-child::after { content: 'back to 1'; }
}

/* ── Befund-IDs ────────────────────────────────────────────────────────── */
.cs-fid {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  margin-right: 10px;
  border-radius: var(--radius-chip);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  vertical-align: 1px;
}
.cs-finding:not(.is-critical) .cs-fid { background: rgba(16, 43, 60, 0.12); color: var(--ink); }
.cs-finding { scroll-margin-top: 120px; }
.cs-finding:target { background: var(--accent-soft); }
.cs-ba-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-ba-fixes { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--grey-d); }
.cs-ba-fixes .cs-fid { margin-right: 0; position: relative; }
.cs-ba-fixes .cs-fid::after { content: ''; position: absolute; inset: -11px -7px; }
.cs-ba-fixes .cs-fid:hover { background: var(--accent-d); }
.cs-ba-fixes .cs-fid:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }

/* ── Ziel gegen Test ───────────────────────────────────────────────────── */
.cs-targets { display: flex; flex-direction: column; }
.cs-target {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  grid-template-areas: "head track" "head test";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 10px;
  padding: 26px 0;
  border-top: 1px solid rgba(16, 43, 60, 0.14);
}
.cs-target:last-child { border-bottom: 1px solid rgba(16, 43, 60, 0.14); }
.cs-target-head { grid-area: head; display: flex; flex-direction: column; gap: 4px; }
.cs-target-head .cs-card-text { color: var(--grey-d); }
.cs-target-track {
  grid-area: track;
  position: relative;
  align-self: end;
  height: 14px;
  margin-top: 26px;
  border-radius: var(--radius-pill);
  background: rgba(16, 43, 60, 0.07);
}
.cs-target-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--v);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.cs-target.is-miss .cs-target-fill { background: var(--apricot); }
.cs-target-mark {
  position: absolute; left: var(--v); top: -8px; bottom: -8px;
  width: 0;
  border-left: 2px dashed var(--ink);
}
.cs-target-mark span {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px; font-weight: 800; color: var(--ink);
}
.cs-target-test { grid-area: test; margin: 0; font-size: 14px; color: var(--grey-d); }
.cs-target-test strong { color: var(--ink); }
.cs-target.is-miss .cs-target-test strong { color: var(--apricot-d); }
.cs-target.is-open .cs-target-track { background: repeating-linear-gradient(90deg, rgba(16,43,60,0.07) 0 8px, transparent 8px 14px); }
@media (max-width: 760px) {
  .cs-target { grid-template-columns: 1fr; grid-template-areas: "head" "track" "test"; }
  .cs-target-mark span { transform: translateX(-85%); }
}

/* ── Schluss ───────────────────────────────────────────────────────────── */
.cs .cs-closing { padding-top: clamp(96px, 12vw, 160px); gap: 36px; }
.cs-closing-text {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.cs-closing-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: var(--ink);
}
.cs-closing-ask { margin: 0; max-width: 40ch; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.cs-closing-cta .pp-action { background: var(--lime); color: var(--ink); }
.cs-closing-cta .pp-action:hover { background: #B7E552; }
.cs-closing-cta .pp-action.is-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); }
.cs-closing-cta .pp-action.is-ghost:hover { background: rgba(255,255,255,0.08); }
.cs-closing-cta .pp-action:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.cs-closing + .cs-pdfs { padding-top: 56px; }

/* ── Kontrast- und Zielgrößen-Korrekturen im Case (Audit 30.09.2026) ─── */
.cs .cs-card.is-out .cs-card-title,
.cs .cs-card.is-out .cs-card-text { opacity: 1; }
.cs .cs-card.is-out .cs-card-title { color: #34475A; }
.cs .cs-card.is-out .cs-card-text { color: var(--grey-d); }
.cs .cs-source { opacity: 1; color: var(--grey-d); }
.cs .cs-card-label { color: var(--grey-d); }
.cs .cs-card-label.is-out { color: var(--apricot-d); }
.cs .cs-card-label.is-in { color: var(--accent-d); }
.cs .cs-card-note { color: var(--accent-d); font-weight: 600; }
.cs .cs-note { color: var(--grey-d); }
.pp-side-item.is-active .pp-side-num { color: var(--ink); } /* Punkt bleibt farbig, Zahl lesbar */
.cs-ch-chip { position: relative; }
.cs-ch-chip::after { content: ''; position: absolute; inset: -11px -7px; }

@media (max-width: 900px) {
  .cs-story-list { grid-template-columns: 1fr; border-top: 0; }
  .cs-story-list li + li .cs-story-step { padding-left: 0; border-left: 0; }
  .cs-story-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    grid-template-areas: "num label arrow" "num text arrow";
    column-gap: 12px; row-gap: 2px;
    padding: 14px 0;
    border-top: 1px solid rgba(16, 43, 60, 0.12);
  }
  .cs-story-num { grid-area: num; padding-top: 2px; }
  .cs-story-label { grid-area: label; }
  .cs-story-text { grid-area: text; font-size: 15.5px; }
  .cs-story-arrow { grid-area: arrow; align-self: center; margin: 0; }
  .cs-closing-cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-story-step::before, .cs-story-arrow { transition: none; }
}
.cs-closing-cta .pp-action { white-space: nowrap; }
@media (max-width: 560px) {
  .cs-closing-cta .pp-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cs-closing-cta .pp-action { justify-content: center; }
}

/* ═══ VERDICHTUNG (Stand 30.09.2026, 2. Fassung) ═══════════════════════════
   Überleitungen zwischen den Kapiteln, kompakte Eckdaten, Werkzeug-Kasten
   zweispaltig, Test Card nur mit Hypothese und Gegen-Kriterium. */
.cs-factsline {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--grey-d, #4E5E67);
  max-width: 90ch;
}
.cs .cs-overview { gap: 22px; padding: 30px 34px 28px; }
.cs .cs-overview .cs-story { margin-top: 0; }

.cs-bridge {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 0; padding-top: 88px;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--accent-d);
  text-wrap: balance;
}
.cs-bridge svg { color: var(--accent); }
.cs .cs-bridge + .cs-chapter { margin-top: 64px; }

/* Werkzeug-Kasten: Werkzeuge zweispaltig statt untereinander */
.cs .cs-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.cs .cs-tool { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
.cs .cs-tool:last-child { padding-bottom: 20px; }
.cs .cs-toolbox-wrap { padding-top: 96px; }
@media (max-width: 760px) {
  .cs .cs-tools { grid-template-columns: 1fr; }
  .cs-bridge { padding-top: 64px; }
}