/* ============================================================
   Mieter-Verbrauchsportal (mein-delta.de)
   Zentraler Styleguide – Mobile-First · Delta-Design-Tokens
   Alle Seiten greifen auf DIESE EINE Datei zu.
   ============================================================ */

/* ----------------------------------------------------------
   0. FONT: Rubik (wird via <link> im HTML geladen – nicht via @import)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   1. DESIGN-TOKENS (Einzige Quelle für alle Seiten)
   ---------------------------------------------------------- */
:root {
    /* === Delta-Darmstadt Corporate Colors === */
    --delta-green:       #99c01e;
    --delta-lime:        #bfe82d;
    --delta-dark-grey:   #5b5b5b;
    --delta-slate:       #627180;
    --delta-placeholder: #abb8c3;
    --delta-bg-light:    #f9f9fb;
    --delta-card-bg:     #ffffff;
    --delta-red:         #dc3545;
    --delta-red-bg:      #fef2f2;

    /* === Messungs-Typ Farben === */
    --clr-strom:       #f59e0b;
    --clr-wasser:      #3b82f6;
    --clr-waerme:      #ef4444;
    --clr-co2:         #10b981;
    --clr-temperatur:  #8b5cf6;

    /* === Typografie === */
    --font-family:     'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                       Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-small:      13.5px;
    --font-normal:     18px;
    --font-medium:     20px;
    --font-large:      27px;
    --font-xlarge:     36px;
    --font-weight-bold:  600;
    --font-weight-heavy: 700;

    /* === Layout === */
    --delta-radius:    6px;
    --delta-shadow:    0px 7px 10px 0px rgba(78,109,67,0.15);
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;

    /* === Breakpoints === */
    --bp-tablet:  600px;
    --bp-desktop: 1024px;

    /* === Logo === */
    --logo-h-mobile:  36px;
    --logo-h-desktop: 48px;
}

/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
    font-size: 100%;  /* 16px Browser-Default – rem-basierte Spacings bleiben konsistent */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--font-normal);  /* 18px – Delta-Fließtext */
    line-height: 1.6;
    color: var(--delta-slate);
    background: var(--delta-bg-light);
    min-height: 100dvh;
    overflow-x: hidden;  /* Horizontalen Overflow verhindern */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* ----------------------------------------------------------
   3. TYPOGRAFIE
   ---------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
    font-weight: var(--font-weight-bold);
    color: var(--delta-dark-grey);
    line-height: 1.22;
    margin-bottom: var(--space-3);
}
h1 { font-size:var(--font-xlarge); }
h2 { font-size:var(--font-large); }
h3 { font-size:var(--font-medium); }
h4 { font-size:var(--font-normal); }

p { margin-bottom:var(--space-3); color:var(--delta-slate); }

a {
    color: var(--delta-green);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    transition: color 0.2s;
}
a:hover, a:active { color: var(--delta-lime); }

strong, b { font-weight:var(--font-weight-bold); color:var(--delta-dark-grey); }
small, .text-sm { font-size:var(--font-small); }
.text-muted { color:var(--delta-placeholder); }
.text-dark  { color:var(--delta-dark-grey); }
.text-center { text-align:center; }
.text-right  { text-align:right; }

.mono { font-family:'SF Mono','Consolas','Menlo',monospace; font-size:0.72rem; }

/* ----------------------------------------------------------
   4. HEADER (Sticky, weiß)
   ---------------------------------------------------------- */
