/* =====================================================================
   Groupler · HIVE
   ---------------------------------------------------------------------
   Eigenes Design-System für groupler.onimai.ch/.eu.

   Bewusst das Gegenteil von OniCenter/NOVA: warm statt kühl, Smaragd
   und Limette statt Violett/Cyan, Bento-Raster statt Scroll-Strasse,
   Knotennetz statt freier Partikel, weiche Grotesk statt technischer
   Sora. Die Seiten der Familie sollen verwandt wirken — nicht gleich.

   Wird als LETZTES Stylesheet geladen und schlägt die alten Sheets.
   ===================================================================== */

/* ---------- 0. Tokens ---------- */
:root{
  --hv-ink:#06100c;
  --hv-surface:#0a1712;
  --hv-surface-2:#0f1f18;
  --hv-glass:rgba(15,31,24,.6);

  --hv-emerald:#2ee6a0;
  --hv-lime:#b8ff5c;
  --hv-amber:#ffb020;
  --hv-deep:#0c8f63;
  --hv-danger:#ff6b6b;

  --hv-text:#eefaf3;
  --hv-muted:#8aa79a;
  --hv-dim:#4d685c;

  --hv-border:rgba(180,255,220,.1);
  --hv-border-2:rgba(180,255,220,.2);
  --hv-ring:rgba(46,230,160,.32);

  --hv-fd:'Bricolage Grotesque',system-ui,sans-serif;
  --hv-fb:'DM Sans',system-ui,sans-serif;
  --hv-fm:'IBM Plex Mono',ui-monospace,monospace;

  --hv-ease:cubic-bezier(.2,.8,.2,1);
  --hv-nav:76px;
  --hv-r:20px;

  /* Alt-Tokens umbiegen, damit ungetouchte Unterseiten mitziehen */
  --bg:#06100c;--bg-card:#0a1712;--bg-surface:#0f1f18;--bg-glass:rgba(15,31,24,.78);
  --accent:#2ee6a0;--accent-b:#b8ff5c;--accent-dim:rgba(46,230,160,.16);
  --accent-glow:rgba(46,230,160,.32);--storm:#b8ff5c;--purple:#2ee6a0;
  --ok:#2ee6a0;--warn:#ffb020;--danger:#ff6b6b;--gold:#ffb020;
  --text:#eefaf3;--text-2:#8aa79a;--text-3:#4d685c;
  --border:rgba(180,255,220,.1);--border-h:rgba(180,255,220,.24);
  --font-d:'Bricolage Grotesque',sans-serif;--font-b:'DM Sans',sans-serif;--font-m:'IBM Plex Mono',monospace;
}

