/* ============================================================
   Frieda & Carlo — Design
   Aufbau wie REPZ: dunkle App-Hülle, Karten, Bottom-Navigation,
   mobile-first. Zwei Akzente statt einem: Honig für Carlo,
   Rosé für Frieda.
   Schriften: Manrope (Text) + Space Grotesk (Titel/Zahlen), lokal
   unter /vendor/ — nichts wird von fremden Servern nachgeladen.
   ============================================================ */

:root{
  --bg:#0b0a0e;
  --bg-2:#0f0d13;
  --surface:#15141a;
  --surface-2:#1d1b24;
  --surface-3:#28252f;
  --input:#100e14;

  --accent:#ffb454;              /* Honig — Carlo */
  --accent-hover:#ffc271;
  --accent-2:#ff8fa3;            /* Rosé — Frieda */
  --accent-ink:#1c1204;          /* dunkle Schrift AUF dem Akzent */
  --accent-dim:rgba(255,180,84,.11);
  --accent-glow:rgba(255,180,84,.30);
  --rose-dim:rgba(255,143,163,.11);
  --rose-glow:rgba(255,143,163,.30);

  --text:#eceaf1;
  --text-hi:#fdfcff;
  --muted:#9c97a8;
  --muted2:#6b6579;

  --border:rgba(255,255,255,.07);
  --border-hi:rgba(255,255,255,.15);
  --good:#5ecb8b;
  --warn:#ff7a6b;

  --radius:18px;
  --radius-lg:24px;
  --nav-h:68px;
  --font-d:'Space Grotesk','Manrope',system-ui,sans-serif;

  /* Eine Kurve für alles, was sich bewegt: schnell los, weich aus.
     Gleiche Kurve überall = ruhiges Gesamtbild. */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* Muss ganz oben stehen und muss !important sein: Elemente wie .lb-btn oder
   .who setzen selbst display:grid/flex und würden das [hidden]-Attribut sonst
   übersteuern — der Löschknopf erschien dadurch auch an fremden Bildern. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  overflow-x:hidden;
}
::selection{background:var(--accent-glow);color:#0b0a0e}
img{max-width:100%;display:block}
button{font-family:inherit}

/* Feine Körnung über allem — nimmt den Farbflächen das Digitale.
   pointer-events:none, damit sie keine Berührung schluckt. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Grundraster ---------- */
.app{
  position:relative;z-index:2;
  max-width:720px;margin:0 auto;
  padding:0 16px calc(var(--nav-h) + 40px);
}
.app.wide{max-width:100%;padding-left:0;padding-right:0}
.pad{padding-left:16px;padding-right:16px;max-width:720px;margin:0 auto}

/* ---------- Kopfzeile ---------- */
header.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 2px 14px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .paw{
  width:38px;height:38px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 5px 20px rgba(255,180,84,.24);
}
.brand .paw svg{width:22px;height:22px}
.brand>div{min-width:0}                 /* sonst kann der Text nicht schrumpfen */
.brand h1{
  font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.5px;
  margin:0;line-height:1.05;color:var(--text-hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand p{
  margin:2px 0 0;font-size:9.5px;color:var(--muted);letter-spacing:2px;font-weight:800;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top-actions{display:flex;align-items:center;gap:8px;flex:none}
.iconbtn{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  transition:.2s var(--ease);
}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{color:var(--text);border-color:var(--border-hi)}
.iconbtn:active{transform:scale(.92)}
/* Am Telefon bleibt nur ein Kreis mit dem Anfangsbuchstaben — der volle Text
   drängte dort den Titel aus dem Bild. Ab 520 px ist wieder Platz dafür. */
.who{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 5px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.2px;
}
.who-ini{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  font-size:12.5px;font-weight:800;text-transform:uppercase;line-height:1;
}
.who-txt{display:none;padding-right:9px;white-space:nowrap}
.who b{color:var(--accent);font-weight:800}
@media(min-width:520px){.who-txt{display:inline}}

/* ---------- Ansichten ---------- */
.view{display:none}
.view.active{display:block;animation:viewIn .4s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-title{
  font-family:var(--font-d);font-size:27px;font-weight:700;
  margin:6px 2px 4px;letter-spacing:-.8px;color:var(--text-hi);
}
.view-sub{margin:0 2px 20px;font-size:13px;color:var(--muted);font-weight:600}

/* ============================================================
   HERO — Herzstück der Startseite
============================================================ */
.hero{
  position:relative;
  /* Kopfzeile (~68 px) und Bottom-Navigation (~68 px) gehen ab, sonst rutscht
     der Hinweis zum Weiterscrollen unter die Navigation und ist nie zu sehen. */
  min-height:min(calc(100svh - 150px),800px);
  margin:0 -16px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:56px 24px 84px;
  overflow:hidden;
  isolation:isolate;
}

/* Ebene 1: unscharfes Zufallsfoto als Grundstimmung */
.hero-bg{
  position:absolute;inset:-12% -8%;z-index:-3;
  background-size:cover;background-position:center;
  filter:blur(34px) saturate(1.25);
  transform:scale(1.18);
  opacity:0;
  transition:opacity 1.4s ease;
  will-change:transform;
}
.hero-bg.ready{opacity:.52;animation:heroDrift 26s ease-in-out infinite alternate}
@keyframes heroDrift{
  from{transform:scale(1.18) translate3d(0,0,0)}
  to{transform:scale(1.3) translate3d(-2.5%,-1.5%,0)}
}

/* Ebene 2: Farbschleier, damit die Schrift immer lesbar bleibt,
   egal welches Foto gerade hinten liegt */
.hero-scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(105% 78% at 50% 0%, rgba(255,180,84,.16), transparent 62%),
    radial-gradient(90% 62% at 82% 88%, rgba(255,143,163,.14), transparent 65%),
    linear-gradient(180deg, rgba(11,10,14,.66) 0%, rgba(11,10,14,.80) 48%, var(--bg) 97%);
}

/* Ebene 3: zwei weiche Lichter, die langsam wandern */
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(58px);opacity:.5;pointer-events:none}
.orb.a{width:300px;height:300px;top:4%;left:-14%;background:radial-gradient(circle,rgba(255,180,84,.5),transparent 70%);animation:orbA 19s ease-in-out infinite alternate}
.orb.b{width:340px;height:340px;bottom:6%;right:-18%;background:radial-gradient(circle,rgba(255,143,163,.45),transparent 70%);animation:orbB 23s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate3d(46px,54px,0) scale(1.14)}}
@keyframes orbB{to{transform:translate3d(-52px,-40px,0) scale(1.1)}}

.hero-inner{position:relative;z-index:2;width:100%;max-width:620px}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px 7px 9px;border-radius:999px;margin-bottom:26px;
  background:rgba(255,255,255,.055);border:1px solid var(--border-hi);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--text);
}
.hero-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px var(--accent-glow);
}

