/* =======================================================================
   MEDVICE Kundenportal — portal.css        data-medvice-portal-css=v1
   -----------------------------------------------------------------------
   Nur das, was medvice.css nicht hat: der Rahmen des Portals und die
   Auswertungs-Bausteine (Messleiste, Stufe, Fortschritt, Kennzeile).
   Ausschliesslich Tokens aus medvice.css (keine eigenen Farbwerte),
   Schriftgroessen aus der Skala, Abstaende aus dem 4er-Raster.
   Die Auswertungs-Bausteine sind Kandidaten fuer medvice.css, sobald das
   interne Eval-Tool sie auch nutzt.
   ======================================================================= */

html { background: var(--bg) }
body { min-height: 100vh; display: flex; flex-direction: column }
#app { flex: 1; display: flex; flex-direction: column }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px }

/* ── Rahmen ─────────────────────────────────────────────────────────── */
.topbar .brand { cursor: default }
.pt-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sp-xl); flex: 1 }
.pt-kopf { display: flex; align-items: flex-end; gap: var(--sp-xl); margin-bottom: var(--sp-xl) }
.pt-kopf .pt-kopf-text { flex: 1; min-width: 0 }
.pt-kopf h1 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; color: var(--dk);
  margin: var(--sp-xs) 0 var(--sp-sm) }
.pt-kopf .lead { font-size: var(--fs-body); color: var(--gr); line-height: 1.6 }
.pt-kopf .pt-standort { width: 260px; flex-shrink: 0 }
.pt-kopf .pt-standort label { display: block; font-size: var(--fs-label); font-weight: 700; color: var(--gr);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px }

.pt-reiter { border: 1px solid var(--brd); border-radius: var(--r-md); overflow: hidden;
  position: static; margin-bottom: var(--sp-xl) }
.pt-reiter .tab .pt-anz { font-weight: 800; color: var(--pg); margin-left: var(--sp-xs) }

.pt-fuss { max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--sp-lg) var(--sp-xl) var(--sp-xl);
  font-size: var(--fs-caption); color: var(--gr); display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-lg);
  align-items: center; border-top: 1px solid var(--brd-lt) }
.pt-fuss .pt-fuss-rechts { margin-left: auto; display: flex; gap: var(--sp-lg) }
.pt-fuss a, .pt-link { color: var(--gr); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer }
.pt-fuss a:hover, .pt-link:hover { color: var(--pg) }

.pt-stapel { display: flex; flex-direction: column; gap: var(--sp-xl) }
.pt-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-xl); align-items: start }
.pt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-lg) }
.pt-kpis .kpi-value { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap }
.pt-kpis .kpi-value .pt-stufe { transform: translateY(-6px) }
.pt-kpis .kpi-value.pt-datum { font-size: var(--fs-h2) }
.card > .card-header { display: flex; align-items: baseline; gap: var(--sp-md) }
.card > .card-header .card-title { flex: 1 }
.card > .card-header .caption { margin: 0 }
.pt-abschnitt { font-size: var(--fs-eyebrow); font-weight: 800; color: var(--gr); text-transform: uppercase;
  letter-spacing: .12em; margin: var(--sp-xl) 0 var(--sp-md) }
.pt-abschnitt:first-child { margin-top: 0 }

/* ── Stufe (gering / erhoeht / hoch / kritisch): immer Wort plus Farbe ─ */
.pt-stufe { display: inline-block; padding: 3px 9px; border-radius: var(--r-sm); font-size: var(--fs-label);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; line-height: 1.4 }
.pt-stufe.gering   { background: var(--okbg);      color: var(--pg) }
.pt-stufe.erhoeht  { background: var(--warnbg);    color: var(--warntxt) }
.pt-stufe.hoch     { background: var(--cautionbg); color: var(--caution) }
.pt-stufe.kritisch { background: var(--red-bg);    color: var(--red) }
.pt-stufe.gesperrt { background: var(--brd-lt);    color: var(--gr) }

/* ── Messleiste: Name, Balken auf gemeinsamer Skala mit Schwellen, Wert ─ */
.pt-meter { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 56px 92px;
  gap: var(--sp-md); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--brd-lt) }
.pt-meters .pt-meter:last-child { border-bottom: none }
.pt-meter .pt-name { font-size: var(--fs-body); font-weight: 600; color: var(--dk); line-height: 1.35 }
.pt-meter .pt-name small { display: block; font-size: var(--fs-caption); font-weight: 500; color: var(--gr); margin-top: 2px }
.pt-meter .pt-wert { font-size: var(--fs-strong); font-weight: 800; color: var(--dk); text-align: right;
  font-variant-numeric: tabular-nums }
