:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: #f5f7fa; color: var(--dark-color); line-height: 1.6; padding: 20px; }

.container {
    max-width: 1200px; margin: 0 auto; background: white;
    padding: 30px; border-radius: var(--border-radius); box-shadow: var(--box-shadow);
}

h1, h2, h3 { color: var(--primary-color); }
h1 { text-align: center; margin-bottom: 20px; font-size: 28px; }
h2 { margin-bottom: 15px; font-size: 22px;
     border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; }

/* Formulare */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid #ddd;
    border-radius: var(--border-radius); font-size: 16px; transition: border 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--secondary-color); outline: none;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.required:after { content: " *"; color: var(--danger-color); }

/* Buttons */
.btn {
    display: inline-block; padding: 12px 24px; border: none;
    border-radius: var(--border-radius); cursor: pointer; font-size: 16px;
    font-weight: 600; text-align: center; text-decoration: none;
    transition: background-color 0.3s;
}
.btn-primary { background-color: var(--secondary-color); color: white; width: 100%; }
.btn-primary:hover { background-color: #2980b9; }
.btn-secondary { background-color: #95a5a6; color: white; }
.btn-secondary:hover { background-color: #7f8c8d; }
.btn-kontaktiert { background-color: var(--warning-color); color: white; padding: 6px 12px; font-size: 12px; }
.btn-kontaktiert:hover { background-color: #e67e22; }
.btn-erledigt { background-color: var(--success-color); color: white; padding: 6px 12px; font-size: 12px; }
.btn-erledigt:hover { background-color: #218838; }
.btn-loeschen { background-color: var(--danger-color); color: white; padding: 6px 12px; font-size: 12px; }
.btn-loeschen:hover { background-color: #c9302c; }

/* Hinweisboxen */
.wartezeit-hinweis {
    background-color: #f8f9fa; border-left: 4px solid var(--secondary-color);
    padding: 15px; margin: 20px 0; border-radius: var(--border-radius); font-size: 16px;
}
.wartezeit-hinweis strong { color: var(--primary-color); }
.dsgvo-hinweis {
    background-color: #fff3cd; border-left: 4px solid var(--warning-color);
    padding: 15px; margin: 20px 0; border-radius: var(--border-radius); font-size: 14px;
}
.dsgvo-hinweis a { color: var(--dark-color); text-decoration: underline; }

/* Bestätigung */
.success-icon { font-size: 60px; color: var(--success-color); margin-bottom: 20px; text-align: center; }
.wartezeit-box {
    background-color: #e8f5e9; border-left: 4px solid var(--success-color);
    padding: 15px; margin: 20px 0; border-radius: var(--border-radius);
}
.highlight {
    background-color: #f8f9fa; padding: 4px 10px;
    border-radius: var(--border-radius); display: inline-block; margin: 3px 0;
}

/* Admin: Stats */
.stats { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.stat-card {
    background: white; border-radius: var(--border-radius); padding: 15px 20px;
    box-shadow: var(--box-shadow); text-align: center; min-width: 140px; flex: 1;
}
.stat-card h3 { font-size: 24px; margin-bottom: 5px; }
.stat-card p { color: #7f8c8d; font-size: 14px; }
.stat-card.warning { border-top: 4px solid var(--warning-color); }
.stat-card.success { border-top: 4px solid var(--success-color); }
.stat-card.danger  { border-top: 4px solid var(--danger-color); }
.stat-card.info    { border-top: 4px solid var(--secondary-color); }

/* Admin: Filter */
.filters { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; min-width: 180px; }
.filter-group label { margin-bottom: 5px; font-weight: 600; }
.filter-group select, .filter-group input {
    padding: 8px 12px; border: 1px solid #ddd;
    border-radius: var(--border-radius); font-size: 14px;
}

/* Tabellen */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: var(--primary-color); color: white; font-weight: 600; }
tr:nth-child(even) { background-color: #f8f9fa; }
tr:hover { background-color: #e9f7fe; }

.status {
    padding: 5px 10px; border-radius: var(--border-radius);
    font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap;
}
.status.wartend { background-color: #fff3cd; color: #856404; }
.status.kontaktiert { background-color: #d4edda; color: #155724; }
.status.erledigt { background-color: #d1ecf1; color: #0c5460; }

.actions { display: flex; gap: 5px; flex-wrap: wrap; }
.no-entries { text-align: center; padding: 40px; color: #7f8c8d; font-style: italic; }

/* Footer */
.footer { text-align: center; margin-top: 30px; color: #7f8c8d; font-size: 14px; }

/* Error */
.error-msg { color: var(--danger-color); font-size: 14px; margin-top: 8px; }

@media (max-width: 768px) {
    .container { padding: 20px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    .stats { flex-direction: column; }
    .filters { flex-direction: column; }
    th, td { padding: 8px 10px; font-size: 13px; }
    .actions { flex-direction: column; }
}