/* ==========================================================================
   Baustein: Preistabelle (Sektion 5, Preise)
   Datei: css/bausteine/preis-tabelle.css
   Gebraucht auf: work-zone.html (#abrufbudget, Fläche Weiß)
   Bauvorschrift: DESIGN.md, Baustein "Preistabelle"
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.

   Stand 2026-09-29, neu für work-zone.html. Inhalt und Darstellung nach
   .agents/product-marketing.md v9.2, "Darstellung auf der Website": eine Tabelle mit vier
   Spalten und denselben Zeilen (Tagessatz, Reaktionszeit, Work Zone, Laufzeit), Gold
   markiert als "empfohlen bei planbarem Bedarf", das Onboarding einmal darüber, Flexi mit
   Silber direkt neben Gold (Decoy). Vorlage war der Preisstufen-Vergleich aus
   docs/archiv/DESIGN-v1.6-2026-09-14.md (weiße Karten, empfohlene Stufe hervorgehoben).
   Seit 2026-11-02 (Weisung Christian Hansmann) ohne die Beispiele je Jahr. Seit 2026-11-06
   steht unter Flexi Plus und Flexi Priority die Staffel als eigene Kachel (Ziel des
   Sternchens im Tagessatz), Dedicated trägt einen Aufkleber statt des Pfeils.

   Aufbau: Jede Stufe ist eine eigene Karte (article mit h3 und dl), damit Screenreader und
   das Handy eine Stufe am Stück lesen. Ab 1201 px stehen die vier Karten neben einer Spalte
   mit den Zeilennamen und teilen sich über grid-template-rows: subgrid dieselben Zeilen, so
   dass die Zeilen durchlaufen wie in einer Tabelle. Die Zeilennamen stehen in jeder Karte
   als dt, sind dort aber nur für Screenreader da; die sichtbare Spalte ist aria-hidden.
   Bis 1200 px zwei Karten je Reihe, die dt stehen sichtbar über ihrem Wert, die Zeilen
   laufen weiter paarweise durch. Bis 640 px eine Karte unter der anderen.
   Ohne subgrid (alte Browser) stehen die Zeilen je Karte untereinander, nur nicht auf
   gleicher Höhe. Kein Skript.
   ========================================================================== */

/* Präfix: .preis-* */

/* Umbruch der H2 im Split-Kopf: "Vier Wege, unsere Entwickler abzurufen, abgerechnet nach
   Leistung." ließ in der schmaleren linken Spalte "Leistung." allein in der letzten Zeile
   stehen. Eigene Klasse an der H2 wie .kpi-title in den Kennzahlen, keine Regel auf
   .display-2 (docs/entwicklung.md, Regel 4). */
.preis-titel { text-wrap: balance; }

/* --------------------------------------------------------------------------
   1. Raster: Onboarding-Zeile, Zeilennamen, vier Karten
   -------------------------------------------------------------------------- */
/* Zeilen des Rasters: 1 Onboarding, 2 Abstand, 3 bis 7 die Karten (Kopf, vier Werte),
   8 Abstand, 9 Staffel und Pfeil. Die Abstände sind eigene Zeilen statt row-gap, weil die
   Karten per subgrid die Zeilen des Rasters übernehmen und ein row-gap mit ihnen erben
   würden. */
.preis-tabelle {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(150px, .7fr) repeat(4, minmax(0, 1fr));
  grid-template-rows: auto var(--gap) repeat(5, auto) var(--gap) auto;
  column-gap: var(--gap);
  row-gap: 0;
}

/* Onboarding: gilt für alle vier Stufen und steht deshalb einmal über ihnen, auf der Breite
   der Karten. Hell auf Weiß wie die Karten. */
.preis-start {
  grid-column: 2 / -1;
  grid-row: 1;
  padding: 20px 24px;
  background: var(--paper);
  border-radius: var(--r-xl);
}
.preis-start strong { color: var(--ink); }

/* Spalte mit den Zeilennamen, nur ab 1201 px. aria-hidden im Markup, die Namen stehen für
   Screenreader als dt in jeder Karte. */
