/* ═══════════════════════════════════════════════════════════════
   TR Family Album v31 — Stabil, App-ready, Tablet-optimiert
   ═══════════════════════════════════════════════════════════════ */

/* ── THEMES ─────────────────────────────────────────────────── */
:root{
  --accent:#d8a33d; --text:#fff1c2; --bg:#060402;
  --stageA:#060402; --stageB:#1e0e04;
  --panel:rgba(6,4,2,.90); --border:rgba(255,255,255,.10);
  --effect-dur:1.1s;
}
body.theme-wedding{ --accent:#e8bd6a; --stageA:#1a0c04; --stageB:#4a2a10; }
body.theme-temple { --accent:#d8a33d; --stageA:#060101; --stageB:#2d0604; }
body.theme-family { --accent:#c79855; --stageA:#1a1008; --stageB:#5a3a18; }
body.theme-cinema { --accent:#aaaaaa; --stageA:#020202; --stageB:#111111; }

/* ── RESET & BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Lato',Georgia,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button { font:inherit; cursor:pointer; }
img { display:block; }

/* ── ADMIN / GAST MODUS ──────────────────────────────────────── */
body.guest-mode  .admin-only        { display:none !important; }
body.guest-mode  .admin-only-inline { display:none !important; }
body.admin-mode  .guest-only        { display:none !important; }

/* ── START-SCREEN ────────────────────────────────────────────── */
.startScreen {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg); overflow:hidden;
}
.startBg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(216,163,61,.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%,rgba(216,163,61,.10), transparent 50%),
    linear-gradient(160deg,#0a0500,#000);
}
.startBg::after {
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:radial-gradient(circle at 25px 25px, var(--accent) 1px, transparent 1px);
  background-size:50px 50px;
}

.startHeader {
  position:relative; z-index:2; flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 32px; border-bottom:1px solid var(--border);
}
.startLogo   { display:flex; align-items:center; gap:16px; }
.startLogo img { height:50px; filter:drop-shadow(0 0 16px rgba(216,163,61,.4)); }
.startTitle  { font-family:'Playfair Display',serif; font-size:26px; color:var(--accent); }
.startSub    { font-size:12px; color:rgba(255,241,194,.45); letter-spacing:.12em; margin-top:3px; }
.startHeaderRight { display:flex; align-items:center; gap:14px; }
.startYear   { font-size:38px; font-family:'Playfair Display',serif; color:rgba(216,163,61,.18); font-weight:700; }

/* ── SUCHE ───────────────────────────────────────────────────── */
.searchBar {
  position:relative; z-index:2; flex-shrink:0;
  padding:12px 32px 0;
}
.searchWrap {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:999px; padding:10px 18px;
  transition:border-color .2s, box-shadow .2s;
}
.searchWrap:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent), transparent 78%);
}
.searchIcon { font-size:17px; opacity:.45; flex-shrink:0; }
#searchInput {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:15px; min-width:0;
}
#searchInput::placeholder { color:rgba(255,255,255,.28); }
.searchClear { background:none; border:none; color:#666; font-size:16px; padding:0; flex-shrink:0; }
.personChips { display:flex; flex-wrap:wrap; gap:7px; padding:10px 0 6px; }
.personChip {
  border:1px solid color-mix(in srgb, var(--chip-color, var(--accent)), transparent 50%);
  background:color-mix(in srgb, var(--chip-color, var(--accent)), transparent 88%);
  color:var(--text); border-radius:999px; padding:6px 14px; font-size:13px; transition:all .2s;
}
.personChip:hover { background:var(--chip-color, var(--accent)); color:#000; }

/* ── ALBUM-GRID ──────────────────────────────────────────────── */
.albumGrid {
  position:relative; z-index:2; flex:1; overflow-y:auto;
  padding:20px 32px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:18px; align-content:start;
  -webkit-overflow-scrolling:touch;
}
.albumLoading, .albumError {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:rgba(255,255,255,.35); font-size:17px;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.albumCard {
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:18px; overflow:hidden; text-align:left;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.albumCard:hover, .albumCard:focus {
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  border-color:color-mix(in srgb, var(--accent), transparent 40%);
}
.albumCardImg { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#111; }
.albumCardImg img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform .4s; }
.albumCard:hover .albumCardImg img { transform:scale(1.05); }
.albumCardNoImg { width:100%; height:100%; display:grid; place-items:center; font-size:44px; color:rgba(255,255,255,.12); }
.albumCardOverlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); padding:10px 12px 8px; display:flex; justify-content:flex-end; }
.albumCardCount { font-size:11px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.4); padding:3px 9px; border-radius:999px; backdrop-filter:blur(6px); }
.albumCardInfo { padding:14px 16px 16px; }
.albumCardTitel { font-family:'Playfair Display',serif; font-size:17px; color:var(--text); margin-bottom:3px; }
.albumCardDatum { font-size:11px; color:var(--accent); letter-spacing:.06em; margin-bottom:5px; }
.albumCardDesc  { font-size:12px; color:rgba(255,255,255,.4); line-height:1.5; }
.dragHint { font-size:11px; color:rgba(255,255,255,.18); margin-top:7px; }
body.admin-mode .albumCard:hover .dragHint { color:var(--accent); }
.kiAlbumBadge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:var(--accent); font-size:11px; border-radius:999px; padding:3px 8px; backdrop-filter:blur(4px); }