/* ---------- 1. Base ---------- */
html{scroll-behavior:smooth;}
html,body{background:var(--hv-ink);color:var(--hv-text);overflow-x:hidden;}
body{font-family:var(--hv-fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img,svg{display:block;max-width:100%;}
ul{list-style:none;}
*,*::before,*::after{box-sizing:border-box;}
::selection{background:var(--hv-emerald);color:#04140d;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--hv-ink);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--hv-emerald),var(--hv-lime));border-radius:10px;}
:focus-visible{outline:2px solid var(--hv-lime);outline-offset:3px;border-radius:6px;}

.hv-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 30px;}

.hv-kick{
  font-family:var(--hv-fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hv-emerald);display:inline-flex;align-items:center;gap:9px;
}
.hv-kick::before{content:'⬢';font-size:9px;color:var(--hv-lime);}
.hv-h2{
  font-family:var(--hv-fd);font-weight:700;font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.05;letter-spacing:-.03em;
}
.hv-lead{color:var(--hv-muted);font-size:clamp(1rem,1.35vw,1.1rem);max-width:54ch;margin-top:16px;}
.hv-grad{
  background:linear-gradient(100deg,var(--hv-lime),var(--hv-emerald) 55%,var(--hv-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 2. Buttons: eckiger als NOVA (Pille vs. Kachel) ---------- */
.hv-btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--hv-fb);font-weight:700;font-size:14.5px;
  padding:13px 24px;border-radius:14px;border:none;cursor:pointer;text-decoration:none;
  transition:transform .3s var(--hv-ease),box-shadow .3s var(--hv-ease),background .3s,border-color .3s;
}
.hv-btn-primary,.btn-primary{
  background:linear-gradient(100deg,var(--hv-emerald),var(--hv-lime));
  color:#04140d;box-shadow:0 10px 28px -10px rgba(46,230,160,.6);
}
.hv-btn-primary:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(46,230,160,.7);}
.hv-btn-ghost,.btn-ghost,.btn-secondary{
  background:rgba(255,255,255,.035);border:1px solid var(--hv-border-2);color:var(--hv-text);
}
.hv-btn-ghost:hover,.btn-ghost:hover,.btn-secondary:hover{background:rgba(46,230,160,.09);border-color:var(--hv-ring);transform:translateY(-2px);}
.hv-btn-sm,.btn-sm{padding:9px 17px;font-size:13px;border-radius:11px;}

/* ---------- 3. Hintergrund: Wabengitter + Knotennetz ---------- */
#hv-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85;}
.hv-hex{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%232ee6a0' stroke-opacity='.05'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='%232ee6a0' stroke-opacity='.05'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 78%);
}
.hv-bloom{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0;}
.hv-bloom.b1{width:700px;height:700px;top:-240px;right:-180px;background:radial-gradient(circle,rgba(46,230,160,.14),transparent 66%);}
.hv-bloom.b2{width:560px;height:560px;bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(184,255,92,.09),transparent 66%);}
.hv-bloom.b3{width:380px;height:380px;top:46%;right:30%;background:radial-gradient(circle,rgba(255,176,32,.06),transparent 66%);}

.orb,.grid-overlay{display:none !important;}
#bg-canvas{opacity:0 !important;}

#hv-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--hv-emerald),var(--hv-lime));
  box-shadow:0 0 12px var(--hv-ring);transition:width .1s linear;
}
#scroll-bar{background:linear-gradient(90deg,var(--hv-emerald),var(--hv-lime)) !important;}

/* ---------- 4. Navigation: zentrierte Pille statt Vollbreite ---------- */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--hv-nav);
  display:flex;align-items:center;padding:0 !important;background:transparent;border:none;
  transition:height .4s var(--hv-ease);
}
.hv-nav-inner{
  width:100%;max-width:1240px;margin:0 auto;padding:0 30px;
  display:flex;align-items:center;gap:20px;
}
#navbar .hv-pill{
  flex:1;display:flex;align-items:center;gap:20px;
  padding:9px 12px 9px 18px;border-radius:100px;
  border:1px solid transparent;background:transparent;
  transition:background .4s var(--hv-ease),border-color .4s var(--hv-ease),box-shadow .4s;
}
#navbar.scrolled .hv-pill{
  background:rgba(10,23,18,.82);border-color:var(--hv-border);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 14px 40px -20px rgba(0,0,0,.9);
}
.brand,.hv-brand{
  font-family:var(--hv-fd);font-weight:800;font-size:18.5px;letter-spacing:-.02em;
  color:var(--hv-text);text-shadow:none;display:flex;align-items:center;gap:9px;flex-shrink:0;
}
.brand-mark{width:22px;height:22px;color:var(--hv-emerald);animation:none;font-size:1em;}
.nav-links{display:flex;align-items:center;gap:6px;flex:1;}
.nav-links a{
  font-family:var(--hv-fb);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--hv-muted);padding:7px 13px;border-radius:100px;transition:color .25s,background .25s;
}
.nav-links a:hover{color:var(--hv-text);background:rgba(46,230,160,.1);}
.nav-links a.active{color:#04140d;background:var(--hv-emerald);}
.nav-live{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--hv-fm);font-size:10px;letter-spacing:.14em;color:var(--hv-lime);text-transform:uppercase;
}
.nav-live-dot{width:7px;height:7px;border-radius:50%;background:var(--hv-lime);box-shadow:0 0 10px var(--hv-lime);animation:hvPulse 2.4s infinite;}
@keyframes hvPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hamburger span{background:var(--hv-emerald);}
.mobile-menu{background:rgba(6,16,12,.97);}
.mobile-menu a{font-family:var(--hv-fd);font-weight:700;font-size:1.8rem;letter-spacing:-.03em;color:var(--hv-muted);}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--hv-lime);}


