/* Gemeinsames Designsystem der neuen Groupler-Seiten (Detail, Dashboard,
   Kategorie/Tag).

   Angleichung 2026-08: uebernimmt Aufbau, Typografie und Dunkelheit von
   OniCenter (views/detail.html dort), damit sich beide Verzeichnisse gleich
   anfuehlen. Einziger bewusster Unterschied ist der Akzent — OniCenter ist
   pink, Groupler violett —, damit man auf einen Blick sieht, auf welcher der
   beiden Seiten man gerade ist. Fuer identische Optik genuegt es, --accent
   und --accent-b unten auf #ff6097 / #d91b5c zu setzen. */

:root{
  --bg:#04050a;--bg-card:#080a13;--bg-glass:rgba(8,10,19,.85);--bg-surface:#0b0e1b;
  --accent:#ff6097;--accent-dim:rgba(255,96,151,.18);--accent-glow:rgba(255,96,151,.35);--accent-b:#d91b5c;
  --storm:#ff8ebb;--ok:#3ddc97;--warn:#f0b429;--danger:#ff5b5b;--purple:#c084fc;--gold:#fbbf24;
  --text:#f3f6fc;--text-2:#a2b0d6;--text-3:#4a5775;
  --border:rgba(255,96,151,.12);--border-h:rgba(255,96,151,.32);
  --font-d:'Bebas Neue',sans-serif;--font-b:'Outfit',sans-serif;--font-m:'Space Mono',monospace;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:30px;--ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--accent-b);border-radius:4px;}

/* Hintergrund-Schimmer */
.glow{position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(130px);}
.glow-1{width:640px;height:640px;top:-260px;right:-160px;background:radial-gradient(circle,rgba(255,96,151,.16),transparent 70%);}
.glow-2{width:520px;height:520px;bottom:-200px;left:-140px;background:radial-gradient(circle,rgba(255,109,194,.12),transparent 70%);}

/* Kopfzeile, Ladebildschirm und Fusszeile kommen aus groupler-master.css —
   eingefuegt von groupler-shell.js. Hier bewusst nichts doppelt definieren. */

/* Die Navigationsleiste ist fixiert (aus groupler-master.css) — deshalb
   oben Platz lassen, sonst rutscht der Inhalt darunter. */
.wrap{position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:100px clamp(16px,4vw,28px) 70px;}
.crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--text-3);padding:22px 0 16px;font-family:var(--font-m);}
.crumbs a:hover{color:var(--accent);}

/* Kopfbereich eines Eintrags */
.hero{position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:clamp(22px,4vw,44px);margin-bottom:26px;}
.hero::after{content:'';position:absolute;top:-140px;right:-140px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%);opacity:.35;pointer-events:none;}
.hero-in{position:relative;z-index:1;display:flex;gap:clamp(18px,3vw,36px);align-items:flex-start;flex-wrap:wrap;}
.entry-logo{width:128px;height:128px;border-radius:26px;object-fit:cover;border:2px solid var(--border-h);flex-shrink:0;background:var(--bg-surface);}
.entry-logo.fallback{display:grid;place-items:center;font-family:var(--font-d);font-size:3.6rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--purple));}
.hero-body{flex:1;min-width:260px;}
h1{font-family:var(--font-d);font-size:clamp(2rem,5vw,3.1rem);letter-spacing:.02em;line-height:1.05;margin-bottom:6px;}
.owner{color:var(--text-2);font-size:.95rem;margin-bottom:16px;}
.owner b{color:var(--text);}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px;color:var(--text-2);font-size:.95rem;}
.hero-stats b{color:var(--text);font-size:1.15rem;font-family:var(--font-m);}

/* Abzeichen und Tags */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tag{padding:5px 12px;border-radius:var(--r-sm);font-size:.76rem;font-weight:600;letter-spacing:.03em;
  background:var(--accent-dim);color:var(--storm);border:1px solid var(--border-h);}
