/* ==========================================================================
   100 preis-und-start · Owner: wdf-section-builder (Auftrag P7-100)
   Kopf → eine Produktkarte (Seiten-Stimme, kein .ui) → Kundenstimme + Textlink.
   Mobil und Tablet untereinander, ab 1024 Karte links (7), rechts (5) die vier Zusagen + Textlink, an der Kartenoberkante (P13-S3),
   darunter Beispiele + kurzer Beleg Reisser (zitat-kurz, P14-S6: K-CONV-05/K-VIS-04, Fach oben ausgerichtet statt gestreckt).
   H2 ohne Zahl (Alternative aus copy.md [^h100]): der Preis steht nur einmal groß, in der Karte (K-VIS-03).
   Das Zitat von Rolfsmeyer steht vollständig in 90 und ist hier entfallen (P9-5-Fmix).
   Karte in drei Gruppen: einmalig (Preis + Umfang) · laufend (99 € + Aufklapper + Steuerhinweis) ·
   Abschluss (Risiko-Punkte + Hauptaktion; ab 1024 stehen die Risiko-Punkte neben der Karte). Abstand zwischen Gruppen ≥ 2 × innerhalb.
   Türkis nur am Button und als Kontur der Häkchen (style-lock § 8); keine „Empfohlen“-Kante.
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

/* ---------- Abschnitt: Kopf, darunter Körper ---------- */
.preis__wrap { display: grid; gap: var(--space-stack); min-width: 0; }
.preis__body { display: grid; gap: var(--space-stack); align-items: start; min-width: 0; }

/* ---------- Karte ---------- */
.preis-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5) var(--s-3);
  background: var(--color-ui-window);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-l);
}

/* Gruppe 1: einmalig */
.preis-card__once { display: grid; gap: var(--s-2); min-width: 0; }
.preis-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--s-2);
}
.preis-card__amount {
  font-size: var(--fs-heading-2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.preis-card__unit { font-size: var(--fs-body); color: var(--color-text-muted); }
/* Umfang gegliedert (Wortlaut unverändert): Satz · „Enthalten“ als Liste mit Häkchen als Kontur · Beispiele (klein, gedämpft) ·
   „Größere Vorhaben …“ als eigene Zeile in normaler Schriftgröße und Farbe (copy.md § 0: nie als graue Fußnote, K-CONV-04). */
.preis-card__scope { display: grid; gap: var(--s-2); min-width: 0; }
.preis-card__lead, .preis-card__more { color: var(--color-text); }
/* Einleitungssatz mit Doppelpunkt (Wortlaut copy.md) führt die Liste ein; ein Punkt je Zeile, kein „Bau“ allein am Zeilenende (K-VIS-05) */
.preis-card__incl { display: grid; gap: var(--s-2); }
.preis-card__incl-list { display: grid; gap: var(--s-1); }
.preis-card__incl-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-2);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text);
}
.preis-card__incl-list .glyph { margin-top: var(--s-1); }

/* Gruppe 2: laufend, mit Haarlinie von Gruppe 1 getrennt */
.preis-card__monthly {
  display: grid; gap: var(--s-1);
  min-width: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-line);
}
.preis-card__tax { margin-top: var(--s-1); }

/* Aufklapper: Knopf im Textlink-Stil, Panel mit neutraler Linie links (ui.js setzt hidden) */
.preis-more { display: grid; min-width: 0; }
.preis-more__btn {
  justify-content: flex-start;
  min-width: 0;
  font-size: var(--fs-small);
  text-align: left;
  border-radius: var(--r-s);
}
.preis-more__btn .icon { color: var(--color-accent); }
.preis-more__panel {
  margin-block-end: var(--s-2);
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--color-line-strong);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@starting-style {
  .preis-more__panel { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-s))); }
}

/* Gruppe 3: Risiko-Punkte stehen über der Hauptaktion */
.preis-card__close { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
/* Bei 200 % Zoom oder 320 px darf die Beschriftung der Hauptaktion umbrechen, statt die Karte zu sprengen */
.preis-card__cta .btn { white-space: normal; padding-block: var(--s-2); }
.preis-risk__list { display: grid; gap: var(--s-2); }
.preis-risk__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-2);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}
.preis-risk__list .glyph { margin-top: var(--s-1); }

/* Zusagen: mobil in der Karte über der Hauptaktion, ab 768 als ruhige Liste neben der Karte (nur eine Fassung sichtbar) */
.preis-risk--side { display: none; }
/* Mikrozeile steht am Smartphone (390) einzeilig wie überall: Kartenrand 12 statt 16 px, Zeichenabstand wie Titel (Text bleibt, 14 px bleibt) */
.preis .cta .micro { text-wrap: balance; letter-spacing: var(--ls-title); }

