:root {
    /* NEUES Farbschema */
    --primary-color: #2563eb;    /* Starkes professionelles Blau */
    --primary-color-light: #79bbff; /* Helleres Blau für Akzente/Gradients */
    --secondary-color: #1e40af;  /* Dunkleres Blau für Tiefe */
    --accent-color: #0284c7;     /* Ergänzendes Business-Blau */
    --text-color: #1e293b;       /* Dunkles Schiefergrau für Text */
    --text-color-muted: #6b7280; /* Gedämpfte Textfarbe für sekundäre Infos */
    --text-color-light: #475569; /* Etwas hellere Textfarbe für Details */
    --bg-color: #ffffff;         /* Sauberes weißes Hintergrund */
    --card-bg: #f8fafc;          /* Helles Grau für Karten */
    --card-border: #e2e8f0;      /* Dezente Randfarbe */
    --input-bg: #ffffff;         /* Hintergrund für Eingabefelder */
    --text-on-primary: #ffffff;  /* Textfarbe auf primärem Hintergrund */
    --text-on-accent: #ffffff;   /* Textfarbe auf Akzentfarbe */
    --danger-color: #dc2626;     /* Rot für Warnungen/Löschen */
    --success-color: #16a34a;    /* Grün für Erfolg */
    --warning-color: #f59e0b;    /* Orange für Warnungen */
    --info-color: #0284c7;       /* Blau für Info (oft wie Akzent) */
    --chart-datalabel-color: #ffffff; /* Farbe für Datenlabels im Chart */
    --skeleton-base-color: #e0e0e0;
    --skeleton-shine-color: rgba(255,255,255,0.5);
    --select-arrow-color: '%236b7280'; /* URL-kodiertes Grau für Select-Pfeil */


    --nav-height: 75px;          /* ANGEPASST: Höhe der Navigationsleiste erhöht (vorher 65px) */
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 10px); /* Für iOS Home Bar */
    --border-radius-std: 8px;    /* Standard Eckenradius */
    --border-radius-large: 12px; /* Größerer Eckenradius */

    /* Stelle sicher, dass du Variablen für sekundäre Button-Farben hast oder definiere sie.
       Diese sind Beispiele. Passe sie an dein Farbschema an. */
    --button-secondary-bg: #6c757d; /* z.B. Grauton für Light Mode */
    --button-secondary-text-color: white;
    --button-secondary-hover-bg: #5a6268;

    /* Stelle sicher, dass du Variablen für "danger" Button-Farben hast oder definiere sie. */
    /* Diese sind Beispiele. Passe sie an dein Farbschema an. */
    --danger-color: #dc3545; /* Standard Rot für Light Mode */
    --danger-color-hover: #c82333;
    --danger-text-color: white;

    /* In styles.css hinzufügen */
    --success-color: #28a745; /* Standard Grün */
    /* --danger-color sollte bereits für Fehlermeldungen existieren */

    /* NEUE Variablen für Login Screen Design */
    --login-bg-color: var(--bg-color); /* Geändert auf Standard-App-Hintergrund für Light Mode */
    --login-text-color: #1c1e21;
    --login-title-color: #050f28;
    --login-input-bg: rgba(0, 0, 0, 0.04);
    --login-input-border: rgba(0, 0, 0, 0.08);
    --login-input-text-color: #1c1e21;
    --login-input-placeholder-color: rgba(0, 0, 0, 0.5);
    --login-input-focus-border: var(--primary-color);
    --login-input-focus-bg: rgba(0, 0, 0, 0.05);
    --login-input-focus-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --login-btn-bg: var(--primary-color);
    --login-btn-text: var(--text-on-primary);
    --login-btn-hover-bg: var(--secondary-color);
    --login-btn-shadow: 0 8px 25px color-mix(in srgb, var(--primary-color) 25%, transparent);
    --login-link-color: var(--primary-color);
    --login-link-hover-color: var(--secondary-color);
    --login-secondary-link-color: #90949c; /* Helleres Grau für Light Mode */

    --login-pattern-c1: rgba(0, 0, 0, 0.02);
    --login-pattern-c2: rgba(0, 0, 0, 0.01);
    --login-logo-bg: rgba(0, 0, 0, 0.03);
    --login-logo-border: rgba(0, 0, 0, 0.05);
    /* --login-password-toggle-color: rgba(0, 0, 0, 0.5); Entfernt */
}

html[data-theme="dark"] {
    --primary-color: #3b82f6;    /* Helleres Blau für Dark Mode */
    --primary-color-light: #60a5fa;
    --secondary-color: #2563eb;  /* Etwas dunkler als Primary im Dark Mode */
    --accent-color: #0ea5e9;     /* Helleres Akzentblau */
    --text-color: #e5e7eb;       /* Heller Text */
    --text-color-muted: #9ca3af; /* Helleres gedämpftes Grau */
    --text-color-light: #d1d5db;  /* Noch helleres Grau */
    --bg-color: #111827;         /* Sehr dunkler Hintergrund (Tailwind gray-900) */
    --card-bg: #1f2937;          /* Dunkleres Grau für Karten (Tailwind gray-800) */
    --card-border: #374151;      /* Randfarbe für Karten (Tailwind gray-700) */
    --input-bg: #374151;         /* Hintergrund für Eingabefelder im Dark Mode */
    --text-on-primary: #ffffff;  /* Bleibt oft weiß */
    --text-on-accent: #ffffff;   /* Bleibt oft weiß */
    --danger-color: #ef4444;     /* Etwas helleres Rot für besseren Kontrast */
    --success-color: #22c55e;    /* Etwas helleres Grün */
    --warning-color: #f97316;    /* Etwas helleres Orange */
    --info-color: #0ea5e9;       /* Wie Akzent */
    --chart-datalabel-color: #1f2937; /* Dunkle Labels auf hellen Chart-Segmenten */
    --skeleton-base-color: #374151; /* Dunklere Basis für Skeleton */
    --skeleton-shine-color: rgba(75, 85, 99, 0.5); /* Dunklerer Schein */
    --select-arrow-color: '%239ca3af'; /* URL-kodiertes helleres Grau für Select-Pfeil */

    /* ... andere Dark Mode Variablen ... */
    --button-secondary-bg: #0a0b0c; /* Dunkleres Grau für Dark Mode */
    --button-secondary-text-color: #000000; /* Hellerer Text für Dark Mode */
    --button-secondary-hover-bg: #b7b7b7;
    /* Passe diese Farben für den Dark Mode an */
    --danger-color: #a91e2c; /* Ein etwas gedämpfteres oder angepasstes Rot für Dark Mode */
    --danger-color-hover: #8a1823;
    --danger-text-color: #f8f9fa; /* Hellerer Text für Dark Mode */

    /* NEUE Variablen für Login Screen Design - Dark Mode */
    --login-bg-color: #0a0f1f; /* Sehr dunkles Blau/Schwarz */
    --login-text-color: #e5e7eb;
    --login-title-color: #ffffff;
    --login-input-bg: rgba(255, 255, 255, 0.05);
    --login-input-border: rgba(255, 255, 255, 0.1);
    --login-input-text-color: #e5e7eb;
    --login-input-placeholder-color: rgba(255, 255, 255, 0.4);
    --login-input-focus-border: var(--primary-color); /* Bleibt primärfarben */
    --login-input-focus-bg: rgba(255, 255, 255, 0.08);
    --login-input-focus-shadow: 0 6px 20px rgba(255, 255, 255, 0.08);
    --login-btn-bg: var(--primary-color); /* Konsistent mit App-Buttons */
    --login-btn-text: var(--text-on-primary);
    --login-btn-hover-bg: var(--secondary-color);
    --login-btn-shadow: 0 8px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);
    --login-link-color: var(--primary-color-light);
    --login-link-hover-color: #ffffff;
    --login-secondary-link-color: rgba(255, 255, 255, 0.55); /* Bleibt im Dark Mode relativ hell für Lesbarkeit auf dunklem Grund, aber immer noch sekundär */

    --login-pattern-c1: rgba(255, 255, 255, 0.025);
    --login-pattern-c2: rgba(255, 255, 255, 0.01);
    --login-logo-bg: rgba(255, 255, 255, 0.07);
    --login-logo-border: rgba(255, 255, 255, 0.07);
    /* --login-password-toggle-color: rgba(255, 255, 255, 0.5);  Entfernt */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* System Font Stack */
}

body {
    background-color: var(--bg-color); /* Weißer Hintergrund */
    min-height: 100vh;
    /* Passt das untere Padding an, um Platz für die Nav-Leiste UND die Safe Area zu schaffen */
    padding: 15px 15px calc(60px + 20px + env(safe-area-inset-bottom) + 20px) 15px; /* Höhe Leiste + Abstand unten + Safe Area + Puffer */
    touch-action: pan-x pan-y;
    color: var(--text-color); /* Dunkler Text */
    -webkit-tap-highlight-color: transparent; /* Klick-Highlight auf Touch entfernen */
    transition: background-color 0.3s ease, color 0.3s ease; /* Übergang für Theme-Wechsel */
}

/* --- Initial Loading Overlay --- */
.initial-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Halbtransparenter weißer Hintergrund */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Sehr hoher z-index, um über allem zu liegen */
    opacity: 1;
    transition: opacity 0.3s ease-out, background-color 0.3s ease; /* Sanftes Ausblenden */
}

html[data-theme="dark"] .initial-loading-overlay {
    background-color: rgba(17, 24, 39, 0.85); /* Passend zum dunklen Hintergrund */
}

.initial-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Klicks durchlassen, wenn ausgeblendet */
}

.initial-loading-overlay .loading-spinner {
    border: 5px solid var(--card-bg, #f3f3f3); /* Hellgrauer Rand */
    border-top: 5px solid var(--primary-color, #2563eb); /* Blaue "Lade"-Farbe */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spinGlobal 1s linear infinite;
    margin-bottom: 20px;
}

.initial-loading-overlay p {
    font-size: 1.1em;
    color: var(--text-color, #1e293b);
}

/* Globale Spinner-Animation (falls nicht schon vorhanden) */
@keyframes spinGlobal {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner für Ladeanzeigen in den Views */
.loading-spinner-view {
    border: 4px solid var(--card-bg, #f3f3f3); /* Etwas dünnerer Rand */
    border-top: 4px solid var(--primary-color, #2563eb); /* Blaue "Lade"-Farbe */
    border-radius: 50%;
    width: 30px;  /* Kleinerer Spinner */
    height: 30px;
    animation: spinGlobal 0.8s linear infinite; /* Etwas schnellere Animation ggf. */
    margin: 0 auto; /* Stellt sicher, dass er zentriert ist, wenn der Parent text-align:center hat */
}

.saved { background-color: var(--success-color) !important; color: white !important; border-color: var(--success-color) !important; }

/* Anpassung für #loadingIndicator, falls sein Parent kein Flex-Center ist */
#loadingIndicator .loading-spinner-view {
    /* margin: 0 auto; ist bereits oben, aber zur Verdeutlichung hier */
}

/* Anpassung für .loading-indicator-view, die bereits text-align: center haben */
.loading-indicator-view {
    display: flex; /* Um den Spinner perfekt zu zentrieren, wenn er das einzige Kind ist */
    justify-content: center;
    align-items: center;
    /* text-align: center;  Beibehalten, falls doch Text hinzugefügt wird */
    padding: 40px 20px; /* Beibehalten */
    color: var(--text-color-muted, #6b7280); /* Farbe für eventuellen Text */
}

/* --- Login Container --- */
.login-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background: var(--card-bg); /* Helle Karte */
    border-radius: var(--border-radius-large); /* Größerer Radius */
    border: 1px solid var(--card-border); /* Dezenter Rand */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Leichter Schatten */
    text-align: center;
    justify-content: center;
    align-items: center;
}

.login-container img {
    max-width: 70px; /* Etwas kleineres Logo */
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.login-container h2 {
    color: var(--text-color);
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

/* Konsistente Input-Stile */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%; /* Volle Breite */
    padding: 14px 18px; /* Vergrößertes Padding */
    margin-bottom: 12px; /* Angepasster Abstand */
    border: 1px solid var(--card-border); /* Dezenter Rand */
    border-radius: 12px; /* Größerer Radius für modernen Look */
    font-size: 1rem;
    background-color: var(--input-bg); /* Hintergrundfarbe */
    color: var(--text-color); /* Textfarbe */
    box-sizing: border-box; /* Korrektes Box-Modell */
    transition: all 0.25s ease-in-out; /* Sanfterer Übergang */
    appearance: none; /* Standard-Aussehen entfernen */
    -webkit-appearance: none;
    -moz-appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color); /* Blauer Rand bei Fokus */
    background-color: color-mix(in srgb, var(--card-bg) 50%, var(--bg-color) 50%); /* Leichter Hintergrundwechsel bei Fokus */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Moderner Schatten */
}

/* Select Pfeil */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='var(--select-arrow-color)'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem; /* Platz für den Pfeil */
}

textarea {
    min-height: 80px; /* Mindesthöhe für Textarea */
    resize: vertical;
}

/* Container für Login/Register Buttons */
.button-container {
    position: relative;
    width: 100%; /* Volle Breite nehmen */
    height: 48px; /* Feste Höhe für Buttons */
    margin: 10px 0 5px 0; /* Abstand anpassen */
}

/* Konsistente Button-Stile */
button, .loginbutton, .registerbutton, #searchStreetButton, #installButton {
    padding: 12px 20px; /* Einheitliches Padding */
    border-radius: var(--border-radius-std); /* Standard Radius */
    font-size: 1rem;
    font-weight: 500; /* Etwas fetter */
    cursor: pointer;
    border: none; /* Kein Rand standardmäßig */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, color 0.2s ease;
    text-align: center;
    display: inline-flex; /* Für Icon + Text Zentrierung */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
}

button:active, .loginbutton:active, .registerbutton:active, #searchStreetButton:active, #installButton:active {
     transform: scale(0.98); /* Leichter Klick-Effekt */
}

/* Primär-Buttons (Login, Suchen etc.) */
.loginbutton, #searchStreetButton {
    background-color: var(--primary-color); /* Blau */
    color: var(--text-on-primary); /* Weißer Text */
    width: 100%; /* Volle Breite im Container */
    height: 100%;
    position: absolute; /* Für Überlagerung im Login */
    top: 0;
    left: 0;
}
.loginbutton:hover, #searchStreetButton:hover {
    background-color: var(--secondary-color); /* Dunkleres Blau im Hover */
}

