/*
 * e-design – Basis-Komponenten
 * Setzt tokens.css voraus (muss vorher geladen sein). Nutzt bewusst
 * dieselbe, unpräfigierte Klassen-/Element-Vokabular, die bereits in
 * eAbstimmung verwendet wurde (button, a.knopf, .karte, .badge, dialog,
 * label/input/select, table, .fehler/.erfolg) – so lässt sich diese Datei
 * als Ersatz für die bisherigen Inline-<style>-Blöcke einbinden, ohne
 * Markup in den Blade-Views anfassen zu müssen. Seiten-/Tool-spezifische
 * Regeln bleiben weiterhin lokal in der jeweiligen View.
 */

:root { color-scheme: light; }
* { box-sizing: border-box; }

body {
    font-family: var(--e-font-sans);
    color: var(--e-color-ink);
    line-height: 1.5;
    background: var(--e-color-bg);
}

h1, h2, h3 { font-weight: var(--e-weight-extrabold); }
h1 { font-size: 1.4rem; margin-top: 0; }
h2 { font-size: 1.1rem; margin-top: 2rem; }

a { color: var(--e-color-primary); }

/* Kopfzeile der Verwaltungs-/öffentlichen Seiten */
header.kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--e-color-primary);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}
header.kopf a { color: inherit; text-decoration: none; }
header.kopf .marke { font-weight: var(--e-weight-extrabold); font-size: 1.1rem; }
header.kopf .marke span { font-weight: var(--e-weight-regular); color: var(--e-color-muted); font-size: 0.9rem; }

nav.brotkrumen { margin-bottom: 1rem; font-size: 0.9rem; }
nav.brotkrumen a { color: var(--e-color-primary); }

/* Akzentbalken – generisches Hervorhebungselement (kurzer, farbiger
   Strich über einer Überschrift oder als Unterstreichung), bewusst
   ohne feste Länge/Position, damit es sich flexibel einsetzen lässt. */
.akzentbalken {
    display: block;
    width: 3rem;
    height: 0.3rem;
    background: var(--e-color-secondary);
    border-radius: var(--e-radius-pill);
    margin-bottom: 0.6rem;
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd; }

.karte {
    border: 1px solid var(--e-color-border);
    border-radius: var(--e-radius-md);
    padding: 1rem;
    margin: 1rem 0;
}
.karte.live { border-color: var(--e-color-success); border-width: 2px; }

/* Buttons */
button, a.knopf {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.45rem 0.9rem;
    background: var(--e-color-primary);
    color: var(--e-color-primary-contrast);
    border: none;
    border-radius: var(--e-radius-sm);
    font-family: var(--e-font-sans);
    font-weight: var(--e-weight-semibold);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
}
button:hover, a.knopf:hover { background: var(--e-color-primary-dark); }
button.gefahr { background: var(--e-color-danger); }
button.neutral { background: var(--e-color-subtle); }
button.knopf-oeffnen {
    background: var(--e-color-surface);
    color: var(--e-color-primary);
    border: 1px solid var(--e-color-primary);
}

input:focus, select:focus, button:focus, a:focus, a.knopf:focus {
    outline: var(--e-focus-ring);
    outline-offset: var(--e-focus-ring-offset);
}

/* Formulare */
label { display: block; margin-top: 0.75rem; font-weight: var(--e-weight-semibold); font-size: 0.9rem; }
input, select {
    display: block;
    width: 100%;
    padding: 0.4rem;
    margin-top: 0.2rem;
    border: 1px solid var(--e-color-border-strong);
    border-radius: var(--e-radius-sm);
    font-family: var(--e-font-sans);
    font-size: 1rem;
}

/* Badges (Sitzungsteil/Abstimmungsform/Status) */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--e-radius-pill);
    font-size: 0.8rem;
    font-weight: var(--e-weight-semibold);
}
.badge.oeffentlich { background: var(--e-color-success-bg); color: var(--e-color-success-text); }
.badge.nicht-oeffentlich { background: var(--e-color-warning-bg); color: var(--e-color-warning-text); }
.badge.typ { background: var(--e-color-neutral-bg); color: var(--e-color-neutral-text); }
.badge.live { background: var(--e-color-success); color: #fff; }
.badge.geschlossen { background: var(--e-color-neutral-bg); color: var(--e-color-neutral-text); }

/* Meldungen */
.fehler, .erfolg { padding: 0.75rem; border-radius: var(--e-radius-sm); margin: 1rem 0; }
.fehler { background: var(--e-color-danger-bg); border: 1px solid var(--e-color-danger); color: var(--e-color-danger-text); }
.erfolg { background: var(--e-color-success-bg); border: 1px solid var(--e-color-success); color: var(--e-color-success-text); }
.hinweis { color: var(--e-color-muted); }

code.token {
    display: block;
    font-size: 1.2rem;
    padding: 0.5rem;
    background: var(--e-color-bg-subtle);
    border-radius: var(--e-radius-sm);
    margin-top: 0.4rem;
    word-break: break-all;
}

/* Modal-Dialoge (natives <dialog>) */
dialog {
    border: none;
    border-radius: var(--e-radius-lg);
    padding: 1.5rem;
    width: min(28rem, 90vw);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    font-family: var(--e-font-sans);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog h2, dialog h3 { margin-top: 0; }
dialog .knopf-schliessen { background: var(--e-color-subtle); margin-left: 0.5rem; }

footer.fuss {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--e-color-border);
    font-size: 0.85rem;
    color: var(--e-color-subtle);
}