/* ============================================================
   Mandalo.de – Apple Style, Blau
   ------------------------------------------------------------
   Hinweis: Diese Datei ist vollständig kommentiert.
   Alle Werte wurden bewusst gewählt (Apple-Design-Sprache):
   große Schrift, weiche Ecken, dezente Schatten, blaue Akzente.
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLEN (Design-Tokens)
   Zentrale Ansammlung aller Farben/Größen. Wird hier geändert,
   greift die Änderung automatisch auf die ganze Website.
   ------------------------------------------------------------ */
:root {
    /* Hauptblau (Apple-Blau) – Buttons, Links, Akzente */
    --blue:        rgba(0, 113, 227, 1);
    /* Etwas helleres Blau für den Hover-Zustand der Buttons */
    --blue-hover:  rgba(0, 119, 237, 1);
    /* Tiefes Blau – unteres Ende der Verläufe (Gradienten) */
    --blue-deep:   rgba(0, 60, 150, 1);
    /* Helles, kräftiges Blau – oberes Ende der Verläufe */
    --blue-bright: rgba(45, 140, 250, 1);
    /* Sehr helles Blau für Info-Hinweise/Hintergründe */
    --blue-tint:   rgba(234, 243, 255, 1);
    /* Apple-typischer Hellgrau-Hintergrund für abwechselnde Sektionen */
    --bg:          rgba(245, 245, 247, 1);
    /* Haupttextfarbe (fast Schwarz) */
    --text:        rgba(29, 29, 31, 1);
    /* Sekundärtext (dunkles Grau) */
    --text-2:      rgba(58, 58, 60, 1);
    /* Tertiärtext (mittleres Grau, für Hinweise) */
    --text-3:      rgba(110, 110, 115, 1);
    /* Normale Linie/Border (Formulare, Trennungen) */
    --line:        rgba(210, 210, 215, 1);
    /* Weiche Linie (dezent, z. B. Footer-Trennung) */
    --line-soft:   rgba(232, 232, 237, 1);
    /* Gedecktes Blau-Grau für Datum & Countdown in der Top-Bar –
       eine Variable für beide Stellen (statt dieselbe Farbe
       in zwei Schreibweisen doppelt zu pflegen) */
    --topbar-text: rgba(143, 164, 196, 1);
    /* Eckenradius groß (Karten) */
    --radius-lg:   24px;
    /* Eckenradius mittel (reserviert) */
    --radius-md:   18px;
    /* Eckenradius klein (Eingabefelder, kleine Boxen) */
    --radius-sm:   14px;
    /* Dezenter Schatten für Karten */
    --shadow:      0 4px 24px rgba(0, 0, 0, 0.08);
    /* Stärkerer Schatten für größere/überschwebende Karten */
    --shadow-lg:   0 12px 48px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------
   2. BASIS / RESET
   ------------------------------------------------------------ */

/* box-sizing: border-box => Padding & Border zählen ZU den
   eingestellten Breiten/Höhen (berechenbarer Layout-Code) */
* { box-sizing: border-box; }

/* Glattes Scrollen, wenn per Link auf einen Anker gescrollt wird */
html { scroll-behavior: smooth; }

body {
    margin: 0;                    /* Standard-Rand des Browsers entfernen */
    /* Apple-Schriftfamilie: wird auf Apple-Geräten nativ gerendert,
       auf Windows/fallback entsprechend (keine externe Schrift nötig) */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;              /* Basis-Schriftgröße */
    line-height: 1.5;             /* Zeilenabstand – gut lesbar */
    color: var(--text);           /* Standardtextfarbe */
    background: rgba(255, 255, 255, 1); /* Seitenhintergrund weiß */
    -webkit-font-smoothing: antialiased;   /* Weiche Schrift auf Mac/iOS */
    -moz-osx-font-smoothing: grayscale;    /* Weiche Schrift auf Firefox/macOS */
}

/* Bilder dürfen nie breiter als ihr Elternelement werden (Responsive) */
img { max-width: 100%; }

/* Standardfarbe für Links (dort, wo nichts anderes gesetzt ist) */
a { color: var(--blue); }

/* ------------------------------------------------------------
   3. SEITENBREITE (Container)
   ------------------------------------------------------------ */

/* Hauptcontainer: max. 1120 px breit, darunter 92 % des Screens,
   horizontal zentriert (margin auto) */
.container { width: min(1120px, 92%); margin: 0 auto; }

/* Schmalerer Container (780 px) für Textseiten wie Impressum/Datenschutz
   – längere Zeilen sind schwerer lesbar */
.narrow    { width: min(780px, 92%); }

/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;          /* Inhalt horizontal zentrierbar */
    align-items: center;           /* Icon+Text vertikal zentriert */
    justify-content: center;       /* Icon+Text horizontal zentriert */
    gap: 8px;                      /* Abstand zwischen Icon und Text */
    padding: 14px 30px;            /* Innenabstand: hohe Klickfläche */
    border-radius: 980px;          /* Sehr großer Radius => volle "Pille" (Apple-Optik) */
    border: 1px solid transparent; /* Platz für Varianten mit Rahmen, ohne Größenänderung */
    font-family: inherit;          /* Schrift aus dem body erben */
    font-size: 16px;               /* Lesbare Button-Schrift */
    font-weight: 500;              /* Mittel-dicke Schrift */
    line-height: 1.2;              /* Knapp, da Button */
    text-decoration: none;         /* Button-Links unterstreichen? Nein */
    cursor: pointer;               /* Hand-Cursor bei Button-Links */
    /* Sanfte Übergänge für alle Hover-/Klick-Effekte */
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Beim Klicken minimal "zusammendrücken" (haptisches Gefühl) */
.btn:active { transform: scale(0.98); }

/* Variante: primärer blauer Button */
.btn-primary { background: var(--blue); color: rgba(255, 255, 255, 1); }
.btn-primary:hover {
    background: var(--blue-hover);              /* heller bei Hover */
    transform: translateY(-1px);                /* minimal nach oben */
    box-shadow: 0 8px 15px rgba(0, 80, 160, 0.45); /* blauer Schweb-Schatten */
}

/* Variante: weißer Button (für blaue Hintergründe, z. B. Hero) */
.btn-white { background: rgba(255, 255, 255, 1); color: var(--blue); }
.btn-white:hover {
    background: rgba(240, 247, 255, 1);                       /* minimal bläulich */
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Variante: "Geist"-Button – nur weißer Rahmen (auf blauem Grund) */
.btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.55);   /* halbtransparenter weißer Rahmen */
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } /* dezente Fläche bei Hover */

