/* =========================================================================
   JPS-iQ DESIGN SYSTEM 2.0 — SCHICHT 2b: FORMEN
   -------------------------------------------------------------------------
   Warum es diese Datei gibt.

   Die Gruppenseiten bestanden aus Karten. Ueberschrift, Absatz, Rahmen,
   Radius — 112 mal allein in NetSuite. Eine Karte ist ein hoefliches
   Behaeltnis: sie sagt "hier ist etwas", aber nie "das hier ist anders als
   das daneben". Wenn alles dieselbe Form hat, traegt keine Form mehr
   Bedeutung, und die Seite wirkt gleichmuetig, egal wie gut der Text ist.

   Diese Schicht ergaenzt Formen, die keine Karten sind. Jede hat eine
   Aufgabe, fuer die sie besser ist als eine Karte:

     .band      Aussage, die den Lesefluss unterbricht — randlos, farbig
     .duo     zwei Dinge, die einander bedingen — eine Haelfte traegt Farbe
     .figures   Zahlen, die fuer sich sprechen — gross, ohne Rahmen
     .ledger    eine Aufstellung — Linien statt Kaesten
     .pull      ein Satz, der haengen bleiben soll
     .rail      eine Reihenfolge — mit sichtbarem Ruecken
     .notch     ein Einschub mit gekappter Ecke, fuer Ausnahmen
     .compare   zwei Zustaende gegeneinander
     .stagger   Kacheln, die absichtlich aus der Reihe tanzen

   Farbe kommt aus --bu-accent. Jede Business Unit faerbt dieselben Formen
   anders ein, ohne dass hier eine einzige Farbe fest steht.

   Regeln, die hier nicht gebrochen werden:
     - kein blanker fr-Track (GRID-SAFE): immer minmax(0, …)
     - Textfarbe auf farbiger Flaeche >= 4,5:1 (DESIGN-SYSTEM --contrast)
     - keine Form verlaesst sich allein auf Farbe; Form und Text tragen mit
   ========================================================================= */

/* Tints aus dem BU-Akzent. Eine Quelle, neun Ergebnisse. */
:root {
  --bu-tint-04: color-mix(in srgb, var(--bu-accent) 4%,  #FFFFFF);
  --bu-tint-08: color-mix(in srgb, var(--bu-accent) 8%,  #FFFFFF);
  --bu-tint-14: color-mix(in srgb, var(--bu-accent) 14%, #FFFFFF);
  --bu-edge:    color-mix(in srgb, var(--bu-accent) 26%, #FFFFFF);
}

/* ---------- .band — randlose Aussage, unterbricht den Lesefluss -------- */
.band {
  background: var(--bu-surface, var(--bu-accent));
  color: #FFFFFF;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
}
.band__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 860px) {
  .band__inner { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); align-items: start; }
}
.band__k {
  font-size: var(--fs-sm);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
  border-top: 3px solid rgba(255,255,255,.55);
  padding-top: .75rem;
}
.band__lead {
  font-size: var(--fs-xl);
  line-height: 1.28;
  margin: 0;
  max-width: 34ch;
}
.band__body { margin: .9rem 0 0; max-width: var(--measure); opacity: .93; }
.band--quiet { background: var(--bu-tint-14); color: var(--c-ink); }
.band--quiet .band__k { border-top-color: var(--bu-accent); opacity: 1; color: var(--bu-ink, var(--bu-accent-text)); }

/* ---------- .duo — zwei Dinge, die einander bedingen ---------------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 780px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .duo--flip > :first-child { order: 2; }
}
.duo__face {
  background: var(--bu-surface, var(--bu-accent));
  color: #FFFFFF;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
}
.duo__face h3 { color: #FFFFFF; margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.duo__face p  { margin: 0; opacity: .92; }
.duo__body { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--c-bg); }
.duo__body > :first-child { margin-top: 0; }
.duo__body > :last-child  { margin-bottom: 0; }

/* ---------- .figures — Zahlen ohne Rahmen ----------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.figure { border-top: 3px solid var(--bu-accent); padding-top: .9rem; min-width: 0; }
.figure__n {
  display: block;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bu-ink, var(--bu-accent-text));
  font-variant-numeric: tabular-nums;
}
.figure__l { display: block; margin-top: .55rem; color: var(--c-ink-2); overflow-wrap: break-word; }
.figure__s { display: block; margin-top: .3rem; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------- .ledger — Aufstellung mit Linien statt Kaesten ------------ */
.ledger { margin-block: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--c-line); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 760px) {
  .ledger__row { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) minmax(0, auto); align-items: baseline; }
}
.ledger__k { font-weight: 600; color: var(--c-ink); min-width: 0; }
.ledger__v { color: var(--c-ink-2); min-width: 0; overflow-wrap: break-word; }
.ledger__t {
  font-size: var(--fs-sm);
  color: var(--bu-ink, var(--bu-accent-text));
  white-space: nowrap;
  border-left: 2px solid var(--bu-accent);
  padding-left: .6rem;
}
.ledger__row:hover { background: var(--bu-tint-04); }

