/* =========================
   THEME-VARIABLEN
   ========================= */

/* Standard: Light (Normal) */
:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #16181d;
  --muted: #6e7380;
  --primary: #0a58ca;
  --primary-contrast: #ffffff;
  --border: #e6e8ef;
  --shadow: 0 6px 20px rgba(0,0,0,.08);

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Dark Mode */
html[data-theme="dark"] {
  --bg: #0b0c10;
  --panel: #11131a;
  --text: #e8eaf1;
  --muted: #a4a8b3;
  --primary: #5da9e9;
  --primary-contrast: #08131d;
  --border: #1f2330;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* =========================
   GLOBAL
   ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

.container {
  max-width: 1152px;
  padding: 0 20px;
  margin: 0 auto;
}

h1 { margin: 0 0 1rem 0; font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); }
a { color: var(--primary); }

/* =========================
   HEADER / FOOTER
   ========================= */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in lab, var(--panel), transparent 25%);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
}
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .2px; }
.top-nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-contrast);
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: var(--shadow);
}
.btn:hover { filter: brightness(1.08); }

/* Theme-Toggle spezifisch */
.theme-toggle {
  position: relative;
  line-height: 1;
}
.theme-toggle::before {
  content: attr(data-icon);
  font-size: 1.1rem;
}
.theme-toggle.is-dark { background: #ffd76a; color: #3a2e00; } /* helles Button-Feedback im Dark Mode */
.theme-toggle.is-dark:hover { filter: brightness(1.05); }

.hello { color: var(--muted); font-size: .95rem; }

.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: color-mix(in lab, var(--panel), transparent 20%);
}
.site-footer .container { padding: 22px 0; text-align: center; }

/* =========================
   BREADCRUMBS
   ========================= */
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-wrap: wrap; gap: 6px;
}
.breadcrumbs li+li::before {
  content: "›"; color: var(--muted); margin-right: 6px;
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .active { color: var(--text); font-weight: 600; }

/* =========================
   KACHEL-GRIDS (Overview + Album)
   ========================= */
.album-grid,
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}

/* Karten-Stil – für Alben und Bilder einheitlich */
.album-card,
.image-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: 140px auto; /* Cover-Höhe + Textbereich */
  overflow: clip;
  transition: transform .12s ease, border-color .12s ease;
}
.album-card:hover,
.image-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in lab, var(--primary), var(--border) 60%);
}

/* Cover/Preview */
.album-cover,
.image-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: #0001;
}
.album-cover { display: grid; place-items: center; font-size: 64px; }

/* Meta/Untertitel */
.album-meta,
.image-name {
  padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--panel), transparent 30%);
}
.album-title { font-weight: 700; }
.album-path  { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-name  { font-weight: 700; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Optional: kompaktere Kacheln in album.html */
.image-grid.compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* =========================
   BILD-VIEWER
   ========================= */
.viewer {
  margin-top: 8px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(8px, 2vw, 16px);
  display: grid;
  place-items: center;
}
.viewer-img {
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 240px);
  width: auto; height: auto;
  display: block;
}
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  text-decoration: none; font-size: 24px;
  background: color-mix(in lab, var(--panel), transparent 10%);
  border: 1px solid var(--border);
  border-radius: 999px; width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--text);
}
.viewer-nav:hover { filter: brightness(1.2); }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }
.viewer-nav.full { right: 10px; top:30px }

/* =========================
   FORMULARE (Login etc.)
   ========================= */
