/* ==========================================================================
   40 wendepunkt · Owner: wdf-section-builder (Auftrag P7-40)
   Text → Rollen-Schalter → Zitat (mobil). Ab 1024: Text + Zitat links (5), Schalter rechts (7), wie Hero.
   Der Regelbruch: Zettel (Papier, nur hier) und App-Fenster liegen in EINER Rasterzelle. Die obere Ebene ist
   voll sichtbar, die untere zeigt sich als --paper-edge-Kante darunter (Fix 1, style-lock § 9/§ 12).
   Die Zelle ist so hoch wie die höhere Ebene (Fenster „Mit Rollen“) + Kante und bleibt in beiden Ansichten gleich hoch (Raum für FLIP, P8).
   Mobil (< 768) füllen beide Ebenen die Zelle. Ab 768 richtet sich der Zettel als obere Ebene nach seinem Inhalt (align-self: start),
   das höhere Fenster darunter schaut oben heraus (Papier unten in der Zelle, K-VIS-04); als untere Ebene streckt sich der Zettel wieder auf die Zelle und zeigt die Papierkante.
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

/* ---------- Abschnitt ---------- */
/* Gruppen: Text / Schalter / Zitat. Mobil 24 zwischen Gruppen = 2 × 12 in der Gruppe (Längenbudget 1300). */
.wende__grid { row-gap: var(--s-5); }

/* ---------- Text ---------- */
.wende__text { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }

/* ---------- Zitat ---------- */
.wende__quote { min-width: 0; max-width: var(--measure-lead); }

/* ---------- Rollen-Schalter: Kopf (Schalter + Etikett) über beiden Ebenen ---------- */
.rollen { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.rollen__head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
}
.rollen__seg { flex: 1 1 auto; }
.rollen__head .tag { margin-left: auto; }

/* ---------- Ebenen ---------- */
/* Ohne JS: beide Ebenen untereinander, Zettel zuerst (copy.md „Ohne JavaScript“). */
.rollen__desk { display: grid; gap: var(--s-5); min-width: 0; }
.rollen__layer { min-width: 0; }

/* Mit JS: eine Rasterzelle, beide Ebenen gestreckt. Die obere hält unten die Kante frei, die untere beginnt
   eine Kante tiefer — so ragt von der unteren genau --paper-edge heraus, egal welche Ebene höher ist. */
.rollen.is-enhanced .rollen__desk { gap: 0; }
.rollen.is-enhanced .rollen__layer { grid-area: 1 / 1; }
.rollen.is-enhanced .rollen__layer[data-state="top"] { z-index: 2; margin-block-end: var(--paper-edge); }
.rollen.is-enhanced .rollen__layer[data-state="under"] { z-index: 1; margin-block-start: var(--paper-edge); }
/* Untere Ebene: nur Fläche und Kante, kein Inhalt (inert + aria-hidden setzt das Skript) */
.rollen.is-enhanced .rollen__layer[data-state="under"] > * { visibility: hidden; }

/* ---------- Zettel (Papier-Regeln style-lock § 9) ---------- */
/* Breite = Fenster − 2 × 8 px: Die gedrehte Ecke ragt nie über das Fenster hinaus (Fix 5).
   translateZ(0) für sauber gerenderten gedrehten Text bei 1× Pixeldichte. */
.rollen__paper {
  --paper-tilt: var(--paper-tilt-s);
  display: flex; flex-direction: column;
  margin-inline: var(--s-2);
  padding: var(--s-4);
  background: var(--color-paper);
  color: var(--color-paper-text);
  border-radius: var(--r-paper);
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--paper-tilt)) translateZ(0);
  transform-origin: left bottom;
}
/* Liegt der Zettel unter dem Fenster, liegt er gerade (komponenten.md: „Zettel dreht auf 0°“) */
.rollen.is-enhanced .rollen__paper[data-state="under"] { --paper-tilt: 0deg; }
/* Liegt der Zettel unter dem Fenster, ist er die Kante: weicher Papierschatten wird zu --shadow-1, dazu 1 px Linie unten
   (als Schatten, nicht als Rahmen: kein Layoutsprung für den FLIP), damit die Kante als Blattkante lesbar ist. */