.pt-meter .pt-wert small { font-size: var(--fs-caption); font-weight: 600; color: var(--gr) }
.pt-meter.gesamt .pt-name { font-weight: 800 }
.pt-meter.gestapelt, .pt-achse.gestapelt { grid-template-columns: minmax(0, 1fr) 56px 92px }
.pt-meter.gestapelt .pt-name { grid-column: 1 / -1 }
.pt-achse.gestapelt > div { grid-column: 1 }
.pt-spur { position: relative; height: 14px; background: var(--brd-lt); border-radius: 0 4px 4px 0 }
.pt-spur.gering   { background: var(--okbg) }
.pt-spur.erhoeht  { background: var(--warnbg) }
.pt-spur.hoch     { background: var(--cautionbg) }
.pt-spur.kritisch { background: var(--red-bg) }
.pt-spur > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; min-width: 2px }
.pt-spur.gering   > i { background: var(--pg) }
.pt-spur.erhoeht  > i { background: var(--warn) }
.pt-spur.hoch     > i { background: var(--caution) }
.pt-spur.kritisch > i { background: var(--red) }
.pt-spur > b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--gr-lt) }
.pt-spur > u { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--r-pill);
  background: var(--dk); border: 2px solid var(--wh); box-sizing: content-box; text-decoration: none }
.pt-spur.schmal { height: 8px }
.pt-achse { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 56px 92px; gap: var(--sp-md);
  margin-top: var(--sp-xs) }
.pt-achse > div { position: relative; height: 16px; grid-column: 2 }
.pt-achse span { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--fs-eyebrow);
  font-weight: 700; color: var(--gr); font-variant-numeric: tabular-nums; white-space: nowrap }
.pt-achse span:first-child { transform: none }
.pt-achse span:last-child { transform: translateX(-100%) }
.pt-fussnote { margin-top: var(--sp-md) }
.pt-legende { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); margin-top: var(--sp-lg);
  font-size: var(--fs-caption); color: var(--gr); align-items: center }
.pt-legende .pt-leg { display: inline-flex; align-items: center; gap: 6px }
.pt-legende .pt-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block }
.pt-legende .pt-leg i.rund { border-radius: var(--r-pill) }
.pt-leg i.gering { background: var(--pg) } .pt-leg i.erhoeht { background: var(--warn) }
.pt-leg i.hoch { background: var(--caution) } .pt-leg i.kritisch { background: var(--red) }
.pt-leg i.punkt { background: var(--dk) }
.pt-leg i.s-erledigt { background: var(--pg) } .pt-leg i.s-in_arbeit { background: var(--info) }
.pt-leg i.s-offen { background: var(--gr-lt) } .pt-leg i.s-frist { background: var(--red) }
.pt-leg i.s-verworfen { background: var(--wh); border: 1px solid var(--gr-lt) }

/* ── Fortschritt: ein Ganzes, in Teile geteilt ──────────────────────── */
.pt-teile { display: flex; gap: 2px; height: 28px }
.pt-teile > div { border-radius: 4px; min-width: 6px; display: flex; align-items: center; padding: 0 var(--sp-sm);
  font-size: var(--fs-caption); font-weight: 800; overflow: visible; white-space: nowrap }
.pt-teile .s-erledigt  { background: var(--pg);    color: var(--wh) }
.pt-teile .s-in_arbeit { background: var(--info);  color: var(--wh) }
.pt-teile .s-offen     { background: var(--gr-lt); color: var(--dk) }
.pt-teile .s-frist     { background: var(--red);   color: var(--wh) }
.pt-teile .s-verworfen { background: var(--wh); border: 1px solid var(--gr-lt); color: var(--gr) }

/* ── Zeilenlisten ───────────────────────────────────────────────────── */
.pt-zeilen { display: flex; flex-direction: column }
.pt-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-md); align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--brd-lt) }
.pt-zeile:last-child { border-bottom: none }
.pt-zeile .pt-z-titel { font-size: var(--fs-body); font-weight: 600; color: var(--dk); line-height: 1.4 }
.pt-zeile .pt-z-meta { font-size: var(--fs-caption); color: var(--gr); margin-top: 2px; line-height: 1.5 }
.pt-zeile .pt-z-rechts { text-align: right; font-size: var(--fs-caption); color: var(--gr); white-space: nowrap }
.pt-zeile .pt-z-rechts strong { display: block; font-size: var(--fs-strong); font-weight: 800; color: var(--dk);
  font-variant-numeric: tabular-nums }
