:root{
  --green:#2d4a3e; --green-d:#22382f; --green-l:#3b7a57; --gold:#c8b442;
  --ink:#1f2b26; --muted:#6b7a73; --line:#e4e8e6; --bg:#f4f6f5; --card:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--green); color:var(--ink);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
#app{max-width:900px; margin:0 auto; min-height:100vh; min-height:100dvh}

.splash{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; color:#fff;
  background:var(--green);
  padding:24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));
}
.brand{font-size:32px; display:flex; align-items:center; gap:10px}
.ball{width:1em; height:1em; display:inline-block; flex:none; vertical-align:-0.14em}
.wordmark{display:flex; flex-direction:column; line-height:1; text-align:left}
.wm-name{font-family:'Roboto Slab',Georgia,serif; font-weight:500; letter-spacing:.3px}
.wm-sub{
  font-family:'Roboto',sans-serif; font-weight:500;
  font-size:max(10px,.32em); letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-top:.34em;
}
.splash .status{font-size:13px; color:rgba(255,255,255,.65)}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Auth-Screen ---------- */
.auth{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  justify-content:center; color:#fff; max-width:460px; margin:0 auto;
  padding:32px calc(28px + env(safe-area-inset-right)) 40px calc(28px + env(safe-area-inset-left));
}
.auth .logo{font-size:22px; display:flex; align-items:center; gap:8px; margin-bottom:34px}
.auth h1{font-family:'Roboto Slab',Georgia,serif; font-size:30px; font-weight:500; margin:0 0 8px; line-height:1.2}
.auth p.sub{font-size:15px; color:rgba(255,255,255,.72); margin:0 0 26px; line-height:1.5}
.auth label{display:block; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 10px}
.field{margin-bottom:22px}
.input{width:100%; height:52px; border:0; border-radius:14px; padding:0 16px; font-size:17px; color:var(--ink); background:#fff}
.input:focus{outline:3px solid var(--gold); outline-offset:0}
.btn{width:100%; height:54px; border:0; border-radius:14px; font-size:17px; font-weight:600; cursor:pointer; transition:transform .05s, opacity .2s; font-family:'Roboto',sans-serif}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--gold); color:#3a3410}
.btn[disabled]{opacity:.5; cursor:default}
.msg-error{background:rgba(192,57,43,.18); color:#ffd7d1; border:1px solid rgba(255,120,110,.4); border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:18px}
.auth .foot{font-size:12px; color:rgba(255,255,255,.5); margin-top:26px; line-height:1.5}

/* ---------- Home (Platzhalter, Phase 3 ersetzt) ---------- */
.home{min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--ink)}
.appbar{
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top));
}
.appbar .logo{font-size:18px; display:flex; align-items:center; gap:9px}
.appbar .acct{background:rgba(255,255,255,.15); border:0; color:#fff; border-radius:20px; padding:8px 16px; font-size:13px; cursor:pointer; font-family:'Roboto',sans-serif}
.home .body{padding:30px 20px; text-align:center; color:var(--muted)}
.home .body .big{font-size:19px; color:var(--ink); margin-bottom:6px; font-weight:600}

/* ---------- App-Leiste Ergänzung ---------- */
.iconbtn{width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:24px; line-height:1; cursor:pointer; font-family:'Roboto',sans-serif; flex:none}
.bartitle{flex:1; text-align:center; font-size:16px; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px}
.brandbar{display:flex; align-items:center; gap:14px; min-width:0}
.apptitle{font-family:'Roboto Slab',Georgia,serif; font-weight:500; font-size:27px; color:#fff; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wrap{max-width:1280px; margin:0 auto; padding:16px 20px calc(40px + env(safe-area-inset-bottom))}
.empty{color:var(--muted); font-size:15px; text-align:center; padding:40px 16px}

/* ---------- Alben-Grid ---------- */
.albums{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.album{border:0; background:transparent; padding:0; text-align:left; cursor:pointer; font-family:'Roboto',sans-serif}
.album .cover{aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#e7ebe9; position:relative}
.album .cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s}
.album:hover .cover img{transform:scale(1.04)}
.nocover{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#b9c2bd; font-size:34px}
.ainfo{padding:8px 2px 0}
.atitle{font-size:15px; color:var(--ink); font-weight:500; line-height:1.25}
.ameta{font-size:12px; color:var(--muted); margin-top:2px}

/* ---------- Album-Kopf + Foto-Grid ---------- */
.evhead{padding:6px 2px 14px}
.evtitle{font-family:'Roboto Slab',Georgia,serif; font-weight:500; font-size:26px; color:var(--ink); line-height:1.15}
.evmeta{font-size:13px; color:var(--muted); margin-top:4px}
.evdesc{font-size:14px; color:var(--ink); margin-top:10px; line-height:1.5; max-width:640px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.tile{border:0; padding:0; background:#e7ebe9; border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:1}
.tile img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- Lightbox ---------- */
.lb{position:fixed; inset:0; z-index:1000; background:#0c0c0c; display:flex; align-items:center; justify-content:center}
.lb-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:56px 12px calc(20px + env(safe-area-inset-bottom))}
.lb-img{max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
.lb-top{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.lb-count{color:rgba(255,255,255,.85); font-size:14px}
.lb-x{background:rgba(255,255,255,.14); border:0; color:#fff; width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:64px; border:0; background:rgba(0,0,0,.25); color:#fff; font-size:34px; line-height:1; cursor:pointer; border-radius:8px}
.lb-prev{left:6px} .lb-next{right:6px}
@media(hover:none){.lb-nav{background:transparent; width:40px}}

/* ---------- Admin ---------- */
.adminbar{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.abtn{border:1px solid var(--green); background:var(--green); color:#fff; border-radius:11px; padding:9px 16px; font-size:14px; font-weight:500; cursor:pointer; font-family:'Roboto',sans-serif}
.abtn.ghost{background:#fff; color:var(--green)}
.abtn.small{padding:6px 12px; font-size:13px}
.evtop{display:flex; align-items:center; justify-content:space-between; gap:12px}

.uploader{border:2px dashed #c3d3ca; border-radius:14px; padding:16px; margin:4px 0 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fbfcfb}
.uploader.drag{border-color:var(--green); background:var(--win-bg,#e7f3ec)}
.uphint{font-size:13px; color:var(--muted)}
.upprog{font-size:13px; color:var(--green); font-weight:500; margin-left:auto}

.tile{position:relative}
.tbtns{position:absolute; top:4px; right:4px; display:flex; gap:4px; opacity:0; transition:opacity .15s}
.tile:hover .tbtns{opacity:1}
@media(hover:none){.tbtns{opacity:1}}
.tbtn{width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
.tbtn.del{background:rgba(192,57,43,.85)}

/* Sheet */
.sheet-ov{position:fixed; inset:0; z-index:1100; background:rgba(20,35,29,.45); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s}
.sheet-ov.show{opacity:1}
.sheet{width:100%; max-width:520px; background:#fff; border-radius:20px 20px 0 0; padding:18px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(20px); transition:transform .2s; color:var(--ink)}
.sheet-ov.show .sheet{transform:translateY(0)}
.sheet-grip{width:40px; height:4px; border-radius:2px; background:#e0e4e1; margin:0 auto 14px}
.s-title{font-size:18px; font-weight:600; margin-bottom:14px}
.s-lab{display:block; font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin:12px 0 6px}
.s-in{width:100%; min-height:46px; border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:15px; color:var(--ink); background:#fff; font-family:'Roboto',sans-serif}
.s-in:focus{outline:2px solid var(--green); border-color:var(--green)}
.s-area{resize:vertical}
.s-row{display:flex; gap:8px} .s-row .s-in{flex:1; min-width:0}
.s-save{margin-top:18px; height:50px}
.s-del{width:100%; margin-top:10px; background:transparent; border:0; color:var(--loss,#c0392b); font-size:14px; cursor:pointer; padding:10px; font-family:'Roboto',sans-serif}
.s-cancel{width:100%; margin-top:8px; background:transparent; border:0; color:var(--muted); font-size:14px; cursor:pointer; padding:8px; font-family:'Roboto',sans-serif}
.s-note{font-size:12px; color:var(--muted); margin-top:12px}

/* Toast */
.gtoast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translate(-50%,12px); background:var(--green); color:#fff; padding:11px 18px; border-radius:22px; font-size:14px; z-index:1200; opacity:0; transition:opacity .25s, transform .25s; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:88%; text-align:center}
.gtoast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- TCK-Logo (Header wie Homepage) ---------- */
.tcklogo{width:auto; display:block}
.brand .tcklogo{height:96px}
.auth .logo{margin-bottom:28px}
.auth .logo .tcklogo{height:78px}
.appbar{padding-top:calc(12px + env(safe-area-inset-top)); padding-bottom:12px}
.appbar .logo .tcklogo{height:46px}

/* ==================================================================
   THEME: Warm · Sandton (hell)  — überschreibt Basis-Look
   ================================================================== */
:root{
  --bg:#f2ebdf; --card:#fffdf9; --ink:#2d3b32; --muted:#8a7f70; --line:#e6ddcd; --clay:#c96f4c;
}
.home{background:var(--bg)}
.wrap{padding-top:20px}

/* Album-Kacheln als warme Karten mit Serifen-Titel */
.albums{gap:16px}
.album{background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(70,50,25,.07); transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column}
.album .cover{flex:none}
.ainfo{display:flex; flex-direction:column}
.album:hover{box-shadow:0 6px 18px rgba(70,50,25,.12); transform:translateY(-2px)}
.album .cover{aspect-ratio:4/3; border-radius:0; background:#ece4d5}
.album:hover .cover img{transform:scale(1.05)}
.ainfo{padding:11px 13px 13px}
.atitle{font-family:'Roboto Slab',Georgia,serif; font-size:17px; font-weight:500; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}
.ameta{color:var(--clay); font-size:12px; margin-top:3px; font-weight:500}
.nocover{background:#efe8da; color:#cbb48f}

/* Album-Kopf */
.evtitle{color:var(--ink)}
.evmeta{color:var(--clay); font-weight:500}
.evdesc{color:var(--ink)}

/* Foto-Grid */
.grid{gap:8px}
.tile{background:#ece4d5; border-radius:10px}

/* Terracotta als Aktions-Akzent */
.abtn{background:var(--clay); border-color:var(--clay)}
.abtn.ghost{background:var(--card); color:var(--clay); border:1px solid #e2c9ba}
.uploader{border-color:#e2c9ba; background:#fbf6ee}
.uploader.drag{border-color:var(--clay); background:#f7e7dd}
.upprog{color:var(--clay)}
.s-in:focus{outline-color:var(--clay); border-color:var(--clay)}
.gtoast{background:var(--clay)}

/* ---------- Feinschliff: gerundetes Panel + grösseres Logo ---------- */
.home{margin:12px; border-radius:18px; overflow:hidden; min-height:calc(100dvh - 24px)}
.appbar .logo .tcklogo{height:60px}
.auth .logo .tcklogo{height:92px}
.brand .tcklogo{height:112px}

/* Logo -> Startseite */
.logolink{display:inline-block; line-height:0}

/* ---------- Mobile: Kacheln 2-spaltig, Titel kompakter ---------- */
@media(max-width:600px){
  .albums{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .apptitle{font-size:22px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .brandbar{gap:10px}
  .appbar .logo .tcklogo{height:50px}
}