/* =============================================
   Bilddatenbank – Frontend
   Design: dark header · orange accent · white
   ============================================= */

:root {
    --primary:        #f97316;
    --primary-dark:   #ea580c;
    --primary-light:  #fb923c;
    --dark:           #0f172a;
    --dark-2:         #1e293b;
    --dark-3:         #334155;
    --bg:             #f8fafc;
    --surface:        #ffffff;
    --border:         #e2e8f0;
    --border-light:   #f1f5f9;
    --text:           #0f172a;
    --text-muted:     #64748b;
    --success-bg:     #ecfdf5;
    --success-border: #a7f3d0;
    --success-text:   #065f46;
    --danger-bg:      #fef2f2;
    --danger-border:  #fecaca;
    --danger-text:    #991b1b;
    --warning-bg:     #fffbeb;
    --warning-border: #fde68a;
    --warning-text:   #92400e;
    --info-bg:        #eff6ff;
    --info-border:    #bfdbfe;
    --info-text:      #1e40af;
    --r-sm:  6px;
    --r:     10px;
    --r-lg:  16px;
    --ease:  150ms cubic-bezier(.4,0,.2,1);
    --sh-xs: 0 1px 2px 0 rgb(0 0 0/.05);
    --sh-sm: 0 1px 3px 0 rgb(0 0 0/.08), 0 1px 2px -1px rgb(0 0 0/.06);
    --sh:    0 4px 6px -1px rgb(0 0 0/.07), 0 2px 4px -2px rgb(0 0 0/.06);
    --sh-md: 0 10px 15px -3px rgb(0 0 0/.08), 0 4px 6px -4px rgb(0 0 0/.05);
    --sh-lg: 0 20px 25px -5px rgb(0 0 0/.08), 0 8px 10px -6px rgb(0 0 0/.04);
}

/* ---- Skip link ---- */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .5rem 1rem;
    background: var(--dark);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    text-decoration: none;
    transition: top .15s;
}
.skip-to-main:focus { top: 0; color: #fff; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.3;
    color: var(--text);
}

a { color: var(--primary); transition: color var(--ease); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ---- Navbar ---- */
.navbar {
    background: var(--dark) !important;
    padding-top: .7rem;
    padding-bottom: .7rem;
    min-height: 3.75rem;          /* feste Höhe → ein-/ausgeloggt identisch */
    box-shadow: 0 2px 8px rgb(0 0 0/.25);
    width: 100%;
    left: 0;
}

.navbar .navbar-nav { gap: .15rem .3rem; }

.navbar-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand i {
    color: var(--primary);
    font-size: 1.2rem;
}
.navbar-brand:hover { opacity: .88; }

.nav-link {
    font-size: .8375rem;
    font-weight: 500;
    color: rgba(255,255,255,.7) !important;
    padding: .4rem .75rem !important;
    border-radius: var(--r-sm);
    transition: all var(--ease);
}
.nav-link:hover, .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.08);
}
/* Avatar im Benutzermenü (eingeloggt) – auf Nav-Höhe begrenzt, damit die Navbar ein- wie ausgeloggt gleich hoch bleibt */
.nav-avatar-link { padding-top: .2rem !important; padding-bottom: .2rem !important; }
.nav-avatar {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    object-fit: cover;
    display: block;
    border: 1.5px solid rgba(255,255,255,.35);
}
.nav-avatar--ph {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: .95rem;
    border-color: rgba(255,255,255,.22);
}

