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

:root {
    --primary:        #f97316;
    --primary-dark:   #ea580c;
    --primary-light:  #fb923c;
    /* Orange als SCHRIFT auf hellem Grund. Das Marken-Orange selbst hat gegen Weiß nur
       2,8:1 – erforderlich sind 4,5:1 für normalen und 3:1 für großen Text. Es bleibt
       deshalb den Flächen vorbehalten (Knopf-Hintergrund, Rahmen, Auswahlmarkierung), wo
       kein Kontrastwert daran hängt; Buchstaben in Orange bekommen diesen Ton.
       #c2410c erreicht 5,2:1 auf Weiß, 4,9:1 auf --bg und 4,7:1 auf --border-light –
       also auf jedem hellen Untergrund dieser Seite genug, und es liest sich weiterhin
       als dasselbe Orange. */
    --primary-text:   #c2410c;
    --dark:           #0f172a;
    --dark-2:         #1e293b;
    --dark-3:         #334155;
    --bg:             #f8fafc;
    --surface:        #ffffff;
    --border:         #e2e8f0;
    --border-light:   #f1f5f9;
    --text:           #0f172a;
    /* War #64748b. Auf Weiß reichte das (4,8:1), auf den hellgrauen Flächen dieser Seite
       nicht mehr: auf --border-light nur 4,3:1, auf dem Fußzeilen-Grau 4,5:1 auf der
       Kippe. Eine Spur dunkler löst das überall auf einmal – 5,5:1 und besser. */
    --text-muted:     #5b6472;
    --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-text); 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;
}
/* ======== Dezente Card-Fußzeile ========
   Schmale Zeile mit einem weiterführenden Link: heller Grund, feine Trennlinie, kleine
   gedämpfte Schrift, Hover in Akzentfarbe. Maßgeblich ist der Fuß der Startseiten-Cards
   („Neu im Archiv"); denselben Aufbau haben Anmeldung/Registrierung und das Profil-Dashboard.
   Diese Optik stand vorher dreimal getrennt herum (index.css, hier, profile.php) und wäre
   beim nächsten Feinschliff auseinandergelaufen – deshalb genau einmal, hier.
   .home-card__foot steht mit im Selektor, damit index.php unverändert bleibt. */
.card-foot-soft,
.home-card__foot,
.auth-card .card-footer,
.register-card .card-footer {
    padding: .3rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--border-light);
}
.card-foot-soft a,
.home-card__foot a,
.auth-card .card-footer a,
.register-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;
}
.card-foot-soft a:hover,
.home-card__foot a:hover,
.auth-card .card-footer a:hover,
.register-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; }

/* Gesperrter Knopf: ausgegraut, nicht bloß blass. Bootstrap nimmt einem deaktivierten Knopf nur
   35 % Deckkraft – ein oranger Knopf sieht danach immer noch nach „geht schon" aus, und genau
   das soll er nicht. Dieselbe Optik hat die gesperrte Download-Kachel (.dl-square:disabled)
   schon länger; hier gilt sie für alle Bootstrap-Knöpfe im Frontend, damit „deaktiviert"
   überall dasselbe Bild ergibt. */
.btn:disabled,
.btn.disabled {
    background: var(--border-light);
    border-color: var(--border);
    color: var(--text-muted);
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-outline-primary { border-color: var(--primary); color: var(--primary-text); 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-text);
    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-text); border-bottom-color: var(--border); background: none; }
.nav-tabs .nav-link.active { color: var(--primary-text); 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: var(--text-muted);
    font-size: 12px;
}
/* Rechtliche Links: 12px Schrift ergab eine Zeile von ~18 px Höhe – zu wenig für einen
   Finger. Der Innenabstand hebt die Trefferfläche auf die geforderten 24 px, ohne den Text
   zu vergrößern; gap statt me-3 hält den seitlichen Abstand auch im Umbruch gleich. */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem 1rem;
}
.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-inline: .15rem;
}
.footer a { color: var(--text-muted); font-size: 12px; transition: color var(--ease); }
.footer a:hover { color: var(--primary-text); }
.footer small { font-size: 12px; color: var(--text-muted); }
.footer-social { color: var(--text-muted); 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%; }

    /* Einträge des aufgeklappten Menüs: mindestens 48 px hoch. Vorher ergaben 1rem Schrift und
       .625rem Polsterung rund 44 px – am unteren Rand dessen, was sich mit dem Daumen sicher
       treffen lässt. Die Trennlinien geben jedem Eintrag zusätzlich eine sichtbare Fläche. */
    #navMain .navbar-nav .nav-link {
        font-size: 1.05rem;
        padding: .85rem .9rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    #navMain .navbar-nav > .nav-item + .nav-item > .nav-link {
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
    #navMain .navbar-nav { align-items: stretch; display: flex; }
    /* Untermenüs (Seiten-Dropdowns) mit gleicher Fingerfreundlichkeit. */
    #navMain .dropdown-menu .dropdown-item { padding: .7rem 1rem; font-size: 1rem; }

    .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%; }

    /* Benutzermenü in der Topbar: Der Avatar sitzt bündig im Knopf, ohne dessen Höhe zu
       verändern – sonst wüchse die Navbar, sobald jemand ein Profilbild hinterlegt hat. */
    .nav-mobile-user { padding: .2rem .35rem; }
    .nav-mobile-user .nav-avatar { width: 26px; height: 26px; }
    .nav-mobile-user .bi { font-size: 1.35rem; }
    /* Das Menü ist breiter als der Knopf – ohne diese Breite bricht der Benutzername um. */
    .nav-mobile-user + .user-dropdown { min-width: 220px; }
}

