/* =========================================================
   Horizon Bay Roleplay – Design-System
   Schriften, Farben, Typografie, Buttons, Header, Menü,
   Footer, Cursor, Seitenübergang, Grundzustände für Animationen
   ========================================================= */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-standard-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-standard-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-mono-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Farben & Maße ---------- */
:root {
  --bg: #04070c;
  --bg-1: #070b12;
  --bg-2: #0a1019;
  --surface: #0c131d;
  --surface-2: #101926;
  --surface-3: #162131;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);

  --ink: #eef3f9;
  --ink-2: #b2bfcf;
  --ink-3: #7a8799;
  --ink-4: #46525f;

  --acc-rgb: 56, 174, 255;
  --accent: #38aeff;
  --accent-2: #3be1e6;
  --accent-ink: #9fd8ff;
  --on-accent: #03111e;

  --success: #4ade80;
  --success-text: #86efac;
  --success-soft: rgba(74, 222, 128, .12);
  --info: #60a5fa;
  --info-text: #93c5fd;
  --info-soft: rgba(96, 165, 250, .12);
  --danger: #f87171;
  --danger-text: #fca5a5;
  --danger-soft: rgba(248, 113, 113, .12);
  --live: #ef4444;
  --twitch: #a970ff;
  --tiktok: #ff4d7a;
  --discord: #5865f2;

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec: clamp(104px, 12vw, 190px);
  --header: 84px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body > main { flex: 1 0 auto; }

/* Feines Filmkorn über der ganzen Seite */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
  transform: translateZ(0);
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
::selection { background: rgba(var(--acc-rgb), .4); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.hb-ic { display: inline-block; flex: none; vertical-align: middle; }
.hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.hb-wrap { max-width: var(--container); margin: 0 auto; }
.hb-accent { color: var(--accent); }

/* ---------- Typografie ---------- */
.hb-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hb-label > b { font-weight: 500; color: var(--accent); }
.hb-label > b::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--line-2); }
.hb-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .14); }
.hb-dot--live { background: var(--success); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); animation: hbPulse 2.4s ease-in-out infinite; }

