/* =============================================================================
   Planvion — Komponenten
   Eine Definition pro Baustein, kontextfrei, ohne !important.
   Gilt im Admin und im Frontend gleichermaßen — anders als die alten
   .wrap-gebundenen Regeln in button-style.css.
   Tokens kommen aus root-style.css (Design System v2).
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS
   Ersetzt die 15 selbst erfundenen Varianten (btn-cancel, btn-submit,
   btn-next, btn-back, btn-save, btn-reject, btn-accept, btn-main …).
   ───────────────────────────────────────────────────────────────────────── */
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pv-sp-2);
    padding: 11px 22px;
    border: var(--pv-bw-2) solid transparent;
    border-radius: var(--pv-r-sm);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-text-body);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.pv-btn:focus-visible { outline: 2px solid var(--pv-color-accent); outline-offset: 2px; }
.pv-btn[disabled], .pv-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Bewusst ohne Schatten: der Verlauf traegt den Knopf allein. Flach wirkt
   ruhiger, gerade wenn mehrere Knoepfe auf einer Seite stehen. */
.pv-btn--primary {
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-btn--primary:hover:not([disabled]) {
    background: var(--pv-accent-grad-hover);
    transform: translateY(-1px);
    color: #fff;
}
.pv-btn--primary:active { transform: translateY(0); }

.pv-btn--secondary {
    background: #fff;
    color: var(--pv-s-700);
    border-color: var(--pv-s-200);
}
.pv-btn--secondary:hover:not([disabled]) {
    background: var(--pv-s-50);
    border-color: var(--pv-s-300);
    transform: translateY(-1px);
    color: var(--pv-s-700);
}

.pv-btn--ghost { background: transparent; color: var(--pv-s-500); }
.pv-btn--ghost:hover:not([disabled]) { background: var(--pv-s-100); color: var(--pv-s-700); }

.pv-btn--danger { background: var(--pv-err); color: #fff; }
.pv-btn--danger:hover:not([disabled]) { background: var(--pv-err-press); transform: translateY(-1px); color: #fff; }

.pv-btn--sm { padding: 7px 14px; font-size: var(--pv-text-sm); border-radius: var(--pv-r-xs); }
.pv-btn--block { width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   FORMULARE
   ───────────────────────────────────────────────────────────────────────── */
/* Formularfelder heissen .pv-input — die Regel steht in admin-style.css,
   weil sie dort zusammen mit den generischen Selektoren fuer input/select/
   textarea sitzt und nur dort die noetige Spezifitaet erreicht. Hier nur die
   Zustaende, die dort fehlen. */
.pv-input:focus {
    outline: none;
    border-color: var(--pv-color-accent);
    box-shadow: 0 0 0 3px var(--pv-color-coral-20);
}
.pv-input[disabled] { background: var(--pv-s-50); color: var(--pv-s-400); cursor: not-allowed; }

.pv-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pv-s-700);
}
.pv-hint { margin-top: 6px; font-size: var(--pv-text-sm); color: var(--pv-s-400); }
.pv-form-group { display: flex; flex-direction: column; margin-bottom: var(--pv-sp-5); }
.pv-grid-2 { display: grid; gap: var(--pv-sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .pv-grid-2 { grid-template-columns: 1fr; } }

.pv-eyebrow {
    font-size: var(--pv-text-eyebrow);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pv-s-500);
}

/* Element-qualifiziert, weil admin-style.css `.pv-container h2 { display:block }`
   setzt — Spezifitaet 0,1,1 schlaegt eine reine Klasse 0,1,0. Ohne die
   folgenden Selektoren landet der Akzentbalken ueber statt neben dem Titel.
   Neu 2026-08-28: statt einer durchgehenden grauen Trennlinie traegt der Titel
   jetzt einen kurzen Korall-Unterstrich unter dem eigenen Text (::after) —
   der Pill-Balken links ist dafuer kraeftiger. `position:relative` noetig,
   damit sich der Unterstrich am Element selbst statt am naechsten
   Vorfahren mit Position ausrichtet. */
.pv-section-title,
h1.pv-section-title,
h2.pv-section-title,
h3.pv-section-title,
h4.pv-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    margin-bottom: var(--pv-sp-4);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-fs-title);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pv-color-text-primary);
}
.pv-section-title--lg,
h1.pv-section-title--lg,
h2.pv-section-title--lg,
h3.pv-section-title--lg,
h4.pv-section-title--lg {
    font-size: var(--pv-fs-section);
    font-weight: var(--pv-fw-section);
    letter-spacing: -.015em;
}
.pv-section-title::before {
    content: "";
    display: block;
    flex: none;
    width: 5px;
    height: 17px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-accent-grad);
}
/* Muss nach der Basisregel stehen: gleiche Spezifitaet, spaeter gewinnt. */
.pv-section-title--lg::before { width: 6px; height: 23px; }
/* Der kurze Korall-Unterstrich (::after, 46/60px) ist am 2026-08-30 entfernt
   worden — er endete unabhaengig von der Textlaenge mitten im Nichts und stand
   zusammen mit der Pille links doppelt fuer dieselbe Aussage. Es bleibt die
   Pille: sie markiert den Anfang des Abschnitts, was sie soll. Wenn eine
   Trennung noetig ist, traegt der Kartenkopf (.pv-card-header) ohnehin schon
   eine Linie. Entscheidung von Vincent, global — der Baustein wird an 57
   Stellen in 13 Dateien benutzt, davon 9 im Backend. */

/* ─────────────────────────────────────────────────────────────────────────
   KARTEN
   ───────────────────────────────────────────────────────────────────────── */
.pv-card {
    background: #fff;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-lg);
    padding: 24px 26px;
    /* margin-bottom und transition standen so in admin-style.css — ohne sie
       kleben gestapelte Karten aneinander. */
    margin-bottom: var(--pv-sp-6);
    box-shadow: var(--pv-sh-card);
    box-sizing: border-box;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pv-card--interactive { cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .18s; }
.pv-card--interactive:hover {
    box-shadow: var(--pv-sh-pop);
    transform: translateY(-2px);
    border-color: var(--pv-color-accent);
}
.pv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-sp-3);
    margin-bottom: var(--pv-sp-5);
    padding-bottom: var(--pv-sp-3);
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
}
/* Im Kartenkopf traegt der Kopf die Trennlinie — sonst zeichnet der Titel
   eine zweite, die nur so breit ist wie sein Text, und die Abstaende
   addieren sich dreifach. Der eigene Korall-Unterstrich (::after) kommt aus
   demselben Grund hier weg — der Kartenkopf hat schon eine Trennlinie. */
.pv-card-header .pv-section-title,
.pv-card-header h1.pv-section-title,
.pv-card-header h2.pv-section-title,
.pv-card-header h3.pv-section-title,
.pv-card-header h4.pv-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.pv-card-header .pv-section-title::after,
.pv-card-header h1.pv-section-title::after,
.pv-card-header h2.pv-section-title::after,
.pv-card-header h3.pv-section-title::after,
.pv-card-header h4.pv-section-title::after { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   SEITENKOPF — ersetzt .simple-overlay + .big-text + .small-text
   Der Marken-Schriftzug entfällt: eine interne Seite muss ihren eigenen
   Produktnamen nicht wiederholen.
   ───────────────────────────────────────────────────────────────────────── */
.pv-pagehead { display: flex; align-items: center; gap: var(--pv-sp-4); }
.pv-pagehead-icon {
    width: 52px; height: 52px;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--pv-r-md);
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-pagehead h1 {
    margin: 0;
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-text-h1);
    font-weight: 700;
    color: var(--pv-color-text-primary);
}
.pv-pagehead p { margin: 3px 0 0; font-size: 13.5px; color: var(--pv-s-500); }

/* ─────────────────────────────────────────────────────────────────────────
   FILTER-PILLS, BADGES, AUSWAHL
   ───────────────────────────────────────────────────────────────────────── */
.pv-filter-pill {
    display: inline-block;
    padding: 6px 14px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-pill);
    background: #fff;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: var(--pv-text-sm);
    font-weight: 600;
    color: var(--pv-s-600);
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
}
.pv-filter-pill:hover { border-color: var(--pv-s-300); background: var(--pv-s-50); }
.pv-filter-pill.is-active { border-color: var(--pv-color-accent); background: var(--pv-color-accent); color: #fff; }

.pv-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--pv-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.pv-badge--ok      { background: var(--pv-tint-ok-bg);   color: var(--pv-tint-ok-fg); }
.pv-badge--warn    { background: var(--pv-tint-warn-bg); color: var(--pv-tint-warn-fg); }
.pv-badge--err     { background: var(--pv-tint-err-bg);  color: var(--pv-tint-err-fg); }
.pv-badge--neutral { background: var(--pv-s-100); color: var(--pv-s-600); }

.pv-choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pv-s-600);
    cursor: pointer;
    transition: all .15s;
}
.pv-choice:hover { border-color: var(--pv-s-300); background: var(--pv-s-50); }
.pv-choice.is-on { border-color: var(--pv-color-accent); background: var(--pv-color-coral-5); color: var(--pv-color-accent); }

.pv-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: var(--pv-text-body); color: var(--pv-s-700); }
.pv-switch .pv-switch-track {
    position: relative;
    width: 42px; height: 24px;
    flex: none;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-300);
    transition: background .2s;
}
.pv-switch .pv-switch-track::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.3);
    transition: transform .2s;
}
.pv-switch.is-on .pv-switch-track { background: var(--pv-accent-grad); }
.pv-switch.is-on .pv-switch-track::after { transform: translateX(18px); }
/* Abgeschaltet, weil die Vorbedingung fehlt (z. B. keine aktive Saison).
   Sichtbar bleiben statt verschwinden: der Filter existiert, er hat nur
   gerade nichts, worauf er sich beziehen koennte. */
.pv-switch.is-disabled { cursor: not-allowed; color: var(--pv-s-400); }
.pv-switch.is-disabled .pv-switch-track { background: var(--pv-s-200); }
.pv-switch-hint {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-100);
    color: var(--pv-s-500);
    font-size: 11.5px;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────────────────────────────────── */
.pv-tabs { display: flex; gap: 2px; border-bottom: var(--pv-bw-1) solid var(--pv-s-200); }
.pv-tab {
    margin-bottom: -1px;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pv-s-500);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.pv-tab:hover { color: var(--pv-s-700); }
.pv-tab.is-active { color: var(--pv-color-accent); border-bottom-color: var(--pv-color-accent); }

/* ─────────────────────────────────────────────────────────────────────────
   MELDUNGEN — ersetzt .notice-* mit seinen 15 !important
   ───────────────────────────────────────────────────────────────────────── */
/* .pv-notice traegt bewusst keinen Aussenabstand -- im .pv-page-stack setzt der
   gap den Rhythmus. Innerhalb einer Karte gibt es diesen gap aber nicht: dort
   klebten zwei aufeinanderfolgende Hinweise und ein darauf folgendes Feld
   ohne Luecke aneinander (gemessen: mb 0, mt 0). Deshalb nur der
   Geschwister-Abstand, nicht der Baustein selbst. */
.pv-notice + .pv-notice,
.pv-notice + .pv-form-group,
.pv-notice + .pv-grid-2,
.pv-notice + .pv-actionrow { margin-top: var(--pv-sp-4); }

.pv-notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 18px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-left: 4px solid var(--pv-s-300);
    border-radius: var(--pv-r-sm);
    background: #fff;
    box-shadow: var(--pv-sh-sm);
    font-size: var(--pv-text-body);
    color: var(--pv-s-700);
}
/* Ein SVG ohne Groessenangabe faellt sonst auf 300x150 zurueck und sprengt
   die Zeile — das passiert schneller, als man denkt. */
.pv-notice > svg, .pv-notice > .pv-icon { flex: none; }
/* <b> bleibt im Fliesstext. Frueher stand hier display:block — das zerriss
   jeden Satz mit einer Hervorhebung in Zeilen. :first-child:last-child war
   kein Ausweg: Textknoten zaehlen dabei nicht mit, ein <b> mitten im Satz
   ist trotzdem das einzige Elementkind. Wer eine Ueberschrift braucht,
   nimmt .pv-notice-title. */
.pv-notice b { font-weight: 600; color: var(--pv-color-text-primary); }
.pv-notice-title { display: block; margin-bottom: 2px; font-weight: 600; color: var(--pv-color-text-primary); }
.pv-notice--ok   { border-left-color: var(--pv-ok); }
.pv-notice--warn { border-left-color: var(--pv-warn); }
.pv-notice--err  { border-left-color: var(--pv-err); }
.pv-notice--info { border-left-color: var(--pv-info-color); }

/* ─────────────────────────────────────────────────────────────────────────
   TABELLE
   ───────────────────────────────────────────────────────────────────────── */
.pv-table-wrapper {
    width: 100%;
    overflow: auto;
    background: #fff;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    box-shadow: var(--pv-sh-sm);
}
.pv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pv-text-body); }
.pv-table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: 11px 16px;
    background: var(--pv-s-50);
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
    color: var(--pv-s-500);
    font-size: var(--pv-text-eyebrow);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.pv-table tbody td {
    padding: 14px 16px;
    border-bottom: var(--pv-bw-1) solid var(--pv-s-100);
    color: var(--pv-s-700);
    vertical-align: middle;
}
.pv-table tbody tr:last-child td { border-bottom: none; }
.pv-table tbody tr:hover td { background: var(--pv-s-50); }
.pv-table tbody tr.is-selected td { background: var(--pv-color-coral-5); }
.pv-table td.pv-ident { font-weight: 600; color: var(--pv-s-800); }
/* Kleine Ganzzahlen bleiben linksbuendig: rechtsbuendig lohnt sich erst bei
   Betraegen mit Nachkommastellen. tabular-nums haelt die Ziffern trotzdem
   auf gleicher Breite. */
.pv-table th.pv-num, .pv-table td.pv-num { text-align: left; font-variant-numeric: tabular-nums; }
.pv-table th.pv-money, .pv-table td.pv-money { text-align: right; font-variant-numeric: tabular-nums; }

/* Schmale Spalten, damit Beschriftung und Wert beieinander bleiben statt
   ueber die halbe Bildschirmbreite auseinanderzudriften. */
.pv-table th.pv-col-xs { width: 96px; }
.pv-table th.pv-col-sm { width: 140px; }
.pv-table th.pv-col-md { width: 190px; }
.pv-table--compact tbody td { padding: 9px 16px; }

.pv-th-sort { cursor: pointer; user-select: none; transition: color .15s; }
.pv-th-sort:hover { color: var(--pv-s-700); }
.pv-th-sort .pv-sort-arrow { display: inline-block; margin-left: 5px; opacity: 0; transition: opacity .15s; }
.pv-th-sort:hover .pv-sort-arrow { opacity: .4; }
.pv-th-sort.is-sorted { color: var(--pv-color-accent); }
.pv-th-sort.is-sorted .pv-sort-arrow { opacity: 1; }

/* Gedaempft statt unsichtbar: sonst wirkt die Spalte leer und niemand
   findet die Aktionen. */
.pv-rowact { display: flex; gap: 3px; justify-content: flex-end; opacity: .45; transition: opacity .15s; }
.pv-table tbody tr:hover .pv-rowact,
.pv-table tbody tr:focus-within .pv-rowact { opacity: 1; }
.pv-table th.pv-actcol, .pv-table td.pv-actcol { width: 1%; white-space: nowrap; }

