/* ============================================================
   MoshPix — Riso-Punk Stylesheet
   ============================================================ */

/* ---------- Fonts (locally hosted, see /static/fonts/) ---------- */
@font-face {
  font-family: 'Anton';
  src: url('/static/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrainsmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrainsmono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Riso-Punk DNA */
  --paper:       #f1e6c8;       /* warmes Pergament-cream */
  --paper-2:     #e3d4ad;
  --ink:         #1a1612;       /* warmes schwarz */
  --ink-soft:    #2e2620;
  --orange:      #f5a52a;       /* Logo-Orange */
  --orange-deep: #d8841a;
  --magenta:     #e63475;
  --cyan:        #4ab7d8;
  --acid:        #e0f02e;

  /* Layer */
  --bg:          var(--ink);
  --fg:          var(--paper);
  --muted:       rgba(241, 230, 200, 0.55);
  --line:        var(--paper);

  /* Halftone-Stärke (kann via JS überschrieben werden) */
  --halftone:    0.18;

  /* Layout */
  --max-w:       1240px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Halftone Overlay (auf gesamter Seite) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(0,0,0,0.22) 1px, transparent 1.4px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 1;
  opacity: var(--halftone);
  mix-blend-mode: multiply;
}

/* Paper Grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(173deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(82deg,  rgba(0,0,0,0.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
}

/* Content über Overlays */
header { position: relative; z-index: 5; }
main   { position: relative; z-index: 3; }
footer { position: relative; z-index: 2; }

/* ---------- Typography ---------- */
.display, h1, h2, h3 {
  font-family: 'Anton', 'Archivo Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-top: 0;
}

h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
h3 { font-size: 1.15rem; line-height: 1.05; letter-spacing: 0.02em; }

.mono   { font-family: 'JetBrains Mono', monospace; }
.muted  { color: var(--muted); }
.small  { font-size: 0.875rem; }
.center { text-align: center; }

a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
a:hover { border-bottom-color: var(--orange); }

p { margin: 0.5rem 0; }

::selection { background: var(--orange); color: var(--ink); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  background: var(--ink);
  border-bottom: 2px solid var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--paper);
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: none;
}
.brand:hover { border-bottom: none; }

.brand-logo {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(245, 165, 42, 0.4));
}

.topbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.topbar-menu {
  display: contents;
}

.topbar-menu-toggle {
  display: none;
}

.topbar-menu-panel {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.topbar-menu-panel > * {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .topbar:not(.admin-mode) {
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    gap: 0.55rem;
  }

  .topbar:not(.admin-mode) .brand {
    min-width: 0;
    font-size: 1.15rem;
    gap: 0.55rem;
  }

  .topbar:not(.admin-mode) .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar:not(.admin-mode) .brand-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  .topbar:not(.admin-mode) .topbar-actions {
    flex: 0 0 auto;
    position: relative;
    margin-left: auto;
  }

  .topbar:not(.admin-mode) .topbar-menu {
    display: block;
    position: relative;
  }

  .topbar:not(.admin-mode) .topbar-menu-toggle {
    display: inline-flex;
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    box-shadow: 3px 3px 0 0 var(--paper);
    list-style: none;
  }

  .topbar:not(.admin-mode) .topbar-menu-toggle::-webkit-details-marker {
    display: none;
  }

  .topbar:not(.admin-mode) .topbar-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 60;
    width: max-content;
    max-width: min(92vw, 340px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--ink);
    border: 2px solid var(--paper);
    box-shadow: 6px 6px 0 0 var(--orange);
  }

  .topbar:not(.admin-mode) .topbar-menu[open] .topbar-menu-panel {
    display: flex;
  }

  .topbar:not(.admin-mode) .topbar-menu-panel form {
    width: 100%;
  }

  .topbar:not(.admin-mode) .topbar-menu-panel .btn-small,
  .topbar:not(.admin-mode) .topbar-menu-panel .topbar-logout,
  .topbar:not(.admin-mode) .topbar-menu-panel .topbar-profile {
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    box-shadow: 3px 3px 0 0 var(--paper);
  }

  .topbar:not(.admin-mode) .user-chip {
    width: 100%;
    max-width: none;
  }
}

/* ---------- Buttons (mit Hard-Shadow Riso-Style) ---------- */
.btn,
button.btn-primary,
button.btn-ghost,
button.btn-danger,
.btn-primary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding: 0.75rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--paper);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
}

.btn:hover,
button.btn-primary:hover,
button.btn-ghost:hover,
button.btn-danger:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-danger:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--paper);
  border-bottom: 2px solid var(--ink);
}

.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-danger:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--paper);
}

.btn-primary {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--paper);
}
.btn-primary:hover { box-shadow: 5px 5px 0 0 var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 4px 4px 0 0 var(--orange);
}
.btn-ghost:hover { box-shadow: 5px 5px 0 0 var(--orange); }

.btn-danger {
  background: var(--magenta);
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 4px 4px 0 0 var(--paper);
}

.btn-small {
  font-size: 0.78rem;
  padding: 0.5rem 0.8rem;
  box-shadow: 3px 3px 0 0 var(--paper);
}
.btn-small:hover { box-shadow: 4px 4px 0 0 var(--paper); }

button:disabled,
.btn-primary:disabled {
  background: var(--ink-soft) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
  box-shadow: 2px 2px 0 0 rgba(241,230,200,0.2) !important;
  transform: none !important;
}

/* ---------- Pills / Tags ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--orange);
}
.pill.cyan { color: var(--cyan); }
.pill.magenta { color: var(--magenta); }
.pill.paper { color: var(--paper); }

/* ---------- Layout ---------- */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

footer {
  padding: 2rem 1rem 3rem;
  text-align: center;
  color: var(--muted);
  border-top: 2px solid var(--ink-soft);
  margin-top: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

footer .footer-links {
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

footer .footer-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.15rem 0.1rem;
  transition: color 0.15s, border-color 0.15s;
}

footer .footer-links a:hover,
footer .footer-links a:focus {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}

footer .footer-sep {
  opacity: 0.6;
}

footer .footer-meta {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* ---------- Legal Pages (Impressum, Datenschutz) ---------- */
/* Papier-Card auf dunklem Hintergrund, im gleichen Stil wie auth-page. */
.legal-page {
  max-width: 760px;
  margin: 2rem auto;
  padding: 2rem 1.75rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--orange);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .legal-page {
    margin: 1rem 0.75rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 4px 4px 0 0 var(--orange);
  }
}

.legal-page h1 {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--orange);
  line-height: 1.05;
}

.legal-subtitle {
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2rem;
  opacity: 0.75;
}

.legal-block {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(26, 22, 18, 0.15);
}

.legal-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-block h2 {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0.6rem;
  text-transform: uppercase;
  color: var(--ink);
  /* Erste h2 ohne extra Abstand oben */
}

.legal-block:first-of-type h2:first-of-type {
  margin-top: 0;
}

.legal-block h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 1rem 0 0.4rem;
  color: var(--ink);
}

.legal-block p,
.legal-block ul {
  margin: 0.6rem 0;
  color: var(--ink);
}

.legal-block ul {
  padding-left: 1.4rem;
}

.legal-block li {
  margin: 0.25rem 0;
}

.legal-block a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 500;
  border-bottom: none;
}

.legal-block a:hover,
.legal-block a:focus {
  color: var(--magenta);
}

.legal-block code {
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.2);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  color: var(--ink);
}

.legal-block strong {
  color: var(--ink);
  font-weight: 700;
}

.legal-placeholder {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.7;
}

.legal-meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px dashed rgba(26, 22, 18, 0.25);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Hinweisbox bei nicht-ausgefülltem Impressum etc. — eigene Variante,
 * da auth-error zu schreiend für reine Hinweise wäre. Acid-Gelb-Background. */
.legal-warning {
  background: var(--acid);
  color: var(--ink);
  padding: 0.8rem 1rem;
  border: 2px solid var(--ink);
  margin-bottom: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.legal-warning code {
  background: rgba(26, 22, 18, 0.1);
  border-color: rgba(26, 22, 18, 0.3);
}

.legal-processors {
  margin: 0.6rem 0;
  padding-left: 1.4rem;
}

.legal-processors li {
  margin: 0.3rem 0;
}

/* ---------- Kontaktformular (mobile-first) ---------- */
.contact-page {
  max-width: 480px;
  margin: 1.5rem auto;
  padding: 1.5rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--orange);
  font-family: 'Inter', sans-serif;
}

@media (min-width: 700px) {
  .contact-page {
    margin: 2rem auto;
    padding: 2rem 1.75rem;
    box-shadow: 6px 6px 0 0 var(--orange);
  }
}

.contact-page h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--orange);
  line-height: 1.05;
}

.contact-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  opacity: 0.8;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.contact-field .required {
  color: var(--magenta);
  font-weight: 700;
}

.contact-field .optional {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.78rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.contact-field .contact-input-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 0 var(--orange);
  transform: translate(-2px, -2px);
  transition: transform 0.05s, box-shadow 0.05s;
}

.contact-hint {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-submit {
  margin-top: 0.5rem;
  align-self: stretch;
  text-align: center;
}

.contact-fineprint {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.5;
}

.contact-fineprint a {
  color: var(--orange-deep);
  font-weight: 500;
}

.contact-success {
  text-align: center;
  padding: 1rem 0;
}

.contact-success-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: var(--acid);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--ink);
}

.contact-success h2 {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.contact-success-id {
  font-family: 'JetBrains Mono', monospace;
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.contact-success-id code {
  background: var(--paper-2);
  padding: 0.2em 0.6em;
  border: 1px solid rgba(26, 22, 18, 0.2);
  font-weight: 600;
}

.contact-success-hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.5rem auto;
  max-width: 360px;
  line-height: 1.5;
}

.contact-success-back {
  margin-top: 1.5rem;
  display: inline-block;
}

/* ---------- Admin-Support-Liste (desktop-first) ---------- */
.admin-support {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1.25rem;
  font-family: 'Inter', sans-serif;
}

.admin-support h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--magenta);
}

.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--paper);
  flex-wrap: wrap;
}