/* Variante: weiß mit blauem Rahmen (z. B. Abmelden im Dashboard) */
.btn-outline {
    background: rgba(255, 255, 255, 1);
    color: var(--blue);
    border-color: var(--blue);
}
.btn-outline:hover { background: var(--blue-tint); }

/* Variante: kleiner Button (Navigation, Dashboard) */
.btn-sm { padding: 9px 22px; font-size: 14px; }

/* Variante: volle Breite (Formulare) */
.btn-block { width: 100%; }

/* Variante: "lädt" – JS setzt die Klasse beim Absenden eines AJAX-Forms.
   Gedimmt + keine Klicks, damit nichts doppelt gesendet wird */
.btn.loading { opacity: 0.65; pointer-events: none; }

/* ------------------------------------------------------------
   5. TOP-BAR (dünner Info-Balken oben: Telefon, Adresse, Datum)
   ------------------------------------------------------------ */

.topbar {
    background: rgba(13, 21, 38, 1);   /* sehr dunkles Blauschwarz – wirkt hochwertig */
    color: rgba(168, 182, 204, 1);        /* gedecktes Blau-Grau für die Info-Texte */
    font-size: 13px;     /* klein, da nur Nebeninformation */
}

.topbar-inner {
    display: flex;             /* links/rechts in einer Reihe */
    align-items: center;       /* vertikal zentriert */
    justify-content: space-between; /* linke + rechte Gruppe an den Rändern */
    min-height: 46px;          /* Balkenhöhe */
    gap: 16px;                 /* Mindestabstand, falls es eng wird */
}

/* Linke Gruppe (Telefon + Adresse) */
.topbar-info { display: flex; align-items: center; min-width: 0; } /* min-width:0 => ellipsis funktioniert */
/* Telefon-Link als eigene Mini-Zeile: Icon + Nummer werden mit
   align-items: center exakt gegeneinander in der HÖHE-MITTE
   zentriert. Ohne diese Flex-Zeile wäre der Link durch das große
   Symbol (1.8em) eine höhere Zeilenbox – die Ziffern stehen aber
   auf der Text-Basislinie und lagen dadurch sichtbar tiefer als
   der Adresstext rechts daneben. So sitzen Nummer und Adresse
   garantiert auf derselben Höhe. */
.topbar-info a {
    display: inline-flex;      /* Link-Inhalt (Symbol + Nummer) wird zentrierbar */
    align-items: center;       /* Symbol und Ziffern exakt in der Höhe-Mitte */
    color: rgba(207, 224, 255, 1);
    text-decoration: none;
}
.topbar-info a:hover { color: rgba(255, 255, 255, 1); }

/* Telefonsymbol (✆ = Unicode U+2706) vor der Nummer in der Top-Bar:
   erbt die Link-Farbe (keine eigene Farbe nötig).
   Vertikale Zentrierung: Der Link ist eine Flex-Zeile (s. oben),
   deshalb ist das Symbol ein Flex-Item und wird automatisch in der
   HÖHE-MITTE der Nummer zentriert – vertical-align wirkt in einer
   Flex-Zeile nicht und dient nur als harmloser Fallback.
   line-height: 1 hält die Symbol-Zeilenbox exakt auf der
   Schriftgröße, damit sie nicht unnötig groß wird.
   top: -2px ist der Feinjustier-Regler – sitzt das Zeichen in einer
   bestimmten Schrift/Plattform noch 1 px zu hoch/tief: Wert anpassen. */
.topbar-phone-icon {
    font-size: 1.8em;          /* deutlich größer als die Nummern-Schrift */
    line-height: 1;            /* Symbol-Zeilenbox = genau Schriftgröße */
    vertical-align: middle;    /* wirkt in der Flex-Zeile nicht – Fallback */
    margin-right: 6px;         /* kleiner Abstand Symbol ↔ Nummer */
    opacity: 0.9;              /* dezent gedimmt (Farbe bleibt vererbt) */
    position: relative;
    top: -2px;                    /* ← Feinjustierung (z. B. -1px), sonst 0 */
}

/* Trennstrich zwischen Telefon und Adresse */
.topbar-sep { margin: 0 10px; opacity: 0.4; }

/* Adresse: auf einer Zeile, Überlauf wird zu "…" */
.topbar-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rechte Gruppe (Datum + Login-Links) */
.topbar-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } /* darf nicht zusammengequetscht werden */
.topbar-actions a { color: rgba(207, 224, 255, 1); text-decoration: none; }
.topbar-actions a:hover { color: rgba(255, 255, 255, 1); }

/* Datum wird per AJAX von api/date.php geladen */
.topbar-date { color: var(--topbar-text); }

/* Countdown bis zum automatischen Logout (erscheint statt
   "Mein Bereich" + "Abmelden"); wird von main.js jede Sekunde
   aktualisiert */
.topbar-countdown {
    color: var(--topbar-text);          /* gleicher Ton wie das Datum */
    font-variant-numeric: tabular-nums; /* gleiche Ziffernbreite: kein "Springen" */
    white-space: nowrap;
}

/* ------------------------------------------------------------
   6. NAVIGATION (klebrige, durchscheinende Navigationsleiste)
   ------------------------------------------------------------ */

.navbar {
    position: sticky;      /* bleibt beim Scrollen oben haften */
    top: 0;
    z-index: 50;           /* über Inhalt (0) und dem Menü-Panel (40), unter dem Hamburger-Toggle (60) */
    background: rgba(255, 255, 255, 0.72); /* halbtransparentes Weiß */
    /* "Frosted Glass": Inhalt dahinter wird unscharf + gesättigt (Apple-Effekt) */
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* feine Trennlinie */
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92px;          /* Leistenhöhe (für das vergrößerte Logo) */
    gap: 24px;
}

/* Logo-Bereich */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 64px; width: auto; display: block; } /* Breite passt sich automatisch an */

/* Navigationslinks */
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;             /* Abstand zwischen den Punkten */
}