.pv-table .pv-selcol { width: 42px; padding-right: 0; }
/* Gilt fuer alle Kaestchen in Plugin-Containern, nicht nur in Tabellen —
   sonst bleiben Belegzeilen beim Browser-Blau. */
.pv-table input[type="checkbox"],
.pv-docrow input[type="checkbox"],
.pv-person input[type="checkbox"],
.pv-container input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--pv-color-accent);
    cursor: pointer;
}

.pv-iconbtn {
    display: inline-flex;
    padding: 3px;
    border: none;
    border-radius: var(--pv-r-xs);
    background: none;
    color: var(--pv-s-400);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.pv-iconbtn:hover { color: var(--pv-color-accent); background: var(--pv-color-coral-5); }

/* ─────────────────────────────────────────────────────────────────────────
   DASHBOARD-BAUSTEINE
   ───────────────────────────────────────────────────────────────────────── */
.pv-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pv-kpi {
    display: flex; flex-direction: column; gap: 3px;
    padding: 17px 19px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
}
.pv-kpi-label { font-size: var(--pv-fs-label); font-weight: var(--pv-fw-label); letter-spacing: .05em; text-transform: uppercase; color: var(--pv-s-400); }
.pv-kpi-value {
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-fs-display); font-weight: var(--pv-fw-display);
    line-height: 1.1;
    color: var(--pv-s-900);
    font-variant-numeric: tabular-nums;
}
.pv-kpi-sub { font-size: var(--pv-fs-meta); color: var(--pv-s-400); }

/* Zustand als Punkt am Etikett. Seit die Werte durchgehend schwarz sind,
   braucht es einen anderen Traeger — ein eingefaerbter Wert ist es nicht
   mehr, und ohne Traeger sieht man "3 von 12 fehlen" nicht mehr an. */
.pv-kpi--ok .pv-kpi-label,
.pv-kpi--warn .pv-kpi-label,
.pv-kpi--err .pv-kpi-label,
.pv-kpi--neutral .pv-kpi-label { display: flex; align-items: center; gap: 7px; }
.pv-kpi--ok .pv-kpi-label::before,
.pv-kpi--warn .pv-kpi-label::before,
.pv-kpi--err .pv-kpi-label::before,
.pv-kpi--neutral .pv-kpi-label::before {
    content: ""; flex: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--pv-s-300);
}
.pv-kpi--ok .pv-kpi-label::before   { background: var(--pv-ok); }
.pv-kpi--warn .pv-kpi-label::before { background: var(--pv-warn); }
.pv-kpi--err .pv-kpi-label::before  { background: var(--pv-err); }

.pv-bar { height: 10px; border-radius: var(--pv-r-pill); background: var(--pv-s-200); overflow: hidden; }
.pv-bar-fill { height: 100%; border-radius: var(--pv-r-pill); background: var(--pv-progress-grad); transition: width .6s cubic-bezier(.4,0,.2,1); }
.pv-bar--sm { height: 6px; }

.pv-sectionhead { display: flex; align-items: center; gap: 11px; }
.pv-sectionhead-icon {
    width: 38px; height: 38px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-sectionhead-label { flex: 1; font-family: var(--pv-font-family-primary), sans-serif; font-size: 16px; font-weight: 700; color: var(--pv-s-800); }
.pv-sectionhead-sum { font-size: 15px; font-weight: 700; color: var(--pv-s-600); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────────
   LEERZUSTAND · ZURÜCK-BUTTON
   ───────────────────────────────────────────────────────────────────────── */
.pv-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--pv-sp-4);
    padding: 48px 32px;
    border-radius: var(--pv-r-lg);
    background: #fff;
    box-shadow: var(--pv-sh-card);
    text-align: center;
}
.pv-empty-icon {
    width: 78px; height: 78px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--pv-s-100);
    color: var(--pv-s-400);
    box-shadow: var(--pv-sh-sm);
}
.pv-empty h2, .pv-empty h3 {
    margin: 0;
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--pv-color-text-primary);
}
.pv-empty p { margin: 0; max-width: 42ch; font-size: var(--pv-text-body); color: var(--pv-s-500); }

.pv-backbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: none;
    color: var(--pv-s-600);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pv-backbtn:hover { background: var(--pv-s-100); border-color: var(--pv-s-300); color: var(--pv-s-800); }

@media (prefers-reduced-motion: reduce) {
    .pv-btn, .pv-card--interactive, .pv-filter-pill, .pv-choice,
    .pv-switch .pv-switch-track, .pv-switch .pv-switch-track::after,
    .pv-bar-fill, .pv-rowact, .pv-iconbtn { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ICONS — Inline-SVG statt Dashicons-Font (siehe lib/planvion-icons.php)
   ───────────────────────────────────────────────────────────────────────── */
.pv-icon {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   LIZENZ-BAUSTEINE (lib/planvion-license.php)
   Vorher: 196 Zeilen PHP mit 24 style="" und einer eigenen font-family.
   ───────────────────────────────────────────────────────────────────────── */

/* Plan-Abzeichen neben einer Beschriftung */
.pv-plan-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 7px;
    border-radius: var(--pv-r-xs);
    background: var(--pv-accent-grad);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    vertical-align: middle;
}
.pv-plan-badge--pro {
    background: var(--pv-color-text-primary);
    border: var(--pv-bw-1) solid rgba(255,255,255,.2);
}

/* Hinweis: dieses Feature braucht ein Upgrade */
.pv-upgrade {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 620px;
    margin: var(--pv-sp-5) 0;
    padding: 24px 28px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-left: 4px solid var(--pv-color-accent);
    border-radius: var(--pv-r-md);
    background: #fff;
    box-shadow: var(--pv-sh-card);
}
.pv-upgrade-icon {
    width: 42px; height: 42px;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    border: var(--pv-bw-1) solid var(--pv-color-coral-20);
    border-radius: var(--pv-r-sm);
    background: var(--pv-color-coral-5);
    color: var(--pv-color-accent);
}
.pv-upgrade-body { flex: 1; min-width: 0; }
.pv-upgrade-head { display: flex; align-items: center; gap: var(--pv-sp-2); margin-bottom: 5px; flex-wrap: wrap; }
.pv-upgrade-title { font-size: 14.5px; font-weight: 700; color: var(--pv-color-text-primary); }
.pv-upgrade-desc { margin: 0 0 var(--pv-sp-4); font-size: 13.5px; line-height: 1.6; color: var(--pv-s-500); }

.pv-upgrade--pro { background: var(--pv-color-text-primary); border-color: rgba(255,255,255,.08); }
.pv-upgrade--pro .pv-upgrade-icon { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.pv-upgrade--pro .pv-upgrade-title { color: #fff; }
.pv-upgrade--pro .pv-upgrade-desc { color: rgba(255,255,255,.58); }

/* Ganzseitiger Hinweis im kostenlosen Plan */
.pv-planwall { padding: 72px 40px; text-align: center; }
.pv-planwall-icon {
    width: 68px; height: 68px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    border: var(--pv-bw-2) solid var(--pv-s-300);
    border-radius: 18px;
    background: var(--pv-s-100);
    color: var(--pv-s-400);
}
.pv-planwall h2 {
    margin: 0 0 10px;
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-text-h2);
    font-weight: 700;
    color: var(--pv-s-700);
}
.pv-planwall p {
    max-width: 400px;
    margin: 0 auto 26px;
    font-size: var(--pv-text-body);
    line-height: 1.7;
    color: var(--pv-s-400);
}

/* Overlay ueber gesperrten Daten */
.pv-paywall {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pv-r-sm);
    background: rgba(241,245,249,.8);
    backdrop-filter: blur(3px);
}
.pv-paywall-box { padding: 32px 28px; text-align: center; }
.pv-paywall-icon {
    width: 54px; height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    border: var(--pv-bw-2) solid var(--pv-s-300);
    border-radius: var(--pv-r-md);
    background: var(--pv-s-100);
    color: var(--pv-s-400);
}
.pv-paywall h3 {
    margin: 0 0 var(--pv-sp-2);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--pv-s-500);
}
.pv-paywall p { margin: 0 0 var(--pv-sp-5); font-size: 13px; line-height: 1.6; color: var(--pv-s-400); }

.pv-paywall--pro { background: rgba(28,28,30,.88); }
.pv-paywall--pro .pv-paywall-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.pv-paywall--pro h3 { color: #fff; }
.pv-paywall--pro p { color: rgba(255,255,255,.58); }

/* ─────────────────────────────────────────────────────────────────────────
   LISTEN-WERKZEUGKASTEN (lib/planvion-list.php)
   Suche, Sortierung, Paginierung, Mehrfachauswahl.
   ───────────────────────────────────────────────────────────────────────── */
.pv-toolbar {
    display: flex;
    align-items: center;
    gap: var(--pv-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--pv-sp-4);
}

.pv-search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }

/* Elementselektoren, nicht nur Klassen: WordPress setzt input[type="search"]
   mit Spezifitaet 0,1,1 — eine reine Klasse (0,1,0) wuerde verlieren. */
.pv-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--pv-s-400);
    pointer-events: none;
}
.pv-search input,
.pv-search input[type="text"],
.pv-search input[type="search"] {
    width: 100%;
    padding: 9px 13px 9px 36px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    color: var(--pv-s-700);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .18s, box-shadow .18s;
}
.pv-search input:focus {
    outline: none;
    border-color: var(--pv-color-accent);
    box-shadow: 0 0 0 3px var(--pv-color-coral-20);
}
/* Native Such-Dekoration von WebKit ausblenden, sonst sitzt dort ein zweites Icon. */
.pv-search input::-webkit-search-decoration,
.pv-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pv-search.is-busy svg { opacity: .35; }

.pv-filter-trigger { position: relative; }
.pv-filter-count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Paginierung */
.pv-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-sp-3);
    flex-wrap: wrap;
    margin-top: var(--pv-sp-4);
}
.pv-pagination-info { font-size: var(--pv-text-sm); color: var(--pv-s-400); font-variant-numeric: tabular-nums; }
.pv-pagination-pages { display: flex; align-items: center; gap: 4px; }
.pv-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-xs);
    background: #fff;
    color: var(--pv-s-600);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background .15s, border-color .15s, color .15s;
}
.pv-page-btn:hover { background: var(--pv-s-50); border-color: var(--pv-s-300); color: var(--pv-s-800); }
.pv-page-btn.is-active {
    background: var(--pv-accent-grad);
    border-color: transparent;
    color: #fff;
}
.pv-page-btn.is-disabled { opacity: .4; pointer-events: none; }

/* Auswahl-Aktionsleiste */
/* Steht laut Entwurf ueber der Liste. Zusaetzlich klebend, weil man sie bei
   58 Personen sonst aus dem Blick scrollt (42px = WP-Adminleiste). */
.pv-bulkbar {
    position: sticky;
    top: 42px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--pv-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--pv-sp-4);
    padding: 12px 16px;
    border-radius: var(--pv-r-md);
    background: var(--pv-s-800);
    color: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,.28);
}
.pv-bulkbar[hidden] { display: none; }
.pv-bulkbar-count { font-size: 13.5px; font-weight: 700; }
.pv-bulkbar-count b { color: #FFB4A0; }
.pv-bulkbar-note,
.pv-bulkbar input[type="text"].pv-bulkbar-note {
    flex: 1;
    min-width: 170px;
    padding: 8px 12px;
    border: var(--pv-bw-2) solid rgba(255,255,255,.18);
    border-radius: var(--pv-r-xs);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
}
.pv-bulkbar-note::placeholder { color: rgba(255,255,255,.45); }
.pv-bulkbar-clear {
    margin-left: auto;
    border: none;
    background: none;
    color: rgba(255,255,255,.6);
    font-size: var(--pv-text-sm);
    text-decoration: underline;
    cursor: pointer;
}
.pv-bulkbar-clear:hover { color: #fff; }

/* Kein-Treffer-Hinweis */
.pv-noresults {
    padding: 32px 0;
    text-align: center;
    color: var(--pv-s-400);
    font-size: var(--pv-text-body);
}

@media (prefers-reduced-motion: reduce) {
    .pv-search-input, .pv-page-btn { transition: none; }
}

/* Zaehler in der Werkzeugleiste */
.pv-list-count {
    font-size: var(--pv-text-sm);
    font-weight: 600;
    color: var(--pv-s-500);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pv-toolbar .pv-switch { white-space: nowrap; font-size: 13px; }
/* Werkzeugleiste im Kartenkopf: kein eigener Abstand nach unten, der
   Kartenkopf bringt seinen schon mit. */
.pv-toolbar--flush { margin-bottom: 0; flex: 0 1 auto; justify-content: flex-end; }
.pv-toolbar--flush .pv-search { max-width: 240px; min-width: 160px; }

/* Filter-Panel: Beschriftung und Zahlenfelder */
.pv-filter-section-title {
    margin-bottom: 10px;
    font-size: var(--pv-text-eyebrow);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pv-s-500);
}
.pv-filter-number-input {
    width: 100%;
    padding: 8px 10px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    color: var(--pv-s-700);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.pv-filter-number-input:focus {
    border-color: var(--pv-color-accent);
    box-shadow: 0 0 0 3px var(--pv-color-coral-20);
}

/* Bestandsmarkup nutzt .active statt .is-active — als Alias fuehren,
   damit die vorhandenen Panels ohne Markup-Aenderung funktionieren. */
.pv-filter-pill.active {
    border-color: var(--pv-color-accent);
    background: var(--pv-color-accent);
    color: #fff;
}

/* Schieberegler im Filter-Panel */
.pv-range-clean { -webkit-appearance: none; appearance: none; height: 6px; background: transparent; outline: none; }
.pv-range-clean::-webkit-slider-runnable-track { width: 100%; height: 6px; background: var(--pv-s-200); border-radius: 3px; }
.pv-range-clean::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--pv-color-accent); cursor: pointer; }
.pv-range-clean::-moz-range-track { width: 100%; height: 6px; background: var(--pv-s-200); border-radius: 3px; }
.pv-range-clean::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--pv-color-accent); cursor: pointer; }

/* Kopfzeile: Titel links, Primaeraktion rechts */
.pv-pagehead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--pv-sp-6);
}

/* ── Kopfbahn mit Motiv ──────────────────────────────────────────────────
   Traegt den Seitenkopf und beschneidet das Hintergrundmotiv. Das Motiv
   sitzt hinter dem Inhalt (z-index) und wird auf schmalen Schirmen
   ausgeblendet, damit der Platz dem Inhalt gehoert. */
.pv-pageband {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--pv-sp-6);
    padding: 22px 26px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-lg);
    background: #fff;
}