.hb-h1, .hb-h2, .hb-h3, .hb-display {
  margin: 0;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-kerning: normal;
}
.hb-h1 { font-weight: 900; font-stretch: 62%; font-size: clamp(56px, 10vw, 176px); line-height: .84; letter-spacing: -.005em; }
.hb-h2 { font-weight: 860; font-stretch: 64%; font-size: clamp(42px, 6.4vw, 108px); line-height: .88; letter-spacing: -.005em; }
.hb-h2--sm { font-size: clamp(36px, 4.4vw, 72px); }
.hb-h3 { font-weight: 800; font-stretch: 72%; font-size: clamp(22px, 2vw, 30px); line-height: .98; letter-spacing: .005em; }
.hb-h1 em, .hb-h2 em, .hb-h3 em { font-style: normal; color: var(--accent); }
.hb-o { color: transparent; -webkit-text-stroke: 1.5px rgba(238, 243, 249, .9); }
.hb-lead { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); letter-spacing: -.005em; }
.hb-text { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* Abschnitts-Kopf */
.hb-sec { padding-block: var(--sec); }
.hb-sec-head { display: flex; flex-direction: column; gap: 28px; margin-bottom: clamp(48px, 6vw, 88px); }
.hb-sec-head .hb-h2 { max-width: 15ch; }
.hb-sec-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hb-sec-head--row > div { display: flex; flex-direction: column; gap: 28px; }
.hb-sec-head--row .hb-text { max-width: 36ch; }

/* ---------- Buttons ---------- */
.hb-btn {
  --h: 56px;
  --fill: #fff;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--h);
  padding: 0 7px 0 26px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .55s var(--ease), border-color .55s var(--ease), background-color .55s var(--ease);
}
.hb-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--fill);
  transform: translateY(102%);
  transition: transform .65s var(--ease);
}
.hb-btn:hover::before, .hb-btn:focus-visible::before { transform: translateY(0); }
.hb-btn:not(:has(.hb-btn-ic)) { padding: 0 28px; }
.hb-btn > span:not([class]) { display: inline-flex; align-items: center; gap: 10px; }
.hb-btn-label { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; }
.hb-btn-label > span { display: inline-block; transition: transform .65s var(--ease); }
.hb-btn-label > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.hb-btn:hover .hb-btn-label > span, .hb-btn:focus-visible .hb-btn-label > span { transform: translateY(-100%); }
.hb-btn-ic {
  flex: none;
  width: calc(var(--h) - 14px);
  height: calc(var(--h) - 14px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(3, 17, 30, .14);
  transition: background-color .55s var(--ease);
}
.hb-btn-ic .hb-ic { transition: transform .65s var(--ease); }
.hb-btn:hover .hb-btn-ic .hb-ic { transform: rotate(-45deg); }
.hb-btn--primary { background: var(--accent); color: var(--on-accent); }
.hb-btn--primary:hover { color: var(--on-accent); }
.hb-btn--ghost { border-color: var(--line-2); background: rgba(255, 255, 255, .02); --fill: var(--ink); }
.hb-btn--ghost .hb-btn-ic { background: rgba(255, 255, 255, .08); }
.hb-btn--ghost:hover { color: var(--bg); border-color: var(--ink); }
.hb-btn--ghost:hover .hb-btn-ic { background: rgba(4, 7, 12, .1); }
.hb-btn--discord { background: var(--discord); color: #fff; }
.hb-btn--discord:hover { color: #161a52; }
.hb-btn--sm { --h: 44px; font-size: 14px; }
.hb-btn--sm:not(:has(.hb-btn-ic)) { padding: 0 20px; }
.hb-btn--md { --h: 50px; }
.hb-btn:disabled { opacity: .5; cursor: not-allowed; }
.hb-btn:active { scale: .98; }

.hb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-ink) !important;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .6s var(--ease);
}
.hb-link:hover, a:hover .hb-link { background-size: 100% 1px; }
.hb-link .hb-ic { transition: transform .5s var(--ease); }
.hb-link:hover .hb-ic, a:hover .hb-link .hb-ic { transform: translateX(4px); }

.hb-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.hb-tag > span { display: inline; }
.hb-tag--accent { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.hb-tag--soft { border-color: rgba(var(--acc-rgb), .35); color: var(--accent-ink); }

.hb-soc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-2) !important;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.hb-soc:hover { background: var(--ink); border-color: var(--ink); color: var(--bg) !important; }

/* Filter-Reiter (Live, Blog, Regelwerk) */
.hb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.hb-tab b { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .08); font-family: var(--f-mono); font-size: 11px; font-weight: 500; transition: background-color .45s var(--ease); }
.hb-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.hb-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.hb-tab.is-on b { background: rgba(4, 7, 12, .12); }
.hb-tab.is-empty:not(.is-on) { opacity: .45; }

/* ---------- Header ---------- */
.hb-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: transform .7s var(--ease), background-color .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  border-bottom: 1px solid transparent;
}
.hb-nav.is-scrolled {
  background: rgba(4, 7, 12, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.hb-nav.is-hidden { transform: translateY(-101%); }
.hb-nav.is-menu { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; transform: none; }
.hb-nav-in { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hb-nav-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.hb-nav-actions { justify-content: flex-end; gap: 10px; }

.hb-brand { display: inline-flex; align-items: center; gap: 12px; }
.hb-brand img { width: 40px; height: 40px; }
.hb-brand-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.hb-brand-txt b { font-family: var(--f-display); font-weight: 860; font-stretch: 70%; font-size: 21px; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hb-brand-txt span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-3); }

.hb-nav-links { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4, 7, 12, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hb-nav-pill {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: var(--w, 0);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  transform: translateX(var(--x, 0));
  opacity: var(--o, 0);
  transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s ease;
  pointer-events: none;
}
.hb-nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s ease;
}
.hb-nav-link:hover, .hb-nav-link.is-active { color: var(--ink); }
.hb-nav-link i { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); transform: scale(0); transition: transform .4s var(--ease); }
.hb-nav-link.is-active i { transform: scale(1); }

.hb-burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(4, 7, 12, .4);
  cursor: pointer;
}
.hb-burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .55s var(--ease), top .55s var(--ease); }
.hb-burger span:nth-child(1) { top: 18px; }
.hb-burger span:nth-child(2) { top: 26px; }
.hb-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hb-burger.is-open span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* ---------- Mobile-Menü ---------- */
.hb-mnav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header) + 32px) var(--gutter) 32px;
  background: var(--bg-1);
  overflow: hidden auto;
}
.hb-mnav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 50% at 100% 0%, rgba(var(--acc-rgb), .12), transparent 70%);
}
.hb-mnav > * { position: relative; }
.hb-mnav-main { display: flex; flex-direction: column; }
.hb-mnav-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hb-mnav-link > span { display: flex; align-items: baseline; gap: 16px; }
.hb-mnav-link small { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.hb-mnav-link b {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(48px, 14vw, 88px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hb-mnav-link.is-active b { color: var(--ink); }
.hb-mnav-link.is-active small { color: var(--accent); }
.hb-mnav-foot { display: flex; flex-direction: column; gap: 18px; }
.hb-mnav-foot .hb-btn { width: 100%; }
.hb-mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hb-mnav-soc { display: flex; gap: 10px; }

/* ---------- Footer ---------- */
.hb-foot { position: relative; padding-top: clamp(88px, 10vw, 140px); border-top: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.hb-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 56px; }
.hb-foot-about { display: flex; flex-direction: column; gap: 24px; max-width: 380px; }
.hb-foot-about p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.hb-foot-soc { display: flex; gap: 10px; }
.hb-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hb-foot-col { display: flex; flex-direction: column; gap: 14px; }
.hb-foot-col > span { margin-bottom: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hb-foot-col a { align-self: flex-start; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s ease, background-size .5s var(--ease); }
.hb-foot-col a:hover { color: var(--ink); background-size: 100% 1px; }
.hb-foot-word {
  margin: clamp(56px, 8vw, 110px) 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: min(calc((100vw - var(--gutter) * 2 - 24px) / 5), 262px);
  line-height: .78;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -.01em;
  color: rgba(238, 243, 249, .16);
  -webkit-mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .15) 95%);
  mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .15) 95%);
  user-select: none;
}
.hb-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.hb-foot-bottom > span, .hb-foot-bottom > a { display: inline-flex; align-items: center; gap: 8px; }
.hb-foot-bottom a:hover { color: var(--ink); }
.hb-heart { display: inline-flex; color: var(--accent); }
.hb-heart svg { fill: currentColor; }

