/* ============================================
   HERZBERG (ELSTER) – Shared Design System
   Gemeinsame CSS-Variablen und Basis-Styles
   für alle Apps unter herzbergelster.de
   ============================================ */

:root {
    /* Herzberg Municipal Color Palette */
    --hz-primary-green: #006E4E;
    --hz-primary-green-hover: #005a40;
    --hz-primary-red: #B12121;
    --hz-primary-red-hover: #8f1a1a;
    --hz-accent-red: #A71A1C;

    /* Neutrals */
    --hz-text-primary: #1a1a2e;
    --hz-text-secondary: #4a5568;
    --hz-text-muted: #94a3b8;
    --hz-bg-site: #f8fafc;
    --hz-bg-white: #ffffff;
    --hz-bg-light: #f1f5f9;
    --hz-border-color: #e2e8f0;

    /* Semantic */
    --hz-success: #16a34a;
    --hz-warning: #d97706;
    --hz-danger: #dc2626;
    --hz-info: #2563eb;

    /* Typography */
    --hz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Spacing & Layout */
    --hz-radius-sm: 6px;
    --hz-radius-md: 10px;
    --hz-radius-lg: 16px;
    --hz-radius-xl: 24px;
    --hz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --hz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hz-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --hz-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================
   Cross-App Navigation Bar
   ============================================ */
.hz-app-nav {
    background: var(--hz-bg-white);
    border-bottom: 1px solid var(--hz-border-color);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    height: 48px;
    font-family: var(--hz-font-family);
    font-size: 13px;
    box-shadow: var(--hz-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1100;
}

.hz-app-nav a {
    text-decoration: none;
    color: var(--hz-text-secondary);
    padding: 0 1rem;
    height: 48px;
    display: flex;
    align-items: center;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.hz-app-nav a:hover {
    color: var(--hz-primary-green);
    background: rgba(0, 110, 78, 0.04);
}

.hz-app-nav a.active {
    color: var(--hz-primary-green);
    border-bottom-color: var(--hz-primary-green);
    font-weight: 600;
}

.hz-app-nav .hz-nav-home {
    font-weight: 700;
    color: var(--hz-primary-green);
    margin-right: auto;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.hz-app-nav .hz-nav-home:hover {
    color: var(--hz-primary-green-hover);
}

/* Shared legal footer for standalone app pages */
.hz-legal-footer {
    background: #ffffff;
    border-top: 1px solid var(--hz-border-color);
    padding: 18px 24px;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--hz-font-family);
    font-size: 13px;
}

.hz-legal-footer a {
    color: var(--hz-primary-green);
    font-weight: 600;
    text-decoration: none;
}

.hz-legal-footer a:hover {
    text-decoration: underline;
}

/* Mobile: scroll horizontal */
@media (max-width: 768px) {
    .hz-app-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem;
    }

    .hz-app-nav a {
        padding: 0 0.75rem;
        font-size: 12px;
    }
}