/* --- Ladeanimation für den Login-Button --- */
.loginbutton.loading {
    position: relative; /* Position relativ für das Spinner-Element */
    pointer-events: none; /* Verhindert weitere Klicks */
    color: transparent !important; /* Text ausblenden */
}

.loginbutton.loading::after {
    content: ''; /* Spinner-Element */
    position: absolute;
    top: 0; /* NEU */
    bottom: 0; /* NEU */
    left: 0; /* NEU */
    right: 0; /* NEU */
    margin: auto; /* NEU - Zentriert das Element mit fester Größe */
    width: 20px; /* Spinner-Größe */
    height: 20px;
    border: 3px solid var(--text-on-primary); /* Spinner-Farbe */
    border-top: 3px solid transparent; /* Transparent für den Spinner-Effekt */
    border-radius: 50%; /* Rund */
    animation: spin 0.6s linear infinite; /* Animation */
    /* transform: translate(-50%, -50%); ENTFERNT */
}

/* Spinner-Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ladeanimation für den Register-Button */
.registerbutton.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important; /* Text ausblenden */
}

.registerbutton.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 3px solid var(--text-on-accent, var(--text-on-primary)); /* Spinner-Farbe, Fallback auf Primary */
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    transform: translate(-50%, -50%);
}

/* --- Fehlerzustand für den Login-Button --- */
.loginbutton.error {
    background-color: var(--danger-color); /* Rote Hintergrundfarbe */
    color: white; /* Weißer Text für bessere Lesbarkeit */
    border: 1px solid var(--danger-color); /* Roter Rand */
}

/* Fehlerklasse für Input-Felder */
input.error-input {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-color) 20%, transparent) !important; /* Roter Schein */
}

/* ================= MAP PROGRESS OVERLAY ================= */
.map-progress-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(3px);
    z-index: 1300; /* über Karte & Nav */
    padding: 20px;
}
.map-progress-overlay .mpo-inner {
    width: 100%;
    max-width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: mpo-pop 0.25s ease;
}
@keyframes mpo-pop { from { transform: translateY(6px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.map-progress-overlay .mpo-heading {
    font-size: 1.05em;
    font-weight: 600;
    text-align: center;
}
.map-progress-overlay .mpo-bar-wrapper {
    position: relative;
    height: 10px;
    background: linear-gradient(90deg, var(--card-border), color-mix(in srgb, var(--card-border) 60%, transparent));
    border-radius: 6px;
    overflow: hidden;
}
.map-progress-overlay .mpo-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.25s ease;
}
.map-progress-overlay .mpo-stats {
    font-size: 0.85em;
    text-align: center;
    letter-spacing: 0.5px;
    color: var(--text-color-light);
}
.map-progress-overlay .mpo-hint {
    font-size: 0.75em;
    text-align: center;
    color: var(--text-color-muted);
}
.map-progress-overlay .mpo-cancel-btn {
    margin-top: 4px;
    align-self: center;
    padding: 6px 14px;
    font-size: 0.8em;
    border-radius: 20px;
    background: var(--danger-color);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.map-progress-overlay .mpo-cancel-btn:hover { background: var(--danger-color-hover, #b91c1c); }
html[data-theme="dark"] .map-progress-overlay { background: rgba(0,0,0,0.55); }
html[data-theme="dark"] .map-progress-overlay .mpo-inner { box-shadow: 0 10px 28px rgba(0,0,0,0.6); }

/* Leichter Streifen-Animation Effekt wenn noch kein Total bekannt */
.map-progress-overlay.indeterminate .mpo-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 50%, var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: mpo-stripes 1.2s linear infinite;
}
@keyframes mpo-stripes { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* Sekundär/Register-Button */
.registerbutton {
    background-color: var(--accent-color); /* Helles Business-Blau */
    color: var(--text-on-accent);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.registerbutton:hover {
    background-color: color-mix(in srgb, var(--accent-color) 85%, black); /* Dunkleres Akzent-Blau */
}

.hidden {
    visibility: hidden;
    opacity: 0; /* Ausblenden für Transition */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.button-container .loginbutton:not(.hidden) ~ .registerbutton {
    /* Style wenn Login sichtbar ist */
}
.button-container .registerbutton:not(.hidden) ~ .loginbutton {
     /* Style wenn Register sichtbar ist */
}


#registerText, #resetText {
    display: block;
    text-align: center; /* Zentrieren */
    margin-top: 5px;
    font-size: 0.9em;
}
#registerText a, #resetText a {
    color: var(--primary-color); /* Blau für Links */
    text-decoration: none;
}
#registerText a u, #resetText a u {
    text-decoration: underline;
}
#registerText a:hover, #resetText a:hover {
    color: var(--secondary-color);
}
/* Link zum Login zurück (dynamisch erzeugt) */
#loginContainer > div > a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9em;
}
#loginContainer > div > a:hover {
     color: var(--secondary-color);
}

/* --- APP STRUKTUR --- */
.app-container {
    width: 100%;
    display: none;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    height: auto; /* Oder 100% beibehalten, aber viewContainer anpassen */
}

.app-header {
    display: flex;
    justify-content: space-between; /* Titel links, Rest rechts */
    align-items: center;
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--card-border);
    gap: 10px; /* Abstand zwischen Titel und rechter Gruppe */
}

.app-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--text-color);
    flex-shrink: 0; /* Verhindert, dass Titel schrumpft */
    white-space: nowrap; /* Verhindert Umbruch des Titels */
}

/* Neuer Container für rechte Header-Elemente */
.header-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen PLZ, Suche, Logout */
}

/* PLZ Input im Header */
.app-header #plzInput {
    /* Nimmt generische Input-Stile an, aber überschreibt Breite etc. */
    width: 75px; /* Breite für ca. 5 Ziffern + Padding */
    max-width: 75px;
    padding: 8px 10px; /* Weniger Padding */
    margin-bottom: 0; /* Kein Abstand nach unten */
    font-size: 0.95em; /* Etwas kleinere Schrift */
    text-align: center; /* Zahlen zentrieren */
    flex-shrink: 0; /* Nicht schrumpfen */
    background-color: var(--input-bg); /* Sicherstellen, dass es die Input-BG-Variable nutzt */
    color: var(--text-color);
    border-color: var(--card-border);
}

/* Search Button im Header */
.app-header #searchStreetButton {
    /* Nimmt generische Button-Stile an, aber wird zum Icon-Button */
    background-color: transparent; /* Transparent */
    color: var(--primary-color); /* Blaue Icon-Farbe */
    padding: 0; /* Kein Text-Padding */
    width: 40px; /* Feste Breite/Höhe */
    height: 40px;
    border-radius: 50%; /* Rund */
    flex-shrink: 0; /* Nicht schrumpfen */
    position: static; /* Nicht mehr absolut */
    box-shadow: none; /* Kein Schatten */
    border: 1px solid transparent; /* Platzhalter für Rand im Hover */
    display: inline-flex; /* Wichtig für Icon-Zentrierung */
    align-items: center;
    justify-content: center;
}
.app-header #searchStreetButton span.material-icons {
    font-size: 24px; /* Passende Icon-Größe */
    margin: 0; /* Kein extra Margin für Icon */
}
.app-header #searchStreetButton:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); /* Heller Hintergrund im Hover */
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent); /* Heller Rand im Hover */
}
.app-header #searchStreetButton:active {
    transform: scale(0.95); /* Stärkerer Klick-Effekt */
}

/* Stile für den Locate Me Button im Header */
.app-header #locateMeButton {
    background-color: transparent;
    color: var(--primary-color); /* Oder eine andere Akzentfarbe, falls gewünscht */
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: static;
    box-shadow: none;
    border: 1px solid transparent;
    display: inline-flex; /* Wichtig für Icon-Zentrierung */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Zeiger für Klickbarkeit */
}

.app-header #locateMeButton span.material-icons {
    font-size: 24px;
    margin: 0;
    transition: transform 0.5s linear; /* Für sanftere Drehung, falls spin-Klasse genutzt wird */
}

/* Stellt sicher, dass das Icon sich dreht und nicht der ganze Button, wenn .spin aktiv ist */
.app-header #locateMeButton span.material-icons.spin {
    animation: spin 1s linear infinite;
}

/* Optional: Deaktivierter Zustand explizit stylen, falls nötig */
.app-header #locateMeButton:disabled {
    /* Standard-Browser-Stile für disabled könnten greifen.
       Wenn das Icon auch bei disabled sichtbar bleiben soll (nur nicht klickbar),
       könnte man hier color und cursor anpassen.
       Wenn die spin-Animation auch im disabled Zustand laufen soll, ist das okay.
       Andernfalls müsste man die .spin-Klasse entfernen, wenn disabled.
       Die JS-Logik entfernt .spin im finally-Block, was gut ist. */
    cursor: default;
    /* color: #a0aec0; */ /* Beispiel: Gedämpfte Farbe für disabled Icon */
}


.app-header #locateMeButton:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); /* Heller Hintergrund im Hover */
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent); /* Heller Rand im Hover */
}
.app-header #locateMeButton:active:not(:disabled) {
    transform: scale(0.95);
}

/* Stile für den Kartenansicht-Button, analog zum LocateMeButton */
.app-header #mapViewButton {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: static;
    box-shadow: none;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.app-header #mapViewButton span.material-icons {
    font-size: 24px;
    margin: 0;
}

.app-header #mapViewButton:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.app-header #mapViewButton:active {
    transform: scale(0.95);
}

.app-header #adminSettingsButton {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: static;
    box-shadow: none;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.app-header #adminSettingsButton span.material-icons {
    font-size: 24px;
    margin: 0;
}

.app-header #adminSettingsButton:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.app-header #adminSettingsButton:active {
    transform: scale(0.95);
}

/* Logout Button bleibt fast gleich, evtl. Hover anpassen */
.logout {
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--text-color);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0; /* Nicht schrumpfen */
}
.logout span { font-size: 24px !important; }
.logout:hover {
    background-color: var(--card-bg);
    color: var(--primary-color);
}

#viewContainer {
    flex-grow: 1;
    overflow-y: auto;
    /* Höhe muss nun den gesamten Platz unter dem Header einnehmen */
    /* Die Höhe wird jetzt vom Inhalt bestimmt bzw. durch scrollen */
     height: auto;
     /* padding-bottom: 15px; /* Kleiner Abstand am Ende */
}

.view {
    display: none;
    width: 100%;
    height: 100%;
}

.view.active-view {
    display: block;
}

/* Liste standardmäßig verstecken, wenn die View nicht aktiv ist */
.view:not(.active-view) #streetListContainer,
.view:not(.active-view) #streetDetailContainer {
    display: none !important;
}

/* Allgemeine Karte für Inhalte in den Views */
.content-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-large);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.content-card h2 {
    margin-bottom: 15px;
    text-align: center;
    color: var(--text-color);
}

/* --- Navigationsleiste --- */