/* Register button in navbar */
.navbar .btn-outline-light {
    font-size: .8125rem;
    font-weight: 600;
    background: var(--primary);
    border: none;
    color: #fff;
    padding: .375rem 1rem;
    border-radius: var(--r-sm);
    transition: background var(--ease), box-shadow var(--ease);
}
.navbar .btn-outline-light:hover {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgb(249 115 22/.35);
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-md);
    padding: .325rem;
    font-size: .875rem;
    min-width: 180px;
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: .45rem .8rem;
    font-weight: 500;
    color: var(--text);
    transition: background var(--ease);
}
.dropdown-item:hover { background: var(--border-light); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--primary);
    color: #fff;
}
.dropdown-divider { border-color: var(--border); margin: .25rem 0; }

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .875rem 1.375rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-radius: 0 !important;
}
.card-body { padding: 1.5rem 1.375rem; }
.card-footer {
    background: var(--border-light);
    border-top: 1px solid var(--border);
    padding: .875rem 1.375rem;
}

/* Auth-/Registrierungs-Cards: einheitliches flaches Design – kein Schatten, feine graue
   Linie, durchgehend eckig, schlanker dunkler Header mit weißem Icon links.
   (Login, Passwort vergessen/zurücksetzen und Registrierung.) */
.auth-card .card,
.card.auth-card,
.register-card .card {
    border: 1px solid var(--border);
    border-radius: 0 !important;
    box-shadow: none;
}
.auth-card .card-header,
.auth-card .card-footer,
.register-card .card-header,
.register-card .card-footer { border-radius: 0 !important; }
.auth-card .card-header,
.register-card .card-header {
    background: var(--dark);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    padding: .7rem 1.25rem;
}
.auth-card .card-header i,
.register-card .card-header i {
    display: inline-flex;
    font-size: .95rem;
    margin-bottom: 0;
    color: #fff;
    opacity: .9;
}
/* Auth-Card-Footer: dezent wie der Startseiten-Footer (.home-card__foot) –
   schmale Höhe, kleine gedämpfte Schrift, Hover in Akzentfarbe.
   (Hintergrund + obere Linie kommen bereits aus .card-footer.) */
.auth-card .card-footer,
.register-card .card-footer {
    padding: .3rem 1rem;
}
.register-card .card-footer a,
.auth-card .card-footer a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
}
.register-card .card-footer a:hover,
.auth-card .card-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ---- Buttons ---- */
.btn {
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .01em;
    border-radius: var(--r-sm);
    transition: all var(--ease);
    padding: .46rem 1.125rem;
    border-width: 1.5px;
}
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 14px rgb(249 115 22/.35);
}
.btn-secondary {
    background: var(--dark-2);
    border-color: var(--dark-2);
    color: #fff;
}
.btn-secondary:hover {
    background: var(--dark-3);
    border-color: var(--dark-3);
}
.btn-lg { padding: .65rem 1.625rem; font-size: .9375rem; }
.btn-sm { padding: .3rem .75rem; font-size: .8rem; }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-outline-secondary { border-color: var(--border); color: var(--text-muted); background: transparent; }
.btn-outline-secondary:hover { background: var(--border-light); color: var(--text); border-color: #cbd5e1; }
.btn-outline-danger { border-color: #fecaca; color: #dc2626; background: transparent; }
.btn-outline-danger:hover { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }

/* ---- Form controls ---- */
.form-control,
.form-select {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: .875rem;
    padding: .5rem .9rem;
    color: var(--text);
    background-color: #fff;
    transition: border-color var(--ease), box-shadow var(--ease);
    box-shadow: none;
}
/* Auswahl-Pfeil (Chevron) für alle <select> – klar erkennbar, dass auswählbar */
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.form-select-sm { padding-right: 1.75rem; background-position: right .5rem center; }
.form-floating > .form-select { padding-right: 2.25rem; }
.form-control:focus,
.form-select:focus {
    border-color: var(--dark);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgb(15 23 42/.12);
    outline: none;
}
.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
    letter-spacing: .01em;
}
.form-text { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }
.input-group-text {
    background: var(--border-light);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-size: .875rem;
}
.input-group > .form-control:not(:first-child) { border-left: none; }
.input-group > .input-group-text + .form-control { border-left: none; }

/* Checkboxes */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgb(249 115 22/.15);
    border-color: var(--primary);
}
.form-check-label { font-size: .875rem; }

