/* ==========================================================================
   verbund.css – gemeinsames Design Raumplaner & Meeting-Tool (Pflichtenheft D1)
   Wird von beiden Tools VOR den tool-eigenen Styles geladen.
   Leitstil: Website vodicka.de (lila Verlauf, hell, Karten mit Schatten).
   Farben/Abstände nur hier ändern – die Tool-Styles verwenden die Variablen.
   ========================================================================== */

:root {
    --v-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --v-primaer: #667eea;
    --v-primaer-dunkel: #5a4fcf;
    --v-lila: #764ba2;
    --v-hintergrund: #f4f5f9;
    --v-flaeche: #ffffff;
    --v-flaeche-leise: #f8f9fc;
    --v-text: #1f2430;
    --v-text-leise: #5a6072;
    --v-text-hell: #8a8f99;
    --v-linie: #e3e6ee;
    --v-linie-feld: #d3d7e0;
    --v-schatten: 0 2px 10px rgba(31, 36, 48, 0.08);
    --v-schatten-hover: 0 8px 25px rgba(102, 126, 234, 0.25);
    --v-radius: 10px;
    --v-radius-klein: 8px;
    --v-schrift: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --v-ok: #15803d;      --v-ok-hg: #e7f6ec;
    --v-warn: #a15c07;    --v-warn-hg: #fdf3dc;
    --v-fehler: #b3261e;  --v-fehler-hg: #fde8e6;
    --v-info: #1d4ed8;    --v-info-hg: #e6eefc;

    /* Tool-Akzentfarben (D1, Entscheidung Peter 08.10.2026) */
    --v-akzent-raum: #0d9488;
    --v-akzent-meeting: #2563eb;
    --v-akzent-verwaltung: #764ba2;
    --v-akzent: var(--v-akzent-verwaltung);
}

/* Akzent je Tool – gesetzt über data-tool an <body> */
body[data-tool="raumplanung"]   { --v-akzent: var(--v-akzent-raum); }
body[data-tool="meeting"]       { --v-akzent: var(--v-akzent-meeting); }
body[data-tool="verwaltung"],
body[data-tool="start"]         { --v-akzent: var(--v-akzent-verwaltung); }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--v-schrift);
    background: var(--v-hintergrund);
    color: var(--v-text);
}
a { color: var(--v-primaer-dunkel); }
a:hover { color: var(--v-lila); }

/* ---------- Kopfzeile (beide Tools) ---------- */
.v-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.25rem;
    min-height: 56px;
    padding: 0 1.25rem;
    background: var(--v-grad);
    border-bottom: 3px solid var(--v-akzent);
    box-shadow: 0 2px 10px rgba(60, 40, 120, 0.25);
    position: sticky;
    top: 0;
    z-index: 100;
    color: #fff;
}
.v-kopf a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.v-kopf a:hover { color: #fff; }

.v-kopf .nav-marke, .v-kopf .nav-brand {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 1.05rem; color: #fff;
    padding: 0.85rem 1.1rem 0.85rem 0; margin-right: 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}
.v-kopf .v-marke-punkt {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: var(--v-akzent); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}

/* Links (Raumplaner: ul.nav-links, Meeting-Tool: direkte a-Elemente) */
.v-kopf .nav-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.v-kopf .nav-links a,
.v-kopf > a:not(.nav-brand):not(.nav-marke),
.v-kopf details.nav-menue summary {
    display: inline-block;
    padding: 0.95rem 0.65rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.88);
}
.v-kopf .nav-links a:hover,
.v-kopf > a:not(.nav-brand):not(.nav-marke):hover,
.v-kopf .nav-links a.aktiv,
.v-kopf > a.active {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.9);
}

/* rechter Teil: Umschalter, Benutzer, Passwort, Abmelden */
.v-kopf .nav-benutzer, .v-kopf .nav-rechts {
    margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.9rem;
    font-size: 0.88rem; padding: 0.4rem 0;
}
.v-kopf .nav-benutzer, .v-kopf .nav-rechts { justify-content: flex-end; }
.v-kopf .nav-rechts .nav-benutzer { margin-left: 0; padding: 0; color: rgba(255, 255, 255, 0.75); }
.v-kopf .nav-benutzer > span { color: rgba(255, 255, 255, 0.75); }
.v-kopf .nav-rechts > a { padding: 0; border: none; font-size: 0.88rem; }