/* NEUE STILE FÜR NAVIGATIONSLEISTE */
.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom)); /* Abstand von unten + Safe Area */
    width: calc(100% - 40px); /* Breite der Leiste, mit seitlichem Abstand */
    max-width: 350px; /* Maximale Breite für größere Bildschirme */
    height: 60px;
    background-color: #1A202C; /* Sehr dunkles Grau, fast schwarz */
    border-radius: 30px; /* Stark abgerundet */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between; /* Geändert von space-around */
    align-items: center;
    padding: 0 10px; /* Horizontaler Innenabstand erhöht (vorher 10px) */
    z-index: 1000;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.nav-item {
    background-color: transparent;
    border: none;
    color: #A0AEC0; /* Hellgrau für inaktive Icons */
    cursor: pointer;
    padding: 10px; /* Klickfläche */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 100 auto; /* Geändert von flex: 1 */
    transition: color 0.2s ease, transform 0.1s ease;
}

.nav-item .material-icons {
    font-size: 26px; /* Icon Größe */
}

.nav-item.active {
    color: #FFFFFF; /* Weiß für aktives Icon */
}
.nav-item.active .material-icons{
     /* Ggf. spezielles Styling für aktives Icon, z.B. falls es ein 'gefülltes' Icon sein soll und das Standard-Icon outline ist */
}

/* Vergrößerter Abstand zwischen dem zweiten und dritten Navigationsitem */
.nav-item:nth-child(2) {
    margin-right: 55px; /* Zusätzlicher Abstand rechts vom zweiten Item */
}

.nav-item:nth-child(3) {
    margin-left: 15px; /* Zusätzlicher Abstand links vom dritten Item */
}

.nav-item:active {
    transform: scale(0.9);
}

/* Navigationsleiste ausblenden bei Input-Fokus */
body.nav-hidden .bottom-nav {
    transform: translateX(-50%) translateY(100px); /* Nach unten schieben */
    opacity: 0;
}

/* Floating Action Button (FAB) */
.nav-fab {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom) + 60px - 28px - 8px); /* Positioniert relativ zum unteren Rand: (bottom-nav Abstand) + (Höhe bottom-nav) - (halbe FAB Höhe) - (Überlappung) */
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background-color: var(--primary-color); /* Blau aus Variablen */
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
    border: 4px solid var(--bg-color); /* Rand in Hintergrundfarbe des Body für "Cutout"-Effekt */
    z-index: 1001; /* Über der .bottom-nav */
    cursor: pointer;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.nav-fab .material-icons {
    font-size: 28px;
}

.nav-fab:active {
    transform: translateX(-50%) scale(0.95);
}

/* FAB ausblenden bei Input-Fokus */
body.nav-hidden .nav-fab {
    transform: translateX(-50%) translateY(100px); /* Nach unten schieben */
    opacity: 0;
}


/* Entferne die Label-Anzeige, da sie nicht mehr im Design ist */
.nav-label {
    display: none !important;
}


/* --- Stile für Straßen/PLZ Suche (innerhalb mainView) --- */

/* === Stile für Alphabet-Filter === */
.alphabet-filter-container {
    display: flex; /* Buttons nebeneinander */
    flex-direction: column; /* Toggle-Button und Wrapper untereinander */
    align-items: stretch; /* Elemente sollen die Breite des Containers nutzen */
    gap: 0; /* Kein direkter Abstand zwischen Toggle und Wrapper */
    margin-bottom: 15px; /* Abstand zur Liste */
    /* background-color: var(--card-bg); */ /* Hintergrund ist jetzt im Toggle und Wrapper */
    border-radius: var(--border-radius-std);
    /* border: 1px solid var(--card-border); */ /* Rand ist jetzt im Toggle und Wrapper */
    /* Wird von JS ein-/ausgeblendet */
}

#alphabetToggleAllButton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 15px; /* Angepasst für besseres Aussehen */
    font-size: 1em; /* Normale Schriftgröße */
    text-align: left;
    background-color: transparent; /* Transparent, da Container Farbe hat */
    border: none; /* Kein eigener Rand */
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0; /* Wichtig, da Wrapper direkt folgen kann */
}

#alphabetToggleAllButton:hover {
    background-color: color-mix(in srgb, var(--text-color) 5%, transparent); /* Leichter Hover-Effekt */
}

#alphabetToggleAllButton.active {
    /* Kann hier spezifischer gestylt werden, wenn "Alle" aktiv ist,
       aber die primäre Aktiv-Anzeige ist der Text und die Buchstabenbuttons */
    /* background-color: var(--primary-color); */
    /* color: var(--text-on-primary); */
    /* border-color: var(--primary-color); */
}
#alphabetToggleAllButton.active .expand-arrow {
    /* color: var(--text-on-primary); */
}


#alphabetToggleAllButton .expand-arrow {
    font-size: 24px; /* Passende Icongröße */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Sanftere Apple-ähnliche Transition */
    color: var(--text-color-muted);
}

/* Container für die eigentlichen Buchstaben-Buttons */
#alphabetLettersWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Verteilt Buttons gleichmäßig mit äußerem Abstand */
    --alphabet-wrapper-gap: 4px; /* Etwas kleinerer Abstand zwischen den Buchstaben-Buttons */
    gap: var(--alphabet-wrapper-gap);
    padding: 0; /* Wird bei .expanded gesetzt */
    background-color: transparent; /* Transparent, da Container Farbe hat */
    /* border: 1px solid var(--card-border); */ /* Kein eigener Rand */
    /* border-top: none; */ /* Vermeidet Doppelrand mit ToggleButton */
    /* border-radius: 0 0 var(--border-radius-std) var(--border-radius-std); */ /* Wird vom Container geerbt */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Zustand, wenn der Filter ausgeklappt ist */
.alphabet-filter-container.expanded #alphabetToggleAllButton {
    border-bottom: 1px solid var(--card-border); /* Trennlinie zum Wrapper */
}

.alphabet-filter-container.expanded #alphabetToggleAllButton .expand-arrow {
    transform: rotate(180deg);
}

.alphabet-filter-container.expanded #alphabetLettersWrapper {
    max-height: 250px; /* Ausreichende Höhe für ca. 4 Reihen */
    opacity: 1;
    padding: 10px; /* Innenabstand, wenn ausgeklappt */
    /* border-top: 1px solid var(--card-border); */ /* Optional für klare Trennung */
}


/* Stile für die Alphabet-Buttons INNERHALB des Wrappers (für Layout mit 7 Buttons) */
#alphabetLettersWrapper .alphabet-button {
    padding: 10px 0; /* Vertikales Padding, horizontales wird durch Breite gesteuert */
    font-size: 1.2em;   /* Behält die größere Schrift bei */
    min-height: 44px;   /* Mindesthöhe beibehalten */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-std, 6px);
    background-color: var(--bg-color);
    border: 1px solid var(--card-border);
    color: var(--primary-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box; /* WICHTIG für die Breitenberechnung */

    /* Berechnung für 7 Buttons pro Zeile: (100% Containerbreite - Summe der Gaps) / Anzahl Buttons */
    /* Bei 7 Buttons gibt es 6 Gaps zwischen ihnen. */
    width: calc((100% - (6 * var(--alphabet-wrapper-gap))) / 7);
    flex-grow: 0; /* Buttons sollen nicht wachsen, um die Breite beizubehalten */
    flex-shrink: 0; /* Buttons sollen nicht schrumpfen, um die Breite beizubehalten */
    min-width: 0; /* Entferne min-width, um die calc()-Breite zu erzwingen, oder setze es sehr niedrig */
    text-align: center; /* Stellt sicher, dass der Buchstabe zentriert ist */
}

/* Allgemeine .alphabet-button Klasse (wird jetzt primär vom Toggle-Button #alphabetToggleAllButton genutzt) */
/* Diese ursprüngliche .alphabet-button Definition wird weniger relevant für die Buchstaben-Buttons im Wrapper,
   da diese spezifischer über #alphabetLettersWrapper .alphabet-button gestylt werden.
   Sie kann aber als Fallback oder für andere Verwendungen von .alphabet-button dienen.
   Der Toggle-Button selbst wird hauptsächlich über seine ID #alphabetToggleAllButton gestylt.
*/
.alphabet-button {
    /* Diese Stile sind jetzt weniger kritisch für die Buchstaben-Buttons im Wrapper,
       da sie spezifischer überschrieben werden. Wichtig für den Toggle-Button, falls er .alphabet-button auch nutzt. */
    padding: 10px 12px;
    font-size: 1em;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-std, 6px);
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--primary-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Spezifische Stile für den Haupt-Toggle-Button (erbt ggf. von .alphabet-button und überschreibt) */
#alphabetToggleAllButton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    font-size: 1em; /* Schriftgröße für "Alle" Text */
    text-align: left;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0;
}


#alphabetToggleAllButton:hover {
    background-color: color-mix(in srgb, var(--text-color) 5%, transparent);
}

#alphabetToggleAllButton.active {
    /* Kann hier spezifischer gestylt werden, wenn "Alle" aktiv ist,
       aber die primäre Aktiv-Anzeige ist der Text und die Buchstabenbuttons */
    /* background-color: var(--primary-color); */
    /* color: var(--text-on-primary); */
    /* border-color: var(--primary-color); */
}
#alphabetToggleAllButton.active .expand-arrow {
    /* color: var(--text-on-primary); */
}


#alphabetToggleAllButton .expand-arrow {
    font-size: 24px;
}

/* Hover, Active, Focus Stile für die Buchstaben-Buttons im Wrapper */
#alphabetLettersWrapper .alphabet-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

#alphabetLettersWrapper .alphabet-button.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--secondary-color);
}

#alphabetLettersWrapper .alphabet-button:active {
     transform: scale(0.95);
}
/* === ENDE ALPHABET FILTER === */

/* Höhe der Liste anpassen */
.street-list-container {
    height: auto;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-large);
    background-color: var(--card-bg);
    margin-bottom: 0;
    flex-grow: 1;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

/* Stile für den Platzhalter */
.list-placeholder {
    display: flex;
    flex-direction: column; /* Begrüßung oben, Anleitung unten */
    align-items: center; 
    justify-content: flex-start; /* Inhalt startet oben */
    text-align: center;
    color: var(--text-color); 
    flex-grow: 1; 
    /* display: flex;  bereits vorhanden und korrekt */
    /* Kein direktes Padding hier, wird in den Kind-Elementen gesteuert */
    overflow: hidden; /* Verhindert, dass der Gradient überläuft, falls Ecken abgerundet sind */
    border-radius: var(--border-radius-large); /* Ecken für den gesamten Platzhalter abrunden */
    background-color: var(--card-bg); /* Fallback-Hintergrund, falls Gradient nicht unterstützt wird */
}

.placeholder-greeting {
    width: 100%;
    padding: 20px 20px 20px 20px; /* Mehr Padding oben */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: var(--text-on-primary); /* Heller Text auf Gradient */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Dezente Trennlinie */
}

.placeholder-greeting h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 8px;
}

.placeholder-greeting p {
    font-size: 1em;
    line-height: 1.5;
    max-width: 380px;
    opacity: 0.9;
}

.placeholder-icon-greeting {
    font-size: 48px; /* Größeres Icon */
    /* Farbe wird von .placeholder-greeting geerbt (weiß) */
    margin-bottom: 0; /* Kein Abstand nach unten, da h3 folgt */
}

.placeholder-instruction {
    padding: 20px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg); /* Hintergrund für den unteren Teil */
    width: 100%; /* Volle Breite */
}

.placeholder-icon-search { /* Früher .placeholder-icon */
    font-size: 40px; 
    margin-bottom: 5px;
    color: var(--primary-color); /* Icon-Farbe passend zum Theme */
}

.placeholder-instruction p { /* Früher .list-placeholder p */
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 350px;
    color: var(--text-color-muted, #6b7280); /* Gedämpfte Textfarbe */
}

/* Stellt sicher, dass normale Listenelemente nicht zentriert werden */
.street-list-container .street-item {
    text-align: left; /* Standardausrichtung für Listenelemente */
}
.street-list-container > p { /* Für "Keine Ergebnisse"-Text */
     text-align: center;
     padding: 20px;
     color: var(--text-color-muted);
}

.street-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--card-border); /* Dezenter Trenner */
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.95em;
    color: var(--text-color); /* Dunkler Text */
}
.street-item:last-child { border-bottom: none; }
.street-item:hover { background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); } /* Sehr heller Theme-Hover */

/* Stile für die Fortschrittsanzeige im Street Item */
.street-item {
    display: flex; /* Um Namen und Fortschritt nebeneinander zu platzieren */
    justify-content: space-between; /* Namen links, Fortschritt rechts */
    align-items: center; /* Vertikal zentrieren */
}

