/* Ergänzungen für Formulare, Mitgliederbereich und Verwaltung */

.messages { margin-top: 1rem; display: grid; gap: 0.5rem; }
.msg { padding: 0.9rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); }
.msg-success { border-color: var(--green-500); background: var(--green-100); }
.msg-error { border-color: #c0392b; background: #fbe4e1; }
.msg-info, .msg-warning { border-color: var(--sun); background: var(--sun-light); }

/* Formulare (Django) */
.field { margin-bottom: 1rem; }
.field label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
.field input:not([type="checkbox"]), .field textarea, .field select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: var(--green-500); }
.field.check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.field.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.25rem; }
.field.check label { font-weight: 600; margin: 0; }
.field .errorlist { list-style: none; padding: 0; margin: 0.3rem 0 0; color: #b03a2e; font-size: 0.9rem; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #b03a2e; }
.form-errors { background: #fbe4e1; border: 1px solid #c0392b; border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin-bottom: 1rem; }
.form-errors ul { margin: 0; }
.form-grid { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.honeypot { position: absolute; left: -9999px; }

/* Bereichs-Layout (Mitglieder & Verwaltung) */
.area { display: grid; gap: 2rem; }
@media (min-width: 900px) { .area { grid-template-columns: 240px 1fr; align-items: start; } }
.area-nav { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.area-nav h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); font-family: var(--font-body); margin-bottom: 0.6rem; }
.area-nav ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.area-nav li { margin: 0; }
.area-nav a { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--green-900); }
.area-nav a:hover, .area-nav a.active { background: var(--green-100); }
.area-nav .count { float: right; background: var(--sun); color: var(--green-900); border-radius: 999px; padding: 0 0.5rem; font-size: 0.8rem; }
.area-main h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.kpi .n { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--green-700); line-height: 1.1; }
.kpi .l { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
.kpi.warn .n { color: var(--sun-dark); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.5rem; }
.panel h2 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.panel-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .panel-grid { grid-template-columns: 1fr 1fr; } }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 0.5rem; border-bottom: 1px solid var(--line); }
.bars .bar { flex: 1; background: var(--green-500); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.bars .bar:hover { background: var(--sun); }
.bars .bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 0.7rem; background: var(--ink); color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; white-space: nowrap; display: none; }
.bars .bar:hover span { display: block; }
.bars-legend { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }

.table-list { width: 100%; font-size: 0.95rem; }
.table-list th, .table-list td { padding: 0.6rem 0.7rem; }
.table-list td.actions { white-space: nowrap; }
.table-list form { display: inline; }
.btn-xs { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.tabs a { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.tabs a.active { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.status { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.status-neu, .status-angekuendigt { background: var(--sun-light); color: var(--sun-dark); }
.status-angenommen, .status-eingegangen, .status-aktiv { background: var(--green-100); color: var(--green-800); }
.status-abgelehnt, .status-storniert, .status-beendet { background: #eee; color: #666; }
.msg-body { white-space: pre-wrap; background: var(--cream); border-radius: 8px; padding: 0.8rem; margin: 0.5rem 0; font-size: 0.95rem; }
.progress-lg { background: var(--green-100); border-radius: 999px; height: 14px; overflow: hidden; margin: 0.5rem 0; }
.progress-lg span { display: block; height: 100%; background: var(--green-500); border-radius: 999px; }

.login-box { max-width: 460px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.login-box h1 { font-size: 1.8rem; }

.news-body img, .page-body img { border-radius: var(--radius-sm); }
.news-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.supporters { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.supporters li { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9rem; margin: 0; }

@media print {
  .area-nav, .site-header, .site-footer, .btn, .tabs { display: none !important; }
  .receipt { max-width: 100%; }
}
.receipt { max-width: 760px; margin: 0 auto; background: #fff; padding: 2.5rem; border: 1px solid var(--line); font-size: 0.98rem; }
.receipt h1 { font-size: 1.5rem; }
.receipt table td { border: 0; padding: 0.25rem 0.5rem 0.25rem 0; }

/* Portraetfotos des Vorstands – gleiche Groesse wie die Initialen-Kreise */
.member-photo { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; object-position: center top; }