form .field { margin: 12px 0; }
input[type="text"], input[type="password"] {
  width: 100%; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.error { color: #c62828; margin-bottom: 1rem; }

/* =========================
   Overlay-Bänder für Kacheln (Overview + Album)
   ========================= */

/* 1) Theme-Variable für das halbtransparente Band */
:root {
  /* helles Theme: leichtes Weiß mit ~72% Opazität */
  --tile-meta-bg: rgba(255, 255, 255, 0.72);
}
html[data-theme="dark"] {
  /* dunkles Theme: dunkle Fläche mit ~55% Opazität */
  --tile-meta-bg: rgba(17, 19, 26, 0.55);
}

/* 2) Kachel-Container: ein einspaltiges Grid, damit Bild & Text in derselben Zelle liegen */
.album-card,
.image-item {
  /* bleibt Grid, aber wir nutzen nur eine "Schicht" (1/1) zum Überlagern */
  grid-template-rows: 140px; /* überschreibt vorher: 140px auto */
  position: relative;
  overflow: clip; /* = overflow: hidden, aber moderner */
}

/* 3) Bild/Preview füllt die Zelle */
.album-cover,
.image-item img {
  grid-area: 1 / 1;
}

/* 4) Textband als Overlay am unteren Rand */
.album-meta,
.image-name {
  grid-area: 1 / 1;
  align-self: end;        /* nach unten */
  display: block;
  margin: 0;
  padding: 10px 12px;
  background: var(--tile-meta-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); /* leichter Blur fürs Bild dahinter */
  border-top: 1px solid rgba(0, 0, 0, 0.06); /* dezente Trennlinie */
  /* Typografie/Truncation bleiben wie gehabt */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 5) Titel/Untertitel wie zuvor */
.album-title { font-weight: 700; }
.album-path  { color: var(--muted); font-size: .9rem; }

/* Hinweis: Für Bild-Kacheln ist .image-name der gesamte Overlay-Text,
   für Album-Kacheln enthält .album-meta sowohl .album-title als auch .album-path. */

/* =========================
   Parameter für Höhe & Transparenz
   ========================= */
:root {
  /* sichtbare Bildhöhe (ohne Band) */
  --tile-cover-height: 160px; /* 140px */

  /* Höhe des Bandes (kannst du nach Geschmack anpassen) */
  --tile-band-height: 44px;

  /* Halbtransparente Bandfarbe: 50 % */
  --tile-meta-bg: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] {
  /* 50 % im Dark Mode */
  --tile-meta-bg: rgba(17, 19, 26, 0.5);
}

/* =========================
   Kachelhöhe um Bandhöhe vergrößern
   ========================= */
.album-card,
.image-item {
  /* statt 140px nur fürs Bild erhöhen wir die einzige Grid-Zeile
     um die Bandhöhe; das Bild füllt die gesamte Höhe */
  grid-template-rows: calc(var(--tile-cover-height) + var(--tile-band-height));
  position: relative;
  overflow: clip;
}

/* Bild/Preview füllt die gesamte (vergrößerte) Kachelhöhe */
.image-item img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-cover {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: grid !important;       /* zentrierendes Grid aktivieren */
  place-items: center !important; /* horizontal + vertikal zentrieren */
  font-size: 64px;                /* wie zuvor */
  text-align: center;             /* Fallback */
  line-height: 1;                 /* saubere Vertikal-Zentrierung für Emoji/SVG */
}
.album-meta,
.image-name {
  position: relative;
  z-index: 1;
}


/* Band als Overlay am unteren Rand – 50 % transparent */
.album-meta,
.image-name {
  grid-area: 1 / 1;
  align-self: end;
  height: var(--tile-band-height);
  padding: 8px 12px;
  background: var(--tile-meta-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 6px;

  /* Truncation */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Falls du in der Album-Übersicht zwei Zeilen (Titel + Pfad) möchtest,
   kannst du die Bandhöhe nur für .album-card erhöhen: */
.album-card {
  /* Beispiel: etwas höheres Band für zwei Zeilen */
  /* --tile-band-height: 60px; */
}

/* Typografie wie gehabt */
.album-title { font-weight: 700; }
.album-path  { color: var(--muted); font-size: .9rem; }

/* Chips im Band (Name + Zähler) */
.album-meta { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: .35rem;
        padding: 4px 10px; border-radius: 999px; font-size: .85rem; line-height: 1.2; white-space: nowrap; }
.chip--title { background: rgba(0,0,0,.82); color: #fff; }
.chip--muted { background: rgba(255,255,255,.6); color: var(--text); }
html[data-theme="dark"] .chip--muted { background: rgba(255,255,255,.2); }

/* Ordnersymbol mittig halten */
.album-cover {
  grid-area: 1 / 1; width: 100%; height: 100%;
  display: grid !important; place-items: center !important;
  font-size: 64px; line-height: 1;
}

/* Bilder füllen die Kachel */
.image-item img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Auf dem iPhone den "Vollbild" Button ausblenden, da er nicht ünterstüzt wird! */
@media only screen and (max-width: 768px) {
  .viewer button[title="Vollbild"] {
    display: none;
  }
}

/* Vorschau für normale Seite */
.img-album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0001;
  grid-area: 1 / 1;
  padding-left: 3%;
  padding-top: 3%;
}
.img-album-cover img {
  width:48%;
  max-height:90px;
  /* margin-top:0.5em; */
  border: 1px solid #ccc;
  border-radius: 4px;
  object-fit: cover;
}