.street-item-name {
    flex-grow: 1; /* Nimmt den meisten Platz ein */
    /* margin-right: 10px; */ /* KORREKT ENTFERNT: Abstand zum Fortschrittsindikator */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.street-item-progress {
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen SVG und Prozentzahl */
    flex-shrink: 0; /* Verhindert, dass es schrumpft */
}

.street-item-progress .progress-ring {
    width: 20px; /* Kleinere Größe für die Liste */
    height: 20px;
    /* viewBox wird im HTML gesetzt: viewBox="0 0 20 20" */
}

.street-item-progress .progress-ring__background,
.street-item-progress .progress-ring__circle {
    r: 8; /* Radius anpassen für die kleinere Größe */
    cx: 10; /* Mittelpunkt X für 20x20 SVG */
    cy: 10; /* Mittelpunkt Y für 20x20 SVG */
    stroke-width: 2; /* Linienstärke für den kleineren Kreis anpassen */
}

.street-item-progress .progress-percentage {
    font-size: 0.8em;
    min-width: 30px; /* Platz für "100%" oder "X ✓" */
    text-align: right;
}


/* Container für die Hausnummern-Details */
.street-detail-container {
    margin-top: 0;
    padding: 0; /* Kein extra Padding außen */
    background-color: transparent; /* Kein extra Hintergrund */
    border-radius: 0;
    border: none;
}

/* --- Stile für Hausnummern (JS-generiert) --- */
#houseEntryForm {
    margin-bottom: 15px; /* Weniger Abstand nach unten */
    padding: 15px; /* Weniger Innenabstand */
    background-color: var(--card-bg);
    border-radius: var(--border-radius-large);
    border: 1px solid var(--card-border);
}
#houseEntryForm h5 {
    text-align: center;
    margin-bottom: 15px; /* Weniger Abstand */
    font-size: 1.0em; /* Kleinere Überschrift */
    font-weight: 600; /* Etwas fetter */
    color: var(--text-color);
}

/* Inputs/Select/Textarea generell etwas kompakter */
#houseEntryForm input[type="text"],
#houseEntryForm select,
#houseEntryForm textarea {
    padding: 10px 12px; /* Etwas weniger vertikales Padding */
    margin-bottom: 10px; /* Weniger Abstand nach unten */
    font-size: 0.9rem; /* Kleinere Schrift */
    /* Andere Stile bleiben */
    width: 100%;
    border-radius: var(--border-radius-std);
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
}

/* Spezifische Breiten für Hausnummer und Status beibehalten, aber mit weniger Abstand */
#houseEntryForm input#houseNumberInput {
     width: calc(100% - 260px); /* Breite etwas reduziert */
     display: inline-block;
     vertical-align: top;
     margin-right: 8px; /* Weniger Abstand */
     margin-bottom: 10px; /* Sicherstellen, dass Abstand da ist, wenn es umbricht */
}

#houseEntryForm input#nameInput {
    width: calc(100% - 170px); /* Breite etwas reduziert */
    display: inline-block;
    vertical-align: top;
    margin-right: 8px; /* Weniger Abstand */
    margin-bottom: 10px; /* Sicherstellen, dass Abstand da ist, wenn es umbricht */
}

#houseEntryForm select#statusSelect {
    width: calc(100% - 88px); /* Breite angepasst an Hausnummer + Abstand */
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
}

#houseEntryForm textarea {
    min-height: 60px; /* Minimale Höhe reduziert */
    margin-bottom: 10px;
}

/* Container für die Buttons */
#houseEntryForm .form-button-group {
    display: flex; /* Buttons nebeneinander */
    justify-content: space-between; /* Verteilt Buttons */
    gap: 10px;
    margin-top: 10px; /* Abstand nach oben */
}

/* Buttons im Formular kompakter */
#houseEntryForm button {
    margin-top: 0; /* Kein eigener Abstand nach oben mehr */
    padding: 8px 15px; /* Weniger vertikales Padding */
    font-size: 0.9rem; /* Kleinere Schrift */
    flex-grow: 1; /* Buttons sollen sich den Platz teilen */
    /* Andere Button-Stile werden übernommen */
}

/* Die spezifischen Button-Farben bleiben wie vorher definiert */
/* Speicher-Button */
#houseEntryForm button:nth-of-type(1) {
     background-color: var(--primary-color);
     color: var(--text-on-primary);
     /* margin-right: 0; */ /* Nicht mehr nötig durch gap */
}
#houseEntryForm button:nth-of-type(1):hover {
    background-color: var(--secondary-color);
}
/* Abbrechen/Neu Button */
#houseEntryForm button:nth-of-type(2) {
    background-color: #e2e8f0;
    color: var(--text-color);
    border: 1px solid var(--card-border);
}
#houseEntryForm button:nth-of-type(2):hover {
    background-color: #cbd5e1;
}

/* Liste der Hausnummern-Einträge */
#houseEntriesList {
     margin-top: 20px;
     border-top: 1px solid var(--card-border);
     padding-top: 10px;
     background-color: var(--card-bg); /* Hintergrund für die Liste */
     border-radius: var(--border-radius-large);
     padding: 10px; /* Innenabstand */
     border: 1px solid var(--card-border);
}
#houseEntriesList > p { /* "Noch keine Einträge..." Text */
    text-align: center;
    color: #6b7280;
    padding: 15px;
}

.house-entry-item {
    padding: 15px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    flex-direction: row; /* Horizontal ausrichten */
    align-items: flex-start; /* Oben bündig */
    gap: 15px;
    font-size: 0.9em;
}

.house-entry-item:last-child { border-bottom: none; }

.house-entry-item strong {
    font-size: 1.1em;
    color: var(--text-color);
}

.house-entry-item small {
    display: block;
    color: #475569; /* Dunkleres Grau für Details */
    margin-top: 3px;
}
.house-entry-item small[title] { cursor: help; }

/* Edit/Delete Buttons in der Liste */
.house-entry-item .buttonnumpad {
    font-size: 0.9em; /* Etwas größer/lesbarer */
    padding: 5px 8px; /* Mehr Padding */
    width: auto;
    height: auto;
    min-width: 35px;
    border-radius: var(--border-radius-std);
    border: 1px solid transparent; /* Platzhalter für Rand */
    background-color: transparent; /* Transparent */
    color: #6b7280; /* Grau */
}
.house-entry-item .buttonnumpad:hover {
    background-color: #eef2ff; /* Heller blauer Hintergrund */
    color: var(--primary-color); /* Blau */
    border-color: #dbeafe; /* Sehr heller blauer Rand */
}
/* Delete Button spezifisch */
.house-entry-item button[onclick*="deleteHouseEntry"] {
    color: var(--danger-color); /* Rotes Icon */
}
.house-entry-item button[onclick*="deleteHouseEntry"]:hover {
    background-color: #fee2e2; /* Heller roter Hintergrund */
    color: #b91c1c; /* Dunkleres Rot */
    border-color: #fecaca; /* Heller roter Rand */
}

/* Spezifische Layout-Regeln für die Hausnummern-Karten */
.house-entry-item > .card-header {
    flex-shrink: 0; /* Verhindert, dass die linke Spalte schrumpft */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    align-items: center; /* Zentriert Hausnummer und Buttons */
}

.house-entry-item > .card-content {
    flex-grow: 1; /* Rechte Spalte füllt den verfügbaren Platz */
}

.card-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color-soft);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}



/* Lade- und Fehleranzeige */
#loadingIndicator {
    text-align: center;
    padding: 15px;
    color: var(--text-color-muted);
}
#errorDisplay {
    background-color: #fee2e2; /* Heller roter Hintergrund */
    color: #b91c1c; /* Dunkelroter Text */
    padding: 12px 15px;
    border-radius: var(--border-radius-std);
    margin-top: 15px;
    border: 1px solid #fecaca; /* Heller roter Rand */
    text-align: center;
    font-size: 0.9em;
}

/* --- INSTALL POPUP --- */
.install-popup {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--card-bg); /* Helle Karte */
    color: var(--text-color); /* Dunkler Text */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
    padding: 25px 20px; /* Mehr Padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    gap: 15px;
    border-top: 1px solid var(--card-border);
}
.install-popup p {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}
/* Icons im Install-Popup Text */
.install-popup p .material-icons,
.install-popup p .material-symbols-outlined {
    vertical-align: -3px; /* Besser ausrichten */
    font-size: 1.3rem;
    display: inline-block;
}

#installButton {
    /* Nimmt primären Button Stil an */
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    padding: 10px 25px; /* Etwas weniger vertikal, mehr horizontal */
}
#installButton:hover {
    background-color: var(--secondary-color);
}

/* Stellen Sie sicher, dass mainView den vollen Platz einnimmt UND ein Flex Container ist */
#mainView.active-view {
    display: flex;
    flex-direction: column;
}

/* Styling für Lade- und Fehleranzeigen IN den Views */
.loading-indicator-view, .error-display-view {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color-muted);
}
.error-display-view {
    color: var(--danger-color);
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: var(--border-radius-std);
    margin: 20px;
    padding: 15px;
}


/* --- STATISTIK VIEW --- */
.stats-grid {
    display: grid;
    /* Direkt zwei Spalten definieren */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    margin-top: 15px;
}

.stat-item {
    background-color: var(--input-bg);
    padding: 15px;
    border-radius: var(--border-radius-std);
    text-align: center;
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Spezifisches Styling für das erste Item ("Klingeln gesamt") */
.stats-grid .stat-item:nth-child(1) {
    grid-column: 1 / -1; /* Nimmt die volle Breite des Grids (beide Spalten) ein */
}

.stat-value {
    display: block;
    font-size: 1.8em;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 0.85em;
    color: var(--text-color-light);
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Maximale Breite für den Chart */
    margin: 20px auto;
    height: auto; /* Höhe passt sich an */
}
/* Canvas selbst sollte keine feste Höhe bekommen, Chart.js regelt das */
#statusChart {
    display: block;
    width: 100% !important; /* Wichtig, um Containerbreite zu nutzen */
    height: auto !important; /* Höhe automatisch anpassen */
}

/* --- LEADERBOARD VIEW --- */
.table-container {
    width: 100%;
    overflow-x: auto; /* Scrollen bei schmalen Bildschirmen */
    margin-top: 15px;
}

#leaderboardTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

#leaderboardTable th, #leaderboardTable td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

#leaderboardTable th {
    background-color: var(--card-bg); /* Leichter Hintergrund für Header */
    font-weight: 600;
    color: var(--text-color);
}

#leaderboardTable tbody tr:hover {
    background-color: #eef2ff; /* Heller Hover */
}

#leaderboardTable td:first-child, #leaderboardTable th:first-child {
    text-align: center; /* Rang zentrieren */
    width: 50px; /* Feste Breite für Rang */
}
#leaderboardTable td:last-child, #leaderboardTable th:last-child {
    text-align: right; /* Anzahl rechtsbündig */
    width: 100px; /* Feste Breite für Anzahl */
}

/* Highlight für aktuellen User */
#leaderboardTable tbody tr.current-user-row {
    font-weight: bold;
}



/* --- EINSTELLUNGEN VIEW --- */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Kleiner Abstand zwischen Label/Input */
}

.settings-form label {
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 2px;
}

/* Wrapper für Input und Button */
.input-with-button {
    display: flex;
    align-items: center; /* Elemente vertikal zentrieren */
    gap: 10px; /* Abstand zwischen Input und Button */
    margin-bottom: 10px; /* Abstand zum nächsten Element (z.B. settingsStatus) */
}

.settings-form input#displayNameInput {
    /* Nimmt generische Input-Stile an */
    flex-grow: 1; /* Input nimmt verfügbaren Platz ein */
    margin-bottom: 0; /* Entfernt den vorherigen Abstand, da jetzt im Flex-Container */
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Kleiner Abstand zwischen Label/Input */
}

.settings-section label {
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 2px;
}

.settings-section input#colorSchemeSelect {
    /* Nimmt generische Input-Stile an */
    margin-bottom: 15px; /* Abstand zum Button */
}

#saveSettingsButton {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    /* align-self: flex-start; ENTFERNT, nicht mehr nötig im Flex-Container */
    /* padding: 10px 20px;  Padding wird angepasst für Icon-Button-Look */
    padding: 10px; /* Gleichmäßiges Padding für Icon-Button */
    min-width: 40px; /* Mindestbreite */
    height: 40px;    /* Feste Höhe passend zum Input */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
}
#saveSettingsButton .material-icons {
    font-size: 20px; /* Passende Icon-Größe */
}
#saveSettingsButton:hover {
    background-color: var(--secondary-color);
}

#settingsStatus {
    min-height: 1.2em; /* Platzhalter für Statusmeldung */
}
#settingsStatus.success {
    color: var(--success-color);
}
#settingsStatus.error {
    color: var(--danger-color);
}


.settings-logout-button {
    /* Style wie Abbrechen-Button */
    background-color: var(--danger-color);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    width: 100%; /* Volle Breite */
    padding: 12px 20px;
}
.settings-logout-button:hover {
    background-color: var(--danger-color-hover);
}
.settings-logout-button span {
    vertical-align: -3px; /* Icon besser ausrichten */
    margin-right: 8px;
}

.settings-feedback-button {
    /* Style wie Abbrechen-Button */
    background-color: var(--primary-color);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    width: 100%; /* Volle Breite */
    padding: 12px 20px;
    margin-top: 20px;
}
.settings-feedback-button:hover {
    background-color: var(--primary-color-hover);
}
.settings-feedback-button span {
    vertical-align: -3px; /* Icon besser ausrichten */
    margin-right: 8px;
}