/* ---------- .pull — ein Satz, der haengen bleibt ---------------------- */
.pull {
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 5px solid var(--bu-accent);
  max-width: 46ch;
}
.pull__q {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.pull__by { display: block; margin-top: .8rem; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------- .rail — Reihenfolge mit sichtbarem Ruecken ---------------- */
.rail { margin-block: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 0; }
.rail__step {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 0 0 1.75rem;
  position: relative;
}
.rail__step::before {
  content: "";
  position: absolute;
  left: calc(1.4rem - 1px);
  top: 2.8rem;
  bottom: 0;
  width: 2px;
  background: var(--bu-edge);
}
.rail__step:last-child::before { display: none; }
.rail__n {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bu-surface, var(--bu-accent));
  color: #FFFFFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rail__b { min-width: 0; padding-top: .35rem; }
.rail__b > :first-child { margin-top: 0; }
.rail__b h3 { font-size: var(--fs-md); margin: 0 0 .4rem; }
.rail__b p  { margin: 0; color: var(--c-ink-2); overflow-wrap: break-word; }

/* ---------- .notch — Einschub mit gekappter Ecke ---------------------- */
.notch {
  background: var(--bu-tint-08);
  border-left: 4px solid var(--bu-accent);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
}
.notch__k {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bu-ink, var(--bu-accent-text));
  margin-bottom: .5rem;
}
.notch > :last-child { margin-bottom: 0; }

/* ---------- .compare — zwei Zustaende gegeneinander ------------------- */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 720px) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.compare__side { background: var(--c-bg); padding: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.compare__side--after { background: var(--bu-tint-08); }
.compare__k {
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
  margin-bottom: .6rem;
}
.compare__side--after .compare__k { color: var(--bu-ink, var(--bu-accent-text)); }
.compare__side p { margin: 0 0 .7rem; color: var(--c-ink-2); overflow-wrap: break-word; }
.compare__side > :last-child { margin-bottom: 0; }

/* ---------- .stagger — Kacheln, die aus der Reihe tanzen -------------- */
.stagger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.stagger > * { min-width: 0; }
@media (min-width: 900px) {
  .stagger > :nth-child(even) { transform: translateY(1.75rem); }
}

/* ---------- .stripe — schmaler Akzent statt Ueberschriftlinie --------- */
.stripe { position: relative; padding-top: 1.1rem; }
.stripe::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 3.5rem; height: 4px;
  background: var(--bu-accent);
}

/* ---------- dunkle Sektionen: dieselben Formen, andere Rollen -------- */
.sec--deep .figure,
.on-dark .figure { border-top-color: var(--bu-accent-dark); }
.sec--deep .figure__n,
.on-dark .figure__n { color: var(--bu-accent-dark); }
.sec--deep .figure__l,
.on-dark .figure__l { color: rgba(255,255,255,.86); }
.sec--deep .figure__s,
.on-dark .figure__s { color: rgba(255,255,255,.66); }
.sec--deep .pull,
.on-dark .pull { border-left-color: var(--bu-accent-dark); }
.sec--deep .pull__q,
.on-dark .pull__q { color: #FFFFFF; }
.sec--deep .ledger,
.on-dark .ledger { border-top-color: rgba(255,255,255,.22); }
.sec--deep .ledger__row,
.on-dark .ledger__row { border-bottom-color: rgba(255,255,255,.22); }
.sec--deep .ledger__k,
.on-dark .ledger__k { color: #FFFFFF; }
.sec--deep .ledger__v,
.on-dark .ledger__v { color: rgba(255,255,255,.86); }
.sec--deep .ledger__t,
.on-dark .ledger__t { color: var(--bu-accent-dark); border-left-color: var(--bu-accent-dark); }
.sec--deep .ledger__row:hover,
.on-dark .ledger__row:hover { background: rgba(255,255,255,.05); }
.sec--deep .stripe::before,
.on-dark .stripe::before { background: var(--bu-accent-dark); }

/* ---------- Bewegung nur, wenn erwuenscht ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stagger > :nth-child(even) { transform: none; }
}