/* ==========================================================================
   WEG Verwaltung – Basis (Website und Anwendung)
   Reihenfolge: 1 Tokens · 2 Bootstrap-Theme · 3 Typografie · 4 Bausteine
   Nur lokale Ressourcen, Systemschriften.
   ========================================================================== */

/* 1 Tokens ----------------------------------------------------------------- */
:root {
    /* Farben */
    --wv-primaer: #0e6b64;
    --wv-primaer-dunkel: #0a4f4a;
    --wv-primaer-mittel: #2a9d8f;
    --wv-primaer-hell: #e1f1ee;
    --wv-akzent: #f4a340;
    --wv-akzent-dunkel: #e8922a;
    --wv-akzent-hell: #fdebd2;
    --wv-akzent-text: #9a5b0f;
    --wv-nacht: #0f3d3e;
    --wv-nacht-hell: #164b4c;
    --wv-tinte: #12263a;
    --wv-text: #33475b;
    --wv-grau: #5b6b7a;
    --wv-linie: #e3ecea;
    --wv-linie-stark: #cfdcda;
    --wv-flaeche: #f4f8f7;
    --wv-weiss: #fff;
    --wv-fehler: #b3261e;
    --wv-fehler-hell: #fbe2e0;
    --wv-auf-dunkel: #d6ece9;
    --wv-auf-dunkel-leise: #a9cfca;

    /* Form */
    --wv-radius-s: .5rem;
    --wv-radius: .75rem;
    --wv-radius-l: 1rem;
    --wv-radius-xl: 1.5rem;
    --wv-schatten-s: 0 1px 2px rgba(18, 38, 58, .06);
    --wv-schatten: 0 18px 40px -18px rgba(18, 38, 58, .28);
    --wv-fokus: 0 0 0 .2rem rgba(14, 107, 100, .25);

    /* Abstände (4er-Raster) */
    --wv-a1: .25rem;
    --wv-a2: .5rem;
    --wv-a3: .75rem;
    --wv-a4: 1rem;
    --wv-a5: 1.5rem;
    --wv-a6: 2rem;
    --wv-a7: 3rem;
    --wv-a8: 5rem;

    --wv-schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* 2 Bootstrap-Theme ---------------------------------------------------- */
    --bs-primary: var(--wv-primaer);
    --bs-primary-rgb: 14, 107, 100;
    --bs-primary-text-emphasis: var(--wv-primaer-dunkel);
    --bs-primary-bg-subtle: var(--wv-primaer-hell);
    --bs-primary-border-subtle: #b9ddd7;
    --bs-link-color: var(--wv-primaer);
    --bs-link-color-rgb: 14, 107, 100;
    --bs-link-hover-color: var(--wv-primaer-dunkel);
    --bs-link-hover-color-rgb: 10, 79, 74;
    --bs-body-font-family: var(--wv-schrift);
    --bs-body-color: var(--wv-text);
    --bs-body-color-rgb: 51, 71, 91;
    --bs-emphasis-color: var(--wv-tinte);
    --bs-secondary-color: var(--wv-grau);
    --bs-border-color: var(--wv-linie);
    --bs-border-radius: var(--wv-radius-s);
    --bs-border-radius-lg: var(--wv-radius);
    --bs-focus-ring-color: rgba(14, 107, 100, .25);
    --bs-heading-color: var(--wv-tinte);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-underline-offset: .2em; }
:focus-visible { outline: 3px solid rgba(14, 107, 100, .35); outline-offset: 2px; }
::selection { background: var(--wv-primaer-hell); color: var(--wv-tinte); }

/* 3 Typografie ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { letter-spacing: -.015em; }
.titel-1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.titel-2 { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.titel-3 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.titel-4 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.dachzeile {
    display: inline-flex; align-items: center; gap: var(--wv-a2);
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wv-primaer);
}
.dachzeile::before { content: ""; width: 1.25rem; height: .2rem; border-radius: .2rem; background: var(--wv-akzent); }
.einleitung { font-size: 1.15rem; line-height: 1.6; color: var(--wv-grau); max-width: 42rem; }
.text-leise { color: var(--wv-grau); }
.zahl { font-variant-numeric: tabular-nums; }

/* 4 Bausteine -------------------------------------------------------------- */

/* Icons aus dem Sprite */
.ic { width: 1.5rem; height: 1.5rem; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.ic-s { width: 1.1rem; height: 1.1rem; }
.btn .ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; }