/* Titel: jedes Wort sitzt in einem Fenster und fährt von unten herein.
   overflow:hidden am Fenster erzeugt die saubere Kante. */
.hero-title{
  font-family:var(--font-d);
  font-size:clamp(46px,15.5vw,88px);
  line-height:.94;font-weight:700;letter-spacing:-.045em;
  margin:0 0 22px;color:var(--text-hi);
}
.hero-title .line{display:block;overflow:hidden;padding:.06em 0}
.hero-title .word{
  display:inline-block;
  transform:translateY(112%) rotate(3deg);
  opacity:0;
  transition:transform 1.05s var(--ease),opacity .8s ease;
}
.hero-title .amp{
  display:inline-block;
  background:linear-gradient(120deg,var(--accent) 5%,var(--accent-2) 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding:0 .12em;
}
.loaded .hero-title .word{transform:none;opacity:1}
/* Versatz je Zeile — steht hier statt als style-Attribut im HTML, damit die
   Sicherheitsrichtlinie Inline-Styles komplett verbieten kann. */
.hero-title .w1{transition-delay:.10s}
.hero-title .w2{transition-delay:.20s}
.hero-title .w3{transition-delay:.30s}

.hero-lead{
  font-size:15.5px;color:var(--muted);max-width:34ch;margin:0 auto 30px;
  font-weight:600;line-height:1.65;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .5s,transform .9s var(--ease) .5s;
}
.loaded .hero-lead{opacity:1;transform:none}

.hero-pills{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .68s,transform .9s var(--ease) .68s;
}
.loaded .hero-pills{opacity:1;transform:none}
.pill{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-hi);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.pill b{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text-hi);font-variant-numeric:tabular-nums}
.pill span{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}

.hero-cta{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .82s,transform .9s var(--ease) .82s;
}
.loaded .hero-cta{opacity:1;transform:none}