.pv-pageband > .pv-pagehead-row {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* Zwei Korallbaender, nach unten auslaufend. Der Verlauf ins Transparente
   ist wesentlich — harte Kanten wirken wie ein Werbebanner. */
.pv-pageband--stripes::before,
.pv-pageband--stripes::after {
    content: "";
    position: absolute;
    top: -40%;
    height: 180%;
    width: 54px;
    transform: rotate(14deg);
    pointer-events: none;
}
.pv-pageband--stripes::before {
    right: 96px;
    background: linear-gradient(180deg, rgba(255,120,95,.16), rgba(255,120,95,0));
}
.pv-pageband--stripes::after {
    right: 26px;
    background: linear-gradient(180deg, rgba(255,107,69,.10), rgba(255,107,69,0));
}

@media (max-width: 782px) {
    .pv-pageband { padding: 18px; }
    .pv-pageband--stripes::before,
    .pv-pageband--stripes::after { display: none; }
}

/* Werkzeugleiste und Tabelle bilden einen Block */
/* Die Tabelle sitzt buendig in der Karte — ein Innenabstand wuerde als
   weisser Rahmen um die Tabelle erscheinen. overflow:hidden clippt die
   Tabellenecken an den Kartenradius. */
.pv-listcard {
    margin-bottom: 0;
    background: #fff;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-lg);
    overflow: hidden;
    box-shadow: var(--pv-sh-card);
}
.pv-listcard .pv-table-wrapper { border: none; border-radius: 0; box-shadow: none; }
.pv-listcard .pv-table thead th { background: var(--pv-s-50); }
.pv-listcard .pv-pagination {
    margin-top: 0;
    padding: var(--pv-sp-3) var(--pv-sp-4);
    border-top: var(--pv-bw-1) solid var(--pv-s-100);
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Werkzeugleiste ueber der Listenkarte */
.pv-listtools { margin-bottom: var(--pv-sp-3); }
.pv-listtools .pv-toolbar { margin-bottom: 0; }
.pv-listtools .pv-bulkbar { margin-top: var(--pv-sp-3); margin-bottom: 0; }

/* Hervorgehobener Einzelwert, z. B. der eingerichtete Vereinsname */
.pv-club-name {
    margin: 0 0 var(--pv-sp-4);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-text-h2);
    font-weight: 700;
    color: var(--pv-s-800);
}
/* Formularfeld in Lesebreite statt über die ganze Karte */
.pv-field-narrow { max-width: 420px; }

/* Datei-Auswahl — das native Feld sieht in jedem Browser anders aus und
   bricht sonst aus dem Formularbild aus. */
.pv-input[type="file"],
input[type="file"].pv-input {
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
}
.pv-input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-xs);
    background: #fff;
    color: var(--pv-s-700);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pv-input[type="file"]::file-selector-button:hover {
    background: var(--pv-s-50);
    border-color: var(--pv-s-300);
}

/* ─────────────────────────────────────────────────────────────────────────
   WARNUNGS-PANEL — Checkliste vor einer unumkehrbaren Aktion
   ───────────────────────────────────────────────────────────────────────── */
.pv-warnpanel {
    padding: 18px 20px;
    border: var(--pv-bw-1) solid #FDE68A;
    border-radius: var(--pv-r-md);
    background: #FFFBEB;
}
.pv-warnpanel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 var(--pv-sp-3);
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #92400E;
}
.pv-warnpanel ul { margin: 0; padding-left: 20px; }
.pv-warnpanel li {
    margin-bottom: 5px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #78350F;
}
.pv-warnpanel li:last-child { margin-bottom: 0; }

/* Status-Abzeichen im Seitenkopf, z. B. "Abrechnung offen" */
.pv-headbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--pv-r-pill);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pv-headbadge--done { background: var(--pv-tint-ok-bg); color: var(--pv-tint-ok-fg); }
.pv-headbadge--open { background: var(--pv-tint-warn-bg); color: var(--pv-tint-warn-fg); }

/* Kennzahl-Chips, z. B. abgelaufene Perioden */
.pv-chiprow { display: flex; gap: var(--pv-sp-2); flex-wrap: wrap; }
.pv-chip {
    padding: 8px 14px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: var(--pv-s-50);
    font-size: 12.5px;
    color: var(--pv-s-700);
}
.pv-chip b { color: var(--pv-color-accent); }

/* Aufklappbare Referenzangaben */
.pv-detailcard {
    padding: 14px 16px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
}
.pv-detailcard + .pv-detailcard { margin-top: var(--pv-sp-2); }
.pv-detailcard summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pv-s-800);
}
.pv-detailgrid {
    display: grid;
    gap: var(--pv-sp-2);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-top: var(--pv-sp-3);
    font-size: 12.5px;
    color: var(--pv-s-500);
}
.pv-detailgrid b { display: block; color: var(--pv-s-800); }

/* Aufklappzeile in einer Tabelle */
.pv-table tr.pv-detailrow { display: none; }
.pv-table tr.pv-detailrow.is-open { display: table-row; }
.pv-table tr.pv-detailrow td { background: var(--pv-s-50); font-size: 12.5px; }
/* Leermeldung als Tabellenzeile: hidden muss gegen die Tabellenregeln gewinnen */
.pv-table tr.pv-noresults-row[hidden] { display: none; }
.pv-subtable { width: 100%; border-collapse: collapse; }
.pv-subtable td { padding: 5px 8px; border-bottom: 1px solid var(--pv-s-200); }
.pv-subtable tr:last-child td { border-bottom: none; }
.pv-linkbtn {
    padding: 0;
    border: none;
    background: none;
    color: var(--pv-color-accent);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.pv-linkbtn:hover { text-decoration: underline; }

/* Seitenraster: gleichmaessiger Abstand zwischen den Bloecken einer Seite */
/* Ohne Deckelung ziehen Belegzeilen auf breiten Schirmen ueber 1700px
   auseinander: Beschriftung links, Betrag ganz rechts, dazwischen Leere. */
.pv-page-stack { display: grid; gap: var(--pv-sp-6); max-width: 1500px; }
.pv-page-stack > .pv-backbtn { justify-self: start; }
/* Im Stapel setzt der gap den Abstand — eigene Aussenabstaende der Kinder
   summieren sich sonst darauf und reissen die Seite auseinander. */
.pv-page-stack > .pv-pageband,
.pv-page-stack > .pv-toolbar,
.pv-page-stack > .pv-kpi-strip { margin-bottom: 0; }
/* Listenseiten schmaler: bei 1500px legt das Auge zwischen Name und Betrag
   1400px zurueck — die Zeile faellt beim Lesen auseinander. */
.pv-page-stack--narrow { max-width: 1180px; }
/* Kartenraster darf die Breite ausnutzen — mehr Breite heisst hier mehr
   Spalten, nicht laengere Zeilen. */
.pv-page-stack--wide { max-width: 1800px; }

/* Zeile aus Aktionsknoepfen; die Formulare darin sollen kein Layout erzeugen */
.pv-actionrow { display: flex; gap: var(--pv-sp-3); flex-wrap: wrap; align-items: center; }
.pv-inlineform { display: contents; }
.pv-actionrow-hint { flex-basis: 100%; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--pv-s-400); }

/* Liste aufklappbarer Referenzkarten */
.pv-detaillist { display: grid; gap: var(--pv-sp-2); }

/* Auswahlfeld in einer Kopfzeile — element-qualifiziert, weil
   `.pv-container select` (0,1,1) eine reine Klasse schlagen wuerde. */
.pv-select-inline,
select.pv-select-inline { max-width: 240px; }

/* ─────────────────────────────────────────────────────────────────────────
   AUSWAHL-KARTE — zeigt den Stand auf einen Blick statt nur einen Namen
   ───────────────────────────────────────────────────────────────────────── */
.pv-selgrid { display: grid; gap: var(--pv-sp-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pv-selcard {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 21px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-lg);
    background: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.pv-selcard:hover {
    box-shadow: var(--pv-sh-pop);
    transform: translateY(-3px);
    border-color: var(--pv-color-accent);
    color: inherit;
}
.pv-selcard-head { display: flex; align-items: center; gap: 13px; }
.pv-selcard-avatar {
    width: 48px; height: 48px;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--pv-r-md);
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-selcard-title { font-size: 16px; font-weight: 700; color: var(--pv-s-800); line-height: 1.2; }
.pv-selcard-date { margin-top: 2px; font-size: 12px; color: var(--pv-s-400); }
.pv-selcard-chev { margin-left: auto; flex: none; color: var(--pv-s-300); transition: color .15s, transform .15s; }
.pv-selcard:hover .pv-selcard-chev { color: var(--pv-color-accent); transform: translateX(3px); }
.pv-selcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-selcard-stat {
    display: flex; flex-direction: column; gap: 1px;
    padding: 10px 12px;
    border-radius: var(--pv-r-sm);
    background: var(--pv-s-50);
}
.pv-selcard-stat-val {
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--pv-s-800);
    font-variant-numeric: tabular-nums;
}
.pv-selcard-stat-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--pv-s-400);
}
.pv-selcard-stat--ok .pv-selcard-stat-lbl::before,
.pv-selcard-stat--warn .pv-selcard-stat-lbl::before,
.pv-selcard-stat--neutral .pv-selcard-stat-lbl::before {
    content: ""; flex: none;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pv-s-300);
}
.pv-selcard-stat--ok .pv-selcard-stat-lbl::before   { background: var(--pv-ok); }
.pv-selcard-stat--warn .pv-selcard-stat-lbl::before { background: var(--pv-warn); }
.pv-selcard-progress-lbl {
    display: flex; justify-content: space-between;
    margin-bottom: 5px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--pv-s-400);
}

/* ─────────────────────────────────────────────────────────────────────────
   ZAHLUNGSLISTE

   Ersetzt das Kachelraster. Bei 58 Personen wiederholt eine Kachel sechs
   Textfragmente 58-mal; eine Spalte sagt dasselbe einmal im Kopf. Deshalb
   Liste statt Karten, sobald es mehr als eine Handvoll Eintraege sind.

   TYPOGRAFIE: Poppins nur oberhalb 16px (Seiten- und Modaltitel). Alles auf
   Datenebene laeuft in Inter — Poppins 700 bei 13px wird breit und klobig
   und war der Hauptgrund, warum die Liste unruhig aussah.

   FARBE: Der Zustand steckt in einem 7px-Punkt, nicht in einer gefuellten
   Pille. 58 rosa Pillen untereinander sind der eigentliche Krach; ein Punkt
   plus neutraler Text traegt dieselbe Information ruhig.
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   PERSONEN-KARTE — Werte 1:1 aus dem Styleguide, Abschnitt "Zahlungsseite"

   Breite Karte pro Person, gestapelt. Kopfzeile: Kaestchen, Avatar, Name
   ueber Meta, Countdown, Betrag. Belegzeilen liegen in derselben Karte.

   Einzige Abweichung vom Entwurf: die Belegzeilen sind zugeklappt. Der
   Entwurf zeigt zwei Personen mit drei Belegen; im Echtbetrieb sind es 58
   Personen mit 348 Belegen — immer offen waere die Seite 15.000px hoch.
   Der Pfeil in der Kopfzeile klappt auf.
   ───────────────────────────────────────────────────────────────────────── */
.pv-personlist {
    display: grid;
    /* 500px ist gemessen, nicht geschaetzt: die min-content-Breite von
       .pv-person-top plus Kartenpolsterung liegt je nach Inhalt bei 448px
       ("heute fällig", 90,00 €) bis 525px (langer Name, "128 Tage
       ueberfaellig", 12.345,00 €). Mit den alten 430px konnte auto-fill
       Spalten erzeugen, die schmaler waren als ihr eigener Inhalt — bei
       1800px Inhaltsbreite (jeder Monitor ab ~2000px, siehe
       .pv-page-stack--wide) genau 4x441px, und dann standen Countdown,
       Betrag und Aufklapp-Pfeil rechts NEBEN der Karte statt darin. Die
       Deckelung auf 1800px machte das auf breiten Schirmen zum Dauerzustand.
       Fuer Inhalte oberhalb der 500px bricht zusaetzlich der Name um
       (siehe .pv-person-ident) — die Zeile laeuft nie wieder aus der Karte. */
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 12px;
    align-items: start;
}
/* Die aufgeklappte Karte bleibt in ihrer Spalte. Ueber die volle Breite
   gezogen riss sie ein Loch ins Raster und die Belegzeilen liefen 1700px
   auseinander — genau der Fehler, den das Kartenraster loesen sollte. */

.pv-person {
    /* Grid-Item: ohne min-width:0 zieht der automatische Mindestwert die
       Rasterspur auf die Inhaltsbreite auf und sprengt die ganze Liste,
       statt den Inhalt umbrechen zu lassen. */
    min-width: 0;
    padding: 16px;
    display: flex; flex-direction: column; gap: 11px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    transition: box-shadow .15s, border-color .15s;
}
.pv-person:hover { box-shadow: var(--pv-sh-pop); }
.pv-person.is-selected { border-color: var(--pv-color-accent); }

.pv-person-top { display: flex; align-items: center; gap: 11px; }
.pv-person-avatar {
    width: 40px; height: 40px;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--pv-accent-grad);
    color: #fff;
}
/* Auf den Dashboards traegt jede Karte dasselbe Icon (eine Saison, keine
   Person) — der Korall-Verlauf waere dort dreimal dasselbe Signal ohne
   Information. Gleiche Form, ruhige Farbe. */
.pv-person-avatar--quiet {
    background: var(--pv-s-100);
    color: var(--pv-s-500);
}
/* min-width:0 statt 130px: alle uebrigen Kinder der Zeile sind flex:none bzw.
   white-space:nowrap: Wenn die flexible Spalte nicht unter 130px darf, hat die
   Zeile eine harte Mindestbreite und laeuft bei knapper Spalte aus der Karte
   heraus. Mit 0 gibt stattdessen der Name nach und bricht um. */