.pt-nr { width: 34px; font-size: var(--fs-caption); font-weight: 700; color: var(--gr) }
.pt-rot, .pt-zeile .pt-z-rechts.pt-rot, .pt-zeile .pt-z-meta.pt-rot { color: var(--red); font-weight: 700 }
.pt-leer { padding: var(--sp-xl) 0; text-align: center; color: var(--gr); font-size: var(--fs-body); line-height: 1.6 }
.pt-leer strong { display: block; color: var(--dk); font-weight: 700; margin-bottom: var(--sp-xs) }

/* ── Tabelle Belastungsprofil ───────────────────────────────────────── */
.pt-werkzeug { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-lg) }
.pt-werkzeug .segbar { flex: 0 0 auto }
.pt-werkzeug .seg-item { flex: 0 0 auto; padding: 6px 14px }
.pt-werkzeug .caption { margin-left: auto }
table.data.pt-items td { vertical-align: middle }
table.data.pt-items td.pt-aussage { font-weight: 500; line-height: 1.4 }
table.data.pt-items td.pt-balken { width: 30% ; min-width: 160px }
table.data.pt-items td.pt-zelle, table.data.pt-items th.pt-zelle { text-align: center; width: 92px }
table.data.pt-items tr.pt-dim td { background: var(--bg); font-size: var(--fs-label); font-weight: 800; color: var(--pg);
  text-transform: uppercase; letter-spacing: .05em; padding-top: var(--sp-md); padding-bottom: var(--sp-md) }
table.data.pt-items tr.pt-dim:hover { background: var(--bg) }
table.data.pt-items th small { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 2px }
.pt-chip { display: inline-block; min-width: 64px; padding: 4px 8px; border-radius: var(--r-sm); font-size: var(--fs-caption);
  font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap }
.pt-chip.gering   { background: var(--okbg);      color: var(--pg) }
.pt-chip.erhoeht  { background: var(--warnbg);    color: var(--warntxt) }
.pt-chip.hoch     { background: var(--cautionbg); color: var(--caution) }
.pt-chip.kritisch { background: var(--red-bg);    color: var(--red) }
.pt-chip.gesperrt { background: var(--brd-lt);    color: var(--gr) }

/* ── Massnahmen ─────────────────────────────────────────────────────── */
.pt-filter { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-lg) }
.pt-mn { background: var(--wh); border: 1px solid var(--brd); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-lg) var(--sp-xl); display: grid;
  grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-xl); align-items: start }
.pt-mn.nur-lesen { grid-template-columns: minmax(0, 1fr) auto }
.pt-mn-liste { display: flex; flex-direction: column; gap: var(--sp-md) }
.pt-mn h3 { font-size: var(--fs-strong); font-weight: 700; color: var(--dk); line-height: 1.4; margin-bottom: var(--sp-sm) }
.pt-mn .pt-mn-meta { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-lg); font-size: var(--fs-caption);
  color: var(--gr); line-height: 1.6 }
.pt-mn .pt-mn-meta b { font-weight: 700; color: var(--dk) }
.pt-mn .pt-mn-hinweis { margin-top: var(--sp-sm); font-size: var(--fs-caption); color: var(--gr); line-height: 1.5 }
.pt-mn .pt-mn-anm { margin-top: var(--sp-md); padding: var(--sp-sm) var(--sp-md); background: var(--bg);
  border-radius: var(--r-sm); font-size: var(--fs-caption); color: var(--dk); line-height: 1.5; white-space: pre-wrap }
.pt-mn .pt-mn-anm .label { display: block; margin-bottom: 2px }
.pt-mn .pt-mn-stand { margin-top: var(--sp-sm); font-size: var(--fs-caption); color: var(--gr) }
.pt-mn .pt-mn-rechts .label { display: block; margin-bottom: 5px }
.pt-mn .pt-mn-rechts .segbar { margin-bottom: var(--sp-md) }
.pt-mn .pt-mn-rechts textarea.form { min-height: 52px; font-size: var(--fs-caption) }
.pt-mn .pt-mn-aktion { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-md) }
.pt-mn .pt-mn-aktion .caption { margin-left: auto }
.pt-mn .pt-hinweisbox { grid-column: 1 / -1; margin: 0; justify-content: space-between }
.pt-mn .pt-hinweisbox .pt-link { color: inherit; font-weight: 700; white-space: nowrap }
.pt-frist { display: inline-flex; align-items: center; gap: var(--sp-xs) }
.pt-frist.ueber { color: var(--red); font-weight: 700 }
.pt-frist svg, .pt-icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -2px }
.pt-hinweisbox { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md); font-size: var(--fs-caption); line-height: 1.5; background: var(--infobg); color: var(--info) }
.pt-hinweisbox.warn { background: var(--warnbg); color: var(--warntxt) }
.pt-hinweisbox strong { font-weight: 800 }