.admin-tabs a {
  padding: 0.5rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.admin-tabs a:hover { color: var(--paper); }

.admin-tabs a.active {
  color: var(--paper);
  border-bottom-color: var(--orange);
}

.support-status-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.support-status-tabs a {
  padding: 0.4rem 0.85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: transparent;
  border: 2px solid var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.support-status-tabs a:hover {
  background: var(--ink-soft);
}

.support-status-tabs a.active {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}

.support-status-tabs .status-count {
  background: rgba(26, 22, 18, 0.2);
  padding: 0.05em 0.45em;
  border-radius: 1em;
  font-size: 0.75em;
  font-weight: 600;
}

.support-status-tabs a.active .status-count {
  background: rgba(26, 22, 18, 0.25);
  color: var(--ink);
}

.support-list {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 0.92rem;
}

.support-list thead {
  background: var(--ink);
  color: var(--paper);
}

.support-list th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-list td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(26, 22, 18, 0.12);
  vertical-align: top;
}

.support-list tr:last-child td { border-bottom: none; }

.ticket-row:hover { background: var(--paper-2); }

.ticket-id-link code {
  background: var(--paper-2);
  padding: 0.15em 0.45em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  border: 1px solid rgba(26, 22, 18, 0.2);
  color: var(--orange-deep);
  text-decoration: none;
  font-weight: 600;
}

.ticket-id-link:hover code {
  background: var(--orange);
  color: var(--ink);
}

.ticket-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.ticket-date + small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.ticket-cat {
  display: inline-block;
  padding: 0.15em 0.55em;
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.2);
  font-size: 0.78rem;
}

.ticket-subject {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-no-email {
  color: var(--magenta);
  margin-left: 0.3rem;
}

.status-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  font-weight: 600;
}

.status-badge.status-open {
  background: var(--acid);
  color: var(--ink);
}

.status-badge.status-replied {
  background: var(--cyan);
  color: var(--ink);
}

.status-badge.status-closed {
  background: var(--ink-soft);
  color: var(--paper);
}

.support-empty {
  background: var(--paper);
  color: var(--ink);
  padding: 1.5rem;
  text-align: center;
  border: 2px solid var(--ink);
  font-style: italic;
}

/* ---------- Admin-Support-Detail (desktop-first) ---------- */
.admin-support-detail {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1.25rem;
  font-family: 'Inter', sans-serif;
}

.admin-breadcrumb {
  margin-bottom: 1rem;
}

.admin-breadcrumb a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
}

.admin-breadcrumb a:hover { color: var(--paper); }

.ticket-header {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 5px 5px 0 0 var(--magenta);
}

.ticket-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.ticket-header h1 {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: none;
  text-transform: none;
}

.ticket-header h1 code {
  background: var(--paper-2);
  padding: 0.15em 0.5em;
  border: 1px solid rgba(26, 22, 18, 0.2);
}

.ticket-subject-large {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  margin: 0.5rem 0 1rem;
  text-transform: none;
  color: var(--ink);
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-top: 1px dashed rgba(26, 22, 18, 0.2);
  padding-top: 0.75rem;
}

.ticket-meta a {
  color: var(--orange-deep);
  font-weight: 500;
}

.ticket-no-email-meta {
  color: var(--magenta);
  font-weight: 500;
}

.ticket-message {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.ticket-message h3 {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.ticket-message-body,
.ticket-reply-body {
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.2);
  padding: 1rem;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
}

.ticket-related {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ticket-related h3 {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.ticket-related ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.88rem;
}

.ticket-related a {
  color: var(--orange-deep);
}

.ticket-reply-existing {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--cyan);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ticket-reply-existing h3 {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.ticket-reply-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
  font-family: 'JetBrains Mono', monospace;
}

.ticket-reply-form {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 5px 5px 0 0 var(--orange);
}

.ticket-reply-form h3 {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--ink);
}

.reply-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  align-items: center;
}

.reply-templates-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0.5rem 0 0;
}

.btn-template {
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.btn-template:hover {
  background: var(--paper-2);
}

.btn-template.active {
  background: var(--ink);
  color: var(--paper);
}

.reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.reply-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.reply-field label {
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.reply-field input,
.reply-field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  border-radius: 0;
}

.reply-field textarea {
  font-family: 'Inter', sans-serif;
  resize: vertical;
  min-height: 200px;
  line-height: 1.6;
}

.reply-input-readonly {
  background: var(--paper-2) !important;
  color: var(--ink-soft) !important;
}

.reply-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.ticket-reply-noemail {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--magenta);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.ticket-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ticket-action-form {
  margin: 0;
}

@media (max-width: 700px) {
  .admin-support {
    padding: 0 0.75rem;
  }
  .support-list {
    font-size: 0.82rem;
  }
  .support-list th,
  .support-list td {
    padding: 0.4rem 0.45rem;
  }
  .ticket-subject {
    max-width: 180px;
  }
  .ticket-meta {
    font-size: 0.82rem;
  }
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.card.on-ink {
  background: var(--ink-soft);
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 6px 6px 0 0 var(--orange);
}

.card h2, .card h3 { color: var(--ink); }
.card.on-ink h2, .card.on-ink h3 { color: var(--paper); }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 2rem 1.25rem 1rem;
  margin: 1rem 0 2rem;
  position: relative;
}

.hero-logo {
  width: min(200px, 50vw);
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 16px rgba(245, 165, 42, 0.35));
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--orange);
  margin: 0.5rem 0 1rem;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-shadow: 4px 4px 0 var(--ink-soft);
}

.hero-tagline {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.hero-pills {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0 1.5rem;
}

/* ---------- Section Header ---------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}
.section-header h2 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 4px solid var(--orange);
  padding-bottom: 0.3rem;
}
.section-header .count {
  font-family: 'JetBrains Mono', monospace;
  color: var(--orange);
  font-size: 0.7em;
  letter-spacing: 0.1em;
}

/* ---------- Forms ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.form input[type=text],
.form input[type=password],
.form input[type=email],
.form textarea,
.form select,
input[type=text],
input[type=password],
input[type=email],
input[type=search],
textarea,
select {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  border-radius: 0;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 4px 4px 0 0 var(--orange);
}

:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--orange);
  box-shadow: 4px 4px 0 0 var(--orange);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-field > label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.auth-page .form-field > label,
.card .form-field > label {
  color: var(--ink);
}

.field-help,
.form-required-note,
.selected-files,
#selected-files {
  margin: 0.1rem 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.field-help,
.selected-files,
#selected-files {
  color: rgba(241, 230, 200, 0.78);
}

.auth-page .field-help,
.auth-page .form-required-note {
  color: rgba(26, 22, 18, 0.72);
}

.label-optional {
  font-weight: 400;
  opacity: 0.75;
  text-transform: none;
}

.password-field {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.password-field input {
  flex: 1;
}

.password-toggle {
  min-height: 44px;
  padding: 0 0.8rem;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  cursor: pointer;
}

@media (max-width: 540px) {
  .password-field {
    flex-direction: column;
  }
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  padding: 0.4rem 0;
}
.card.on-ink .checkbox-row { color: var(--paper); }
.checkbox-row input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--orange);
  margin: 0;
  cursor: pointer;
}

/* ---------- Radio-Rows (Upload-Mode) ---------- */
.upload-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.75rem 0;
}
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--ink-soft);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: var(--ink);
  line-height: 1.35;
}
.radio-row:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--orange);
}
.radio-row input[type=radio] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--orange);
  margin: 0.15rem 0 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.radio-row strong { display: block; }
.radio-row small { font-size: 0.8rem; margin-top: 0.15rem; }

/* ---------- Upload-Locked Card (wenn Upload nicht erlaubt) ---------- */
.upload-card.upload-locked {
  border-style: dashed;
  opacity: 0.95;
}
.upload-card.upload-locked h2 {
  color: var(--paper);
}

/* ---------- Gallery Grid (Admin Dashboard) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.gallery-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.gallery-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--orange);
}

.gallery-card .gallery-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
  display: block;
  padding: 1rem 1.2rem 0.8rem;
}
.gallery-card .gallery-link:hover { border-bottom: none; }
.gallery-card h3 {
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery-card .gallery-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}
.gallery-card .gallery-meta .code {
  background: var(--ink);
  color: var(--orange);
  padding: 0.2rem 0.5rem;
}

.gallery-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0 1.2rem 1.1rem;
  flex-wrap: wrap;
}
.gallery-actions form { display: inline-flex; }

.badge-public {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
}

/* ---------- Public Gallery Cards ---------- */
.public-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s, box-shadow 0.12s;
  border-bottom: 2px solid var(--ink) !important;
}
.public-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--orange);
  border-bottom: 2px solid var(--ink) !important;
}

.gallery-cover {
  aspect-ratio: 4 / 3;
  background: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.gallery-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.1);
}
.gallery-cover.placeholder {
  font-size: 3rem;
  color: var(--muted);
}
.gallery-cover.placeholder::before {
  content: "📷";
  filter: grayscale(0.3);
}

.gallery-card-body {
  padding: 1rem 1.2rem 1.2rem;
}
.gallery-card-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}
.gallery-card-body p { margin: 0.25rem 0; }
.gallery-card-body .desc {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.gallery-card-body .item-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Gallery View ---------- */
.gallery-header {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--orange);
}
.gallery-header h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--ink);
  margin: 0 0 0.5rem;
  text-shadow: 3px 3px 0 var(--orange);
}
.gallery-header .badge-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
  font-size: clamp(0.78rem, 2.2vw, 1rem);
  line-height: 1;
  padding: 0.28rem 0.5rem;
  margin-left: 0.55rem;
  transform: translateY(-0.15em);
  text-shadow: none;
}
.gallery-header p {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  margin: 0.25rem 0;
}
.code-badge {
  display: inline-block;
  background: var(--ink);
  color: var(--orange);
  padding: 0.4rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  letter-spacing: 0.08em;
}
.code-badge strong { color: var(--orange); }

#upload-anchor {
  scroll-margin-top: 5rem;
  margin-top: 0.25rem;
}

.upload-card {
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 6px 6px 0 0 var(--orange);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.upload-card h2 { color: var(--paper); }

.upload-card .form input[type=text],
.upload-card .form input[type=password] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.upload-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.upload-actions .btn-primary,
.upload-actions button {
  min-height: 44px;
}

@media (max-width: 540px) {
  .upload-actions,
  .upload-actions .file-pick,
  .upload-actions .btn-primary,
  .upload-actions button {
    width: 100%;
  }
}

.file-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.file-pick input[type=file] {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  width: 100%;
}
.file-pick > span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

#upload-status {
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.upload-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  letter-spacing: 0.04em;
}
.upload-progress.success { color: var(--acid); }
.upload-progress.error { color: var(--magenta); }

