/* split-new.css — modulare Styles nur für die Splid-Seite
   Nutzt die Design-Tokens aus Ihrer globalen styles.css. */

/* Abschnittsabstand kompakter für die Splid-Seite */
.section--tight { padding-top: var(--spacing); }

/* Stacks & Layout-Grundgerüst */
.stack { display: grid; gap: 12px; }

.row{
    display:grid;
    gap:10px;
    grid-template-columns: repeat(12, minmax(0, 1fr)); /* statt 1fr */
    align-items:end;
}
/* Spaltenbreiten */
.col-12{ grid-column: span 12; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }

/* WICHTIG: Spalten dürfen schrumpfen, sonst kommt es zu Überlauf/Überdeckung */
.row > [class^="col-"] { min-width: 0; }

@media (max-width: 900px){
    .row{ grid-template-columns: 1fr; }
    .col-12,.col-8,.col-6,.col-4,.col-3,.col-2{ grid-column: 1 / -1; }
}

/* Formularfelder */
.field{ display: grid; gap: 6px; }
.label{ font-size: .9rem; color: var(--muted); }

.input,
.select,
.textarea{
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .2s ease;
}
.input:focus,
.select:focus,
.textarea:focus{
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
}

.help{ color: var(--muted); font-size: .85rem; }

/* Flex-Zeilen (z. B. Input + Button) */
.flex{
    display: flex;
    gap: 8px;
    align-items: stretch;
    min-width: 0;             /* verhindert horizontales Überlaufen */
}
.flex > input,
.flex > .input,
.flex > select,
.flex > .select{
    flex: 1 1 auto;           /* Input füllt Restbreite und darf schrumpfen */
    min-width: 0;             /* wichtig, sonst drückt der Platzhalter */
}
.flex > .btn{
    flex: 0 0 auto;           /* Button behält natürliche Breite */
    white-space: nowrap;      /* kein Umbruch im Buttontext */
}

/* Toolbar */
.toolbar{ display: flex; gap: 8px; flex-wrap: wrap; }

/* Tabellen */
.table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;      /* verhindert, dass sehr lange Inhalte Spalten aufdrücken */
}
.table th,
.table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    word-break: break-word;   /* bricht lange Inhalte sauber um */
}
.table th{ color: var(--muted); font-weight: 600; }
.right{ text-align: right; }

/* Chips/Tags & Checkbox-Gruppe */
.tag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .8rem;
    cursor: pointer;
}
.checkboxes{ display: flex; gap: 10px; flex-wrap: wrap; }

/* Karten */
.card--subtle{ background: color-mix(in oklab, var(--surface) 90%, transparent); }
/* optional: sauberes Clipping, falls Elemente dennoch überstehen */
.card{ overflow: hidden; }

/* Listen */
.list{ display: grid; gap: 10px; }
.list-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* Raster für 3 Karten nebeneinander */
.grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 960px){
    .grid-3{ grid-template-columns: 1fr; }
}

/* Abgesetzte Boxen & Divider */
.inset{
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface);
}
.divider{ height: 1px; background: var(--border); margin: 12px 0; }

/* Button-Varianten */
.btn--subtle{
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
}
.btn--warn{
    background: linear-gradient(135deg, #ffb0b0, #ff9292);
    color: #0b0c0e;
}

/* Typografie-Helfer */
.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.muted{ color: var(--muted); }

/* KPIs */
.kpis{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px){
    .kpis{ grid-template-columns: 1fr; }
}
.kpi{
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
}

/* Leere-Zustände */
.empty{ color: var(--muted); padding: 8px 0; }

/* Toast */
.toast{
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: .25s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }

/* Responsiver Komfort: Bei sehr schmalen Bildschirmen Button unter Input legen */
@media (max-width: 520px){
    .flex{ flex-wrap: wrap; }
    .flex > .btn{ width: 100%; }
}

/* Field-Container: Kinder füllen volle Breite */
.field {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: stretch;
}

/* Details-Box füllt volle Spaltenbreite */
#splitDetails,
.field > .inset {
    display: block;
    width: 100%;
    min-width: 0;  /* Safari-Fix */
}

#splitDetails > * {
    min-width: 0;  /* sorgt dafür, dass Inhalte in der Box umbrechen dürfen */
}

/* Collapsible (Details/Summary) */
.collapsible { padding: 0; overflow: hidden; }
.collapsible[open] { overflow: visible; }
.collapsible__summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.collapsible__summary::-webkit-details-marker{ display: none; }

.collapsible__caret{
    inline-size: 10px; block-size: 10px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .2s ease;
}
.collapsible[open] .collapsible__caret{ transform: rotate(45deg); }

.collapsible__content{ padding: 16px 18px 18px; }

/* Teilnehmer-Zeilen im Tabellencell */
.part-line { margin: 2px 0; }

/* Fix für Kurs-Zeilen im Dropdown: 2-spaltiges Layout, sauberer Abstand */
.collapsible #ratesList .row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* Input füllt, Button so breit wie nötig */
    gap: 12px;
    align-items: center;
}

/* Spaltenklassen in diesem Kontext neutralisieren */
.collapsible #ratesList .row .col-6,
.collapsible #ratesList .row .col-3,
.collapsible #ratesList .row .field{
    grid-column: auto;   /* wir verwenden die 2 Spalten von oben */
    min-width: 0;
}

/* Input wirklich strecken und nicht „unter“ den Button laufen lassen */
.collapsible #ratesList .row input.input{
    width: 100%;
    min-width: 0;
}

/* Optional: Fokusring am Summary dezenter gestalten */
.collapsible__summary:focus{ outline: none; }
.collapsible__summary:focus-visible{
    outline: 2px solid color-mix(in oklab, var(--accent) 60%, var(--border));
    outline-offset: 2px;
}