/* Tokens und Reset kommen aus base.css (/assets/base.css im Webroot). */
:root {
    --ko-primary:       var(--dt-primary);
    --ko-primary-dark:  var(--dt-primary-dark);
    --ko-bg:            var(--dt-bg);
    --ko-card:          var(--dt-card);
    --ko-border:        var(--dt-border);
    --ko-text:          var(--dt-text);
    --ko-muted:         var(--dt-muted);
    --ko-success-bg:     var(--dt-success-bg);
    --ko-success-border: var(--dt-success-border);
    --ko-error-bg:       var(--dt-error-bg);
    --ko-error-border:   var(--dt-error-border);
}


/* Volle Bildschirmbreite wie Landing und Modulseiten. Die Felder bleiben
   trotzdem handlich, weil .ko-grid spaltenweise fliesst. */
.ko-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 32px clamp(20px, 4vw, 56px) 64px;
}

/* Ein Formular profitiert nicht von 1800 px: gedeckelt und zentriert,
   der Wrap darum bleibt voll breit. */
.ko-form {
    max-width: 1440px;   /* linksbuendig: gleiche Kante wie Kopf und Modulkarten */
    background: var(--ko-card);
    border: 1px solid var(--ko-border);
    border-radius: var(--dt-radius-card);
    padding: 28px 32px;
}

.ko-section + .ko-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ko-border);
}

.ko-hint {
    margin: 0 0 16px;
    color: var(--ko-muted);
    font-size: 14px;
}

/* Festes 4-Spalten-Raster statt auto-fill — siehe Ticket-Formular:
   nur so bleiben Vor- und Nachname in einer Zeile. */
.ko-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}
.ko-col-span-2 { grid-column: span 2; }
@media (max-width: 1180px) { .ko-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fliesstext-Felder duerfen nicht ueber die halbe Karte hinauswachsen. */
.ko-form textarea { max-width: 900px; }

@media (max-width: 540px) {
    .ko-grid { grid-template-columns: 1fr; }
    .ko-col-span-2 { grid-column: auto; }
}




.ko-employee {
    border: 1px solid var(--ko-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 0 14px;
    background: #fafbfd;
}

.ko-employee legend {
    padding: 0 6px;
    font-weight: 600;
}

.ko-radio-group {
    border: none;
    padding: 0;
    margin: 14px 0 0;
}
.ko-radio-group legend {
    padding: 0;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
}
.ko-radio-group label {
    display: block;
    margin: 4px 0;
    font-weight: normal;
}

.ko-form label.ko-camera-names {
    display: none;
    margin-top: 8px;
}
.ko-form .ko-radio-group:has(input[value="limited"]:checked) label.ko-camera-names {
    display: block;
}

.ko-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
}
.ko-checkbox input { margin-top: 3px; }

.ko-actions {
    margin-top: 20px;
    text-align: left;
    max-width: 900px;
}



.ko-btn-link {
    background: none;
    border: none;
    color: var(--ko-error-border);
    padding: 0;
    margin-top: 10px;
    font-weight: normal;
    text-decoration: underline;
}