/* Suchergebnisse */
.searchResults { position:relative; z-index:2; flex:1; overflow-y:auto; padding:0 32px; -webkit-overflow-scrolling:touch; }
.searchResultsHeader { display:flex; justify-content:space-between; align-items:center; padding:16px 0 10px; border-bottom:1px solid var(--border); margin-bottom:14px; position:sticky; top:0; background:var(--bg); z-index:1; }
#searchResultsTitle { font-family:'Playfair Display',serif; font-size:15px; color:var(--accent); }
#searchResultsClose { background:none; border:1px solid var(--border); color:rgba(255,255,255,.45); border-radius:999px; padding:6px 14px; font-size:13px; }
.searchAlbumGroup { margin-bottom:22px; }
.searchAlbumTitle { font-size:13px; color:var(--accent); margin-bottom:8px; font-style:italic; }
.searchFotoGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px; }
.searchFoto { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#111; padding:0; transition:transform .2s,border-color .2s; position:relative; }
.searchFoto:hover { transform:scale(1.05); border-color:var(--accent); }
.searchFoto img { width:100%; height:90px; object-fit:cover; }
.searchFotoPersons { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.65); color:var(--accent); font-size:10px; padding:3px 5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.searchEmpty { text-align:center; padding:40px; color:rgba(255,255,255,.3); display:flex; flex-direction:column; gap:10px; align-items:center; }

/* Start-Footer */
.startFooter { position:relative; z-index:2; flex-shrink:0; padding:12px 32px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,.28); }
.footerRight { display:flex; align-items:center; gap:12px; }
.kiToggleBtn { border:1px solid color-mix(in srgb, var(--accent), transparent 55%); background:rgba(20,13,3,.6); color:var(--accent); border-radius:999px; padding:6px 14px; font-size:12px; }

/* Admin Button */
.adminToggleBtn { border:1px solid var(--border); background:rgba(255,255,255,.05); color:rgba(255,255,255,.35); border-radius:999px; padding:7px 14px; font-size:13px; transition:all .2s; }
body.admin-mode .adminToggleBtn { border-color:var(--accent); color:var(--accent); background:rgba(216,163,61,.1); }

