/* language: CSS, file: public/styles.css, target: Tankary App
   Design-System: Cyber-Aqua Glassmorphism (eigenständig, kein Tailwind nötig) */
:root{
  --aqua:#22d3ee; --aqua-soft:#67e8f9; --reef:#34d399;
  --ink:#dbe7f3; --muted:#8aa2b8; --dim:#6c8399;
  --bg:#03070e; --panel:rgba(255,255,255,.045); --line:rgba(255,255,255,.10);
  --danger:#fb7185; --radius:18px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Sora','Inter',sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(8,145,178,.22), transparent 62%),
    radial-gradient(900px 700px at 92% 6%, rgba(16,185,129,.14), transparent 62%),
    radial-gradient(1000px 900px at 50% 120%, rgba(14,116,144,.18), transparent 60%);
}
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }

.display{ font-family:var(--display); letter-spacing:-.02em; }
.mono{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.dim{ color:var(--dim); }
.tiny{ font-size:.68rem; }
.small{ font-size:.78rem; }
.center{ text-align:center; }
.row{ display:flex; align-items:center; gap:.55rem; }
.row-wrap{ flex-wrap:wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.stack{ display:flex; flex-direction:column; gap:.75rem; }
.grow{ flex:1; min-width:0; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Shell ---------- */
.shell{
  position:relative; z-index:1; max-width:1560px; margin:0 auto; padding:20px;
  display:grid; grid-template-columns:264px minmax(0,1fr); gap:20px; align-items:start;
}
@media (max-width:1023px){
  .shell{ grid-template-columns:minmax(0,1fr); padding:12px; gap:14px; }
  .sidebar{ position:fixed; inset:0 auto 0 0; width:288px; z-index:70; border-radius:0 24px 24px 0;
    transform:translateX(-106%); transition:transform .34s cubic-bezier(.22,1,.36,1); overflow-y:auto; }
  .sidebar.is-open{ transform:translateX(0); }
  .scrim{ position:fixed; inset:0; z-index:60; background:rgba(2,5,10,.68);
    backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s; }
  .scrim.is-open{ opacity:1; pointer-events:auto; }
}
@media (min-width:1024px){ .scrim, .mobile-bar{ display:none !important; } }

.glass{
  background:linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 46%, rgba(6,20,30,.35));
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.09);
}
.glass-soft{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.6rem .95rem; border-radius:14px; font-size:.82rem; font-weight:600;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.045);
  cursor:pointer; white-space:nowrap; transition:transform .16s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:2px solid rgba(34,211,238,.8); outline-offset:2px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn-primary{
  background:linear-gradient(135deg,#22d3ee,#0ea5a4 55%,#34d399); color:#03151a;
  border-color:transparent; font-weight:700;
  box-shadow:0 14px 30px -14px rgba(34,211,238,.85), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-danger{ color:#fecdd3; border-color:rgba(244,63,94,.32); background:rgba(244,63,94,.12); }
.btn-danger:hover{ background:rgba(244,63,94,.22); }
.btn-sm{ padding:.4rem .68rem; font-size:.74rem; border-radius:11px; }
.btn-icon{ width:2.15rem; height:2.15rem; padding:0; border-radius:12px; }
.btn-block{ width:100%; }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.08); }
.link{ color:var(--aqua-soft); font-weight:600; }
.link:hover{ color:#a5f3fc; text-decoration:underline; }
.icon{ width:1rem; height:1rem; flex:0 0 auto; stroke-width:2; }
.icon-sm{ width:.85rem; height:.85rem; }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .52rem;
  border-radius:9px; font-size:.68rem; font-weight:600;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:#bdd2e4;
  white-space:nowrap;
}
.chip-aqua{ color:#a5f3fc; border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.12); }
.chip-reef{ color:#a7f3d0; border-color:rgba(52,211,153,.28); background:rgba(52,211,153,.12); }
.chip-violet{ color:#ddd6fe; border-color:rgba(167,139,250,.30); background:rgba(167,139,250,.14); }
.chip-warn{ color:#fecdd3; border-color:rgba(244,63,94,.42); background:rgba(244,63,94,.16); font-weight:700; }
.chip-btn{ cursor:pointer; transition:background .18s, border-color .18s; }
.chip-btn:hover{ background:rgba(255,255,255,.11); }

/* ---------- Formular ---------- */
.label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#8fa8bd; margin-bottom:.35rem; }
.field{
  width:100%; padding:.6rem .8rem; border-radius:12px; font-size:.85rem; color:#eaf6ff;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field::placeholder{ color:#5d7689; }
.field:focus{ outline:none; border-color:rgba(34,211,238,.55); background:rgba(34,211,238,.06);
  box-shadow:0 0 0 3px rgba(34,211,238,.14); }
.field option{ background:#0a1826; color:#eaf6ff; }
textarea.field{ resize:vertical; min-height:74px; line-height:1.5; }
.hint{ font-size:.68rem; color:var(--dim); margin-top:.3rem; }
.check{ display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; }
.check input{ margin-top:.15rem; accent-color:#22d3ee; width:1rem; height:1rem; }

/* ---------- Sidebar ---------- */
.sidebar{ display:flex; flex-direction:column; gap:16px; padding:20px 16px; position:sticky; top:20px;
  max-height:calc(100vh - 40px); overflow-y:auto; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{
  width:2.7rem; height:2.7rem; border-radius:15px; display:grid; place-items:center; color:#04141a;
  background:linear-gradient(140deg,#67e8f9,#22d3ee 45%,#34d399);
  box-shadow:0 12px 26px -12px rgba(34,211,238,.95), inset 0 1px 0 rgba(255,255,255,.6);
}
.brand-title{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.02em; }
.nav-label{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#6c8399; padding:0 .35rem; }
.nav-item{
  display:flex; align-items:center; gap:.65rem; width:100%; padding:.6rem .7rem;
  border-radius:13px; font-size:.82rem; font-weight:500; color:#a9bfd2;
  border:1px solid transparent; cursor:pointer; text-align:left; transition:all .18s;
  background:none;
}
.nav-item:hover{ color:#eaf6ff; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.08); }
.nav-item.is-active{ color:#eafcff; border-color:rgba(34,211,238,.28);
  background:linear-gradient(100deg, rgba(34,211,238,.20), rgba(52,211,153,.10)); }
.nav-item .badge{ margin-left:auto; font-size:.66rem; color:#67e8f9; }
.tank-row{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.55rem .6rem;
  border-radius:13px; cursor:pointer; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025); transition:all .18s;
}
.tank-row:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13); }
.tank-row.is-active{ border-color:rgba(34,211,238,.38); background:rgba(34,211,238,.10); }
.tank-ico{ width:2rem; height:2rem; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.22); color:#67e8f9; }
.dot{ width:.42rem; height:.42rem; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; flex:0 0 auto; }

/* ---------- Kopfzeile / Tanks ---------- */
.mobile-bar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.6rem;
  padding:.5rem .2rem .7rem; backdrop-filter:blur(12px); }
.tank-pills{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tank-pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .78rem; border-radius:999px;
  font-size:.78rem; font-weight:600; color:#b6cade; cursor:pointer;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); transition:all .18s;
}
.tank-pill:hover{ color:#eaf6ff; border-color:rgba(255,255,255,.2); }
.tank-pill.is-active{ color:#04141a; border-color:transparent;
  background:linear-gradient(120deg,#67e8f9,#22d3ee 55%,#34d399); }
.stat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
@media (min-width:760px){ .stat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat-tile{ border-radius:15px; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.028); }
.stat-value{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:#eafcff; }
.stat-key{ font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); }

/* ---------- Fischkarten ---------- */
.fish-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.fish-card{
  position:relative; border-radius:20px; overflow:hidden; cursor:pointer; text-align:left;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03);
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
  display:flex; flex-direction:column;
  content-visibility:auto; contain-intrinsic-size:auto 320px;
}
.fish-card:hover{ transform:translateY(-3px); border-color:rgba(34,211,238,.32);
  box-shadow:0 26px 50px -30px rgba(34,211,238,.7); }
.fish-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#071620; }
.fish-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.fish-card:hover .fish-media img{ transform:scale(1.06); }
.fish-media::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(3,7,14,.92) 0%, rgba(3,7,14,.15) 45%, transparent 70%); }
.fish-media-top{ position:absolute; top:.5rem; left:.5rem; right:.5rem; display:flex; gap:.3rem; z-index:2; }
.fish-media-top .chip{ backdrop-filter:blur(10px); background:rgba(4,14,22,.62); }
.fish-count{
  position:absolute; bottom:.5rem; right:.5rem; z-index:2; display:inline-flex; align-items:center; gap:.15rem;
  padding:.18rem .2rem .18rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; color:#eafcff;
  background:rgba(4,14,22,.62); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px);
}
.count-btn{ width:1.25rem; height:1.25rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#eafcff; cursor:pointer; font-size:.8rem; line-height:1;
  border:none; transition:background .15s, transform .15s; }
.count-btn:hover{ background:rgba(34,211,238,.45); transform:scale(1.09); }
.fish-body{ padding:.7rem .8rem .8rem; display:flex; flex-direction:column; gap:.35rem; }
.fish-name{ font-family:var(--display); font-weight:600; font-size:.95rem; color:#eafcff; line-height:1.2; }
.fish-sci{ font-size:.68rem; font-style:italic; color:#7d97ad; }
.fish-tags{ display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.1rem; }
.fish-photo-badge{ position:absolute; bottom:.5rem; left:.5rem; z-index:2;
  display:inline-flex; align-items:center; gap:.25rem; padding:.16rem .42rem; border-radius:8px;
  font-size:.62rem; font-weight:700; color:#a7f3d0; background:rgba(6,78,59,.72);
  border:1px solid rgba(52,211,153,.34); }
.card-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin-top:.2rem; }
.empty-state{ border:1px dashed rgba(255,255,255,.14); border-radius:20px; padding:2.2rem 1.2rem;
  text-align:center; color:var(--muted); }

/* ---------- Galerie ---------- */
.gallery{ position:relative; border-radius:18px; overflow:hidden; background:#071620; border:1px solid var(--line); }
.gallery-main{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); width:2.2rem; height:2.2rem;
  border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(3,10,18,.7); color:#eafcff;
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); z-index:3; }
.gallery-nav:hover{ background:rgba(34,211,238,.3); }
.gallery-nav.prev{ left:.5rem; } .gallery-nav.next{ right:.5rem; }
.gallery-caption{ position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem;
  background:linear-gradient(to top, rgba(3,7,14,.94), transparent); font-size:.66rem; color:#a9c2d6; z-index:2; }
.gallery-strip{ display:flex; gap:.35rem; overflow-x:auto; padding:.45rem 0 0; scrollbar-width:thin; }
.gallery-thumb{ width:56px; height:44px; border-radius:8px; overflow:hidden; flex:0 0 auto; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:#071620; padding:0; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb.is-active{ border-color:rgba(34,211,238,.9); box-shadow:0 0 0 2px rgba(34,211,238,.35); }
.gallery-meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.64rem; color:var(--dim); margin-top:.4rem; }

/* ---------- Modal ---------- */
.modal-layer{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,11,.72);
  backdrop-filter:blur(14px) saturate(120%); animation:fadeIn .22s ease both; }
.modal-card{
  position:relative; width:100%; max-width:900px; border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg, rgba(18,34,48,.95), rgba(6,16,26,.97));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 120px -40px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.12);
  animation:modalIn .38s cubic-bezier(.22,1,.36,1) both; max-height:calc(100vh - 32px);
  display:flex; flex-direction:column;
}
.modal-card.sm{ max-width:520px; }
.modal-head{ display:flex; align-items:flex-start; gap:.8rem; padding:1rem 1.1rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.07); }
.modal-body{ padding:1rem 1.1rem 1.2rem; overflow-y:auto; }
.modal-close{ margin-left:auto; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.detail-grid{ display:grid; gap:1rem; }
@media (min-width:720px){ .detail-grid{ grid-template-columns:1.02fr 1fr; } }
.info-row{ display:flex; gap:.5rem; align-items:flex-start; border-radius:12px;
  border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.03); padding:.45rem .6rem; }
.info-key{ font-size:.56rem; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); }
.info-val{ font-size:.78rem; line-height:1.4; color:#d5e3f0; }
.range-track{ position:relative; height:.42rem; border-radius:999px; background:rgba(255,255,255,.09); margin:.55rem 0 .3rem; }
.range-fill{ position:absolute; top:0; bottom:0; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#34d399); box-shadow:0 0 12px rgba(34,211,238,.5); }
.range-labels{ display:flex; justify-content:space-between; font-size:.62rem; color:var(--dim); }

/* ---------- Auth ---------- */
.auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:20px; position:relative; z-index:1; }
.auth-card{ width:100%; max-width:440px; padding:1.5rem; }
.tabs{ display:flex; gap:.3rem; padding:.25rem; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); }
.tab{ flex:1; padding:.45rem; border-radius:10px; font-size:.78rem; font-weight:600; color:#9db4c8;
  background:none; border:none; cursor:pointer; transition:all .18s; }
.tab.is-active{ color:#04141a; background:linear-gradient(120deg,#67e8f9,#22d3ee 55%,#34d399); }
.provider-list{ display:flex; flex-direction:column; gap:.45rem; }
.provider-btn{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.6rem .8rem;
  border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  font-size:.82rem; font-weight:600; cursor:pointer; transition:all .18s; text-align:left; }
.provider-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.provider-btn.disabled{ opacity:.5; cursor:not-allowed; }
.provider-ico{ width:1.9rem; height:1.9rem; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.09); font-weight:700; flex:0 0 auto; }
.divider{ display:flex; align-items:center; gap:.7rem; color:var(--dim); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.14em; margin:.15rem 0; }
.divider::before,.divider::after{ content:''; height:1px; flex:1; background:rgba(255,255,255,.1); }

/* ---------- Kommentare / Likes ---------- */
.like-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-weight:600; font-size:.8rem;
  cursor:pointer; transition:all .18s; }
.like-btn:hover{ border-color:rgba(244,63,94,.4); background:rgba(244,63,94,.1); }
.like-btn.is-liked{ color:#fecdd3; border-color:rgba(244,63,94,.45); background:rgba(244,63,94,.16); }
.like-btn.is-liked svg{ fill:#fb7185; stroke:#fb7185; }
.comment{ display:flex; gap:.6rem; padding:.65rem 0; border-top:1px solid rgba(255,255,255,.06); }
.comment:first-child{ border-top:none; }
.comment-body{ font-size:.8rem; line-height:1.5; color:#cfdee9; white-space:pre-wrap; word-break:break-word; }
.avatar{ width:2rem; height:2rem; border-radius:50%; overflow:hidden; flex:0 0 auto;
  display:grid; place-items:center; background:linear-gradient(140deg,#22d3ee,#34d399); color:#04141a;
  font-weight:700; font-size:.8rem; border:1px solid rgba(255,255,255,.14); }
.avatar.lg{ width:3.4rem; height:3.4rem; font-size:1.15rem; }
.avatar.sm{ width:1.5rem; height:1.5rem; font-size:.62rem; }
.avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Community ---------- */
.community-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.community-card{ border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03); display:flex; flex-direction:column;
  transition:transform .22s, border-color .22s;
  content-visibility:auto; contain-intrinsic-size:auto 340px; }
.community-card:hover{ transform:translateY(-3px); border-color:rgba(34,211,238,.3); }
.community-cover{ aspect-ratio:16/9; background:#071620; overflow:hidden; position:relative; }
.community-cover img{ width:100%; height:100%; object-fit:cover; }
.community-body{ padding:.75rem .85rem; display:flex; flex-direction:column; gap:.4rem; }

/* ---------- Detail-Listen ---------- */
.section-title-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.4rem; }
.detail-fish-list{ display:flex; flex-direction:column; gap:.35rem; }
.detail-fish{ display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); }
.detail-fish-thumb{ width:2.1rem; height:2.1rem; border-radius:10px; overflow:hidden; flex:0 0 auto;
  display:grid; place-items:center; background:rgba(34,211,238,.1); color:#67e8f9; }
.detail-fish-thumb img{ width:100%; height:100%; object-fit:cover; }
.comment-list{ display:flex; flex-direction:column; }

/* ---------- Meldungen ---------- */
.banner{ display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .85rem; border-radius:14px;
  font-size:.78rem; line-height:1.45; border:1px solid rgba(34,211,238,.28);
  background:rgba(34,211,238,.10); color:#cbf4fb; }
.banner.warn{ border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.10); color:#fde68a; }
.banner.bad{ border-color:rgba(244,63,94,.32); background:rgba(244,63,94,.12); color:#fecdd3; }
#toast-root{ position:fixed; right:16px; bottom:16px; z-index:120; display:flex; flex-direction:column;
  gap:.45rem; max-width:min(92vw,360px); }
.toast{ padding:.65rem .85rem; border-radius:13px; font-size:.8rem; font-weight:500;
  background:rgba(10,24,38,.96); border:1px solid rgba(34,211,238,.35); color:#eafcff;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9); animation:toastIn .25s ease both; }
.toast.err{ border-color:rgba(244,63,94,.5); color:#fecdd3; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.spinner{ width:1rem; height:1rem; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  border-top-color:#22d3ee; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.skeleton{ background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:10px; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.8rem;
  margin-bottom:1rem; }
.page-title{ font-family:var(--display); font-size:1.5rem; font-weight:600; color:#fff; }
.section{ padding:1.1rem; }
@media (max-width:640px){ .section{ padding:.85rem; } }
.grid-2{ display:grid; gap:.8rem; }
@media (min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr; } }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(34,211,238,.35); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Performance & Bewegung ---------- */
/* Hebe-Effekt nur auf echten Zeigegeräten – auf Touch spart das Compositing-Arbeit. */
@media (hover:none), (pointer:coarse){
  .fish-card:hover, .community-card:hover, .btn:hover{ transform:none; }
  .fish-card:hover .fish-media img{ transform:none; }
  .fish-media img{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}






/* ---------- Admin-Dashboard ---------- */
.admin-group{ margin-top:1rem; }
.admin-group .nav-label{ margin-bottom:.4rem; }
.admin-split{ display:grid; gap:1rem; margin-top:1.1rem; }
@media (min-width:900px){ .admin-split{ grid-template-columns:1fr 1fr; } }

.admin-list{ display:flex; flex-direction:column; gap:.35rem; }
.admin-row{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem;
  border-radius:13px; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025); transition:background .15s, border-color .15s;
}
.admin-row:hover{ background:rgba(255,255,255,.05); border-color:rgba(34,211,238,.18); }
.admin-row.compact{ padding:.4rem .55rem; }
.admin-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.admin-meta{ font-size:.7rem; color:#9db4c8; white-space:nowrap; }
.admin-actions{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; justify-content:flex-end; }
.admin-tank-ico{
  width:2rem; height:2rem; flex:none; display:grid; place-items:center;
  border-radius:11px; color:#67e8f9; background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.22);
}

.admin-tag{
  display:inline-flex; align-items:center; padding:.05rem .38rem; border-radius:7px;
  font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#9db4c8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.admin-tag.is-admin{ color:#04141a; background:linear-gradient(120deg,#67e8f9,#34d399); border-color:transparent; }
.admin-tag.is-guest{ color:#c7d7e6; background:rgba(148,163,184,.16); }
.admin-tag.is-blocked{ color:#fecdd3; background:rgba(244,63,94,.16); border-color:rgba(244,63,94,.32); }

@media (max-width:640px){
  .admin-row{ flex-wrap:wrap; }
  .admin-actions{ width:100%; justify-content:flex-start; }
}

/* ---------- Autovervollständigung (Fischname) ---------- */
.ac-wrap{ position:relative; }
.ac-list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% - .05rem); margin-top:.15rem;
  max-height:340px; overflow-y:auto; padding:.25rem; display:flex; flex-direction:column; gap:.1rem;
  background:rgba(8,20,32,.98); border:1px solid rgba(34,211,238,.28);
  border-radius:14px; box-shadow:0 22px 50px -20px rgba(0,0,0,.9); backdrop-filter:blur(16px);
}
.ac-item{
  display:grid; grid-template-columns:1fr auto; gap:.05rem .5rem; text-align:left; width:100%;
  padding:.42rem .5rem; border-radius:10px; border:1px solid transparent; background:none; cursor:pointer;
}
.ac-item .ac-name{ font-size:.82rem; font-weight:600; color:#eafcff; line-height:1.2; }
.ac-item .ac-sci{ font-size:.66rem; font-style:italic; color:#7d97ad; justify-self:end; }
.ac-item .ac-meta{ grid-column:1 / -1; font-size:.62rem; color:#6c8399; }
.ac-item:hover, .ac-item.is-active{ background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.30); }
.ac-item.is-active .ac-name{ color:#a5f3fc; }
.ac-hint{ margin-top:.25rem; line-height:1.4; }
.ac-ok{ color:#6ee7b7; }
.ac-warn{ color:#fcd34d; }

/* ---------- Farbvarianten ---------- */
.color-section{ margin-top:1.1rem; border-top:1px solid rgba(255,255,255,.07); padding-top:.85rem; }
.color-row{ border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:.5rem; background:rgba(255,255,255,.025); }
.color-thumbs{ display:flex; gap:.3rem; overflow-x:auto; margin-top:.4rem; padding-bottom:.15rem; scrollbar-width:thin; }
.color-thumb{
  width:64px; height:48px; flex:0 0 auto; border-radius:8px; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:#071620;
}
.color-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.color-thumb:hover{ border-color:rgba(34,211,238,.65); }
.gallery-colors{ margin-top:.45rem; }

/* ---------- Art einsetzen (Katalog-Grid) ---------- */
.modal-card.xl{ max-width:1180px; }
.modal-card.md{ max-width:560px; }
.modal-foot{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.8rem 1.1rem; border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(4,14,22,.2), rgba(4,14,22,.55));
}
.picker-body{ display:flex; flex-direction:column; gap:.55rem; padding-top:.8rem; }
.picker-search-wrap{ position:relative; }
.picker-search-wrap .icon{
  position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; color:#5d7689; pointer-events:none;
}
.picker-search{ padding-left:2.2rem; font-size:.92rem; }
.picker-groups{ display:flex; flex-wrap:wrap; gap:.28rem; }
.pick-n{ font-size:.58rem; opacity:.6; font-weight:700; }
.picker-info{ line-height:1.3; }
.picker-grid{
  display:grid; gap:.5rem; margin-top:.15rem;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}
.pick-card{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03); color:inherit;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  content-visibility:auto; contain-intrinsic-size:auto 190px;
}
.pick-card:hover{ transform:translateY(-2px); border-color:rgba(34,211,238,.34);
  box-shadow:0 18px 34px -24px rgba(34,211,238,.75); }
.pick-card:focus-visible{ outline:2px solid rgba(34,211,238,.7); outline-offset:2px; }
.pick-media{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg,#082430,#04121c);
}
.pick-ph .icon{ width:1.4rem; height:1.4rem; color:#20455c; animation:pickPulse 1.5s ease-in-out infinite; }
.pick-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#03101a; }
.pick-media.has-img .pick-ph{ display:none; }
@keyframes pickPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.95; } }
@media (prefers-reduced-motion: reduce){ .pick-ph .icon{ animation:none; } }
.pick-badge{
  position:absolute; left:.3rem; bottom:.3rem; z-index:2;
  padding:.1rem .34rem; border-radius:7px; font-size:.56rem; font-weight:700;
  color:#a5f3fc; background:rgba(4,14,22,.78); border:1px solid rgba(34,211,238,.32);
}
.pick-body{ display:flex; flex-direction:column; gap:.08rem; padding:.42rem .5rem .5rem; min-width:0; }
.pick-name{
  font-size:.78rem; font-weight:600; color:#eafcff; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pick-sci{ font-size:.6rem; font-style:italic; color:#7d97ad; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-meta{ font-size:.58rem; color:#6c8399; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-empty{
  grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.8rem .8rem; color:#8fa8bd; border:1px dashed rgba(255,255,255,.14); border-radius:16px;
}
.picker-empty .icon{ width:1.4rem; height:1.4rem; color:#2d4b60; }

/* ---------- Panel: Anzahl + Bezug ---------- */
.picker-form-body{ display:flex; flex-direction:column; gap:.6rem; }
.pick-thumb{
  width:56px; height:56px; flex:none; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; color:#2d4b60; background:#071620;
  border:1px solid rgba(255,255,255,.1);
}
.pick-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pick-thumb .icon{ width:1.4rem; height:1.4rem; }
.pick-block{
  display:flex; flex-direction:column; gap:.45rem; border-radius:16px; padding:.7rem .8rem;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.022);
}
.pick-more{
  border-radius:16px; padding:.6rem .8rem;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.022);
}
.pick-more > summary{
  cursor:pointer; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#8fa8bd; list-style:none;
}
.pick-more > summary::-webkit-details-marker{ display:none; }
.pick-more > summary::before{ content:'+ '; color:#67e8f9; }
.pick-more[open] > summary::before{ content:'− '; }

.stepper{
  display:inline-flex; align-items:center; gap:.25rem; padding:.25rem; border-radius:14px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045);
  align-self:flex-start;
}
.stepper.is-locked{ border-color:rgba(34,211,238,.28); }
.stepper-btn{
  width:2.3rem; height:2.3rem; border-radius:10px; cursor:pointer; font-size:1rem; line-height:1;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#eafcff;
  transition:background .15s;
}
.stepper-btn:hover{ background:rgba(34,211,238,.24); }
.stepper-btn:disabled{ opacity:.35; cursor:default; background:rgba(255,255,255,.04); }
.stepper-val{
  width:4rem; height:2.3rem; text-align:center; border:none; background:transparent;
  color:#eafcff; font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums;
  appearance:textfield; -moz-appearance:textfield;
}
.stepper-val:focus{ outline:none; }
.stepper-val::-webkit-outer-spin-button,
.stepper-val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.src-row{ display:grid; grid-template-columns:66px minmax(0,1fr) 34px; gap:.35rem; align-items:center; }
.src-row .field{ padding:.42rem .55rem; font-size:.8rem; }
.src-count{ text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- Bezug im Detail ---------- */
.src-section{ margin-top:1rem; border-top:1px solid rgba(255,255,255,.07); padding-top:.85rem; }
.src-line{
  display:flex; align-items:center; gap:.5rem; padding:.35rem .55rem; border-radius:10px;
  font-size:.78rem; color:#d5e3f0;
  border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.03);
}
.src-n{ color:#67e8f9; font-weight:700; font-size:.72rem; }

@media (max-width:640px){
  .picker-grid{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:.4rem; }
  .pick-name{ font-size:.72rem; }
  .pick-sci{ display:none; }
  .modal-foot{ padding:.7rem .8rem; }
  .src-row{ grid-template-columns:54px minmax(0,1fr) 30px; }
  .modal-card.xl{ max-width:100%; }
}

@media (max-width:640px){
  .ac-list{ max-height:260px; }
  .ac-item .ac-sci{ display:none; }
  .color-thumb{ width:56px; height:42px; }
}