/* ---------- Sort Form ---------- */
.sort-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sort-form label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
}
.sort-form select {
  width: auto;
  min-width: 200px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

/* ---------- Masonry / Tiles ---------- */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 5vw, 3rem);
}
@media (min-width: 720px) {
  .masonry {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.tile {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--paper);
  display: flex;
  flex-direction: column;
  transition: transform 0.1s, box-shadow 0.1s;
}
.tile:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--orange);
}

.tile-link {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-bottom: none;
  background: var(--ink-soft);
}
.tile-link:hover { border-bottom: none; }
.tile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(1.05);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.tile-link img.is-loaded {
  opacity: 1;
}
.tile-link img.is-error {
  opacity: 0;
}
.tile-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: repeating-linear-gradient(135deg, rgba(241,230,200,0.08), rgba(241,230,200,0.08) 10px, rgba(0,0,0,0.08) 10px, rgba(0,0,0,0.08) 20px), var(--ink-soft);
  color: rgba(241, 230, 200, 0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.badge-video {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--magenta);
  color: var(--paper);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: 2px solid var(--paper);
}

.tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.uploader {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  font-weight: 600;
}
.reactions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.btn-like {
  background: transparent;
  color: var(--ink-soft);
  padding: 0.15rem 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  box-shadow: none;
  text-transform: uppercase;
}
.btn-like:hover {
  background: var(--ink);
  color: var(--orange);
  transform: none;
  box-shadow: none;
  border-bottom: none !important;
}
.btn-like.liked { color: var(--magenta); }
.btn-like:active {
  transform: none;
  box-shadow: none;
}
.comment-count { color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamic Viewport Height — folgt der Toolbar bei Mobile */
  background: rgba(15, 12, 10, 0.97);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none; /* keine Touch-Gesten an Body weiterreichen */
  overscroll-behavior: contain;
}
/* Side-Panel darf wieder scrollen — sonst kann man Kommentare nicht lesen */
.lb-side {
  touch-action: pan-y;
}
.lightbox.hidden { display: none; }

.lightbox::before {
  /* Halftone auch im Lightbox-Hintergrund */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.06) 1px, transparent 1.4px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 1;
}

.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--orange);
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 102;
  cursor: pointer;
  padding: 0;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--orange);
}
.lb-close { top: 1rem; right: 1rem; }
.lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(calc(-50% - 1px)) translateX(-1px); }

/* Wenn Side-Panel sichtbar (Desktop ≥ 900px), rückt der nächste Pfeil so weit rein,
   dass er nicht über die Side-Panel ragt */
@media (min-width: 900px) {
  .lightbox:not(.side-hidden) .lb-next {
    right: calc(380px + 1rem);
  }
  .lightbox:not(.side-hidden) .lb-close {
    right: calc(380px + 1rem);
  }
  .lightbox:not(.side-hidden) .lb-toggle-side {
    right: calc(380px + 1rem + 56px);
  }
}

.lb-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .lb-content { flex-direction: row; }
}

.lb-side {
  background: var(--paper);
  color: var(--ink);
  padding: 1.25rem;
  overflow-y: auto;
  border-top: 2px solid var(--ink);
  max-height: 50vh;
}
@media (min-width: 900px) {
  .lb-side {
    width: 380px;
    flex-shrink: 0;
    border-top: none;
    border-left: 2px solid var(--ink);
    max-height: none;
  }
}

.lb-meta { margin-bottom: 1rem; color: var(--ink); }
.lb-meta strong { color: var(--orange-deep); font-weight: 600; }
.lb-meta p {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0.25rem 0;
}
.lb-meta p.muted { color: var(--ink-soft); }
.lb-side, .lb-side p { color: var(--ink); }

.lb-exif {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
}
.lb-exif dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
}
.lb-exif dt {
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.lb-exif dd { margin: 0; word-break: break-word; }
.lb-exif a { color: var(--magenta); border-bottom-color: var(--magenta); }

.lb-comments h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  border-bottom: 3px solid var(--orange);
  padding-bottom: 0.25rem;
  display: inline-block;
}

.comments-list {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.comment {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 0.6rem 0.75rem;
  color: var(--ink);
}
.comment .author {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange-deep);
  font-size: 0.95rem;
}
.comment .ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comment .body {
  margin: 0.25rem 0 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}

.comments-list .muted { color: var(--ink-soft); }

.comment-form { gap: 0.5rem; }
.comment-form textarea {
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.lb-delete { margin-top: 1rem; width: 100%; }

/* ---------- Auth-Section (statt Footer-Detail) ---------- */
.auth-section {
  margin: 3rem auto 1.5rem;
  max-width: 380px;
  padding: 1.5rem;
  background: var(--ink-soft);
  border: 2px solid var(--paper);
  box-shadow: 6px 6px 0 0 var(--orange);
  text-align: center;
}
.auth-section h3 {
  color: var(--paper);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.auth-section .auth-tagline {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.auth-section .form input {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Tape Decoration ---------- */
.tape {
  position: absolute;
  width: 90px;
  height: 24px;
  background: rgba(245, 165, 42, 0.7);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transform: rotate(-6deg);
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 8px);
  z-index: 3;
}
.tape.cyan { background: rgba(74, 183, 216, 0.7); }
.tape.magenta { background: rgba(230, 52, 117, 0.7); }

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Offline Page ---------- */
.offline-logo {
  filter: grayscale(0.7) drop-shadow(0 4px 16px rgba(245, 165, 42, 0.2));
  opacity: 0.85;
}

/* ---------- Mobile Tweaks ---------- */
@media (max-width: 540px) {
  .topbar { padding: 0.7rem 1rem; }
  .brand { font-size: 1.15rem; }
  .brand-logo { width: 32px; height: 32px; }
  .gallery-header { padding: 1.1rem; }
  .gallery-header h1 { text-shadow: 2px 2px 0 var(--orange); }
  .lb-close, .lb-prev, .lb-next { width: 40px; height: 40px; font-size: 1.3rem; }
  .lb-prev { left: 0.5rem; }
  .lb-next { right: 0.5rem; }
  .lb-close { top: 0.5rem; right: 0.5rem; }
  .card, .gallery-card, .public-card, .upload-card, .gallery-header { box-shadow: 4px 4px 0 0 var(--paper); }
  .card.on-ink, .upload-card { box-shadow: 4px 4px 0 0 var(--orange); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== User-Chip in Topbar ===== */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ink-soft);
  border: 1.5px solid var(--paper);
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.user-chip-name {
  color: var(--orange);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
.user-chip-name:hover {
  border-bottom-color: var(--orange);
}
.user-chip form button.btn-ghost {
  /* kompakter Logout-Button im Chip */
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  box-shadow: 2px 2px 0 0 var(--orange);
  background: transparent;
}
.user-chip form button.btn-ghost:hover {
  box-shadow: 3px 3px 0 0 var(--orange);
}

/* ===== Auth-Pages (Login/Register) ===== */
.auth-page {
  max-width: 440px;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--orange);
}
.auth-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--ink);
  margin: 0 0 0.5rem;
  text-shadow: 3px 3px 0 var(--orange);
}
.auth-tagline-page {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.auth-form { gap: 0.85rem; }
.auth-form button.btn-primary {
  margin-top: 0.5rem;
  align-self: stretch;
}

.auth-error {
  background: var(--magenta);
  color: var(--paper);
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--ink);
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.auth-switch {
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}
.auth-switch a {
  color: var(--orange-deep);
  font-weight: 600;
}
.auth-switch a:hover { border-bottom-color: var(--orange-deep); }

.auth-fineprint {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Login/Register-Buttons-Pair auf Home ===== */
.auth-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.auth-buttons .btn-primary,
.auth-buttons .btn-ghost {
  flex: 1 1 130px;
  min-width: 120px;
  text-align: center;
  justify-content: center;
}

.admin-login-fold {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(241,230,200,0.25);
}
.admin-login-fold summary {
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}
.admin-login-fold summary::-webkit-details-marker { display: none; }
.admin-login-fold summary::before { content: "▸ "; color: var(--orange); }
.admin-login-fold[open] summary::before { content: "▾ "; }

/* ===== Static Like-Count (für ausgeloggte User in Tile-Meta) ===== */
.like-count-static {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: help;
  padding: 0.15rem 0.4rem;
  text-transform: uppercase;
}

/* ===== Lightbox-Like-Button + Comment-Locked ===== */
.lb-like-row {
  margin-top: 0.75rem;
}
.lb-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  background: var(--paper-2);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.lb-like-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--ink);
  border-bottom: 2px solid var(--ink);
}
.lb-like-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink);
}
.lb-like-btn.liked {
  background: var(--magenta);
  color: var(--paper);
}
.lb-like-count { font-family: 'JetBrains Mono', monospace; }

.comment-locked {
  background: var(--paper-2);
  border: 1.5px dashed var(--ink-soft);
  padding: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}
.comment-locked p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.comment-locked a {
  color: var(--orange-deep);
  font-weight: 600;
}
.comment-locked a:hover { border-bottom-color: var(--orange-deep); }

/* Mobile Tweaks für Topbar mit User-Chip */
@media (max-width: 540px) {
  .user-chip-name { max-width: 80px; }
  .user-chip { padding: 0.25rem 0.4rem 0.25rem 0.6rem; font-size: 0.7rem; }
  .auth-buttons .btn-primary,
  .auth-buttons .btn-ghost { flex: 1 1 100%; }
}