.preis-zeilen {
  grid-column: 1;
  grid-row: 3 / span 5;
  display: grid;
  grid-template-rows: subgrid;
}
.preis-zeile {
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.preis-zeile--kopf { border-top: 0; }

/* --------------------------------------------------------------------------
   2. Karte je Stufe
      Die Sektion steht seit dem 2026-09-29 auf Weiß (Weisung Christian Hansmann), die
      Karten deshalb in --paper: Karten stehen auf der jeweils anderen hellen Fläche
      (DESIGN.md). Text auf --paper: --body 5.22, --muted 4.56.
   -------------------------------------------------------------------------- */
.preis-karte {
  grid-row: 3 / span 5;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 0 24px;
  background: var(--paper);
  border-radius: var(--r-xl);
}
.preis-kopf { grid-row: 1; padding: 24px 0 18px; }
.preis-name { color: var(--ink); }
/* Die Werte teilen sich die Zeilen der Karte, also noch einmal subgrid: Zeilen 2 bis 5. */
.preis-werte {
  grid-row: 2 / span 4;
  margin: 0;
  display: grid;
  grid-template-rows: subgrid;
}
.preis-wert {
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.preis-wert:last-child { padding-bottom: 24px; }
.preis-wert dd { margin: 0; }
/* Ein Wert besteht aus Zeilen: Betrag oder Frist fett in --ink, darunter die Bedingung. */
.preis-wert dd > strong,
.preis-wert dd > span,
.preis-wert dd > s { display: block; }
.preis-wert strong { color: var(--ink); font-weight: 700; }
/* Alter Preis der Work Zone, durchgestrichen über dem neuen. --muted auf --paper 4.56. */
.preis-wert dd > s { color: var(--muted); }

/* Zeilenname in der Karte (dt): ab 1201 px nur für Screenreader. .preis-sr bleibt es immer,
   etwa das "statt" vor dem durchgestrichenen Preis, das Screenreader sonst nicht ansagen. */
.preis-merkmal,
.preis-sr {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Sternchen hinter "ab 1.000 €": Link auf die Staffel-Kachel, Farbe vom Betrag. */
.preis-stern { margin-left: 1px; color: inherit; text-decoration: none; }
.preis-stern:hover { color: var(--blue); }

/* Staffel des Tagessatzes: Spanne links, Betrag rechts. Bricht um, wenn die Kachel zu
   schmal wird, statt sie aufzuziehen. */
.preis-staffel {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.preis-staffel li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px;
}
/* Nachsatz unter einem Wert oder Betrag, etwa "im ersten Jahr kostenlos" */
.preis-hinweis {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Gold: die empfohlene Stufe in Ink
      Die Karte trägt die Fläche --ink wie die dunklen Karten des Angebots-Stapels. Der
      Vermerk "Empfohlen bei planbarem Bedarf" steht in --yellow, auf Ink ist Gelb Signal
      (9.38). Text nach den Werten für Ink aus DESIGN.md: Name und Beträge Weiß (18.89),
      Bedingungen --body-dark (8.09), Zeilennamen und Nachsätze --muted-dark (6.07). Linien
      Weiß mit .18 wie die Porträtrahmen der dunklen Stapelkarten.
   -------------------------------------------------------------------------- */
.preis-karte--gold { position: relative; background: var(--ink); }
.preis-karte--gold .preis-name,
.preis-karte--gold .preis-wert strong { color: var(--white); }
.preis-karte--gold .preis-wert dd { color: var(--body-dark); }
.preis-karte--gold .preis-wert { border-top-color: rgba(255,255,255,.18); }
.preis-karte--gold .preis-merkmal,
.preis-karte--gold .preis-wert dd > s,
.preis-karte--gold .preis-hinweis { color: var(--muted-dark); }
.preis-karte--gold .preis-stern:hover { color: var(--yellow); }
.preis-empfehlung { margin-top: 10px; color: var(--yellow); }

/* Aufkleber auf Dedicated: runde Fläche in --yellow mit Text in --ink (9.38), leicht
   gedreht, über der rechten oberen Ecke der Karte. Ragt 24 px nach oben, also über den
   Abstand in den unteren Innenabstand der Fläche darüber, und 16 px nach rechts in den
   Seitenrand (--pad-x ist mindestens 28 px). Steht still, auch ohne reduzierte Bewegung. */
.preis-aufkleber {
  position: absolute;
  top: -24px; right: -16px;
  display: grid; place-items: center;
  width: 88px; height: 88px;
  padding: 10px;
  background: var(--yellow);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-label-cta);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  transform: rotate(-8deg);
}
/* Der Aufkleber reicht 48 px in den Inhalt der Karte, Name und Vermerk halten rechts
   52 px frei und brechen davor um. */
.preis-karte--gold .preis-kopf { padding-right: 52px; }

/* --------------------------------------------------------------------------
   4. Unter den Karten: Staffel-Kachel
      Ab 1201 px bündig unter Flexi Plus und Flexi Priority, für die sie gilt.
   -------------------------------------------------------------------------- */
.preis-staffel-kachel {
  grid-column: 3 / span 2;
  grid-row: 9;
  padding: 20px 24px 22px;
  background: var(--paper);
  border-radius: var(--r-xl);
}
.preis-staffel-titel { margin-bottom: 12px; color: var(--ink); }
.preis-staffel-kachel .preis-staffel { max-width: 22em; }
.preis-staffel-kachel .preis-hinweis { max-width: 36em; }

/* --------------------------------------------------------------------------
   5. Unter der Tabelle: Zeitanker, Kleingedrucktes, Bestandskunden, Button
   -------------------------------------------------------------------------- */

/* Zweiter Anker für die Zeit: 8 Geschäftsstunden neben dem anonymen O-Ton. Hell auf Weiß wie
   die Karten, links der Wert, rechts das Zitat. */
.preis-anker {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px var(--gap-col);
  align-items: center;
  padding: 32px;
  background: var(--paper);
  border-radius: var(--r-xl);
}
/* Die Ziffer in display-3, die Einheit daneben in heading-m: "Geschäftsstunden" als
   display-3 liefe unter 640 px über die Zeile. */
.preis-anker-wert {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
  color: var(--ink);
}
.preis-anker-text { margin-top: 12px; max-width: 32em; }
/* Kundenzitat nach der Vorlage in DESIGN v1.6: Zitat in heading-s und --ink, links eine
   Linie in --blue über die volle Höhe, darunter die Zeile in .label und --muted. Anonym bis
   zur Freigabe (docs/freigaben.md). */
.preis-zitat {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--blue);
}
.preis-zitat blockquote { margin: 0; max-width: 620px; color: var(--ink); }
.preis-zitat figcaption { margin-top: 20px; color: var(--muted); }

.preis-klein { margin-top: 32px; max-width: 760px; color: var(--muted); }
.preis-bestand { margin-top: 16px; max-width: 760px; }
.preis-aktion { margin-top: 36px; display: flex; flex-wrap: wrap; gap: var(--gap); }

/* --------------------------------------------------------------------------
   6. Breakpoint 1200 px: zwei Karten je Reihe, Zeilennamen in den Karten
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Zwei Reihen zu je fünf Zeilen, dazwischen eine Abstandszeile. Die Reihen laufen
     paarweise durch: Flexi Light neben Flexi Plus, Flexi Priority neben Dedicated. Darunter
     die Staffel unter Flexi Priority. */
  .preis-tabelle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto var(--gap) repeat(5, auto) var(--gap) repeat(5, auto) var(--gap) auto;
  }
  .preis-start { grid-column: 1 / -1; }
  .preis-zeilen { display: none; }
  .preis-karte:nth-of-type(n+3) { grid-row: 9 / span 5; }
  .preis-staffel-kachel { grid-column: 1 / span 1; grid-row: 15; }

  .preis-merkmal {
    position: static;
    width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none;
    white-space: normal;
  }
  .preis-merkmal { display: block; margin-bottom: 8px; color: var(--muted); }

  .preis-anker { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   7. Breakpoint 640 px: eine Karte unter der anderen
      Die Staffel steht im Quelltext nach Flexi Priority und damit vor Dedicated.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .preis-tabelle {
    margin-top: 48px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--gap);
  }
  .preis-start { grid-row: auto; padding: 18px 20px; }
  .preis-karte,
  .preis-karte:nth-of-type(n+3),
  .preis-staffel-kachel {
    grid-row: auto;
    grid-column: auto;
  }
  .preis-karte,
  .preis-karte:nth-of-type(n+3) {
    grid-template-rows: none;
    display: block;
    padding: 0 20px;
  }
  .preis-werte { display: block; }
  .preis-kopf { padding: 20px 0 14px; }
  .preis-wert:last-child { padding-bottom: 20px; }

  .preis-staffel-kachel { padding: 18px 20px 20px; }
  .preis-anker { padding: 24px 20px; }
}