.tag.verified{background:rgba(61,220,151,.12);color:var(--ok);border-color:rgba(61,220,151,.3);}
.tag.pending{background:rgba(240,180,41,.12);color:var(--warn);border-color:rgba(240,180,41,.3);}
.tag.plat{background:rgba(255,109,194,.12);color:var(--purple);border-color:rgba(255,109,194,.3);}
.tag.link:hover{background:var(--accent);color:#fff;}

/* Schaltflaechen */
.btn{padding:13px 26px;border-radius:var(--r-md);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;transition:transform .18s var(--ease),box-shadow .18s var(--ease);display:inline-block;}
.btn:hover{transform:translateY(-2px);}
.btn-join{background:linear-gradient(135deg,var(--accent),var(--accent-b));color:#fff;box-shadow:0 10px 30px rgba(255,96,151,.28);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-b));color:#fff;box-shadow:0 10px 30px rgba(255,96,151,.28);}
.btn-ghost{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-2);}
.btn-ghost:hover{color:var(--text);border-color:var(--border-h);}
.btn-ghost.on{background:var(--accent-dim);color:var(--storm);border-color:var(--border-h);}
.btns{display:flex;gap:12px;flex-wrap:wrap;}

/* Spalten und Panels */
.cols{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}
@media(max-width:940px){.cols{grid-template-columns:1fr;}}
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);margin-bottom:24px;}
.panel h2{font-family:var(--font-d);font-size:1.5rem;letter-spacing:.05em;display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.bar{width:5px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--purple));}
.about{color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.02rem;}

/* Seitenleiste */
.side .panel{padding:22px;}
.reach .label{font-family:var(--font-m);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:6px;}
.reach .value{font-family:var(--font-d);font-size:3.2rem;line-height:1;color:var(--text);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.duo .box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;}
.duo .box span{font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:4px;}
.duo .box b{font-family:var(--font-d);font-size:1.5rem;}
.rows{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.row .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600;}
.row .v{font-family:var(--font-m);font-size:.86rem;color:var(--text);}
.row .v.ok{color:var(--ok);}
.meta-h{font-family:var(--font-m);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3);
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.stack{display:flex;flex-direction:column;gap:16px;}
.stack .k{font-family:var(--font-m);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:3px;}
.stack .v{font-weight:600;}
.stack .v.mono{font-family:var(--font-m);font-size:.76rem;color:var(--text-2);overflow-wrap:anywhere;}

/* Community-Feedback */
.fb-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.fb-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);padding:22px;margin-bottom:14px;}
.fb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.fb-who{display:flex;align-items:center;gap:13px;}
.avatar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-d);
  font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--purple));}
.fb-name{font-weight:700;display:block;line-height:1.2;}
.fb-stars{color:var(--gold);font-size:.82rem;letter-spacing:.1em;}
.fb-date{font-family:var(--font-m);font-size:.68rem;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;}
.fb-body{color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;}
.fb-del{font-size:.72rem;color:var(--danger);opacity:.7;}
.fb-del:hover{opacity:1;}
.picker{display:inline-flex;gap:6px;font-size:1.9rem;line-height:1;}
.picker span{color:var(--text-3);cursor:pointer;transition:transform .15s var(--ease),color .15s var(--ease);}
.picker span.on{color:var(--gold);}
.picker span:hover{transform:scale(1.16);}

/* Formulare */
textarea,select,input{width:100%;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg);
  border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.95rem;resize:vertical;}
textarea:focus,select:focus,input:focus{outline:none;border-color:var(--border-h);}
.hint{font-size:.8rem;color:var(--text-3);}
.msg{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-size:.9rem;display:none;}
.msg.ok{display:block;background:rgba(61,220,151,.1);color:var(--ok);border:1px solid rgba(61,220,151,.3);}
.msg.err{display:block;background:rgba(255,91,91,.1);color:var(--danger);border:1px solid rgba(255,91,91,.3);}