/* ===== Lightbox: Body-Scroll-Lock + Stage + Zoom ===== */
body.lightbox-open {
  overflow: hidden;
  /* Auch HTML-Element locken, sonst scrollen manche Mobile-Browser trotzdem */
  position: fixed;
  inset: 0;
  width: 100%;
}
html.lightbox-open {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

.lb-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.lb-media-stage {
  position: absolute;
  inset: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.lb-media-stage.zoomed { cursor: grab; }
.lb-media-stage.zoomed:active { cursor: grabbing; }

.lb-media-stage > img,
.lb-media-stage > video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 3px solid var(--paper);
  box-shadow: 8px 8px 0 0 var(--orange);
  transform-origin: center center;
  transition: transform 0.05s linear;
  -webkit-user-drag: none;
  pointer-events: auto;
  will-change: transform;
}

.lb-loading {
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.4em;
  font-size: 1.5rem;
}

/* Zoom-Controls */
.lb-zoom-controls {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 102;
}
.lb-zoom-controls button {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--orange);
  width: 44px;
  height: 44px;
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.lb-zoom-controls button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--orange);
}
.lb-zoom-controls button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--orange);
}

@media (max-width: 540px) {
  .lb-zoom-controls { bottom: 0.5rem; gap: 0.4rem; }
  .lb-zoom-controls button { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* Wenn Side-Panel sichtbar UND wir im Mobile-Layout sind:
   Zoom-Controls bleiben unten — Side-Panel wird darüber gestapelt,
   nicht überlappt (Side ist 50vh max-height, Zoom-Controls bei bottom). */

/* ===== Profile-Page ===== */
.profile-page {
  max-width: 640px;
  margin: 1.5rem auto;
}
.profile-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--orange);
  margin-bottom: 1rem;
  text-shadow: 3px 3px 0 var(--ink-soft);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--orange);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat-value {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.profile-section {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.profile-section h2 {
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.profile-section p.muted { color: var(--ink-soft); margin-bottom: 0.85rem; }
.profile-section.danger {
  box-shadow: 6px 6px 0 0 var(--magenta);
}
.profile-section.danger h2 { color: var(--magenta); }

/* ===== Auth-Message (Erfolgsmeldung, Pendant zu auth-error) ===== */
.auth-msg {
  background: var(--acid);
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--ink);
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.auth-msg .reset-pw {
  display: inline-block;
  background: var(--ink);
  color: var(--acid);
  padding: 0.2rem 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin: 0 0.3rem;
  user-select: all;
  -webkit-user-select: all;
}

/* ===== User-Verwaltung-Tabelle ===== */
.user-table-wrap {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  overflow-x: auto;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  min-width: 640px;
}
.user-table thead {
  background: var(--ink);
  color: var(--paper);
}
.user-table th {
  text-align: left;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 2px solid var(--ink);
}
.user-table th.num { text-align: right; }
.user-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(26, 22, 18, 0.18);
  vertical-align: middle;
}
.user-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.user-table tbody tr:hover { background: var(--paper-2); }
.user-table tbody tr:last-child td { border-bottom: none; }

.user-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.user-actions form { display: inline-flex; }
.user-actions .btn-ghost,
.user-actions .btn-danger {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
}
.user-actions .btn-ghost:hover,
.user-actions .btn-danger:hover {
  box-shadow: 3px 3px 0 0 var(--ink);
}
.user-actions .btn-danger {
  background: var(--magenta);
  color: var(--paper);
}

@media (max-width: 540px) {
  .user-actions { flex-wrap: wrap; }
}

/* ====================================================
   HOMEPAGE-MOCKUP: Hero, Polaroid-Stack, Year-Tabs, Steps
   ==================================================== */

/* ===== Toggle-Side-Panel-Button ===== */
.lb-toggle-side {
  position: absolute;
  top: 1rem;
  right: 4.5rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--orange);
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 102;
  padding: 0;
}
.lb-toggle-side:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--orange);
}
.lb-toggle-side.active {
  background: var(--orange);
}
@media (max-width: 540px) {
  .lb-toggle-side { width: 40px; height: 40px; right: 3.5rem; top: 0.5rem; font-size: 1.1rem; }
}
/* Wenn side-hidden: Side-Panel ausblenden, Stage darf voll werden */
.lightbox.side-hidden .lb-side { display: none; }
.lightbox.side-hidden .lb-content { flex-direction: column; }

/* ===== Hero (Mockup-Style) ===== */
.hero-mockup {
  position: relative;
  padding: 1rem 0 2rem;
  margin-bottom: 2rem;
}

.hero-mockup .hero-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  justify-content: flex-start;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
}

.hero-display {
  position: relative;
  z-index: 2;
}

/* Riesige Display-Headline */
.hero-headline {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  margin: 0 0 1.5rem;
  position: relative;
  font-size: clamp(3.2rem, 11vw, 7rem);
  color: var(--paper);
}
.hero-headline > span {
  display: block;
}
.hero-headline .accent {
  color: var(--orange);
}
.hero-headline .hero-stamp {
  display: inline-block;
  position: absolute;
  top: 38%;
  left: 38%;
  background: var(--magenta);
  color: var(--paper);
  font-size: 0.32em;
  padding: 0.15em 0.6em;
  letter-spacing: 0.06em;
  transform: rotate(-7deg);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}

.hero-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  max-width: 44ch;
  margin: 0 0 1.75rem;
}

.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ===== Hero-Stack (Polaroids) ===== */
.hero-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 280px;
}

.hero-stack-empty {
  opacity: 0.4;
}
.hero-empty-logo {
  width: 50%;
  max-width: 200px;
  filter: drop-shadow(0 4px 16px rgba(245, 165, 42, 0.25));
}

.hero-photo {
  position: absolute;
  background: var(--paper);
  border: 3px solid var(--paper);
  padding: 0;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.5),
              0 8px 24px rgba(0,0,0,0.4);
  width: 58%;
  aspect-ratio: 4 / 3;
  overflow: visible;
  transition: transform 0.2s ease;
}
.hero-photo a {
  display: block;
  width: 100%;
  height: 100%;
  border-bottom: none;
}
.hero-photo a:hover { border-bottom: none; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.1);
}

/* Drei verschiedene Positionen + Rotationen für den Stack-Look */
.hero-photo.p1 {
  top: 8%;
  left: 8%;
  transform: rotate(-5deg);
  z-index: 1;
}
.hero-photo.p2 {
  top: 18%;
  right: 6%;
  transform: rotate(4deg);
  z-index: 2;
  width: 60%;
}
.hero-photo.p3 {
  bottom: 6%;
  left: 22%;
  transform: rotate(-2deg);
  z-index: 3;
  width: 55%;
}
.hero-photo:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 10;
}

/* Tape-Akzent oben */
.hero-photo .tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 70px;
  height: 18px;
  background: rgba(245, 165, 42, 0.75);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 8px);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
}
.hero-photo.p2 .tape { background: rgba(74, 183, 216, 0.75); transform: translateX(-50%) rotate(2deg); }
.hero-photo.p3 .tape { background: rgba(230, 52, 117, 0.75); transform: translateX(-50%) rotate(-1deg); }

/* Galerie-Label rechts unten am Stack */
.hero-stack-label {
  position: absolute;
  right: -1%;
  bottom: -8%;
  background: var(--orange);
  color: var(--ink);
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  text-transform: uppercase;
  transform: rotate(-3deg);
  z-index: 5;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.hero-stack-label:hover {
  transform: rotate(-3deg) translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--ink);
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 540px) {
  .hero-stack { min-height: 240px; max-width: 360px; }
  .hero-stack-label { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
}

/* ===== Archive-Header (Year-Tabs) ===== */
.archive-header {
  margin: 2.5rem 0 1.25rem;
}
.archive-meta {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.5rem;
  opacity: 0.85;
}
.archive-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.archive-h {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  margin: 0;
  color: var(--paper);
  line-height: 0.9;
  letter-spacing: 0.01em;
  border-bottom: none;
  padding-bottom: 0;
}

.year-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.year-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--paper);
  border: 2px solid var(--paper);
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 transparent;
  border-bottom: 2px solid var(--paper);
}
.year-tab:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--orange);
  border-bottom: 2px solid var(--paper);
}
.year-tab.active {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  border-bottom: 2px solid var(--ink);
}
.year-tab.active:hover {
  border-bottom: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.year-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  opacity: 0.7;
}
.year-tab.active .year-count { opacity: 0.85; }

/* ===== Steps "So funktioniert's" ===== */
.how-it-works {
  margin: 4rem 0 2rem;
}

/* ===== Beta-Hinweis Banner (Home) ===== */
.beta-notice {
  margin: 2.5rem 0 1rem;
}
.beta-notice-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--orange);
  padding: 1.25rem 1.5rem 1.1rem;
  max-width: 680px;
  margin: 0 auto;
}
.beta-notice-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 0.4rem;
}
.beta-notice-title {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.2;
}
.beta-notice-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.beta-notice-text a {
  color: var(--magenta);
  text-decoration: underline;
}
.beta-notice-text a:hover {
  color: var(--orange-deep);
}
.steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--paper);
}
.steps li > div { flex: 1; min-width: 0; }
.step-num {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--orange-deep);
  flex-shrink: 0;
  line-height: 1;
}
.steps strong {
  display: block;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.steps p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ===== Year-Badge (auf Galerie-Cards) ===== */
.badge-year {
  display: inline-block;
  background: var(--ink);
  color: var(--orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1.5px solid var(--ink);
}
.gallery-card-body .badge-year {
  background: var(--ink);
  color: var(--orange);
}

/* ===== Filter-Bar (Galerie-View) ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--ink-soft);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 0 var(--orange);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.filter-chip:hover {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1.5px solid var(--paper);
}
.filter-chip.active {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.filter-chip .num {
  font-size: 0.7rem;
  opacity: 0.7;
}
.filter-chip.active .num { opacity: 0.85; }

.filter-uploader select {
  width: auto;
  min-width: 140px;
  max-width: 240px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--paper);
  padding: 0.35rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

.filter-clear {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.filter-clear:hover { border-bottom-color: var(--magenta); }

/* ===== Inline-Edit für Admin-Galerie ===== */
.inline-edit {
  display: inline-block;
}
.inline-edit summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit-form {
  margin-top: 0.6rem;
  padding: 0.85rem;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 240px;
}
.inline-edit-form input {
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
}
.inline-edit-form button { align-self: flex-start; }

/* ===== Empty-Stack-Logo (kleinere Variante) ===== */
@media (max-width: 880px) {
  .hero-stack { aspect-ratio: 5 / 4; }
  .hero-headline .hero-stamp { font-size: 0.28em; top: 35%; left: 50%; }
}

/* ====================================================
   PHASE 3: Groups, Lock, Roles
   ==================================================== */

/* ===== Group-Card-Liste ===== */
.group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.group-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 1rem 1.25rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.12s, box-shadow 0.12s;
  border-bottom: 2px solid var(--ink) !important;
}
.group-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--orange);
  border-bottom: 2px solid var(--ink) !important;
}
.group-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.group-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}
.group-desc {
  margin: 0;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.group-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Role-Badges ===== */
.role-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}
.role-admin {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
}
.role-member {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--ink-soft);
}

