/* /assets/vendor/inter.css */
/* Inter Variable Font – self-hosted */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://www.dw-foto.de/assets/vendor/fonts/inter-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* /assets/css/style.css */
/* =============================================
   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 */
/* Schrift DUNKEL auf dem Orange, nicht weiß: Weiß auf --primary ergibt nur 2,80:1 und
   verfehlt die WCAG-AA-Vorgabe von 4,5:1 für normalen Text deutlich (13 px zählen trotz
   Fettung nicht als „groß" – dafür bräuchte es 18,66 px). Google PageSpeed hat genau
   diesen Knopf als einziges Element der Startseite bemängelt.

   Gewählt wurde die dunkle Schrift statt eines dunkleren Orange, weil das die Signalfarbe
   der Marke unverändert lässt – der Knopf sieht aus wie zuvor, nur die Beschriftung ist
   dunkelblau statt weiß. Gemessen: --dark auf --primary = 6,37:1, im Hover-Zustand auf
   --primary-dark noch 5,02:1. Beides besteht mit Reserve.

   Die Alternative wäre weiße Schrift auf --primary-text (#c2410c, 5,18:1) gewesen – dann
   aber mit sichtbar dunklerem Knopf. Wer hier wieder auf #fff wechselt, muss den
   Hintergrund mit abdunkeln, sonst kehrt die Beanstandung zurück. */
.navbar .btn-outline-light {
    font-size: .8125rem;
    font-weight: 600;
    background: var(--primary);
    border: none;
    color: var(--dark);
    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: var(--dark);
    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); }
/* Bootstrap rechnet Hover-, Aktiv- und Fokuszustand über diese Variablen (u. a.
   `.btn-check + .btn:hover` und `.btn:active` mit höherer Spezifität) – ohne die
   Overrides blitzte dort das Bootstrap-Standardblau auf. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 249, 115, 22;
}
.btn-outline-primary {
    --bs-btn-color: var(--primary-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 249, 115, 22;
}
.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);
}
/* ── Anfahrtskarte (OpenStreetMap) ─────────────────────────────────────────────
   Zwei Zustände: der geladene Rahmen und – ohne Einwilligung – ein Platzhalter, der
   erklärt, warum hier nichts steht. Der Platzhalter behält die Höhe der Karte, damit
   der Seiteninhalt beim Zustimmen nicht springt. */
.contact-map { margin-top: 1.5rem; }
.contact-map__frame { position: relative; }
.contact-map iframe { display: block; width: 100%; border: 1px solid var(--border); }
/* Sperrschicht über dem Rahmen. Sie fängt die Mausereignisse ab, bevor sie die Karte
   erreichen – der einzige Weg, die Bedienung einer fremden Einbettung zu unterbinden.
   pointer-events auf dem Rahmen zusätzlich: Ohne das käme man mit der Tastatur (Tab)
   trotzdem hinein und könnte dort scrollen. */
.contact-map__lock { position: absolute; inset: 0; display: block; border: 0; padding: 0; }
.contact-map--static iframe,
.contact-map--locked iframe { pointer-events: none; }
.contact-map--static .contact-map__lock { background: transparent; cursor: default; }
/* Variante „erst nach Klick": sichtbarer Hinweis, damit niemand eine kaputte Karte vermutet. */
.contact-map__lock--btn {
    background: rgba(15, 23, 42, .18); cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.contact-map__lock--btn span {
    background: rgba(15, 23, 42, .78); padding: .45rem .9rem; border-radius: var(--r-sm);
    font-size: .8rem; font-weight: 600;
}
.contact-map__lock--btn:hover { background: rgba(15, 23, 42, .28); }
.contact-map__lock--btn:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.contact-map__alt { margin-top: .4rem; font-size: .75rem; }
.contact-map--blocked {
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border); background: var(--border-light);
    padding: 1.5rem; text-align: center;
}
.contact-map__hint { max-width: 30rem; font-size: .82rem; color: var(--muted); }
.contact-map__hint i { font-size: 1.8rem; display: block; margin-bottom: .6rem; opacity: .45; }

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