.pv-person-ident { flex: 1; min-width: 0; }
.pv-person-name {
    font-size: var(--pv-fs-body); font-weight: var(--pv-fw-title); color: var(--pv-s-800);
    overflow-wrap: anywhere;
}
.pv-person-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 1px;
    font-size: var(--pv-fs-meta); font-weight: var(--pv-fw-meta); color: var(--pv-s-400);
}
.pv-person-amount {
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: var(--pv-fs-section); font-weight: var(--pv-fw-display);
    color: var(--pv-s-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pv-person-amount.is-ok   { color: var(--pv-ok-text); }
.pv-person-amount.is-warn { color: var(--pv-warn-text); }

.pv-person-toggle {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    padding: 0;
    border: none; border-radius: var(--pv-r-xs);
    background: none;
    color: var(--pv-s-300);
    cursor: pointer;
    transition: color .15s, background .15s, transform .18s;
}
.pv-person-toggle:hover { color: var(--pv-s-600); background: var(--pv-s-100); }
.pv-person.is-open .pv-person-toggle { transform: rotate(180deg); color: var(--pv-s-500); }

.pv-person-docs { display: none; }
.pv-person.is-open .pv-person-docs { display: block; }

/* ── Countdown ──────────────────────────────────────────────────────────── */
.pv-countdown {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-100);
    color: var(--pv-s-500);
    font-size: var(--pv-fs-meta); font-weight: var(--pv-fw-title);
    white-space: nowrap;
}
.pv-countdown.is-soon { background: var(--pv-tint-warn-bg); color: var(--pv-tint-warn-fg); }
.pv-countdown.is-late { background: var(--pv-tint-err-bg); color: var(--pv-err-text); }

/* Belegzeile im aufgeklappten Bereich. Eigenes Raster, das die Spalten der
   Personenzeile aufgreift, damit Betrag und Status untereinander stehen. */
.pv-docrow {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    padding: 9px 0;
    border-top: var(--pv-bw-1) solid var(--pv-s-100);
    font-size: var(--pv-fs-body);
}
.pv-docrow:first-of-type { border-top: none; }
.pv-docrow > input[type="checkbox"] { grid-column: 1; grid-row: 1; margin-top: 2px; }
.pv-docrow .pv-docrow-label {
    grid-column: 2; grid-row: 1;
    min-width: 0;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    color: var(--pv-s-700); font-weight: 500;
}
.pv-docrow .pv-docrow-amount {
    grid-column: 3; grid-row: 1;
    text-align: right;
    font-weight: 700; color: var(--pv-s-800);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pv-docrow-meta {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: var(--pv-fs-meta); font-weight: var(--pv-fw-meta); color: var(--pv-s-400);
    font-variant-numeric: tabular-nums;
}
.pv-docrow-meta .is-late { color: var(--pv-err-text); font-weight: 600; }
.pv-docrow-meta .is-paid { color: var(--pv-ok-text); }
.pv-docrow-actions {
    grid-column: 3; grid-row: 2;
    display: flex; align-items: center; gap: 2px; justify-content: flex-end;
}

/* Netto-Aussage über der Liste */
.pv-netto {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: var(--pv-s-50);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pv-s-600);
}
.pv-netto b { color: var(--pv-s-800); font-variant-numeric: tabular-nums; }

/* Geldfluss-Diagramm: Kette aus Parteien-Kacheln + Pfeilen (Abschnitt 3.2).
   Urspruenglich nur im Abrechnungs-Wizard (#billing-config-modal), jetzt auch
   auf der Abrechnungsseite genutzt -- deshalb hierher verschoben statt an
   zweiter Stelle dupliziert (siehe Fallen-Tabelle: doppelt definierte Klassen). */
.pv-set-flow { margin: 4px 0 18px; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,120,95,.06), rgba(28,28,30,.02)); border: 1px dashed rgba(255,120,95,.3); overflow-x: auto; }
.pv-set-flow-row { display: flex; align-items: center; justify-content: center; gap: 10px 2px; flex-wrap: wrap; margin: 0 auto; }
.pv-set-flow-node { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1.5px solid var(--pv-color-border-light); min-width: 96px; text-align: center; flex-shrink: 0; }
.pv-set-flow-node.is-accent { border-color: var(--pv-color-accent); box-shadow: var(--pv-shadow-primary-sm); }
.pv-set-flow-node b { font-family: var(--pv-font-family-secondary); font-size: 12.5px; color: var(--pv-color-text-primary); }
.pv-set-flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; min-width: 64px; flex-shrink: 0; }
.pv-set-flow-arrow em { font-style: normal; font-family: var(--pv-font-family-secondary); font-size: 10.5px; font-weight: 700; color: var(--pv-color-accent); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pv-set-flow-line { display: block; width: 100%; height: 2px; background: var(--pv-color-accent); position: relative; border-radius: 2px; }
.pv-set-flow-line::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 6px solid var(--pv-color-accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* Faelligkeits-Zeitstrahl (Plan Abschnitt 3.4/3.9) -- wiederverwendet .pv-gantt
   (siehe page_home "Saisons im Zeitverlauf") statt einer eigenen Parallel-
   komponente, nur mit eigenen Status-Modifiern statt Saisonphasen-Modifiern. */
.pv-gantt-bar.is-future  { background: var(--pv-s-300); }
.pv-gantt-bar.is-empty   { background: repeating-linear-gradient(45deg, var(--pv-s-300) 0 4px, var(--pv-s-100) 4px 8px); }
.pv-gantt-bar.is-pending { background: var(--pv-warn); }
.pv-gantt-bar.is-done    { background: var(--pv-ok); }
.pv-gantt-legend .is-future::before  { background: var(--pv-s-300); }
.pv-gantt-legend .is-empty::before   { background: repeating-linear-gradient(45deg, var(--pv-s-300) 0 3px, var(--pv-s-100) 3px 6px); }
.pv-gantt-legend .is-pending::before { background: var(--pv-warn); }
.pv-gantt-legend .is-done::before    { background: var(--pv-ok); }
/* "heute"-Linie braucht einen schmalen Strich statt des runden Farbpunkts. */
.pv-gantt-legend-now::before { width: 2px; height: 10px; border-radius: 0; background: var(--pv-s-900); }


/* ── Modal ──────────────────────────────────────────────────────────────── */
.pv-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: var(--pv-sp-4);
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(3px);
}
.pv-modal-overlay.is-active { display: flex; }
.pv-modal {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 26px;
    border-radius: var(--pv-r-md);
    background: #fff;
    box-shadow: var(--pv-sh-modal);
}
.pv-modal-body { display: grid; gap: var(--pv-sp-3); }
.pv-modal-foot {
    display: flex; gap: var(--pv-sp-3); flex-wrap: wrap;
    margin-top: var(--pv-sp-5);
    padding-top: var(--pv-sp-4);
    border-top: var(--pv-bw-1) solid var(--pv-s-200);
}
/* Element-qualifiziert: `.pv-container select` (0,1,1) wuerde eine reine
   Klasse schlagen. */
.pv-mt-2,
select.pv-mt-2,
input.pv-mt-2,
textarea.pv-mt-2 { margin-top: 6px; }
/* Icon in Meldungen: Groesse fixieren, damit es nicht mitwaechst */
.pv-notice .ic,
.pv-notice > .pv-icon { flex: none; margin-top: 1px; }
.pv-notice--ok .pv-icon   { color: var(--pv-ok-text); }
.pv-notice--warn .pv-icon { color: var(--pv-warn-text); }
.pv-notice--err .pv-icon  { color: var(--pv-err-text); }
.pv-notice--info .pv-icon { color: var(--pv-info-text); }
.pv-bulkbar .pv-btn--sm:not(.pv-btn--primary) {
    background: rgba(255,255,255,.12);
    border-color: transparent;
    color: #fff;
}
.pv-bulkbar .pv-btn--sm:not(.pv-btn--primary):hover { background: rgba(255,255,255,.2); color: #fff; }

/* Vorschau auf noch nicht abgerechnete Perioden. Bewusst ohne Betrag und
   ohne Auswahl — die Belege existieren noch nicht. */
.pv-preview {
    padding: 16px 19px;
    border: var(--pv-bw-1) dashed var(--pv-s-300);
    border-radius: var(--pv-r-md);
    background: var(--pv-s-50);
}
.pv-preview-title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: var(--pv-sp-3);
    font-size: var(--pv-text-eyebrow);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pv-s-500);
}
.pv-preview-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--pv-sp-3); flex-wrap: wrap;
    padding: 7px 0;
    border-top: var(--pv-bw-1) solid var(--pv-s-200);
    font-size: 13px; color: var(--pv-s-600);
}
.pv-preview-row:first-of-type { border-top: none; }
.pv-preview-hint { font-size: 12px; color: var(--pv-s-400); }

/* ─────────────────────────────────────────────────────────────────────────
   FÄLLIGKEITS-ZEITLEISTE — Werte 1:1 aus dem Styleguide
   ───────────────────────────────────────────────────────────────────────── */
.pv-duebar { display: flex; gap: 3px; align-items: flex-end; height: 52px; }
.pv-duebar-col {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; justify-content: flex-end;
}
.pv-duebar-col .pv-duebar-fill {
    width: 100%;
    min-height: 4px;
    border-radius: 5px 5px 0 0;
    background: var(--pv-s-200);
}
.pv-duebar-col.is-now .pv-duebar-fill { background: var(--pv-accent-grad); }
.pv-duebar-col.is-late .pv-duebar-fill { background: var(--pv-err-text); }
.pv-duebar-lbls { display: flex; gap: 3px; margin-top: 6px; }
.pv-duebar-lbls span { flex: 1; text-align: center; font-size: 10px; font-weight: 600; color: var(--pv-s-400); }

/* ── Kennzeichnungen auf Belegzeilen ───────────────────────────────────── */
.pv-flag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: var(--pv-fs-label); font-weight: var(--pv-fw-label);
    letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.pv-flag--manual { background: var(--pv-s-100); color: var(--pv-s-500); }
.pv-flag--recalc { background: var(--pv-tint-warn-bg); color: var(--pv-tint-warn-fg); }
.pv-flag--locked { background: var(--pv-s-100); color: var(--pv-s-400); }
.pv-flag--preview { background: var(--pv-s-100); color: var(--pv-s-400); }


/* Vorschauzeile: sichtbar, aber gedämpft und nicht auswählbar */
.pv-docrow.is-preview { opacity: .62; }
.pv-docrow.is-preview .pv-docrow-amount { font-weight: 500; }

/* ── Sortier-Auswahl in der Werkzeugleiste ─────────────────────────────── */
.pv-sortsel,
select.pv-sortsel {
    padding: 9px 13px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    color: var(--pv-s-600);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    max-width: 220px;
}
/* Kompakte Karte ohne trennenden Kopf — z. B. fuer eine Diagrammflaeche */
.pv-card--tight { padding: 19px 21px; }
.pv-card-header--plain { margin-bottom: 14px; padding-bottom: 0; border-bottom: none; }
/* Ueberschrift ohne Akzentbalken — im Entwurf traegt nur der Kartentitel
   einer Sektion den Balken, eine Diagrammbeschriftung nicht. */
.pv-section-title--plain::before,
h1.pv-section-title--plain::before,
h2.pv-section-title--plain::before,
h3.pv-section-title--plain::before,
.pv-section-title--plain::after,
h1.pv-section-title--plain::after,
h2.pv-section-title--plain::after,
h3.pv-section-title--plain::after { display: none; }

/* Personen-Kaestchen: waehlt alle Belege der Person. Etwas groesser als die
   Zeilen-Kaestchen, weil es die uebergeordnete Aktion ist. */
.pv-person-check,
input[type="checkbox"].pv-person-check {
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    accent-color: var(--pv-color-accent);
    cursor: pointer;
}
.pv-person-check:disabled { opacity: .35; cursor: default; }


/* ─────────────────────────────────────────────────────────────────────────
   AUSWERTUNGEN — kompakte Panels neben der Faelligkeits-Zeitleiste
   ───────────────────────────────────────────────────────────────────────── */
.pv-chartgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--pv-sp-3);
}
.pv-chart {
    display: flex; flex-direction: column; gap: 12px;
    padding: 17px 19px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
}
.pv-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pv-chart-title { font-size: var(--pv-fs-title); font-weight: var(--pv-fw-title); color: var(--pv-s-800); }
.pv-chart-note  { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pv-s-400); }
.pv-chart-body  { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
/* Zahlen bleiben linksbuendig, aber auf gleicher Ziffernbreite */
.pv-table td.pv-num { font-variant-numeric: tabular-nums; }
.pv-chart-empty { font-size: 12.5px; color: var(--pv-s-400); }

/* Gestapelter Anteilsbalken mit Legende — Verteilung auf wenige Klassen */
.pv-splitbar { display: flex; height: 8px; border-radius: var(--pv-r-pill); background: var(--pv-s-100); overflow: hidden; }
.pv-splitbar-seg { display: block; height: 100%; background: var(--pv-s-300); }
.pv-splitbar-seg.is-late { background: var(--pv-err); }
.pv-splitbar-seg.is-soon { background: var(--pv-warn); }
.pv-splitbar-seg.is-ok   { background: var(--pv-ok); }
.pv-splitlegend {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    font-size: var(--pv-fs-meta); font-weight: var(--pv-fw-meta); color: var(--pv-s-500);
}
.pv-splitlegend span { display: inline-flex; align-items: center; gap: 6px; }
.pv-splitlegend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-s-300); }
.pv-splitlegend .is-late::before { background: var(--pv-err); }
.pv-splitlegend .is-soon::before { background: var(--pv-warn); }
.pv-splitlegend .is-ok::before   { background: var(--pv-ok); }
.pv-splitlegend b { color: var(--pv-s-700); font-variant-numeric: tabular-nums; }

/* Waagerechte Balkenzeile: Beschriftung, Balken, Wert */
.pv-hbar {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.pv-hbar--wide { grid-template-columns: 118px minmax(0, 1fr) auto; }
.pv-hbar-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pv-s-600); }
.pv-hbar-track { height: 8px; border-radius: var(--pv-r-pill); background: var(--pv-s-100); overflow: hidden; }
.pv-hbar-fill  { display: block; height: 100%; border-radius: var(--pv-r-pill); background: var(--pv-s-300); }
.pv-hbar-fill.is-soon   { background: var(--pv-warn); }
.pv-hbar-fill.is-late   { background: var(--pv-err); }
.pv-hbar-fill.is-worst  { background: var(--pv-err-press); }
.pv-hbar-fill.is-accent { background: var(--pv-accent-grad); }
.pv-hbar-val { font-weight: 700; color: var(--pv-s-800); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Senkrechtes Balkendiagramm — Werte je Kategorie im Zeitverlauf (z. B. eine
   Kennzahl je Saison). Balken wachsen von der Grundlinie, Wert direkt darueber,
   Beschriftung darunter. is-current hebt die aktuelle Kategorie in Korall hervor,
   alle anderen bleiben in Slate — Zustand ist die Ausnahme, nicht der Normalfall. */
.pv-vbars {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: var(--pv-sp-4);
    min-height: 150px;
}
.pv-vbar {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pv-vbar-barwrap {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.pv-vbar-val { font-size: 11.5px; font-weight: 700; color: var(--pv-s-700); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.pv-vbar-bar {
    width: 100%;
    max-width: 38px;
    min-height: 3px;
    border-radius: var(--pv-r-xs) var(--pv-r-xs) 0 0;
    background: var(--pv-s-300);
}
.pv-vbar.is-current .pv-vbar-bar { background: var(--pv-accent-grad); }
.pv-vbar.is-current .pv-vbar-val,
.pv-vbar.is-current .pv-vbar-lbl { color: var(--pv-s-800); font-weight: 700; }
.pv-vbar-lbl {
    margin-top: 8px;
    font-size: 11px;
    color: var(--pv-s-400);
    text-align: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kompakte Aktionsliste — Icon-Kachel + Beschriftung, zwei je Zeile.
   Fuer ein Panel voller Kurzbefehle (z. B. Schnellzugriff), nicht fuer
   Navigation mit Beschreibungstext (dafuer pv-selcard). */
.pv-quicklist {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: 4px 10px;
}
.pv-quickrow {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: var(--pv-r-sm);
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}
.pv-quickrow:hover { background: var(--pv-s-50); color: inherit; }
.pv-quickrow-icon {
    width: 30px; height: 30px;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--pv-r-sm);
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-quickrow-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pv-s-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Exportstand: eine grosse Zahl, darunter der Balken */
.pv-standnum {
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 26px; font-weight: 800; line-height: 1.1;
    color: var(--pv-s-900);
    font-variant-numeric: tabular-nums;
}
.pv-standsub { font-size: 12px; color: var(--pv-s-400); }

/* ── Belegdetails: Zusammensetzung, Korrekturen, Verlauf ────────────────── */
.pv-docdetail {
    grid-column: 2 / -1;
    grid-row: 3;
    margin: -2px 0 8px;
    padding: 10px 13px;
    border-radius: var(--pv-r-xs);
    background: var(--pv-s-50);
    font-size: 12px;
    color: var(--pv-s-600);
}
.pv-docdetail[hidden] { display: none; }
.pv-docdetail-title {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--pv-s-400);
}
.pv-docline {
    display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 4px 0;
    border-top: var(--pv-bw-1) solid var(--pv-s-200);
    font-variant-numeric: tabular-nums;
}
.pv-docline:first-of-type { border-top: none; }
.pv-docline-detail { color: var(--pv-s-400); }
.pv-docline-amt { text-align: right; font-weight: 600; color: var(--pv-s-700); }
.pv-docline--sum { margin-top: 4px; border-top: var(--pv-bw-2) solid var(--pv-s-300); font-weight: 700; color: var(--pv-s-800); }
.pv-dochist { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--pv-s-500); }
.pv-dochist b { color: var(--pv-s-700); font-variant-numeric: tabular-nums; }

/* Korrekturbeleg: eingerueckt und mit Kante, damit die Zugehoerigkeit sichtbar wird */
.pv-docrow.is-correction { padding-left: 22px; box-shadow: inset 3px 0 0 var(--pv-warn); }
.pv-docref { font-size: 11px; color: var(--pv-s-400); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
   SAISON-ABSCHLUSS
   ───────────────────────────────────────────────────────────────────────── */

/* Auffaellige Zeile: getoenter Grund plus Streifen an der linken Kante.
   Die Klasse wurde bisher gesetzt, war aber nirgends definiert — die
   Anomalie sah aus wie jede andere Zeile. */
.pv-table tbody tr.is-anomaly > td { background: var(--pv-tint-warn-bg); }
.pv-table tbody tr.is-anomaly > td:first-child { box-shadow: inset 3px 0 0 var(--pv-warn); }
.pv-table tbody tr.is-anomaly:hover > td { background: #FDE9BE; }

.pv-anomaly-why {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(180,83,9,.12);
    color: var(--pv-tint-warn-fg);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Herleitung: wie kommt der Betrag zustande */
.pv-derivation { display: flex; flex-direction: column; gap: 12px; }
/* Nach oben begrenzt: zwei Bloecke ueber 1400px ziehen Beschriftung und
   Betrag so weit auseinander, dass die Zeile nicht mehr als Paar liest. */
.pv-derivation-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 460px));
    justify-content: start;
    gap: 12px;
}
.pv-deriv-block {
    padding: 11px 13px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-xs);
    background: #fff;
}
.pv-deriv-title {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--pv-s-400);
}
.pv-deriv-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px; color: var(--pv-s-600);
    font-variant-numeric: tabular-nums;
}
.pv-deriv-row b { color: var(--pv-s-800); }
.pv-deriv-row--sum {
    margin-top: 3px; padding-top: 6px;
    border-top: var(--pv-bw-2) solid var(--pv-s-300);
    font-weight: 700; color: var(--pv-s-800);
}
.pv-deriv-row--drift { color: var(--pv-err-text); }
.pv-deriv-row--drift b { color: var(--pv-err-text); }