/* ---- 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); }

/* „zuletzt": Im Download-Verlauf markiert das Menü die Größe, mit der dieses Bild damals
   geladen wurde. Das Menü gibt es nur EINMAL pro Seite und es bedient alle Zeilen – welche
   Größe markiert wird, entscheidet daher erst das Öffnen (data-mark-size am Auslöser).
   Deshalb steht das Fähnchen in jedem Eintrag und wird per Klasse ein- statt eingefügt. */
.dl-menu__badge { display: none; }
.dl-menu__item.is-last .dl-menu__badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .35rem;
    border-radius: 2px;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: .1em;
}
.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 = fehlendes Recht; die Kacheln tragen dazu .is-locked. Das ist ein reiner
   Lesehinweis im Quelltext – gestaltet wird über :disabled. Welches Icon eine gesperrte
   Kachel zeigt, entscheidet sie selbst: die Download-Kachel wechselt auf ein Schloss,
   die Bearbeiten-Kachel behält ihren Stift (wie im Kachel-Overlay der Suche). */
.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;
}

/* ======== Leuchtkasten-Auswahl im „Zum Leuchtkasten hinzufügen"-Modal ========
   Markup und Verhalten liegen in includes/lightbox-modal.php und werden von search.php
   UND image.php eingebunden – deshalb steht die Optik hier und nicht in search.css.
   Rahmen, dunkler Kopf und Schließen-X kommen aus .modal-dark oben. */
#lightboxModal .lb-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 260px;
    overflow-y: auto;
    padding: 1px;                 /* Platz für die Auswahl-Kontur, nicht abgeschnitten */
}
.lb-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.lb-option:hover { border-color: var(--dark-3); background: var(--border-light); }
.lb-option__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lb-option__icon {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    transition: color var(--ease);
}
.lb-option__name {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-option__check {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--ease), transform var(--ease);
}
.lb-option__badge { display: none; }

/* Ausgewählt → orange akzentuiert */
.lb-option.is-selected {
    border-color: var(--primary);
    background: rgba(249, 115, 22, .07);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.lb-option.is-selected .lb-option__icon { color: var(--primary); }
.lb-option.is-selected .lb-option__check { opacity: 1; transform: scale(1); }

/* Bereits enthalten → ausgegraut, nicht wählbar */
.lb-option.is-contained {
    cursor: not-allowed;
    background: var(--border-light);
    border-color: var(--border);
    box-shadow: none;
}
.lb-option.is-contained:hover { border-color: var(--border); background: var(--border-light); }
.lb-option.is-contained .lb-option__icon,
.lb-option.is-contained .lb-option__name { color: var(--text-muted); }
.lb-option.is-contained .lb-option__check { display: none; }
.lb-option.is-contained .lb-option__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--border);
    padding: .14rem .45rem;
    border-radius: 2px;
}

/* 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); 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-text); }


/* ── Klebende Filterleisten ──────────────────────────────────────────────────
 * Die Filterleisten des Frontends bleiben beim Scrollen direkt unter der Navigation stehen –
 * wie die Listen im Backend (.admin-filterbar). Beide Leistentypen stehen hier zusammen, weil
 * es dasselbe Verhalten ist: .search-filters lebt in filterbar.css, .termine-filter in
 * termine.css, und jede der beiden Dateien wird nur auf ihren eigenen Seiten geladen. Zwei
 * getrennte Regeln würden über kurz oder lang auseinanderlaufen.
 *
 * --nav-h misst assets/js/app.js. Der Rückfallwert greift, bis das Skript gelaufen ist; er ist
 * bewusst großzügig, weil eine zu klein geschätzte Höhe die Leiste unter die Navigation
 * schieben würde – zu groß heißt nur ein paar Pixel Luft.
 *
 * Er stand auf 56px und war damit ZU KLEIN: .navbar hat min-height: 3.75rem, also 60px.
 * Genau der Fall, vor dem der Absatz darüber warnt. Jetzt 64px – vier Pixel Luft, falls die
 * Leiste einmal umbricht.
 */