/* ---------- Toast ---------- */
.hb-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9300;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(16, 25, 38, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  translate: -50% 0;
  animation: hbToast .6s var(--ease) both;
}
.hb-toast .hb-ic { color: var(--accent); }
.hb-toast.is-out { animation: hbToastOut .35s ease both; }

/* ---------- Cursor ---------- */
.hb-cursor { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; }
.hb-cursor-dot, .hb-cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.hb-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ink); transition: opacity .3s ease, scale .4s var(--ease); }
.hb-cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(238, 243, 249, .32);
  display: grid;
  place-items: center;
  transition: width .55s var(--ease), height .55s var(--ease), margin .55s var(--ease), background-color .4s ease, border-color .4s ease, opacity .3s ease;
}
.hb-cursor-ring span { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); opacity: 0; transition: opacity .3s ease; }
.hb-cursor.is-link .hb-cursor-ring { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: rgba(var(--acc-rgb), .7); background: rgba(var(--acc-rgb), .1); }
.hb-cursor.is-link .hb-cursor-dot { scale: 0; }
.hb-cursor.is-label .hb-cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: transparent; background: var(--accent); }
.hb-cursor.is-label .hb-cursor-ring span { opacity: 1; }
.hb-cursor.is-label .hb-cursor-dot { scale: 0; }
.hb-cursor.is-down .hb-cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.hb-cursor.is-hidden .hb-cursor-dot, .hb-cursor.is-hidden .hb-cursor-ring { opacity: 0; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor [contenteditable] { cursor: text !important; }

/* ---------- Seitenübergang / Ladebildschirm ---------- */
.hb-curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: var(--bg-1);
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}
html.is-entering .hb-curtain { visibility: visible; clip-path: inset(0 0 0 0); animation: hbCurtainSafety .01s 4.5s forwards; }
.hb-curtain-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hb-curtain-in img { width: 76px; height: 76px; }
.hb-curtain-word { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: 40px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.hb-curtain-bar { position: relative; width: 180px; height: 1px; overflow: hidden; background: var(--line-2); }
.hb-curtain-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.hb-curtain-count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; color: var(--ink-3); }
html:not(.is-first) .hb-curtain-bar, html:not(.is-first) .hb-curtain-count { display: none; }
html.is-first .hb-curtain-in { visibility: hidden; }