/* Abschlussleiste: der unwiderrufliche Klick sitzt unten, hinter allem,
   was dagegen sprechen koennte. */
.pv-closebar {
    display: flex; align-items: center; gap: var(--pv-sp-3); flex-wrap: wrap;
    padding: 16px 19px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
}
.pv-closebar-text { flex: 1; min-width: 240px; font-size: 12.5px; color: var(--pv-s-500); }
.pv-closebar-text b { color: var(--pv-s-800); }
.pv-closebar .pv-inlineform { margin: 0; }

/* Fortschritt der Abrechnungsperioden je Konfiguration */
.pv-periodrow { display: flex; flex-direction: column; gap: 4px; }
.pv-periodrow-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    font-size: 12px; color: var(--pv-s-600);
}
.pv-periodrow-head b { color: var(--pv-s-800); font-variant-numeric: tabular-nums; }

/* Aufklapp-Pfeil in der Abschluss-Tabelle */
.pv-bv2-toggle .pv-icon { transition: transform .18s; }
.pv-bv2-toggle.is-open .pv-icon { transform: rotate(180deg); }

/* Auswahlkopf über der Personenliste: die Kartenansicht hat keine
   Tabellenkopfzeile, in der ein "Alle auswählen" sonst sitzen würde. */
.pv-selectbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pv-sp-3); flex-wrap: wrap;
    padding: 0 2px 12px;
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
}
.pv-selectbar-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--pv-s-600);
    cursor: pointer;
    user-select: none;
}
.pv-selectbar-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.pv-selectbar-check:hover { color: var(--pv-s-800); }
.pv-selectbar-hint {
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; color: var(--pv-s-400);
    font-variant-numeric: tabular-nums;
}


/* Löschen sitzt in einer dunklen Leiste — der Sekundärknopf wäre dort
   unlesbar und würde die Schwere der Aktion nicht abbilden. */
.pv-bulkbar .pv-bulkbar-danger,
.pv-bulkbar .pv-btn--sm.pv-bulkbar-danger {
    border-color: transparent;
    background: var(--pv-err);
    color: #fff;
}
.pv-bulkbar .pv-bulkbar-danger:hover {
    background: var(--pv-err-press);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   SAISON-KARTE

   Eine Saison ist ein Zeitraum. Die alte Kachel zeigte Start und Ende als
   zwei Textzeilen und liess damit die eigentliche Frage offen: laeuft die
   noch? Deshalb traegt die Karte einen Balken mit Heute-Marke statt eines
   70px grossen Kalendersymbols, das auf jeder Karte gleich aussah.
   ───────────────────────────────────────────────────────────────────────── */
.pv-seasongrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--pv-sp-4);
}
.pv-seasoncard {
    display: flex; flex-direction: column;
    padding: 16px 18px 15px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    box-shadow: var(--pv-sh-sm);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.pv-seasoncard:hover { box-shadow: var(--pv-sh-pop); transform: translateY(-2px); }
.pv-seasoncard.is-selected { border-color: var(--pv-color-accent); background: var(--pv-color-coral-5); }
.pv-seasoncard.is-planning { border-style: dashed; }

.pv-seasoncard-top {
    display: flex; align-items: center; gap: 8px;
    min-height: 26px;
    margin-bottom: 12px;
}
.pv-seasoncard-check { display: inline-flex; cursor: pointer; }
.pv-seasoncard-check input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--pv-color-accent);
    cursor: pointer;
}
.pv-seasoncard-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.pv-seasoncard-tools .pv-inlineform { margin: 0; display: flex; }
.pv-iconbtn--danger:hover { color: var(--pv-err-text); background: var(--pv-tint-err-bg); }

/* Zustand als Punkt plus Text — eine gefuellte Pille auf jeder Karte waere
   dieselbe Unruhe wie 58 rosa Pillen auf der Zahlungsseite. */
.pv-seasonstate {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; font-weight: 600;
    color: var(--pv-s-500);
    white-space: nowrap;
}
.pv-seasonstate::before {
    content: ""; flex: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--pv-s-300);
}
.pv-seasonstate.is-live::before { background: var(--pv-ok); }
.pv-seasonstate.is-soon::before { background: var(--pv-warn); }
.pv-seasonstate.is-done::before { background: var(--pv-s-400); }
.pv-seasonstate.is-idle::before { background: transparent; border: 1.5px dashed var(--pv-s-400); }
.pv-seasonstate.is-live { color: var(--pv-s-700); }

.pv-seasoncard-name {
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 17px; font-weight: 700;
    line-height: 1.25;
    color: var(--pv-s-900);
    overflow-wrap: anywhere;
}
.pv-seasoncard-range {
    margin-top: 3px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12.5px; color: var(--pv-s-400);
    font-variant-numeric: tabular-nums;
}

/* Verlaufsbalken mit Heute-Marke */
.pv-seasonbar {
    position: relative;
    height: 8px;
    margin-top: 14px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-100);
    overflow: hidden;
}
.pv-seasonbar-fill {
    display: block; height: 100%;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-300);
}
.is-running .pv-seasonbar-fill   { background: var(--pv-progress-grad); }
.is-completed .pv-seasonbar-fill { background: var(--pv-s-400); }
.is-past .pv-seasonbar-fill      { background: var(--pv-s-400); }
.pv-seasonbar-now {
    position: absolute; top: -2px; bottom: -2px;
    width: 2px;
    border-radius: 1px;
    background: var(--pv-s-900);
    transform: translateX(-1px);
}
.pv-seasonbar-lbls {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .03em;
    color: var(--pv-s-400);
}
.pv-seasonbar-lbls .is-now { color: var(--pv-s-700); }

.pv-seasonstats {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    margin-top: 14px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; color: var(--pv-s-500);
}
.pv-seasonstat b { color: var(--pv-s-800); font-variant-numeric: tabular-nums; }
.pv-seasonstat.is-zero { color: var(--pv-s-300); }
.pv-seasonstat.is-zero b { color: var(--pv-s-400); }

.pv-seasoncard-foot {
    display: flex; align-items: center; gap: var(--pv-sp-2); flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
}
.pv-seasoncard-foot .pv-inlineform { margin: 0; }
.pv-seasoncard-foot > .pv-btn:first-child { min-width: 96px; justify-content: center; }

/* Kachel zum Anlegen */
.pv-seasonadd {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    min-height: 190px;
    height: 100%;
    padding: 20px;
    border: var(--pv-bw-2) dashed var(--pv-s-300);
    border-radius: var(--pv-r-md);
    background: none;
    color: var(--pv-s-400);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pv-seasonadd:hover {
    border-color: var(--pv-color-accent);
    color: var(--pv-color-accent);
    background: var(--pv-color-coral-5);
}

/* ── Jahres-Zeitstrahl ─────────────────────────────────────────────────── */
.pv-gantt {
    display: flex; flex-direction: column; gap: 12px;
    padding: 17px 19px 15px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
}
.pv-gantt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pv-gantt-title { font-size: 13.5px; font-weight: 700; color: var(--pv-s-800); }
.pv-gantt-note { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pv-s-400); }

.pv-gantt-body { display: flex; flex-direction: column; gap: 7px; }
/* Die Achse laeuft nur ueber den Spurbereich, nicht ueber die Beschriftung. */
.pv-gantt-axis {
    position: relative;
    height: 14px;
    margin-left: 150px;
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
}
.pv-gantt-year {
    position: absolute; top: 0;
    padding-left: 5px;
    border-left: var(--pv-bw-1) solid var(--pv-s-200);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 10.5px; font-weight: 700;
    color: var(--pv-s-400);
    white-space: nowrap;
}
.pv-gantt-rows { position: relative; display: flex; flex-direction: column; gap: 5px; }
/* left kommt als calc(150px + (100% - 150px) * Anteil) aus PHP — .pv-gantt-rows
   selbst hat (anders als .pv-gantt-axis) kein margin-left, das seine Breite auf
   den Spurbereich verkleinert. Ein einfaches left:X% plus margin-left:150px
   rechnet den Versatz doppelt und schiesst bei X nahe 100% weit rechts aus der
   Karte heraus (sichtbar als frei stehender schwarzer Strich daneben). */
.pv-gantt-now {
    position: absolute; top: -4px; bottom: -4px;
    width: 2px;
    background: var(--pv-s-900);
    z-index: 2;
    pointer-events: none;
}
.pv-gantt-row { display: flex; align-items: center; gap: 0; }
.pv-gantt-lbl {
    flex: none; width: 150px;
    padding-right: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; color: var(--pv-s-600);
    box-sizing: border-box;
}
.pv-gantt-track { position: relative; flex: 1; height: 16px; border-radius: var(--pv-r-xs); background: var(--pv-s-50); }
.pv-gantt-bar {
    position: absolute; top: 3px;
    height: 10px;
    min-width: 6px;
    padding: 0;
    border: none;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-300);
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}
.pv-gantt-bar:hover { filter: brightness(.92); }
.pv-gantt-bar.is-picked { box-shadow: 0 0 0 3px var(--pv-color-coral-20); }
.pv-gantt-bar.is-running   { background: var(--pv-ok); }
.pv-gantt-bar.is-upcoming  { background: var(--pv-warn); }
.pv-gantt-bar.is-completed { background: var(--pv-s-400); }
.pv-gantt-bar.is-past      { background: var(--pv-s-300); }
.pv-gantt-bar.is-planning  { background: repeating-linear-gradient(45deg, var(--pv-s-400) 0 4px, var(--pv-s-200) 4px 8px); }

.pv-gantt-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 11.5px; color: var(--pv-s-500);
}
.pv-gantt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pv-gantt-legend span::before { content: ""; width: 8px; height: 8px; border-radius: var(--pv-r-pill); background: var(--pv-s-300); }
.pv-gantt-legend .is-running::before   { background: var(--pv-ok); }
.pv-gantt-legend .is-upcoming::before  { background: var(--pv-warn); }
.pv-gantt-legend .is-completed::before { background: var(--pv-s-400); }
.pv-gantt-legend .is-planning::before  { background: repeating-linear-gradient(45deg, var(--pv-s-400) 0 3px, var(--pv-s-200) 3px 6px); }

/* ─────────────────────────────────────────────────────────────────────────
   AUSWAHL-BLOCK (Picker)

   Ueberall dort, wo aus einer langen Liste ausgewaehlt wird: Spieler,
   Trainer, Plaetze, Mannschaften. Vorher waren das nackte Kartenraster
   ohne Suche und ohne Sammelauswahl — bei 58 Spielern hiess das fuenfzig
   Karten einzeln anklicken.
   ───────────────────────────────────────────────────────────────────────── */
.pv-picker {
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    overflow: hidden;
}
.pv-picker-head {
    display: flex; align-items: center; gap: var(--pv-sp-3); flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
    background: var(--pv-s-50);
}
.pv-picker-title {
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13.5px; font-weight: 700; color: var(--pv-s-800);
}
.pv-picker-count {
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; color: var(--pv-s-400);
    font-variant-numeric: tabular-nums;
}
.pv-picker-count b { color: var(--pv-s-700); }
.pv-picker-count { margin-right: auto; }
.pv-picker-head .pv-search { flex: 0 1 260px; min-width: 150px; }
.pv-picker-head .pv-search input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.pv-picker-toggle {
    flex: none;
    padding: 6px 12px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-pill);
    background: #fff;
    color: var(--pv-s-600);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.pv-picker-toggle:hover { border-color: var(--pv-s-300); background: var(--pv-s-50); color: var(--pv-s-800); }

.pv-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}
.pv-picker-grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.pv-pickcard {
    display: flex; align-items: center; gap: 9px;
    min-width: 0;
    padding: 9px 11px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .14s, background .14s;
}
.pv-pickcard:hover { border-color: var(--pv-s-300); background: var(--pv-s-50); }
.pv-pickcard input[type="checkbox"] {
    width: 15px; height: 15px; margin: 0; flex: none;
    accent-color: var(--pv-color-accent);
    cursor: pointer;
}
.pv-pickcard-text { min-width: 0; }
.pv-pickcard-name {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px; font-weight: 600; color: var(--pv-s-700);
}
.pv-pickcard-meta {
    display: block;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 11px; color: var(--pv-s-400);
}
.pv-pickcard.is-on {
    border-color: var(--pv-color-accent);
    background: var(--pv-color-coral-5);
}
.pv-pickcard.is-on .pv-pickcard-name { color: var(--pv-s-900); }