.delta-header {
    background: var(--delta-card-bg);
    border-bottom: 1px solid var(--delta-placeholder);
    box-shadow: var(--delta-shadow);
    position: sticky; top:0; z-index:100;
    padding: 0 var(--space-4);
    display:flex; align-items:center; gap:var(--space-3);
    height: 56px;
}
.delta-header--between { justify-content:space-between; }
.delta-header__logo { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.delta-header__logo img { height:var(--logo-h-mobile); width:auto; display:block; }
.delta-header__brand {
    font-size:var(--font-normal); font-weight:var(--font-weight-heavy);
    color:var(--delta-dark-grey); white-space:nowrap;
    flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.delta-header__right { display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
.delta-header__avatar {
    width:34px; height:34px; border-radius:50%;
    background:var(--delta-green); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:var(--font-weight-bold); font-size:var(--font-small); flex-shrink:0;
}
.delta-header__user-name { font-size:var(--font-small); color:var(--delta-slate); display:none; }

/* Header-Nav-Link (Admin-Links im Header) */
.delta-header__nav-link {
    color: var(--delta-green); text-decoration:none;
    font-size:var(--font-small); font-weight:var(--font-weight-bold);
    padding: 0.35rem 0.65rem; border-radius:var(--delta-radius);
    background: rgba(153,192,30,0.08); white-space:nowrap;
    display:flex; align-items:center; gap:0.25rem; min-height:36px;
}
.delta-header__nav-link:hover { background:rgba(153,192,30,0.15); }

@media (min-width:600px) {
    .delta-header { height:64px; padding:0 var(--space-6); }
    .delta-header__logo img { height:var(--logo-h-desktop); }
    .delta-header__user-name { display:inline; }
}

/* ----------------------------------------------------------
   5. FOOTER
   ---------------------------------------------------------- */
.delta-footer {
    background:var(--delta-dark-grey); color:#fff;
    padding:var(--space-6) var(--space-4); text-align:center;
    font-size:var(--font-small); margin-top:var(--space-8);
}
.delta-footer img { height:36px; width:auto; margin-bottom:var(--space-3); filter:brightness(0) invert(1); }
.delta-footer p { color:rgba(255,255,255,0.7); margin-bottom:var(--space-1); }
.delta-footer a { color:var(--delta-green); }

/* ----------------------------------------------------------
   6. MAIN CONTENT CONTAINER
   ---------------------------------------------------------- */
.delta-main {
    max-width: 800px; margin:0 auto;
    padding: var(--space-4);
}
@media (min-width:600px) { .delta-main { padding:var(--space-6); } }

/* ----------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------- */
.delta-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); padding:var(--space-5);
    margin-bottom:var(--space-4); transition:box-shadow 0.2s;
}
.delta-card:hover { box-shadow:0px 10px 18px 0px rgba(78,109,67,0.22); }

.delta-card__header {
    display:flex; align-items:center; gap:var(--space-3);
    margin-bottom:var(--space-4); padding-bottom:var(--space-3);
    border-bottom:1px solid var(--delta-placeholder);
}
.delta-card__icon {
    width:44px; height:44px; border-radius:var(--delta-radius);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; color:#fff; flex-shrink:0;
}
.delta-card__title { font-weight:var(--font-weight-bold); color:var(--delta-dark-grey); font-size:var(--font-normal); margin-bottom:0; }
.delta-card__subtitle { font-size:var(--font-small); color:var(--delta-placeholder); }

/* Flush-Variante: kein Innenabstand (für Tabellen, Charts etc.) */
.delta-card--flush { padding:0; }
.delta-card--flush .delta-card__header { padding:var(--space-4) var(--space-5); margin-bottom:0; }

/* Klickbare Card mit Pfeil */
.delta-card--link {
    display:block; text-decoration:none; color:inherit;
    cursor:pointer; position:relative; overflow:hidden;
    min-height:80px;
}
.delta-card--link::after {
    content:'›'; position:absolute; right:var(--space-4); top:50%;
    transform:translateY(-50%); font-size:1.5rem; color:var(--delta-placeholder); font-weight:400;
}
.delta-card--link:active { transform:scale(0.985); }

/* ----------------------------------------------------------
   8. QUICK-CARDS (Dashboard-Feed)
   ---------------------------------------------------------- */
.quick-card {
    display:flex; align-items:center; gap:var(--space-4);
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    padding:var(--space-5); box-shadow:var(--delta-shadow);
    text-decoration:none; color:inherit;
    transition:transform 0.15s, box-shadow 0.2s; cursor:pointer;
    position:relative; overflow:hidden; min-height:80px;
}
.quick-card:active { transform:scale(0.985); }
.quick-card::after {
    content:'›'; position:absolute; right:var(--space-4); top:50%;
    transform:translateY(-50%); font-size:1.6rem; color:var(--delta-placeholder); font-weight:300;
}
.quick-card__icon {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:#fff; flex-shrink:0;
}
.quick-card__body { flex:1; min-width:0; padding-right:1.5rem; }
.quick-card__title { font-size:var(--font-normal); font-weight:var(--font-weight-heavy); color:var(--delta-dark-grey); margin-bottom:0.2rem; }
.quick-card__value { font-size:1.5rem; font-weight:800; color:var(--delta-dark-grey); line-height:1.2; }

/* Farbige Einheiten pro Medium */
.anim--strom .unit       { color:var(--clr-strom); }
.anim--wasser .unit      { color:var(--clr-wasser); }
.anim--waerme .unit      { color:var(--clr-waerme); }
.anim--co2 .unit         { color:var(--clr-co2); }
.anim--temperatur .unit  { color:var(--clr-temperatur); }

/* Slide-In-Animation für Werte */
@keyframes fadeSlideIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
.quick-card__value {
    animation: fadeSlideIn 0.5s ease-out both;
}
.quick-card:nth-child(1) .quick-card__value { animation-delay:0.05s; }
.quick-card:nth-child(2) .quick-card__value { animation-delay:0.15s; }
.quick-card:nth-child(3) .quick-card__value { animation-delay:0.25s; }
.quick-card:nth-child(4) .quick-card__value { animation-delay:0.35s; }
.quick-card:nth-child(5) .quick-card__value { animation-delay:0.45s; }
.quick-card__value .unit { font-size:0.8rem; font-weight:400; color:var(--delta-placeholder); margin-left:0.2rem; }
.quick-card__ts { font-size:var(--font-small); color:var(--delta-placeholder); margin-top:0.1rem; }
.quick-card__compare { font-size:0.8rem; margin-top:0.15rem; }
.quick-card__compare .cmp--up-deep { color:#e74c3c; }
.quick-card__compare .cmp--down { color:var(--delta-green); }
.quick-card__compare .cmp--down-deep { color:#6d8a14; }

/* Loading-Spinner */
.delta-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--delta-placeholder);
    border-top-color: var(--delta-green);
    border-radius: 50%;
    animation: delta-spin 0.7s linear infinite;
}
.delta-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
@keyframes delta-spin {
    to { transform: rotate(360deg); }
}
.delta-spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    z-index: 2;
    border-radius: var(--radius-md);
}
.chart-container,
.comp-chart-container {
    position: relative;
}