.settings-reload-button {
    /* Style wie Abbrechen-Button */
    background-color: var(--primary-color);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    width: 49.1%; /* Volle Breite */
    padding: 12px 20px;
    margin-top: 20px;
}
.settings-reload-button:hover {
    background-color: var(--primary-color-hover);
}
.settings-reload-button span {
    vertical-align: -3px; /* Icon besser ausrichten */
    margin-right: 8px;
}

.settings-clear-cache-button {
    background-color: var(--text-color-muted);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    width: 49.4%; /* Volle Breite */
    padding: 12px 20px;
    margin-top: 20px;
}
.settings-clear-cache-button:hover {
    background-color: var(--text-color-muted-hover);
}
.settings-clear-cache-button span {
    vertical-align: -3px; /* Icon besser ausrichten */
    margin-right: 8px;
}

/* Stile für Versionshistorie */
#versionHistoryContainer {
    margin-top: 20px; /* Abstand zur vorherigen Trennlinie */
    padding-top: 15px; /* Innenabstand oben, falls noch eine subtile Linie gewünscht wäre */
    /* border-top: 1px solid var(--card-border); */ /* Optionale Trennlinie, falls gewünscht */
}

#versionHistoryContainer h3 {
    font-size: 1.1em; /* Etwas kleinere Überschrift als "Einstellungen" */
    color: var(--text-color);
    margin-bottom: 12px;
    font-weight: 600;
}

#versionHistoryContainer p,
#versionHistoryContainer ul {
    font-size: 0.9em;
    color: var(--text-color-muted, #475569); /* Gedämpftere Farbe für Details */
    line-height: 1.6;
    margin-bottom: 10px;
}

#versionHistoryContainer p strong {
    color: var(--text-color); /* Wichtige Teile (Version) hervorheben */
    font-weight: 500;
}

#versionHistoryContainer ul {
    list-style-position: outside;
    padding-left: 20px; /* Einrückung für die Liste */
}

#versionHistoryContainer ul li {
    margin-bottom: 5px;
}

#versionHistoryContainer p[style*="font-size: 0.8em"] { /* Spezifisch für App-Version Info */
    margin-top: 20px; /* Mehr Abstand nach oben */
    font-style: italic;
}
/* ENDE: Stile für Versionshistorie */

/* --- ZEITERFASSUNG (CALENDAR VIEW) --- */
#calendarView .content-card {
    margin-bottom: 20px;
}

.time-tracking-status-display {
    background-color: var(--input-bg);
    padding: 15px;
    border-radius: var(--border-radius-std);
    margin-bottom: 20px;
    border: 1px solid var(--card-border);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
}
.status-item:last-child {
    border-bottom: none;
}

.status-label {
    font-size: 0.9em;
    color: var(--text-color-muted, #475569);
}

.status-value {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-color);
}
#currentStatusText.active {
    color: var(--success-color);
}
#currentStatusText.inactive {
    color: var(--danger-color);
}


.time-tracking-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px; /* Angepasst von 0, falls Status Display darüber ist */
}

.time-tracking-buttons button {
    flex-grow: 1;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: var(--border-radius-std);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.time-tracking-buttons button .material-icons {
    font-size: 22px;
}

.button-start-time {
    background-color: var(--success-color);
    color: var(--text-on-primary);
}
.button-start-time:hover {
    background-color: #15803d; /* Dunkleres Grün */
}

.button-stop-time {
    background-color: var(--danger-color);
    color: var(--text-on-primary);
}
.button-stop-time:hover {
    background-color: #b91c1c; /* Dunkleres Rot */
}


#timeTrackingHistory .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
#timeTrackingHistory .history-header h3 {
    margin: 0;
    font-size: 1.2em;
}
#timeTrackingHistory #historyDateInput {
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-std);
    font-size: 0.9em;
    background-color: var(--input-bg);
    color: var(--text-color);
    /* Breite anpassen und Ausrichtung */
    width: auto; /* Automatische Breite basierend auf Inhalt */
    min-width: 130px; /* Mindestbreite, um das Datum gut anzuzeigen */
    max-width: 150px; /* Maximale Breite, um nicht zu groß zu werden */
    text-align: center; /* Datum zentrieren */
    /* Flexibilität, falls mehr Elemente in den Header kommen */
    flex-shrink: 0; 
}

.daily-summary-display {
    background-color: transparent; /* ENTFERNT: var(--input-bg); */
    padding: 10px 0; /* Angepasst: Weniger vertikales Padding, kein horizontales */
    border-radius: 0; /* ENTFERNT: var(--border-radius-std); */
    margin-bottom: 20px; /* Etwas mehr Abstand nach unten zur Liste */
    border: none; /* ENTFERNT: 1px solid var(--card-border); */
    /* border-top: 1px solid var(--card-border);  Optional: Eine feine Trennlinie nach oben, falls gewünscht */
}
.daily-summary-display h4 {
    margin-top: 0;
    margin-bottom: 8px; /* Reduziert */
    font-size: 0.95em; /* Etwas kleiner */
    font-weight: 500; /* Weniger fett */
    text-align: left; /* Linksbündig */
    color: var(--text-color-muted); /* Gedämpfte Farbe */
}
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertikal zentrieren */
    font-size: 1em; /* Klare Schriftgröße für die Werte */
    padding: 4px 0; /* Angepasst */
}
.summary-label {
    color: var(--text-color-muted, #475569);
    font-size: 0.9em; /* Label etwas kleiner als der Wert */
}
.summary-value {
    font-weight: 600; /* Wert bleibt fett für gute Lesbarkeit */
    color: var(--text-color); /* Haupttextfarbe für den Wert */
}

.time-entries-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.time-entry-li {
    background-color: var(--background-color-soft);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color-soft);
    display: flex;
    flex-direction: column; /* Geändert für bessere Struktur mit Locations */
    gap: 5px; /* Kleiner Abstand zwischen Hauptinfo und Locations */
}

.time-entry-li:last-child {
    margin-bottom: 0;
}

.time-entry-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95em;
}

.time-entry-details strong {
    color: var(--primary-color);
}

.time-entry-duration {
    font-size: 0.9em;
    color: var(--text-color-muted);
}

/* Styling für Locations im Verlauf */
.time-entry-location {
    font-size: 0.8em;
    color: var(--text-color-light);
    padding-top: 3px;
}

.time-entry-location .location-link {
    color: var(--primary-color);
    text-decoration: none;
}
.time-entry-location .location-link:hover {
    text-decoration: underline;
}


.list-placeholder-message { /* Wiederverwendung für noHistoryEntriesMessage */
    color: var(--text-color-muted, #6b7280);
}

/* --- SKELETON LOADING STYLES --- */
.skeleton {
    background-color: var(--skeleton-base-color); /* Helle Graufarbe für Skeleton-Elemente */
    border-radius: var(--border-radius-std, 8px);
    position: relative;
    overflow: hidden; /* Wichtig für die Animation */
}

.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Startet außerhalb des sichtbaren Bereichs */
    height: 100%;
    width: 150%;
    background: linear-gradient(to right, transparent 0%, var(--skeleton-shine-color) 50%, transparent 100%);
    animation: skeleton-shine 1.5s infinite linear;
}

@keyframes skeleton-shine {
    0% {
        left: -150%;
    }
    100% {
        left: 100%;
    }
}

.skeleton-text {
    height: 1em; /* Höhe basierend auf Schriftgröße */
    margin-bottom: 0.5em;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }

.skeleton-title {
    height: 1.8em;
    width: 50%;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto; /* Zentrieren, wenn gewünscht */
}

.skeleton-card {
    padding: 20px;
    margin-bottom: 20px;
    background-color: var(--card-bg); /* Hintergrund wie echte Karte */
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-large);
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-button {
    height: 40px; /* Typische Button-Höhe */
    width: 100px;
    border-radius: var(--border-radius-std);
}

/* Spezifische Skeleton-Strukturen pro View */

/* Stats View Skeleton */
.stats-view-skeleton .stats-grid-skeleton {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei Spalten Layout */
    gap: 15px;
    margin-top: 15px;
}
.stats-view-skeleton .skeleton-stat-item {
    height: 80px; /* Höhe der Stat-Kacheln */
    border-radius: var(--border-radius-std); /* Sicherstellen, dass Skeleton-Items auch den Radius haben */
}

/* Spezifisches Styling für das erste Skeleton-Item, das die volle Breite einnimmt */
.stats-view-skeleton .stats-grid-skeleton .full-width-skeleton-item {
    grid-column: 1 / -1; /* Nimmt die volle Breite des Grids (beide Spalten) ein */
}

.stats-view-skeleton .skeleton-chart-container {
    height: 250px; /* Höhe des Chart-Bereichs */
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}

/* Leaderboard View Skeleton */
.leaderboard-view-skeleton .skeleton-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border);
    height: 45px; /* Höhe einer Tabellenzeile */
}

/* Chart loader overlay for statusChart */
.chart-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, var(--card-bg) 60%, rgba(0,0,0,0.0));
    z-index: 5;
    transition: opacity 0.25s ease;
}
.chart-loader-overlay.hidden { opacity: 0; pointer-events: none; }
.chart-is-loading { opacity: 0.15; transition: opacity 0.35s ease; }
.chart-loader-overlay.hidden + canvas.chart-is-loading { opacity: 1; }
/* SVG Ring Loader (animated circular skeleton) */
.chart-loader-ring { width: 90px; height: 90px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
.chart-loader-ring circle { fill: none; stroke-linecap: round; }
.chart-loader-ring .ring-bg { stroke: var(--border-color-soft, #d1d5db); stroke-width: 10; opacity: 0.35; }
.chart-loader-ring .ring-fg {
    stroke: var(--primary-color, #2563eb);
    stroke-width: 10;
    stroke-dasharray: 314; /* ~ 2 * PI * 50 */
    stroke-dashoffset: 235; /* initial visible arc */
    animation: ring-spin 1.4s ease-in-out infinite, ring-pulse 2.8s ease-in-out infinite;
    transform-origin: 50% 50%;
}
@keyframes ring-spin { 0% { stroke-dashoffset: 314; transform: rotate(0deg);} 50% { stroke-dashoffset: 157; transform: rotate(180deg);} 100% { stroke-dashoffset: 314; transform: rotate(360deg);} }
@keyframes ring-pulse { 0%,100% { stroke-width: 10; opacity:1;} 50% { stroke-width: 6; opacity:0.7;} }
.leaderboard-view-skeleton .skeleton-rank { width: 30px; height: 20px; }
.leaderboard-view-skeleton .skeleton-name { width: 60%; height: 20px; }
.leaderboard-view-skeleton .skeleton-score { width: 50px; height: 20px; }

/* Settings View Skeleton */
.settings-view-skeleton .skeleton-label {
    height: 0.9em;
    width: 40%;
    margin-bottom: 8px;
}
.settings-view-skeleton .skeleton-input {
    height: 48px; /* Höhe eines Input-Feldes */
    width: 100%;
    margin-bottom: 15px;
}
.settings-view-skeleton .skeleton-settings-button {
    height: 40px;
    width: 150px; /* Breite des "Namen speichern" Buttons */
    margin-bottom: 20px;
}
.settings-view-skeleton .skeleton-logout-button {
    height: 48px;
    width: 100%;
}

/* Calendar View Skeleton */
.calendar-view-skeleton .skeleton-status-item {
    display: flex;
    justify-content: space-between;
    height: 20px;
    margin-bottom: 10px;
}
.calendar-view-skeleton .skeleton-status-label { width: 30%; }
.calendar-view-skeleton .skeleton-status-value { width: 50%; }

.calendar-view-skeleton .skeleton-time-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.calendar-view-skeleton .skeleton-time-button {
    flex-grow: 1;
    height: 48px;
}

.calendar-view-skeleton .skeleton-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.calendar-view-skeleton .skeleton-history-title { width: 40%; height: 1.5em; }
.calendar-view-skeleton .skeleton-date-input { width: 120px; height: 40px; }

.calendar-view-skeleton .skeleton-summary-item {
    display: flex;
    justify-content: space-between;
    height: 18px;
    margin-bottom: 8px;
}
.calendar-view-skeleton .skeleton-summary-label { width: 40%; }
.calendar-view-skeleton .skeleton-summary-value { width: 30%; }

.calendar-view-skeleton .skeleton-time-entry {
    height: 50px; /* Höhe eines Listeneintrags */
    margin-bottom: 10px;
}

/* Hilfsklasse zum Ausblenden des Skeletons, wenn Inhalte geladen sind */
.skeleton-loader.hidden {
    display: none !important;
}

/* Street Detail View Skeleton */
.street-detail-skeleton .skeleton-card { /* Wiederverwendung der .skeleton-card für Konsistenz */
    /* padding und margin werden inline im HTML oder spezifischer hier angepasst */
}

#skeletonHouseEntryForm .skeleton-input {
    height: 40px; /* Standardhöhe für Inputs/Selects im Formular */
    margin-bottom: 10px; /* Wie im echten Formular */
}
#skeletonHouseEntryForm .skeleton-input[style*="min-height"] { /* Für Textarea */
    margin-bottom: 10px;
}

.street-detail-skeleton .skeleton-house-entry-item {
    display: flex;
    align-items: flex-start; /* Passt zum echten Layout */
    gap: 15px;
    padding: 15px 0; /* Vertikales Padding, kein horizontales, da die Karte selbst Padding hat */
    border-bottom: 1px solid var(--card-border); /* Trennlinie wie bei echten Items */
}
.street-detail-skeleton .skeleton-house-entry-item:last-child {
    border-bottom: none;
}

.street-detail-skeleton .skeleton-house-number-badge {
    width: 40px; /* Größe des Hausnummern-Badges */
    height: 40px;
    border-radius: 6px; /* Abrundung des Badges */
    flex-shrink: 0;
}

.street-detail-skeleton .skeleton-house-entry-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Abstand zwischen den Textzeilen */
}
.street-detail-skeleton .skeleton-house-entry-details .skeleton-text {
    margin-bottom: 0; /* Kein extra margin-bottom für Skeleton-Text hier */
}

/* Anpassung für "Zuletzt geöffnet"-Button */
.last-opened-street-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 15px; /* Konsistentes Padding */
  margin-bottom: 10px; /* Abstand zur Straßenliste oder Placeholder */
  background-color: var(--card-bg); /* Hintergrund wie andere UI-Karten/Elemente */
  border: 1px solid var(--card-border); /* Passender Rand */
  border-radius: var(--border-radius-std); /* Standard Eckenradius */
  text-align: left;
  cursor: pointer;
  font-size: 0.95em; /* Ähnlich wie street-item */
  color: var(--text-color);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Dezenter Schatten für Abhebung */
}