/* Drei schwebende Fotos rund um den Titel */
.hero-floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.float{
  position:absolute;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  opacity:0;transform:translateY(26px) scale(.9);
  transition:opacity 1s ease,transform 1.2s var(--ease);
  will-change:transform;
}
.float img{width:100%;height:100%;object-fit:cover}
.loaded .float{opacity:1;transform:none}
.float.f1{width:96px;height:124px;top:12%;left:5%;rotate:-8deg;transition-delay:.75s}
.float.f2{width:82px;height:104px;top:19%;right:6%;rotate:7deg;transition-delay:.9s}
.float.f3{width:110px;height:82px;bottom:19%;left:9%;rotate:5deg;transition-delay:1.05s}
@media(max-width:420px){
  .float.f1{width:74px;height:96px;left:1%;top:10%}
  .float.f2{width:64px;height:82px;right:1%}
  .float.f3{display:none}
}

/* Hinweis zum Weiterscrollen */
.scroll-hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:9.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted2);
  opacity:0;transition:opacity 1s ease 1.3s;z-index:2;
}
.loaded .scroll-hint{opacity:1}
.scroll-hint svg{width:15px;height:15px;animation:bob 2.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* ============================================================
   Abschnitte + Scroll-Animation
============================================================ */
.section{margin:0 0 48px}
.sec-head{margin:0 2px 18px}
.sec-kicker{
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin:0 0 7px;
}
.sec-head h2{
  font-family:var(--font-d);font-size:25px;font-weight:700;letter-spacing:-.6px;
  margin:0;color:var(--text-hi);
}
.sec-head p{margin:7px 0 0;font-size:13.5px;color:var(--muted);font-weight:600;max-width:46ch}

/* Elemente kommen beim Hereinscrollen sanft hoch.
   Die Klasse .in setzt der IntersectionObserver in app.js. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.from-left{transform:translateX(-28px)}
.reveal.from-right{transform:translateX(28px)}
.reveal.from-left.in,.reveal.from-right.in{transform:none}

/* ---------- Karten ---------- */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 110px) var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);
}
.card+.card{margin-top:13px}

/* ---------- Steckbriefe ---------- */
.steckbriefe{display:grid;gap:14px}
@media(min-width:620px){.steckbriefe{grid-template-columns:1fr 1fr}}
.kat{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  padding:0;
}
.kat-photo{position:relative;height:190px;overflow:hidden;background:var(--surface-2)}
.kat-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.1s var(--ease)}
.kat:hover .kat-photo img{transform:scale(1.09)}
.kat-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,26,0) 34%,rgba(21,20,26,.94) 100%);
}
.kat-photo .leer{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:44px;opacity:.3;
}
.kat-name{
  position:absolute;left:18px;bottom:12px;z-index:2;
  font-family:var(--font-d);font-size:29px;font-weight:700;letter-spacing:-.8px;
  color:var(--text-hi);line-height:1;
}
.kat-body{padding:16px 18px 18px}
.kat-body>p{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.65;font-weight:600}
.kat-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-size:11px;font-weight:800;letter-spacing:.2px;
  padding:6px 11px;border-radius:999px;
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-glow);
}
.kat.rose .chip{background:var(--rose-dim);color:var(--accent-2);border-color:var(--rose-glow)}
.kat.rose .kat-photo::before,
.kat .kat-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(140deg,var(--accent-dim),transparent 60%);
}
.kat.rose .kat-photo::before{background:linear-gradient(140deg,var(--rose-dim),transparent 60%)}
.kat-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.kat-fact{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:10px 12px}
.kat-fact .l{font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted2)}
.kat-fact .v{font-size:13px;font-weight:800;color:var(--text-hi);margin-top:2px}

/* ---------- Zufallsraster auf der Startseite ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.mosaic .m{
  position:relative;overflow:hidden;border-radius:15px;
  background:var(--surface-2);border:1px solid var(--border);
  cursor:pointer;grid-column:span 3;aspect-ratio:1;
  transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease);
}
/* Rhythmus statt Gleichmaß: zwei große, dann kleine */
.mosaic .m:nth-child(1){grid-column:span 6;aspect-ratio:16/11}
.mosaic .m:nth-child(4){grid-column:span 2;aspect-ratio:3/4}
.mosaic .m:nth-child(5){grid-column:span 4;aspect-ratio:4/3}
.mosaic .m:nth-child(8){grid-column:span 4;aspect-ratio:4/3}
.mosaic .m:nth-child(9){grid-column:span 2;aspect-ratio:3/4}
.mosaic .m img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .6s ease}
.mosaic .m:hover{border-color:var(--border-hi);box-shadow:0 14px 34px rgba(0,0,0,.42);transform:translateY(-3px)}
.mosaic .m:hover img{transform:scale(1.07)}
.mosaic .m:active{transform:scale(.985)}
.mosaic .m .cap{
  position:absolute;left:0;right:0;bottom:0;padding:22px 11px 9px;
  font-size:10px;font-weight:800;letter-spacing:.4px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  opacity:0;transition:opacity .35s ease;
}
.mosaic .m:hover .cap{opacity:1}