/* ===== Info-Card (Erklärbox) ===== */
.info-card {
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 6px 6px 0 0 var(--orange);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.info-card h3 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin: 0 0 0.5rem;
}
.info-card p {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  margin: 0.4rem 0;
}
.info-card strong { color: var(--orange); }

/* ===== Group-Header (Detail-Page) ===== */
.group-header {
  margin: 1rem 0 1.5rem;
}
.group-header-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.group-header h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin: 0;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink-soft);
}
.group-desc-large {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin-top: 0.6rem;
}

/* ===== Add-Member / Link-Gallery Forms ===== */
.add-member-form,
.link-gallery-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--ink-soft);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 0 var(--orange);
}
.add-member-form input,
.add-member-form select,
.link-gallery-form input {
  flex: 1 1 200px;
  min-width: 160px;
  background: var(--paper);
  color: var(--ink);
}
.add-member-form select { flex: 0 0 130px; }
.add-member-form button,
.link-gallery-form button { flex-shrink: 0; }

/* ===== Member-Liste ===== */
.member-list {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
}
.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(26, 22, 18, 0.18);
  flex-wrap: wrap;
}
.member-row:last-child { border-bottom: none; }
.member-row:hover { background: var(--paper-2); }

.member-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.member-name {
  font-weight: 600;
  color: var(--ink);
}
.member-display {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.member-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.member-actions .btn-ghost,
.member-actions .btn-danger {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
}
.member-actions .btn-ghost:hover,
.member-actions .btn-danger:hover {
  box-shadow: 3px 3px 0 0 var(--ink);
}
.member-actions .btn-danger {
  background: var(--magenta);
  color: var(--paper);
}

/* ===== Galerie-Card-Wrap (mit Unlink-Button drüber) ===== */
.gallery-card-wrap {
  position: relative;
}
.unlink-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: 2px 2px 0 0 var(--ink) !important;
  font-size: 0.7rem;
  z-index: 5;
}
.unlink-btn:hover {
  box-shadow: 3px 3px 0 0 var(--ink) !important;
}

/* ===== Lock-Badges + Notice ===== */
.badge-locked {
  display: inline-block;
  background: var(--magenta);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1.5px solid var(--ink);
  text-transform: uppercase;
}

.lock-notice {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--magenta);
  color: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.auto-lock-hint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* ===== Linked-Groups in Gallery-Header ===== */
.linked-groups {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.linked-groups .group-link {
  background: var(--ink);
  color: var(--orange);
  padding: 0.2rem 0.5rem;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
}
.linked-groups .group-link:hover {
  background: var(--orange);
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

/* ===== Admin-Controls auf Galerie-View ===== */
.admin-controls {
  margin: 0 0 1.25rem;
}
.admin-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 0 var(--orange);
  padding: 0.55rem 0.9rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
.admin-toggle::-webkit-details-marker { display: none; }
.admin-controls details[open] .admin-toggle {
  box-shadow: 4px 4px 0 0 var(--orange);
}

.admin-controls-inner {
  margin-top: 0.85rem;
  padding: 1rem 1.25rem;
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 5px 5px 0 0 var(--orange);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-controls-inner > form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.auto-lock-form {
  border-top: 1.5px dashed rgba(241,230,200,0.25);
  padding-top: 0.85rem;
}
.auto-lock-form label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}
.auto-lock-form input[type=number] {
  width: 100px;
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 540px) {
  .add-member-form input,
  .add-member-form select,
  .link-gallery-form input {
    flex: 1 1 100%;
  }
  .member-row { flex-direction: column; align-items: stretch; }
  .member-actions { justify-content: flex-end; }
}

/* ====================================================
   PHASE 3.5: Privacy + Event-Daten + neue Galerie-Form
   ==================================================== */

/* ===== Live-Badge (zwischen Pre und Locked) ===== */
.badge-live {
  display: inline-block;
  background: var(--acid);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1.5px solid var(--ink);
  text-transform: uppercase;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 2px 2px 0 0 var(--ink); }
  50% { box-shadow: 2px 2px 0 0 var(--ink), 0 0 8px rgba(224, 240, 46, 0.5); }
}

/* ===== Pre-Badge (Galerie öffnet bald) ===== */
.badge-pre {
  display: inline-block;
  background: var(--cyan);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1.5px solid var(--ink);
  text-transform: uppercase;
}

/* ===== Private-Badge (nicht-public) ===== */
.badge-private {
  display: inline-block;
  background: transparent;
  color: var(--magenta);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1.5px solid var(--magenta);
  text-transform: uppercase;
}

/* ===== Pre-Lock-Notice (cyan-Variante) ===== */
.lock-notice.pre {
  background: var(--cyan);
  color: var(--ink);
}
.lock-notice.pre strong { color: var(--ink); }

.event-info {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* ===== Event-Felder im Form (gallery_new + gallery_edit) ===== */
.event-details {
  background: var(--paper-2);
  border: 1.5px dashed var(--ink);
  padding: 0;
  margin: 0.5rem 0;
}
.event-details summary {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--ink);
  list-style: none;
}
.event-details summary::-webkit-details-marker { display: none; }
.event-details summary:hover { background: var(--paper); }
.event-details[open] summary { border-bottom: 1.5px dashed var(--ink); }

.event-fields {
  padding: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
}
.event-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.event-fields p.muted {
  grid-column: 1 / -1;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  margin: 0.4rem 0 0;
}

.field-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Edit-Form auf Galerie-Seite (admin-controls-inner Variante) ===== */
.admin-controls-inner .gallery-edit-form {
  background: var(--paper);
  color: var(--ink);
  padding: 1rem 1.1rem;
  border: 2px solid var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-controls-inner .gallery-edit-form .field-label {
  color: var(--ink-soft);
}
.admin-controls-inner .gallery-edit-form .event-fields {
  background: var(--paper-2);
  padding: 0.85rem;
  border: 1.5px dashed var(--ink);
}
.admin-controls-inner .gallery-edit-form input[type=text],
.admin-controls-inner .gallery-edit-form input[type=date],
.admin-controls-inner .gallery-edit-form input[type=number] {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink);
}
.admin-controls-inner .gallery-edit-form .checkbox-row { color: var(--ink); }

.admin-section-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--orange-deep);
  margin: 0;
}

.lock-actions {
  background: var(--paper);
  color: var(--ink);
  padding: 1rem 1.1rem;
  border: 2px solid var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.lock-actions p { margin: 0; }

/* ===== Beitrittsanfragen-Liste ===== */
.request-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.request-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--orange);
  flex-wrap: wrap;
}
.request-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 200px;
  min-width: 0;
}
.request-info .member-name { color: var(--orange-deep); }
.request-info .member-display {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
}
.request-message {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  margin: 0.3rem 0;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--orange);
  color: var(--ink-soft);
  font-size: 0.9rem;
  background: var(--paper-2);
}
.request-date {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.request-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ===== Slug-Edit-Row ===== */
.slug-edit-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.slug-edit-row span {
  background: var(--paper-2);
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--ink);
  border-right: none;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.slug-edit-row input {
  flex: 1 1 auto;
  border-left: none;
}

@media (max-width: 540px) {
  .request-row { flex-direction: column; align-items: stretch; }
  .request-actions { justify-content: flex-end; }
}

/* ====================================================
   Lightbox Mobile-Fix: Bild fittet exakt in den Viewport
   ==================================================== */
@media (max-width: 540px) {
  /* Bild ohne fette Border und Schatten, sonst wird's visuell zu eng */
  .lb-media-stage > img,
  .lb-media-stage > video {
    border-width: 1.5px;
    box-shadow: 3px 3px 0 0 var(--orange);
  }
  /* Stage lässt oben/unten Platz für Close/Toggle/Zoom-Buttons.
     Auf Mobile sind die Buttons 40px hoch + 0.5rem Margin = ~48px,
     plus etwas Sicherheitsabstand → 56px oben und unten. */
  .lb-media-stage {
    inset: 56px 0.4rem;
  }
}

/* ====================================================
   QR-Code-Sektion in der Galerie
   ==================================================== */
.qr-section {
  margin: 0 0 1.25rem;
}

.qr-details {
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 0 var(--orange);
}

.qr-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  color: var(--paper);
  width: 100%;
  box-sizing: border-box;
}
.qr-toggle::-webkit-details-marker { display: none; }
.qr-toggle::before { content: "▸"; transition: transform 0.15s; }
.qr-details[open] .qr-toggle::before { transform: rotate(90deg); }

