/* Modulspezifische Styles für das User-Modul. Wird automatisch über cTheme::ladeHeader() im eingebunden. */ /* ===== Organigramm ===== */ .oc-wrap { overflow-x: auto; padding: var(--abst-2) 0 var(--abst-8); } /* Baum: ul-Elemente als horizontale Flex-Reihe */ .oc-baum, .oc-kinder { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } /* Verhindert, dass justify-content: center bei Überlauf nach beiden Seiten ausweicht; oc-wrap kann damit korrekt scrollen */ .oc-baum { min-width: max-content; } /* Jeder Knoten stapelt Node-Card und Kinder vertikal */ .oc-einheit { display: flex; flex-direction: column; align-items: center; } /* ---- Verbindungslinien ---- */ /* Platz oberhalb der Kinder-Reihe für die vertikale Linie vom Eltern-Knoten */ .oc-kinder { padding-top: 1.75rem; position: relative; } /* Vertikale Linie: Eltern-Knoten → horizontale Linie */ .oc-kinder::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 1.75rem; background: var(--f-border); } /* Platz oberhalb jeder Kind-Card für horizontale + vertikale Linie */ .oc-kinder > .oc-einheit { padding: 1.75rem var(--abst-4) 0; position: relative; } /* Vertikale Linie: horizontale Linie → Kind-Card */ .oc-kinder > .oc-einheit::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 1.75rem; background: var(--f-border); } /* Horizontale Linie: verbindet Geschwister-Knoten */ .oc-kinder > .oc-einheit::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--f-border); } /* Erstes Kind: horizontale Linie beginnt in der Mitte */ .oc-kinder > .oc-einheit:first-child::after { left: 50%; } /* Letztes Kind: horizontale Linie endet in der Mitte */ .oc-kinder > .oc-einheit:last-child::after { right: 50%; } /* Einziges Kind: keine horizontale Linie nötig */ .oc-kinder > .oc-einheit:only-child::after { display: none; } /* ---- Node-Card ---- */ .oc-knoten { background: var(--f-seitenleiste); border: 1px solid var(--f-border); border-radius: 0.625rem; padding: 0.875rem var(--abst-4); min-width: 9.375rem; max-width: 13.75rem; text-align: center; position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .oc-knoten:hover { border-color: var(--f-aktiv); box-shadow: 0 var(--abst-1) var(--abst-4) rgba(0, 0, 0, 0.25); } .oc-name { font-weight: 600; font-size: 0.9rem; color: var(--f-text); margin-bottom: 0.375rem; overflow-wrap: anywhere; hyphens: auto; } .oc-detail { font-size: 0.78rem; color: var(--f-text-schwach); margin-top: 3px; line-height: 1.4; } .oc-detail a { color: var(--f-aktiv); text-decoration: none; } .oc-detail a:hover { text-decoration: underline; } /* Aktions-Icons, sichtbar beim Hover */ .oc-aktionen { position: absolute; top: 0.3125rem; right: 0.3125rem; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; } .oc-knoten:hover .oc-aktionen, .oc-knoten:focus-within .oc-aktionen { opacity: 1; } /* Touch-Geräte: Aktionen dauerhaft sichtbar (Hover ist unzuverlässig) */ @media (hover: none) { .oc-aktionen { opacity: 1; } } /* Benutzer mit reduzierter Bewegung: keine Transition */ @media (prefers-reduced-motion: reduce) { .oc-knoten, .oc-aktionen { transition: none; } } /* ===== Rechtezuweisung (editrollen.php) ===== */ .rechte-gruppe { display: block; } /* Ohne diese Regel überschreibt die Klassen-Spezifität von .rechte-gruppe den Browser-Default `[hidden] { display: none }` — die JS-Logik im Modul-Dropdown setzt das Attribut korrekt, aber visuell bleiben alle Gruppen sichtbar. */ .rechte-gruppe[hidden] { display: none; } /* ===== Rollenquellen (userrollen/ourollen) ===== */ .rolle-quelle { display: inline-block; margin-left: var(--abst-2); padding: 1px var(--abst-2); font-size: 0.78rem; font-weight: 500; color: var(--f-status-hinweis); background: color-mix(in srgb, var(--f-status-hinweis) 10%, transparent); border: 1px solid color-mix(in srgb, var(--f-status-hinweis) 30%, transparent); border-radius: var(--radius-pille); }