.last-opened-street-button:hover {
  background-color: #eef2ff; /* Heller blauer Hover, ähnlich street-item */
  border-color: var(--primary-color-light, #a5b4fc); /* Optional: Rand im Hover leicht anpassen */
}

.last-opened-street-button .last-opened-prefix {
  font-weight: normal;
  color: var(--text-color-muted); /* Gedämpfte Farbe für den Präfix */
  font-size: 0.9em; /* Etwas kleiner als der Name */
  margin-right: 6px;
}

.last-opened-street-button .last-opened-name {
  font-weight: 500; /* Straßennamen etwas hervorheben */
}



.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styling für den neuen .button-secondary */
.button-secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text-color);
    border: 1px solid var(--button-secondary-bg); /* Oder eine spezifische Border-Variable */
}

.button-secondary:hover {
    background-color: var(--button-secondary-hover-bg);
    border-color: var(--button-secondary-hover-bg);
}



/* Styling für .button-danger (Logout Button) */
.button-danger {
    background-color: var(--danger-color) !important; /* Wichtig, falls Inline-Styles überschrieben werden müssen */
    color: var(--danger-text-color) !important;
    border: 1px solid var(--danger-color) !important;
    /* Behalte andere Stile wie padding, border-radius etc. bei oder passe sie hier an */
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
}

.button-danger:hover {
    background-color: var(--danger-color-hover) !important;
    border-color: var(--danger-color-hover) !important;
}

/* Spezifisch für den Logout-Button in den Einstellungen, falls nötig */
#settingsView .button-danger {
    width: 100%;
    margin-top: 20px;
}

/* --- Notification Toasts --- */
.notification-container {
    position: fixed;
    top: 20px; /* Abstand vom oberen Rand */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* Über allem anderen */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Abstand zwischen mehreren Notifications */
    width: 90%; /* Relative Breite */
    max-width: 450px; /* Maximale Breite der Benachrichtigung */
    pointer-events: none; /* Klicks sollen durch den Container gehen */
}

.notification-toast {
    background-color: var(--danger-color); /* Nutzt deine bestehende danger-color Variable */
    color: var(--text-on-primary); /* Heller Text für guten Kontrast auf rotem Grund */
    padding: 12px 18px;
    border-radius: var(--border-radius-std, 8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 0.9em;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    opacity: 0; /* Start unsichtbar für Animation */
    /* transform: translateY(-20px);  Wird durch Keyframes gehandhabt */
    animation: fadeInOutToast 5s ease-in-out forwards;
    pointer-events: auto; /* Klicks auf die Benachrichtigung selbst zulassen */
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
}

.notification-toast .material-icons {
    font-size: 22px; /* Passende Icon-Größe */
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
}

.notification-toast span:not(.material-icons) {
    white-space: pre-wrap; /* Erlaubt Zeilenumbrüche in der Nachricht */
    word-break: break-word; /* Bricht lange Wörter um, um Überlauf zu verhindern */
    flex-grow: 1;
}


@keyframes fadeInOutToast {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    10% { /* Schnelles Einblenden und leichte Skalierung */
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    90% { /* Bleibt sichtbar */
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% { /* Ausblenden */
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}

/* --- Stile für das Straßen-Statistik Modal --- */
.modal-overlay {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
    z-index: 2000; /* Über anderen Elementen */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 450px; /* Maximale Breite des Modals */
    position: relative; /* Für den Schließen-Button */
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem; /* Größerer Schließen-Button */
    color: var(--text-color-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.modal-close-button:hover {
    color: var(--text-color);
}

.modal-stats-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.95em;
}
.modal-stats-item:last-child {
    border-bottom: none;
}
.modal-stats-item strong {
    color: var(--text-color);
}
.modal-stats-item span {
    color: var(--text-color-light);
    font-weight: 500;
}

/* ... existing code ... */
/* ENDE: Zeiterfassung (Calendar View) */


/* Horizontale Fortschrittsleiste im Statistik-Modal */
.horizontal-progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px; /* Abstand zwischen Leiste und Prozentzahl */
}

.horizontal-progress-bar-background {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    height: 12px; /* Höhe der Leiste */
    background-color: var(--border-color-soft, #e9ecef); /* Hintergrund der Leiste */
    border-radius: 6px; /* Abgerundete Ecken */
    overflow: hidden; /* Stellt sicher, dass der Füllbalken innerhalb bleibt */
    position: relative;
}

.horizontal-progress-bar-fill {
    height: 100%;
    width: 0%; /* Startet bei 0% */
    background-color: var(--text-color-muted, #6c757d); /* Standardfarbe, wird per JS angepasst */
    border-radius: 6px;
    transition: width 0.5s ease-out, background-color 0.5s ease-out; /* Sanfter Übergang */
}

.horizontal-progress-percentage {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text-color-muted, #6c757d); /* Standardfarbe, wird per JS angepasst */
    min-width: 40px; /* Stellt sicher, dass genug Platz für z.B. "100%" ist */
    text-align: right;
}

/* In styles.css hinzufügen */
.large-admin-button {
    padding: 12px 25px;
    font-size: 1.1em;
    width: 100%; /* Volle Breite */
    max-width: none; /* Keine maximale Breite mehr */
    margin-top: 0; /* Kein oberer Rand, da Container ihn positioniert */
    display: inline-flex; /* Für Icon und Text */
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box; /* Wichtig, damit Padding in 100% Breite passt */
}

.large-admin-button .material-icons {
    font-size: 1.3em; /* Icon etwas größer */
}

/* Optional: Styling für den Container, falls er direkt in statsView ist und nicht in statsContent */
#adminButtonContainerStats {
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* Kein Innenabstand, da Button 100% Breite hat */
    margin-bottom: 15px; /* Abstand zum nächsten Element (Skeleton oder Inhalt) */
    /* text-align: center; -- Nicht mehr benötigt, wenn Button 100% Breite hat */
}

.view-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color-soft);
    margin-bottom: 15px;
    background-color: var(--card-bg); /* Leichter Hintergrund für den Header-Bereich */
}

.view-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-color-headings);
}

.back-buttonnumpad { /* Wiederverwendung und Anpassung */
    margin-right: 15px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.back-buttonnumpad:hover {
    background-color: var(--button-secondary-hover-bg);
}


/* Arbeitszeitauswertung View spezifisch */
#workTimeEvaluationView .view-content {
    padding: 15px;
}

.evaluation-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px; /* Begrenzte Höhe mit Scrollbalken, falls viele User */
    overflow-y: auto;
    border: 1px solid var(--border-color-soft);
    border-radius: 8px;
}

.evaluation-user-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color-soft);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.95em;
}

.evaluation-user-item:last-child {
    border-bottom: none;
}

.evaluation-user-item:hover {
    background-color: var(--hover-bg-light);
}

#userDetailEvalContainer h4 {
    color: var(--text-color-headings);
    border-bottom: 1px solid var(--primary-color-light);
    padding-bottom: 8px;
}

.monthly-work-table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse; /* Für saubere Linien */
}

.monthly-work-table th,
.monthly-work-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color-soft);
}

.monthly-work-table th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 600;
    font-size: 0.9em;
}

.monthly-work-table tbody tr:hover {
    background-color: var(--hover-bg-light);
}

/* Skeleton für Mitarbeiterliste (Beispiel) */
.skeleton-list-item {
    height: 48px; /* Höhe eines Listenelements */
    background-color: var(--skeleton-bg);
    border-radius: 4px;
}

/* Skeleton für Monatstabelle (Beispiel) */
.skeleton-table-row {
    height: 45px; /* Höhe einer Tabellenzeile */
    background-color: var(--skeleton-bg);
    margin-bottom: 6px;
    border-radius: 4px;
}
.loading-placeholder .skeleton-table-row:last-child {
    margin-bottom: 0;
}

.error-message {
    color: var(--danger-color);
    padding: 10px;
    background-color: var(--danger-bg-light);
    border: 1px solid var(--danger-color);
    border-radius: 5px;
    text-align: center;
}

.monthly-work-table th:last-child, /* Für die "Details" Spalte */
.monthly-work-table td:last-child {
    text-align: center;
    width: 80px; /* Breite für den Toggle-Button */
}

.toggle-details-button .material-icons {
    transition: transform 0.2s ease-in-out;
}

.daily-detail-row.hidden-row {
    display: none;
}

.daily-detail-container {
    padding: 15px 20px;
    background-color: var(--bg-color); /* Etwas hellerer Hintergrund für die Details */
    border-top: 1px dashed var(--card-border); /* Trennlinie */
}

.no-daily-entries {
    padding: 10px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
}

.day-entry-group {
    margin-bottom: 15px;
    padding-bottom: 10px;
    /* border-bottom: 1px solid var(--card-border); /* Leichte Trennung zwischen Tagen */
}
.day-entry-group:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.day-entry-header {
    font-size: 1em;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--primary-color-light);
}

.daily-entries-list {
    list-style: none;
    padding-left: 0; /* Kein Standard-Einzug für ul */
}

.time-entry-li-detailed {
    padding: 10px;
    margin-bottom: 8px;
    background-color: var(--input-bg); /* Hintergrund wie normale Eingabefelder */
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-std);
    font-size: 0.9em;
}

.time-entry-li-detailed .time-entry-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.time-entry-times strong {
    font-weight: 500;
}
.time-entry-duration-detailed {
    font-size: 0.9em;
    color: var(--text-color-muted);
}

.time-entry-locations {
    display: flex;
    gap: 10px; /* Abstand zwischen den Buttons/Texten */
    flex-wrap: wrap; /* Umbruch bei Bedarf */
    margin-top: 5px;
}

.location-button {
    padding: 5px 10px !important; /* Wichtig, um andere Button-Stile zu überschreiben */
    font-size: 0.85em !important;
    background-color: var(--button-secondary-bg) !important;
    color: var(--button-secondary-text-color) !important;
    border: 1px solid var(--button-secondary-border) !important;
    min-width: auto !important; /* Button nicht strecken */
}
.location-button:hover {
    background-color: var(--button-secondary-hover-bg) !important;
}
.location-button .material-icons {
    font-size: 1.1em !important; /* Kleinere Icons in den Buttons */
    vertical-align: -2px;
}
.location-text {
    font-size: 0.85em;
    color: var(--text-color-light);
    padding: 5px 0;
}

/* ... restliche CSS-Stile ... */

.filter-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 10px; /* Etwas Platz an den Seiten, falls die Buttons umbrechen */
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleinen Bildschirmen */
}