/* ---- Alerts ---- */
.alert {
    border-radius: var(--r);
    border-width: 1px;
    font-size: .875rem;
    padding: .875rem 1.125rem;
    display: flex;
    gap: .625rem;
    align-items: flex-start;
}
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }
.alert .btn-close { margin-left: auto; opacity: .5; }
.alert ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.alert ul li + li { margin-top: .2rem; }

/* ---- Badges ---- */
.badge {
    font-size: .675rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .3em .65em;
    border-radius: 4px;
}

/* ---- Tables ---- */
.table {
    font-size: .875rem;
    color: var(--text);
}
.table th {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border) !important;
    padding: .75rem 1rem;
    background: var(--border-light);
    white-space: nowrap;
}
.table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.table-hover tbody tr:hover { background: var(--border-light); }
.table > :not(:first-child) { border-top: none; }

/* ---- Section divider ---- */
.section-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin: 1.625rem 0 1.125rem;
}
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---- Auth wrapper ---- */
.auth-wrapper {
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.auth-card { width: 100%; max-width: 460px; }
.register-card { width: 100%; max-width: 820px; }

/* ---- Consent box ---- */
.consent-box {
    background: var(--border-light);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 1.125rem 1.375rem;
}

/* ---- Password strength ---- */
#password-strength {
    height: 3px;
    border-radius: 2px;
    margin-top: 5px;
    width: 0;
    transition: width .3s, background .3s;
}
#password-strength-label { font-size: .75rem; color: var(--text-muted); }

/* ---- Pagination ---- */
.pagination { gap: 5px; }
.page-link {
    color: var(--primary);
    border-color: var(--border);
    font-size: .875rem;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm) !important;
    transition: all var(--ease);
}
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.active .page-link:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.page-link:hover { background: var(--warning-bg); color: var(--primary-dark); border-color: var(--primary-light); }

/* ---- Nav tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem 1rem;
    border-radius: 0;
    transition: all var(--ease);
}
.nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--border); background: none; }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }

/* ---- Gallery ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
}
.gallery-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.gallery-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
}
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ---- Static pages ---- */
.page-content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.75rem 2rem;
    box-shadow: var(--sh-xs);
}
.static-page-content { font-size: .875rem; }
.static-page-content h1,
.static-page-content h2,
.static-page-content h3,
.static-page-content h4,
.static-page-content h5,
.static-page-content h6 {
    color: var(--dark);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}