/* Messungs-Icons (Delta-Grau + Weiß) */
.icon--strom,
.icon--wasser,
.icon--waerme,
.icon--co2,
.icon--temperatur {
    background:var(--delta-dark-grey);
}

/* Material-Icon SVGs in Icon-Containern */
.quick-card__icon img,
.chart-card__icon img {
    width:24px; height:24px; display:block;
    filter: brightness(0) invert(1);
}

@media (min-width:600px) {
    .quick-card:hover { transform:translateY(-1px); box-shadow:0px 10px 18px 0px rgba(78,109,67,0.22); }
}

/* ----------------------------------------------------------
   9. BUTTONS
   ---------------------------------------------------------- */
.delta-btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--space-2); padding:14px; border:none;
    border-radius:var(--delta-radius); font-family:var(--font-family);
    font-size:var(--font-normal); font-weight:var(--font-weight-bold);
    line-height:1.2; cursor:pointer; text-decoration:none;
    text-align:center; white-space:nowrap; min-height:48px;
    transition:all 0.2s; outline:none;
}
.delta-btn--primary { background:var(--delta-green); color:#fff; }
.delta-btn--primary:hover { background:var(--delta-lime); color:var(--delta-dark-grey); }
.delta-btn--primary:active { transform:scale(0.97); }

.delta-btn--outline { background:transparent; color:var(--delta-green); border:2px solid var(--delta-green); }
.delta-btn--outline:hover { background:var(--delta-green); color:#fff; }

.delta-btn--danger { background:var(--delta-red); color:#fff; }
.delta-btn--danger:hover { background:#c82333; }

.delta-btn--sm { padding:0.4rem 0.85rem; font-size:var(--font-small); min-height:40px; }
.delta-btn--block { display:flex; width:100%; }
.delta-btn:disabled { opacity:0.55; cursor:not-allowed; pointer-events:none; }

/* Logout-Button (Header) */
.delta-btn--logout {
    background:rgba(255,255,255,0.12); color:var(--delta-dark-grey);
    border:1px solid var(--delta-placeholder); padding:0.4rem 0.75rem;
    border-radius:var(--delta-radius); font-size:var(--font-small); font-weight:500;
    cursor:pointer; text-decoration:none; transition:background 0.2s;
    white-space:nowrap; min-height:36px; display:flex; align-items:center;
}
.delta-btn--logout:hover { background:rgba(153,192,30,0.1); }

/* Zurück-Button */
.delta-btn--back {
    background:rgba(153,192,30,0.08); color:var(--delta-green);
    border:1px solid var(--delta-placeholder); padding:0.35rem 0.75rem;
    border-radius:var(--delta-radius); font-size:var(--font-small); font-weight:var(--font-weight-bold);
    cursor:pointer; text-decoration:none; white-space:nowrap;
    display:inline-flex; align-items:center; gap:0.3rem; min-height:36px;
    flex-shrink:0;
}
.delta-btn--back:hover { background:rgba(153,192,30,0.15); }

/* ----------------------------------------------------------
   10. FORMULARE
   ---------------------------------------------------------- */
.delta-input, .delta-select, .delta-textarea {
    width:100%; padding:14px; border:2px solid var(--delta-placeholder);
    border-radius:var(--delta-radius); background:var(--delta-card-bg);
    color:var(--delta-slate); font-family:var(--font-family);
    font-size:var(--font-normal); line-height:1.6; outline:none;
    transition:border-color 0.2s, box-shadow 0.2s; min-height:48px;
}
.delta-input::placeholder, .delta-textarea::placeholder { color:var(--delta-placeholder); opacity:1; }
.delta-input:focus, .delta-select:focus, .delta-textarea:focus {
    border-color:var(--delta-green); box-shadow:0 0 0 3px rgba(153,192,30,0.15);
}
.delta-input--error { border-color:var(--delta-red); }
.delta-input--error:focus { box-shadow:0 0 0 3px rgba(220,53,69,0.15); }

.delta-select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23627180' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 0.9rem center;
    padding-right:2.5rem; cursor:pointer;
}
.delta-textarea { resize:vertical; min-height:100px; }

.delta-form-group { margin-bottom:var(--space-4); }
.delta-form-group label {
    display:block; font-weight:var(--font-weight-bold);
    font-size:var(--font-small); color:var(--delta-dark-grey);
    margin-bottom:var(--space-1);
    text-transform:uppercase; letter-spacing:0.03em;
}
.delta-form-hint { font-size:var(--font-small); color:var(--delta-placeholder); margin-top:var(--space-1); }

/* Checkbox */
.delta-checkbox {
    display:flex; align-items:flex-start; gap:var(--space-2);
    cursor:pointer; min-height:48px; padding:var(--space-2) 0;
}
.delta-checkbox input[type="checkbox"] {
    width:20px; height:20px; accent-color:var(--delta-green);
    flex-shrink:0; margin-top:2px;
}
.delta-checkbox__label { font-size:var(--font-small); color:var(--delta-slate); line-height:1.4; }

/* Toggle-Row (Checkbox + Label nebeneinander, für Admin-Forms) */
.toggle-row {
    display:flex; align-items:center; gap:var(--space-2);
    grid-column: 1/-1;
}
.toggle-row label { font-size:var(--font-small); font-weight:var(--font-weight-bold); color:var(--delta-dark-grey); cursor:pointer; }
.toggle-row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--delta-green); }

/* ----------------------------------------------------------
   11. TABELLEN
   ---------------------------------------------------------- */
.delta-table-wrapper {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-height:60vh; overflow-y:auto;
}
.delta-table {
    width:100%; border-collapse:collapse; font-size:var(--font-small);
    min-width:450px;
}
.delta-table thead { position:sticky; top:0; z-index:2; }
.delta-table th {
    background:var(--delta-bg-light); color:var(--delta-dark-grey);
    font-weight:var(--font-weight-bold); font-size:0.72rem;
    text-transform:uppercase; letter-spacing:0.04em;
    padding:0.7rem 0.9rem; text-align:left;
    border-bottom:2px solid var(--delta-placeholder); white-space:nowrap;
}
.delta-table td {
    padding:0.65rem 0.9rem; border-bottom:1px solid var(--delta-placeholder);
    color:var(--delta-slate);
}
.delta-table tbody tr:hover { background:rgba(153,192,30,0.04); }
.delta-table tbody tr:active { background:rgba(153,192,30,0.08); }
.delta-table__value {
    font-weight:var(--font-weight-bold); color:var(--delta-dark-grey);
    text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.delta-table__value .unit { font-weight:400; color:var(--delta-placeholder); font-size:0.75rem; margin-left:0.2rem; }


/* ----------------------------------------------------------
   12. ALERTS & NOTICES
   ---------------------------------------------------------- */
.delta-alert {
    padding:var(--space-3) var(--space-4); border-radius:var(--delta-radius);
    font-size:var(--font-small); margin-bottom:var(--space-4);
    font-weight:500; border:1px solid transparent;
}
.delta-alert--error   { background:var(--delta-red-bg); color:var(--delta-red); border-color:#fecaca; }
.delta-alert--success { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.delta-alert--info    { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.delta-alert--warning { background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* Cookie-Hinweis (Login) */
.cookie-notice {
    background:rgba(153,192,30,0.08); border-left:3px solid var(--delta-green);
    border-radius:var(--delta-radius); padding:var(--space-3) var(--space-4);
    margin-top:var(--space-4); font-size:var(--font-small);
    color:var(--delta-slate); line-height:1.5;
}

/* BMWI-Förderlogo (Login) */
.login-bmwi {
    margin-top:var(--space-5); margin-bottom:var(--space-4);
}
.login-bmwi img {
    width:100%; height:auto; display:block; opacity:0.85;
}

/* Bauverein-Logo (Login) */
.login-bvag {
    text-align:center; margin-bottom:var(--space-2);
}
.login-bvag img {
    height:40px; width:auto; opacity:0.7;
}
@media (min-width:600px) {
    .login-bvag img { height:52px; }
}


/* ----------------------------------------------------------
   13. BADGES
   ---------------------------------------------------------- */
.delta-badge {
    display:inline-flex; align-items:center;
    padding:0.15rem 0.55rem; border-radius:9999px;
    font-size:0.7rem; font-weight:var(--font-weight-bold);
    white-space:nowrap; line-height:1.5;
}
.delta-badge--green  { background:#f0fdf4; color:#166534; }
.delta-badge--red    { background:var(--delta-red-bg); color:var(--delta-red); }
.delta-badge--slate  { background:var(--delta-bg-light); color:var(--delta-slate); }
.delta-badge--amber  { background:#fffbeb; color:#92400e; }
.delta-badge--admin  { background:rgba(153,192,30,0.1); color:#4d7c0f; }
.delta-badge--super  { background:#f3e8ff; color:#6b21a8; }
.delta-badge--active { background:#f0fdf4; color:#166534; }
.delta-badge--inactive { background:var(--delta-red-bg); color:#991b1b; }

/* Impersonation-Badge */
.impersonation-badge {
    background:#fef3c7; color:#92400e;
    font-size:var(--font-small); padding:0.15rem 0.5rem;
    border-radius:9999px; font-weight:var(--font-weight-heavy); white-space:nowrap;
}
/* ----------------------------------------------------------
   14. LOGIN PAGE (Spezielle Styles)
   ---------------------------------------------------------- */
body.login-page {
    background: linear-gradient(160deg, var(--delta-slate) 0%, #4a5a6a 40%, var(--delta-dark-grey) 100%);
    display:flex; align-items:center; justify-content:center;
    padding:var(--space-4);
}
body.login-page::before {
    content:''; position:fixed; inset:0;
    background: radial-gradient(ellipse at 20% 80%, rgba(153,192,30,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(153,192,30,0.05) 0%, transparent 50%);
    pointer-events:none;
}
.login-wrapper { width:100%; max-width:440px; position:relative; z-index:1; }
.login-logo { text-align:center; margin-bottom:var(--space-6); }
.login-logo img { height:96px; width:auto; filter:brightness(0) invert(1); opacity:0.9; }
.login-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow), 0 0 0 1px rgba(255,255,255,0.05); overflow:hidden;
}
.login-card__header {
    background: linear-gradient(135deg, var(--delta-slate), var(--delta-dark-grey));
    padding:1.75rem var(--space-6) var(--space-5); text-align:center; color:#fff;
}
.login-card__header h1 { font-size:var(--font-large); font-weight:var(--font-weight-heavy); color:#fff; margin-bottom:0.2rem; }
.login-card__header p { font-size:var(--font-small); opacity:0.8; font-weight:400; color:rgba(255,255,255,0.8); }
.login-card__body { padding:var(--space-6); }
.login-footer {
    text-align:center; padding:var(--space-4) var(--space-6);
    font-size:var(--font-small); color:rgba(255,255,255,0.5);
}

@media (max-width:480px) {
    body.login-page { padding:var(--space-3); align-items:flex-start; padding-top:2rem; }
    .login-card__header { padding:var(--space-6) var(--space-5) var(--space-4); }
    .login-card__body { padding:var(--space-5); }
    .login-logo img { height:72px; }
}

/* ----------------------------------------------------------
   15. DASHBOARD SPEZIFISCH
   ---------------------------------------------------------- */
.welcome-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    padding:var(--space-5); margin-bottom:var(--space-4);
    box-shadow:var(--delta-shadow);
}
.welcome-card h2 { font-size:var(--font-medium); color:var(--delta-dark-grey); margin-bottom:0.25rem; }
.welcome-card__meta { font-size:var(--font-small); color:var(--delta-placeholder); }
.welcome-card__meta strong { color:var(--delta-dark-grey); }

.cards-feed { display:flex; flex-direction:column; gap:var(--space-3); }

/* Admin-Bar */
.admin-bar {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3);
    box-shadow:var(--delta-shadow);
    display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
}
.admin-bar__label {
    font-size:var(--font-small); font-weight:var(--font-weight-heavy);
    color:var(--delta-placeholder); text-transform:uppercase;
    letter-spacing:0.04em; flex-basis:100%;
}
.admin-bar select {
    flex:1; min-width:180px; padding:0.55rem 0.75rem;
    border:2px solid var(--delta-placeholder); border-radius:var(--delta-radius);
    font-size:var(--font-small); font-family:var(--font-family);
    background:var(--delta-bg-light); color:var(--delta-slate);
    outline:none; transition:border-color 0.2s;
}
.admin-bar select:focus { border-color:var(--delta-green); box-shadow:0 0 0 3px rgba(153,192,30,0.12); }

@media (min-width:600px) {
    .admin-bar { flex-wrap:nowrap; }
    .admin-bar__label { flex-basis:auto; margin-right:var(--space-2); }
}

/* ----------------------------------------------------------
   16. DETAIL PAGE SPEZIFISCH
   ---------------------------------------------------------- */
.chart-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); padding:var(--space-5) var(--space-4);
    margin-bottom:var(--space-4);
}
.chart-card__header {
    display:flex; align-items:center; gap:0.6rem; margin-bottom:var(--space-4);
    padding-bottom:0; border-bottom:none;
}
.chart-card__header h2 { font-size:var(--font-medium); color:var(--delta-dark-grey); margin-bottom:0; }
.chart-card .unit-badge {
    font-size:var(--font-small); color:var(--delta-placeholder);
    background:var(--delta-bg-light); padding:0.2rem 0.6rem;
    border-radius:9999px; font-weight:var(--font-weight-bold);
}
.chart-container { position:relative; width:100%; height:320px; margin-bottom:0.5rem; }
.chart-container canvas { width:100% !important; height:100% !important; }

/* Range-Bar */
.range-bar {
    display:flex; align-items:center; gap:var(--space-2);
    margin-bottom:var(--space-3);
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    padding:0.6rem 0.85rem; box-shadow:var(--delta-shadow);
}
.range-bar__label {
    font-size:var(--font-small); font-weight:var(--font-weight-heavy);
    color:var(--delta-placeholder); text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;
}
.range-bar select {
    flex:1; padding:0.55rem 0.75rem;
    border:2px solid var(--delta-placeholder); border-radius:var(--delta-radius);
    font-size:var(--font-small); font-family:var(--font-family);
    background:var(--delta-bg-light); color:var(--delta-slate);
    outline:none; min-height:44px;
}
.range-bar select:focus { border-color:var(--delta-green); box-shadow:0 0 0 3px rgba(153,192,30,0.12); }

/* Split-Screen */
.split-card {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-3);
}
.split-card__half {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); padding:var(--space-4); text-align:center;
}
.split-card__label {
    font-size:0.65rem; font-weight:var(--font-weight-heavy); text-transform:uppercase;
    letter-spacing:0.05em; color:var(--delta-placeholder); margin-bottom:0.35rem;
}
.split-card__value { font-size:1.5rem; font-weight:800; color:var(--delta-dark-grey); line-height:1.2; }
.split-card__value .unit { font-size:0.75rem; font-weight:400; color:var(--delta-placeholder); }
.split-card__sub { font-size:var(--font-small); color:var(--delta-placeholder); margin-top:0.15rem; }

.comp-chart-container { position:relative; width:100%; height:320px; margin-top:0.5rem; }
.comp-chart-container canvas { width:100% !important; height:100% !important; }
.legend-marker { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:0.25rem; }

@media (min-width:600px) {
    .chart-container { height:400px; }
    .chart-card { padding:var(--space-6); }
    .comp-chart-container { height:320px; }
    .split-card__value { font-size:1.8rem; }
}
@media (min-width:1024px) {
    .chart-container { height:450px; }
}
/* ----------------------------------------------------------
   17. ADMIN PAGES
   ---------------------------------------------------------- */
.user-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); padding:var(--space-5); margin-bottom:var(--space-3);
}
.user-card__header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:var(--space-3); flex-wrap:wrap; gap:var(--space-2);
}
.user-card__name { font-weight:var(--font-weight-heavy); font-size:var(--font-normal); color:var(--delta-dark-grey); }
.user-card__email { font-size:var(--font-small); color:var(--delta-placeholder); }
.user-card__form { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.user-card__form .delta-form-group { margin-bottom:0; }
.user-card__form .delta-btn--primary { grid-column:1/-1; }

@media (max-width:400px) { .user-card__form { grid-template-columns:1fr; } }
@media (min-width:600px) { .user-card__form { grid-template-columns:1fr 1fr auto auto; } }

/* KPI Grid */
.kpi-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-bottom:var(--space-4);
}
.kpi-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); padding:var(--space-4); text-align:center;
}
.kpi-card__value { font-size:1.8rem; font-weight:800; color:var(--delta-dark-grey); line-height:1.1; }
.kpi-card__label {
    font-size:var(--font-small); color:var(--delta-placeholder);
    text-transform:uppercase; letter-spacing:0.04em; margin-top:0.2rem;
}
.kpi-card--full { grid-column:1/-1; }
@media (min-width:600px) { .kpi-grid { grid-template-columns:repeat(3,1fr); gap:var(--space-4); } }

/* Section Card */
.section-card {
    background:var(--delta-card-bg); border-radius:var(--delta-radius);
    box-shadow:var(--delta-shadow); overflow:hidden; margin-bottom:var(--space-3);
}
.section-card__header {
    padding:0.9rem var(--space-5); font-weight:var(--font-weight-heavy);
    font-size:var(--font-normal); color:var(--delta-dark-grey);
    border-bottom:1px solid var(--delta-placeholder);
}

/* User Row */
.user-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.7rem var(--space-5); border-bottom:1px solid var(--delta-placeholder);
    flex-wrap:wrap; gap:0.25rem;
}
.user-row:last-child { border-bottom:none; }
.user-row__name { font-weight:var(--font-weight-bold); font-size:var(--font-small); }
.user-row__meta { font-size:var(--font-small); color:var(--delta-placeholder); }

/* Toast */
.toast {
    padding:var(--space-3) var(--space-4); border-radius:var(--delta-radius);
    margin-bottom:var(--space-4); font-size:var(--font-small); font-weight:500;
}
.toast--success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.toast--error   { background:var(--delta-red-bg); color:#991b1b; border:1px solid #fecaca; }

/* Export Button */
.btn-export {
    display:block; width:100%; padding:0.85rem;
    background:var(--delta-green); color:#fff; border:none;
    border-radius:var(--delta-radius); font-weight:var(--font-weight-heavy);
    font-size:var(--font-normal); cursor:pointer; text-decoration:none;
    text-align:center; margin-bottom:var(--space-4); min-height:48px;
}
.btn-export:hover { background:var(--delta-lime); color:var(--delta-dark-grey); }
/* ----------------------------------------------------------
   18. LOADING & EMPTY STATES
   ---------------------------------------------------------- */
.delta-loading {
    text-align:center; padding:var(--space-10) var(--space-4);
    color:var(--delta-placeholder);
}
.delta-spinner {
    display:inline-block; width:36px; height:36px;
    border:3px solid var(--delta-placeholder); border-top-color:var(--delta-green);
    border-radius:50%; animation:delta-spin 0.7s linear infinite;
    margin-bottom:var(--space-3);
}
@keyframes delta-spin { to { transform:rotate(360deg); } }

.delta-empty {
    text-align:center; padding:var(--space-10) var(--space-4);
    color:var(--delta-placeholder); font-size:var(--font-normal);
}

/* ----------------------------------------------------------
   19. UTILITY CLASSES
   ---------------------------------------------------------- */
.delta-container { max-width:var(--bp-desktop); margin:0 auto; padding:0 var(--space-4); }
.delta-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.delta-divider { border:none; border-top:1px solid var(--delta-placeholder); margin:var(--space-4) 0; }

.delta-flex       { display:flex; }
.delta-flex-col   { flex-direction:column; }
.delta-flex-wrap  { flex-wrap:wrap; }
.delta-items-center { align-items:center; }
.delta-justify-between { justify-content:space-between; }
.delta-gap-2      { gap:var(--space-2); }
.delta-gap-3      { gap:var(--space-3); }
.delta-gap-4      { gap:var(--space-4); }

.delta-grid-2 { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:600px) { .delta-grid-2 { grid-template-columns:1fr 1fr; } }

/* ----------------------------------------------------------
   20. RESPONSIVE
   ---------------------------------------------------------- */
@media (min-width:600px) {
    .delta-container { padding:0 var(--space-6); }
    .delta-card { padding:var(--space-6); }
    .delta-table { font-size:var(--font-small); }
}
@media (min-width:1024px) {
    .delta-container { max-width:960px; }
    .delta-main { max-width:800px; }
    .delta-main--wide { max-width:1400px; }
}

/* ----------------------------------------------------------
   19. HAUS-BENCHMARK & NEUE DASHBOARD-WIDGETS
   ---------------------------------------------------------- */
.benchmark-body { font-size:0.9rem; }
.benchmark-row span { font-weight:500; }
.benchmark-bar-bg { height:10px; background:#e2e8f0; border-radius:5px; overflow:hidden; margin-bottom:0.4rem; }

/* PV-Widget */
.pv-widget { border:none !important; background:linear-gradient(135deg,#fefce8,#fef9c3); margin-bottom:0.75rem; }
.pv-widget:hover { box-shadow:var(--delta-shadow); }

/* Wetter-Widget */
.weather-widget { border:none !important; background:linear-gradient(135deg,#eff6ff,#dbeafe); margin:0.75rem 0; }
.weather-widget:hover { box-shadow:0 4px 12px rgba(59,130,246,0.15); }

/* ----------------------------------------------------------
   END OF STYLESHEET
   ---------------------------------------------------------- */