/* ==========================================================================
   Fotogalerie – Design nach Entwurf "Looking through my eyes"
   Dunkler Grund, Fotos tragen die Seite. Vier Schriften mit je einer Aufgabe:
   Syne (Display), Manrope (Interface), Newsreader (Fließtext),
   JetBrains Mono (technische Zeilen, Labels).
   ========================================================================== */
:root {
  --ink: #0b0b0c;          /* Grundton, fast schwarz */
  --ink-2: #16161a;        /* leicht abgesetzte Flächen */
  --ink-3: #2a2a2e;        /* Linien, Rahmen */
  --paper: #efe8dc;        /* Textfarbe, Creme */
  --paper-dim: #a39d93;    /* Nebentext */
  --accent: #c8ff34;       /* Akzent, sparsam */

  --font-display: 'Syne', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-prose: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --gap: 8px;              /* Rasterfuge, zugleich Zeilenhöhe des Masonry */
  --pad: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Der Footer sitzt immer am unteren Fensterrand, auch wenn eine Seite wenig
   Inhalt hat (etwa Contact). Erreicht wird das ueber den Inhaltsbereich, der
   den verbleibenden Platz aufbraucht - der Footer selbst behaelt dadurch auf
   jeder Seite dieselbe Hoehe. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* Auftakt und Markenleiste behalten ihre feste Hoehe, statt gestaucht zu werden */
body > .site-header,
body > .hero,
body > .tickbar {
  flex: 0 0 auto;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
p { font-family: var(--font-prose); font-weight: 400; line-height: 1.55; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }

/* ---------- Zeiger ----------
   Kein Systempfeil, sondern ein feines Fadenkreuz aus vier Strichen mit
   dunkler Aussenlinie, damit es ueber hellen wie dunklen Fotos sichtbar
   bleibt. Ueber anklickbaren Elementen wechselt der innere Strich auf den
   Akzent. Genau so in der Vorlage festgelegt. */
html, body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><g stroke='%230b0b0c' stroke-opacity='0.5' stroke-width='2.6' stroke-linecap='round'><path d='M9 1.5 L9 6.4'/><path d='M9 11.6 L9 16.5'/><path d='M1.5 9 L6.4 9'/><path d='M11.6 9 L16.5 9'/></g><g stroke='%23efe8dc' stroke-width='1' stroke-linecap='round'><path d='M9 1.5 L9 6.4'/><path d='M9 11.6 L9 16.5'/><path d='M1.5 9 L6.4 9'/><path d='M11.6 9 L16.5 9'/></g></svg>") 9 9, default;
}

a, button, figure, .grid figure img, [data-arrow] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><g stroke='%230b0b0c' stroke-opacity='0.5' stroke-width='2.6' stroke-linecap='round'><path d='M9 1.5 L9 6.4'/><path d='M9 11.6 L9 16.5'/><path d='M1.5 9 L6.4 9'/><path d='M11.6 9 L16.5 9'/></g><g stroke='%23c8ff34' stroke-width='1' stroke-linecap='round'><path d='M9 1.5 L9 6.4'/><path d='M9 11.6 L9 16.5'/><path d='M1.5 9 L6.4 9'/><path d='M11.6 9 L16.5 9'/></g></svg>") 9 9, pointer;
}

input, textarea { cursor: text; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ---------- Kopfzeile ---------- */
/* Kopfzeile nach Vorlage: Marke links in Syne, rechts das Work-Klappmenue
   mit den Kapiteln sowie About. Steht ueber der Aufnahme, nicht darauf. */
.site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 28px 40px 0;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
  position: relative;
}