/* ---------- Zahlenband ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)) var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 14px 14px;position:relative;overflow:hidden;text-align:left;
}
.stat::after{
  content:"";position:absolute;width:20px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));inset:14px auto auto 14px;
}
.stat .v{
  font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:-1px;
  line-height:1.1;color:var(--text-hi);margin-top:16px;font-variant-numeric:tabular-nums;
}
.stat .l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.1px;margin-top:4px;font-weight:800}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.1px;
  border:1px solid transparent;transition:.22s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 6px 22px rgba(255,180,84,.24);
}
.btn.primary:hover{filter:brightness(1.07);box-shadow:0 8px 28px rgba(255,180,84,.32)}
.btn.ghost{background:rgba(255,255,255,.06);border-color:var(--border-hi);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.btn.danger{background:rgba(255,122,107,.12);border-color:rgba(255,122,107,.35);color:var(--warn)}
.btn.danger:hover{background:rgba(255,122,107,.2)}
.btn:active{transform:scale(.965)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.block{width:100%}
.btn-row{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.section-gap{margin-top:34px}
.hint{font-size:13px;color:var(--muted);font-weight:600;margin:0}

/* ============================================================
   GALERIE
============================================================ */
#galMore{margin-top:8px}
.month{margin-bottom:26px}
.month-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:11px;
  margin:0 -16px 12px;padding:12px 16px;
  background:rgba(11,10,14,.82);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.month-head h3{
  margin:0;font-family:var(--font-d);font-size:17px;font-weight:700;
  color:var(--text-hi);letter-spacing:-.3px;flex:1;min-width:0;
}
.month-head .n{
  flex:none;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  color:var(--accent);background:var(--accent-dim);
  border:1px solid var(--accent-glow);border-radius:999px;padding:4px 10px;
}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(min-width:520px){.grid{grid-template-columns:repeat(4,1fr);gap:8px}}
@media(min-width:760px){.grid{grid-template-columns:repeat(5,1fr)}}
.tile{
  position:relative;overflow:hidden;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--border);
  cursor:pointer;aspect-ratio:1;
  transition:transform .3s var(--ease),border-color .25s;
}
.tile img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s ease,transform .6s var(--ease);
}
.tile img.loaded{opacity:1}
.tile:hover{border-color:var(--border-hi)}
.tile:hover img{transform:scale(1.08)}
.tile:active{transform:scale(.96)}
/* Kleiner Punkt, wenn das Bild von einem selbst ist */
.tile.mine::after{
  content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px rgba(11,10,14,.6);
}

/* ============================================================
   LIGHTBOX
============================================================ */
.lb{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(6,5,9,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  touch-action:none;
}
.lb.open{display:flex;animation:lbIn .28s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.lb-img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  will-change:transform;
}
.lb-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
}
.lb-meta{min-width:0}
.lb-meta .d{font-family:var(--font-d);font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px}
.lb-meta .u{font-size:11px;color:rgba(255,255,255,.62);font-weight:700;margin-top:1px}
.lb-actions{display:flex;gap:8px;flex:none}
.lb-btn{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.2s var(--ease);
}
.lb-btn svg{width:19px;height:19px}
.lb-btn:hover{background:rgba(255,255,255,.19)}
.lb-btn:active{transform:scale(.9)}
.lb-btn.del:hover{background:rgba(255,122,107,.3);border-color:rgba(255,122,107,.5)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.2s var(--ease);
}
.lb-nav svg{width:20px;height:20px}
.lb-nav:hover{background:rgba(255,255,255,.17)}
.lb-nav:active{transform:translateY(-50%) scale(.9)}
.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}
.lb-nav[hidden]{display:none}
@media(max-width:560px){.lb-nav{display:none}}   /* am Telefon wird gewischt */
.lb-count{
  position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:50%;transform:translateX(-50%);
  z-index:3;font-size:11.5px;font-weight:800;letter-spacing:1px;
  color:rgba(255,255,255,.72);background:rgba(0,0,0,.42);
  padding:7px 14px;border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-variant-numeric:tabular-nums;
}
.lb-spin{position:absolute;z-index:2;width:30px;height:30px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.18);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   UPLOAD
============================================================ */
.drop{
  position:relative;
  /* display:block ist Pflicht — ein <label> ist von Haus aus inline, der
     gestrichelte Rahmen zerfiel dadurch in zwei Bruchstücke am linken Rand. */
  display:block;
  border:2px dashed var(--border-hi);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,180,84,.05),rgba(255,143,163,.03));
  padding:36px 22px;text-align:center;cursor:pointer;
  transition:.3s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,180,84,.12),rgba(255,143,163,.06))}