.icon-kachel {
    width: 3rem; height: 3rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .85rem; background: var(--wv-primaer-hell); color: var(--wv-primaer);
}
.icon-kachel--akzent { background: var(--wv-akzent-hell); color: #b26a12; }
.icon-kachel--dunkel { background: var(--wv-nacht); color: #9fd8d1; }
.icon-kachel--klein { width: 2.25rem; height: 2.25rem; border-radius: .65rem; }
.icon-kachel--klein .ic { width: 1.2rem; height: 1.2rem; }

/* Buttons */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: .7rem; --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .6rem; }
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .35rem; --bs-btn-border-radius: .55rem; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .85rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: .8rem; }
.btn-primary {
    --bs-btn-bg: var(--wv-primaer); --bs-btn-border-color: var(--wv-primaer);
    --bs-btn-hover-bg: var(--wv-primaer-dunkel); --bs-btn-hover-border-color: var(--wv-primaer-dunkel);
    --bs-btn-active-bg: var(--wv-primaer-dunkel); --bs-btn-active-border-color: var(--wv-primaer-dunkel);
    --bs-btn-disabled-bg: var(--wv-primaer); --bs-btn-disabled-border-color: var(--wv-primaer);
    --bs-btn-focus-shadow-rgb: 14, 107, 100;
}
.btn-outline-primary {
    --bs-btn-color: var(--wv-primaer); --bs-btn-border-color: var(--wv-primaer);
    --bs-btn-hover-bg: var(--wv-primaer); --bs-btn-hover-border-color: var(--wv-primaer);
    --bs-btn-active-bg: var(--wv-primaer-dunkel); --bs-btn-active-border-color: var(--wv-primaer-dunkel);
    --bs-btn-focus-shadow-rgb: 14, 107, 100;
}
.btn-rahmen, .btn-outline-secondary {
    --bs-btn-color: var(--wv-tinte); --bs-btn-bg: var(--wv-weiss); --bs-btn-border-color: var(--wv-linie-stark);
    --bs-btn-hover-color: var(--wv-primaer); --bs-btn-hover-bg: var(--wv-weiss); --bs-btn-hover-border-color: var(--wv-primaer);
    --bs-btn-active-color: var(--wv-primaer-dunkel); --bs-btn-active-bg: var(--wv-flaeche); --bs-btn-active-border-color: var(--wv-primaer);
    --bs-btn-focus-shadow-rgb: 14, 107, 100;
}
.btn-akzent {
    --bs-btn-color: var(--wv-tinte); --bs-btn-bg: var(--wv-akzent); --bs-btn-border-color: var(--wv-akzent);
    --bs-btn-hover-color: var(--wv-tinte); --bs-btn-hover-bg: var(--wv-akzent-dunkel); --bs-btn-hover-border-color: var(--wv-akzent-dunkel);
    --bs-btn-active-color: var(--wv-tinte); --bs-btn-active-bg: var(--wv-akzent-dunkel); --bs-btn-active-border-color: var(--wv-akzent-dunkel);
}
.btn-hell {
    --bs-btn-color: var(--wv-primaer); --bs-btn-bg: var(--wv-weiss); --bs-btn-border-color: var(--wv-weiss);
    --bs-btn-hover-color: var(--wv-primaer-dunkel); --bs-btn-hover-bg: var(--wv-primaer-hell); --bs-btn-hover-border-color: var(--wv-primaer-hell);
    --bs-btn-active-color: var(--wv-primaer-dunkel); --bs-btn-active-bg: var(--wv-primaer-hell); --bs-btn-active-border-color: var(--wv-primaer-hell);
}

/* Formulare */
.form-control, .form-select { border-color: var(--wv-linie-stark); border-radius: .65rem; }
.form-control:not(.form-control-sm):not(.form-control-lg), .form-select:not(.form-select-sm):not(.form-select-lg) { padding-top: .6rem; padding-bottom: .6rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--wv-primaer); box-shadow: var(--wv-fokus); }
.form-check-input:checked { background-color: var(--wv-primaer); border-color: var(--wv-primaer); }
.form-label { font-weight: 600; color: var(--wv-tinte); font-size: .925rem; }
.form-text { color: var(--wv-grau); }

/* Karten */
.karte {
    background: var(--wv-weiss); border: 1px solid var(--wv-linie); border-radius: var(--wv-radius-l);
    padding: var(--wv-a5);
}
.karte--hoch { height: 100%; }
.karte--schatten { box-shadow: var(--wv-schatten); }
.card { --bs-card-border-color: var(--wv-linie); --bs-card-border-radius: var(--wv-radius-l); --bs-card-inner-border-radius: calc(var(--wv-radius-l) - 1px); --bs-card-cap-bg: var(--wv-flaeche); }

/* Statusmarken */
.marke {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    background: #e4e8ec; color: #44525f;
}
.marke::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .7; }
.marke--erfolg { background: var(--wv-primaer-hell); color: var(--wv-primaer-dunkel); }
.marke--warnung { background: var(--wv-akzent-hell); color: var(--wv-akzent-text); }
.marke--fehler { background: var(--wv-fehler-hell); color: var(--wv-fehler); }
.marke--info { background: #e2eefb; color: #1d4f86; }
.marke--dunkel { background: var(--wv-nacht); color: var(--wv-auf-dunkel); }

/* Punktliste mit Haken */
.punktliste { list-style: none; padding: 0; margin: var(--wv-a5) 0 0; }
.punktliste li { display: flex; gap: .7rem; margin-bottom: .7rem; }
.punktliste .ic { width: 1.3rem; height: 1.3rem; color: var(--wv-primaer); margin-top: .12rem; }

/* Hinweise */
.alert { --bs-alert-border-radius: var(--wv-radius); }
.alert .ic { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; scroll-behavior: auto; }
}