/* ============================================================
   LOHNT SICH DAS? — ZENTRALES DESIGN SYSTEM
   Eine Datei, eine Quelle der Wahrheit für Farben, Typografie,
   Abstände und wiederkehrende Komponenten. Änderungen hier wirken
   sofort auf alle Seiten, die includes/header.php einbinden.

   Herkunft: "00_Lohnt sich das – Website Design System" (Konzept)
   ============================================================ */

:root {
    /* --- Marke --- */
    --brand-600: #175C3B;   /* Primärfarbe */
    --brand-800: #10432C;   /* Primärfarbe dunkel / Hover */
    --brand-50:  #EDF6F1;   /* Akzentfläche hell */

    /* --- Neutrale --- */
    --bg:            #F7F8F6;  /* Seitenhintergrund */
    --surface:       #FFFFFF;  /* Kartenoberfläche */
    --border:        #DDE3DF;  /* Rahmen und Trennlinien */
    --focus-ring:    #6EAA89;  /* Fokusrahmen */
    --text:          #17211B;  /* Haupttext */
    --text-muted:    #66716A;  /* Sekundärtext (nur auf hellen Flächen) */
    --disabled-bg:   #F0F2F0;  /* Deaktivierte Fläche */
    --disabled-text: #98A19B;  /* Text deaktiviert */

    /* --- Status/Ergebnis --- */
    --positive:    #26734D;
    --positive-bg: #EAF5EF;
    --warning:     #9A6700;
    --warning-bg:  #FFF6DA;
    --negative:    #B42318;
    --negative-bg: #FDECEA;
    --info:        #315B7D;
    --info-bg:     #EDF4F8;

    /* --- Callout-Rahmenfarben (leicht abgedunkelte Tönung der Statusfarbe) --- */
    --positive-border: #B8D5C5;
    --warning-border:  #EBD9A0;
    --negative-border: #F3C6C0;
    --info-border:     #C3D6E3;

    /* --- Abstandsskala --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Legacy-Alias (zwangsversteigerung/zvg_brd_kartenansicht.php nutzt dieses Präfix
       aus einer früheren Iteration) — zeigt auf dieselben Werte, damit eine
       zentrale Änderung oben auch dort ankommt, ohne die Seite anzufassen. */
    --zvg-brand-600: var(--brand-600);
    --zvg-brand-800: var(--brand-800);
    --zvg-brand-50: var(--brand-50);
    --zvg-bg: var(--bg);
    --zvg-surface: var(--surface);
    --zvg-border: var(--border);
    --zvg-focus-ring: var(--focus-ring);
    --zvg-text: var(--text);
    --zvg-text-muted: var(--text-muted);
    --zvg-disabled-bg: var(--disabled-bg);
    --zvg-disabled-text: var(--disabled-text);
    --zvg-positive: var(--positive);
    --zvg-positive-bg: var(--positive-bg);
    --zvg-warning: var(--warning);
    --zvg-warning-bg: var(--warning-bg);
    --zvg-negative: var(--negative);
    --zvg-negative-bg: var(--negative-bg);
    --zvg-info: var(--info);
    --zvg-info-bg: var(--info-bg);
}

/* ============================================================
   GRUNDLAGE
   ============================================================ */

.ds-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}
@media (max-width: 1024px) { .ds-container { padding-left: var(--space-5); padding-right: var(--space-5); } }
@media (max-width: 640px)  { .ds-container { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ============================================================
   TYPOGRAFIE
   Regeln: max. 3 Schriftgewichte (400 Regular, 600 Semibold — Display/H1
   ebenfalls 600), keine Versalien-Überschriften, Zahlen tabellarisch,
   Zeilen nicht breiter als ~65–75 Zeichen (siehe .ds-prose).
   ============================================================ */

.ds-display { font-size: 48px; line-height: 56px; font-weight: 600; color: var(--text); }
.ds-h1      { font-size: 36px; line-height: 44px; font-weight: 600; color: var(--text); }
.ds-h2      { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--text); }
.ds-h3      { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); }
.ds-h4      { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.ds-lead    { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--text-muted); }
.ds-body    { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text); }
.ds-meta    { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); }
.ds-num     { font-variant-numeric: tabular-nums; }
.ds-kennzahl { font-variant-numeric: tabular-nums; color: var(--brand-600); font-weight: 600; }

.ds-prose { max-width: 75ch; color: var(--text); }
.ds-prose p, .ds-prose li { color: var(--text); }
.ds-prose a { color: var(--brand-600); }

/* ============================================================
   INTERAKTIONSHIERARCHIE — BUTTONS
   Primäraktion: eine zentrale Handlung pro Inhaltsbereich, gefüllt.
   Sekundäraktion: ergänzende Handlung, weißer Button mit feinem Rahmen.
   Info-/Partnerbutton: nur wenn ein Partnerkontext das verlangt.
   Regel: kein Schatten, kein Farbverlauf, kein Pfeil-Icon, genau eine
   fest definierte Textfarbe pro Buttontyp.
   ============================================================ */

.ds-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-600); color: #FFFFFF; font-weight: 600;
    height: 44px; padding: 0 20px; border: none; border-radius: 6px;
    text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.ds-btn-primary:hover { background: var(--brand-800); }