.drop:active{transform:scale(.99)}
.drop .ico{
  width:62px;height:62px;border-radius:20px;margin:0 auto 15px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:0 10px 30px rgba(255,180,84,.26);
}
.drop .ico svg{width:29px;height:29px}
.drop h3{margin:0 0 6px;font-family:var(--font-d);font-size:19px;font-weight:700;color:var(--text-hi);letter-spacing:-.3px}
.drop p{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.drop input[type=file]{display:none}

.queue{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.qi{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:11px 13px;
  animation:qIn .35s var(--ease);
}
@keyframes qIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.qi .thumb{
  width:46px;height:46px;border-radius:11px;flex:none;overflow:hidden;
  background:var(--surface-3);display:grid;place-items:center;font-size:18px;
}
.qi .thumb img{width:100%;height:100%;object-fit:cover}
.qi .info{flex:1;min-width:0}
.qi .nm{
  font-size:12.5px;font-weight:800;color:var(--text-hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qi .st{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.qi.err .st{color:var(--warn)}
.qi.ok .st{color:var(--good)}
.qi.dup .st{color:var(--accent)}
.bar{
  height:4px;border-radius:3px;background:var(--surface-3);
  margin-top:7px;overflow:hidden;
}
.bar i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .22s ease;
}
.qi.ok .bar i{background:var(--good)}
.qi.err .bar i{background:var(--warn)}
.qi .badge{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;
}
.qi.ok .badge{background:rgba(94,203,139,.15);color:var(--good)}
.qi.err .badge{background:rgba(255,122,107,.15);color:var(--warn)}
.qi.dup .badge{background:var(--accent-dim);color:var(--accent)}

.up-summary{
  margin-top:16px;padding:14px 16px;border-radius:15px;
  background:var(--accent-dim);border:1px solid var(--accent-glow);
  font-size:13px;font-weight:700;color:var(--text-hi);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* Eigene Bilder verwalten */
.mine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:520px){.mine-grid{grid-template-columns:repeat(5,1fr)}}
.mine-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--surface-2);border:1px solid var(--border)}
.mine-item img{width:100%;height:100%;object-fit:cover}
.mine-item button{
  position:absolute;top:5px;right:5px;
  width:26px;height:26px;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(10,9,13,.72);border:1px solid rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.2s var(--ease);
}
.mine-item button svg{width:13px;height:13px}
.mine-item button:hover{background:rgba(255,122,107,.85);border-color:transparent}
.mine-item button:active{transform:scale(.88)}

/* ---------- Leerzustände ---------- */
/* Der Leerzustand steht im Raster des Mosaiks und muss über alle Spalten
   gehen — als Klasse, nicht als style-Attribut, sonst greift die CSP. */
.mosaic .empty{grid-column:1/-1}
.empty{
  text-align:center;padding:44px 22px;
  border:1px dashed var(--border-hi);border-radius:var(--radius-lg);
  background:var(--surface);
}
.empty .ico{
  width:60px;height:60px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;font-size:27px;background:var(--accent-dim);
}
.empty h3{margin:0 0 6px;font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--text-hi)}
.empty p{margin:0 0 18px;font-size:13px;color:var(--muted);font-weight:600}

.skeleton{
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{to{background-position:-220% 0}}

/* ---------- Bottom-Navigation ---------- */
nav.bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  background:rgba(15,13,19,.88);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-top:1px solid var(--border);
}
nav.bottom .navitem{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--muted2);cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.3px;
  transition:color .25s var(--ease);position:relative;border:none;background:none;
}
nav.bottom .navitem svg{width:22px;height:22px;position:relative;z-index:1;transition:transform .3s var(--ease)}
nav.bottom .navitem span{position:relative;z-index:1}
nav.bottom .navitem.on{color:var(--accent)}
nav.bottom .navitem.on svg{transform:translateY(-1px) scale(1.06)}
nav.bottom .navitem.on::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:52px;height:30px;border-radius:999px;background:var(--accent-dim);
  animation:pillIn .3s var(--ease);
}
@keyframes pillIn{from{opacity:0;transform:translateX(-50%) scale(.7)}to{opacity:1;transform:translateX(-50%) scale(1)}}
nav.bottom .navitem:active svg{transform:scale(.88)}

