/* ===== Veranstalterei – gemeinsames Website-CSS ===== */

:root { --bs-primary: #2874B2; }
body { background-color: #f8f9fa; }

.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-primary:hover { background-color: color-mix(in srgb, var(--bs-primary) 85%, white) !important; }
.btn-outline-primary { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-outline-primary:hover { background-color: var(--bs-primary) !important; color: #fff !important; }

.navbar .nav-link:hover, .navbar-brand:hover { background-color: rgba(255,255,255,.15) !important; border-radius: .375rem; }
.navbar-brand { padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.5rem; }

/* Klickbare Übersichts-Karten (z.B. Anleitung-Inhaltsverzeichnis) */
.guide-card { transition: transform .15s ease, box-shadow .15s ease; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.guide-icon { width: 3rem; height: 3rem; border-radius: .5rem; background: rgba(40,116,178,.1); }

/* Nummerierte Schritte in Anleitungen */
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--bs-primary); color: #fff; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto;
}

/* Klickbare Screenshots (Lightbox) */
.zoomable { cursor: zoom-in; }
.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none;
    align-items: center; justify-content: center; z-index: 1080; cursor: zoom-out; padding: 2rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
    max-width: 95%; max-height: 95%; border-radius: .5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}