.nav-label,
.nav-work {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.nav-label { color: var(--paper); }
.nav-label--current { color: var(--accent); }
.nav-work:hover, .nav-label:hover { color: var(--accent); }
.nav-work svg { transition: transform 260ms ease; }
.nav-work[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Klappmenue mit Milchglas-Hintergrund */
.nav-panel {
  display: none;
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 40;
  min-width: 177px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(11, 11, 12, 0.62);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(239, 232, 220, 0.14);
  padding: 8px 0;
}
.nav-panel.open { display: block; }
.nav-panel a {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 16px;
  color: rgba(239, 232, 220, 0.58);
  transition: color 260ms ease;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.nav-panel a:hover { color: var(--accent); }

/* ---------- Auftakt: die Augen-Aufnahme ---------- */
.hero {
  position: relative;
  height: calc(96vh - 150px);
  min-height: 420px;
  overflow: hidden;
  background: var(--ink-2);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 44%;   /* Pupille sitzt so im oberen Drittel */
  opacity: 0.92;
}

/* Senkrechtes Label am linken Rand */
.hero-sidelabel {
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Dreizeiliger Schriftzug: normal, Kontur, Akzent - jede Zeile anders
   eingerückt, damit der Blick über die Aufnahme wandert. */
.hero-title {
  position: absolute;
  inset: auto 0 96px 0;
  margin: 0;
  pointer-events: none;
}

.hero-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 152px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-line--1 { padding-left: 48px; }

.hero-line--2 {
  display: flex;
  justify-content: flex-end;
  margin-right: -4vw;
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  text-stroke: 2px var(--paper);
}

.hero-line--3 {
  padding-left: clamp(24px, 10vw, 180px);
  word-spacing: 0.2em;
  color: var(--accent);
}

/* ---------- Markenleiste zwischen Auftakt und Kapiteln ---------- */
.tickbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  height: 62px;
  border-top: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  padding: 0 40px;
}
.tickbar-inner { position: relative; display: flex; align-items: center; }
.tickbar-label {
  position: absolute;
  right: 100%;
  margin-right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: var(--paper-dim);
  opacity: 0;
  transition: opacity 260ms ease;
}
.tickbar-inner:hover .tickbar-label,
.tickbar-inner:focus-within .tickbar-label { opacity: 1; }
.ticks { display: flex; align-items: center; gap: 5px; height: 26px; }
.ticks a {
  width: 8px;
  height: 26px;
  background: var(--ink-3);
  transition: background 300ms ease;
}
.ticks a:hover, .ticks a:focus-visible { background: var(--accent); }

/* ---------- Kapitel: zweispaltiges Raster, 3:2 ---------- */
.chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 8px 96px;
}
@media (max-width: 1100px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .chapters { grid-template-columns: minmax(0, 1fr); } }

.chapter-card {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.09);
}
.chapter-card img { width: 100%; height: 100%; object-fit: cover; }

/* Verlauf und Titel liegen still und treten beim Darueberfahren hervor */
.chapter-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 12, 0.6), rgba(11, 11, 12, 0) 58%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.chapter-card:hover::after, .chapter-card:focus-visible::after { opacity: 1; }

.chapter-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 22px 26px;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.chapter-card:hover .chapter-caption,
.chapter-card:focus-visible .chapter-caption { opacity: 1; }

.chapter-caption span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}

/* Ohne Zeigegeraet gibt es kein Darueberfahren - dort stehen Titel dauerhaft */
@media (hover: none) {
  .chapter-card::after, .chapter-caption { opacity: 1; }
}

/* ---------- Album: Kopf und Masonry-Raster ---------- */
.album-head { padding: 100px 40px 96px; }
.album-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 15ch;
}
/* Der Einleitungstext steht rechts, gegen die grosse Ueberschrift gesetzt */
.album-lead { display: flex; justify-content: flex-end; margin-top: 40px; }
.album-lead p {
  margin: 0;
  width: 38ch;
  max-width: 100%;
  font-family: var(--font-prose);
  font-weight: 300;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: 0.004em;
  text-wrap: pretty;
  color: var(--paper-dim);
}

/* Die Positionen setzt assets/js/main.js: jede Zeile wird so skaliert, dass
   sie die volle Breite ausfuellt. Die Bilder liegen deshalb absolut. */
.grid {
  position: relative;
  padding: 0 40px 120px;
}

.grid figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.grid figure > div {
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.09);
  transition: filter 500ms ease;
}
/* "Anheben" heisst Aufhellen, nicht Vergroessern */
.grid figure:hover > div { filter: brightness(1.1); }
.grid figure img { width: 100%; height: 100%; object-fit: cover; }