.static-page-content h1 { font-size: 1.15rem; border-bottom: 2px solid var(--primary); padding-bottom: .35rem; }
.static-page-content h2 { font-size: 1.0rem;  border-bottom: 1px solid var(--border);   padding-bottom: .3rem; }
.static-page-content h3 { font-size: .925rem; }
.static-page-content h4 { font-size: .875rem; }
.static-page-content h5 { font-size: .835rem; font-weight: 600; }
.static-page-content h6 { font-size: .8rem;   font-weight: 600; color: var(--text-muted); }
.static-page-content p,
.static-page-content li { color: #334155; line-height: 1.75; margin-bottom: .4rem; }

/* ---- Page header ---- */
.page-header {
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.page-header h1 {
    font-size: 1.575rem;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 0;
}
.page-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
}

/* ---- Footer (Design wie der E-Mail-Footer: hellgrau, zentriert, dezent) ---- */
.footer {
    background: #f8f9fa !important;
    border-top: 1px solid var(--border);
    padding: .875rem 0;
    text-align: center;
    color: #6c757d;
    font-size: 12px;
}
.footer a { color: #6c757d; font-size: 12px; transition: color var(--ease); }
.footer a:hover { color: var(--primary); }
.footer small { font-size: 12px; color: #6c757d; }
.footer-social { color: #6c757d; font-size: 1rem; line-height: 1; transition: color var(--ease); }
.footer-social:hover { color: var(--primary); }
.footer-social-sep { display: inline-block; width: 1px; height: .75rem; background: rgba(0,0,0,.15); flex-shrink: 0; }
.nav-social-link { font-size: 1rem; }

/* ---- 4K / Breitbild-Layout ---- */
@media (min-width: 1600px) {
    .navbar > .container,
    main > .container,
    footer .container {
        max-width: min(94vw, 3760px);
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ---- Navbar Layout (Desktop) ---- */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        align-items: center;
        gap: .75rem;
    }
    .nav-search-form {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: none;
    }
    .nav-right-group {
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
    }
}

/* ---- Navbar search ---- */
.nav-search-form { max-width: 100%; }
.nav-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--r);
    padding: 0 .75rem;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.nav-search__icon {
    color: rgba(255,255,255,.55);
    font-size: .875rem;
    flex-shrink: 0;
    line-height: 1;
    transition: color var(--ease);
    pointer-events: none;
}
.nav-search__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .875rem;
    padding: .4rem 0;
    min-width: 0;
}
.nav-search__input::placeholder { color: rgba(255,255,255,.4); }
.nav-search:focus-within {
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 0 0 .15rem rgba(255,255,255,.15);
}
.nav-search:focus-within .nav-search__icon { color: rgba(255,255,255,.7); }

/* ---- Navbar social row ---- */
.nav-social-row { display: flex; align-items: center; }

/* ---- Mobile navbar ---- */
@media (max-width: 991.98px) {
    .nav-search-form { max-width: 100%; }
    #navMain .navbar-nav .nav-link { font-size: 1rem; padding: .625rem .875rem; }
    #navMain .navbar-nav { align-items: stretch; display: flex; }
    .nav-auth-login { display: block; text-align: center; }
    .nav-auth-register {
        display: block !important;
        width: 100%;
        text-align: center;
        margin: .25rem 0 .5rem !important;
        padding: .5rem 1rem !important;
    }

    /* Mobil: Suchicon + Sprache + Hamburger nebeneinander – wie die Desktop-Nav-Links
       (transparent, weiß). -webkit-appearance zurücksetzen, sonst rendert iOS/Safari
       den <button> als hellen nativen Push-Button (Bootstrap-Reboot setzt appearance:button). */
    .nav-mobile-btn {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        color: rgba(255,255,255,.9);
        background: transparent;
        border: none;
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
        padding: .3rem .45rem;
        border-radius: var(--r);
        font-size: .95rem;
        line-height: 1;
        cursor: pointer;
    }
    .nav-mobile-btn .bi { font-size: 1.2rem; }
    .nav-mobile-btn:hover,
    .nav-mobile-btn:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
    .nav-mobile-btn:focus { box-shadow: none; outline: none; }
    .nav-mobile-actions .navbar-toggler { padding: .25rem .4rem; }
    .mobile-search .nav-search { width: 100%; }
}

/* ---- User dropdown card ---- */
.user-dropdown { min-width: 210px; overflow: hidden; box-shadow: var(--sh-md); }
.user-dropdown__head {
    background: var(--dark);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
}
.user-dropdown__avatar { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; display: block; }
.user-dropdown__avatar--ph { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); color: #fff; font-size: 1.4rem; }
.user-dropdown__name { font-weight: 600; font-size: .875rem; line-height: 1.25; word-break: break-word; }

/* ---- Scroll to top ---- */
.scroll-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(249 115 22/.4);
    transition: opacity var(--ease), transform var(--ease);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(249 115 22/.5); }

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .auth-card, .register-card { max-width: 100%; }
    .page-header { flex-direction: column; align-items: flex-start; }
}

.flag-icon { width: 1.5em; height: 1em; object-fit: cover; vertical-align: -.1em; border-radius: 1px; flex-shrink: 0; }