/* ---------- Kurznachricht ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px);
  transform:translateX(-50%) translateY(22px);
  z-index:300;max-width:90vw;
  display:flex;align-items:center;gap:9px;
  background:rgba(29,27,36,.96);border:1px solid var(--border-hi);color:var(--text);
  padding:13px 19px;border-radius:15px;font-size:13px;font-weight:700;
  box-shadow:0 12px 42px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:.32s var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);flex:none}
.toast.bad .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}

/* ============================================================
   ANMELDESEITE
============================================================ */
body.login-page{display:grid;place-items:center;padding:24px 20px;min-height:100svh}
.login-wrap{position:relative;z-index:2;width:100%;max-width:390px}
.login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.login-bg .orb.a{width:340px;height:340px;top:-8%;left:-22%}
.login-bg .orb.b{width:380px;height:380px;bottom:-12%;right:-24%}

.login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 140px) var(--surface);
  border:1px solid var(--border);border-radius:26px;
  padding:32px 26px 26px;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  animation:cardIn .8s var(--ease);
}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.login-logo{
  width:62px;height:62px;border-radius:21px;margin:0 auto 20px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:0 12px 34px rgba(255,180,84,.3);
  animation:logoIn 1s var(--ease) .1s backwards;
}
@keyframes logoIn{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}
.login-logo svg{width:33px;height:33px}
.login-card h1{
  font-family:var(--font-d);font-size:27px;font-weight:700;letter-spacing:-.8px;
  margin:0 0 6px;text-align:center;color:var(--text-hi);
}
.login-card h1 .amp{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.login-card .lead{
  text-align:center;font-size:13px;color:var(--muted);font-weight:600;
  margin:0 0 26px;
}
.field{margin-bottom:13px}
.field label{
  display:block;font-size:10px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px 3px;
}
.field .wrap{position:relative;display:flex;align-items:center}
.field .wrap svg{
  position:absolute;left:14px;width:17px;height:17px;color:var(--muted2);
  pointer-events:none;transition:color .25s;
}
.field input{
  width:100%;font-family:inherit;font-size:16px;font-weight:600;   /* 16px: iOS zoomt sonst beim Tippen hinein */
  color:var(--text);background:var(--input);
  border:1px solid var(--border);border-radius:14px;
  padding:14px 14px 14px 42px;transition:.22s var(--ease);
}
.field input::placeholder{color:var(--muted2);font-weight:500}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.field .wrap:focus-within svg{color:var(--accent)}
.field .peek{
  position:absolute;right:6px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:none;color:var(--muted2);transition:.2s;
}
.field .peek svg{position:static;color:inherit}
.field .peek:hover{color:var(--text)}

.login-err{
  display:none;align-items:center;gap:9px;
  background:rgba(255,122,107,.1);border:1px solid rgba(255,122,107,.32);
  color:#ffb3a8;border-radius:13px;padding:11px 14px;
  font-size:12.5px;font-weight:700;margin-bottom:13px;
}
.login-err.show{display:flex;animation:shake .42s ease}
.login-err .err-ico{width:16px;height:16px;flex:none}
.submit-btn{margin-top:20px}
.login-foot .foot-paw{
  width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:4px;
}
@keyframes shake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}
}
.login-foot{
  text-align:center;margin:20px 0 0;font-size:11px;color:var(--muted2);font-weight:700;
  letter-spacing:.3px;
}
.spinner{
  width:17px;height:17px;border-radius:50%;flex:none;
  border:2px solid rgba(28,18,4,.28);border-top-color:var(--accent-ink);
  animation:spin .7s linear infinite;
}

/* ============================================================
   Wer Bewegung nicht mag, bekommt keine.
   Die Seite muss ohne jede Animation vollständig sichtbar sein —
   deshalb werden die Startzustände hier hart zurückgesetzt.
============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-title .word,.hero-lead,.hero-pills,.hero-cta,.float,.scroll-hint{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .hero-bg.ready{opacity:.42}
}