.nav-links a:not(.btn) {   /* normale Links (ohne .btn-Klasse) */
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    opacity: 0.85;                          /* normal etwas gedimmt */
    transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-links a:not(.btn):hover { opacity: 1; }          /* bei Hover volle Intensität */
.nav-links a.active:not(.btn) { color: var(--blue); opacity: 1; font-weight: 600; } /* aktiver Punkt blau + fett (wird per JS umgeschaltet); :not(.btn) schließt den Login-/Dashboard-Button aus, sonst wäre dessen Schrift blau auf blau */

/* --- Hamburger-Button (nur mobil sichtbar) --- */

.nav-toggle {
    display: none;         /* auf Desktop ausgeblendet … */
    flex-direction: column; /* … 3 Linien übereinander (im Media-Query sichtbar) */
    justify-content: center;
    gap: 5px;              /* Abstand der 3 Linien */
    background: none;
    border: 0;
    padding: 10px;         /* größere Klickfläche */
    cursor: pointer;
    z-index: 60;           /* über dem Menü-Panel, damit er klickbar bleibt */
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animation zur "X"-Form */
}

/* Wenn das Menü offen ist (Klasse am <body>):
   obere + untere Linie drehen sich zur X-Form, mittlere verschwindet */
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   7. FLASH-MELDUNGEN (einmalige Hinweise, z. B. "abgemeldet")
   ------------------------------------------------------------ */

.flash-wrap {
    position: fixed;            /* ZENTRIERT in der Mitte des Fensters –
                                   schwebt über der Seite, unabhängig vom
                                   Scrollen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* exakte Fenstermitte */
    z-index: 200;               /* über Navigation (50), unter Toasts (300) */
    width: max-content;
    max-width: 92vw;            /* läuft nie über den Screen hinaus */
    padding: 0;
}

.flash {
    border-radius: var(--radius-sm);
    padding: 26px 38px;         /* größere Box (war 18px 26px), da solo in der Mitte */
    font-size: 18px;            /* war 15px – besser lesbar */
    font-weight: 700;           /* fett – der Hinweis soll sofort auffallen */
    text-align: center;
    box-shadow: var(--shadow-lg); /* Schweb-Effekt über dem Seiteninhalt */
}

/* Info (blau) – z. B. "Bitte melden Sie sich an" */
/* Textfarben bewusst dunkler (besserer Kontrast auf den hellen Hintergründen) */
.flash-info    { background: var(--blue-tint); color: rgba(0, 51, 122, 1); border: 1px solid rgba(207, 228, 255, 1); }
/* Erfolg (grün) */
.flash-success { background: rgba(234, 250, 239, 1); color: rgba(11, 84, 36, 1); border: 1px solid rgba(191, 232, 203, 1); }
/* Fehler (rot) */
.flash-error   { background: rgba(253, 236, 236, 1); color: rgba(145, 22, 16, 1); border: 1px solid rgba(245, 198, 196, 1); }

/* ------------------------------------------------------------
   8. SEKTIONEN & TITEL (Seitenbaukästen)
   ------------------------------------------------------------ */

.section { padding: 88px 0; }        /* großzügiger Vertikal-Abstand (Apple-Optik) */
.section-alt { background: var(--bg); } /* abwechselnd hellgraue Sektion */

/* Großer Seitentitel */
.page-title {
    font-size: clamp(2rem, 4.5vw, 3rem); /* skaliert mit der Fensterbreite: min 2rem, ideal 4,5vw, max 3rem */
    font-weight: 700;
    letter-spacing: -0.02em;  /* leicht negativer Buchstabenabstand => "kompakte" moderne Typo */
    line-height: 1.1;
    margin: 0 0 16px;
}

/* Einleitungstext unter einem Titel: zusätzlichen Abstand nach unten */
.section-sub { margin-bottom: 48px; }

/* Zentrierter Sektions-Titel (z. B. "Unsere Leistungen") */
.section-title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 28px;
}

/* Fließtext (Lead-Paragraph) */
.lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-2);
    max-width: 820px;    /* Leselänge begrenzen */
}

.lead-center { margin-left: auto; margin-right: auto; text-align: center; } /* zentrierte Variante */
.lead-center + .lead-center { margin-top: 16px; } /* Abstand, wenn zwei hintereinander stehen */

/* Hilfsklassen */
.muted { color: var(--text-3); }  /* gedimmter Text */
.small { font-size: 13px; }       /* kleiner Text */

/* ------------------------------------------------------------
   9. HERO (Startseiten-Bereich mit blauem Verlauf)
   ------------------------------------------------------------ */

.hero {
    position: relative;
    padding: 120px 0 110px;   /* sehr großzügig => "Premium-Gefühl" */
    text-align: center;
    color: rgba(255, 255, 255, 1);
    /* Zwei überlagerte Verläufe:
       1) radiales Licht oben rechts (Weiß, dezent)
       2) diagonaler Blau-Verlauf von hell nach dunkel */
    background:
        radial-gradient(1200px 500px at 70% -10%, rgba(255, 255, 255, 0.22), transparent 60%),
        linear-gradient(160deg, var(--blue-bright) 0%, rgba(10, 108, 245, 1) 45%, rgba(0, 71, 200, 1) 100%);
    overflow: hidden;
}

/* Kleines "Augenbraue"-Badge über der Headline */
.hero-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);       /* halbtransparente weiße Fläche */
    border: 1px solid rgba(255, 255, 255, 0.28); /* dezenter Rahmen */
    padding: 8px 18px;
    border-radius: 980px;                          /* Pille */
    font-size: 14px;
    letter-spacing: 0.04em;                        /* leicht versetzt */
    margin: 0 0 30px;
}

/* Riesige Headline */
.hero-title {
    font-size: clamp(3rem, 8vw, 5.5rem); /* wächst mit dem Screen, max. 5,5rem */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
}

/* Unterzeile der Hero */
.hero-sub {
    max-width: 720px;
    margin: 26px auto 42px;   /* zentriert */
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92); /* fast weiß */
}

/* Buttons in der Hero (Reihe, bricht bei wenig Platz um) */
.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ------------------------------------------------------------
   10. STATISTIK-KARTEN (100 % / 14 Tage / 0 € / 2007)
   ------------------------------------------------------------ */

.stats {
    display: grid;
    /* 4 Spalten, bei wenig Breite stapeln sich Karten automatisch
       (min. 200 px pro Karte) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 56px;
}

.stat-card {
    background: rgba(255, 255, 255, 1);             /* weiß, hebt sich auf dem grauen Sektions-Hintergrund ab */
    border-radius: var(--radius-lg);
    padding: 34px 24px;
    text-align: center;
    box-shadow: var(--shadow);    /* dezenter Schatten (wie bei den Schritt-Karten) */
}

/* Große Zahl */
.stat-value {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--blue);
    line-height: 1.1;
}

/* Beschriftung unter der Zahl */
.stat-label {
    color: var(--text-3);
    font-size: 14px;
    margin-top: 8px;
}

/* ------------------------------------------------------------
   11. CTA-BAND (blauer Handlungsaufruf unterhalb der Startseite)
   ------------------------------------------------------------ */

.cta-band {
    padding: 96px 0;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    /* Spieglender Verlauf zur Hero (dunkel oben, hell unten) + Lichteffekt */
    background:
        radial-gradient(900px 420px at 30% -20%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(0, 71, 200, 1) 0%, rgba(10, 108, 245, 1) 60%, var(--blue-bright) 100%);
}

.cta-band h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.cta-band p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.92);
}