/* Ohne JavaScript stehen die Bilder untereinander statt uebereinander */
.grid.no-js figure { position: static; margin: 0 0 8px; }

/* ---------- Abschluss: naechstes Kapitel ---------- */
.next-chapter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 0 40px 120px;
}
.next-chapter .mono { color: var(--ink-3); color: #6e6a64; }
.next-chapter a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.next-chapter a:hover { color: var(--accent); }

/* ---------- Einzelansicht ---------- */
.single {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 40px 8px 24px;
}
.single[hidden] { display: none; }

.single-stage {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.single-image {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.13);
}

/* Bildunterschrift rechtsbuendig unter dem Bild, kursiv in der Lesefont */
.single-caption {
  margin-top: 12px;
  align-self: flex-end;
  max-width: 100%;
  font-family: var(--font-prose);
  font-weight: 300;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  text-wrap: pretty;
  color: var(--paper-dim);
}
.single-caption:empty { display: none; }

.single-prev, .single-next, .single-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: #6e6a64;
  padding: 8px;
  transition: color 260ms ease, opacity 600ms ease;
}
.single-prev:hover, .single-next:hover, .single-close:hover { color: var(--paper); }
.single-close { position: absolute; top: 10px; right: 14px; }
.single-counter {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6e6a64;
}

/* Die Bedienelemente zeigen sich zwei Sekunden und treten dann zurueck */
.single-chrome { transition: opacity 600ms ease; }
.single.idle .single-chrome { opacity: 0; pointer-events: none; }

/* ---------- About ---------- */
.about-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: start;
  padding: 24px 40px 96px;
  border-top: 1px solid var(--ink-3);
}
@media (max-width: 860px) { .about-body { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.about-text { padding-top: 40px; }
.about-text p {
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--paper-dim);
}
.about-text p:last-child { margin-bottom: 0; }
.about-lead {
  font-weight: 300;
  font-size: 21px !important;
  line-height: 1.55 !important;
  color: #bdb7ac !important;
}

.about-side { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; }
.about-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.11);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Fußzeile ---------- */
.site-footer {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--ink-3);
  padding: 22px 40px 26px;
  overflow: hidden;
}
.footer-mark-wrap { display: flex; align-items: center; }
.footer-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  word-spacing: 0.16em;
  text-transform: uppercase;
  max-width: 16ch;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.footer-links { display: flex; justify-content: flex-end; gap: 22px; }
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.footer-links a:hover { color: var(--accent); }
.footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a857c;
}

/* Zugang zur Verwaltung: liegt nur knapp ueber dem Hintergrund und faellt
   beim Lesen nicht auf. Wer weiss, wo er ist, findet ihn sofort. */
.admin-hint {
  display: inline-flex;
  color: #26262b;
  transition: color 300ms ease;
}
.admin-hint:hover,
.admin-hint:focus-visible { color: var(--accent); }

/* ---------- Contact ---------- */
.page-head { padding: 96px 40px 24px; }
.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 14ch;
}

.contact-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 24px 40px 120px;
  border-top: 1px solid var(--ink-3);
}
@media (max-width: 860px) { .contact-body { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.contact-text { padding-top: 40px; }
.contact-text p {
  margin: 0 0 28px;
  max-width: 48ch;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--paper-dim);
}
/* Die Adresse ist der eigentliche Inhalt der Seite - entsprechend gesetzt */
.contact-mail {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--paper);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
}
.contact-mail:hover { color: var(--accent); }

/* Faktenliste, auch auf der About-Seite verwendet */
.facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}
.facts--contact { padding-top: 46px; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--ink-3);
  padding: 9px 0;
}
.facts--contact > div { padding: 11px 0; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: #8a857c; }
.facts dd { margin: 0; text-align: right; }

/* ---------- Impressum ---------- */
.legal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 96px 40px 24px;
}
.legal-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 18ch;
}
.legal-kicker {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a857c;
}
.legal-lang { display: flex; gap: 4px; padding-bottom: 8px; }
.legal-lang a {
  border: 1px solid var(--ink-3);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.legal-lang a.current { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.legal-lang a:hover:not(.current) { color: var(--accent); }

.legal-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
  padding: 32px 40px 120px;
  border-top: 1px solid var(--ink-3);
}
@media (max-width: 900px) { .legal-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .legal-body { grid-template-columns: minmax(0, 1fr); } }

.legal-body h2 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-dim);
  white-space: pre-line;
}
.legal-note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a857c;
}