.ds-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; color: #17211B; font-weight: 600;
    height: 44px; padding: 0 20px; border: 1px solid var(--border); border-radius: 6px;
    text-decoration: none; cursor: pointer; transition: border-color 0.15s;
}
.ds-btn-secondary:hover { border-color: var(--text-muted); }

.ds-btn-info {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--info); color: #FFFFFF; font-weight: 600;
    height: 44px; padding: 0 20px; border: none; border-radius: 6px;
    text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.ds-btn-info:hover { opacity: 0.9; }

.ds-btn-disabled {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--disabled-bg); color: var(--disabled-text); font-weight: 600;
    height: 44px; padding: 0 20px; border: 1px solid var(--border); border-radius: 6px;
    cursor: not-allowed;
}

/* ============================================================
   LINKS
   Inline-/Vertiefungslink: Markengrün, kein Hintergrund, kein Rahmen,
   Unterstrichen erst beim Hover. Navigationslink: gedämpft, aktiver
   Zustand dunkel + Semibold. Rückpfeil nur bei Rücknavigation erlaubt.
   ============================================================ */

.ds-link {
    color: var(--brand-600);
    text-decoration: none;
}
.ds-link:hover { text-decoration: underline; }

.ds-link-nav {
    color: var(--text-muted);
    text-decoration: none;
}
.ds-link-nav:hover, .ds-link-nav.active { color: var(--text); font-weight: 600; }

/* ============================================================
   FILTER UND AUSWAHL
   Checkboxen ohne umschließende Buttonfläche: 18–20px, Label rechts
   daneben (8px Abstand), 20–24px Abstand zwischen Optionen.
   ============================================================ */

.ds-checkbox-group {
    display: flex; flex-wrap: wrap;
    column-gap: var(--space-5); row-gap: var(--space-3);
    align-items: center;
}
.ds-checkbox-item {
    display: flex; align-items: center; gap: var(--space-2);
    cursor: pointer; color: var(--text);
}
.ds-checkbox-item input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--brand-600); cursor: pointer;
}

/* Ausgewählte Filter (Tags/Chips einer aktiven Auswahl-Zusammenfassung) */
.ds-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--brand-50); border: 1px solid var(--positive-border);
    color: var(--brand-800); height: 34px; padding: 0 12px;
    border-radius: 6px; font-size: 13px; font-weight: 500;
}

/* ============================================================
   EINGABEFELDER
   ============================================================ */

.ds-input, .ds-select {
    height: 48px; width: 100%;
    padding: 0 12px;
    background: #FFFFFF; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px;
}
.ds-input::placeholder { color: var(--disabled-text); }
.ds-input:focus, .ds-select:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px rgba(110, 170, 137, 0.25);
}

/* ============================================================
   KARTEN
   Weißraum statt Rahmenbetonung, feine Linie statt Schatten.
   ============================================================ */

.ds-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.ds-card.ds-card-hover:hover { border-color: var(--brand-600); }

/* ============================================================
   HINWEISBOX / CALLOUT
   Hintergrund neutral oder funktional, feiner Rahmen, keine
   dekorativen Icons, kein Schatten.
   ============================================================ */

.ds-callout { border-radius: 8px; padding: var(--space-5); border: 1px solid; }
.ds-callout-positive { background: var(--positive-bg); border-color: var(--positive-border); }
.ds-callout-positive h4, .ds-callout-positive .ds-callout-title { color: var(--positive); }
.ds-callout-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.ds-callout-warning h4, .ds-callout-warning .ds-callout-title { color: var(--warning); }
.ds-callout-negative { background: var(--negative-bg); border-color: var(--negative-border); }
.ds-callout-negative h4, .ds-callout-negative .ds-callout-title { color: var(--negative); }
.ds-callout-info { background: var(--info-bg); border-color: var(--info-border); }
.ds-callout-info h4, .ds-callout-info .ds-callout-title { color: var(--info); }
.ds-callout-neutral { background: var(--bg); border-color: var(--border); }

/* ============================================================
   STATUS-LABEL
   Zeigt eine fachliche Bedeutung, ist nicht klickbar, keine
   Buttonoptik. Radius 999px, weil kurze Statuslabels.
   ============================================================ */

.ds-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ds-badge-positive { background: var(--positive-bg); color: var(--positive); }
.ds-badge-warning   { background: var(--warning-bg); color: var(--warning); }
.ds-badge-negative  { background: var(--negative-bg); color: var(--negative); }
.ds-badge-info      { background: var(--info-bg); color: var(--info); }
.ds-badge-neutral   { background: var(--disabled-bg); color: var(--text-muted); }

/* ============================================================
   INFORMATIONSZUSAMMENFASSUNG (Banner)
   Neutrale Daten sind keine Erfolgsmeldung: weißer/neutraler
   Hintergrund, keine große grüne Fläche. Zahlen typografisch
   hervorheben statt farbig zu flächen.
   ============================================================ */

.ds-info-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-muted);
}
.ds-info-banner strong { color: var(--text); font-weight: 600; }

/* ============================================================
   TABELLE
   ============================================================ */

.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-table th {
    background: var(--bg); color: var(--text);
    padding: 12px 10px; text-align: left; font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.ds-table td {
    padding: 10px; border-bottom: 1px solid var(--border);
    vertical-align: top; color: var(--text);
}
.ds-table tr:hover { background: var(--brand-50); cursor: pointer; }
.ds-table tr.selected { background: var(--brand-50) !important; }
.ds-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--brand-600); }