/* ── KI PANEL ────────────────────────────────────────────────── */
.kiPanel { position:fixed; bottom:0; left:0; right:0; z-index:60; background:rgba(4,2,0,.97); backdrop-filter:blur(18px); border-top:1px solid color-mix(in srgb,var(--accent),transparent 55%); max-height:72vh; overflow-y:auto; }
.kiPanelHeader { display:flex; justify-content:space-between; align-items:center; padding:13px 20px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; background:rgba(4,2,0,.97); z-index:1; }
.kiPanelHeader span { color:var(--accent); font-size:14px; font-weight:bold; }
.kiPanelHeader button { background:none; border:none; color:#888; font-size:20px; cursor:pointer; }
.kiPanelBody { display:flex; gap:14px; padding:14px 20px; flex-wrap:wrap; }
.kiSection { flex:1; min-width:200px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px; }
.kiSection strong { display:block; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px; }
.kiRow { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:5px; }
.kiRow input, .kiRow select { flex:1; min-width:100px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:white; border-radius:8px; padding:7px 10px; font-size:13px; outline:none; }
.kiRow input:focus { border-color:var(--accent); }
.kiBtn { border:1px solid color-mix(in srgb,var(--accent),transparent 50%); background:rgba(20,13,3,.75); color:var(--text); border-radius:999px; padding:7px 13px; font-size:12px; cursor:pointer; white-space:nowrap; }
.kiBtn:hover { background:var(--accent); color:#000; }
.kiHint { font-size:11px; color:#555; margin-top:5px; }
.kiHint a { color:var(--accent); }
.kiStatus { font-size:13px; padding:5px 0; color:#aaa; min-height:20px; }
.kiStatus.ok   { color:#6ec97c; }
.kiStatus.warn { color:#f0b840; }
.kiStatus.err  { color:#e06060; }
.kiPersonList  { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; max-height:110px; overflow-y:auto; }
.kiPersonItem  { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.04); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--text); }
.kiPersonItem button { background:none; border:none; color:#666; cursor:pointer; margin-left:auto; font-size:13px; }
.kiPersonColor { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.kiProgress { margin-top:9px; }
.kiProgressBar { background:rgba(255,255,255,.1); border-radius:999px; height:5px; overflow:hidden; }
#kiProgressFill { height:100%; background:var(--accent); border-radius:999px; transition:width .3s; width:0; }
#kiProgressText { font-size:11px; color:#666; margin-top:3px; }

/* ── ALBUM-ANSICHT ───────────────────────────────────────────── */
.albumView { position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }

/* TV Exit */
#tvExitBtn { position:fixed; top:14px; right:14px; z-index:9999; background:rgba(0,0,0,.78); border:2px solid rgba(255,255,255,.35); color:white; border-radius:999px; padding:10px 20px; font-size:14px; opacity:.4; transition:opacity .2s; backdrop-filter:blur(8px); }
#tvExitBtn:hover { opacity:1; }

/* Album-Header */
.albumHeader { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:11px 16px; background:var(--panel); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); z-index:10; }
.backBtn { border:1px solid var(--border); background:transparent; color:var(--accent); border-radius:999px; padding:8px 16px; font-size:13px; white-space:nowrap; flex-shrink:0; }
.albumHeaderInfo { flex:1; min-width:0; }
.albumHeaderTitel { font-family:'Playfair Display',serif; font-size:16px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.albumHeaderMeta  { font-size:11px; color:var(--accent); letter-spacing:.07em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.albumHeaderRight { display:flex; gap:7px; flex-shrink:0; }
.albumHeaderRight button { border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); border-radius:999px; padding:8px 13px; font-size:14px; }

/* Musik */
.musicPanel { flex-shrink:0; background:rgba(5,3,0,.95); border-bottom:1px solid var(--border); padding:9px 14px; }
.musicTop { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.musicTop span { color:var(--text); font-size:13px; font-style:italic; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.musicTop button { background:none; border:none; color:#666; font-size:18px; padding:0 0 0 8px; }
.musicControls { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.musicControls button { background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--text); border-radius:999px; width:36px; height:36px; display:grid; place-items:center; padding:0; font-size:16px; }
#musicVol { flex:1; accent-color:var(--accent); }
.musicList { display:flex; flex-wrap:wrap; gap:5px; }
.mTrack { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; }
.mTrack.active { background:var(--accent); color:#000; }
.musicHint { font-size:11px; color:#444; }

/* Personen-Filter */
.personFilter { flex-shrink:0; display:flex; align-items:center; gap:7px; padding:7px 14px; background:rgba(0,0,0,.45); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.personFilterLabel { font-size:12px; color:rgba(255,255,255,.35); white-space:nowrap; flex-shrink:0; }
.personFilterChips { display:flex; gap:5px; flex-wrap:wrap; }
.pfChip { border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); border-radius:999px; padding:5px 12px; font-size:12px; transition:all .2s; }
.pfChip.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:bold; }
.personFilterClear { background:none; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.45); border-radius:999px; padding:5px 12px; font-size:12px; }

/* Effekt-Leiste */
.effectBar { flex-shrink:0; background:rgba(3,2,0,.82); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); display:flex; align-items:center; }
.effectScroll { flex:1; display:flex; gap:5px; overflow-x:auto; padding:7px 10px; scrollbar-width:none; }
.effectScroll::-webkit-scrollbar { display:none; }
.effectScroll button { border:1px solid color-mix(in srgb,var(--accent),transparent 65%); background:rgba(20,13,3,.7); color:var(--text); border-radius:999px; padding:6px 13px; font-size:12px; white-space:nowrap; flex-shrink:0; transition:background .2s,color .2s; }
.effectScroll button.active { background:var(--accent); color:#000; font-weight:bold; }
.effectScroll button.randomActive { background:rgba(216,163,61,.15); border-color:var(--accent); color:var(--accent); }
.effectNav { display:flex; align-items:center; gap:5px; padding:7px 10px 7px 5px; flex-shrink:0; border-left:1px solid var(--border); }
.effectNav button { border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); border-radius:999px; padding:7px 12px; font-size:13px; white-space:nowrap; }
.effectNav button:hover { background:var(--accent); color:#000; }
.speedWrap { display:flex; align-items:center; gap:5px; padding:0 3px; }
.speedWrap span { font-size:12px; color:var(--accent); width:26px; text-align:right; }
#speedSlider { width:56px; accent-color:var(--accent); }

/* Gast-Navigation */
.guestNav { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:18px; padding:9px 16px; background:rgba(3,2,0,.82); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.gNavBtn { border:1px solid color-mix(in srgb,var(--accent),transparent 50%); background:rgba(20,13,3,.75); color:var(--text); border-radius:999px; padding:10px 28px; font-size:17px; font-family:'Playfair Display',serif; transition:background .2s; }
.gNavBtn:hover, .gNavBtn:active { background:var(--accent); color:#000; }
.gCounter { font-size:14px; color:var(--accent); font-family:'Playfair Display',serif; min-width:75px; text-align:center; }

/* ── PHOTO STAGE ─────────────────────────────────────────────── */
.photoStage {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 14px 6px; min-height:0;
  background:
    radial-gradient(ellipse at 80% 10%, color-mix(in srgb,var(--accent),transparent 85%), transparent 35%),
    linear-gradient(160deg, var(--stageA), var(--stageB));
  position:relative; overflow:hidden;
}
.photoStage::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle at 22px 22px, var(--accent) 1px, transparent 1px);
  background-size:38px 38px;
}

/* ── VIEWER ──────────────────────────────────────────────────── */
.viewer {
  width:min(90vw, 980px); height:min(55vh, 560px);
  position:relative; flex-shrink:0;
  perspective:1400px; transform-style:preserve-3d;
  border-radius:22px; overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.6), 0 0 0 1px var(--border);
  background:#0a0604; cursor:pointer;
}
.viewer img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  backface-visibility:hidden; transform-style:preserve-3d;
  transition:filter .3s, object-position .55s ease;
}
#pCanvas { position:absolute; inset:0; z-index:3; display:none; pointer-events:none; }

/* Ornamente */
.orn { display:none; position:absolute; z-index:4; width:58px; height:58px; border-color:var(--accent); pointer-events:none; }
body.theme-temple .orn, body.theme-wedding .orn { display:block; }
.orn.tl { top:12px; left:12px; border-top:2px solid; border-left:2px solid; }
.orn.tr { top:12px; right:12px; border-top:2px solid; border-right:2px solid; }
.orn.bl { bottom:12px; left:12px; border-bottom:2px solid; border-left:2px solid; }
.orn.br { bottom:12px; right:12px; border-bottom:2px solid; border-right:2px solid; }

/* Personen-Badge */
.personBadge { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:5px; flex-wrap:wrap; justify-content:center; pointer-events:none; max-width:90%; }
.personBadgeChip { border:1px solid; border-radius:999px; padding:3px 11px; font-size:11px; backdrop-filter:blur(8px); white-space:nowrap; }

/* Caption */
.photoCaption { text-align:center; flex-shrink:0; margin-top:9px; max-width:900px; width:100%; }
.captTitle { font-family:'Playfair Display',serif; font-size:clamp(20px,3.5vw,44px); color:var(--text); margin:0 0 3px; }
.captSub   { font-size:12px; color:color-mix(in srgb,var(--accent),transparent 20%); letter-spacing:.07em; }

/* ── THUMBNAIL-LEISTE ────────────────────────────────────────── */
.thumbBar { flex-shrink:0; background:rgba(0,0,0,.58); backdrop-filter:blur(10px); border-top:1px solid var(--border); padding:7px 10px; }
.thumbScroll { display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.thumb { border:2px solid transparent; border-radius:9px; overflow:hidden; background:#111; padding:0; flex-shrink:0; transition:border-color .2s,transform .2s; position:relative; }
.thumb:hover { transform:scale(1.07); }
.thumb.active { border-color:var(--accent); }
.thumb img { width:68px; height:50px; object-fit:cover; }
.thumbKi { position:absolute; bottom:2px; right:3px; font-size:10px; line-height:1; }


/* ── LOGO BADGE + OVERLAY ───────────────────────────────────── */
.logoBadge {
  position:absolute; z-index:8; width:42px; height:42px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent),transparent 25%);
  background:rgba(5,3,0,.62); backdrop-filter:blur(10px);
  padding:4px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.logoBadge:hover, .logoBadge:active { transform:scale(1.08); background:rgba(216,163,61,.22); border-color:var(--accent); }
.logoBadge img { width:100%; height:100%; object-fit:contain; border-radius:999px; display:block; }
.albumLogoBadge { top:10px; right:10px; }
.viewerLogoBadge { top:14px; right:14px; }

.logoOverlay {
  position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.86);
  backdrop-filter:blur(18px); display:grid; place-items:center; padding:24px;
}
.logoOverlayCard {
  width:min(82vw,420px); border-radius:28px; padding:28px;
  background:linear-gradient(160deg, rgba(36,21,5,.94), rgba(5,3,0,.96));
  border:1px solid color-mix(in srgb,var(--accent),transparent 35%);
  box-shadow:0 28px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
  text-align:center;
}
.logoOverlayCard img { width:100%; max-height:360px; object-fit:contain; border-radius:22px; }
.logoOverlayText { margin-top:14px; font-family:'Playfair Display',serif; color:var(--accent); font-size:22px; letter-spacing:.05em; }
.logoOverlayClose {
  position:fixed; top:16px; right:16px; z-index:801; width:52px; height:52px;
  border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55); color:white; font-size:30px;
}
body.tv .viewerLogoBadge { width:54px; height:54px; opacity:.82; }
@media (max-width:600px){ .logoBadge{width:34px;height:34px}.albumLogoBadge{top:8px;right:8px}.viewerLogoBadge{top:10px;right:10px}.logoOverlayCard{padding:20px} }

/* ── LIGHTBOX ────────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lbImgWrap { position:relative; max-width:96vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; }
.lightbox img { max-width:96vw; max-height:82vh; object-fit:contain; transition:transform .3s; }
.lightbox img.zoomed { transform:scale(1.8); }
.lbClose  { position:fixed; top:14px; right:14px; z-index:201; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); color:white; border-radius:999px; width:50px; height:50px; font-size:28px; }
.lbArrow  { position:fixed; top:50%; transform:translateY(-50%); z-index:201; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.5); color:white; border-radius:999px; width:54px; height:70px; font-size:42px; }
.lbLeft   { left:10px; }
.lbRight  { right:10px; }
.lbPersons { color:var(--accent); font-size:14px; margin-top:8px; min-height:18px; text-align:center; }
.lbCaption { color:rgba(255,255,255,.4); font-size:12px; margin-top:5px; text-align:center; }
.lbHint   { position:fixed; bottom:12px; color:rgba(255,255,255,.25); font-size:12px; }

/* ── TV-MODUS ────────────────────────────────────────────────── */
body.tv .albumHeader,
body.tv .effectBar,
body.tv .guestNav,
body.tv .thumbBar,
body.tv .photoCaption,
body.tv .musicPanel,
body.tv .personFilter { display:none !important; }
body.tv .photoStage { padding:0; }
body.tv .viewer { width:100dvw; height:100dvh; border-radius:0; box-shadow:none; }

/* ── 3D EFFEKTE ──────────────────────────────────────────────── */
.viewer.fade3d     #curImg { animation:fadeOut3d var(--effect-dur) ease forwards; }
.viewer.fade3d     #nxtImg { animation:fadeIn3d  var(--effect-dur) ease forwards; }
.viewer.pageTurn   #curImg { transform-origin:left center; animation:pageTurnOut var(--effect-dur) cubic-bezier(.2,.8,.2,1) forwards; }
.viewer.pageTurn   #nxtImg { animation:pageTurnIn  var(--effect-dur) ease forwards; }
.viewer.cubeFlip   #curImg { animation:cubeOut  var(--effect-dur) ease forwards; }
.viewer.cubeFlip   #nxtImg { animation:cubeIn   var(--effect-dur) ease forwards; }
.viewer.doorOpen   #curImg { transform-origin:left center; animation:doorOut var(--effect-dur) ease forwards; }
.viewer.doorOpen   #nxtImg { animation:doorIn   var(--effect-dur) ease forwards; }
.viewer.cardFlip   #curImg { animation:cardOut  var(--effect-dur) ease forwards; }
.viewer.cardFlip   #nxtImg { animation:cardIn   var(--effect-dur) ease forwards; }
.viewer.depthZoom  #curImg { animation:depthOut var(--effect-dur) ease forwards; }
.viewer.depthZoom  #nxtImg { animation:depthIn  var(--effect-dur) ease forwards; }
.viewer.stackSlide #curImg { animation:stackOut var(--effect-dur) ease forwards; }
.viewer.stackSlide #nxtImg { animation:stackIn  var(--effect-dur) ease forwards; }
.viewer.flipBook   #curImg { transform-origin:center top; animation:flipBookOut var(--effect-dur) ease forwards; }
.viewer.flipBook   #nxtImg { transform-origin:center top; animation:flipBookIn  var(--effect-dur) ease forwards; }
.viewer.zoomBlurOut #curImg { animation:zoomBlurOutA var(--effect-dur) ease forwards; }
.viewer.zoomBlurIn  #nxtImg { animation:zoomBlurInA  var(--effect-dur) ease forwards; }

@keyframes fadeOut3d  { to { opacity:0; transform:translateZ(-160px) scale(.93); } }
@keyframes fadeIn3d   { from { opacity:0; transform:translateZ(160px) scale(1.07); } to { opacity:1; transform:none; } }
@keyframes pageTurnOut{ to { transform:rotateY(-88deg); filter:brightness(.6); } }
@keyframes pageTurnIn { from { opacity:.1; transform:translateX(35px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes cubeOut    { to { transform:rotateY(90deg) translateZ(240px); opacity:0; } }
@keyframes cubeIn     { from { transform:rotateY(-90deg) translateZ(240px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes doorOut    { to { transform:rotateY(-75deg); opacity:.2; } }
@keyframes doorIn     { from { transform:scale(1.07); filter:blur(6px); opacity:.15; } to { transform:none; filter:blur(0); opacity:1; } }
@keyframes cardOut    { to { transform:rotateY(180deg) scale(.9); opacity:0; } }
@keyframes cardIn     { from { transform:rotateY(-180deg) scale(.9); opacity:0; } to { transform:none; opacity:1; } }
@keyframes depthOut   { to { transform:scale(1.2); opacity:0; filter:blur(5px); } }
@keyframes depthIn    { from { transform:scale(.83); opacity:0; filter:blur(7px); } to { transform:none; opacity:1; filter:blur(0); } }
@keyframes stackOut   { to { transform:translateX(-20%) rotateZ(-4deg) scale(.87); opacity:0; } }
@keyframes stackIn    { from { transform:translateX(20%) rotateZ(4deg) scale(.87); opacity:0; } to { transform:none; opacity:1; } }
@keyframes flipBookOut{ from { transform:rotateX(0); opacity:1; } to { transform:rotateX(-90deg); opacity:0; } }
@keyframes flipBookIn { from { transform:rotateX(90deg); opacity:0; } to { transform:rotateX(0); opacity:1; } }
@keyframes zoomBlurOutA{ to { transform:scale(1.5); filter:blur(20px); opacity:0; } }
@keyframes zoomBlurInA { from { transform:scale(1.5); filter:blur(20px); opacity:0; } to { transform:scale(1); filter:blur(0); opacity:1; } }

/* ── DRAG & DROP ─────────────────────────────────────────────── */
body.admin-mode .albumCard.dragging  { opacity:.3; transform:scale(.95); }
body.admin-mode .albumCard.drag-over { border-color:var(--accent); transform:translateY(-5px); }
body.admin-mode .thumb.dragging      { opacity:.3; transform:scale(.85); }
body.admin-mode .thumb.drag-over     { border-color:var(--accent); transform:scale(1.1); }

/* ── ADMIN PIN OVERLAY ───────────────────────────────────────── */
#adminOverlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.9); backdrop-filter:blur(20px); display:grid; place-items:center; }
.adminBox { background:rgba(10,6,2,.98); border:1px solid color-mix(in srgb,var(--accent),transparent 50%); border-radius:26px; padding:34px 38px; width:min(340px,90vw); text-align:center; box-shadow:0 40px 100px rgba(0,0,0,.7); }
.adminLogo  { font-size:46px; margin-bottom:10px; }
.adminTitle { font-family:'Playfair Display',serif; font-size:21px; color:var(--accent); margin-bottom:5px; }
.adminSub   { font-size:13px; color:rgba(255,255,255,.35); margin-bottom:26px; }
.pinRow { display:flex; justify-content:center; gap:14px; margin-bottom:8px; }
.pinDot { width:16px; height:16px; border-radius:50%; border:2px solid color-mix(in srgb,var(--accent),transparent 50%); background:transparent; transition:background .15s,border-color .15s; }
.pinDot.filled { background:var(--accent); border-color:var(--accent); }
.pinError { height:18px; color:#e06060; font-size:13px; margin-bottom:14px; }
.numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0; }
.numKey { background:rgba(255,255,255,.07); border:1px solid var(--border); color:var(--text); border-radius:14px; padding:15px; font-size:21px; font-family:'Playfair Display',serif; transition:background .15s,transform .1s; }
.numKey:active { background:var(--accent); color:#000; transform:scale(.95); }
.numEmpty { visibility:hidden; }
.adminCancel { background:none; border:1px solid var(--border); color:rgba(255,255,255,.3); border-radius:999px; padding:9px 26px; font-size:14px; margin-top:6px; transition:color .2s,border-color .2s; }
.adminCancel:hover { color:rgba(255,255,255,.6); }

/* Toast */
#adminToast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px); background:rgba(10,6,2,.96); border:1px solid var(--accent); border-radius:999px; color:var(--accent); padding:11px 26px; font-size:14px; z-index:600; opacity:0; transition:transform .3s,opacity .3s; pointer-events:none; backdrop-filter:blur(10px); }
#adminToast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .startHeader { padding:16px 18px; }
  .startTitle  { font-size:20px; }
  .startYear   { font-size:28px; }
  .searchBar   { padding:10px 18px 0; }
  .searchResults, .albumGrid { padding:0 16px; }
  .albumGrid   { padding:14px 16px; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .startFooter { padding:10px 18px; }
  .viewer      { height:50vh; border-radius:18px; }
  .kiPanelBody { flex-direction:column; }
  .albumHeader { padding:9px 12px; }
  .effectNav   { padding:7px 8px; }
  #speedSlider { width:46px; }
}
@media (orientation:landscape) and (max-height:500px) {
  .viewer    { height:72vh; }
  .thumbBar  { display:none !important; }
  .captTitle { font-size:20px; }
}


/* Kontakt / Impressum */
.contactBtn { border:1px solid var(--border); background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); border-radius:999px; padding:6px 14px; font-size:12px; }
.contactBtn:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent),transparent 45%); }
.contactOverlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.78); backdrop-filter:blur(12px); }
.contactOverlayClose { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.55); color:var(--accent); font-size:30px; line-height:1; }
.contactCard { width:min(560px,100%); border:1px solid color-mix(in srgb,var(--accent),transparent 45%); background:linear-gradient(160deg,rgba(20,10,2,.98),rgba(0,0,0,.96)); border-radius:24px; padding:26px; box-shadow:0 30px 90px rgba(0,0,0,.65); text-align:center; }
.contactLogo { display:flex; justify-content:center; margin-bottom:12px; }
.contactLogo img { width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(216,163,61,.35)); }
.contactCard h2 { margin:4px 0 8px; font-family:'Playfair Display',serif; color:var(--accent); font-size:28px; }
.contactLead { margin:0 0 18px; color:rgba(255,241,194,.55); font-size:14px; line-height:1.5; }
.contactRows { display:grid; gap:10px; margin:18px 0; }
.contactRows a { display:flex; justify-content:space-between; gap:14px; align-items:center; text-decoration:none; color:var(--text); background:rgba(255,255,255,.055); border:1px solid var(--border); border-radius:16px; padding:13px 15px; }
.contactRows span { color:rgba(255,255,255,.55); }
.contactRows strong { color:var(--accent); font-weight:700; }
.contactNote { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); color:rgba(255,255,255,.42); font-size:12px; line-height:1.55; }
@media(max-width:600px){ .contactRows a { flex-direction:column; align-items:flex-start; gap:4px; } .contactCard { padding:22px 18px; } }


/* v37 Online-Sync */
.syncBtn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:inherit;border-radius:999px;padding:7px 10px;font-size:13px;cursor:pointer}
.syncBtn.syncing{opacity:.65;pointer-events:none}
.syncToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;max-width:min(92vw,520px);padding:12px 16px;border-radius:16px;background:rgba(25,20,18,.94);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:14px;text-align:center;border:1px solid rgba(255,255,255,.14)}
.syncToast.ok{background:rgba(18,72,45,.96)}
.syncToast.warn{background:rgba(118,73,18,.96)}
.syncToast.err{background:rgba(105,28,28,.96)}