.qr-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1rem;
  border-top: 1.5px dashed rgba(241,230,200,0.25);
}
@media (min-width: 640px) {
  .qr-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

.qr-preview {
  background: var(--paper);
  padding: 0.75rem;
  border: 2px solid var(--paper);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}
.qr-preview img {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.qr-actions p {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.02em;
}
.qr-actions p.qr-link { margin-top: 0.25rem; }

.qr-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.qr-buttons .btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow: 2px 2px 0 0 var(--orange);
}
.qr-buttons .btn-ghost:hover {
  box-shadow: 3px 3px 0 0 var(--orange);
}

.qr-copy-btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.qr-copy-btn:hover {
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* ====================================================
   GÄSTEBUCH (Phase 4 - Drive-by-Foto)
   ==================================================== */

/* ===== /gb/{code} Scan-Page (eigenes Layout, schlank) ===== */
.gb-scan-body {
  background: var(--bg);
  color: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.gb-scan-main {
  width: 100%;
  max-width: 460px;
}
.gb-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 0 var(--orange);
  padding: 1.75rem 1.5rem;
  position: relative;
}
.gb-card-info { text-align: center; }
.gb-card h1 {
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  margin: 0.4rem 0 0.6rem;
  color: var(--orange-deep);
  line-height: 1;
  text-shadow: 3px 3px 0 var(--ink);
}
.gb-card h2 {
  margin: 0.3rem 0 0.5rem;
  color: var(--ink);
}
.gb-card p {
  margin: 0.3rem 0;
  color: var(--ink-soft);
}
.gb-mini-brand {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0;
  text-align: center;
}
.gb-tagline {
  margin: 0.5rem 0 1.25rem !important;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ===== MoshPix Eigenwerbung im Gästebuch ===== */
.gb-promo-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--magenta);
  padding: 1.25rem 1.25rem 1rem;
  margin-top: 1.5rem;
  text-align: center;
}
.gb-promo-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 0.5rem;
  opacity: 0.7;
}
.gb-promo-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.gb-promo-text {
  margin: 0 0 0.9rem !important;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.gb-promo-cta {
  display: inline-block;
  text-decoration: none;
}

/* Summary als Button stylen — Default-Pfeil ausblenden */
.gb-redo-trigger {
  list-style: none;
  cursor: pointer;
}
.gb-redo-trigger::-webkit-details-marker { display: none; }
.gb-redo-trigger::marker { content: ''; }
.gb-redo-fold[open] .gb-redo-trigger {
  margin-bottom: 0;
}

/* ===== Foto-Pick + Preview ===== */
.gb-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gb-camera-pick {
  display: block;
  cursor: pointer;
}
.gb-camera-pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.gb-camera-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  padding: 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.08s, box-shadow 0.08s;
}
.gb-camera-pick:active .gb-camera-btn,
.gb-camera-pick:hover .gb-camera-btn {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--ink);
}

.gb-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  padding: 0.6rem;
  border: 2px dashed var(--ink);
  background: var(--paper-2);
}
.gb-preview-wrap img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border: 1.5px solid var(--ink);
}
.gb-preview-wrap button {
  align-self: flex-end;
}

.gb-submit {
  font-size: 1.1rem;
  padding: 0.85rem 1.2rem;
}
.gb-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.gb-footer-note {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.7rem;
}

/* ===== "Schon gemacht"-State ===== */
.gb-existing {
  margin: 1rem 0;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 0.85rem;
}
.gb-existing-img {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border: 1.5px solid var(--ink);
  display: block;
}
.gb-existing-name {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
  text-transform: uppercase;
}
.gb-existing-msg {
  margin: 0.5rem 0 0;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter', sans-serif;
  border-left: 3px solid var(--orange);
  padding-left: 0.75rem;
  color: var(--ink);
}
.gb-existing-date {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
}
.gb-redo-fold {
  margin-top: 1rem;
  text-align: center;
}
.gb-redo-fold summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}
.gb-redo-fold summary::-webkit-details-marker { display: none; }

/* ===== Verwaltung /g/{code}/guestbooks ===== */
.gb-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .gb-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

.gb-mgmt-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--paper);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.gb-mgmt-card.inactive {
  opacity: 0.6;
  box-shadow: 6px 6px 0 0 var(--ink-soft);
}
.gb-mgmt-head h3 {
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.gb-mgmt-qr {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-mgmt-qr img {
  width: 100%;
  max-width: 180px;
  height: auto;
}
.gb-mgmt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gb-url-display {
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--paper-2);
  padding: 0.3rem 0.5rem;
  display: inline-block;
  border: 1px solid var(--ink);
}
.gb-mgmt-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ===== Gästebuch-Beiträge in der Galerie ===== */
.guestbook-section {
  margin: 2.5rem 0 1.5rem;
  border-top: 2px dashed var(--ink-soft);
  padding-top: 1.5rem;
}
.gb-entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 720px) {
  .gb-entries { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.gb-entry {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--cyan);
}
.gb-entry.hidden {
  opacity: 0.5;
  box-shadow: 5px 5px 0 0 var(--ink-soft);
}
.gb-entry-img {
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
}
.gb-entry-img img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  object-fit: cover;
}
.gb-entry-body {
  padding: 0.75rem 0.9rem;
}
.gb-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  letter-spacing: 0.04em;
}
.gb-entry-name {
  color: var(--orange-deep);
  font-weight: 600;
  text-transform: uppercase;
}
.gb-entry-msg {
  margin: 0.5rem 0 0;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink);
  border-left: 3px solid var(--cyan);
  padding-left: 0.75rem;
}
.gb-entry-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.gb-entry-actions .btn-ghost,
.gb-entry-actions .btn-danger {
  padding: 0.3rem 0.55rem;
  font-size: 0.7rem;
}
.gb-entry-actions .btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* ====================================================
   QR-Row: zwei Sektionen nebeneinander (Galerie + Gästebücher)
   ==================================================== */
.qr-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
@media (min-width: 880px) {
  .qr-row { grid-template-columns: 1fr 1fr; }
}

.qr-row .qr-section {
  margin: 0;
}

/* Stack-Variante für mehrere Gästebücher in einer Sektion */
.qr-inner-stack {
  padding: 1rem;
  border-top: 1.5px dashed rgba(241,230,200,0.25);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qr-inner-stack > p.muted {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}

.gb-qr-block {
  border: 1.5px solid var(--paper);
  background: rgba(241,230,200,0.05);
  padding: 0.75rem;
}
.gb-qr-block-head {
  margin-bottom: 0.5rem;
}
.gb-qr-block-head h3 {
  margin: 0;
  color: var(--orange);
  font-size: 0.95rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.gb-qr-block .qr-inner {
  padding: 0;
  border-top: none;
}

.qr-preview-small {
  width: 130px;
  height: 130px;
  padding: 0.5rem;
  margin: 0;
}
@media (min-width: 640px) {
  .qr-preview-small { width: 140px; height: 140px; }
}

/* ====================================================
   HERO-CAROUSEL (Phase: Dynamisches Titelbild)
   ==================================================== */
.hero-carousel {
  position: relative;
  width: 100%;
}

.hero-carousel-track {
  position: relative;
  min-height: 280px;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.hero-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;  /* damit der Container Höhe bekommt */
}

/* Pfeile */
.hero-carousel-prev,
.hero-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 3px 3px 0 0 var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Anton', sans-serif;
  transition: transform 0.08s, box-shadow 0.08s;
}
.hero-carousel-prev { left: -8px; }
.hero-carousel-next { right: -8px; }
.hero-carousel-prev:hover,
.hero-carousel-next:hover {
  transform: translateY(-50%) translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--orange);
}
@media (max-width: 600px) {
  .hero-carousel-prev,
  .hero-carousel-next {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
  .hero-carousel-prev { left: 0; }
  .hero-carousel-next { right: 0; }
}

/* Punkte */
.hero-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hero-carousel-dot {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid var(--paper);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.hero-carousel-dot:hover {
  background: var(--orange);
}
.hero-carousel-dot.active {
  background: var(--orange);
  border-color: var(--orange);
}

/* ====================================================
   GALERIE-COVER (Background im Galerie-Header)
   ==================================================== */
.gallery-header {
  position: relative;
}
.gallery-header.has-cover {
  min-height: 220px;
  padding: 2rem 1.5rem;
  overflow: hidden;
}
@media (min-width: 720px) {
  .gallery-header.has-cover {
    min-height: 320px;
    padding: 3rem 2rem;
  }
}

.gallery-cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.gallery-cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 22, 18, 0.55) 0%,
    rgba(26, 22, 18, 0.7) 50%,
    rgba(26, 22, 18, 0.95) 100%
  );
  z-index: 1;
}

.gallery-header.has-cover .gallery-header-inner {
  position: relative;
  z-index: 2;
}

.gallery-header.has-cover h1,
.gallery-header.has-cover .archive-meta,
.gallery-header.has-cover .gallery-description,
.gallery-header.has-cover .lock-status,
.gallery-header.has-cover .auto-lock-hint {
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 rgba(0,0,0,0.5);
  color: var(--paper);
}

.gallery-header.has-cover h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.gallery-header.has-cover .gallery-description {
  color: var(--paper);
  opacity: 0.95;
}

/* ====================================================
   LIGHTBOX: Admin-Aktionen-Block (Cover + Delete)
   ==================================================== */
.lb-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1.5px dashed rgba(241,230,200,0.2);
}
.lb-admin-actions .btn-ghost,
.lb-admin-actions .btn-danger {
  flex: 1 1 auto;
  min-width: fit-content;
}
.lb-admin-actions .lb-set-cover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow: 2px 2px 0 0 var(--orange);
}
.lb-admin-actions .lb-set-cover:hover {
  box-shadow: 3px 3px 0 0 var(--orange);
}
.lb-admin-actions .lb-set-cover:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ====================================================
   QUALITÄTS-SWITCH (im Galerie-Header)
   ==================================================== */
.quality-switch-section {
  margin: 0 0 1.25rem;
}
.quality-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  padding: 0.6rem 0.85rem;
  background: var(--ink-soft);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 0 var(--cyan);
}
.quality-switch-label {
  flex: 0 0 auto;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}
.quality-switch-help {
  flex-basis: 100%;
  margin: -0.15rem 0 0.15rem;
  color: rgba(241, 230, 200, 0.76);
  font-size: 0.82rem;
  line-height: 1.35;
}
.quality-switch-buttons {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.quality-btn {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.35rem 0.7rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow: 2px 2px 0 0 var(--ink);
  font-weight: normal;
}
.quality-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--ink);
}
.quality-btn.active {
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink), inset 0 0 0 2px var(--ink);
  transform: translate(1px, 1px);
}
.quality-btn.active:hover {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 0 var(--ink), inset 0 0 0 2px var(--ink);
}

/* ====================================================
   LIGHTBOX: Quality-Zeile im Side-Panel
   ==================================================== */