/* Checkliste im CTA-Band */
.cta-list {
    list-style: none;           /* Browser-Punkte aus */
    max-width: 620px;
    margin: 30px auto 42px;
    padding: 0;
    display: flex;
    flex-direction: column;     /* Punkte untereinander */
    gap: 12px;
}

.cta-list li {
    position: relative;         /* Anker für das Check-Symbol */
    padding-left: 32px;         /* Platz für das Symbol */
    color: rgba(255, 255, 255, 0.95);
    font-size: 15.5px;
}

/* Rundes Häkchen-Symbol links vom Text (via Pseudo-Element) */
.cta-list li::before {
    content: "\2713";           /* Unicode-Zeichen: Häkchen */
    position: absolute;
    left: 0;
    top: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------
   12. SCHRITTE (Vorteile-Seite: 1/2/3)
   ------------------------------------------------------------ */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 Karten, stapeln bei wenig Platz */
    gap: 24px;
    margin-top: 8px;
}

/* Einzelne Schritt-Karte */
.step-card {
    background: rgba(255, 255, 255, 1);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover-Animation */
}

/* Karte hebt sich leicht bei Hover */
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.step-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 14px;
}

.step-card p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0 0 12px;
}

.step-card p:last-child { margin-bottom: 0; } /* letzter Text braucht keinen Abstand mehr */

/* Runde blaue Ziffern-Medaille (1/2/3) */
.step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.35); /* blauer Schweb-Schatten */
}

/* ------------------------------------------------------------
   13. KONTAKT (Formular + Adress-Karte)
   ------------------------------------------------------------ */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Formular breiter als die Info-Karte */
    gap: 32px;
    align-items: start;                /* beide Spalten oben ausrichten */
}

/* Generische weiße Karte */
.card {
    background: rgba(255, 255, 255, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.contact-form { padding: 40px 36px; }

/* Karten-Titel innerhalb des Formulars („Meine Daten"-Seite) */
.contact-form h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 18px;
}

/* Zwei Felder nebeneinander (Telefon/Fax) */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field { margin-bottom: 18px; } /* Abstand zwischen den Formulardreieck-Blöcken */

.field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

/* Eingabefelder – select (Dropdowns, z. B. im Forderungsantrag,
   s. pages/jobs.php) bekommt exakt denselben Look wie input/textarea */
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;          /* >= 16px verhindert Zoom-Verhalten auf iOS */
    color: var(--text);
    background: rgba(255, 255, 255, 1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;         /* Textarea nur vertikal veränderbar */
}

/* Dropdowns (select) exakt wie die Textfelder aussehen lassen:
   - appearance: none  = Browser-eigene Optik (graue Box, eigener
     Pfeil, andere Höhe) vollständig entfernen
   - eigener Pfeil als inline-SVG im Hintergrund (Grauton
     rgba(110, 110, 115, 1) = identisch zum Grau der
     Abschnitts-Titel, s. .form-section h4)
   - padding-right: 44px = Platz für den Pfeil, damit der Text
     nicht darunter läuft
   - cursor: pointer = Hand-Zeiger wie bei klickbaren Elementen */
.field select {
    -webkit-appearance: none;   /* Safari/Chrome */
    -moz-appearance: none;      /* Firefox */
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(110, 110, 115, 1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* Fokus: blauer Rahmen + weicher "Glow" (Apple-typisch) */
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16);
}

/* Checkbox-Zeile (Datenschutz) */
.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;  /* Checkbox oben am Text ausrichten */
    font-size: 14px;
    color: var(--text-2);
    margin: 6px 0 16px;
    cursor: pointer;
}

.check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--blue); /* blaue Haken statt Systemfarbe */
    flex-shrink: 0;
}

/* Kleiner Hinweis (Pflichtfelder etc.) */
.form-note {
    font-size: 12px;
    color: var(--text-3);
    margin: -6px 0 16px;
}

/* Formular-Abschnitt mit Trennlinie oben (z. B. "Bankverbindung"
   im Filialen-Formular): setzt den Block optisch vom restlichen
   Formular ab. Der Titel ist klein, in Grossbuchstaben und grau -
   wie die Beschriftungen der Kontakt-Info-Karte. */
.form-section {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(210, 210, 215, 1); /* dezente Trennlinie */
}

.form-section h4 {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(110, 110, 115, 1);
}

/* Roter Fehler-Info-Box (wird per JS befüllt/eingeblendet) */
.form-error {
    background: rgba(253, 236, 236, 1);
    border: 1px solid rgba(245, 198, 196, 1);
    color: rgba(179, 38, 30, 1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar,
   links aus dem Screen geschoben */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Adress-Karte (rechte Spalte) */
.contact-card { padding: 36px 32px; }
.contact-card h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 14px;
}

/* Beschriftungen (Telefon/Fax/E-Mail) in kleinen Großbuchstaben */
.contact-list dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-top: 16px;
}

.contact-list dd {
    margin: 2px 0 0;
    font-size: 15px;
}

.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   14. AUTH (Login / Registrierung / Passwort-Reset)
   ------------------------------------------------------------ */

.auth-section { background: var(--bg); } /* hellgrauer Hintergrund hinter der Karte */

/* Zentrale weiße Karte */
/* Größere Karte – mehr
   Luft um Titel, Tabs und Formular. Die Zwei-Tab-Seite „Filialen & Benutzer"
   (.company-card, Abschnitt 24) setzt Breite + Padding
   selbst und bleibt dadurch unverändert. */
.auth-card {
    max-width: 540px;
    margin: 48px auto 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 28px;
    padding: 56px 48px 44px;
    box-shadow: var(--shadow-lg);
}

/* Kopf der Karte (Logo + Titel) */
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-logo { margin-bottom: 6px; }
.auth-logo img { height: 47px; width: auto; }

.auth-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 14px 0 8px;
}

.auth-head .muted { font-size: 14.5px; line-height: 1.55; }

/* Umschalter "Anmelden / Passwort vergessen?" (Segment-Control) */
.auth-tabs {
    display: flex;
    background: var(--line-soft); /* graue "Schiene" hinter den Tabs */
    border-radius: 980px;
    padding: 4px;
    margin-bottom: 28px;
}

