/* Seitenspezifische Stile fuer /funktionen/textdokumente/ -- nur diese Seite. */

/* --- Vorlage -> Dokument (nachgebauter Ausschnitt) ------------------------ */
.tpl-flow { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.tpl-flow__card { display: flex; flex-direction: column; }
.tpl-flow__arrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--accent); text-align: center;
}
.tpl-flow__arrow svg { flex: none; transform: rotate(90deg); }
.tpl-paper {
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.75; color: var(--text-strong);
}
.tpl-paper p { margin: 0; }
.tpl-paper__date { text-align: right; }
.tpl-paper__subject { font-weight: 600; color: var(--text-heading); }
.tpl-paper .chip { font-size: 11.5px; padding: 1px 8px; vertical-align: 1px; }
.tpl-filled {
  border-radius: 4px; padding: 0 2px;
  background: var(--accent-fill-soft); box-shadow: inset 0 -2px 0 var(--accent-border);
  color: var(--text-heading);
}

@media (min-width: 1024px) {
  .tpl-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .tpl-flow__arrow { flex-direction: column; max-width: 92px; }
  .tpl-flow__arrow svg { transform: none; }
}

/* --- Liste der Platzhalter ------------------------------------------------ */
.var-groups {
  margin: 18px 0 0; max-width: 900px;
  border-top: 1px solid var(--accent-border);
}
.var-groups > div {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--accent-border-s1);
}
.var-groups dt { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-heading); }
.var-groups dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.var-groups .chip { font-size: 13px; }
.var-note { font-size: 14px; color: var(--text-muted); }
@media (min-width: 720px) {
  .var-groups > div { grid-template-columns: 180px 1fr; gap: 24px; align-items: baseline; }
}

/* --- Hinweis "Variablen fehlen" im Editor-Mock --------------------------- */
.notice-gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
}
.notice-gate p { margin: 0; flex: 1 1 260px; font-size: 13px; line-height: 1.6; color: var(--warn-text); }
.notice-gate .mock__btn { border-color: var(--warn-border); color: var(--warn-text); }

/* --- Diagramm: breite und schmale Fassung --------------------------------- */
.td-diagram__narrow { display: block; max-width: 420px; margin: 0 auto; }
.td-diagram__wide { display: none; }
@media (min-width: 720px) {
  .td-diagram__narrow { display: none; }
  .td-diagram__wide { display: block; }
}
.figure--flow { max-width: 980px; }

/* Abstand fuer Fliesstext direkt nach Liste/Gegenueberstellung. */
.var-groups + .prose, .compare + .prose { margin-top: 20px; }