/* Formulare — Eingabefelder, Schaltflaechen, Raster, Kartenflaeche
   Teil von style.css (W2, Schnitt E — AK 60: keine Datei ueber 200 Zeilen).
   Einbindungsreihenfolge zaehlt: siehe index.html. */

/* ============ FORMS ============ */
.form-group { margin-bottom: 12px; }

.form-group label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border var(--transition);
}

.form-control:focus { outline: none; border-color: var(--accent); }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control { min-height: 80px; resize: vertical; }

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-primary { background: var(--accent); color: #0f172a; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--success); color: #0f172a; }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-info { background: var(--info); color: #fff; }
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* ============ GRID ============ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ============ MAP ============ */
.map-container {
    height: 500px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}