/* Der frühere @import von https://rsms.me/inter/inter.css ist entfernt.
   Er wurde von der Content-Security-Policy ohnehin immer blockiert (die
   Domain stand nie in style-src), der Font wurde also nie geladen. Ein
   externer Font-CDN sieht außerdem die IP-Adresse jedes Besuchers - bei
   personenbezogenen Daten eine unnötige Datenweitergabe. Der Font-Stack
   unten fällt auf die Systemschrift zurück, was faktisch schon immer
   angezeigt wurde. */

:root {
    /* Colors are now set dynamically via inline styles in base.html */
    /* These are fallback values only */
    --nabu-blue: rgb(0, 104, 180);
    --nabu-blue-dark: rgb(0, 53, 96);
    --nabu-blue-light: rgb(187, 205, 235);
    --nabu-orange: rgb(239, 124, 0);
    --bg: #f6f7fb;
    --text: #0f1b2d;
    --muted: #52607a;
    --radius: 12px;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* dvh ist die sichtbare Höhe. 100vh zählt auf dem iPhone Statusleiste
       bzw. eingeklappte Browserleisten mit - kurze Seiten ließen sich sonst
       um diesen Betrag scrollen. vh bleibt als Rückfall. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: -999px;
    background: var(--nabu-blue);
    color: white;
    padding: 0.5rem 1rem;
    z-index: 1000;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Färbt die Statusleiste von iOS 26 ein, statt dass Liquid Glass dort
   verschwommen nachzeichnet, was beim Scrollen darunter gerät. iOS
   übernimmt dafür das erste feste Element über die volle Breite am oberen
   Rand, das höher als 10 px ist, und malt dessen einfache Hintergrundfarbe
   deckend - ein Verlauf oder ein ::before-Element zählt nicht.
   Vollbild-Ansichten wie das Markieren liegen darüber und färben die
   Statusleiste dann selbst.

   Im Browser liegt die Statusleiste über der Seite (viewport-fit=cover):
   Der Streifen deckt sie ab und ist ohne Statusleiste 0 px hoch. */
.statusbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: var(--nabu-blue-dark);
    z-index: 9998;
}
/* Als App abgelegt zeichnet iOS die Statusleiste außerhalb der Seite - ohne
   apple-mobile-web-app-status-bar-style, denn mit black-translucent läge die
   Seite darunter, und iOS 26 legte einen Schleier darüber, den keine Seite
   abdecken kann. Der Streifen ist hier nur so hoch wie nötig und fast
   durchsichtig: iOS übernimmt seine Farbe trotzdem deckend, auf der Seite
   bleibt er über der Kopfleiste unsichtbar. */
@media (display-mode: standalone) {
    html { background-color: var(--nabu-blue-dark); }
    .statusbar {
        height: 12px;
        background-color: color-mix(in srgb, var(--nabu-blue-dark) 1%, transparent);
    }
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Die Kopfleiste reicht bis unter die Statusleiste (viewport-fit=cover),
       sonst zeichnet iOS dort den hellen Seitenhintergrund unscharf nach */
    padding: calc(1rem + env(safe-area-inset-top, 0px))
             calc(2rem + env(safe-area-inset-right, 0px))
             1rem
             calc(2rem + env(safe-area-inset-left, 0px));
    background: linear-gradient(135deg, var(--nabu-blue-dark), var(--nabu-blue));
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
    gap: 1rem;
}

.brand { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem;
    flex-shrink: 0;
}
.brand-logo {
    max-height: 50px;
    max-width:  120px;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-mark {
    background: white;
    color: var(--nabu-blue-dark);
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.brand-text {
    flex-shrink: 0;
    white-space: nowrap;
}
.brand-title { 
    font-weight: 700; 
    font-size: 1.1rem;
    white-space: nowrap;
}
.brand-subtitle { 
    color: #dce8f5; 
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-links { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}
.nav-links a:hover,
.nav-links a:focus-visible {
    background: rgba(255,255,255,0.18);
}

.page { max-width: 1100px; margin: 2rem auto 2rem; padding: 0 1.5rem; flex: 1; }

.hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--muted); margin: 0 0 0.3rem; }
.hero h1 { margin: 0 0 0.5rem; font-size: 2rem; }
.hero h2 { margin: 0 0 0.5rem; font-size: 1.3rem; color: var(--muted); font-weight: 400; }
.hero p { margin: 0; color: var(--muted); }

.card, .hint-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-top: 1.25rem;
}
.card h2 { margin-top: 0; }

.hint-card {
    border-left: 6px solid var(--nabu-orange);
}
.hint-card h2 { margin-top: 0; }
.hint-card ul { padding-left: 1rem; margin: 0.5rem 0 0; color: var(--muted); }