/* ==========================================================================
   Admin – gleiche Grundfarben, funktional statt inszeniert
   ========================================================================== */
.admin-body { background: var(--ink-2); }

.admin-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--pad);
  background: var(--ink);
  border-bottom: 1px solid var(--ink-3);
}
.admin-header nav a { margin-left: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); }

.admin-main { max-width: 1000px; margin: 0 auto; padding: var(--pad); }

.admin-panel {
  background: var(--ink);
  border: 1px solid var(--ink-3);
  padding: 24px;
  margin-bottom: 16px;
}
.admin-panel h2 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 16px;
}

label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); margin: 16px 0 6px; }
input[type=text], input[type=password], textarea {
  width: 100%; padding: 11px 13px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: var(--paper);
  font-family: var(--font-ui); font-size: 14px;
}
input:focus, textarea:focus { border-color: var(--accent); }

button, .danger-button {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  padding: 11px 18px;
  border: none;
  background: var(--accent); color: var(--ink);
  text-align: left;
}
button:hover { background: var(--paper); }

.danger-form { margin-top: 16px; }
.danger-button { background: none; border: 1px solid var(--ink-3); color: var(--paper-dim); }
.danger-button:hover { border-color: #9c3b2e; color: #d4593f; background: none; }

.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }
.stacked-form button { margin-top: 18px; }
.form-error { color: #d4593f; font-size: 13px; font-family: var(--font-ui); }

.login-box {
  max-width: 340px; margin: 18vh auto; padding: 32px;
  background: var(--ink); border: 1px solid var(--ink-3);
}
.login-box button { width: 100%; margin-top: 22px; text-align: center; }
.hash-out {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-all;
  white-space: pre-wrap;
  color: var(--accent);
}

.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.admin-tile-image { aspect-ratio: 4/3; background: var(--ink-2); border: 1px solid var(--ink-3); overflow: hidden; }
.admin-tile-image img { width: 100%; height: 100%; object-fit: cover; }
.admin-tile-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-mono); font-size: 10px; color: var(--paper-dim); }
.admin-tile-meta { padding-top: 8px; display: flex; justify-content: space-between; font-size: 13px; }
.muted { color: var(--paper-dim); }

.dropzone {
  border: 1px dashed var(--ink-3);
  padding: 44px; text-align: center;
  color: var(--paper-dim); font-family: var(--font-prose);
}
.dropzone.dragover { border-color: var(--accent); color: var(--accent); }

.upload-queue { list-style: none; margin: 16px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; }
.upload-queue li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--ink-3); color: var(--paper-dim); }
.upload-queue li.status-ok { color: var(--paper); }
.upload-queue li.status-error { color: #d4593f; }

.admin-grid--photos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.admin-photo { border: 1px solid var(--ink-3); }
.admin-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Bearbeitungsfelder je Foto - bewusst kompakt, es stehen viele nebeneinander */
.admin-photo-text {
  padding: 8px 8px 10px;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-3);
}
.admin-photo-text label {
  margin: 6px 0 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.admin-photo-text label:first-of-type { margin-top: 0; }
.admin-photo-text input,
.admin-photo-text textarea {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--ink);
  resize: vertical;
}
.admin-photo-text button {
  margin-top: 8px;
  width: 100%;
  padding: 7px;
  font-size: 11px;
  text-align: center;
}

.admin-photo-actions { display: flex; padding: 4px; background: var(--ink-2); border-top: 1px solid var(--ink-3); }
.admin-photo-actions form { display: flex; width: 100%; justify-content: space-between; }
.admin-photo-actions button { background: none; color: var(--paper-dim); padding: 5px 7px; font-size: 13px; font-weight: 400; }
.admin-photo-actions button:hover { background: none; color: var(--accent); }