/* ── Wortmeldungen ──────────────────────────────────────────────────── */
.pt-wm-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-xl); align-items: start }
.pt-wm { padding: var(--sp-md) 0; border-bottom: 1px solid var(--brd-lt) }
.pt-wm:last-child { border-bottom: none }
.pt-wm p { font-size: var(--fs-body); color: var(--dk); line-height: 1.55 }
.pt-wm .pt-z-meta { margin-top: var(--sp-xs) }

/* ── Dokumente ──────────────────────────────────────────────────────── */
.pt-dok-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--okbg); color: var(--pg);
  display: flex; align-items: center; justify-content: center }
.pt-dok-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round }

/* ── Anmeldung ──────────────────────────────────────────────────────── */
.pt-login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-xl); background: linear-gradient(180deg, var(--inp), var(--bg) 60%) }
.pt-login-karte { width: 100%; max-width: 420px; background: var(--wh); border: 1px solid var(--brd);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--sp-2xl) }
.pt-login-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: var(--sp-xl) }
.pt-login-logo svg { width: 44px; height: 44px; flex-shrink: 0 }
.pt-login-karte h1 { font-size: var(--fs-h3); font-weight: 800; color: var(--dk); margin-bottom: var(--sp-xs) }
.pt-login-karte .lead { font-size: var(--fs-body); color: var(--gr); line-height: 1.6; margin-bottom: var(--sp-xl) }
.pt-login-karte .btn { width: 100%; justify-content: center }
.pt-login-fuss { margin-top: var(--sp-xl); font-size: var(--fs-caption); color: var(--gr); text-align: center; line-height: 1.7;
  max-width: 420px }
.pt-login-fuss a { color: var(--gr); text-decoration: underline; text-underline-offset: 2px }
.pt-qr { display: flex; gap: var(--sp-lg); align-items: center; margin-bottom: var(--sp-lg) }
.pt-qr svg { width: 148px; height: 148px; flex-shrink: 0; color: var(--dk); border: 1px solid var(--brd); border-radius: var(--r-sm);
  padding: 6px; background: var(--wh) }
.pt-qr .caption { line-height: 1.6 }
.pt-geheim { font-size: var(--fs-caption); font-weight: 700; color: var(--dk); letter-spacing: .08em;
  font-variant-numeric: tabular-nums }
.pt-code { text-align: center; font-size: var(--fs-h3) !important; font-weight: 800; letter-spacing: .3em }
.pt-schritte { list-style: none; counter-reset: s; margin: 0 0 var(--sp-lg); padding: 0 }
.pt-schritte li { counter-increment: s; position: relative; padding-left: 28px; font-size: var(--fs-caption);
  color: var(--dk); line-height: 1.6; margin-bottom: var(--sp-sm) }
.pt-schritte li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border-radius: var(--r-pill); background: var(--okbg); color: var(--pg); font-size: var(--fs-eyebrow); font-weight: 800;
  display: flex; align-items: center; justify-content: center }

/* ── Hinweisfenster am Zeiger ───────────────────────────────────────── */
.pt-tip { position: fixed; z-index: 200; pointer-events: none; background: var(--dk); color: var(--wh);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--fs-caption); line-height: 1.45; max-width: 280px;
  box-shadow: var(--shadow-lg) }
.pt-tip strong { font-weight: 800; display: block }
[data-tip] { cursor: default }
.pt-spur[data-tip]:hover > i, .pt-teile > div[data-tip]:hover { filter: brightness(.94) }

/* ── Textseiten (Datenschutz, Impressum) ────────────────────────────── */
.pt-text { max-width: 760px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl) }
.pt-text h1 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: var(--sp-lg) }
.pt-text h2 { font-size: var(--fs-strong); font-weight: 800; margin: var(--sp-xl) 0 var(--sp-sm) }
.pt-text p, .pt-text li { font-size: var(--fs-body); line-height: 1.7; color: var(--dk); margin-bottom: var(--sp-sm) }
.pt-text ul { padding-left: var(--sp-xl) }
.pt-text .caption { margin-top: var(--sp-xl) }