.auth-tab {
    flex: 1;                        /* beide Tabs gleich breit */
    border: 0;
    background: transparent;
    padding: 10px 14px;
    border-radius: 980px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Aktiver Tab: weiß, blau, mit Schatten (wie ein Schieberegler) */
.auth-tab.active {
    background: rgba(255, 255, 255, 1);
    color: var(--blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Nur das aktive Formular zeigen (JS schaltet .active um) */
.auth-form { display: none; }
.auth-form.active {
    display: block;
    animation: fadeUp 0.35s ease; /* sanftes Einblenden beim Umschalten */
}

/* Fußzeile "Noch keinen Zugang? …" */
.auth-alt {
    text-align: center;
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--text-3);
}

.auth-alt a { font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   15. DASHBOARD ("Mein Bereich")
   ------------------------------------------------------------ */

.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; /* Titel links, Abmelden rechts */
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.dash-head .lead { margin: 0; }

/* Karten-Raster im Dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* position: relative = Anker für den "Bearbeiten"-Button in der
   Ecke. Der stärkere Selektor (.card.dash-card, Spez. 0,2,0) stellt
   sicher, dass der Hover-Effekt nicht von der .reveal-Klasse
   (Abschnitt 19, Spez. 0,1,0) überschrieben wird */
.card.dash-card {
    position: relative;
    padding: 34px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover-Animation */
}

/* Kachel hebt sich bei Hover + stärkerer Schatten – derselbe Effekt
   wie bei den Karten der Vorteile-Seite (.step-card) */
.card.dash-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* "Bearbeiten"-Button: das AUSSEHEN kommt aus den Standard-
   Button-Klassen (.btn .btn-primary .btn-sm – exakt wie der blaue
   "Mein Bereich"- / "Kontaktformular"-Button; s. dashboard.php).
   Hier nur die Erscheins-Mechanik: standardmäßig unsichtbar,
   gleitet bei Hover über die Kachel von oben rein, bleibt
   sichtbar bei Fokus (Touch-Geräte, Tastatur). Position: obere
   rechte Ecke der Kachel */
.dash-edit {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: 0;                    /* unsichtbar */
    transform: translateY(-6px);   /* Startposition des rein-Gleitens */
    /* opacity/transform fürs Gleiten + die Hover-Farben der
       .btn-Klassen (Shorthand ersetzt die Transition aus .btn) */
    transition: opacity 0.25s ease, transform 0.25s ease,
                background 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}
.card.dash-card:hover .dash-edit,
.dash-edit:focus {                 /* sichtbar bei Hover oder Fokus */
    opacity: 1;
    transform: translateY(0);
}

.dash-card h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 12px;
}

.dash-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 10px;
}

.dash-card p:last-child { margin-bottom: 0; }

/* Emoji-Icon über dem Kartentitel */
.dash-icon { font-size: 34px; margin-bottom: 14px; line-height: 1; }

/* ------------------------------------------------------------
   16. RECHTLICHES (Impressum / Datenschutz)
   ------------------------------------------------------------ */

.legal-card {
    background: rgba(255, 255, 255, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 44px 40px;
}

/* Abschnittstitel (z. B. "1. Name und Kontaktdaten …") */
.legal-card h2 {
    font-size: 19px;
    font-weight: 600;
    margin: 34px 0 12px;
}

.legal-card h2:first-of-type { margin-top: 0; } /* erster Titel ohne Abstand oben */

/* Untertitel (2.1, 2.2, …) */
.legal-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 26px 0 10px;
    color: var(--text);
}

.legal-card p {
    font-size: 15px;
    line-height: 1.75;      /* viel Zeilenabstand => lange Texte lesbar */
    color: var(--text-2);
    margin: 0 0 14px;
}

.legal-card ul {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0 0 14px;
    padding-left: 22px;
}

.legal-card li { margin-bottom: 8px; }
.legal-card li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------ */

.footer {
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 1);
    padding: 44px 0 52px;
}

.footer-inner {
    display: flex;
    flex-direction: column; /* Logo, Links, Copyright untereinander */
    align-items: center;
    gap: 14px;
}

.footer-logo { height: 30px; width: auto; } /* kleines Logo */

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;         /* 10px vertikal, 22px horizontal */
}

.footer-links a {
    font-size: 13px;
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--blue); }

.footer-copy {
    font-size: 12px;
    color: rgba(134, 134, 139, 1);
    margin: 0;
}

/* ------------------------------------------------------------
   18. TOASTS (kurze Pop-up-Hinweise, erzeugt per JS) –
    schweben ZENTRIERT in der Mitte des Fensters
   ------------------------------------------------------------ */

/* Meldungs-Backdrop (Frosted-Glass-Schleier): Sobald eine
   Toast- oder Flash-Meldung in der Mitte steht, legt main.js
   dieses unsichtbare Vollbild-Element über die Seite – es
   macht den Seiteninhalt unscharf (blur) und leicht milchig,
   während die Meldung selbst scharf darüber liegt.
   Z-Index-Reihenfolge: Navbar 50 < Backdrop 150
   < Flash 200 < Toast 300.
   pointer-events: none = reines Sicht-Effekt: die Seite bleibt
   dahinter klickbar. (Soll die Seite während der Meldung
   geblockt werden: einfach "auto" setzen.) */
#message-backdrop {
    position: fixed;
    inset: 0;                                /* deckt das ganze Fenster ab */
    z-index: 150;                            /* über der Seite, unter den Meldungen */
    background: rgba(255, 255, 255, 0.35);   /* milchiger Weiß-Schleier */
    -webkit-backdrop-filter: blur(8px);      /* Frosted Glass (Safari) */
    backdrop-filter: blur(8px);              /* Frosted Glass (Chrome/Firefox) */
    opacity: 0;                              /* Standard: unsichtbar */
    pointer-events: none;                    /* blockt nie die Bedienung */
    transition: opacity 0.35s ease;          /* sanftes Ein-/Ausblenden */
}

/* JS schaltet die Klasse .on um, sobald eine Meldung läuft */
#message-backdrop.on { opacity: 1; }

#toast-wrap {
    position: fixed;             /* immer an derselben Bildschirm-Position */
    top: 50%;  /* ZENTRIERT in der Mitte des Fensters (statt unten am Rand) */
    left: 50%;
    transform: translate(-50%, -50%); /* exakte Fenstermitte */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 300;                /* über allem */
    width: max-content;
    max-width: 92vw;             /* läuft nie über den Screen hinaus */
}

.toast {
    background: rgba(29, 29, 31, 0.94); /* dunkle, halbtransparente Karte */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 1);
    padding: 26px 38px;         /* gleiche Größe wie die Flash-Meldungen */
    border-radius: var(--radius-sm); /* wie .flash – abgerundete Karte statt Pille */
    font-size: 18px;            /* wie .flash – gut lesbar */
    font-weight: 700;           /* wie .flash – Text fett */
    text-align: center;
    box-shadow: var(--shadow-lg); /* wie .flash – Schweb-Effekt über dem Seiteninhalt */
    opacity: 0;                    /* Start: unsichtbar … */
    transform: translateY(12px);   /* … und leicht nach unten verschoben */
    transition: opacity 0.8s ease, transform 0.8s ease; /* sanftes Ein- UND Ausblenden (0,8 s, wie bei den Flash-Meldungen) */
    max-width: 100%;
}