/* Ladebildschirm „Galerie“ (config.js → loader, Aufbau in motion.js) */
.hb-ld { position: absolute; inset: 0; }
.hb-ld-count { font-weight: 500; color: var(--ink); }
.hb-ldg-stack { position: absolute; inset: 0; }
.hb-ldg-card { position: absolute; left: 50%; top: 50%; width: clamp(170px, 21vw, 300px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.hb-ldg-card.is-last { width: clamp(260px, 38vw, 580px); aspect-ratio: 16 / 9; }
.hb-ldg-card img { width: 100%; height: 100%; object-fit: cover; }
.hb-ldg-top { position: absolute; left: var(--gutter); top: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 6px; }
.hb-ldg-top b { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: clamp(26px, 2.4vw, 36px); line-height: .9; text-transform: uppercase; }
.hb-ldg-top b em { font-style: normal; color: var(--accent); }
.hb-ldg-top span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hb-ldg-count { position: absolute; left: var(--gutter); bottom: clamp(16px, 3vw, 36px); display: flex; align-items: flex-start; gap: 8px; }
.hb-ldg-count b { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: clamp(88px, 15vw, 250px); line-height: .8; color: var(--ink); }
.hb-ldg-count span { font-family: var(--f-mono); font-size: 14px; color: var(--ink-3); }
.hb-ldg-claim { position: absolute; right: var(--gutter); bottom: clamp(20px, 3.4vw, 42px); margin: 0; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45; text-align: right; color: var(--ink-2); }

@media (max-width: 600px) {
  .hb-ldg-claim { display: none; }
}

/* Startzustände für Animationen (nur wenn JS aktiv ist) */
html.js-motion [data-split], html.js-motion [data-reveal], html.js-motion [data-mask] { opacity: 0; }
html.js-motion [data-clip] { clip-path: inset(100% 0 0 0 round var(--r-lg)); }
.split-line { padding-bottom: .04em; margin-bottom: -.04em; }
.split-line-mask { overflow-x: visible !important; overflow-y: clip !important; }
.hb-mask { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .05em; margin-bottom: -.05em; }
.hb-mask-in { display: block; }
html.no-motion [data-split], html.no-motion [data-reveal], html.no-motion [data-mask] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
html.no-motion [data-clip] { clip-path: none !important; }
html.no-motion .hb-mask-in { transform: none !important; }
html.no-motion .hb-curtain { visibility: hidden !important; }

/* Scroll-Fortschritt */
.hb-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--accent);
  pointer-events: none;
}

/* Meta-Zeile (Kategorie · Datum · Autor) */
.hb-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hb-news-meta i { width: 4px; height: 4px; border-radius: 99px; background: var(--ink-4); }

/* Blog-Titelbild ohne eigenes Bild */
.hb-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 0 6%;
  background: var(--bg-2);
}
.hb-cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 7, 12, .25), rgba(4, 7, 12, .82) 62%); }
.hb-cover-logo { position: relative; z-index: 1; flex: none; height: min(58%, 40cqw); width: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .6)); }
.hb-cover-txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw; }
.hb-cover-txt b { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: 8cqw; line-height: .85; text-transform: uppercase; color: #fff; white-space: nowrap; }
.hb-cover-txt span { padding: .7cqw 1.8cqw; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-family: var(--f-mono); font-weight: 600; font-size: 2cqw; letter-spacing: .14em; }
@container (max-width: 220px) {
  .hb-cover-txt { display: none; }
  .hb-cover-logo { height: 78%; }
}

/* ---------- Keyframes ---------- */
@keyframes hbPulse { 0%, to { box-shadow: 0 0 0 0 rgba(74, 222, 128, .45); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
@keyframes hbFadeIn { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes hbToast { 0% { opacity: 0; translate: -50% 20px; } to { opacity: 1; translate: -50% 0; } }
@keyframes hbToastOut { to { opacity: 0; translate: -50% 20px; } }
@keyframes hbMarquee { 0% { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes hbCurtainSafety { to { visibility: hidden; } }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  :root { --header: 72px; }
  .hb-nav-links, .hb-nav-login, .hb-nav-actions .hb-soc { display: none; }
  .hb-burger { display: block; }
  .hb-brand img { width: 36px; height: 36px; }
  .hb-brand-txt b { font-size: 19px; }
  .hb-foot-top { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hb-sec-head--row { flex-direction: column; align-items: flex-start; }
  .hb-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .hb-btn { --h: 52px; }
  .hb-h2 { font-size: clamp(40px, 11.5vw, 64px); }
  .hb-h1 { font-size: clamp(52px, 15vw, 88px); }
  .hb-label > b::after { width: 18px; margin-left: 10px; }
  .hb-foot-bottom { flex-direction: column; align-items: flex-start; }
}