/* agora Website Relaunch v3: Bausteine nur für planaufmass.html und scan.html.
   Wird nach site.css geladen. Alle Werte kommen aus tokens.css, hier stehen keine eigenen Farben oder Schriften. */

/* ---------- Ablauf: nur für echte Reihenfolgen (wie in unterseiten-b.css) ---------- */
.ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2.5vw, 2rem); margin-top: 2.75rem; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; padding-top: 1rem; border-top: 1.5px solid var(--tinte); }
.ablauf li::before { content: counter(schritt); display: block; margin-bottom: 0.9rem; font: 500 var(--t-mittel) / 1 var(--mono); }
.ablauf h3 { font: 600 var(--t-text) / 1.3 var(--sans); }
.ablauf p { margin-top: 0.35rem; color: var(--grau); }
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ablauf { grid-template-columns: 1fr; } }

/* ---------- Nutzenpunkte: Spalten mit Linie, keine Karten ---------- */
.punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1rem, 3vw, 2.5rem); margin-top: 2.75rem; }
.punkte li { padding-top: 1rem; border-top: 1.5px solid var(--tinte); }
.punkte h3 { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.punkte p { margin-top: 0.5rem; max-width: 36ch; color: var(--grau); }
@media (max-width: 760px) { .punkte { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Geteilter Abschnitt: links Text, rechts Tabelle oder Kennwerte ---------- */
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.geteilt__text p:not(.vorspann) { margin-top: 1.1rem; max-width: 46ch; }
.geteilt__text .werkzeug__punkte { margin-top: 1.5rem; max-width: 46ch; }
.geteilt .plankopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .geteilt { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .geteilt .plankopf { grid-template-columns: 1fr; } }

/* ---------- Kennwerte ---------- */
.titel + .plankopf, .vorspann + .plankopf { margin-top: 2rem; }
.plankopf dd { overflow-wrap: anywhere; }
.plankopf--breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.geteilt .plankopf > .plankopf__breit { grid-column: 1 / -1; }
.hinweiszeile { margin-top: 1.1rem; max-width: 52rem; font-size: var(--t-klein); color: var(--grau); }

/* ---------- Aufmaßblatt: Zeile, Rechenansatz, Menge ---------- */
/* Der Rahmen meldet seine Breite, damit das Blatt auch in der schmalen Spalte neben dem Text umbricht. */
.blatt { container-type: inline-size; }
.blatt figcaption { padding-top: 0.85rem; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.aufmass { width: 100%; border-collapse: collapse; border: 1.5px solid var(--tinte); background: var(--weiss); text-align: left; }
.aufmass th, .aufmass td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.aufmass thead th { font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); background: var(--papier); }
.aufmass tbody th { font-weight: 500; }
.aufmass td { font: 500 1.05rem / 1.3 var(--mono); white-space: nowrap; }
.aufmass th:last-child, .aufmass td:last-child { text-align: right; }
.aufmass tfoot th, .aufmass tfoot td { border-bottom: 0; background: var(--tinte); color: var(--weiss); }
.aufmass tfoot th { font-weight: 500; }
.aufmass tfoot th::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--orange); }
.aufmass tfoot td { font-size: var(--t-mittel); }
/* Schmal: Bezeichnung über die ganze Breite, darunter Rechenansatz links und Menge rechts. Passt so bei 320 px ohne Querscrollen. */
@container (max-width: 28rem) {
  .aufmass, .aufmass tbody, .aufmass tfoot { display: block; }
  .aufmass thead { display: none; }
  .aufmass tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; align-items: baseline; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--linie); }
  .aufmass th, .aufmass td { padding: 0; border: 0; }
  .aufmass tbody th { grid-column: 1 / -1; }
  .aufmass td { font-size: 0.95rem; }
  .aufmass tfoot tr { border-bottom: 0; background: var(--tinte); }
  .aufmass tfoot td { font-size: 1.15rem; }
}

/* ---------- Preisliste: zwei Spalten, passt auch bei 320 px ---------- */
.preisliste { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--tinte); text-align: left; }
.preisliste caption { caption-side: bottom; padding-top: 0.85rem; text-align: left; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.preisliste th, .preisliste td { padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.preisliste thead th { font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.preisliste tbody th { font-weight: 500; overflow-wrap: anywhere; }
.preisliste th:last-child, .preisliste td:last-child { padding-right: 0; text-align: right; }
.preisliste td { font: 500 1.05rem / 1.3 var(--mono); white-space: nowrap; }
.preisliste__takt { display: block; font: 400 var(--t-klein) / 1.4 var(--sans); color: var(--grau); }

/* ---------- Übergang zu einem anderen Werkzeug ---------- */
.uebergang { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 52rem; border-top: 1.5px solid var(--tinte); }
.uebergang > * { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--linie); }
.uebergang .textlink { white-space: nowrap; }

/* Aufmaßblatt rechnet vor: Zeilen kommen nacheinander, die Summe rollt mit */
.aufmass tbody tr { transition: opacity 300ms var(--weich), translate 300ms var(--weich); }
.aufmass__zeile--warte { opacity: 0; translate: 0 4px; }