/* ======== Download-Größen-Menü (Suchkachel, Bild-Modal, Detailseite) ========
   position:fixed statt eines normalen Dropdowns: .search-card hat overflow:hidden,
   ein in der Kachel verankertes Menü würde abgeschnitten. Die Position setzt das JS
   aus dem BoundingRect des auslösenden Buttons (siehe dlRenderMenu()). */
.dl-menu {
    position: fixed;
    z-index: 1080;
    min-width: 250px;
    max-width: 330px;
    padding: 0;                       /* kein Innenabstand: der Header sitzt bündig an der Kante */
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-lg);
}
.dl-menu[hidden] { display: none; }

/* Header exakt wie die dunklen Card-Header im Frontend (image.php, lightbox.php, downloads.php) */
.dl-menu__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--dark);
    color: #fff;
    border-bottom: 0;
    padding: .7rem 1.25rem;
    font-size: .675rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.dl-menu__head i { font-size: .9rem; color: #fff; }

.dl-menu__item {
    display: block;
    padding: .6rem 1.25rem;
    color: var(--text);
    text-decoration: none;
    transition: background var(--ease);
}
.dl-menu__item + .dl-menu__item { border-top: 1px solid var(--border-light); }
.dl-menu__item:hover,
.dl-menu__item:focus-visible { background: var(--border-light); color: var(--text); }
.dl-menu__name { display: block; font-size: .82rem; font-weight: 600; }
.dl-menu__spec { display: block; font-size: .7rem; color: var(--text-muted); }
.dl-caret { font-size: .7em; }

/* ======== Quadratischer Aktions-Button (Bild-Detailseite) ========
   Icon oben, Beschriftung darunter. Der Container nimmt später weitere Kacheln auf. */
.dl-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dl-square {
    width: 92px;
    height: 92px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .35rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease);
}
.dl-square > i { font-size: 1.5rem; line-height: 1; }              /* nur das Haupt-Icon */
.dl-square__label { display: inline-flex; align-items: center; gap: .2rem; }

/* :not(:disabled) ist wichtig – sonst würde auch eine deaktivierte Kachel beim
   Überfahren orange werden (ein <a> kann nie :disabled sein, dort greift es immer). */