/* ── Schmale Fenster ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pt-raster, .pt-wm-spalten { grid-template-columns: minmax(0, 1fr) }
  .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pt-kopf { flex-direction: column; align-items: stretch }
  .pt-kopf .pt-standort { width: 100% }
  .pt-mn, .pt-mn.nur-lesen { grid-template-columns: minmax(0, 1fr) }
  .pt-meter, .pt-achse { grid-template-columns: minmax(0, 1fr) 56px 92px }
  .pt-meter .pt-name { grid-column: 1 / -1 }
  .pt-achse > div { grid-column: 1 }
  .topbar { padding: 0 var(--sp-lg) }
  .user-details { display: none }
}
@media (max-width: 600px) {
  .pt-kpis { grid-template-columns: minmax(0, 1fr) }
  .pt-main { padding: var(--sp-lg) }
  .pt-reiter { overflow-x: auto }
  .pt-reiter .tab { flex: 0 0 auto; padding: 12px 14px }
  table.data.pt-items td.pt-balken { display: none }
  table.data.pt-items th.pt-balken { display: none }
}
@media print {
  .topbar-actions, .pt-reiter, .pt-fuss, .pt-filter, .pt-leiste, .pt-neu, .pt-mn-rechts,
  .pt-mn .pt-mn-stand .pt-link, .pt-rueckfrage { display: none !important }
  body { background: var(--wh) }
  .card, .pt-mn { box-shadow: none; break-inside: avoid }
}

/* ── Standorte im Vergleich ─────────────────────────────────────────── */
.pt-ort-block { padding: var(--sp-xs) 0 var(--sp-md); border-bottom: 1px solid var(--brd-lt) }
.pt-ort-block:last-child { border-bottom: none }
.pt-ort-block .pt-meter { border-bottom: none; padding-bottom: var(--sp-sm) }
.pt-ort { font-size: var(--fs-strong); font-weight: 700; color: var(--dk); text-align: left }
.pt-ort-zusatz { display: flex; flex-direction: column; gap: var(--sp-sm) }
.pt-ort-dims { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg) }
.pt-ort-dim { display: inline-flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-caption); color: var(--gr) }
.pt-ort-dim .pt-chip { min-width: 52px }
.pt-ort-mn { font-size: var(--fs-caption); color: var(--gr); white-space: nowrap }

/* ── Verbindungstest ────────────────────────────────────────────────── */
.pt-text .card { margin: var(--sp-lg) 0 }
.pt-text .pt-zeile .badge { min-width: 92px; text-align: center }
.pt-bericht { width: 100%; font-size: var(--fs-caption); line-height: 1.6; resize: vertical; margin-bottom: var(--sp-md) }
.pt-erklaerung { margin: calc(-1 * var(--sp-sm)) 0 0 }

/* Statuswahl: "In Umsetzung" bleibt einzeilig */
.pt-mn .segbar .seg-item { white-space: nowrap; padding-left: var(--sp-sm); padding-right: var(--sp-sm) }

/* ── Stufe 2: Massnahmen anlegen und bearbeiten ─────────────────────── */
.pt-leiste { display: flex; align-items: flex-start; gap: var(--sp-lg); margin-bottom: var(--sp-lg) }
.pt-leiste .pt-filter { flex: 1; margin-bottom: 0 }
.pt-leiste > .btn { flex-shrink: 0 }
.pt-form-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md) var(--sp-xl) }
.pt-form-raster .voll { grid-column: 1 / -1 }
.pt-form-raster .form-group { margin-bottom: 0 }
.pt-form-raster textarea.form { min-height: 76px }
.pt-form-aktion { display: flex; align-items: center; gap: var(--sp-lg); margin-top: var(--sp-lg) }
.pt-form-aktion .caption { margin-left: auto }
.pt-neu .form-error, .pt-mn-text .form-error { margin-top: var(--sp-md) }
.pt-mn h3 .badge { margin-left: var(--sp-sm); vertical-align: middle }
.pt-mn.bearbeiten { grid-template-columns: minmax(0, 1fr) }
.pt-mn .pt-mn-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-sm);
  margin-bottom: var(--sp-md) }
.pt-mn .pt-mn-zwei .form { font-size: var(--fs-caption); padding-left: var(--sp-sm); padding-right: var(--sp-sm) }
.pt-mn .pt-rueckfrage { align-items: center; gap: var(--sp-lg) }
.pt-mn .pt-rueckfrage-knoepfe { display: inline-flex; align-items: center; gap: var(--sp-lg); flex-shrink: 0 }
@media (max-width: 900px) {
  .pt-form-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 600px) {
  .pt-form-raster { grid-template-columns: minmax(0, 1fr) }
  .pt-leiste { flex-direction: column }
  .pt-mn .pt-rueckfrage { flex-direction: column; align-items: flex-start }
}