.pv-picker-empty {
    padding: 22px 14px;
    text-align: center;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12.5px; color: var(--pv-s-400);
}

/* ── Modal-Kopf im Design-System ───────────────────────────────────────── */
.pv-modal-head {
    display: flex; align-items: center; gap: 13px;
    margin-bottom: var(--pv-sp-5);
    padding-bottom: var(--pv-sp-4);
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
}
.pv-modal-head-icon {
    width: 40px; height: 40px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--pv-r-sm);
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-modal-head h2 {
    margin: 0;
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 20px; font-weight: 700;
    color: var(--pv-s-900);
}
.pv-modal-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--pv-s-500); }
/* Breite Knoepfe nur, wo das Modal es verlangt — die bestehenden Modale auf
   Zahlungen und Abrechnung behalten ihre linksbuendigen Knoepfe. */
.pv-modal-foot--stretch .pv-btn { flex: 1; min-width: 150px; justify-content: center; }

/* Formularraster im Modal. 300px ergab bei ~1020px Innenbreite drei Spalten,
   vier Felder brachen dann 3+1 um. 380px erzwingt sauber zwei Spalten. */
.pv-formgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: var(--pv-sp-4);
    margin-bottom: var(--pv-sp-5);
}
.pv-modal-form { display: flex; flex-direction: column; gap: var(--pv-sp-4); padding: 0; }
.pv-modal-form .pv-formgrid { margin-bottom: 0; }

/* Zeile aus einem Feld und einem Knopf, unten buendig */
.pv-inlinerow { display: flex; gap: var(--pv-sp-3); align-items: flex-end; flex-wrap: wrap; }
.pv-inlinerow .pv-form-group { flex: 1; min-width: 200px; margin: 0; }
.pv-inlinerow .pv-btn { white-space: nowrap; }

/* Bearbeiten-Knopf auf einer Auswahlkachel */
.pv-pickcard-edit { margin-left: auto; flex: none; }

/* Scrollbereich im Modal für nachgeladene Inhalte */
/* Stapel mit gleichmaessigem Abstand. Hiess vorher pv-modal-scroll, scrollte
   aber nie — der Modalrahmen scrollt, nicht einzelne Bloecke darin. Zwei
   ineinander liegende Scrollbereiche sind die Verschachtelung, an der man
   beim Bedienen haengenbleibt. */
.pv-stack { display: flex; flex-direction: column; gap: var(--pv-sp-5); }

/* Hoher Modalrahmen mit festem Kopf und Fuss. Ohne das steht der Inhalt in
   einem 58vh-Fensterchen, obwohl der Rahmen 90vh haette. */
.cp-modal-content.pv-modal-tall {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 72px);
    padding: 24px 26px;
    overflow: hidden;
}
.pv-modal-tall > .pv-modal-head { flex: none; margin-bottom: var(--pv-sp-5); }
.pv-modal-tall > .pv-modal-foot { flex: none; margin-top: var(--pv-sp-4); }
/* Der Scrollbereich setzt den Rhythmus zwischen den Bloecken — unabhaengig
   davon, ob er direkt im Modal oder in einem Formular darin liegt. Als
   Kind-Selektor am Modal griff die Regel im Formularfall gar nicht, und die
   Bloecke standen ohne Zwischenraum aufeinander. */
.pv-modal-scrollarea {
    display: flex;
    flex-direction: column;
    gap: var(--pv-sp-5);
}
/* Bloecke darin haben "overflow: hidden" fuer den abgerundeten Rand. Das
   setzt ihre automatische Mindesthoehe auf 0 und Flexbox quetscht sie unter
   ihre Inhaltshoehe, um in den Scrollbereich zu passen — sichtbar als
   abgeschnittene Zeitraum-, Trainer- und Plaetze-Boxen. flex-shrink: 0
   haelt die natuerliche Hoehe, der Scrollbereich scrollt stattdessen. */
.pv-modal-scrollarea > * { flex-shrink: 0; }

/* Der Mittelteil scrollt, Kopf und Fuss bleiben stehen. */
.pv-modal-tall > .pv-modal-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pv-modal-tall .pv-modal-scrollarea,
.pv-modal-tall > #planning-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}
.pv-modal-tall .pv-modal-foot { flex: none; }

/* ─────────────────────────────────────────────────────────────────────────
   PLANUNGS-LISTE (Roster)

   Personen, die bereits in einer Planung stecken: Zustand, Verfügbarkeit und
   Auswahl in einer Karte. Vorher trug jede Karte ein eigenes Formular mit
   einem Entfernen-Knopf — bei 58 Spielern 58 Klicks und 58 Neuladungen.
   ───────────────────────────────────────────────────────────────────────── */
.pv-roster {
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    overflow: hidden;
}
.pv-roster .pv-picker-head { flex-wrap: wrap; }
.pv-roster .pv-filter-pill { padding: 4px 11px; font-size: 12px; }
.pv-roster-bulk { margin: 0; }
.pv-roster .pv-bulkbar { position: static; margin: 12px 14px 0; }

.pv-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 9px;
    padding: 12px 14px;
}
.pv-rostercard {
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.pv-rostercard:hover { border-color: var(--pv-s-300); background: var(--pv-s-50); }
.pv-rostercard.is-on { border-color: var(--pv-color-accent); background: var(--pv-color-coral-5); }
/* Fehlende Verfuegbarkeit blockiert das Smart Grouping — deshalb sichtbar
   markiert, aber ohne Alarmfarbe: es ist ein To-do, kein Fehler. */
.pv-rostercard.is-missing { border-left: 3px solid var(--pv-warn); }
.pv-rostercard > input[type="checkbox"] {
    width: 15px; height: 15px; margin: 2px 0 0; flex: none;
    accent-color: var(--pv-color-accent);
    cursor: pointer;
}
.pv-rostercard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-rostercard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pv-rostercard-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13px; font-weight: 600; color: var(--pv-s-800);
}
.pv-rostercard-head .pv-seasonstate { font-size: 11px; flex: none; }
.pv-rostercard-bar { display: block; height: 5px; border-radius: var(--pv-r-pill); background: var(--pv-s-100); overflow: hidden; }
.pv-rostercard-fill { display: block; height: 100%; border-radius: var(--pv-r-pill); background: var(--pv-ok); }
.pv-rostercard-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 11.5px; color: var(--pv-s-500);
    font-variant-numeric: tabular-nums;
}
.pv-rostercard-meta b { color: var(--pv-s-800); }
.pv-rostercard-meta .is-missing { color: var(--pv-warn-text); font-weight: 600; }

/* Absendeknopf im Auswahlkopf */
.pv-picker-submit:disabled { opacity: .45; cursor: default; }

/* Formularblock mit derselben Kopfzeile wie die Auswahl-Blöcke, damit
   Modale durchgehend aus gleich gebauten, beschrifteten Blöcken bestehen. */
.pv-formblock {
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    overflow: hidden;
}
.pv-formblock-body { padding: 15px 16px; }
.pv-formblock-body .pv-formgrid { margin-bottom: 0; }
/* Aktionszeile am Fuss einer Karte oder eines Blocks. Fehlte als Basisregel —
   nur die Formblock-Ergaenzung war da, deshalb stand der Knopf links. */
.pv-card-foot {
    display: flex; justify-content: flex-end; gap: var(--pv-sp-3); flex-wrap: wrap;
    margin-top: var(--pv-sp-4);
    padding-top: var(--pv-sp-3);
    border-top: var(--pv-bw-1) solid var(--pv-s-100);
}
.pv-formblock .pv-card-foot { margin: 14px -16px -15px; padding: 12px 16px; background: var(--pv-s-50); border-top-color: var(--pv-s-200); }

/* Saison-Akkordeon — je Saison ein aufklappbarer Block, z. B. Spielstaerke
   oder Verfuegbarkeiten im Spieler-Profil. Vorher pro Vorkommen komplett
   inline gestylt (4 Dateien); das hier ist die gemeinsame Basis, alte
   Vorkommen bleiben unveraendert, bis sie an der Reihe sind. */
.pv-accordion-item {
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    overflow: hidden;
}
.pv-accordion-item + .pv-accordion-item { margin-top: 10px; }
.pv-accordion-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pv-sp-3);
    padding: 12px 14px;
    background: var(--pv-s-50);
    cursor: pointer;
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 13.5px; font-weight: 700; color: var(--pv-s-800);
    transition: background .14s;
}
.pv-accordion-header:hover { background: var(--pv-s-100); }
.pv-accordion-arrow { display: flex; flex: none; color: var(--pv-s-400); transition: transform .18s; }
.pv-accordion-header.is-open .pv-accordion-arrow { transform: rotate(180deg); }
.pv-accordion-body { padding: 15px 14px; border-top: var(--pv-bw-1) solid var(--pv-s-200); }

/* Spielstaerke-Regler im Akkordeon-Body */
.pv-strength-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 400px; }
.pv-strength-row .pv-label { margin-bottom: 0; }
.pv-strength-row-input { display: flex; align-items: center; gap: 15px; flex: 1; }
.pv-strength-row-input input[type="range"] { flex: 1; }
.pv-strength-row-input .strength-value-display { font-weight: 600; font-size: 14px; width: 20px; text-align: center; }

/* Trainingsgruppen-Anzeige im Spieler-Profil: Karten je Gruppe, gruppiert
   nach Saison. */
.pv-traininggroups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pv-traininggroups-empty {
    grid-column: 1 / -1;
    padding: 12px;
    text-align: center;
    border-radius: var(--pv-r-sm);
    border: var(--pv-bw-1) solid var(--pv-s-200);
    background: var(--pv-s-50);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12.5px; color: var(--pv-s-400);
}
.pv-traininggroups-season-label {
    grid-column: 1 / -1;
    padding: 8px 0;
    border-bottom: 2px solid var(--pv-color-accent);
    font-family: var(--pv-font-family-secondary), sans-serif;
    font-size: 12px; font-weight: 700; color: var(--pv-s-600);
    text-transform: uppercase; letter-spacing: .04em;
}
.pv-traininggroups-card {
    padding: 12px;
    border: var(--pv-bw-2) solid var(--pv-color-accent);
    border-radius: var(--pv-r-sm);
    background: var(--pv-color-coral-5);
    cursor: pointer;
    transition: transform .16s, box-shadow .16s;
}
.pv-traininggroups-card:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow-primary-sm); }
.pv-traininggroups-card-name { font-family: var(--pv-font-family-secondary), sans-serif; font-weight: 600; color: var(--pv-color-accent); margin-bottom: 4px; }
.pv-traininggroups-card-hint { font-family: var(--pv-font-family-secondary), sans-serif; font-size: 11px; color: var(--pv-s-500); }

/* Filterzeile im Auswahl-Block — eigene Zeile, damit der Kopf mit Titel,
   Zähler, Suche und Sammelknopf nicht umbricht. */
.pv-picker-filters {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: var(--pv-bw-1) solid var(--pv-s-200);
    background: var(--pv-s-50);
}
/* Folgt eine Filterzeile, traegt sie die Trennlinie — nicht beide. */
.pv-picker-filters + .pv-picker-grid { border-top: none; }
.pv-picker-filters .pv-filter-pill { padding: 4px 11px; font-size: 12px; }
.pv-picker-select { padding: 5px 10px; font-size: 12.5px; }

/* ── "Abrechnung abgeschlossen"-Karte ────────────────────────────────────── */
/* Wird von Spieler- und Trainer-Dashboard gleichermassen benutzt (Spieler sieht
   voraussichtliche Kosten, Trainer voraussichtlichen Verdienst), deshalb hier
   im Komponentenlayer statt doppelt in beiden Tier-B-Dateien.
   Eine Zeile: Icon | Text | Betrag | Knopf. Der Titel ist bewusst KEIN
   pv-section-title — Korall-Pille plus Unterstrich sind fuer Seitenabschnitte
   gedacht und wirken auf einer Meldung zu schwer. */
.pv-settled {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pv-settled-icon {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--pv-r-md);
    background: var(--pv-tint-ok-bg);
    color: var(--pv-tint-ok-fg);
}
.pv-settled-text { flex: 1; min-width: 260px; }
.pv-settled-title {
    margin: 0 0 3px;
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 15.5px; font-weight: 700; letter-spacing: -.015em;
    color: var(--pv-s-900);
}
.pv-settled-text p {
    margin: 0;
    font-size: 13px; line-height: 1.5;
    color: var(--pv-s-500);
}
.pv-settled-note { display: block; margin-top: 2px; color: var(--pv-s-400); font-size: 12.5px; }
.pv-settled-amount {
    flex: none;
    display: flex; flex-direction: column; gap: 1px; align-items: flex-end;
    padding-right: 4px;
}
.pv-settled-amount-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--pv-s-400);
}
.pv-settled-amount-value {
    font-family: var(--pv-font-family-primary), sans-serif;
    font-size: 20px; font-weight: 800;
    color: var(--pv-s-900);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pv-settled-foot { flex: none; }
.pv-settled-foot form { margin: 0; }

/* Schmal: Betrag und Knopf unter den Text, Betrag linksbuendig zum Text. */
@media (max-width: 760px) {
    .pv-settled-amount { align-items: flex-start; padding-right: 0; }
    .pv-settled-foot { width: 100%; }
}

/* ── Ladeschirm fuer lange Vorgaenge ─────────────────────────────────────
   Das Bilden der Trainingsgruppen ist ein Formular-Absenden, das serverseitig
   spuerbar dauert -- an der Testfixture rund neun Sekunden, davon acht allein
   fuer den Kalenderaufbau. Ohne Rueckmeldung sieht der Nutzer eine
   eingefrorene Seite und klickt ein zweites Mal.

   **Vollflaechig und deckend, nicht als Vorhang.** Der Vorgang ersetzt die
   Seite fuer seine Dauer; ein durchscheinender Hintergrund wuerde suggerieren,
   man koenne daneben weiterarbeiten.

   **Bewusst ohne Prozentzahl.** Der Server rechnet in *einem* Request; es gibt
   keinen Kanal, ueber den echter Fortschritt zurueckkaeme. Gezeigt wird
   deshalb nur, was wirklich bekannt ist: die Eingangsgroessen der Saison, die
   verstrichene Zeit und -- der Reihe nach -- was der Server gerade tut.
   Der Baustein .pv-progress bleibt zustaendig, wo es echten Fortschritt gibt. */

.pv-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    overflow: hidden;
    padding: 24px;
    background: var(--pv-s-50);
    animation: pv-loading-fade .2s ease-out;
}

.pv-loading.is-on {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zwei weiche Korallschleier in den Ecken — dieselbe Bildsprache wie die
   Kopfbahn, nur grossflaechiger. Rein dekorativ, liegen hinter dem Inhalt. */
.pv-loading::before,
.pv-loading::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 95, .13) 0%, rgba(255, 120, 95, 0) 68%);
    pointer-events: none;
}

.pv-loading::before { top: -22vw; left: -18vw; }
.pv-loading::after  { bottom: -26vw; right: -16vw; }

@keyframes pv-loading-fade { from { opacity: 0; } to { opacity: 1; } }

.pv-loading-inner {
    position: relative;
    z-index: 1;
    width: min(940px, 100%);
    text-align: center;
}

.pv-loading-title {
    margin: 0 0 10px;
    font-family: var(--pv-font-heading, inherit);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: var(--pv-s-900);
    letter-spacing: -.01em;
}