.toast.show { opacity: 1; transform: none; } /* JS schaltet .show ein => einblenden */

/* Farbakzent (Rahmen) je nach Art der Meldung */
.toast-success { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.55); } /* grün */
.toast-error   { box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.6); }   /* rot */

/* ------------------------------------------------------------
   19. ANIMATIONEN
   ------------------------------------------------------------ */

/* "Reveal": Elemente erscheinen beim Scrollen (JS + IntersectionObserver
   schaltet die Klasse .in zu, sobald das Element sichtbar wird) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); /* Apple-artige Easing-Kurve */
}

.reveal.in {
    opacity: 0.97;
    transform: none;
}

/* Keyframes für das Einblenden der Auth-Formulare (Tab-Umschaltung) */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Barrierefreiheit: wer "Bewegung reduzieren" im System aktiviert hat,
   bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .auth-form.active { animation: none; }
}

/* ------------------------------------------------------------
   20. RESPONSIVE (Tablet: <= 900 px)
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    /* Sektionen etwas kompakter */
    .section { padding: 64px 0; }

    /* Hero etwas kleiner */
    .hero { padding: 92px 0 84px; }

    /* Hamburger-Button jetzt sichtbar */
    .nav-toggle { display: flex; }

    /* Navigationslinks werden zum Vollbild-Panel, das von oben
       reinscrollt (transform: -110% => versteckt, 0 => offen) */
    .nav-links {
        position: fixed;
        inset: 0 0 auto 0;
        top: 0;
        padding: 104px 24px 40px;  /* oben so viel Platz, dass es unter der Nav-Leiste (92px) ansetzt */
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        flex-direction: column;    /* Punkte jetzt untereinander */
        align-items: center;
        gap: 26px;
        transform: translateY(-110%);  /* Ausgang: komplett über dem Screen */
        transition: transform 0.35s ease;
        z-index: 40;
    }

    .nav-links a:not(.btn) { font-size: 18px; }  /* größer auf dem Touch-Display */
    .nav-login-btn { width: 220px; }             /* Button im Panel mit fester Breite */

    body.nav-open .nav-links { transform: translateY(0); } /* Menü offen (Klasse am body, per JS) */

    /* Kontakt: Formular und Info-Karte jetzt untereinander */
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 30px 24px; }
    .contact-card { padding: 30px 24px; }
    .legal-card { padding: 32px 24px; }
    .auth-card { padding: 40px 26px 32px; margin-top: 28px; }

    .dash-head { align-items: flex-start; } /* Titel + Button oben bündig */
}

/* ------------------------------------------------------------
   21. RESPONSIVE (Smartphone: <= 640 px)
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    /* Top-Bar aufräumen: nur Telefon + Login-Link */
    .topbar-sep,
    .topbar-address,
    .topbar-date { display: none; }

    .topbar-inner { justify-content: space-between; }

    /* Telefonsymbol: die Basis-Regel (Abschnitt 5, top: -2px,
       font-size: 1.8em) gilt hier unverändert weiter – eine
       eigene mobile Regel wäre redundant gewesen */

    /* Nav-Leiste auf dem Handy wieder kompakter */
    .navbar-inner { height: 78px; }

    /* Logo mobileproportional (1,6x vom alten 34px) */
    .brand img { height: 54px; }

    /* Hero-Buttons: volle Breite, einzeln untereinander */
    .hero-actions .btn { width: 100%; max-width: 340px; }

    /* Formular-Zeilen (Telefon/Fax) stapeln */
    .field-row { grid-template-columns: 1fr; gap: 0; }

    /* Statistik-Zahlen kleiner */
    .stat-value { font-size: 36px; }
}

/* ------------------------------------------------------------
   22. USERS (Benutzerverwaltung, ?r=stores_users, Tab „Benutzer")
   ------------------------------------------------------------
   Kachel-Ansicht der Benutzerverwaltung: eine Kachel pro
   Benutzer + „Anlegen"-Kachel, dazu die Anlege-/Bearbeitungs-
   formular-Karte. Alle NEUEN Farben bewusst als rgba()-Werte.
   ------------------------------------------------------------ */

/* Kachel-Raster: wie das Dashboard-Grid, passt sich der
   Bildschirmbreite an (mind. 280 px pro Kachel) */
.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

/* Eine Benutzer-Kachel: weiße Karte mit weichen Ecken und
   Schatten (Card-Look der restlichen Website) */
.user-tile {
    display: flex;
    flex-direction: column;      /* Inhalt von oben nach unten */
    padding: 28px 26px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(210, 210, 215, 1);  /* dezenter grauer Rand */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover: Kachel hebt sich leicht an (wie die Dashboard-Karten) */
.user-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Inaktives Konto: gedämpfter Look (grauer Hintergrund, grau Avatar) */
.user-tile.is-inactive { background: rgba(245, 245, 247, 1); }
.user-tile.is-inactive .user-avatar {
    background: rgba(120, 120, 128, 0.18);
    color: rgba(120, 120, 128, 1);
}

/* Kopfzeile der Kachel: Avatar links, Rollen-Badge rechts */
.user-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Rund-Avatar mit dem ersten Buchstaben des Benutzernamen
   (helles Blau-Grund mit blauem Buchstaben) */
.user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.14);
    color: rgba(0, 80, 180, 1);
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Rollen-Badge (Pille) – zwei Varianten: Hauptbenutzer / Benutzer */
.user-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 980px;
    white-space: nowrap;
}

/* Hauptbenutzer: bläuliches Badge */
.user-badge-main {
    background: rgba(0, 113, 227, 0.14);
    color: rgba(0, 80, 180, 1);
}

/* Normaler Benutzer: graues Badge */
.user-badge-regular {
    background: rgba(60, 60, 67, 0.10);
    color: rgba(60, 60, 67, 1);
}