.filter-button {
    padding: 8px 12px; /* Etwas kompakter */
    border: 1px solid var(--primary-color-light, #79bbff); /* Hellerer Rand */
    background-color: var(--card-bg, white); /* Hintergrund wie Karten */
    color: var(--primary-color, #0d6efd);
    border-radius: 20px; /* Runde Ecken */
    cursor: pointer;
    font-size: 0.85em; /* Kleinere Schrift */
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.filter-button:hover {
    background-color: var(--primary-color-x-light, #e0efff); /* Sehr heller Hover-Effekt */
    border-color: var(--primary-color, #0d6efd);
}

.filter-button.active {
    background-color: var(--primary-color, #0d6efd);
    color: var(--primary-color-contrast, white); /* Kontrastfarbe für Text */
    border-color: var(--primary-color, #0d6efd);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Für Dark Mode (optional, an deine Variablen anpassen) */
[data-theme="dark"] .filter-button {
    border-color: var(--primary-color-dark-theme, #4dabf7); /* Beispiel für Dark Mode Primary */
    background-color: var(--card-bg-dark, #2d3748);
    color: var(--primary-color-dark-theme, #4dabf7);
}

[data-theme="dark"] .filter-button:hover {
    background-color: var(--primary-color-dark-hover, #1a202c); /* Dunklerer Hover */
}

[data-theme="dark"] .filter-button.active {
    background-color: var(--primary-color-dark-theme, #4dabf7);
    color: var(--primary-color-contrast-dark, #1a202c);
    border-color: var(--primary-color-dark-theme, #4dabf7);
}

#mapViewMapContainer {
    /* flex-grow: 1; Entfernen oder auf 0 setzen, da wir eine explizite Größe wollen */
    /*width: 100%; /* Nimmt 90% der Breite des Elternelements (.view-content) */
    /*max-width: 900px; /* Eine maximale Breite, um auf großen Bildschirmen nicht zu breit zu werden */
    height: 70vh; /* Höhe als 70% der Viewport-Höhe */
    min-height: 400px; /* Eine Mindesthöhe für die Karte */
    position: relative; /* Für das noDataMapMessage Overlay und die Mapbox-Karte selbst */
    border: 1px solid var(--card-border); /* Optional: ein Rand um die Karte */
    border-radius: 8px; /* Optional: abgerundete Ecken */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Optional: ein leichter Schatten */
    overflow: hidden; /* Stellt sicher, dass die Mapbox-Karte innerhalb der abgerundeten Ecken bleibt */
}

/* Map Legend */
.map-legend {
    margin-top: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--border-radius-large, 14px);
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.map-legend .legend-item { display:flex; align-items:center; gap:6px; }
.map-legend .legend-color {
    width:14px; height:14px; border-radius:50%;
    border:1px solid var(--border-color-strong,#333);
    box-shadow:0 0 0 2px var(--card-bg, #fff) inset;
}
.multi-status-marker {
    width:16px; height:16px; border-radius:50%;
    border:1px solid var(--border-color-strong,#333);
    box-shadow:0 0 3px rgba(0,0,0,0.3);
}



.no-data-map-message {
    background-color: rgba(var(--background-color-rgb, 255, 255, 255), 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    color: var(--text-color);
    /* Positionierung in der Mitte der Karte wird von Leaflet Control übernommen */
}

.no-data-map-message h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-color-strong);
}
.no-data-map-message p {
    font-size: 0.9em;
    color: var(--text-color-muted);
    margin-bottom: 0;
}


/* Leaflet Popup Styling Anpassungen */
.leaflet-popup-content-wrapper {
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.leaflet-popup-content {
    margin: 10px;
    font-size: 0.9em;
    line-height: 1.4;
}
.leaflet-popup-tip {
    background: var(--background-color);
}
.leaflet-popup-close-button {
    color: var(--text-color-muted) !important; /* Wichtig für Überschreibung */
}
.leaflet-popup-close-button:hover {
    color: var(--text-color) !important;
    background-color: var(--background-color-hover);
}


/* Die folgenden Regeln für .app-container und #viewContainer sind wahrscheinlich schon vorhanden und korrekt,
   sie stellen sicher, dass die Views den verfügbaren Platz einnehmen. */
.app-container {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; oder height: 100vh; ist typisch */
}

#viewContainer {
    flex-grow: 1;
    position: relative;
    display: flex; /* Wichtig, damit die aktive .view 100% Höhe einnimmt */
}

#mapView {
    display: flex;
    flex-direction: column;
    width: 100%; /* Standard für eine .view */
    /* height: 100%; Standard für eine .view, wird durch #viewContainer display:flex erreicht */
}

#mapView .view-content {
    flex-grow: 1; /* Nimmt den verfügbaren Platz in #mapView ein */
    display: flex; /* Ermöglicht die Zentrierung von #mapViewMapContainer */
    align-items: center; /* Zentriert #mapViewMapContainer vertikal */
    justify-content: center; /* Zentriert #mapViewMapContainer horizontal */
    padding: 20px; /* Ein Abstand um den Kartencontainer */
    overflow: auto; /* Falls der Inhalt (z.B. bei sehr kleiner Höhe) doch scrollen muss */
    /* position: relative; Ist bereits vorhanden und gut für Overlays wie noDataMapMessage */
}

#map {
    width: 100%;
    height: 100%;
    border-radius: 7px; /* Passt zum Parent, falls dieser abgerundete Ecken hat */
}

/* NEUE/ANGEPASSTE REGELN FÜR DIE KARTE ZUM DEBUGGEN */
#mapView .view-content {
    flex-grow: 1; /* Nimmt verfügbaren Platz in #mapView ein */
    display: flex;
    align-items: center; /* Vertikale Zentrierung für den Map-Container */
    justify-content: center; /* Horizontale Zentrierung für den Map-Container */
    padding: 1rem; /* Ein kleiner Abstand rundherum */
    background-color: #f0f0f0; /* DEBUG: Grau - Bereich, in dem die Karte zentriert wird */
    overflow: auto; /* Falls der Inhalt doch mal größer ist als der Container */
}


#map {
    width: 100%;
    height: 100%;
    background-color: lightcoral; /* DEBUG: Hellrot - Das eigentliche Map-div */
    border-radius: 6px; /* Etwas kleiner als der Parent oder weglassen, da Parent overflow:hidden hat */
}

/* Admin View Buttons */
#adminContent .admin-export-buttons-container { /* Erstellen Sie ggf. diesen Container im HTML um die Buttons */
    display: flex;
    flex-direction: column; /* Buttons untereinander auf Mobilgeräten */
    gap: 10px;
}

@media (min-width: 768px) {
    #adminContent .admin-export-buttons-container {
        flex-direction: row; /* Nebeneinander auf größeren Bildschirmen */
        flex-wrap: wrap;
    }
}

#adminContent .admin-export-buttons-container button {
    width: 100%; /* Volle Breite auf Mobilgeräten */
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #adminContent .admin-export-buttons-container button {
        width: auto; /* Automatische Breite auf größeren Bildschirmen */
    }
}


/* Arbeitszeitauswertung - Mitarbeiterliste */
.evaluation-user-list {
    padding-left: 0;
    list-style: none;
}
.evaluation-user-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color-soft);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.evaluation-user-item:hover {
    background-color: var(--hover-bg-color);
}
.evaluation-user-item:last-child {
    border-bottom: none;
}

/* Arbeitszeitauswertung - Detailansicht (Monatstabelle) */
.monthly-work-table {
    width: 100%; /* Nimmt die Breite des Scroll-Wrappers ein */
    min-width: 500px; /* Mindestbreite, bevor Scrollen beginnt, anpassen nach Bedarf */
    border-collapse: collapse; /* Schönere Ränder */
}
.monthly-work-table th, .monthly-work-table td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--border-color-soft);
}
.monthly-work-table th {
    background-color: var(--table-header-bg, #f0f0f0); /* Passen Sie die Variable an */
}

/* Arbeitszeitauswertung - Tagesdetails (ausklappbar) */
.daily-detail-container {
    padding: 10px 15px; /* Etwas mehr horizontales Padding */
    background-color: var(--bg-color); /* Etwas hellerer Hintergrund für die Details */
    border-top: 1px dashed var(--card-border); /* Trennlinie */
}

.no-daily-entries {
    padding: 10px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
}

.day-entry-group {
    margin-bottom: 15px;
    padding-bottom: 10px;
    /* border-bottom: 1px solid var(--card-border); */ /* Leichte Trennung zwischen Tagen */
}
.day-entry-group:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.day-entry-header {
    font-size: 1em; /* Angepasst */
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px; /* Mehr Abstand */
    padding-bottom: 8px; /* Mehr Abstand */
    border-bottom: 1px solid var(--primary-color-light);
}

.daily-entries-list {
    list-style: none;
    padding-left: 0;
}

/* NEUE KLASSEN für Tagesdetail-Einträge */
.time-entry-li-detailed {
    padding: 10px;
    margin-bottom: 10px; /* Abstand zwischen den Einträgen */
    background-color: var(--card-bg); /* Hintergrund wie Karten für bessere Abgrenzung */
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-std);
    font-size: 0.9em;
}
.time-entry-li-detailed:last-child {
    margin-bottom: 0;
}

.day-entry-main-info {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf sehr kleinen Bildschirmen */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Abstand zu den Ortsangaben */
}

.day-entry-times {
    font-weight: 500; /* Zeiten etwas hervorheben */
    flex-grow: 1; /* Nimmt verfügbaren Platz */
    margin-right: 10px; /* Abstand zur Dauer */
}
.day-entry-times strong {
    color: var(--text-color); /* Normale Textfarbe für die Zeiten */
}

.day-entry-total-duration {
    font-size: 0.95em;
    color: var(--text-color-muted);
    white-space: nowrap; /* Verhindert Umbruch der Dauer */
}

.day-entry-locations {
    font-size: 0.85em;
    color: var(--text-color-light);
    padding-top: 8px;
    border-top: 1px dashed var(--border-color-soft); /* Leichte Trennung zu den Zeiten */
}
.day-entry-location-item {
    margin-bottom: 4px;
}
.day-entry-location-item:last-child {
    margin-bottom: 0;
}

.location-link { /* Bereits vorhanden, ggf. anpassen */
    color: var(--primary-color);
    text-decoration: none;
}
.location-link:hover {
    text-decoration: underline;
}


/* Sicherstellen, dass der Toggle-Button korrekt funktioniert und aussieht */
.toggle-details-button {
    padding: 6px 8px; /* Kompakter */
}
.toggle-details-button .material-icons {
    font-size: 22px; /* Passende Icongröße */
    transition: transform 0.2s ease-in-out;
}

/* Wichtig: .hidden-row muss display: none haben, um das Ausklappen zu ermöglichen */
.daily-detail-row.hidden-row {
    display: none;
}

/* Stile für den Header der Detailansicht */
#userDetailEvalName {
    font-size: 1.3em; /* Etwas größer und präsenter */
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
}

#backToUserListButton {
    margin-bottom: 15px; /* Abstand nach unten zum Inhalt */
    /* Weitere Stile werden von .back-buttonnumpad übernommen */
}

/* Stellt sicher, dass der Container für die Detailansicht gut aussieht */
#userDetailEvalContainer {
    padding: 15px; /* Allgemeines Padding */
    background-color: var(--background-color); /* Hintergrundfarbe */
    border-radius: var(--border-radius-large);
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); Entfernt, da es in der View schon Schatten gibt */
}

#userListForEvalContainer {
    padding: 0 10px; /* Etwas seitliches Padding für die Liste */
}

/* Kleinere Anpassung für Skeleton auf Mobilgeräten */
.monthly-work-table {
    /* ... bestehende Stile ... */
    font-size: 0.9em; /* Schriftgröße für die Tabelle auf Mobilgeräten ggf. leicht reduzieren */
}

@media (max-width: 600px) {
    .monthly-work-table {
        min-width: unset; /* Erlaubt der Tabelle, schmaler zu werden und auf den Wrapper zu vertrauen */
        font-size: 0.85em; /* Noch kleinere Schrift auf sehr kleinen Bildschirmen */
    }
    .monthly-work-table th,
    .monthly-work-table td {
        padding: 6px 8px; /* Weniger Padding */
    }
    #userDetailEvalName {
        font-size: 1.2em;
    }
    .day-entry-header {
        font-size: 0.95em;
    }
}

/* In styles.css hinzufügen */
.company-stats-skeleton .stats-grid-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Anpassbare Spalten */
    gap: 10px; /* Kleinere Lücke für Skeleton */
}
.company-stats-skeleton .skeleton-stat-item {
    background-color: var(--skeleton-bg-color);
    border-radius: var(--card-border-radius);
    height: 70px; /* Beispielhöhe */
    padding: 10px;
}


#companyStatsContent .stats-grid { /* Stellt sicher, dass es spezifisch ist */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Etwas mehr Platz für echten Inhalt */
}