/* Eingangsgroessen der Saison — echte Zahlen, keine Zierde. */
.pv-loading-zahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: clamp(22px, 4vh, 40px);
    font-size: 13px;
    color: var(--pv-s-500);
}

.pv-loading-zahlen span { display: inline-flex; align-items: baseline; gap: 6px; }
.pv-loading-zahlen b { font-size: 17px; font-weight: 700; color: var(--pv-s-800); }
.pv-loading-zahlen span + span::before {
    content: "";
    width: 4px; height: 4px;
    margin-right: 14px;
    border-radius: 50%;
    background: var(--pv-s-300);
    align-self: center;
}

/* --- Die Bühne: Pool oben, Gruppenkarten unten ---------------------------
   Erzählt den Vorgang als Weg: die Spieler warten oben ohne Gruppe, lösen sich
   in kleinen Trupps heraus, gleiten nach unten in die nächste Karte und
   färben sich dabei ein. Ist eine Karte voll, legt sich ihr Rahmen darum und
   sie bleibt stehen. Sind alle acht voll, kurze Ruhe, dann von vorn.

   **Warum Zustandswechsel statt Keyframes.** Mit `animation-delay` liefe zwar
   das Füllen gestaffelt, der Rücksprung am Zyklusende aber genauso gestaffelt
   — acht Sekunden Auflösen. Hier schaltet stattdessen eine Klasse zwischen
   zwei Zuständen, die Staffelung sitzt als `transition-delay` je Element, und
   fürs Zurücksetzen wird sie auf null gesetzt. Füllen gestaffelt, Zurücksetzen
   in einem Zug.

   Höchstens vier Kacheln sind gleichzeitig unterwegs — vorher waren es
   achtunddreißig, und das war der Grund, warum es unruhig wirkte. */

.pv-loading-buehne {
    --chip: clamp(28px, 3.4vw, 44px);
    --luecke: clamp(6px, .8vw, 10px);
    --polster: clamp(11px, 1.4vw, 17px);
    --karte: calc(2 * var(--chip) + var(--luecke) + 2 * var(--polster));
    /* Ueber den Kacheln ein Streifen fuer den Gruppennamen, darunter einer
       fuer den Termin — deshalb ist die Karte hoeher als breit. */
    --karte-h: calc(2 * var(--chip) + var(--luecke) + 2.9 * var(--polster));
}

/* Beschriftung und die „und N weitere"-Zeile gehören zum Pool: sind alle
   eingeteilt, stimmt „noch ohne Gruppe" nicht mehr und beides verschwindet. */
.pv-loading-poollabel,
.pv-loading-rest {
    transition: opacity .45s ease;
    transition-delay: var(--t-ende, 0ms);
}

.is-voll .pv-loading-poollabel,
.is-voll .pv-loading-rest { opacity: 0; }

.pv-loading-poollabel {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pv-s-400);
}

.pv-loading-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--luecke);
    /* Höchstens dreizehn Kacheln je Zeile: fünfundzwanzig ergeben damit
       13 + 12 statt 12 + 12 + 1 mit einer einzelnen Kachel in Zeile drei. */
    max-width: calc(13 * var(--chip) + 12 * var(--luecke));
    margin: 0 auto 8px;
    /* Die Höhe bleibt reserviert, auch wenn der Pool leerläuft — sonst rutscht
       das ganze Feld nach oben, während unten noch Karten entstehen. Die
       verbliebenen Kacheln sitzen darin mittig statt oben zu kleben. */
    min-height: calc(2 * var(--chip) + var(--luecke));
    align-content: center;
}

/* Kacheln — im Pool wie in den Karten gleich gebaut, nur anders gefärbt. */
.pv-loading-pool i,
.pv-loading-gruppe i {
    position: relative;
    box-sizing: border-box;
    width: var(--chip);
    height: var(--chip);
    display: grid;
    place-items: center;
    border-radius: clamp(8px, 1.1vw, 12px);
    background: var(--pv-s-100);
    font-style: normal;
    font-size: clamp(9px, 1.05vw, 12px);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pv-s-400);
}

/* Der Korall-Verlauf liegt als eigene Ebene darunter und wird eingeblendet.
   Ein Farbverlauf lässt sich nicht aus einer Volltonfarbe heraus animieren —
   deshalb zwei Ebenen statt eines Übergangs auf `background`. */
.pv-loading-pool i::before,
.pv-loading-gruppe i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pv-accent-grad);
    box-shadow: 0 3px 10px rgba(255, 120, 95, .3);
    opacity: 0;
    transition: opacity .4s ease;
    transition-delay: var(--t, 0ms);
}

.pv-loading-pool i span,
.pv-loading-gruppe i span {
    position: relative;
    z-index: 1;
    transition: color .4s ease;
    transition-delay: var(--t, 0ms);
}

/* Pool: die Kachel verschwindet genau dann, wenn ihr Gegenstück unten auftaucht. */
.pv-loading-pool i {
    opacity: 1;
    transform: none;
    margin-left: 0;
    transition: opacity .3s ease, transform .34s ease,
                width .34s cubic-bezier(.4, 0, .2, 1), margin-left .34s cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--t, 0ms);
}

/* Die verbrauchte Kachel fällt aus dem Fluss, damit der Pool sichtbar
   zusammenschrumpft. Ohne das Einklappen bleiben Löcher stehen, wo Spieler
   schon eingeteilt sind — das sah kaputt aus statt leerer.
   Die negative Aussenkante frisst die Lücke, die `gap` sonst stehen liesse. */
.is-voll .pv-loading-pool i {
    opacity: 0;
    transform: scale(.5);
    width: 0;
    margin-left: calc(-1 * var(--luecke));
}

/* --- Die Gruppenkarten ------------------------------------------------- */
.pv-loading-feld {
    display: grid;
    grid-template-columns: repeat(4, var(--karte));
    gap: clamp(16px, 2.1vw, 30px);
    justify-content: center;
    margin: clamp(16px, 2.6vh, 30px) 0 clamp(18px, 3vh, 32px);
}

@media (max-width: 780px) {
    .pv-loading-feld { grid-template-columns: repeat(2, var(--karte)); }
}

.pv-loading-gruppe {
    position: relative;
    /* --karte ist das Aussenmass (zwei Kacheln, eine Luecke, zwei Polster).
       Ohne border-box kaeme der Innenabstand oben drauf: die Karte waere
       166 px breit, die Rasterspur aber 132 px — jede Karte ragte um 34 px in
       die Nachbarspur und ueberlappte trotz Lueckenmass. */
    box-sizing: border-box;
    width: var(--karte);
    height: var(--karte-h);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--luecke);
    /* Oben der Gruppenname, unten der Termin. */
    padding: calc(var(--polster) * 1.55) var(--polster) calc(var(--polster) * 1.35);
}

/* Der Platz ist von Anfang an da — nur leer. Erst wenn die Spieler
   beieinander sind, wird daraus eine Karte: weißer Grund, Schatten, voller
   Kontrast. Ohne den leeren Platz klafft unter dem Pool ein Loch, und man
   sieht nicht, worauf die Spieler zulaufen. */
.pv-loading-gruppe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: clamp(13px, 1.7vw, 20px);
    background: transparent;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    box-shadow: none;
    opacity: .5;
    transform: scale(.97);
    transition: opacity .42s ease, transform .42s cubic-bezier(.22, .9, .3, 1),
                background-color .42s ease, box-shadow .42s ease;
    transition-delay: var(--tk, 0ms);
}

.is-voll .pv-loading-gruppe::before {
    opacity: 1;
    transform: none;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

/* Der Gruppenname erscheint zuletzt — erst wenn alle Spieler der Karte
   angekommen sind, steht fest, wie die Gruppe heisst. Er sitzt oben mittig
   ueber den Kacheln und schiebt sie nicht: die Karte hat oben Platz dafuer. */
.pv-loading-gruppename {
    position: absolute;
    top: calc(var(--polster) * .45);
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(8.5px, .95vw, 11px);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pv-s-500);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .34s ease, transform .34s cubic-bezier(.22, .9, .3, 1);
    transition-delay: var(--tn, 0ms);
    pointer-events: none;
    z-index: 2;
}

.is-voll .pv-loading-gruppename {
    opacity: 1;
    transform: none;
}

/* Der Termin kommt zuletzt — erst steht die Gruppe, dann ihr Name, dann ihre
   Zeit. Dieselbe Reihenfolge, in der auch der Algorithmus arbeitet.
   Er wischt von oben nach unten auf: `clip-path` gibt den Text zeilenweise
   frei, statt ihn nur einzublenden. */
.pv-loading-gruppezeit {
    position: absolute;
    bottom: calc(var(--polster) * .35);
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(8.5px, .95vw, 11px);
    font-weight: 600;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: var(--pv-s-400);
    clip-path: inset(0 0 100% 0);
    transform: translateY(-4px);
    transition: clip-path .42s cubic-bezier(.22, .9, .3, 1),
                transform .42s cubic-bezier(.22, .9, .3, 1);
    transition-delay: var(--tz, 0ms);
    pointer-events: none;
    z-index: 2;
}

.is-voll .pv-loading-gruppezeit {
    clip-path: inset(0 0 0 0);
    transform: none;
}

/* Die Kachel startet oben beim Pool (--vx/--vy als Vielfache der Kachelbreite)
   und gleitet an ihren Platz. */
.pv-loading-gruppe i {
    opacity: 0;
    transform: translate(calc(var(--vx) * var(--chip)), calc(var(--vy) * var(--chip))) scale(.72);
    transition: opacity .42s ease, transform .66s cubic-bezier(.22, .9, .3, 1);
    transition-delay: var(--t, 0ms);
}

.is-voll .pv-loading-gruppe i {
    opacity: 1;
    transform: none;
}

.is-voll .pv-loading-gruppe i::before { opacity: 1; }
.is-voll .pv-loading-gruppe i span   { color: #fff; }

/* Zurücksetzen: ohne Staffelung, damit die Bühne in einem Zug leer wird
   statt noch einmal acht Sekunden lang. */
.is-zurueck .pv-loading-pool i,
.is-zurueck .pv-loading-pool i::before,
.is-zurueck .pv-loading-pool i span,
.is-zurueck .pv-loading-gruppename,
.is-zurueck .pv-loading-gruppezeit,
.is-zurueck .pv-loading-gruppe::before,
.is-zurueck .pv-loading-gruppe i,
.is-zurueck .pv-loading-gruppe i::before,
.is-zurueck .pv-loading-gruppe i span {
    transition-duration: .3s;
    transition-delay: 0ms;
}

.pv-loading-rest {
    margin: 0 0 clamp(20px, 4vh, 34px);
    font-size: 12px;
    color: var(--pv-s-400);
}

.pv-loading-step {
    min-height: 20px;
    margin: 0 0 16px;
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--pv-s-600);
    transition: opacity .25s ease;
}

.pv-loading-step.is-wechsel { opacity: 0; }

.pv-loading-fuss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.pv-loading-bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--pv-s-200);
    overflow: hidden;
}

.pv-loading-bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 34%;
    border-radius: 999px;
    background: var(--pv-accent-grad);
    animation: pv-loading-sweep 1.5s ease-in-out infinite;
}

@keyframes pv-loading-sweep {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(330%); }
}

.pv-loading-zeit {
    flex: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--pv-s-400);
    min-width: 62px;
    text-align: left;
}

/* Sehr flache Fenster: das Feld darf schrumpfen, der Text bleibt. */
@media (max-height: 560px) {
    .pv-loading-feld { --chip: clamp(22px, 3.4vw, 32px); }
    .pv-loading-zahlen { margin-bottom: 16px; }
}

/* Wer Bewegung reduziert haben will, bekommt den Schirm ohne Animation —
   die Aussage "es passiert etwas" traegt dann der Sekundenzaehler. */
/* Wer Bewegung reduziert haben will, bekommt den Endzustand als Standbild:
   Pool leer, alle Karten gefüllt. Auch ohne Bewegung ist damit klar, worum es
   geht — die Aussage „es passiert etwas" trägt dann der Sekundenzähler. */
@media (prefers-reduced-motion: reduce) {
    .pv-loading,
    .pv-loading-bar::after { animation: none; }

    .pv-loading-pool i,
    .pv-loading-pool i::before,
    .pv-loading-pool i span,
    .pv-loading-gruppe,
    .pv-loading-gruppe::before,
    .pv-loading-gruppe i,
    .pv-loading-gruppe i::before,
    .pv-loading-gruppe i span { transition: none !important; }

    .pv-loading-pool i { opacity: 0; width: 0; margin-left: calc(-1 * var(--luecke)); }
    .pv-loading-poollabel, .pv-loading-rest { opacity: 0; transition: none; }
    .pv-loading-gruppename { opacity: 1; transform: none; transition: none; }
    .pv-loading-gruppezeit { clip-path: none; transform: none; transition: none; }
    .pv-loading-gruppe::before { opacity: 1; transform: none; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
    .pv-loading-gruppe i { opacity: 1; transform: none; }
    .pv-loading-gruppe i::before { opacity: 1; }
    .pv-loading-gruppe i span { color: #fff; }

    .pv-loading-bar::after { width: 100%; opacity: .5; }
}

/* =========================================================================
   Diagnose "Wer noch keine Gruppe hat" (Planung abschliessen)
   ------------------------------------------------------------------------
   Baut auf .pv-accordion-* und .pv-notice auf und ergaenzt nur, was dort
   fehlt: der Kopf ist hier ein <button> (Tastaturbedienung), und die
   Spielerliste braucht drei Textebenen -- Name, Eckdaten, Begruendung.
   ====================================================================== */

.pv-diag-list { margin-top: var(--pv-sp-4); display: flex; flex-direction: column; gap: 10px; }
.pv-diag-list .pv-accordion-item + .pv-accordion-item { margin-top: 0; }

/* Der Kopf ist ein Knopf, damit er per Tastatur erreichbar ist. Die
   Browser-Vorgaben fuer <button> muessen dafuer zurueckgesetzt werden. */
.pv-diag-head {
    width: 100%;
    border: 0;
    text-align: left;
    font-family: inherit;
    appearance: none;
}
.pv-diag-head-text { display: flex; align-items: center; gap: var(--pv-sp-2); min-width: 0; }
.pv-diag-head-text > svg { flex: none; color: var(--pv-s-500); }

/* --pv-color-text-secondary waere hier falsch: der Token ist trotz seines
   Namens der Korall-Akzent (#FF785F), kein Grauton. Fliesstext nimmt
   --pv-color-text-muted. */
.pv-diag-erklaerung {
    margin: 0 0 var(--pv-sp-3);
    font-size: var(--pv-fs-body);
    color: var(--pv-color-text-muted);
    line-height: 1.55;
}

/* .pv-notice ist ein Flex-Container. Ohne flex-grow schrumpft der Inhalt auf
   seine Textbreite, und die Loesungsboxen enden mitten in der Karte. */
.pv-diag-loesung { flex: 1 1 auto; min-width: 0; }
.pv-diag-wirkung { margin-top: 4px; color: var(--pv-color-text-primary); }
.pv-diag-loesung .pv-btn { margin-top: var(--pv-sp-3); }

.pv-diag-spieler {
    margin: var(--pv-sp-4) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pv-diag-spieler li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pv-sp-2);
    padding: 7px 10px;
    border-radius: var(--pv-r-sm);
    background: var(--pv-s-50);
    font-size: var(--pv-fs-meta);
}
.pv-diag-name { font-weight: 600; color: var(--pv-color-text-primary); }
.pv-diag-meta { color: var(--pv-color-text-muted); }
.pv-diag-detail {
    flex: 1 1 100%;
    color: var(--pv-color-text-muted);
}

/* Kurzes Aufblitzen des Reglers, den "Regler uebernehmen" gesetzt hat --
   ohne das springt die Seite zwar hin, aber man sieht nicht, was sich
   geaendert hat. */
.pv-diag-blitz {
    animation: pv-diag-blitz 1.6s ease-out;
    border-radius: var(--pv-r-md);
}
@keyframes pv-diag-blitz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 92, 0); }
    15%      { box-shadow: 0 0 0 4px rgba(255, 107, 92, .35); }
    60%      { box-shadow: 0 0 0 4px rgba(255, 107, 92, .18); }
}