.lb-quality-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--ink-soft);
  border: 1.5px solid var(--paper);
  box-shadow: 2px 2px 0 0 var(--cyan);
  margin: 0 0 0.75rem;
}
.lb-quality-indicator {
  color: var(--paper);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 1 1 auto;
}
.lb-quality-upgrade {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  box-shadow: 1px 1px 0 0 var(--ink);
}
.lb-quality-upgrade:hover {
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* Sparsam-Bilder mit dezenter Schärfe-Hilfe damit sie nicht zu pixelig wirken */
.lb-img-thumb {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Touch-Interaktion in Lightbox: Stage handhabt Touches manuell für Swipes */
.lb-media-stage img,
.lb-media-stage video {
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ===== Admin Stats Dashboard ===== */
.stats-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.5rem;
}
.stats-period-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.chart-wrap {
  background: var(--ink-soft);
  border: 2px solid var(--paper);
  padding: 1rem;
  margin-top: 0.75rem;
  position: relative;
  height: 280px;
}
.stats-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 700px) {
  .stats-grid-2 { grid-template-columns: 1fr; }
}

/* ===== Admin Overview Dashboard ===== */
.admin-nav-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.admin-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--orange);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  transition: box-shadow 0.12s, transform 0.12s;
}
.admin-tile:hover {
  box-shadow: 6px 6px 0 0 var(--orange);
  border-bottom: 2px solid var(--ink);
  transform: translate(-1px, -1px);
}
.admin-tile-icon { font-size: 1.6rem; line-height: 1; }
.admin-tile-label {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-tile-meta { font-size: 0.85rem; color: var(--ink-soft); }
.admin-tile-warn { color: var(--orange-deep); font-weight: 600; }

.admin-quick-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.stat-card.stat-warn {
  border-color: var(--orange);
  box-shadow: 4px 4px 0 0 var(--orange);
}

/* ===== Per-Gallery Viewer Stats v2 ===== */
.viewer-stats-details {
  margin-bottom: 1rem;
}
.viewer-stats-inner {
  margin-top: 0.75rem;
  padding: 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--orange);
}
.viewer-stats-inner * { color: var(--ink); }
.viewer-stats-inner .muted { color: var(--ink-soft); }

/* Section-Header in den Stats */
.vs-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.vs-section-head h4 {
  margin: 0;
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--ink);
}

/* ====== Heatmap (7×24 grid) ====== */
.vs-heatmap-block {
  margin-bottom: 1.25rem;
}
.vs-heatmap {
  display: grid;
  grid-template-rows: auto repeat(7, 1fr);
  gap: 3px;
  font-family: var(--mono);
}
.vs-heatmap-hours {
  display: grid;
  grid-template-columns: 32px repeat(24, 1fr);
  font-size: 0.65rem;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-bottom: 2px;
  position: relative;
}
.vs-heatmap-hour-tick {
  font-size: 0.65rem;
  text-align: left;
  white-space: nowrap;
}
.vs-heatmap-row {
  display: grid;
  grid-template-columns: 32px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.vs-heatmap-day-label {
  font-size: 0.7rem;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.vs-heatmap-cell {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 2px;
  background: var(--paper-2);
  cursor: default;
  transition: transform 0.1s;
}
.vs-heatmap-cell:hover {
  transform: scale(1.4);
  outline: 1px solid var(--ink);
  z-index: 2;
  position: relative;
}
.vs-heatmap-cell[data-level="0"] { background: rgba(26, 22, 18, 0.06); }
.vs-heatmap-cell[data-level="1"] { background: rgba(245, 165, 42, 0.30); }
.vs-heatmap-cell[data-level="2"] { background: rgba(245, 165, 42, 0.55); }
.vs-heatmap-cell[data-level="3"] { background: rgba(245, 165, 42, 0.78); }
.vs-heatmap-cell[data-level="4"] { background: var(--orange); }

/* Legende */
.vs-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vs-legend-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.vs-legend-cell[data-level="0"] { background: rgba(26, 22, 18, 0.06); }
.vs-legend-cell[data-level="1"] { background: rgba(245, 165, 42, 0.30); }
.vs-legend-cell[data-level="2"] { background: rgba(245, 165, 42, 0.55); }
.vs-legend-cell[data-level="3"] { background: rgba(245, 165, 42, 0.78); }
.vs-legend-cell[data-level="4"] { background: var(--orange); }

/* Tag-Reihe unter der Heatmap (Top-Stunde, Mobile, Desktop) */
.vs-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.vs-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.vs-tag-label {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.vs-tag-value {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9rem;
}
.vs-tag-meta {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* 4 Stat-Cards */
.vs-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .vs-cards { grid-template-columns: repeat(2, 1fr); }
}
.vs-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
}
.vs-card-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.vs-card-value {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
}

/* Gästebuch-Section */
.vs-gb-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--ink);
}
.vs-gb-section-head {
  margin: 0 0 0.75rem;
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--ink);
}
.vs-gb-card {
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.vs-gb-card.vs-gb-inactive { opacity: 0.55; }
.vs-gb-card:last-child { margin-bottom: 0; }
.vs-gb-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.vs-gb-title {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.vs-gb-code {
  color: var(--ink-soft);
  margin-left: auto;
}
.vs-gb-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 720px) {
  .vs-gb-row { grid-template-columns: 1fr; }
}
.vs-gb-numbers {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.vs-gb-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.vs-gb-num strong {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.vs-gb-num em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* Mini-Heatmap-Variante: kleinere Cells für GB-Cards */
.vs-heatmap-mini .vs-heatmap-cell {
  border-radius: 1px;
}
.vs-heatmap-mini .vs-heatmap-row {
  grid-template-columns: 24px repeat(24, 1fr);
  gap: 2px;
}
.vs-heatmap-mini .vs-heatmap-hours {
  grid-template-columns: 24px repeat(24, 1fr);
}
.vs-heatmap-mini .vs-heatmap-day-label {
  font-size: 0.6rem;
}
.vs-heatmap-mini .vs-heatmap-hour-tick {
  font-size: 0.55rem;
}


/* ===== Guestbook Stats Row ===== */
.gb-stats-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  color: var(--ink);
}
.gb-stat {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.gb-stat-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.gb-stat-lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* ===== Layout v2: Tools-Section + FAB ===== */

.tools-section {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--orange);
}
.tools-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
  opacity: 0.7;
  margin: 0 0 0.75rem;
}
.tools-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Einzelnes Tool als <details> mit Header-Zeile */
.tool-item {
  border: 1px solid var(--orange);
  background: rgba(245, 165, 42, 0.04);
}
.tool-item[open] {
  background: rgba(245, 165, 42, 0.08);
}
.tool-item-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  user-select: none;
}
.tool-item-summary::-webkit-details-marker { display: none; }
.tool-icon { font-size: 1.1rem; flex: 0 0 1.1rem; }
.tool-label {
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.tool-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  opacity: 0.65;
  text-align: right;
}
.tool-chevron {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.tool-item[open] .tool-chevron { transform: rotate(90deg); }
.tool-item-body {
  padding: 0 1rem 1rem;
}

/* In Tools eingebettete admin-controls — die Standard-Toggles weg, da das Tool selbst schon ein Toggle ist.
   Aber unsere Stats + Admin-Aktionen darin sind <details> — lassen wir, sind nested. */
.tools-admin-wrap {
  border: 1px solid var(--orange);
  background: rgba(245, 165, 42, 0.04);
  padding: 0.5rem;
  margin-top: 0;
}

/* Floating Action Button (Upload) */
.upload-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--paper);
  padding: 0.75rem 1.1rem;
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.12s;
}
.upload-fab:hover {
  box-shadow: 5px 5px 0 0 var(--paper);
  transform: translate(-1px, -1px);
}
.upload-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.upload-fab-plus {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
}
@media (max-width: 600px) {
  .upload-fab {
    bottom: 1rem;
    right: 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }
}

/* Inline-Upload-Anchor — wenn FAB hierher scrolled */
#upload-anchor {
  scroll-margin-top: 1rem;
}

/* Bei kollidierenden Klassen in den verschachtelten Tool-Items: nichts tun, Inheritance behalten */
.tool-item .qr-section,
.tool-item .qr-row {
  margin: 0;
}
.tool-item .qr-details > .qr-toggle {
  /* Im Tool-Item ist das Toggle redundant — wir setzen "open" hardcoded — aber lassen den Header drin */
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

/* ===== Gästebuch-Gruppierung ===== */
.gb-group {
  margin: 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--orange);
}
.gb-group:last-child { border-bottom: none; }
.gb-group-inactive { opacity: 0.55; }

.gb-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(245, 165, 42, 0.3);
}
.gb-group-title {
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  color: var(--orange);
}
.gb-group-count {
  color: var(--paper);
  opacity: 0.6;
}

/* Klickbare GB-Bilder */
.gb-tile-link {
  display: block;
  cursor: zoom-in;
  border: 2px solid transparent;
  transition: border-color 0.12s;
}
.gb-tile-link:hover {
  border-color: var(--orange);
}
.gb-tile-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lightbox: Gästebuch-Block */
.lb-gb-block {
  background: rgba(245, 165, 42, 0.08);
  border-left: 3px solid var(--orange);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.lb-gb-label {
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
  opacity: 0.85;
}
.lb-gb-msg {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--paper);
  font-style: italic;
  font-size: 0.95rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ===== Icon-Button Modifier (für Logout etc.) ===== */
.btn-icon {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1;
}

/* =================================================================
 * ADMIN-LAYOUT (admin_base.html) — konsistente Top-Tab-Navigation
 * Wird von allen Admin-Seiten geerbt.
 * ================================================================= */

.admin-shell {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.admin-shell-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--paper);
}

.admin-shell-title h1 {
  margin: 0 0 0.2rem;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--magenta);
  line-height: 1.05;
  text-transform: uppercase;
}

.admin-shell-subtitle {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shell-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ── Tab-Bar ── */
.admin-tabbar {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--paper);
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}

.admin-tab i {
  font-size: 1.1rem;
}

.admin-tab:hover {
  color: var(--paper);
}

.admin-tab.active {
  color: var(--paper);
  border-bottom-color: var(--orange);
}

.admin-tab-badge {
  background: var(--magenta);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: 1em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.4;
}

.admin-mobile-menu,
.admin-mobile-bar {
  display: none;
}

.admin-shell-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Health-Bar (Dashboard, oberste Zeile) ── */
.admin-healthbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.health-pill i {
  font-size: 1rem;
  flex-shrink: 0;
}

.health-pill-label {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.health-pill-value {
  font-weight: 600;
}

.health-pill-pct {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-left: 0.2rem;
}

.health-pill.warn {
  background: var(--acid);
  border-color: var(--ink);
}

.health-pill.alert {
  background: var(--magenta);
  color: var(--paper);
}

.health-pill.alert .health-pill-label,
.health-pill.alert .health-pill-pct {
  color: rgba(241, 230, 200, 0.85);
}

/* ── Cards ── */
.admin-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--orange);
  padding: 1.25rem 1.5rem;
}

