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


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

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

.tk-section + .tk-section {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--tk-border);
}

/* Festes 4-Spalten-Raster statt auto-fill: die span-2-Felder (Firma,
   Standort, Betreff, Beschreibung) ergeben nur so eine stimmige Zeile.
   Mit auto-fill schwankte die Spaltenzahl mit dem Viewport und riss
   z. B. Vor- und Nachname auseinander. */
.tk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}
.tk-col-span-2 { grid-column: span 2; }
@media (max-width: 1180px) { .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fliesstext-Felder duerfen nicht ueber die halbe Karte hinauswachsen. */
.tk-form textarea { max-width: 900px; }

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




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

/* Zustimmung und Absenden gehoeren in einen Blick — nicht 1700 px
   auseinander an den rechten Kartenrand. */
.tk-actions {
    margin-top: 20px;
    text-align: left;
    max-width: 900px;
}