/* Kachel-Titel (Benutzername) */
.user-tile h3 {
    margin: 14px 0 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Vor- + Nachname unter dem Benutzernamen (nur sichtbar, wenn
   der Benutzer einen Namen hat – s. pages/stores_users.php). Etwas
   gedämpft (0.75), damit der Benutzername den Titel bleibt */
.user-tile .user-name {
    margin: 0 0 2px;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(60, 60, 67, 0.75);
}

/* E-Mail-Zeile unter dem Namen */
.user-tile .user-email {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: rgba(60, 60, 67, 1);
    word-break: break-all;   /* lange E-Mails dürfen umgebrochen werden */
}

/* Info-Zeilen (Status / Registriert / Letzter Login / Firma) */
.user-tile .user-meta {
    margin: 0 0 4px;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(60, 60, 67, 1);
}

/* Status-Farbgebung: aktiv = Grün, inaktiv = Rot */
.user-status-active   { color: rgba(40, 145, 60, 1);  font-weight: 600; }
.user-status-inactive { color: rgba(210, 65, 45, 1);  font-weight: 600; }

/* Button-Zeile am Kachel-Boden (margin-top: auto drückt sie
   nach unten, damit alle Kacheln die Buttons auf gleicher
   Höhe tragen, egal wie lang der Text darüber ist) */
.user-tile-actions {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Buttons in den Kacheln etwas kompakter */
.user-tile-actions .btn { padding: 10px 20px; font-size: 14px; }

/* Gefahren-Button (Löschen) – rote Variante von .btn */
.btn-danger { background: rgba(220, 53, 45, 1); color: rgba(255, 255, 255, 1); }
.btn-danger:hover {
    background: rgba(235, 65, 55, 1);               /* etwas heller bei Hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 15px rgba(220, 53, 45, 0.35); /* roter Schweb-Schatten */
}

/* „Benutzer anlegen"-Kachel: gestrichelte Umrandung =
   Platzhalter-Look, klickbar (JS öffnet das leere Formular) */
.user-add-tile {
    text-align: center;
    cursor: pointer;
    background: rgba(234, 243, 255, 0.55);           /* sehr helles Blau */
    border: 2px dashed rgba(0, 113, 227, 0.45);      /* gestrichelte blaue Linie */
    color: rgba(29, 29, 31, 1);
}

.user-add-tile:hover {
    background: rgba(234, 243, 255, 1);
    border-color: rgba(0, 113, 227, 1);
}

/* Das „+"-Avatar in der Anlege-Kachel: volles Blau mit weißem Plus */
.user-add-tile .user-avatar {
    margin: 8px auto 0;
    background: rgba(0, 113, 227, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
}

/* WORKSPACE: EINES Grid, EINE Spalte (volle Breite), ZWEI
   Zustände – die Elemente stehen untereinander:
     GESCHLOSSEN: Info-Karte (alleine – das Formular ist
                  ausgeblendet).
     OFFEN:       Info-Karte (oben, volle Breite),
                  Formular (darunter, volle Breite).
   Das ausgeblendete Element ist display:none (s. unten) und
   wird daher NICHT im Grid platziert – das verbleibende
   Element rückt automatisch an den Anfang.
   align-items: start = Karten oben bündig.
   Hinweis: Die „Benutzer anlegen“-Kachel steht NICHT im
   Workspace, sondern ZULETZT im Kachel-Raster (.user-grid
   unten, id="user-create-tile"). */
.user-workspace {
    display: grid;
    grid-template-columns: 1fr;      /* volle Breite, eine Spalte */
    gap: 24px;
    align-items: start;
}

/* Formular-Karte: direktes Kind des Workspaces – wenn sie
   offen ist (hidden entfernt), steht sie in voller Breite
   UNTER der Info-Karte (beide volle
   Breite, Reihenfolge per CSS-Order).
   margin-top: 0 – kein zusätzlicher Abstand nach oben
   (früher: 36 px, weil das Formular unter der oberen
   Zeile lag). */
.user-form-wrap { margin-top: 0; }

/* Info-Kachel: kurze Erklärung – wird auf der Seite
   ?r=company auf BEIDEN Tabs benutzt:
   .user-info-card   = „Benutzer & Rechte“ (Tab Benutzer)
   .store-info-card  = „Filialen & Zuordnung“ (Tab Filiale)
   Beide teilen sich die Optik (weiß, Rand, Schatten).
   Steht im Workspace in voller Breite (eine Spalte).
   order: -1 = die Info-Karte wird IMMER ERST gerendert (oben),
   das offene Formular DARUNTER – order übersteuert die
   DOM-Reihenfolge (im HTML steht das Formular vor der
   Info-Karte, damit beide in der richtigen DOM-Reihenfolge
   für die JS-Logik bleiben).
   .store-info-card braucht KEIN order: im Filial-Bereich steht
   die Info-Kachel in der DOM-Reihenfolge ohnehin zuerst (vor
   dem Formular) – order: -1 wirkt dort nicht mit. */
.user-info-card,
.store-info-card {
    padding: 32px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(210, 210, 215, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(60, 60, 67, 1);
    order: -1;    /* IMMER OBEN im Workspace, das Formular darunter */
}

/* Titel der Info-Kachel */
.user-info-card h3,
.store-info-card h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(29, 29, 31, 1);
}

/* Liste in der Info-Kachel: etwas engerer Zeilenabstand */
.user-info-card ul, .store-info-card ul { margin: 0; padding-left: 20px; }
.user-info-card li, .store-info-card li { margin-bottom: 10px; }
.user-info-card li:last-child,
.store-info-card li:last-child { margin-bottom: 0; }

/* Abstand UNTER der Filial-Info-Kachel: Im Filial-Bereich steht
   sie im normalen Blockfluss (kein Grid wie der Benutzer-Workspace),
   margin-bottom erzeugt die Lücke zum Hinweis/Formular darunter */
.store-info-card { margin-bottom: 24px; }
.user-form-wrap[hidden] { display: none; }           /* hidden-Attribute sicher stellen */
.user-form-wrap .contact-form { padding: 32px; }

/* Formular-Titel ("Benutzer anlegen" / "Benutzer bearbeiten: X") */
.user-form-wrap h3 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Stammdaten (Firma) – Seite ?r=company
   ============================================================
   Die Kachel-Klassen (.company-tile, .company-avatar, …) werden
   hier NUR noch von der Filial-Seite (stores_users.php) benutzt.
   Die eigene Firmen-Kachel der Seite ?r=company ist entfernt
   worden (Übersicht steht jetzt im Dashboard) – es gibt dort
   nur noch das immer sichtbare Bearbeitungs-Formular. */

/* hidden-Attribute von Kacheln mit .company-tile sicherstellen
   (heute nur noch die Filial-Seite stores_users.php):
   .company-tile setzt "display: flex", das hat VORRANG vor
   der Browser-Grundregel [hidden] { display: none } – ohne
   diese Regel würde sich eine versteckte Kachel NICHT
   ausblenden (wie .user-form-wrap[hidden]) */
.company-tile[hidden] { display: none; }

/* Button-Zeile im Formular: Speichern + Abbrechen nebeneinander */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Trennstrich innerhalb der Kachel-Metazeilen (Filiale-Tab):
   setzt die Bankverbindung von den uebrigen Infos ab */
.company-meta .meta-divider {
    display: block;
    border-top: 1px solid rgba(210, 210, 215, 1);
    margin: 10px 0;
}

/* Hinweis-Text in der Leer-Ansicht (noch kein Benutzer) */
.user-empty-hint {
    margin-top: 32px;
    font-size: 15.5px;
    color: rgba(60, 60, 67, 1);
}

/* Zugang-Verweigerungs-Box (nicht-Hauptbenutzer ruft ?r=stores_users direkt auf) */
.user-denied {
    margin-top: 36px;
    padding: 32px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(210, 210, 215, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    font-size: 15.5px;
    color: rgba(60, 60, 67, 1);
}

.user-denied strong { color: rgba(29, 29, 31, 1); }

/* ------------------------------------------------------------
   23. STAMMDATEN (FIRMA) (Firmen-Kachel, ?r=company)
   ------------------------------------------------------------
   Firmen-Kacheln im EXAKTELEN Look der Benutzer-Kacheln
   (Abschnitt 22) – beide Grids sollen sich optisch wie
   Geschwister anfühlen. Alle Farben wieder als rgba()-Werte.
   ------------------------------------------------------------ */

/* Firmendaten-Formular: Karten-Rahmen + Titel wie beim
   Benutzer-Formular */
.company-form-card { margin-top: 36px; }
.company-form-card h3 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Kachel-Raster: identisch zum Benutzer-Raster
   (mind. 280 px pro Kachel, passt sich der Breite an) */
.company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

/* Eine Firmen-Kachel: gleicher Card-Look wie .user-tile */
.company-tile {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(210, 210, 215, 1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover: Kachel hebt sich leicht an (wie alle anderen Karten) */
.company-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Rund-Avatar mit dem ersten Buchstaben des Firmennamens
   (helles Blau-Grund mit blauem Buchstaben) */
.company-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.14);
    color: rgba(0, 80, 180, 1);
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Rollen-Badge (hier nur eine Variante: „Firma“ – blau) */
.company-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 980px;
    white-space: nowrap;
    background: rgba(0, 113, 227, 0.14);
    color: rgba(0, 80, 180, 1);
}

/* Kachel-Titel (Firmenname) */
.company-tile h3 {
    margin: 14px 0 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Adress-/Kontakt-Zeilen in der Kachel */
.company-tile .company-meta {
    margin: 0 0 4px;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(60, 60, 67, 1);
}

/* „Informationen“ als zwei-zeiliger Ausschnitt (line-clamp):
   mehrzeiliger Text wird nach zwei Zeilen mit Ellipse gestutzt */
.company-tile .company-snippet {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(232, 232, 237, 1); /* weiche Trennlinie */
    font-size: 13px;
    line-height: 1.6;
    color: rgba(110, 110, 115, 1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button-Zeile am Kachel-Boden (margin-top: auto drückt sie
   nach unten – gleiche Höhe in allen Kacheln) */
.company-tile-actions {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Buttons in den Kacheln etwas kompakter */
.company-tile-actions .btn { padding: 10px 20px; font-size: 14px; }

/* „Firma anlegen"-Kachel: gestrichelte Umrandung =
   Platzhalter-Look, klickbar (JS leert das Formular) */
.company-add-tile {
    text-align: center;
    cursor: pointer;
    background: rgba(234, 243, 255, 0.55); /* sehr helles Blau */
    border: 2px dashed rgba(0, 113, 227, 0.45); /* gestrichelte blaue Linie */
    color: rgba(29, 29, 31, 1);
}

.company-add-tile:hover {
    background: rgba(234, 243, 255, 1);
    border-color: rgba(0, 113, 227, 1);
}

/* Das „+"-Avatar in der Anlege-Kachel: volles Blau mit weißem Plus */
.company-add-tile .company-avatar {
    margin: 8px auto 0;
    background: rgba(0, 113, 227, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
}

/* ------------------------------------------------------------
   24. FILIALEN & BENUTZER (Zwei-Tab-Box, ?r=stores_users)
   ------------------------------------------------------------
   Die Seite nutzt die Tab-Mechanik des Login-Bereichs
   (.auth-tabs / .auth-tab / .auth-form, s. Abschnitt 14) –
   hier nur die Anpassungen, damit die schmale weiße
   Login-Karte (max. 480 px) als volle Breit-Karte für
   Formular + Kacheln funktioniert. Alle Farben rgba().
   ------------------------------------------------------------ */

/* Tab-Karte: .auth-card (max. 480 px, zentriert, großes
   Padding) auf volle Breite ausweiden + kompakteres Padding,
   damit Formular UND Kacheln Platz haben */
.company-card {
    max-width: none;
    margin: 36px 0 0;
    padding: 32px;
}

/* Weniger Abstand zwischen Tab-Schiene und Panel */
.company-card .auth-tabs { margin-bottom: 24px; }

/* Tab-Buttons etwas schmaler (2 Panels, keine 480px-Breite) */
.company-card .auth-tab { font-size: 15.5px; padding: 11px 22px; }

/* Kachel-Raster innerhalb der Tabs: engerer Abstand oben
   (über den Kacheln sitzt das Formular, nicht der Seitentitel) */
.company-card .company-grid { margin-top: 24px; }

/* Formular-Titel in beiden Tabs (Firma + Filiale) */
.company-card h3 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Filiale-Formular: Wrapper mit hellem Grau-Grund (hebt sich
   auf der weißen Tab-Karte ab), Card-Optik mit weichen Ecken */
.store-form-wrap { margin-top: 0; }
.store-form-wrap[hidden] { display: none; }   /* hidden sicherstellen */
.store-form-wrap .contact-form {
    padding: 28px 26px;
    background: rgba(245, 245, 247, 0.6);
    border: 1px solid rgba(210, 210, 215, 1);
    border-radius: var(--radius-lg);
}

/* Hinweis-/Info-Box im Filiale-Tab: etwas Abstand nach oben */
#store-form .user-empty-hint { margin-top: 0; margin-bottom: 20px; }

/* ------------------------------------------------------------
   25. TASTATUR-FOKUS (Barrierefreiheit)
   ------------------------------------------------------------ */

/* Sichtbarer Fokus-Ring NUR bei Tastatur-Navigation (Tab-Taste):
   :focus-visible greift bei Maus-Klicks nicht, der Ring stört
   also nie beim normalen Klicken. Wichtig, weil viele Stellen
   ihr Standard-outline entfernen und Buttons/Links sonst bei
   der Tastatur-Navigation ohne sichtbaren Indikator blieben */
.btn:focus-visible,
a:focus-visible,
.auth-tab:focus-visible {
    outline: 3px solid rgba(0, 113, 227, 0.55); /* blauer Ring im Marken-Ton */
    outline-offset: 2px;                        /* kleiner Abstand zum Element */
}