/* ---------- Seite: Zusagen + Textlink. Mobil leer (Zusagen in der Karte, Textlink erst ab 768) und daher ganz aus dem Fluss ---------- */
.preis__side { display: none; gap: var(--s-2); align-content: start; min-width: 0; }
.preis__side .textlink { display: block; justify-self: start; text-wrap: balance; min-height: 0; padding-block: var(--s-3); font-size: var(--fs-small); }
.preis-risk__title { margin-block-end: var(--s-4); }
.preis__side .textlink .icon { display: inline-block; vertical-align: -3px; margin-inline-start: var(--s-1); }
/* Zweite Gruppe im rechten Fach (Beispiele + Beleg Reisser): erst ab 1024 (P14-S6). Mobil/Tablet stehen die Beispiele in der Karte. */
.preis__more { display: none; }

/* ---------- Tablet (768–1023): einspaltig. Zusagen bleiben in der Karte über dem Knopf, darunter der Textlink (K-VIS-04) ---------- */
@media (min-width: 768px) {
  .preis-card { padding: var(--s-5); }
  .preis__side { display: grid; }
  .preis-risk--side { display: none; }
}

/* ---------- Desktop: eine Karte in zwei Fächern. Links Preis und Hauptaktion (7), rechts die vier Zusagen (5) im selben Rahmen:
   gleiche Oberkante, gleiche Fläche, Haarlinie als Fachtrenner; Titel der Zusagen auf Höhe des Kartentitels, Textlink unten
   auf Höhe der Hauptaktion. Keine schwebende Spalte, keine Leerfläche neben der Karte (K-VIS-04). ---------- */
@media (min-width: 1024px) {
  .preis__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 0; }
  .preis-card {
    gap: var(--s-5);
    padding: var(--s-6);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end-color: var(--color-line);
  }
  .preis-card__monthly { padding-top: var(--s-5); }
  .preis-card__close { gap: var(--s-5); }
  .preis__side {
    align-self: stretch;
    align-content: start;
    gap: var(--s-2);
    padding: var(--s-6);
    background: var(--color-ui-window);
    border: 1px solid var(--color-line-strong);
    border-inline-start: 0;
    border-start-end-radius: var(--r-l);
    border-end-end-radius: var(--r-l);
  }
  .preis-risk--card { display: none; }
  .preis-risk--side { display: block; }
  .preis-risk--side .preis-risk__list { gap: var(--s-3); }
  /* Textlink direkt unter der Liste (P14-S6, K-VIS-04): Inhalt oben, keine gestreckte Leerfläche mehr */
  .preis__side .textlink { margin-top: var(--s-1); }
  /* Beispiele wandern aus der Karte ins rechte Fach: beide Fächer etwa gleich hoch. Haarlinie wie zwischen den Kartengruppen */
  .preis-card__examples--card { display: none; }
  .preis__more {
    display: grid;
    gap: var(--s-6);
    margin-top: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid var(--color-line);
  }
  .preis-card__examples--side { max-width: var(--measure-narrow); text-wrap: pretty; }
  .preis__quote p { text-wrap: balance; }
  /* Metazeile „Firma · Projektdauer“: Trennpunkt in der Lücke, am Zeilenanfang abgeschnitten (gleiches Muster wie Kontaktzeile in 120) */
  .preis__quote-meta { display: flex; flex-wrap: wrap; column-gap: var(--s-3); overflow: hidden; }
  .preis__quote-meta > * { position: relative; min-width: 0; }
  .preis__quote-meta > * + *::before {
    content: "·";
    content: "·" / "";
    position: absolute; inset-inline-end: 100%; inline-size: var(--s-3); text-align: center;
  }
  /* Beide Fächer gleich hoch: das jeweils kürzere streckt sich (Inhalt bleibt oben) */
  .preis__body { align-items: stretch; }
}

/* Sehr schmale Telefone: Kartenrand etwas enger, damit Preis und Button Platz haben */
@media (max-width: 359px) {
  .preis-card { padding: var(--s-4) var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .preis-more__panel { transform: none !important; transition-property: opacity !important; }
}

/* Ohne JavaScript steht der Aufklapper offen und sofort lesbar: kein Einblenden beim Laden (@starting-style oben greift sonst beim ersten Aufbau) */
html:not(.js) .preis-more__panel { transition: none; }