[hidden] { display: none !important; }
/* Samsung Internet faerbt Seiten im eigenen Dunkelmodus um (goldenes Logo wird rot), ausser die Seite
   meldet selbst Dark-Mode-Unterstuetzung: color-scheme + eine prefers-color-scheme-Regel. */
:root { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
/* Safe Areas (iPhone: Notch, Home-Leiste, Safari-Symbolleiste). Wirkt dank viewport-fit=cover */
:root {
  --hv-sat: env(safe-area-inset-top, 0px);
  --hv-sab: env(safe-area-inset-bottom, 0px);
  --hv-sal: env(safe-area-inset-left, 0px);
  --hv-sar: env(safe-area-inset-right, 0px);
}
/* 100vh ist auf iOS hoeher als der sichtbare Bereich -> Footer rutscht unter die Symbolleiste */
#hv-shell { height: 100vh; }
@supports (height: 100dvh) { #hv-shell { height: 100dvh; } }
.hv-headbar, .hv-footbar { padding-left: max(22px, var(--hv-sal)) !important; padding-right: max(22px, var(--hv-sar)) !important; }
body { margin: 0; color: #f4f0e8; font-family: "IBM Plex Sans", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; background-color: #0a0a09; }
a { color: #f0d28a; text-decoration: none; }
a:hover { color: #fdfbf6; }
::selection { background: #a8761a; color: #fdfbf6; }
:focus-visible { outline: 2px solid #f0d28a; outline-offset: 2px; }
h1, h2, h3 { font-family: Jost, sans-serif; font-weight: 400; margin: 0; }
p { margin: 0; hyphens: auto; }
#hv-scroller { scrollbar-width: thin; scrollbar-color: #000000 #0a0a09; }
#hv-scroller::-webkit-scrollbar { width: 6px; }
#hv-scroller::-webkit-scrollbar-track { background: #0a0a09; }
#hv-scroller::-webkit-scrollbar-thumb { background: #000000; }

/* --- Sprachen (i18n) --------------------------------------------------------- */
/* Bis die Uebersetzung geladen ist, Seite verbergen (kein Aufblitzen der deutschen Texte).
   Fallback ohne JS/bei Fehler: nach 2 s trotzdem einblenden. */
@keyframes hv-reveal { to { opacity: 1; } }
html.hv-i18n-pending #hv-shell { opacity: 0; animation: hv-reveal 0.2s 2s forwards; }
#hv-shell { transition: opacity 0.2s ease; }
#hv-langmenu .hv-lang-opt { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 6px; color: #f4f0e8; font-size: 14px; }
#hv-langmenu .hv-lang-opt:hover { background: rgba(253,251,246,0.07); color: #fdfbf6; }
#hv-langmenu .hv-lang-code { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #9b958a; }
#hv-langmenu .hv-lang-opt[aria-current="true"] { background: #d4a017; color: #1b1b19; font-weight: 600; }
#hv-langmenu .hv-lang-opt[aria-current="true"] .hv-lang-code { color: #1b1b19; }
/* Vietnamesisch: Jost hat keine vietnamesischen Zeichen -> IBM Plex Sans (Marke „HIVE“ bleibt Jost) */
html[lang="vi"] [style*="Jost"]:not(.hv-brand):not(.hv-wm-title):not([data-role="cell-label"]),
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3,
html[lang="vi"] .hv-menu-link, html[lang="vi"] .hv-table .hv-rl { font-family: "IBM Plex Sans", system-ui, sans-serif !important; }
html[lang="vi"] h1, html[lang="vi"] h2 { font-weight: 300; }
html[lang="vi"] h1 { line-height: 1.2 !important; }
html[lang="vi"] h2 { line-height: 1.25 !important; }

/* --- Hero: Globus rechts neben dem Text, mobil neben der Liste ------------- */
/* right: an der 1180px-Inhaltsspalte ausrichten statt an der Bildschirmkante – sonst driftet der
   Globus auf breiten Monitoren vom Text weg. -60px gleicht den Leerraum im SVG-viewBox aus. */
.hv-globe { position: absolute; right: max(5%, calc((100% - 1180px) / 2 - 60px)); top: 50%; transform: translateY(-50%); width: min(56vh, 44%, 540px); z-index: -1; pointer-events: none; opacity: 0.6; }

/* --- Header: Menue-Button wird beim Oeffnen zum X ------------------------- */
.hv-burger { display: flex; flex-direction: column; gap: 3px; width: 16px; }
.hv-burger span { display: block; width: 16px; height: 1.5px; background: #f0d28a; transition: transform 0.25s ease, opacity 0.2s ease; }
.hv-menubtn[aria-expanded="true"] .hv-burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.hv-menubtn[aria-expanded="true"] .hv-burger span:nth-child(2) { opacity: 0; }
.hv-menubtn[aria-expanded="true"] .hv-burger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* --- Menue ---------------------------------------------------------------- */
.hv-menu { position: absolute; inset: 0; z-index: 65; box-sizing: border-box; padding: calc(96px + var(--hv-sat)) 24px calc(84px + var(--hv-sab)); background: rgba(15,15,14,0.97); display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.hv-menu-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.hv-menu-link { display: inline-flex; align-items: flex-start; gap: 20px; padding: 4px 0; font-family: Jost, sans-serif; font-weight: 300; font-size: 34px; line-height: 1.3; color: #f4f0e8; transition: color 0.2s ease; }
.hv-menu-link::before { content: ""; flex: none; width: 18px; height: 1px; margin-top: 0.66em; background: rgba(226,184,74,0.55); transition: width 0.25s ease, background-color 0.25s ease; }
.hv-menu-link:focus-visible, .hv-menu-link[aria-current="true"] { color: #f0d28a; }
.hv-menu-link:focus-visible::before, .hv-menu-link[aria-current="true"]::before { width: 42px; background: #d4a017; }
@media (hover: hover) {
  .hv-menu-link:hover { color: #f0d28a; }
  .hv-menu-link:hover::before { width: 42px; background: #f0d28a; }
}
.hv-menu-foot { max-width: 1000px; width: 100%; margin: 30px auto 0; padding-left: 38px; box-sizing: border-box; }
@keyframes hv-menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hv-menu:not([hidden]) .hv-menu-list li, .hv-menu:not([hidden]) .hv-menu-foot { animation: hv-menu-in 0.4s ease-out both; }
.hv-menu-list li:nth-child(2) { animation-delay: 0.03s !important; }
.hv-menu-list li:nth-child(3) { animation-delay: 0.06s !important; }
.hv-menu-list li:nth-child(4) { animation-delay: 0.09s !important; }
.hv-menu-list li:nth-child(5) { animation-delay: 0.12s !important; }
.hv-menu-list li:nth-child(6) { animation-delay: 0.15s !important; }
.hv-menu-list li:nth-child(7) { animation-delay: 0.18s !important; }
.hv-menu-foot { animation-delay: 0.22s !important; }

@media (max-width: 1120px) {
  .hv-7 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .hv-split { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) !important; }
}
@media (max-width: 940px) {
  .hv-sec { padding: 28px 18px !important; }
  .hv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .hv-img { grid-column: 1 / -1 !important; min-height: 210px !important; order: -1; }
  .hv-7 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hv-4, .hv-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; }
  .hv-table { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) !important; }
  .hv-globe { width: 66%; right: -6%; opacity: 0.32; }
  .hv-logo { width: min(40vh, 58vw) !important; }
  /* Fortschritt als Linie ueber die ganze Footer-Oberkante */
  .hv-progress { width: auto !important; }
  .hv-track { position: absolute !important; left: 0; right: 0; top: -1px; height: 2px !important; background: rgba(226,184,74,0.12) !important; }
  #hv-bar { height: 2px !important; }
}
@media (max-width: 700px) {
  .hv-2, .hv-4, .hv-7, .hv-trust, .hv-split, .hv-table { grid-template-columns: minmax(0, 1fr) !important; }
  .hv-sec p, .hv-sec div { text-align: left !important; }
  .hv-hand { font-size: 24px !important; }
  .hv-menulabel, .hv-counter { display: none !important; }
  .hv-legal { gap: 9px !important; }
  .hv-legal a { font-size: 11.5px !important; }
  .hv-img { min-height: 180px !important; }
  .hv-logo { width: min(34vh, 66vw) !important; }

  /* Header: Wortmarke bleibt, alles etwas kompakter */
  .hv-headbar { padding: 0 14px !important; gap: 10px !important; }
  .hv-headactions { gap: 8px !important; }
  .hv-headbar > a { gap: 9px !important; }
  .hv-headbar > a > svg { width: 30px; height: 38px; }
  .hv-wordmark { gap: 5px !important; }
  .hv-wm-title { font-size: 24px !important; }
  .hv-wm-sub { font-size: 6.5px !important; }

  /* Hero: Globus rechts neben den vier Punkten */
  .hv-trustrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center; column-gap: 6px; }
  .hv-globe { position: relative; right: auto; top: auto; transform: scale(1.22); transform-origin: 60% 50%; width: auto; margin-right: -10px; opacity: 0.8; z-index: auto; }
  .hv-globe svg { overflow: visible; }
  .hv-globe text { font-size: 13px !important; letter-spacing: 1px !important; }

  /* Footer: nur Linie, Rechtliches mittig */
  .hv-footbar { justify-content: center !important; gap: 0 !important; padding: 0 12px !important; }
  .hv-progress { width: 0 !important; max-width: 0 !important; gap: 0 !important; }

  /* Menue */
  .hv-menu { justify-content: flex-start; padding: calc(100px + var(--hv-sat)) 22px calc(84px + var(--hv-sab)); }
  .hv-menu-list { gap: 0; }
  .hv-menu-link { gap: 14px; padding: 9px 0; font-size: 26px; line-height: 1.25; }
  .hv-menu-link::before { width: 14px; margin-top: 0.64em; }
  .hv-menu-link[aria-current="true"]::before { width: 28px; }
  .hv-menu-foot { padding-left: 0; margin-top: 26px; }
  .hv-menu-foot .hv-submit { width: 100%; justify-content: center; }

  /* Vergleich: jede Zeile mit Spaltennamen, Kopfzeile entfaellt */
  .hv-table { row-gap: 6px !important; }
  .hv-table .hv-th { display: none !important; }
  .hv-table .hv-rl { margin-top: 12px; font-family: Jost, sans-serif; font-size: 16px !important; color: #fdfbf6 !important; }
  .hv-table [data-col]::before { content: attr(data-col); display: block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #f0d28a; }

  /* Finale: Schriftzug ueber die gestapelten Buttons heben */
  .hv-finale { bottom: 176px !important; }
  .hv-finale-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 10px !important; }
  .hv-finale-cta > * { text-align: center; }
}
/* Touch: Einrasten pro Seite (Desktop macht das app.js ueber das Mausrad).
   Hohe Abschnitte bekommen Zwischenpunkte .hv-snap aus app.js (buildSnaps). */
.hv-snap { display: none; }
@media (hover: none) and (pointer: coarse) {
  #hv-scroller { scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
  .hv-sec { scroll-snap-align: start; scroll-snap-stop: always; }
  .hv-snap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
}
@keyframes hv-dash { to { stroke-dashoffset: -22px; } }
.hv-route { animation: hv-dash 2.4s linear infinite; }

/* --- Modal: Personalbedarf melden ----------------------------------------- */
.hv-modal { box-sizing: border-box; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid rgba(226,184,74,0.28); border-radius: 14px; background: #171714; color: #f4f0e8; box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden; }
.hv-modal::backdrop { background: rgba(8,8,7,0.74); backdrop-filter: blur(4px); }
.hv-modal[open] { animation: hv-modal-in 0.28s ease-out; }
@keyframes hv-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.hv-modal-inner { box-sizing: border-box; max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; padding: 32px 36px 30px; overflow-wrap: anywhere; }
.hv-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.hv-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.2em; color: #f0d28a; }
.hv-modal-title { margin-top: 10px; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: #fdfbf6; }
.hv-modal-lead { margin-top: 10px; max-width: 56ch; font-size: 14.5px; color: #c8c2b4; }
.hv-modal-close { flex: none; box-sizing: border-box; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(253,251,246,0.22); border-radius: 8px; background: transparent; color: #f0d28a; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.hv-modal-close:hover { border-color: rgba(240,210,138,0.6); color: #fdfbf6; }

.hv-form { margin-top: 6px; }
.hv-fieldset { min-width: 0; margin: 24px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(226,184,74,0.16); }
.hv-legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #9b958a; }
.hv-legend + * { clear: both; }
.hv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.hv-field-wide { grid-column: 1 / -1; }
.hv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hv-fieldset > .hv-field + .hv-field, .hv-fieldset > .hv-field + .hv-grid { margin-top: 18px; }
.hv-form > .hv-field { margin-top: 22px; }
.hv-field > label, .hv-label { font-size: 13.5px; color: #d5cfc2; }
.hv-req { color: #f0d28a; }
.hv-opt { color: #8c8579; }
.hv-form input:not([type="radio"]):not([type="checkbox"]), .hv-form select, .hv-form textarea {
  box-sizing: border-box; width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid rgba(253,251,246,0.18); border-radius: 8px;
  background-color: rgba(253,251,246,0.04); color: #fdfbf6; font: inherit; font-size: 16px; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.hv-form textarea { min-height: 110px; resize: vertical; }
.hv-form select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0d28a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.hv-form select option { background: #171714; color: #fdfbf6; }
.hv-form select:has(option[value=""]:checked) { color: #8c8579; }
.hv-modal.is-done .hv-modal-lead { display: none; }
.hv-form ::placeholder { color: #8c8579; opacity: 1; }
.hv-form input:not([type="radio"]):not([type="checkbox"]):hover, .hv-form select:hover, .hv-form textarea:hover { border-color: rgba(253,251,246,0.32); }
.hv-form input:not([type="radio"]):not([type="checkbox"]):focus, .hv-form select:focus, .hv-form textarea:focus { outline: none; border-color: #d4a017; background-color: rgba(253,251,246,0.06); box-shadow: 0 0 0 3px rgba(212,160,23,0.22); }
.hv-field.is-invalid input, .hv-field.is-invalid select, .hv-field.is-invalid textarea { border-color: #e0785a !important; }
.hv-err { font-size: 12.5px; color: #f0a38a; }

.hv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-chip { position: relative; display: inline-flex; }
.hv-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hv-chip span { display: inline-flex; align-items: center; min-height: 42px; box-sizing: border-box; padding: 8px 15px; border: 1px solid rgba(253,251,246,0.2); border-radius: 999px; font-size: 14px; line-height: 1.3; color: #d5cfc2; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.hv-chip input:hover + span { border-color: rgba(240,210,138,0.6); }
.hv-chip input:checked + span { border-color: #d4a017; background: #d4a017; color: #1b1b19; }
.hv-chip input:focus-visible + span { outline: 2px solid #f0d28a; outline-offset: 2px; }
.hv-field.is-invalid .hv-chip span { border-color: rgba(224,120,90,0.7); }

.hv-check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: #c8c2b4; cursor: pointer; }
.hv-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #d4a017; cursor: pointer; }
.hv-check a { text-decoration: underline; text-underline-offset: 2px; }
.hv-field.is-invalid .hv-check input { outline: 2px solid #e0785a; outline-offset: 1px; }

.hv-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.hv-form-foot { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hv-note { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; color: #8c8579; }
.hv-submit { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 9px; background: #d4a017; color: #1b1b19; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.6; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
.hv-submit:hover { background: #e2b84a; }
.hv-submit:active { transform: translateY(1px); }
.hv-submit[disabled] { opacity: 0.65; cursor: progress; }
.hv-form-error { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(224,120,90,0.5); border-radius: 8px; background: rgba(224,120,90,0.08); font-size: 14px; color: #f3c1b0; }

.hv-done { padding: 34px 0 10px; text-align: center; outline: none; }
.hv-done-icon { width: 58px; height: 58px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #d4a017; border-radius: 50%; color: #f0d28a; }
.hv-done-title { margin-top: 18px; font-size: 26px; line-height: 1.2; color: #fdfbf6; }
.hv-done-text { margin-top: 8px; font-size: 15px; color: #c8c2b4; }
.hv-demo { max-width: 46ch; margin: 18px auto 0; padding: 10px 14px; border: 1px dashed rgba(240,210,138,0.4); border-radius: 8px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #b5afa2; }
.hv-done .hv-submit { margin-top: 24px; }

/* --- Modal: Impressum / Datenschutz (Inhalt per fetch aus /impressum.html, /datenschutz.html) --- */
.hv-legal-close { position: sticky; top: 0; float: right; z-index: 1; margin: -6px -8px 8px 16px; background: #171714; }
.hv-legal-body { line-height: 1.7; color: #c8c2b4; overflow-wrap: anywhere; }
.hv-legal-body[aria-busy="true"] { min-height: 200px; opacity: 0.5; }
.hv-legal-body .eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.2em; color: #f0d28a; }
.hv-legal-body h1 { margin-top: 10px; font-weight: 300; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; color: #fdfbf6; }
.hv-legal-body h1:focus { outline: none; }
.hv-legal-body h2 { margin-top: 30px; font-size: 19px; line-height: 1.3; color: #fdfbf6; }
.hv-legal-body h2 .no { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.12em; color: #f0d28a; margin-right: 10px; vertical-align: 0.2em; }
.hv-legal-body hr { width: 90px; margin: 22px 0 0; border: 0; border-top: 1px solid rgba(226,184,74,0.35); }
.hv-legal-body p, .hv-legal-body li { font-size: 15px; }
.hv-legal-body h2 + p, .hv-legal-body p + p, .hv-legal-body p + ul, .hv-legal-body ul + p { margin-top: 10px; }
.hv-legal-body ul { margin: 0; padding-left: 20px; }
.hv-legal-body li + li { margin-top: 4px; }
.hv-legal-body li::marker { color: #f0d28a; }
.hv-legal-body strong { color: #fdfbf6; font-weight: 600; }
.hv-legal-body .stand { margin-top: 30px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.12em; color: #8c8579; }
.hv-legal-body .links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; }
.hv-legal-body .back { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

@media (max-width: 700px) {
  .hv-modal { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .hv-modal-inner { max-height: 100dvh; height: 100%; padding: calc(20px + var(--hv-sat)) 18px calc(28px + var(--hv-sab)); }
  .hv-grid { grid-template-columns: minmax(0, 1fr); }
  .hv-form-foot { flex-direction: column-reverse; align-items: stretch; }
  .hv-form-foot .hv-submit { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-route { animation: none; }
  .hv-modal[open], .hv-menu:not([hidden]) .hv-menu-list li, .hv-menu:not([hidden]) .hv-menu-foot { animation: none !important; }
  .hv-burger span, .hv-menu-link, .hv-menu-link::before { transition: none; }
}