/* Tool-Umschalter: Pill in der Farbe des Ziel-Tools */
.verbund-umschalter { display: inline-flex; gap: 0.4rem; align-items: center; }
a.verbund-pill, .v-kopf a.verbund-pill {
    display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px;
    background: var(--pill, var(--v-primaer)); color: #fff !important;
    font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
a.verbund-pill:hover { filter: brightness(1.08); border-color: #fff; }
a.verbund-pill--start { background: rgba(255, 255, 255, 0.18); }
.v-kopf a.verbund-pill--start { background: rgba(255, 255, 255, 0.18); }

/* Menü „Verwaltung“ im Meeting-Tool */
.v-kopf details.nav-menue { position: relative; }
.v-kopf details.nav-menue summary { list-style: none; cursor: pointer; }
.v-kopf details.nav-menue summary::-webkit-details-marker { display: none; }
.v-kopf details.nav-menue .menue-inhalt {
    position: absolute; top: 100%; left: 0; min-width: 12rem; z-index: 200;
    background: var(--v-flaeche); border-radius: 0 0 var(--v-radius-klein) var(--v-radius-klein);
    box-shadow: 0 8px 20px rgba(31, 36, 48, 0.18); display: flex; flex-direction: column; overflow: hidden;
}
.v-kopf details.nav-menue .menue-inhalt a { color: var(--v-text); padding: 0.6rem 1rem; border: none; }
.v-kopf details.nav-menue .menue-inhalt a:hover { background: var(--v-flaeche-leise); color: var(--v-primaer-dunkel); }

/* ---------- Seitentitel, Karten ---------- */
h1, .page-header h2 { color: var(--v-text); font-weight: 700; letter-spacing: -0.01em; }
.untertitel { color: var(--v-text-leise); }

.v-karte, .card {
    background: var(--v-flaeche);
    border: 1px solid var(--v-linie);
    border-radius: var(--v-radius);
    box-shadow: var(--v-schatten);
}

/* ---------- Knöpfe ---------- */
.v-knopf, .btn-primary, .formular button, button.v-knopf {
    font-family: inherit;
}
.btn-primary, .v-knopf--primaer {
    background: var(--v-grad) !important; color: #fff !important; border: none;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.35);
}
.btn-primary:hover, .v-knopf--primaer:hover { filter: brightness(1.07); box-shadow: var(--v-schatten-hover); }

/* ---------- Eingabefelder ---------- */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--v-primaer) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18) !important;
}

/* ---------- Tabellen ---------- */
table th { color: var(--v-text-leise); }

/* ---------- Status-Pills ---------- */
.v-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.v-pill--ok { background: var(--v-ok-hg); color: var(--v-ok); }
.v-pill--warn { background: var(--v-warn-hg); color: var(--v-warn); }
.v-pill--fehler { background: var(--v-fehler-hg); color: var(--v-fehler); }
.v-pill--info { background: var(--v-info-hg); color: var(--v-info); }

/* ---------- Fußzeile ---------- */
.fuss, body > footer { color: var(--v-text-hell); }
.fuss a, body > footer a { color: inherit; }

/* ---------- Öffentliche Seiten (Anmeldung, Passwort vergessen/zurücksetzen) ---------- */
body.v-oeffentlich {
    background:
        linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%) top / 100% 15rem no-repeat,
        var(--v-hintergrund);
}
body.v-oeffentlich .v-oeffentlich-marke {
    text-align: center; color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em;
    padding: 1.6rem 1rem 0;
}
body.v-oeffentlich .v-oeffentlich-marke span { color: #ffd166; }

/* ---------- Startseite: Kacheln ---------- */
.verbund-kachel {
    border: 1px solid var(--v-linie) !important; border-top: 5px solid var(--pill, var(--v-primaer)) !important;
    border-radius: var(--v-radius) !important; box-shadow: var(--v-schatten);
    transition: transform 0.15s, box-shadow 0.15s;
}
.verbund-kachel:hover { transform: translateY(-2px); box-shadow: var(--v-schatten-hover); }
.verbund-kachel .verbund-pill { border-color: transparent; }

@media print {
    .v-kopf { display: none !important; }
    body, body.v-oeffentlich { background: #fff; }
}

/* Kopfzeile auf mittleren Breiten kompakter (viele Verwaltungslinks) */
@media (max-width: 1500px) {
    .v-kopf .nav-links a, .v-kopf > a:not(.nav-brand):not(.nav-marke), .v-kopf details.nav-menue summary { padding: 0.75rem 0.5rem 0.6rem; font-size: 0.86rem; }
    .v-kopf .nav-marke, .v-kopf .nav-brand { padding: 0.7rem 0.9rem 0.7rem 0; }
}

/* D1.1 Nachbesserung (Peter 08.10.2026): gesamter Kopfzeilen-Inhalt zentriert.
   Bricht die Zeile um (je nach Fensterbreite 2–3 Zeilen), wird auch jeder Abschnitt zentriert. */
.v-kopf { justify-content: center; text-align: center; padding: 0.15rem 1rem; }
.v-kopf .nav-links { justify-content: center; }
.v-kopf .nav-benutzer, .v-kopf .nav-rechts { margin-left: 0; justify-content: center; }
.v-kopf .nav-marke, .v-kopf .nav-brand { border-right: none; margin-right: 0.25rem; }
.v-kopf .nav-marke::after, .v-kopf .nav-brand::after {
    content: ""; display: inline-block; width: 1px; height: 1.4rem; margin-left: 0.9rem;
    background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1100px) { .v-kopf .nav-marke::after, .v-kopf .nav-brand::after { display: none; } }

/* D1.3: Eingabefelder in der Seitenschrift (Textfelder waren Monospace) */
input, select, textarea, button { font-family: inherit; }