.rollen.is-enhanced .rollen__paper[data-state="under"] {
  box-shadow: var(--shadow-1), inset 0 -1px 0 var(--color-paper-line);
}
/* Das Fenster darüber wirft nur --shadow-1: Der weiche Fensterschatten (--shadow-2) fiele sonst als Verlauf auf die 24-px-Kante
   und ließe sie wie einen verwaschenen Streifen aussehen. */
.rollen.is-enhanced .rollen__app[data-state="top"] { box-shadow: var(--shadow-1); }
.rollen__paper ::selection { background: var(--color-paper-line); color: var(--color-paper-text); }

.rollen__paper-label {
  font-size: var(--fs-micro);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-paper-text-muted);
}
.rollen__paper-title {
  margin-top: var(--s-1);
  font-size: var(--fs-heading-3);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-bold);
  color: var(--color-paper-text);
}
/* Linierte Zeilen, je ≥ 44 px; die Aufgabe bricht um, „Zuständig: ?“ bleibt zusammen */
.rollen__tasks { margin-top: var(--s-3); border-top: 1px solid var(--color-paper-line); }
.rollen__tasks li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  min-height: calc(var(--s-6) + var(--s-1));
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--color-paper-line);
  font-size: var(--fs-small);
  line-height: var(--lh-title);
}
.rollen__task { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.rollen__who {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex: none;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--color-paper-warn);
  white-space: nowrap;
}
.rollen__paper-foot { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.rollen__paper-count {
  font-size: var(--fs-small);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-paper-text);
  text-wrap: balance;
}
/* Wortpaar zusammenhalten, solange es in die Zeile passt; bei sehr großer Schrift (Zoom 200 %) darf es innen umbrechen statt über das Blatt zu laufen */
.rollen__paper-count .nb, .rollen__app-count .nb { display: inline-block; white-space: normal; }
.rollen__paper-caption {
  font-size: var(--fs-small);
  line-height: var(--lh-quote);
  color: var(--color-paper-text-muted);
  text-wrap: pretty;
}

/* ---------- Fenster „Mit Rollen“: drei Spuren mit Übergaben ---------- */
.rollen__app { display: flex; flex-direction: column; }
.rollen__lanes { gap: 0; padding: var(--s-3); }
.rollen__lane {
  padding: var(--s-1) var(--s-3);
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
}
.rollen__lane-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-1);
  font-size: var(--fs-ui);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
/* Monogramm-Kachel D / F / B */
.rollen__avatar {
  display: grid; place-items: center; flex: none;
  width: var(--s-5); height: var(--s-5);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  background: var(--color-ui-overlay);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-semibold);
}
/* Aufgaben eingerückt auf die Kante des Rollennamens (Kachel + Abstand) */
.rollen__lane-list li {
  padding-block: var(--s-1);
  padding-inline-start: calc(var(--s-5) + var(--s-2));
  border-top: 1px solid var(--color-line);
  text-wrap: pretty;
}
.rollen__lane-list .mono { font-size: var(--fs-mono); }
/* Übergabe zwischen zwei Spuren: Pfeil auf der Achse der Monogramme */
.rollen__handoff {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: calc(var(--s-5) + var(--s-1));
  padding-inline-start: calc(var(--s-3) + var(--s-1));
  font-size: var(--fs-ui-meta);
  color: var(--color-text-muted);
}
.rollen__handoff .icon { width: var(--s-4); height: var(--s-4); color: var(--color-accent); }
/* Fuß unten im Fenster: gleich hohe Ebenen, Zählzeile schließt das Fenster ab */
.rollen__app-foot { display: grid; gap: var(--s-1); margin-top: auto; padding-inline: var(--s-3); }
/* Mobil benennt der Schalter die Ansicht: Fenstertitel nur für Screenreader (Längenbudget).
   Ab 768 trägt das Fenster wieder seine Titelleiste. */