/* Karten-Listen (Kategorie/Tag, Dashboard, Aehnliches) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;gap:11px;transition:transform .2s var(--ease),border-color .2s var(--ease);}
.card:hover{transform:translateY(-4px);border-color:var(--border-h);}
.card-top{display:flex;gap:14px;align-items:center;}
.card-logo{width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid var(--border-h);flex-shrink:0;}
.card-logo.fb{display:grid;place-items:center;font-family:var(--font-d);font-size:1.5rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--purple));}
.card h3{font-family:var(--font-d);font-size:1.35rem;letter-spacing:.03em;line-height:1.1;}
.card .who{font-size:.76rem;color:var(--text-3);font-family:var(--font-m);}
.card p{color:var(--text-2);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.foot{display:flex;gap:14px;margin-top:auto;padding-top:10px;font-size:.76rem;color:var(--text-3);font-family:var(--font-m);}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.rel a{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;transition:transform .2s var(--ease),border-color .2s var(--ease);}
.rel a:hover{transform:translateY(-3px);border-color:var(--border-h);}
.rel b{display:block;margin-bottom:4px;}
.rel span{font-size:.78rem;color:var(--text-3);font-family:var(--font-m);}

/* Blaettern und Leerzustand */
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:34px;flex-wrap:wrap;}
.pager button{padding:10px 18px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-2);font-weight:600;}
.pager button:disabled{opacity:.3;cursor:not-allowed;}
.pager .cur{font-family:var(--font-m);font-size:.84rem;color:var(--text-2);}
.chip{padding:9px 18px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-2);
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.chip.on{background:linear-gradient(135deg,var(--accent),var(--accent-b));color:#fff;border-color:transparent;}
.empty{grid-column:1/-1;text-align:center;padding:70px 24px;background:var(--bg-card);
  border:1px dashed var(--border-h);border-radius:var(--r-lg);}
.empty .ico{font-size:3.4rem;margin-bottom:16px;}
.empty h3{font-family:var(--font-d);font-size:1.8rem;letter-spacing:.03em;margin-bottom:10px;}
.empty p{color:var(--text-2);max-width:460px;margin:0 auto 24px;}

footer{border-top:1px solid var(--border);padding:34px 20px;text-align:center;color:var(--text-3);font-size:.84rem;}

/* ── Formularseiten (Login, Registrieren, Einreichen) ───────────────────── */
.form-wrap{max-width:520px;margin:0 auto;padding:clamp(30px,7vw,64px) 0;}
.form-wrap.wide{max-width:760px;}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);}
.form-card h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:8px;}
.form-card .sub{color:var(--text-2);margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:var(--font-m);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:7px;}
.field .help{font-size:.78rem;color:var(--text-3);margin-top:6px;}
.alert{display:none;padding:12px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-size:.9rem;}
.alert.show{display:block;}
.alert.err{background:rgba(255,91,91,.1);color:var(--danger);border:1px solid rgba(255,91,91,.3);}
.alert.ok{background:rgba(61,220,151,.1);color:var(--ok);border:1px solid rgba(61,220,151,.3);}
.alert.warn{background:rgba(240,180,41,.1);color:var(--warn);border:1px solid rgba(240,180,41,.3);}
.form-foot{text-align:center;color:var(--text-2);font-size:.9rem;margin-top:22px;}
.form-foot a{color:var(--accent);}
.upload-zone{border:1px dashed var(--border-h);border-radius:var(--r-md);padding:26px;text-align:center;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);background:var(--bg);}
.upload-zone:hover{border-color:var(--accent);background:var(--bg-surface);}
.upload-zone img{max-width:110px;max-height:110px;border-radius:var(--r-md);display:none;margin:0 auto 10px;}
.upload-zone.has-file img{display:block;}
.upload-zone.has-file .up-text{color:var(--ok);}
.up-text{color:var(--text-2);font-size:.9rem;}
.up-hint{color:var(--text-3);font-size:.76rem;margin-top:5px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:620px){.row2{grid-template-columns:1fr;}}

/* ── Reichere Eintragsprofile (Funktionen, Links, Auszeichnungen) ───────── */
.tag.featured{background:rgba(255,109,194,.14);color:var(--purple);border-color:rgba(255,109,194,.34);}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.feat{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 15px;color:var(--text-2);font-size:.92rem;}
.ext{display:block;padding:11px 14px;border-radius:var(--r-sm);background:var(--bg-surface);
  border:1px solid var(--border);color:var(--text-2);font-size:.9rem;font-weight:600;}
.ext:hover{color:var(--text);border-color:var(--border-h);}