/* ---------- Mobiles Menü (Grundgerüst) ----------
   Kam früher aus den alten Sheets; die neuen Startseiten laden die
   nicht mehr, deshalb steht es hier im Theme selbst. */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;cursor:pointer;margin-left:auto;flex-shrink:0;
  align-items:flex-end;
}
.hamburger span{display:block;width:22px;height:2px;border-radius:2px;transition:transform .3s,opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{
  display:none;position:fixed;inset:0;z-index:999;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
}
.mobile-menu.open{display:flex;}
@media (min-width:861px){ .mobile-menu{display:none !important;} }

/* ---------- 5. Loader ---------- */
#loader{background:var(--hv-ink);}
.loader-logo{font-family:var(--hv-fd);font-weight:800;-webkit-text-stroke:0;color:var(--hv-emerald);}
.spin{border:2px solid rgba(46,230,160,.2);border-top-color:var(--hv-lime);}
#loadText{font-family:var(--hv-fm);color:var(--hv-dim);}
.loader-bar{background:linear-gradient(90deg,var(--hv-emerald),var(--hv-lime));}

/* ---------- 6. Hero: zentriert mit Suchfeld (NOVA ist geteilt) ---------- */
.hv-hero{
  position:relative;z-index:10;text-align:center;
  padding:calc(var(--hv-nav) + 96px) 0 76px;
}
.hv-hero h1{
  font-family:var(--hv-fd);font-weight:800;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.045em;
  margin:20px auto 22px;max-width:16ch;
}
.hv-hero > .hv-wrap > p{color:var(--hv-muted);font-size:clamp(1rem,1.4vw,1.18rem);max-width:56ch;margin:0 auto 34px;}

.hv-search{
  max-width:620px;margin:0 auto 22px;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 20px;border-radius:100px;
  border:1px solid var(--hv-border-2);background:rgba(15,31,24,.7);
  backdrop-filter:blur(16px);box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
  transition:border-color .3s,box-shadow .3s;
}
.hv-search:focus-within{border-color:var(--hv-ring);box-shadow:0 24px 60px -24px rgba(46,230,160,.45);}
.hv-search input{
  flex:1;background:none !important;border:none !important;outline:none;
  font-family:var(--hv-fb);font-size:15px;color:var(--hv-text) !important;padding:11px 0 !important;
}
.hv-search .ic{color:var(--hv-dim);display:flex;}

.hv-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:52px;}
.hv-quick a{
  font-family:var(--hv-fm);font-size:11.5px;letter-spacing:.06em;padding:7px 15px;border-radius:100px;
  border:1px solid var(--hv-border);color:var(--hv-muted);background:rgba(255,255,255,.02);
  transition:all .25s var(--hv-ease);
}
.hv-quick a:hover{color:var(--hv-lime);border-color:var(--hv-ring);background:rgba(46,230,160,.08);transform:translateY(-2px);}

/* Umlaufende Avatare als Hero-Signatur */
.hv-ring{position:relative;width:min(420px,86vw);height:min(420px,86vw);margin:0 auto;}
.hv-ring .core{
  position:absolute;inset:32%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(46,230,160,.3),rgba(12,143,99,.12) 60%,transparent);
  border:1px solid var(--hv-border-2);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  backdrop-filter:blur(10px);
}
.hv-ring .core b{font-family:var(--hv-fd);font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:-.03em;line-height:1;}
.hv-ring .core span{font-family:var(--hv-fm);font-size:9.5px;letter-spacing:.18em;color:var(--hv-dim);text-transform:uppercase;margin-top:6px;}
.hv-orbit{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(180,255,220,.09);animation:hvSpin 34s linear infinite;}
.hv-orbit.o2{inset:13%;animation-duration:26s;animation-direction:reverse;border-style:solid;border-color:rgba(180,255,220,.06);}
@keyframes hvSpin{to{transform:rotate(360deg);}}
.hv-node{
  position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--hv-surface-2);border:1px solid var(--hv-border-2);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  animation:hvCounter 34s linear infinite;
}
.hv-orbit.o2 .hv-node{animation-duration:26s;animation-direction:reverse;}
@keyframes hvCounter{to{transform:rotate(-360deg);}}