.rollen.is-enhanced .rollen__app > .ui-window__bar {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rollen__app-count { font-weight: var(--fw-medium); color: var(--color-text); text-wrap: balance; }

/* ---------- ab 768: Tablet ---------- */
@media (min-width: 768px) {
  /* Einspaltig: Text bleibt auf Lesebreite, Zettel und Fenster nutzen die volle Wrap-Breite (wie alle anderen Abschnitte) */
  .wende__text { max-width: var(--measure-lead); }
  .rollen { gap: var(--s-5); }
  .rollen__seg { flex: 0 1 auto; }
  /* „Beispiel“ direkt neben dem Schalter (Abstand = Spaltenabstand der Kopfzeile, --s-3), nicht am rechten Rand */
  .rollen__head .tag { margin-left: 0; }
  .rollen__seg button { padding-inline: var(--s-4); }
  /* Zettel: großzügiger Zeilenrhythmus, Zählzeile unten auf dem Blatt (als untere Ebene gestreckt, als obere nach Inhalt, siehe unten) */
  /* Seitenrand 24 statt 8: Die gedrehte linke obere Ecke ragt mit der Zettelhöhe nach links (≈ 15 px bei 1024–1440); mit 24 px
     liegt sie in beiden Lagen innerhalb des Fensterrahmens. Gleicher Rand links und rechts, damit auch die Kante im Zustand „Mit Rollen“ mittig sitzt. */
  .rollen__paper { margin-inline: var(--s-5); padding: var(--s-6) var(--s-5) var(--s-5); }
  .rollen__tasks li { min-height: calc(var(--s-7) - var(--s-2)); }
  .rollen__paper-foot { margin-top: auto; padding-top: var(--s-4); }
  /* Liegt der Zettel oben, richtet er sich nach seinem Inhalt (Summenzeile direkt unter der Liste); das höhere Fenster
     darunter füllt die Zelle und schaut unten als dunkle Kante heraus. Als untere Ebene streckt er sich weiter. */
  .rollen.is-enhanced .rollen__paper[data-state="top"] { align-self: end; }
  .rollen__lanes { padding: var(--s-5) var(--s-5) var(--s-4); }
  .rollen__app-foot { display: grid; padding-inline: var(--s-5); }
  .rollen.is-enhanced .rollen__app > .ui-window__bar {
    position: static; width: auto; height: auto; min-height: calc(var(--s-6) + var(--s-2)); margin: 0;
    padding: var(--s-3) var(--s-5); overflow: visible; clip-path: none; white-space: normal;
    border-bottom: 1px solid var(--color-line);
  }
  .rollen__lane { padding: var(--s-2) var(--s-3) var(--s-1); }
  .rollen__lane-list li { padding-block: var(--s-2); }
  .rollen__handoff { min-height: calc(var(--s-6) - var(--s-1)); }
  .wende__grid { row-gap: var(--s-6); }
}

/* ---------- ab 1024: Text + Zitat 5 | Schalter 7 ---------- */
@media (min-width: 1024px) {
  /* Zusätzliche Höhe des Schalters fließt in Zeile 2: Text oben bündig mit dem Schalter, Zitat direkt unter dem Lead */
  .wende__grid { row-gap: var(--s-6); align-items: start; grid-template-rows: auto 1fr; }
  .wende__text { grid-column: 1 / span 5; grid-row: 1; max-width: none; }
  .wende__quote { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
  .rollen {
    grid-column: 6 / span 7; grid-row: 1 / span 2;
    max-width: none;
    padding-inline-start: calc(var(--s-6) + var(--s-2));
  }
  .rollen__paper { --paper-tilt: var(--paper-tilt-l); }
  .rollen__tasks li { font-size: var(--fs-body); }
}

/* ---------- Hohe Kontraste: Papier behält eine Kante ---------- */
@media (forced-colors: active) {
  .rollen__paper { border: 1px solid CanvasText; }
}

/* motion — Owner: wdf-motion-designer (P8-S), Bewegung rollen-wechsel (motion.js)
   Während des Wechsels fliegen die sechs Aufgaben als Klone in einer Ebene über Zettel und Fenster
   (aria-hidden, nicht klickbar). motion.js setzt Lage, Schrift und Weg; hier nur die Ebene selbst. */
.rollen.is-enhanced .rollen__desk { position: relative; }
/* P15-M: beschnitten (24 px Luft für die gedrehte Zettelkante). Seit die Timeline für den Scroll vorab steht, liegen die
   verborgenen Spur-Gesichter schon in Startlage (vergrößert, gedreht) und verbreiterten sonst die Seite (A01 bei 1280). */
.rollen__flug { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: clip; overflow-clip-margin: var(--s-5); }
.rollen__flug > span { position: absolute; display: block; transform-origin: 0 0; }