/* Musterseiten (vfrplan.de/muster/, erzeugt von scripts/musterseiten.js). Nur Tokens aus styles.css, damit hell/dunkel stimmt. */
.muster-seite { padding-bottom: 64px; }
.muster-seite > section, .muster-seite .muster-verwandt { margin-top: 44px; padding: 0; }
.muster-seite > section.kasten { padding: 20px 22px; }
.muster-seite section > h2, .muster-verwandt h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin-bottom: 14px; }
.muster-seite section > p { max-width: 74ch; }
.muster-seite section > p + p, .muster-seite section > div + p, .muster-seite section > p + div { margin-top: 12px; }

.krumen ol { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--muted); }
.krumen li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--faint); }
.krumen a { color: var(--muted); }

.muster-kopf { padding: 28px 0 8px; }
.muster-kopf h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 700; margin-top: 10px; max-width: 24ch; }
.muster-kopf .lead { font-size: clamp(16.5px, 1.8vw, 18.5px); max-width: 68ch; margin-top: 16px; }
.muster-kopf .acts { margin-top: 22px; }
.muster-variante { margin-top: 12px; font-size: 15px; max-width: 74ch; }
.gewaehr { margin-top: 18px; font-size: 14.5px; max-width: 74ch; border-left: 3px solid var(--warn-strong); background: var(--warn-bg);
  padding: 10px 14px; border-radius: 0 8px 8px 0; color: var(--text); }
.muster-diagramme { margin-top: 32px; }
.muster-diagramme h2 { font-size: 21px; margin-bottom: 6px; }

/* Tabellen: zweispaltig, auf dem Telefon ohne Querscrollen */
.muster-tab { max-width: 760px; }
.muster-tab table { min-width: 0; }
.muster-tab th[scope="row"] { width: 46%; font-weight: 500; color: var(--text); }
.muster-tab td { color: var(--ink); font-variant-numeric: tabular-nums; }
.muster-tab .fehlt { color: var(--muted); font-style: italic; }
.muster-tab caption { text-align: left; font: 600 12px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 0; }
.muster-tab--klein { max-width: 360px; }
.muster-tab--rechnung td:not(:first-child), .muster-tab--rechnung thead th:not(:first-child) { text-align: right; }
.muster-tab--rechnung .summe > * { border-top: 2px solid var(--rule-strong); font-weight: 600; color: var(--ink); }
.muster-tab--breit { max-width: none; }
.muster-tab--breit td:last-child { font-size: 14px; color: var(--muted); }
@media (max-width: 540px) {
  .muster-tab th, .muster-tab td { padding: 10px; font-size: 14px; }
  .muster-tab--breit table, .muster-tab--breit thead, .muster-tab--breit tbody, .muster-tab--breit tr, .muster-tab--breit td { display: block; }
  .muster-tab--breit thead { display: none; }
  .muster-tab--breit tr { border-bottom: 1px solid var(--rule); padding: 6px 0; }
  .muster-tab--breit td { border: 0; padding: 2px 12px; }
  .muster-tab--breit td:first-child { font-weight: 600; color: var(--ink); }
  .muster-tab--breit td:nth-child(2)::before { content: "TAS "; color: var(--muted); }
  .muster-tab--breit td:nth-child(3)::before { content: "Verbrauch "; color: var(--muted); }
}
.muster-details { margin-top: 14px; }
.muster-details summary { cursor: pointer; color: var(--brand-fg); font-weight: 500; }
.muster-punkte { display: flex; flex-wrap: wrap; gap: 16px; }

/* Hüllkurve (inline-SVG): Linien und Schrift aus den Tokens */
.huelle-bild { margin: 0; max-width: 760px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 14px 12px 10px; }
.huelle { display: block; width: 100%; height: auto; }
.huelle .raster { stroke: var(--rule); stroke-width: 1; }
.huelle .achsenlinie { stroke: var(--rule-strong); stroke-width: 1.5; }
.huelle .achse { fill: var(--muted); font: 400 12px var(--f-body); }
.huelle .achse--titel { fill: var(--text); font-weight: 500; }
.huelle-flaeche { fill: var(--brand-soft); stroke: var(--brand-fg); stroke-width: 2; stroke-linejoin: round; }
.huelle-flaeche--2 { fill: none; stroke-dasharray: 6 4; }
.huelle-punkt { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.huelle-marke { fill: var(--ink); font: 600 12.5px var(--f-body); }
.huelle-bild figcaption { font-size: 13.5px; color: var(--muted); margin: 8px 4px 0; }
.huelle-legende { list-style: none; margin: 0 0 6px; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--text); }
.huelle-legende li { display: inline-flex; align-items: center; gap: 8px; }
.huelle-muster { display: inline-block; width: 22px; height: 12px; border: 2px solid var(--brand-fg); border-radius: 2px; background: var(--brand-soft); }
.huelle-muster--2 { background: none; border-style: dashed; }
.huelle-muster--punkt { width: 12px; border-radius: 50%; border-color: var(--surface); background: var(--ink); box-shadow: 0 0 0 1px var(--rule-strong); }

.muster-weiter { max-width: none; }
.muster-weiter h2 { font-size: 24px; margin-bottom: 10px; }
.muster-schritte { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; max-width: 74ch; }
.muster-verwandt .muster a { text-decoration: none; color: var(--ink); }
.muster-verwandt .muster li:hover { border-color: var(--brand-fg); }

/* Übersicht */
.muster-suche { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.muster-suche label { font-weight: 600; color: var(--ink); }
.muster-suche input { font: inherit; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); width: min(100%, 340px); }
.muster-gruppe h2 .muster-anzahl { font: 500 15px var(--f-body); color: var(--muted); margin-left: 6px; }
.muster-gruppe { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.muster-gruppe > h2 { grid-column: 1 / -1; }
.muster-hersteller { padding: 14px 0; border-top: 1px solid var(--rule); }
.muster-hersteller h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.muster-hersteller ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.muster-hersteller a { font-weight: 500; }
.muster-meta { display: block; font-size: 13px; color: var(--muted); }