.admin-card-danger {
  box-shadow: 5px 5px 0 0 var(--magenta);
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(26, 22, 18, 0.2);
}

.admin-card-header h2 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.admin-card-header h2 i {
  font-size: 1.3rem;
  color: var(--orange-deep);
}

.admin-card-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-deep);
  text-decoration: none;
  font-weight: 600;
}

.admin-card-link:hover {
  color: var(--magenta);
}

/* ── Pending-Box ── */
.admin-pending {
  border-left: 6px solid var(--magenta);
}

.admin-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-pending-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.15);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.05s, box-shadow 0.05s;
}

.admin-pending-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 var(--magenta);
}

.admin-pending-item.warn:hover {
  box-shadow: 3px 3px 0 0 var(--acid);
}

.admin-pending-count {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  color: var(--magenta);
  min-width: 2rem;
  text-align: center;
  line-height: 1;
}

.admin-pending-label {
  flex: 1;
  font-size: 0.95rem;
}

.admin-pending-arrow {
  color: var(--ink-soft);
}

/* ── Metric-Grid ── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.metric-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.15);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.05s, box-shadow 0.05s;
}

.metric-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 var(--orange);
  cursor: pointer;
}

.metric-icon {
  font-size: 1.5rem;
  color: var(--orange-deep);
  margin-bottom: 0.25rem;
}

.metric-value {
  font-family: 'Anton', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}

.metric-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

/* ── Quick-Actions ── */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.quick-action:hover {
  background: var(--ink);
  color: var(--paper);
}

.quick-action-primary {
  background: var(--orange);
  border-color: var(--ink);
}

.quick-action-primary:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ── Flash-Messages ── */
.admin-flash {
  padding: 0.8rem 1rem;
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

.admin-flash-success {
  background: var(--acid);
  color: var(--ink);
}

.admin-flash-error {
  background: var(--magenta);
  color: var(--paper);
}

.admin-flash code {
  background: rgba(26, 22, 18, 0.15);
  padding: 0.1em 0.4em;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── Search-Form (User-Liste) ── */
.admin-search-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.admin-search-input {
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--ink);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  min-width: 240px;
  border-radius: 0;
}

.admin-search-input:focus {
  outline: none;
  box-shadow: 3px 3px 0 0 var(--orange);
}

.admin-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.admin-search-clear:hover {
  background: var(--magenta);
  color: var(--paper);
}

/* ── Empty-State ── */
.admin-empty {
  background: var(--paper);
  color: var(--ink);
  border: 2px dashed var(--ink);
  padding: 2rem 1.5rem;
  text-align: center;
}

.admin-empty i {
  font-size: 2.5rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.5rem;
}

.admin-empty p {
  margin: 0.5rem 0 1rem;
  font-size: 1rem;
}

/* ── Mobile Admin Navigation ── */
@media (max-width: 900px) {
  body.admin-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.admin-page,
  body.admin-page main,
  body.admin-page .admin-shell {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .topbar.admin-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
  }

  .topbar.admin-mode .brand {
    min-width: 0;
    font-size: 1rem;
    gap: 0.45rem;
  }

  .topbar.admin-mode .brand-logo {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
  }

  .topbar.admin-mode .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.admin-mode .topbar-actions {
    min-width: 0;
    justify-content: flex-end;
    gap: 0.35rem;
    position: relative;
  }

  .topbar.admin-mode .topbar-menu {
    display: block;
    position: relative;
  }

  .topbar.admin-mode .topbar-menu-toggle {
    display: inline-flex;
    min-height: 36px;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    box-shadow: 3px 3px 0 0 var(--paper);
    list-style: none;
  }

  .topbar.admin-mode .topbar-menu-toggle::-webkit-details-marker {
    display: none;
  }

  .topbar.admin-mode .topbar-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 70;
    width: max-content;
    max-width: min(92vw, 340px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--ink);
    border: 2px solid var(--paper);
    box-shadow: 6px 6px 0 0 var(--orange);
  }

  .topbar.admin-mode .topbar-menu[open] .topbar-menu-panel {
    display: flex;
  }

  .topbar.admin-mode .topbar-menu-panel form,
  .topbar.admin-mode .topbar-menu-panel .btn-small {
    width: 100%;
  }

  .topbar.admin-mode .topbar-actions > a.btn-ghost {
    display: none;
  }

  .topbar.admin-mode .user-chip {
    max-width: 46vw;
    min-height: 36px;
    padding: 0.2rem 0.3rem 0.2rem 0.45rem;
    font-size: 0.68rem;
  }

  .topbar.admin-mode .user-chip-name {
    max-width: 24vw;
  }

  .topbar.admin-mode .btn-icon {
    min-height: 34px;
    padding: 0.2rem 0.45rem;
  }

  .admin-shell {
    margin: 0.75rem auto 1rem;
    padding: 0 0.75rem;
  }

  .admin-shell-header {
    display: none;
  }

  .admin-mobile-menu,
  .admin-mobile-bar {
    display: block;
  }

  .admin-mobile-menu {
    margin-bottom: 0.65rem;
  }

  .admin-mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.65rem 0.8rem;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 0 var(--orange);
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
  }

  .admin-mobile-menu-panel {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.55rem;
    background: var(--ink-soft);
    border: 2px solid var(--paper);
  }

  .admin-mobile-menu-panel a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0.55rem 0.7rem;
    color: var(--paper);
    border: 1px solid rgba(255, 249, 231, 0.25);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .admin-mobile-menu-panel a.active {
    color: var(--ink);
    background: var(--orange);
    border-color: var(--orange);
  }

  .admin-mobile-bar {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--ink-soft);
    color: var(--paper);
    border: 2px solid var(--paper);
    box-shadow: 4px 4px 0 0 var(--magenta);
  }

  .admin-mobile-kicker {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .admin-mobile-bar strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: clamp(1.35rem, 8vw, 2rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--magenta);
  }

  .admin-mobile-home {
    display: inline-flex;
    margin-top: 0.55rem;
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
  }

  .admin-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0.35rem max(0.35rem, env(safe-area-inset-left)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.35rem, env(safe-area-inset-right));
    overflow-x: hidden;
    background: var(--ink);
    border-top: 2px solid var(--paper);
    border-bottom: 0;
    box-shadow: 0 -4px 0 0 var(--orange);
  }

  .admin-tab {
    min-width: 0;
    min-height: 52px;
    justify-content: center;
    padding: 0.35rem 0.2rem;
    border: 0;
    border-radius: 0;
    margin: 0;
    white-space: normal;
    color: rgba(255, 249, 231, 0.78);
    font-size: clamp(0.58rem, 2.6vw, 0.72rem);
    line-height: 1.1;
    text-align: center;
  }

  .admin-tab i { display: none; }

  .admin-tab .admin-tab-label {
    display: block !important;
  }

  .admin-tab.active {
    color: var(--ink);
    background: var(--orange);
  }

  .admin-tab-badge {
    position: absolute;
    top: 0.15rem;
    right: 0.25rem;
    min-width: 1.15rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.62rem;
  }
}

/* ── Tables (modernisiert) ── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.92rem;
}

.admin-table thead {
  background: var(--ink);
  color: var(--paper);
}

.admin-table th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-table th.num {
  text-align: right;
}

.admin-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(26, 22, 18, 0.1);
  vertical-align: middle;
}

.admin-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table tbody tr:hover {
  background: var(--paper-2);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.user-link {
  text-decoration: none;
  color: var(--orange-deep);
  font-weight: 600;
}

.user-link:hover {
  color: var(--magenta);
}

.email-cell {
  min-width: 18rem;
  max-width: 30rem;
  overflow: visible;
  white-space: normal;
}

.email-full {
  display: inline-block;
  max-width: min(32rem, 48vw);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.admin-table th.email-col,
.admin-table td.email-cell {
  width: 34%;
}

.badge-active {
  display: inline-block;
  background: var(--acid);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.05em 0.4em;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.badge-public,
.badge-private {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(26, 22, 18, 0.2);
}

.badge-public {
  background: var(--cyan);
  color: var(--ink);
}

.badge-private {
  background: var(--paper-2);
  color: var(--ink-soft);
}

.btn-xs {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: inline-block;
  cursor: pointer;
}

.btn-xs:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-danger {
  background: var(--magenta);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.5rem 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-danger:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ── Forms im Admin-Bereich ── */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}

.admin-field input[type="text"],
.admin-field input[type="email"],
.admin-field textarea {
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  border-radius: 0;
}

.admin-field input:focus,
.admin-field textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 0 var(--orange);
}

.admin-input-readonly {
  background: var(--paper-2) !important;
  color: var(--ink-soft) !important;
}

.admin-field-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
}

.admin-form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* ── Info-List (User-Detail) ── */
.admin-info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.92rem;
}

.admin-info-list dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.admin-info-list dd {
  margin: 0;
  color: var(--ink);
}

/* ── Aktions-Grid (User-Detail Danger-Zone) ── */
.admin-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.admin-action-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--paper-2);
  border: 1px solid rgba(26, 22, 18, 0.15);
  margin: 0;
}

.admin-action-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-action-info strong {
  font-weight: 700;
  font-size: 0.95rem;
}

.admin-action-info small {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.admin-action-danger {
  border-color: var(--magenta);
  border-width: 2px;
}

/* ── Breadcrumb ── */
.admin-breadcrumb {
  margin: -0.5rem 0 1rem;
}

.admin-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.admin-breadcrumb a:hover {
  color: var(--paper);
}

/* ── User-Table-Wrap (mobile horizontal scroll) ── */
.user-table-wrap {
  overflow-x: auto;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .admin-shell {
    padding: 0 0.75rem;
  }
  .admin-shell-header {
    align-items: flex-start;
  }
  .admin-tab {
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
  }
  .admin-tab span {
    display: none;
  }
  .admin-tab.active span {
    display: inline;
  }
  .admin-card {
    padding: 1rem;
  }
  .admin-search-input {
    min-width: 100%;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-action-form {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-info-list {
    grid-template-columns: 1fr;
    gap: 0.1rem 0;
  }
  .admin-info-list dt {
    margin-top: 0.5rem;
  }
}