.dl-square:not(:disabled):hover,
.dl-square:not(:disabled):focus-visible {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* Deaktiviert – zwei Gründe, gleiche Optik:
     .is-locked = kein Download-Recht (zeigt ein Schloss statt des Download-Icons)
     .is-soon   = Funktion noch nicht gebaut (behält ihr eigenes Icon) */
.dl-square:disabled {
    background: var(--border-light);
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}
.dl-locked-hint { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; }

/* ======== Formular-Modal im Seiten-Design ========
   Dunkler Kopf, weißes Schließen-X, kantig. Geteilt vom Leuchtkasten-Modal (search.php)
   und dem Teilen-Modal (image.php) – deshalb hier zentral und NICHT an eine ID gebunden.
   style.css wird auf jeder Frontend-Seite geladen, search.css dagegen nur auf der Suche. */
.modal-dark .modal-content {
    background: var(--surface);
    border: 2px solid var(--dark);
    border-radius: 0;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.modal-dark .modal-header {
    background: var(--dark);
    border-bottom: none;
    border-radius: 0;
    padding: .5rem 1.1rem;
    align-items: center;
}
.modal-dark .modal-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.3;
}
.modal-dark .modal-title i { color: #fff; font-size: .9rem; }
.modal-dark .img-modal-x { margin-left: auto; }
.modal-dark .modal-footer {
    border-top: 1px solid var(--border);
    border-radius: 0;
}

/* Schließen-X. Geteilt von allen Modals UND der Filter-Seitenleiste der Suche – lag
   bisher in search.css und war deshalb außerhalb der Suche nicht verfügbar. */
.img-modal-x {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 4px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: .95rem;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.img-modal-x:hover { background: rgba(255,255,255,.26); }

/* ======== Modal „Bild per E-Mail empfehlen" (image.php) ========
   Bei angemeldeten Benutzern sind Name und E-Mail readonly (nicht disabled – disabled
   würde die Werte nicht mitsenden). Sie müssen deshalb selbst als gesperrt erkennbar sein. */
.share-modal .form-control[readonly] {
    background: var(--border-light);
    color: var(--text-muted);
    cursor: not-allowed;
}
.share-hint { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; }

/* ======== Bild-Infospalte ========
   Geteilt vom Bild-Modal (includes/image-modal.php – Suche und Leuchtkasten) und der
   Detailseite (image.php). Beide bekommen ihre Zeilen aus imgInfoRows(), deshalb darf auch
   die Optik nur an EINER Stelle stehen. Vorher gab es sie zweimal: .img-modal-info in
   search.css und eine Kopie als .bild-info im <style> von image.php – prompt driftete sie
   auseinander (Icon-Ausrichtung, tabular-nums, Tag-Höhe).

   Raster: Icon-Spalte | Wert. Die Icon-Spalte hat eine FESTE Breite – so beginnen die Werte
   aller Zeilen exakt untereinander, unabhängig vom jeweiligen Icon. */
.img-info {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: .5rem .75rem;
    align-items: start;
    font-size: .85rem;
    line-height: 1.5;                    /* Bezugsgröße für die Icon-Ausrichtung darunter */
}

/* Abschnittskopf („Veranstaltung", „Medieninformationen"). Er steckt in den Zeilen und nicht
   statisch im Markup: Hat ein Bild keine Veranstaltung, entfällt der ganze erste Block – und
   mit ihm seine Überschrift. Die Haarlinie macht aus dem Label einen erkennbaren Kopf statt
   eines frei schwebenden Wortes. */
.img-info__head {
    grid-column: 1 / -1;
    font-size: .675rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border);
}
/* Folgeüberschriften brauchen Luft nach oben, die erste sitzt bündig am Panel-Rand */
.img-info__head:not(:first-child) { margin-top: 1rem; }

/* Das Icon sitzt exakt auf Höhe der ERSTEN Textzeile daneben: Die Zelle ist genau eine Zeile
   hoch (1.5em bei line-height 1.5) und zentriert das Glyph darin. Ein fester padding-Wert
   kann bei unterschiedlicher Icon- und Textgröße gar nicht aufgehen. Bei mehrzeiligen Werten
   (Beschreibung) bleibt das Icon dadurch an der ersten Zeile stehen. */
.img-info__label--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    color: var(--text-muted);
}
.img-info__label--icon i { font-size: .9rem; line-height: 1; }

.img-info__val {
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;             /* lange Dateinamen brechen um, statt überzulaufen */
    font-variant-numeric: tabular-nums;  /* Datum, Mediengröße und Dateigröße fluchten */
}
.img-info__val a { color: var(--primary); text-decoration: none; }
.img-info__val a:hover { text-decoration: underline; }

/* Zweite Zeile innerhalb eines Werts – aktuell die Adresse unter dem Namen des Veranstaltungsorts */
.img-info__sub {
    display: block;
    margin-top: .12rem;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Zusatz auf derselben Zeile – aktuell die Uhrzeit neben dem Veranstaltungsdatum. Der Abstand
   Icon↔Wert des Rasters wirkt inline zu luftig, weil dort die Icon-Spalte noch Zentrierungsluft
   mitbringt; .4rem liest sich wie ein zusammengehörendes Paar. */
.img-info__inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .85rem;
    white-space: nowrap;
}
.img-info__inline i { font-size: .9rem; line-height: 1; color: var(--text-muted); }

/* Stichwort-Tags. min-height = eine Rasterzeile, damit auch diese Zeile mit ihrem Icon fluchtet. */
.img-info-kw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: 1.5em;
}
.img-info-tag {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: .14rem .45rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
}
.img-info-tag:hover { border-color: var(--primary); color: var(--primary); }