/* ---------- 7. Bento-Raster (Grouplers Struktur-Signatur) ---------- */
.hv-bento{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px;
}
.hv-box{
  position:relative;overflow:hidden;
  padding:28px 26px;border-radius:22px;
  border:1px solid var(--hv-border);
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  transition:transform .35s var(--hv-ease),border-color .35s,box-shadow .35s;
}
.hv-box:hover{transform:translateY(-4px);border-color:var(--hv-ring);box-shadow:0 26px 56px -30px rgba(46,230,160,.55);}
.hv-box.w2{grid-column:span 2;}
.hv-box.w3{grid-column:span 3;}
.hv-box.w4{grid-column:span 4;}
.hv-box.w6{grid-column:span 6;}
.hv-box .ic{
  width:44px;height:44px;border-radius:14px;margin-bottom:16px;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(46,230,160,.12);border:1px solid var(--hv-border-2);
}
.hv-box h3{font-family:var(--hv-fd);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;margin-bottom:9px;}
.hv-box p{color:var(--hv-muted);font-size:14px;}
.hv-box .big{font-family:var(--hv-fd);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1;}
.hv-box .cap{font-family:var(--hv-fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hv-dim);margin-top:8px;}
.hv-box.accent{
  background:linear-gradient(140deg,rgba(46,230,160,.16),rgba(184,255,92,.05));
  border-color:var(--hv-ring);
}
.hv-box.accent h3,.hv-box.accent .big{color:var(--hv-text);}

/* Laufband */
.hv-marquee{
  overflow:hidden;border-top:1px solid var(--hv-border);border-bottom:1px solid var(--hv-border);
  padding:16px 0;margin:72px 0;background:rgba(46,230,160,.03);
}
.hv-marquee-track{display:flex;gap:38px;width:max-content;animation:hvSlide 34s linear infinite;}
.hv-marquee span{
  font-family:var(--hv-fd);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--hv-dim);white-space:nowrap;display:flex;align-items:center;gap:38px;
}
.hv-marquee span::after{content:'⬢';font-size:.6em;color:var(--hv-emerald);}
@keyframes hvSlide{to{transform:translateX(-50%);}}

/* ---------- 8. Gruppenkarten ---------- */
.hv-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:38px;}
.hv-group{
  padding:22px;border-radius:20px;border:1px solid var(--hv-border);
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  display:flex;flex-direction:column;gap:13px;
  transition:transform .35s var(--hv-ease),border-color .35s,box-shadow .35s;
}
.hv-group:hover{transform:translateY(-4px);border-color:var(--hv-ring);box-shadow:0 26px 56px -30px rgba(46,230,160,.55);}
.hv-group-top{display:flex;align-items:center;gap:12px;}
.hv-group-logo{
  width:46px;height:46px;border-radius:15px;object-fit:cover;flex-shrink:0;
  background:linear-gradient(135deg,var(--hv-emerald),var(--hv-lime));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hv-fd);font-weight:800;color:#04140d;
}
.hv-group h4{font-family:var(--hv-fd);font-weight:700;font-size:15.5px;letter-spacing:-.015em;display:flex;align-items:center;gap:6px;}
.hv-group .plat{font-family:var(--hv-fm);font-size:10px;letter-spacing:.12em;color:var(--hv-dim);text-transform:uppercase;}
.hv-group p{font-size:13.5px;color:var(--hv-muted);flex:1;}
.hv-group-foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--hv-fm);font-size:11px;color:var(--hv-dim);}
.hv-ok{color:var(--hv-lime);}
.hv-skel{height:150px;border-radius:20px;border:1px solid var(--hv-border);background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 70%);background-size:220% 100%;animation:hvShim 1.4s linear infinite;}
@keyframes hvShim{to{background-position:-220% 0;}}

/* ---------- 9. Regeln / Abschluss ---------- */
.hv-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:38px;}
.hv-rule{padding:22px;border-radius:18px;border:1px solid var(--hv-border);background:rgba(255,255,255,.025);}
.hv-rule .n{font-family:var(--hv-fm);font-size:11px;letter-spacing:.2em;color:var(--hv-lime);}
.hv-rule h4{font-family:var(--hv-fd);font-weight:700;font-size:1.05rem;margin:10px 0 8px;letter-spacing:-.02em;}
.hv-rule p{font-size:13.5px;color:var(--hv-muted);}