#companyStatsContent .stat-item.card { /* Stellt sicher, dass die KPI-Items wie Karten aussehen */
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 15px;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.stat-change {
    font-size: 0.9em;
    margin-left: 5px; /* Etwas Abstand zum Wert */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.stat-change.positive {
    color: var(--success-color);
}
.stat-change.negative {
    color: var(--danger-color);
}
.stat-change.neutral {
    color: var(--text-color-light);
}

.value-and-change {
    display: flex;
    align-items: baseline; 
    justify-content: center; /* Zentriert den Wert und die Änderung unter dem Label */
    gap: 5px;
    margin-top: 5px; /* Abstand zum Label */
}
.value-and-change .stat-value { /* Stellt sicher, dass der Wert im Flex-Container richtig gestylt ist */
    font-size: 1.6em; /* Oder deine bevorzugte Größe für stat-value */
    font-weight: bold;
    color: var(--primary-color); /* Oder deine Akzentfarbe */
}


/* Optional: Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 480px) {
    #companyStatsContent .stats-grid {
         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    #companyStatsContent .stat-item.card .stat-label {
        font-size: 0.8em;
    }
    #companyStatsContent .stat-item.card .value-and-change .stat-value,
    #companyStatsContent .stat-item.card > .stat-value { /* Auch für direkte stat-value Kinder */
        font-size: 1.2em;
    }
     .value-and-change {
        flex-direction: column;
        align-items: center; /* Zentriert die untereinander liegenden Elemente */
        gap: 2px;
    }
    .stat-change {
        margin-left: 0;
        font-size: 0.8em;
    }
}

/* --- Login Screen Styling Start --- */
.login-background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 30%, var(--login-pattern-c1) 0%, transparent 50%),
        linear-gradient(45deg, transparent 49%, var(--login-pattern-c2) 50%, transparent 51%);
    background-size: 100% 100%, 30px 30px;
    opacity: 0.6; /* Etwas subtiler */
    z-index: 0;
    display: none; /* Wird angezeigt, wenn loginContainer sichtbar ist */
}

/* Container für den gesamten Login-Bildschirm-Inhalt */
.login-screen-container {
    /* WICHTIG: display wird von JS gesteuert, aber wenn sichtbar, muss es flex sein */
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    box-sizing: border-box;
    
    /* Flexbox-Zentrierung - wird aktiv wenn display: flex gesetzt wird */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    overflow: hidden;
    padding: 20px;
    background-color: var(--login-bg-color);
    color: var(--login-text-color);
    animation: loginFadeInUp 0.7s ease-out forwards;
}

/* Wenn der Container sichtbar ist, MUSS er als Flexbox dargestellt werden */
.login-screen-container:not([style*="display: none"]),
.login-screen-container[style*="display: block"],
.login-screen-container[style*="display: flex"] {
    display: flex !important;
}

@keyframes loginFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo-container {
    width: 70px; 
    height: 70px;
    background: var(--login-logo-bg);
    border-radius: 18px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    backdrop-filter: blur(8px);
    border: 1px solid var(--login-logo-border);
    animation: loginElementFadeInUp 0.5s ease-out 0.1s forwards;
    opacity: 0;
    overflow: hidden; /* Stellt sicher, dass überstehendes Bild abgeschnitten wird */
}

.login-logo-img {
    width: 100%; /* Bild soll den Container ausfüllen */
    height: 100%; /* Bild soll den Container ausfüllen */
    object-fit: cover; /* Bild füllt den Container unter Beibehaltung des Seitenverhältnisses, kann beschnitten werden */
}

.login-title {
    font-size: 28px; 
    font-weight: 600;
    color: var(--login-title-color);
    margin-top: 0; /* Entferne oberen Abstand, wenn Logo direkt darüber ist */
    margin-bottom: 25px; /* Leicht reduzierter Abstand zum Formular */
    text-align: center;
    letter-spacing: -0.5px;
    animation: loginElementFadeInUp 0.5s ease-out 0.2s forwards;
    opacity: 0;
    /* Breite anpassen für Konsistenz mit Formular */
    width: 100%; 
    max-width: 360px; 
}

.login-form-container {
    width: 100%;
    max-width: 360px; 
    display: flex;
    flex-direction: column;
    /* align-items: center; /* Nicht hier, da Inputs 100% Breite haben sollen */
}

/* Spezifischer Abstand für die letzte Input-Gruppe vor "Passwort vergessen" */
.login-form-container .login-input-group:has(+ .login-forgot-password),
.login-form-container div:has(> #registrationCode) + .login-forgot-password {
    margin-bottom: 1px; /* Reduziert von 10px auf 4px */
}


.login-form-container .login-input-group:nth-child(1) { animation-delay: 0.3s; }
.login-form-container .login-input-group:nth-child(2) { animation-delay: 0.35s; } 
#registrationCodeContainer.login-input-group { animation-delay: 0.4s; } 


.login-input-field {
    width: 100%;
    padding: 18px 22px; /* Angepasst */
    background: var(--login-input-bg);
    border: 1px solid var(--login-input-border);
    border-radius: 14px; /* Etwas weniger rund */
    color: var(--login-input-text-color);
    font-size: 16px;
    transition: all 0.25s ease-in-out;
    backdrop-filter: blur(8px);
    -webkit-appearance: none; /* iOS Standard-Styling entfernen */
    -moz-appearance: none;
    appearance: none;
}

.login-input-field::placeholder {
    color: var(--login-input-placeholder-color);
    opacity: 1; /* Firefox Fix */
}

.login-input-field:focus {
    outline: none;
    border-color: var(--login-input-focus-border);
    background: var(--login-input-focus-bg);
    /* transform: translateY(-1px); */ /* Leichter Lift-Effekt */
    box-shadow: var(--login-input-focus-shadow);
}

.login-password-container {
    position: relative;
}

/* .login-password-toggle CSS-Regeln entfernt, da das Element aus HTML entfernt wurde */

.login-forgot-password {
    text-align: center;
    /* Reduziertes vertikales Margin, nochmals angepasst */
    margin: 5px 0 15px; /* Sehr kleiner oberer Abstand, reduzierter unterer */
    animation: loginElementFadeInUp 0.5s ease-out 0.45s forwards;
    opacity: 0;
    width: 100%; /* Hinzugefügt */
    max-width: 360px; /* Hinzugefügt für Konsistenz */
}

.login-forgot-password a {
    /* Farbe wird jetzt von der Variable --login-secondary-link-color gesteuert */
    color: var(--login-secondary-link-color);
    text-decoration: underline;
    font-size: 14px;
    transition: color 0.2s ease;
}

.login-forgot-password a:hover {
    color: var(--login-link-hover-color);
}

/* Wrapper für die Login/Register Buttons */
.login-button-wrapper {
    position: relative; 
    width: 100%;
    max-width: 360px; /* Hinzugefügt für Konsistenz */
    height: 52px; 
    /*margin: 0 0 12px 0; /* Reduzierter unterer Abstand */
    animation: loginElementFadeInUp 0.5s ease-out 0.5s forwards;
    opacity: 0;
}


/* Styling für die existierenden Login/Register Buttons im neuen Design */
.login-continue-btn { /* Diese Klasse wird den #login und #register Buttons hinzugefügt */
    width: 100%;
    height: 100%; /* Füllt den .login-button-wrapper */
    padding: 0 20px; /* Padding horizontal, Höhe wird durch Container gesteuert */
    background: var(--login-btn-bg);
    color: var(--login-btn-text) !important; /* Wichtig, um alte Buttonfarben zu überschreiben */
    border: none;
    border-radius: 14px; /* Wie Inputs */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute; /* Für Überblendung */
    top: 0;
    left: 0;
}
/* Stellt sicher, dass die Basis-Button-Stile die Farben nicht überschreiben. */
button.loginbutton, button.registerbutton {
    background-color: var(--login-btn-bg) !important; /* Korrigiert für Light Mode */
    color: var(--login-btn-text) !important; /* Korrigiert für Light Mode */
}


.login-continue-btn:hover {
    background: var(--login-btn-hover-bg);
    /* transform: translateY(-1px); */
    box-shadow: var(--login-btn-shadow);
}

.login-continue-btn:active {
    transform: translateY(0px) scale(0.99);
    box-shadow: none;
}

/* Ladeanimation für .login-continue-btn (angepasst von .loginbutton.loading) */
.login-continue-btn.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.login-continue-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px; /* Etwas größer */
    height: 22px;
    margin-top: -11px; /* Hälfte der Höhe */
    margin-left: -11px; /* Hälfte der Breite */
    border: 3px solid var(--login-btn-text); /* Spinner Farbe */
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
/* Fehlerzustand */
.login-continue-btn.error {
    background-color: var(--danger-color) !important;
    color: var(--text-on-primary) !important;
}


.login-signup-link {
    text-align: center;
    margin-top: 35px; /* Mehr Abstand nach oben, da Buttons davor sind */
    color: var(--login-secondary-link-color);
    font-size: 14px;
    animation: loginElementFadeInUp 0.5s ease-out 0.6s forwards;
    opacity: 0;
    width: 100%; /* Hinzugefügt */
    max-width: 360px; /* Hinzugefügt für Konsistenz */
}

.login-signup-link a {
    color: var(--login-link-color);
    text-decoration: underline;
    font-weight: 500;
}
.login-signup-link a:hover {
    color: var(--login-link-hover-color);
}

/* Animation für einzelne Elemente im Login */
@keyframes loginElementFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive Anpassungen für Login Screen */
@media (max-width: 400px) { /* Ziel auf kleinere Mobilgeräte */
    .login-screen-container {
        padding: 20px 15px; /* Padding für kleinere Screens beibehalten/anpassen */
        justify-content: center;
        align-items: center;
    }
    .login-title {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .login-input-field {
        padding: 16px 20px;
        font-size: 15px;
    }
    .login-continue-btn {
        font-size: 15px;
    }
    .login-button-wrapper {
        height: 48px;
    }
}

@media (max-height: 700px) and (max-width: 400px) { /* Für sehr kleine Screens */
     .login-screen-container {
        padding-top: 15px; /* Weiter reduziert für kleine Höhen */
        padding-bottom: 15px;
        justify-content: center; /* Stellt sicher, dass es auch bei kleiner Höhe zentriert bleibt */
        align-items: center;
    }
    .login-logo-container {
        width: 60px;
        height: 60px;
        margin-bottom: 15px; /* Reduziert */
    }
    .login-logo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .login-title {
        font-size: 22px;
        margin-bottom: 20px; /* Reduziert */
    }
    .login-forgot-password {
        margin: 8px 0 15px; /* Angepasst für kleine Screens */
    }
    .login-signup-link {
        margin-top: 20px; /* Reduziert */
    }
}

/* Ursprüngliche Login-Container Stile auskommentieren/entfernen, falls sie global waren */
/*
.login-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background: var(--card-bg);
    border-radius: var(--border-radius-large);
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
}

.login-container img {
    max-width: 70px;
    margin-bottom: 20px;
}

.login-container h2 {
    color: var(--text-color);
    margin-bottom: 25px;
}
*/

/* Globale Input Stile - sicherstellen, dass sie nicht mit login-input-field kollidieren oder ggf. anpassen */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    /* Diese globalen Stile bleiben für den Rest der App bestehen.
       Die .login-input-field Klasse ist spezifischer für den Login. */
    width: 100%; 
    padding: 12px 15px; 
    margin-bottom: 15px; 
    border: 1px solid var(--card-border); 
    border-radius: var(--border-radius-std); 
    font-size: 1rem;
    background-color: var(--input-bg); 
    color: var(--text-color); 
    box-sizing: border-box; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); 
}

/* Die ursprünglichen .button-container Stile sind ok, da sie für die Positionierung der überlappenden Buttons sind.
   Der .login-button-wrapper kann diese übernehmen oder ergänzen.
*/
.button-container {
    position: relative;
    width: 100%;
    height: 48px; 
    margin: 20px 0 15px 0;
}


/* Alte .loginbutton und .registerbutton Stile sind größtenteils durch .login-continue-btn ersetzt,
   aber die :after Ladeanimation wird von .login-continue-btn.loading übernommen.
   Die .hidden Klasse bleibt wichtig.
*/
button, .loginbutton, .registerbutton, #searchStreetButton, #installButton {
    padding: 12px 20px; 
    border-radius: var(--border-radius-std); 
    font-size: 1rem;
    font-weight: 500; 
    cursor: pointer;
    border: none; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, color 0.2s ease;
    text-align: center;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap: 8px; 
}

.loginbutton.loading::after {
    content: ''; 
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 20px; 
    height: 20px;
    border: 3px solid var(--text-on-primary); 
    border-top: 3px solid transparent; 
    border-radius: 50%; 
    animation: spin 0.6s linear infinite; 
}

/* Spinner-Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.registerbutton.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 3px solid var(--text-on-accent, var(--text-on-primary)); 
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    transform: translate(-50%, -50%);
}

/* --- Fehlerzustand für den Login-Button --- */
.loginbutton.error {
    background-color: var(--danger-color) !important; /* !important, falls von .login-continue-btn überschrieben */
    color: white !important;
    border: 1px solid var(--danger-color) !important;
}

/* --- Login Screen Styling Ende --- */