.pv-diag-optionen {
    margin: var(--pv-sp-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pv-diag-optionen li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-sp-3);
    padding: 8px 10px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    background: #fff;
}
.pv-diag-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-diag-opt-titel { font-weight: 600; color: var(--pv-color-text-primary); }
.pv-diag-opt-wirkung { font-size: var(--pv-fs-meta); color: var(--pv-color-text-muted); }
.pv-diag-optionen .pv-btn { flex: none; }

.pv-diag-mehr { margin-top: var(--pv-sp-3); }
.pv-diag-mehr > summary {
    cursor: pointer;
    font-size: var(--pv-fs-meta);
    font-weight: 600;
    color: var(--pv-primary);
    list-style: none;
}
.pv-diag-mehr > summary::-webkit-details-marker { display: none; }
.pv-diag-mehr > summary::before { content: "+ "; }
.pv-diag-mehr[open] > summary::before { content: "– "; }
.pv-diag-mehr .pv-diag-spieler { margin-top: 6px; }

/* =========================================================================
   Legende unter dem Verfuegbarkeits-Raster
   ------------------------------------------------------------------------
   Die Zellen faerben sich nach der Zahl passender Mitspieler (siehe
   applyHeat() in assets/availability-score.js). Ohne diese Erklaerung liest
   man dunkel als "belegt" und meidet genau die Stunden, die gemeint sind.
   ====================================================================== */

.pv-avail-legende {
    margin-top: var(--pv-sp-3);
    padding: 10px 12px;
    border-radius: var(--pv-r-md);
    background: var(--pv-s-50);
    border: var(--pv-bw-1) solid var(--pv-s-200);
}
.pv-avail-legende-skala {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.pv-avail-legende-feld {
    width: 22px;
    height: 12px;
    border-radius: 3px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
}
.pv-avail-legende-text {
    font-size: var(--pv-fs-meta);
    color: var(--pv-color-text-muted);
}
.pv-avail-legende-text:first-child { margin-right: 2px; }
.pv-avail-legende-text:last-child  { margin-left: 2px; }
.pv-avail-legende-text-block {
    margin: 0;
    font-size: var(--pv-fs-meta);
    line-height: 1.5;
    color: var(--pv-color-text-muted);
}
.pv-avail-legende-text-block strong { color: var(--pv-color-text-primary); }

/* Gesaettigte Stunde: hier kommt schon genug zusammen. Bewusst weder dunkel
   (das waere der Koeder, den wir gerade abschaffen) noch schlicht leer (das
   laese sich als "nichts los"). Ein ruhiger gruener Rahmen statt Fuellung --
   erkennbar, aber nicht anziehend. */
.pv-avail-grid-cell.is-voll {
    background: rgba(22, 163, 74, .07);
    box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, .35);
}
.pv-avail-legende-feld--voll {
    background: rgba(22, 163, 74, .07);
    box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, .35);
}

/* =========================================================================
   Wunschpartner-Uebersicht (Saison bearbeiten)
   ------------------------------------------------------------------------
   Eine schlichte Paarliste mit Zustandsmarke rechts. Bewusst keine Tabelle:
   es sind zwei Namen und ein Wort, und eine Tabelle brauechte auf schmalen
   Fenstern einen eigenen Scrollbehaelter fuer nichts.
   ====================================================================== */

.pv-wish-list {
    list-style: none;
    margin: var(--pv-sp-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pv-sp-1);
}
.pv-wish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-sp-3);
    padding: 9px 12px;
    border-radius: var(--pv-r-sm);
    background: var(--pv-s-50);
}
.pv-wish-names {
    min-width: 0;
    color: var(--pv-s-700);
}
/* Das Verbindungszeichen tritt zurueck -- gelesen werden die Namen. */
.pv-wish-amp {
    margin: 0 6px;
    color: var(--pv-s-400);
}
.pv-wish-state {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--pv-fs-meta);
    font-weight: var(--pv-fw-meta);
}
.pv-wish-state.is-ok    { color: var(--pv-ok-text); }
.pv-wish-state.is-offen { color: var(--pv-s-400); }
.pv-wish-subhead { margin-top: var(--pv-sp-5); }

/* ─────────────────────────────────────────────────────────────────────────
   EXPORT-MENÜ
   Ein Knopf in der Werkzeugleiste, darunter ein kleines Menü. Bewusst kein
   Auswahlfeld: "Export" ist eine Handlung, keine Einstellung — und ein
   zweiter Knopf je Format hätte die Leiste umbrechen lassen.
   ───────────────────────────────────────────────────────────────────────── */
.pv-exportmenu { position: relative; display: inline-flex; }
.pv-exportmenu-trigger { gap: 6px; }
.pv-exportmenu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 268px;
    /* border-box, damit die vom Skript gesetzte Hoehe die tatsaechliche ist —
       mit content-box kaemen Polsterung und Rahmen obendrauf, und das Menue
       ragte genau um diese 14 px zu weit. */
    box-sizing: border-box;
    /* Die Hoehe setzt das JavaScript beim Oeffnen aus dem Platz, der unter
       dem Knopf tatsaechlich frei ist (siehe pv-export.js). Der Wert hier ist
       nur der Rueckfall, falls das Skript nicht laeuft. */
    max-height: 72vh;
    overflow-y: auto;
    padding: 6px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    background: #fff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
}
.pv-exportmenu-panel.is-oben { top: auto; bottom: calc(100% + 6px); }
.pv-exportmenu-panel[hidden] { display: none; }
.pv-exportmenu-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--pv-r-sm);
    color: var(--pv-s-700);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.pv-exportmenu-item:hover { background: var(--pv-s-100); color: var(--pv-s-800); }
.pv-exportmenu-item .pv-icon { flex: none; margin-top: 2px; color: var(--pv-color-accent); }
.pv-exportmenu-item small {
    display: block;
    margin-top: 1px;
    color: var(--pv-s-400);
    font-size: 11.5px;
    font-weight: 500;
}
/* Die Bankdaten-Zeile wird abgesetzt, nicht versteckt: sie ist erreichbar,
   aber niemand klickt sie versehentlich statt des normalen Exports. */
.pv-exportmenu-sep {
    margin: 6px 4px 2px;
    padding-top: 8px;
    border-top: var(--pv-bw-1) solid var(--pv-s-200);
    color: var(--pv-s-400);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   EINRICHTUNGS-CHECKLISTE (Dashboard)
   Erledigte Schritte schrumpfen auf den Titel zusammen, offene tragen
   Begründung und Knopf. Der Kontrast zwischen beiden ist der Punkt: man soll
   sehen, was noch fehlt, ohne zu lesen, was schon da ist.
   ───────────────────────────────────────────────────────────────────────── */
.pv-setup { border-left: 3px solid var(--pv-color-accent); }
.pv-setup-head { align-items: flex-start; }
.pv-setup-sub { margin: 2px 0 0; color: var(--pv-s-500); font-size: 13px; }
.pv-setup-prozent {
    flex: none;
    color: var(--pv-color-accent);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pv-setup-bar {
    height: 5px;
    margin: 2px 0 var(--pv-sp-4);
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-200);
    overflow: hidden;
}
.pv-setup-bar span {
    display: block;
    height: 100%;
    border-radius: var(--pv-r-pill);
    background: var(--pv-accent-grad);
    transition: width .4s ease;
}
.pv-setup-liste { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pv-setup-schritt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-top: var(--pv-bw-1) solid var(--pv-s-100);
}
.pv-setup-schritt:first-child { border-top: 0; }
.pv-setup-marke {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--pv-color-coral-5, #FFF1ED);
    color: var(--pv-color-accent);
}
.pv-setup-schritt.is-fertig .pv-setup-marke { background: var(--pv-tint-ok-bg); color: var(--pv-tint-ok-fg); }
.pv-setup-schritt.is-fertig .pv-setup-titel { color: var(--pv-s-400); text-decoration: line-through; }
.pv-setup-schritt.is-fertig { padding: 7px 0; }
/* Ausser wenn der erledigte Schritt noch etwas mitbringt (Anmeldelink). */
.pv-setup-schritt.is-fertig:has(.pv-setup-link) { padding: 13px 0; }
.pv-setup-text { flex: 1; min-width: 0; }
.pv-setup-titel { display: block; font-size: 14px; font-weight: 700; color: var(--pv-s-800); }
.pv-setup-optional {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-100);
    color: var(--pv-s-500);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.pv-setup-warum { display: block; margin-top: 2px; color: var(--pv-s-500); font-size: 12.5px; line-height: 1.5; }
.pv-setup-aktion { flex: none; white-space: nowrap; }
.pv-setup-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: var(--pv-r-sm);
    background: var(--pv-tint-warn-bg);
    color: var(--pv-tint-warn-fg);
    font-size: 12.5px;
    line-height: 1.5;
}
.pv-setup-hinweis .pv-icon { flex: none; margin-top: 2px; }
.pv-setup-link { margin-top: 10px; }
.pv-setup-link-label {
    display: block;
    margin-bottom: 4px;
    color: var(--pv-s-500);
    font-size: 11.5px;
    font-weight: 700;
}
.pv-setup-link-row { display: flex; gap: 8px; align-items: center; }
.pv-setup-link-input {
    flex: 1;
    min-width: 0;
    font-family: var(--pv-font-family-secondary), monospace;
    font-size: 12.5px;
}
.pv-setup-copy { flex: none; gap: 5px; }

@media (max-width: 720px) {
    .pv-setup-schritt { flex-wrap: wrap; }
    .pv-setup-aktion { margin-left: 42px; }
    .pv-setup-link-row { flex-wrap: wrap; }
}
/* Die beiden Anleitungsblätter unter dem Anmeldelink. Bewusst als Textzeile
   und nicht als weitere Knöpfe: der Kopierknopf daneben ist die Hauptsache. */
.pv-setup-blaetter {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: var(--pv-s-500);
    font-size: 12px;
}
.pv-setup-blaetter .pv-icon { color: var(--pv-s-400); }
.pv-setup-blaetter a { color: var(--pv-color-accent); font-weight: 600; text-decoration: none; }
.pv-setup-blaetter a:hover { text-decoration: underline; }

/* Datenschutz-Schritt der Checkliste: "schon eingefuegt, nur noch nicht
   veroeffentlicht" ist eine gute Nachricht, kein Warnhinweis -- deshalb der
   OK-Farbton statt des sonst genutzten Warn-Tons von .pv-setup-hinweis. */
.pv-setup-hinweis--ok { background: var(--pv-tint-ok-bg); color: var(--pv-tint-ok-fg); }

/* ─────────────────────────────────────────────────────────────────────────
   EINRICHTUNGSDIALOG DER FRONTEND-SEITE
   Zweispaltig: links die Felder, rechts eine echte Live-Vorschau der
   eigenen Startseite (Iframe, gleicher Ursprung) mit einer Markierungslinie
   für den gewählten Abstand. Unter ~880px Modalbreite fällt es einspaltig.
   ───────────────────────────────────────────────────────────────────────── */
.pv-frontend-setup-modal { max-width: 900px; }
.pv-frontend-setup-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--pv-sp-5);
    align-items: start;
}
@media (max-width: 720px) {
    .pv-frontend-setup-body { grid-template-columns: 1fr; }
}
.pv-frontend-setup-felder { display: grid; gap: var(--pv-sp-4); }
.pv-frontend-setup-vorschau { display: grid; gap: 6px; align-content: start; }
.pv-frontend-setup-vorschau-ansicht {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--pv-r-pill);
    background: var(--pv-s-100);
    width: fit-content;
}
.pv-frontend-setup-tab {
    padding: 5px 11px;
    border: 0;
    border-radius: var(--pv-r-pill);
    background: transparent;
    color: var(--pv-s-500);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.pv-frontend-setup-tab.is-aktiv { background: #fff; color: var(--pv-s-800); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.pv-frontend-setup-vorschau-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    font-weight: 700;
    color: var(--pv-s-600);
}
.pv-frontend-setup-vorschau-rahmen {
    position: relative;
    height: 340px;
    border: var(--pv-bw-2) solid var(--pv-s-200);
    border-radius: var(--pv-r-md);
    overflow: hidden;
    background: var(--pv-s-50);
}
/* Die Startseite wird in voller Breite geladen und per transform verkleinert
   -- eine echte Vorschau statt eines schmalen, verzerrten Iframes. 1400px
   Referenzbreite auf 300px Rahmen ergibt den festen Skalierungsfaktor unten. */
.pv-frontend-setup-vorschau-rahmen iframe {
    position: absolute;
    top: 0; left: 0;
    width: 1400px;
    height: 1587px; /* Rahmenhoehe 340px durch den Skalierungsfaktor 0.214 */
    border: 0;
    transform: scale(0.214);
    transform-origin: top left;
    pointer-events: none;
    background: #fff;
}
.pv-frontend-setup-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: var(--pv-bw-1) solid var(--pv-s-200);
    border-radius: var(--pv-r-sm);
    cursor: pointer;
}
.pv-frontend-setup-checkbox input { margin-top: 3px; flex: none; }
.pv-frontend-setup-checkbox b { display: block; font-size: 13.5px; color: var(--pv-s-800); }
.pv-frontend-setup-checkbox .pv-hint { display: block; margin-top: 2px; }
.pv-frontend-setup-checkbox.is-disabled { cursor: default; opacity: .7; }

/* ─────────────────────────────────────────────────────────────────────────
   BEISPIELANSICHT IN DER LIVE-VORSCHAU (Einrichtungsdialog)
   Nur in der Vorschau-Iframe sichtbar (lib/planvion-frontend-vorschau.php),
   nie auf einer echten Seite -- deshalb bewusst auffällig, nicht dezent.
   ───────────────────────────────────────────────────────────────────────── */
.pv-vorschau-band {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--pv-s-800);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.pv-vorschau-band .pv-icon { flex: none; opacity: .8; }
.pv-vorschau-training {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 4px 8px;
}
.pv-vorschau-training-datum {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--pv-r-md);
    background: var(--pv-accent-grad);
    color: #fff;
}
.pv-vorschau-training-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.pv-vorschau-training-nr { font-size: 19px; font-weight: 800; line-height: 1.1; }
.pv-vorschau-training-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pv-vorschau-training-info b { font-size: 14px; color: var(--pv-s-800); }