.map { width: 100%; min-height: 380px; height: 100%; background: var(--nabu-blue-light); border-radius: var(--radius); overflow: hidden; border: 1px solid #d9e1ec; position: relative; }
.leaflet-container { width: 100%; height: 100%; font: inherit; }
.map-actions { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.map-hint { color: var(--muted); font-size: 0.95rem; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    max-width: 720px;
}

label { font-weight: 700; color: var(--text); }
input, select, textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #c9d5e5;
    font-size: 1rem;
    background: #fbfdff;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--nabu-blue);
    border-color: var(--nabu-blue);
}

.hint { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Gemeinsame Bausteine von Adminbereich und Meldezentrale */
.text-muted { color: var(--muted); }
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { margin: 0 0 0.25rem; }
.page-header p { margin: 0; }

.success-alert, .error-alert {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem;
}
.success-alert .lucide, .error-alert .lucide { margin-top: 0.2em; }
.success-alert { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.error-alert { background: #fdecea; border: 1px solid #f5c2c7; color: #842029; }
.error-alert ul { margin: 0; padding-left: 1.2rem; }

.contact { border: 1px solid #e1e8f0; border-radius: var(--radius); padding: 1rem; background: #f9fbff; grid-column: 1 / -1; }
.contact legend { font-weight: 700; padding: 0 0.5rem; }
.contact label { margin-top: 0.5rem; display: block; }

/* Lucide-Icons: Strichstärke und Farbe wie der umgebende Text */
.lucide {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1.2rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--nabu-blue), var(--nabu-blue-dark));
    color: white;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 104, 180, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 104, 180, 0.4); }
.button:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.button.ghost {
    background: white;
    color: var(--nabu-blue-dark);
    border: 1px solid #d1dcec;
    box-shadow: none;
}
.button.danger {
    background: var(--nabu-orange);
    box-shadow: 0 8px 20px rgba(239, 124, 0, 0.35);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    grid-column: 1 / -1;
}

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid #e6ecf3; }
th { background: #f3f7fb; font-size: 0.95rem; }
td.actions { display: flex; gap: 0.5rem; flex-direction: column; }


.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.page-footer { text-align: center; padding: 2rem 1rem; color: var(--muted); margin-top: auto; }
.page-footer a { color: var(--nabu-blue-dark); }
.page-footer p { margin: 0; }

.success { border-left: 6px solid var(--nabu-blue); }

.login-card { max-width: 420px; margin: 3rem auto; }
.login-form { max-width: 100%; }
.error-message { background: #ffe4e4; border: 1px solid #f5a5a5; border-radius: var(--radius); padding: 0.75rem 1rem; color: #9b2c2c; margin-bottom: 1rem; }

.address-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e1e8f0;
}
.address-section h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.address-grid {
    display: grid;
    grid-template-columns: 1fr auto 100px 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.address-field { display: flex; flex-direction: column; gap: 0.25rem; }
.address-field label { font-size: 0.85rem; font-weight: 600; }
.address-field.small { max-width: 100px; }
.address-field input { padding: 0.6rem 0.75rem; }

@media (max-width: 600px) {
    .address-grid { grid-template-columns: 1fr 80px; }
    .address-field.small { max-width: none; }
}

/* Map error message */
.map-error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem;
    border-radius: var(--radius);
    margin-top: 0.75rem;
    animation: fadeIn 0.3s ease;
}

/* Form validation errors */
.form-errors {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    animation: fadeIn 0.3s ease;
}
.form-errors ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}
.form-errors li {
    margin: 0.25rem 0;
}

/* Required field indicator */
.required {
    color: #dc3545;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hamburger menu toggle button */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;
    width: 24px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle-icon {
    position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
}
.nav-toggle-icon::before {
    top: -8px;
}
.nav-toggle-icon::after {
    top: 8px;
}

/* Hamburger to X animation */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    transform: rotate(45deg) translate(5px, 6px);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .top-bar { flex-wrap: wrap; }
    .nav-toggle {
        display: block;
        order: 2;
    }
    .brand {
        order: 1;
        flex: 1;
    }
    #main-nav {
        order: 3;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    #main-nav.nav-open {
        max-height: 500px;
    }
    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding-top: 0.5rem;
    }
    .nav-links li {
        width: 100%;
    }
    .nav-links a {
        display: block;
        padding: 0.75rem 0.5rem;
        border-radius: 0;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: rgba(255,255,255,0.1);
    }
    td.actions { flex-direction: row; flex-wrap: wrap; }
    .map { height: 260px; }
}

/* Hinweis auf eine neuere Version (static/js/update-check.js) */
#update-hinweis {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.95rem;
    /* Auf dem iPhone nicht unter der Home-Leiste kleben */
    margin-bottom: env(safe-area-inset-bottom, 0);
}
#update-hinweis .update-hinweis-schliessen {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.2rem;
    color: var(--muted, #666);
}

/* Angemeldetes Konto in Adminbereich und Meldezentrale */
.signed-in-account {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.signed-in-account strong { color: var(--text); }