.hv-cta{position:relative;padding:130px 0 150px;text-align:center;overflow:hidden;}
.hv-cta::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:820px;height:520px;max-width:150vw;border-radius:50%;filter:blur(90px);
  background:radial-gradient(ellipse,rgba(46,230,160,.2),rgba(184,255,92,.06) 50%,transparent 74%);
}
.hv-cta > *{position:relative;z-index:1;}
.hv-cta h2{font-family:var(--hv-fd);font-weight:800;font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.04em;line-height:1.02;}
.hv-cta p{color:var(--hv-muted);margin:18px auto 32px;max-width:50ch;}

/* ---------- 10. Footer ---------- */
footer{border-top:1px solid var(--hv-border);padding:48px 0 30px;background:transparent;position:relative;z-index:10;}
.footer-inner,.hv-foot-inner{
  width:100%;max-width:1240px;margin:0 auto;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer-brand,.hv-foot-brand{font-family:var(--hv-fd);font-weight:800;font-size:17px;color:var(--hv-text);display:flex;align-items:center;gap:9px;letter-spacing:-.02em;}
.footer-text,.hv-foot-text{font-size:12.5px;color:var(--hv-dim);}
.hv-foot-links{display:flex;gap:18px;flex-wrap:wrap;}
.hv-foot-links a{font-size:12.5px;color:var(--hv-muted);transition:color .25s;}
.hv-foot-links a:hover{color:var(--hv-lime);}
.footer-live{display:flex;align-items:center;gap:8px;font-family:var(--hv-fm);font-size:10.5px;letter-spacing:.14em;color:var(--hv-lime);text-transform:uppercase;}

/* ---------- 11. Subpage-Primitives ---------- */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--hv-nav) + 40px) 24px 80px;position:relative;z-index:10;}
.glass-panel,.panel,.card,.stat-card,.admin-table-container{
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.014)) !important;
  border:1px solid var(--hv-border) !important;border-radius:22px !important;
  backdrop-filter:blur(18px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7) !important;
}
.glass-panel{width:100%;max-width:440px;padding:36px 32px !important;}
.panel-header h2{font-family:var(--hv-fd) !important;font-weight:800 !important;font-size:1.65rem !important;letter-spacing:-.03em !important;}
.panel-header h2 span{
  background:linear-gradient(100deg,var(--hv-lime),var(--hv-emerald));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.panel-header p{color:var(--hv-muted) !important;font-size:13.5px !important;margin-top:9px;}
.form-group{margin-bottom:15px;}
.form-group label,.field label{
  display:block;font-family:var(--hv-fm);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hv-dim);margin-bottom:7px;
}
.form-input,.form-input-noicon,input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],textarea,select{
  width:100%;background:rgba(255,255,255,.04) !important;border:1px solid var(--hv-border) !important;
  border-radius:13px !important;padding:12px 15px !important;font-family:var(--hv-fb) !important;
  font-size:14.5px !important;color:var(--hv-text) !important;transition:border-color .25s,box-shadow .25s;
}
.input-icon-wrapper .form-input{padding-left:44px !important;}
.input-icon{color:var(--hv-dim);}
.form-input:focus,textarea:focus,select:focus,input:focus{
  outline:none;border-color:var(--hv-ring) !important;background:rgba(46,230,160,.06) !important;
  box-shadow:0 0 0 3px rgba(46,230,160,.12);
}
::placeholder{color:var(--hv-dim);}
.form-footer{margin-top:18px;text-align:center;font-size:13.5px;color:var(--hv-muted);}
.form-footer a{color:var(--hv-lime);font-weight:700;}
.alert{border-radius:13px;border:1px solid var(--hv-border-2);background:rgba(255,255,255,.04);padding:12px 15px;font-size:13.5px;}
.section-title{font-family:var(--hv-fd) !important;font-weight:800 !important;letter-spacing:-.035em !important;line-height:1.04 !important;}
.section-title .grad{background:linear-gradient(100deg,var(--hv-lime),var(--hv-emerald));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.section-label{font-family:var(--hv-fm) !important;color:var(--hv-emerald) !important;letter-spacing:.2em !important;}
.section-label::before{background:var(--hv-emerald) !important;}
code,.api-code,.api-path,.endpoint-path{font-family:var(--hv-fm) !important;}
code{color:var(--hv-lime) !important;background:rgba(184,255,92,.08) !important;border-color:var(--hv-border) !important;}
.tag,.chip,.b-tag{font-family:var(--hv-fm);font-size:10.5px;letter-spacing:.1em;border-radius:100px;border:1px solid var(--hv-border-2);color:var(--hv-lime);background:rgba(184,255,92,.06);}
.btn-join{background:linear-gradient(100deg,var(--hv-emerald),var(--hv-lime)) !important;color:#04140d !important;border-radius:13px !important;font-weight:700 !important;}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;}

/* Alt-Sheets setzen für Fliesstexte und Buttons Mono + Grossbuchstaben —
   das gehört zu Labels, nicht zu Sätzen. */
.btn,.hv-btn{text-transform:none !important;letter-spacing:0 !important;}
.panel-header p,.form-footer,.alert,.hint,.help,.sub{
  font-family:var(--hv-fb) !important;text-transform:none !important;
  letter-spacing:normal !important;line-height:1.55 !important;
}

/* ---------- 12. Reveal ---------- */
[data-hv-reveal]{opacity:0;transform:translateY(30px);transition:opacity .75s var(--hv-ease),transform .75s var(--hv-ease);}
[data-hv-reveal].in{opacity:1;transform:none;}

/* ---------- 13. Responsive ---------- */
@media (max-width:1024px){
  .hv-box.w4{grid-column:span 6;}
  .hv-box.w3{grid-column:span 3;}
  .hv-box.w2{grid-column:span 3;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .hamburger{display:flex !important;}
  .hv-nav-inner{padding:0 20px;}
  #navbar .hv-pill{padding-right:6px;}
}
@media (max-width:640px){
  .hv-wrap,.hv-nav-inner,.footer-inner,.hv-foot-inner{padding-left:20px;padding-right:20px;}
  .hv-bento{grid-template-columns:1fr;}
  .hv-box.w2,.hv-box.w3,.hv-box.w4,.hv-box.w6{grid-column:span 1;}
  .hv-hero{padding-top:calc(var(--hv-nav) + 56px);}
  .hv-marquee{margin:48px 0;}
  .hv-cta{padding:90px 0 110px;}
  .glass-panel{padding:26px 20px !important;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-hv-reveal]{opacity:1;transform:none;}
}

.hv-foot-brand svg,.footer-brand svg{width:20px;height:20px;flex-shrink:0;}

/* =====================================================================
   14. UNTERSEITEN-EBENE
   ---------------------------------------------------------------------
   Grouplers Unterseiten haben kein eigenes CSS — sie hängen an
   groupler-ui.css / style.css. Hier werden die dortigen Primitives auf
   HIVE gezogen (Spurbreite, Überschriften, Pillen, Leerzustand).
   ===================================================================== */

.brand .brand-mark,.brand-mark{
  background:none !important;border:none !important;
  border-radius:0 !important;box-shadow:none !important;padding:0 !important;
}

.wrap{
  max-width:1240px !important;margin:0 auto !important;
  padding:calc(var(--hv-nav) + 46px) 30px 88px !important;
  position:relative;z-index:10;
}

.wrap > h1,#pageTitle,.page-title{
  font-family:var(--hv-fd) !important;font-weight:800 !important;
  font-size:clamp(2rem,4.6vw,3.1rem) !important;
  letter-spacing:-.045em !important;line-height:1.04 !important;
  padding-top:0 !important;margin-bottom:6px !important;
}
.wrap > h1 + .sub,.count,#resultCount{
  font-family:var(--hv-fm) !important;font-size:11px !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:var(--hv-dim) !important;
}

.tab-btn,.filter-btn,.chip-btn,.sort-btn{
  font-family:var(--hv-fm) !important;font-size:10.5px !important;
  letter-spacing:.12em !important;border-radius:100px !important;
  border:1px solid var(--hv-border-2) !important;
  background:rgba(255,255,255,.03) !important;color:var(--hv-muted) !important;
  padding:9px 17px !important;transition:all .25s var(--hv-ease);
}
.tab-btn:hover,.filter-btn:hover{color:var(--hv-text) !important;border-color:var(--hv-ring) !important;}
.tab-btn.active,.filter-btn.active{
  background:linear-gradient(100deg,var(--hv-emerald),var(--hv-lime)) !important;
  color:#04140d !important;border-color:transparent !important;
}

.empty,.empty-state{
  border:1px solid var(--hv-border) !important;border-radius:24px !important;
  background:linear-gradient(158deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important;
  padding:64px 30px !important;text-align:center;
}
.empty h2,.empty h3{font-family:var(--hv-fd) !important;font-weight:800 !important;letter-spacing:-.035em !important;}
.empty p{color:var(--hv-muted) !important;font-family:var(--hv-fb) !important;text-transform:none !important;letter-spacing:normal !important;}

.api-endpoint,.endpoint{
  border:1px solid var(--hv-border) !important;border-radius:18px !important;
  background:linear-gradient(158deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important;
}
.api-method,.method{
  font-family:var(--hv-fm) !important;font-size:10.5px !important;letter-spacing:.1em !important;
  border-radius:7px !important;padding:4px 9px !important;
}
.api-code,pre{
  font-family:var(--hv-fm) !important;font-size:12.5px !important;
  background:rgba(0,0,0,.35) !important;border:1px solid var(--hv-border) !important;
  border-radius:14px !important;
}
.api-h2{font-family:var(--hv-fd) !important;font-weight:800 !important;letter-spacing:-.035em !important;}

@media (max-width:640px){
  .wrap{padding:calc(var(--hv-nav) + 26px) 20px 60px !important;}
  .empty,.empty-state{padding:42px 20px !important;}
}

/* ---------- 14.1 Zweite Token-Familie aus style.css ----------
   admin/api/submit benutzen `--ink-*`, `--pink`, `--font-a` … eine
   eigene Namenswelt neben den `--accent`/`--text-*`-Tokens. Ohne diese
   Umbiegung bleiben genau diese Seiten pink und in Bebas Neue. */
:root{
  --bg-1:#06100c;--bg-2:#0a1712;--bg-card-hover:#0f1f18;--bg-elevated:#0f1f18;
  --pink:#2ee6a0;--pink-soft:#b8ff5c;--violet:#2ee6a0;--violet-deep:#0c8f63;
  --cyan:#b8ff5c;--lime:#b8ff5c;--rose:#ff6b6b;
  --ink-0:#eefaf3;--ink-1:#eefaf3;--ink-2:#8aa79a;--ink-3:#4d685c;
  --ink-4:#4d685c;--ink-muted:#4d685c;
  --line:rgba(180,255,220,.1);--line-h:rgba(180,255,220,.24);
  --font-a:'Bricolage Grotesque',sans-serif;--font:'DM Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-pill:999px;
}
.hero-pill{
  font-family:var(--hv-fm) !important;font-size:10.5px !important;
  letter-spacing:.14em !important;border-radius:100px !important;
  border:1px solid var(--hv-border-2) !important;
  background:rgba(46,230,160,.09) !important;color:var(--hv-emerald) !important;
}
.hero-side,.hero-side-row{border-color:var(--hv-border) !important;}
.hero-side-row .k{font-family:var(--hv-fm) !important;font-size:11px !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--hv-muted) !important;}
.hero-side-row .v{font-family:var(--hv-fd) !important;font-weight:700 !important;letter-spacing:-.025em !important;color:var(--hv-text) !important;}
.hero-side-row .v.aqua,.hero-side-row .v.mint{color:var(--hv-lime) !important;}
.hero-side-row .v.coral{color:var(--hv-amber) !important;}

/* ---------- API-Kopf: zwei Spalten, Zähler als Tafel ----------
   Die Seite erwartet ein Raster, das es in den Alt-Sheets nicht mehr
   gab — die Zählerzeilen sind sonst über beide Spalten verstreut. */
.api-hero{
  display:grid !important;grid-template-columns:1.15fr .85fr !important;
  gap:44px !important;align-items:start !important;
  max-width:1240px !important;margin:0 auto !important;
  padding:calc(var(--hv-nav) + 56px) 30px 40px !important;
  background:none !important;border:none !important;
  min-height:0 !important;overflow:visible !important;
}
.api-hero::after{display:none !important;}
.api-hero h1{
  font-family:var(--hv-fd) !important;font-weight:700 !important;
  font-size:clamp(2rem,4.4vw,3.1rem) !important;
  letter-spacing:-.04em !important;line-height:1.06 !important;
}
.api-hero .lead{color:var(--hv-muted) !important;font-family:var(--hv-fb) !important;max-width:52ch;margin-top:14px;}
.api-hero > .hero-side{
  border:1px solid var(--hv-border) !important;border-radius:22px !important;
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.014)) !important;padding:20px 22px !important;
  display:flex !important;flex-direction:column !important;gap:0 !important;
}
.api-hero .hero-side h4{
  font-family:var(--hv-fm) !important;font-size:10.5px !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;
  color:var(--hv-muted) !important;margin:0 0 8px !important;
}
.api-hero .hero-side-row{
  display:flex !important;flex-direction:row !important;
  align-items:center !important;text-align:left !important;
  justify-content:space-between !important;gap:14px !important;
  padding:11px 0 !important;margin:0 !important;
  border:none !important;border-bottom:1px solid var(--hv-border) !important;
  border-radius:0 !important;background:none !important;
}
.api-hero .hero-side-row:last-child{border-bottom:none !important;}
@media (max-width:900px){
  .api-hero{grid-template-columns:1fr !important;gap:26px !important;
    padding:calc(var(--hv-nav) + 34px) 20px 28px !important;}
}

