/* /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 {
    /* Sichtbare Breite der einspaltigen Formularkarten (Registrierung, Terminanfrage). */
    --form-card-w:    820px;
    --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; }
/* Breite der einspaltigen Formularkarten. Der Wert steht als Variable an EINER Stelle –
   zwei getrennt gepflegte Zahlen driften auseinander, und der Besucher soll auf beiden
   Seiten dieselbe Karte wiedererkennen. */
.register-card { width: 100%; max-width: var(--form-card-w, 820px); }

/* Terminanfrage: gleiche sichtbare Kartenbreite. Die Registrierungskarte liegt in
   .auth-wrapper, der links und rechts 1rem Luft lässt; auf der Anfrageseite gibt es diesen
   Rahmen nicht. Also übernimmt die Karte selbst die Polsterung – und die Obergrenze wächst
   um genau diese 2rem, damit innen wieder dieselbe Breite herauskommt. Ohne den Zuschlag
   wäre die Karte auf breiten Bildschirmen 32px schmaler als die Registrierung. */
.request-card {
    width: 100%;
    max-width: calc(var(--form-card-w, 820px) + 2rem);
    padding-inline: 1rem;
}

/* ---- 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. */
/* Überschrift „Anfahrt".
 *
 * Braucht eine eigene Klasse, weil die Karte INNERHALB von .static-page-content steht: Dort
 * ist h5 auf .835rem heruntergesetzt (Fließtext-Überschriften), während die Überschrift des
 * Kontaktformulars daneben ausserhalb dieses Bereichs sitzt und Bootstraps 1.25rem behält.
 * Ohne diese Regel stünden zwei gleich ausgezeichnete Überschriften in verschiedenen Größen
 * nebeneinander. Der zweite Selektor gewinnt gegen die Bereichsregel.
 */
.contact-map__head,
.static-page-content .contact-map__head {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    margin-top: 0;
    margin-bottom: 1rem;
}

.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; }
/* Platzhalter für einwilligungspflichtige Inhalte. Zwei Stellen teilen sich dieselben
   Regeln: die Karte (.contact-map--blocked) und der reCAPTCHA-Hinweis (.consent-gate).
   Bewusst EINE Regelliste statt zweier gleichlautender – getrennt gepflegt driften sie
   auseinander, und der Besucher soll denselben Kasten zweimal wiedererkennen. */
.contact-map--blocked,
.consent-gate {
    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,
.consent-gate__hint { max-width: 30rem; font-size: .82rem; color: var(--muted); }
.contact-map__hint i,
.consent-gate__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) ----
   Umschaltpunkt xl (1200 px), nicht lg (992 px). Gemessen an der vollen Leiste – Marke,
   drei Menüpunkte, Suche, sechs Sozial-Symbole, Sprache, Anmelden, Registrieren – braucht
   die Zeile rund 1130 px. Bei lg standen dafür nur 960 px zur Verfügung: Die rechte Gruppe
   ragte bei 1000 px Fensterbreite 185 px über den rechten Bildschirmrand hinaus, „Anmelden"
   und „Registrieren" waren schlicht nicht mehr erreichbar. Zwischen 992 und 1199 px
   übernimmt jetzt das Hamburger-Menü, das den Platz nicht braucht. */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        align-items: center;
        gap: .5rem;
        /* Der eigentliche Fehler. Ein Flex-Element hat von Haus aus min-width: auto und kann
           damit NICHT unter seine Inhaltsbreite schrumpfen – die Zeile behielt ihre
           Wunschbreite und lief stattdessen aus dem Container heraus, statt das Suchfeld
           schmaler zu machen. Mit 0 darf sie schrumpfen und die Suche gibt nach. */
        min-width: 0;
    }
    /* Die Suche ist das einzige Element, das nachgeben kann: Menüpunkte und Symbole lassen
       sich nicht kürzen, ein Eingabefeld schon. 8rem bleiben als Untergrenze, darunter wäre
       es nur noch ein Kästchen ohne erkennbaren Zweck. */
    .nav-search-form {
        flex: 1 1 8rem;
        min-width: 8rem;
        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 (bis einschliesslich Tablet quer – siehe Umschaltpunkt oben) ---- */
@media (max-width: 1199.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: