/* philipprott.de – Galerie
   Stil wie philipprott.de: dunkles Schiefergrau, Courier New, grüne/blaue Links.
   Courier Prime (SIL OFL, lokal gehostet) springt nur ein, wo Courier New fehlt (z. B. Android). */

@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dancing-script-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-latin-700-italic.woff2") format("woff2"); }

:root {
  --bg: #2f3437;
  --bg-deep: #282c2f;
  --fg: #d1d2d4;
  --fg-muted: #9a9ea2;
  --fg-faint: #6c7175;
  --glass: rgba(38, 42, 45, .45);
  --glass-strong: rgba(38, 42, 45, .66);
  --glass-line: rgba(255, 255, 255, .09);
  --heart: #e4687a;
  --down: #8fb3d9;
  --gutter: max(16px, env(safe-area-inset-left));
  --green: #94db4c;
  --link: #829ed0;
  --font: "Courier New", "Courier Prime", Courier, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ Startseite */

/* Blendet sich per CSS nach 3 Sekunden aus (auch ohne JavaScript); gleichzeitig startet die Diashow. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 20px);
  padding: 24px;
  text-align: center;
  background: rgba(32, 36, 38, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  animation: splash-out .6s ease 2.4s forwards;
}
.splash.gone { display: none; }
.splash-url { margin: 0; font: 700 clamp(14px, 3.2vw, 24px)/1.3 var(--font); color: var(--green); }
.splash-url .nowrap { color: var(--link); }
.splash-title {
  margin: 0;
  font: 700 clamp(60px, 15vw, 170px)/1.15 "Dancing Script", "Snell Roundhand", "Apple Chancery", cursive;
  color: var(--fg);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
  animation: splash-in 1.2s ease both;
}
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ Einzelansicht */

.viewer {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.viewer.idle { cursor: none; }

.stage { position: absolute; inset: 0; overflow: hidden; }
.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .7s ease;
  -webkit-user-drag: none;
}
.photo.show { opacity: 1; }
.stage.instant .photo { transition: none; }

/* Ambilight: unscharfe, vergrößerte Kopie des Fotos hinter dem Bild; die Farben laufen weich über den Rand hinaus */
.photo.glow {
  transform: scale(1.2);
  filter: blur(clamp(28px, 5vw, 70px)) saturate(1.25);
  will-change: opacity;
  pointer-events: none;
}
.photo.glow.show { opacity: .6; }

/* Kopfzeile: 70 % deckend, das Foto scheint zu 30 % durch; bleibt auch im Ruhemodus sichtbar */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(47, 52, 55, .7);
  font-size: 14px;
}
.tb-name { font-weight: 700; }
.script-art { font: 700 1.5em/1 "Dancing Script", "Snell Roundhand", "Apple Chancery", cursive; color: var(--fg); margin-left: .15em; }
.tb-name a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.tb-total { color: var(--fg-muted); white-space: nowrap; }
.tb-legal { color: var(--link); text-decoration: underline; text-underline-offset: 2px; margin-left: auto; white-space: nowrap; }
.tb-legal:hover, .tb-legal:focus-visible { color: var(--fg); }

.chrome { transition: opacity .45s ease, transform .45s ease; }
.viewer.idle .chrome { opacity: 0; pointer-events: none; }
.viewer.idle .dock { transform: translateY(6px); }

.pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.dock {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctl, .vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--fg);
  opacity: .88;
  transition: background-color .2s, opacity .2s, color .2s;
}
.ctl:hover, .vote:hover:not(:disabled) { background: rgba(255, 255, 255, .1); opacity: 1; }
.ctl:active, .vote:active:not(:disabled) { background: rgba(255, 255, 255, .16); }
.ctl-text { padding: 0 16px 0 13px; font-size: 14px; font-weight: 700; }
.ctl-text svg { width: 18px; height: 18px; }

#btnShuffle.on { color: var(--green); opacity: 1; background: rgba(255, 255, 255, .08); }
#btnFull .ico-exit { display: none; }
#btnFull.on .ico-exit { display: block; }
#btnFull.on .ico-enter { display: none; }

#btnPlay .ico-play { display: none; }
#btnPlay.paused .ico-play { display: block; }
#btnPlay.paused .ico-pause { display: none; }
#btnPlay .ico-play { fill: currentColor; stroke-width: 1.2; }

.vote { padding: 0 14px 0 12px; }
.vote .count { font: 700 14px/1 var(--font); min-width: 1ch; color: var(--fg-muted); transition: color .2s; }
.vote:disabled { cursor: default; opacity: .55; }
.vote.active { opacity: 1; }
.vote-up.active { color: var(--heart); }
.vote-up.active svg { fill: var(--heart); }
.vote-down.active { color: var(--down); }
.vote-down.active svg { fill: rgba(143, 179, 217, .35); }
.vote.active .count { color: var(--fg); }
.vote.pop svg { animation: pop .45s ease; }
@keyframes pop { 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

.date {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  padding: 9px 16px 10px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font: 700 16px/1 var(--font);
  color: var(--fg);
  opacity: .9;
  pointer-events: none;
  transition: opacity .45s ease;
}
.date:empty { opacity: 0; }
.viewer.idle .date { opacity: .6; }

.edge {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 96px;
  margin-top: -48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  opacity: 0;
  border-radius: 14px;
}
.edge svg { width: 30px; height: 30px; stroke-width: 1.3; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.edge-prev { left: max(8px, env(safe-area-inset-left)); }
.edge-next { right: max(8px, env(safe-area-inset-right)); }
.viewer:not(.idle) .edge { opacity: .55; }
.viewer:not(.idle) .edge:hover { opacity: 1; background: var(--glass); }

.toast {
  position: absolute;
  left: 50%;
  top: max(18px, env(safe-area-inset-top));
  transform: translate(-50%, -8px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.viewer.empty .dock, .viewer.empty .edge, .viewer.empty .date { display: none; }
.empty-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 20px/1.3 var(--font); color: var(--fg-muted); text-align: center; padding: 24px;
}

/* -------------------------------------------------------------- Übersicht */

.overview {
  position: fixed;
  inset: 0;
  z-index: 10;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  animation: fadein .3s ease;
}
@keyframes fadein { from { opacity: 0; } }

.ov-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 12px var(--gutter);
  background: rgba(47, 52, 55, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--glass-line);
}
.ov-title { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline; justify-items: start; min-width: 0; }
.ov-line { display: contents; }
.ov-name { grid-area: 1 / 1; }
.ov-total { grid-area: 1 / 2; }
.ov-legal { grid-area: 2 / 1 / 3 / 3; }
.ov-stats { grid-area: 3 / 1 / 4 / 3; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.filter span { white-space: nowrap; }
.ov-name { font: 700 19px/1.2 var(--font); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.ov-name a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.ov-total { font: 400 13px/1 var(--font); color: var(--fg-muted); white-space: nowrap; }
.ov-actions { display: flex; align-items: center; gap: 8px; }
.ov-legal { display: flex; gap: 14px; font-size: 12px; }
.ov-legal a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.ov-legal a:hover, .ov-legal a:focus-visible { color: var(--fg); }

.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .04);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  transition: background-color .2s, color .2s, border-color .2s;
}
.filter svg { width: 17px; height: 17px; }
.filter:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }
.filter[aria-pressed="true"] { color: var(--fg); border-color: rgba(228, 104, 122, .45); background: rgba(228, 104, 122, .14); }
.filter[aria-pressed="true"] svg { color: var(--heart); fill: var(--heart); }

.close {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
}
.close:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }

.timeline { padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(64px, env(safe-area-inset-bottom)) var(--gutter); max-width: 1800px; margin: 0 auto; }

.year { padding-top: 72px; }
.year:first-child { padding-top: 40px; }
.year-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-line);
}
.year-head h2 { margin: 0; font: 700 clamp(44px, 6.5vw, 76px)/.95 var(--font); letter-spacing: -.02em; color: var(--green); }
.year-head .n, .month-head .n { font: 400 13px/1 var(--font); color: var(--fg-muted); letter-spacing: .02em; white-space: nowrap; }

.month { padding-top: 30px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.month-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.month-head h3 { margin: 0; font: 700 20px/1.1 var(--font); }
.month-head .dot { color: var(--fg-faint); }

/* Justiertes Raster: Breite proportional zum Seitenverhältnis, Zeilen füllen sich gleichmäßig. */
.grid { display: flex; flex-wrap: wrap; gap: 6px; --row: 200px; }
.grid::after { content: ""; flex-grow: 1e6; }
.tile {
  position: relative;
  flex-grow: var(--r, 1.5);
  flex-basis: calc(var(--r, 1.5) * var(--row));
  aspect-ratio: var(--r, 1.5);
  max-height: calc(var(--row) * 1.6);
  overflow: hidden;
  border-radius: 3px;
  background: #383d41;
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease, transform .6s ease;
}
.tile img.loaded { opacity: 1; }
.tile:hover img { transform: scale(1.025); }
.tile:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.tile.current::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .75); border-radius: 3px; pointer-events: none; }

.ov-empty { padding: 96px 0; text-align: center; font: 700 20px/1.3 var(--font); color: var(--fg-muted); }

/* --------------------------------------------------------------- Responsiv */

@media (max-width: 900px) {
  .grid { --row: 150px; gap: 4px; }
}

@media (max-width: 640px) {
  .ctl-text span { display: none; }
  .ctl-text { padding: 0; }
  .ctl, .vote { height: 42px; min-width: 42px; }
  .ctl { padding: 0 9px; }
  .vote { padding: 0 12px 0 10px; }
  .dock { flex-direction: column; align-items: flex-end; gap: 8px; }
  .date { font-size: 14px; padding: 8px 13px 9px; }
  .edge { display: none; }
  .grid { --row: 112px; gap: 3px; }
  .year { padding-top: 56px; }
  .month { padding-top: 24px; }
  .month-head h3 { font-size: 18px; }
  .ov-name { font-size: 15px; white-space: normal; grid-column: 1 / -1; }
  /* iPhone Hochformat: Filter nur als Herz-Symbol, damit die Kopfzeile nicht zu breit wird */
  .filter span { display: none; }
  .filter { width: 38px; padding: 0; justify-content: center; }
  .ov-total { display: none; }
  .ov-stats { white-space: normal; grid-column: 1 / -1; }
}

@media (hover: none) {
  .edge { display: none; }
}

/* Handy: Bedienung und Bewertung bleiben immer sichtbar; das Datum sitzt dezent oben links im Foto */
@media (max-width: 640px), (pointer: coarse) {
  .viewer.idle .dock { opacity: 1; pointer-events: auto; transform: none; }
  /* Foto beginnt bündig unter der Kopfzeile (kein Streifen/Doppelrand dazwischen) */
  .stage { top: var(--topbar-h, 56px); }
  .photo.tall { object-position: center top; }  /* nur Hochformat bündig oben; Querformat bleibt mittig */
  .loc-city { display: none; }
  /* Bewertung rechts oberhalb der Navigation, Übersicht nur als Symbol (auch im Querformat) */
  .dock { flex-direction: column; align-items: flex-end; gap: 8px; }
  .ctl-text span { display: none; }
  .ctl-text { padding: 0; }
  .ctl, .vote { height: 42px; min-width: 42px; }
  .ctl { padding: 0 9px; }
  .vote { padding: 0 12px 0 10px; }
  .viewer.idle { cursor: auto; }
  .date {
    top: calc(var(--topbar-h, 56px) + 10px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    padding: 4px 9px 5px;
    font-size: 13px;
    background: rgba(38, 42, 45, .25);
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  }
  .viewer.idle .date { opacity: .9; }
}

/* Handy im Querformat: zweite Zeile "Fotoanzahl  Datenschutz" nebeneinander unter dem Namen */
@media (pointer: coarse) and (orientation: landscape) {
  .ov-name { grid-area: 1 / 1 / 2 / 3; }
  .ov-total { display: block; grid-area: 2 / 1; }
  .ov-legal { grid-area: 2 / 2; margin-left: 14px; }
}

/* ------------------------------------------------ Betreiber: Login, Löschen */

.tb-login { display: inline-flex; align-self: center; color: var(--fg-muted); }
.tb-login svg { width: 20px; height: 20px; }
.tb-login:hover, .tb-login:focus-visible { color: var(--fg); }
.tb-login.on { color: var(--green); }  /* angemeldet */

.vote-del.active { color: #ff6b6b; opacity: 1; }
.vote-del.active svg { fill: rgba(255, 107, 107, .3); }

.filter-del[aria-pressed="true"], .filter.danger { color: #ff8a8a; border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .14); }
.filter-del .cnt { color: var(--fg-muted); font-weight: 400; }
.tile.marked { outline: 3px solid #ff6b6b; outline-offset: -3px; }
.tile .badge { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 700 12px/1.3 var(--font); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 14, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-box {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--glass-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal-box h2 { margin: 0; font: 700 19px/1.2 var(--font); }
.modal-box p { margin: 0; line-height: 1.4; }
.modal-box input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
  font: 400 16px var(--font);   /* 16px verhindert das Hineinzoomen auf dem iPhone */
}
.modal-box input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.modal-hint { color: var(--fg-muted); font-size: 13px; }
.modal-msg { min-height: 1.2em; color: #ff8a8a; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06); font-weight: 700; }
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn.primary { color: #10150a; background: var(--green); border-color: transparent; }
.btn.danger { color: #fff; background: #c0392b; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .photo, .chrome, .tile img, .overview { transition: none; animation: none; }
}