/* ---------- Toast-Hinweise ---------- */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{
  min-width:240px;max-width:340px;padding:13px 17px;border-radius:14px;
  font-family:var(--hv-fb);font-size:13.5px;line-height:1.45;
  border:1px solid var(--hv-border-2);background:rgba(15,31,24,.94);
  color:var(--hv-text);backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);
  opacity:0;transform:translateY(10px);transition:opacity .3s var(--hv-ease),transform .3s var(--hv-ease);
}
.toast.show{opacity:1;transform:none;}
.toast.success{border-left:3px solid var(--hv-emerald);}
.toast.error{border-left:3px solid var(--hv-danger);}

/* ---------- Handy-Feinschliff (Groupler) ----------
   Gemessen bei 390 px: Text unter 11 px ist auf einem Telefon nicht mehr
   lesbar, Tippziele unter 36 px trifft man nicht zuverlaessig. Beides wird
   hier angehoben — am Desktop bleibt alles wie es war.
   Angehobene Selektoren: 61.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  #loadText,
  .admin-table th,
  .api-auth,
  .api-card span,
  .api-hero .hero-side h4,
  .api-method,
  .b-tag,
  .badge-glow,
  .badge-status,
  .bot-cat,
  .bot-invite,
  .bot-platform,
  .bot-tag,
  .brand-text > span > span,
  .chip,
  .chip-btn,
  .duo .box span,
  .edit-form label,
  .fb-date,
  .fchip,
  .field label,
  .filter-btn,
  .filter-label,
  .foot-content,
  .footer-live,
  .footer-text,
  .form-group label,
  .hero-eyebrow,
  .hero-pill,
  .hv-box .cap,
  .hv-group .plat,
  .hv-kick::before,
  .hv-marquee span::after,
  .hv-ring .core span,
  .live-card-time,
  .live-chip,
  .live-row-label,
  .meta-h,
  .method,
  .metric-card-label,
  .metric-sub,
  .nav-links a,
  .nav-live,
  .proc-badge,
  .proc-role,
  .proc-stat-key,
  .reach .label,
  .role-badge,
  .search-btn,
  .section-label,
  .sort-btn,
  .stack .k,
  .sub-badge,
  .tab-btn,
  .tag,
  .text-grad,
  .ticker,
  .trend-likes,
  .trend-meta,
  .trend-rank,
  th{
    font-size:12.5px !important;
    letter-spacing:.06em !important;
  }

  /* Von JavaScript gesetzte Kleinschriften erreicht keine Klassenregel —
     hier gezielt nur die kleinen Werte. */
  [style*="font-size: 0.58rem"],[style*="font-size:.58rem"],
  [style*="font-size: 0.6rem"],[style*="font-size:.6rem"],
  [style*="font-size: 0.62rem"],[style*="font-size:.62rem"],
  [style*="font-size: 0.65rem"],[style*="font-size:.65rem"],
  [style*="font-size: 0.68rem"],[style*="font-size:.68rem"],
  [style*="font-size:0.8em"]{font-size:12.5px !important;}

  .hv-nav a,.hv-foot a,nav a,footer a{min-height:36px;display:inline-flex;align-items:center;}
  .hv-btn,button,input[type=submit]{min-height:42px;}
}