.search-filters,
.termine-filter {
    position: sticky;
    top: var(--nav-h, 64px);
    z-index: 1010;              /* über dem Inhalt, unter der Navbar (.sticky-top = 1020) */
    transition: box-shadow .15s ease, background .15s ease;
}

/* Erst wenn sie wirklich klebt, legt sie sich sichtbar über den Inhalt (.is-stuck via app.js).
 *
 * DECKEND, nicht durchscheinend mit backdrop-filter. Der Milchglas-Effekt sah hübscher aus, hat
 * aber auf dem Handy die Seite zum Absturz gebracht („wiederholt ein Problem aufgetreten"):
 * backdrop-filter zwingt den Browser, alles HINTER der Leiste als eigene Ebene zu halten und bei
 * jedem Scroll-Bild neu zu verwischen. Über einer langen Bildliste – die Suche zeigt bis zu 500
 * Kacheln – reicht der Speicher des Tabs dafür nicht. Ein deckender Hintergrund kostet nichts
 * und sieht praktisch gleich aus, weil die Leiste ohnehin auf var(--surface) steht. */
.search-filters.is-stuck,
.termine-filter.is-stuck {
    background: var(--surface);
    box-shadow: 0 6px 16px rgb(15 23 42 / .08);
}

/* ======== Kennzahlen-Kacheln ========
   Zahl führt, Symbol bleibt zurückhaltend. Keine tabular-nums auf den großen Werten – gleich
   breite Ziffern lassen sie in dieser Größe locker wirken.
   Zwilling in admin/statistics-downloads.php; Frontend und Backend haben kein gemeinsam
   geladenes Stylesheet. EIN Unterschied ist Absicht: Hier sind die Ecken kantig, weil das
   ganze Frontend kantig ist (.bild-card, .profile-form .card, .dl-menu …); im Backend sind
   sie abgerundet wie die Cards dort. Alles andere bitte beidseitig nachziehen. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.kpi {
    position: relative;
    padding: 1rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 0;
}
.kpi__icon {
    position: absolute; top: .85rem; right: .95rem;
    color: var(--primary); opacity: .3; font-size: 1.1rem; line-height: 1;
}
.kpi__val   { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.kpi__label { display: block; margin-top: .2rem; font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi__hint  { display: block; margin-top: .15rem; font-size: .72rem; color: var(--text-muted); }
/* Anklickbare Kachel: führt auf die Seite, die dahinter steckt */
a.kpi { display: block; color: inherit; text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
a.kpi:hover, a.kpi:focus-visible { border-color: var(--primary); box-shadow: var(--sh-xs); color: inherit; }
/* Werte, die kein Zahlwert sind (Datum, Größenname) – sonst sprengen sie die Kachel */
.kpi__val--text { font-size: 1.05rem; line-height: 1.3; }

/* Ergebniszeile über der Seiten-Navigation („Einträge 1–25 von 33 · Seite 1 von 2") und der
   Behälter, in den admin-bulk.js sie samt Blätterung schreibt (downloads.php).
   Wortgleich in admin.css – Frontend und Backend haben kein gemeinsam geladenes Stylesheet,
   und die Zeile soll in beiden Bereichen identisch aussehen. Erzeugt wird sie von
   renderResultCount() (functions.php) sowie von admin-bulk.js / admin-ajax-list.js. */
.clientpager-info { text-align: center; font-size: .78rem; color: var(--text-muted); margin-bottom: .55rem; }
.admin-clientpager { margin-top: 1.5rem; }
.admin-clientpager:empty { margin-top: 0; }

/* ── Kein automatisches Zoomen auf dem Handy ─────────────────────────────────
 * iOS zoomt beim Antippen in JEDES Feld, dessen Schrift kleiner als 16px ist – und zoomt
 * danach nicht von allein zurück. Verhindern lässt sich das ausschließlich über die
 * Schriftgröße des Feldes.
 *
 * Der oft genannte Weg über user-scalable=no im viewport-Tag wäre falsch: Er nimmt der Seite
 * auch das absichtliche Vergrößern und ist damit eine Barriere für alle, die darauf angewiesen
 * sind. Diese Regel betrifft nur Eingabefelder und nur unterhalb 768px.
 *
 * Bewusst über Attribut-Selektoren: Die haben höhere Spezifität als die Komponenten-Klassen
 * (.search-input, .termine-filter__input, .nav-search__input …) und greifen deshalb überall,
 * auch bei künftigen Feldern, ohne dass jede Komponente eigens nachgezogen werden muss.
 * Wortgleich in admin.css – Frontend und Backend haben kein gemeinsames Stylesheet. */
@media (max-width: 767px) {
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"], input[type="date"],
    input[type="datetime-local"], input[type="time"], select, textarea {
        font-size: 16px;
    }
}