/* Hainberg Digital — Seiten-Layout auf Basis des Design Systems.
   Reihenfolge: hd-tokens.css, hd-bundle.css, hd-site.css.
   Alle Farben, Schriften, Abstaende und Radien kommen aus den Tokens. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color-scheme: dark; font-size: var(--text-body-size); line-height: var(--text-body-lh); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hd-is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Der Stage-Hintergrund liegt fest hinter der ganzen Seite, alle Abschnitte bleiben transparent. */
.hs-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.hd-stage { background: transparent; overflow: visible; }

.skip { position: absolute; left: -9999px; z-index: 200; padding: var(--space-3) var(--space-4); background: var(--surface-inverse); color: var(--ink-inverse); }
.skip:focus { left: var(--space-3); top: var(--space-3); }

/* ---------- Stage: Ergaenzungen ---------- */
.hd-stage__nav .hd-stage__logo img { height: 30px; width: auto; }
.hd-stage__nav .hd-btn, .hd-stage__nav li { white-space: nowrap; }
.hd-stage__hero { min-height: 680px; padding-bottom: calc(var(--space-24) + var(--space-16)); }
.hd-stage__title, .hd-stage__h2, .hs-h2 { word-spacing: .08em; }
.hd-stage__aside { word-spacing: normal; text-wrap: balance; }
.hd-stage__side--l, .hd-stage__side--r { top: 34%; transform: translateY(-50%); }
.hd-stage__side--l { font-weight: 600; }
.hd-stage__center { display: grid; justify-items: center; }
.hd-stage__center .hd-stage__title { justify-self: stretch; }

.hd-pilot { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; margin-bottom: var(--space-8); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--night-raised); color: var(--paper); font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 600; text-decoration: none; }
.hd-pilot:hover .hd-pilot__ar { transform: translateX(var(--space-1)); }
.hd-pilot__dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--tangerine); }
.hd-pilot__ar { flex: none; color: var(--tangerine); transition: transform .15s ease; }

.hd-stage__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.hd-stage__meta li { display: flex; align-items: center; gap: var(--space-2); opacity: .8; }
.hd-stage__meta li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--tangerine); }

a.hd-tile { color: inherit; text-decoration: none; transition: transform .15s ease; }
a.hd-tile:hover { transform: translateY(calc(var(--space-1) * -1)); }
.hd-tile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.hd-tile__num, .hd-tile--royal .hd-tile__num { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--paper); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; opacity: .7; }
.hd-tile--royal .hd-tile__num { color: var(--on-royal); opacity: .9; }
.hd-tile h3 { margin-top: 0; }
.hd-tile__ar { color: var(--tangerine); line-height: 1; }
.hd-tile--royal .hd-tile__ar { color: var(--on-royal); }
.hd-tile p b { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.hd-tile--royal p { color: var(--on-royal); }
.hd-tile--royal h3 { color: var(--on-royal); }

/* Menue-Button */
.hd-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--night-raised); color: var(--paper); cursor: pointer; }
.hd-burger span, .hd-burger span::before, .hd-burger span::after { display: block; width: 18px; height: 2px; background: currentColor; }
.hd-burger span { position: relative; }
.hd-burger span::before, .hd-burger span::after { content: ""; position: absolute; left: 0; }
.hd-burger span::before { top: -6px; }
.hd-burger span::after { top: 6px; }

/* Vollflaechiges Menue. Liegt ausserhalb der Stage, damit Korn und Raster nicht darueber liegen. */
.hd-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; padding: var(--space-4); overflow-y: auto; background: var(--night); color: var(--paper); visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility .15s ease; }
.hd-menu.is-open { visibility: visible; opacity: 1; }
.hd-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: var(--space-8); }
.hd-menu__top img { height: 28px; width: auto; }
.hd-menu__close { position: relative; display: flex; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--night-raised); color: var(--paper); cursor: pointer; }
.hd-menu__close::before, .hd-menu__close::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; background: currentColor; }
.hd-menu__close::before { transform: rotate(45deg); }
.hd-menu__close::after { transform: rotate(-45deg); }
.hd-menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-strong); color: var(--paper); font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); text-decoration: none; }
.hd-menu__links a::after { content: "→"; color: var(--tangerine); font-family: var(--font-sans); font-size: var(--text-body-size); }
.hd-menu__cta { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.hd-menu__cta .hd-btn { justify-content: center; }
.hd-menu__cta .hd-btn--ghost { color: var(--paper); }

/* Menue-Grenze: Darunter passen sechs Links nicht neben das zentrierte Logo. */
@media (max-width: 1180px) {
  .hd-stage__nav { grid-template-columns: 1fr auto; }
  .hd-stage__nav > ul, .hd-stage__nav .hd-stage__right ul { display: none; }
  .hd-burger { display: inline-flex; }
  .hd-stage__right { gap: var(--space-3) !important; }
  .hd-stage__aside { position: static; display: block; width: auto; margin: var(--space-6) auto 0; max-width: 38ch; text-align: center; }
  .hd-stage__side { display: none; }
}
@media (max-width: 560px) {
  .hd-stage__nav .hd-stage__right .hd-btn { display: none; }
  .hd-stage__nav .hd-stage__logo img { height: 28px; }
  .hd-stage__hero { min-height: 0; padding-top: var(--space-8); padding-bottom: calc(var(--space-24) + var(--space-16)); }
  .hd-stage__cta .hd-btn { width: 100%; justify-content: center; }
  .hd-stage__cta { align-items: stretch; }
  .hd-stage__meta { flex-direction: column; align-items: center; }
  .hd-pilot { align-items: flex-start; text-align: left; }
  .hd-pilot__dot { margin-top: var(--space-1); }
}

/* ---------- Abschnitte ---------- */
.hs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.hs-sec { padding: var(--space-24) 0; color: var(--ink); }
.hs-sec--tint, .hs-sec--line { border-top: 1px solid var(--line); }
.hs-eyebrow { color: var(--paper); }
.hs-head { margin-bottom: var(--space-12); }
.hs-head .hd-eyebrow { margin-bottom: var(--space-4); }
.hs-h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-display-l-size); line-height: var(--text-display-l-lh); font-weight: var(--text-display-l-weight); letter-spacing: var(--text-display-l-ls); }
.hs-h2 .hd-serif { font-size: 1.08em; }
.hs-lead { margin-top: var(--space-6); max-width: 60ch; font-size: var(--text-lead-size); line-height: var(--text-lead-lh); letter-spacing: var(--text-lead-ls); color: var(--ink-muted); }
.hs-note { margin-top: var(--space-6); max-width: 80ch; font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.hs-note a { color: var(--ink); }
.hs-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--ink); font-weight: 600; text-decoration: none; }
.hs-more:hover { text-decoration: underline; }
.hs-more span { color: var(--tangerine); }

/* Garantie */
.hs-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.hs-stat { grid-column: span 2; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--night-raised); }
.hs-stat:nth-child(n+4) { grid-column: span 3; }
.hs-stat__n { font-family: var(--font-display); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); color: var(--ink); }
.hs-stat__l { font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--ink-muted); }

/* Referenzen */
.hs-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.hs-case { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--night-raised); }
.hs-case__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--space-12); }
/* Kundenlogos sind fuer hellen Grund gemacht und stehen deshalb auf einer Paper-Flaeche. */
.hs-case__logobox { display: flex; align-items: center; min-width: 0; max-width: min(62%, 216px); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--paper); }
.hs-case__logo { width: auto; max-width: 100%; max-height: var(--space-12); }
.hs-case__top .hd-eyebrow { flex: none; }
.hs-case__logo--tall { max-height: var(--space-24); mix-blend-mode: multiply; }
.hs-case__name { margin: 0; font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); }
.hs-case dl { display: grid; gap: var(--space-4); margin: 0; }
.hs-case dt { margin-bottom: var(--space-1); }
.hs-case dd { margin: 0; color: var(--ink); }
.hs-result { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding: var(--space-4) var(--space-6); background: var(--night); color: var(--paper); text-decoration: none; }
.hs-result__n { flex: none; font-family: var(--font-display); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); color: var(--paper); }
.hs-result__t { flex: 1; min-width: 0; font-weight: 500; line-height: var(--text-small-lh); }
.hs-result__ar { flex: none; color: var(--tangerine); line-height: 1; }
.hs-case__fine { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }

/* Ratgeber */
.hs-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.hs-article { display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; padding: var(--space-6); background: var(--night-raised); color: var(--ink); text-decoration: none; }
.hs-article h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); }
.hs-article__ar { margin-top: auto; color: var(--tangerine); line-height: 1; }

/* Kontakt */
.hs-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.hs-contact__links { display: grid; gap: var(--space-2); margin-top: var(--space-6); font-weight: 600; }
.hs-contact__links li { display: flex; align-items: center; gap: var(--space-2); }
.hs-contact__links li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--tangerine); }
.hs-contact__links a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.hs-contact__links a:hover { text-decoration: underline; }
.hs-person { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.hs-person img { flex: none; width: 176px; height: 220px; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-none); }
.hs-person p { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.hs-person b { display: block; color: var(--ink); font-weight: 600; }

/* Formular */
.form { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--night-raised); }
.form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 600; }
.field .req { color: var(--ink-muted); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--night); color: var(--ink); font: inherit; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field textarea { min-height: 130px; resize: vertical; }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--royal); }
.consent a { color: var(--ink); }
.consent .req { color: var(--ink-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .hd-btn { justify-content: center; justify-self: start; background: var(--royal); color: var(--on-royal); }
.form .hd-btn:disabled { opacity: .7; cursor: default; }

/* Footer */
.hs-ftr { padding: var(--space-16) 0 var(--space-8); border-top: 1px solid var(--line); color: var(--paper); }
.hs-ftr__top { display: grid; grid-template-columns: 7fr 3fr 3fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--line); }
.hs-ftr__logo { width: 195px; height: auto; }
.hs-ftr__text { margin-top: var(--space-6); max-width: 38ch; opacity: .78; }
.hs-ftr__h { margin: 0 0 var(--space-4); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; opacity: .78; }
.hs-ftr ul { display: grid; gap: var(--space-3); }
.hs-ftr a { text-decoration: none; overflow-wrap: anywhere; }
.hs-ftr a:hover { text-decoration: underline; }
.hs-ftr a:focus-visible { outline-color: var(--tangerine); }
.hs-ftr__muted { opacity: .78; }
.hs-ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-top: var(--space-6); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.hs-ftr__bot ul { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* Mobile Aktionsleiste. Klassen bleiben, damit site.js sie weiter einblendet. */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: var(--space-2); padding: var(--space-2); background: var(--night-raised); box-shadow: var(--shadow-lift); transform: translateY(110%); transition: transform .15s ease; }
.sticky-cta.is-on { transform: none; }
.sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-pill); color: var(--ink); font-size: var(--text-small-size); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sticky-cta a.primary { background: var(--royal); color: var(--on-royal); box-shadow: none; }

@media (max-width: 900px) {
  .hs-wrap { padding: 0 var(--space-4); }
  .hs-sec { padding: var(--space-16) 0; }
  .hs-h2 { font-size: var(--text-headline-size); line-height: var(--text-headline-lh); letter-spacing: var(--text-headline-ls); }
  .hs-stats, .hs-cases, .hs-articles, .hs-contact { grid-template-columns: minmax(0, 1fr); }
  .hs-stat, .hs-stat:nth-child(n+4) { grid-column: auto; }
  .hs-contact { gap: var(--space-8); }
  .hs-ftr__top { grid-template-columns: minmax(0, 1fr); }
  .hs-article { min-height: 160px; }
}
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: calc(44px + var(--space-4)); }
}
@media (max-width: 560px) {
  .form__2 { grid-template-columns: minmax(0, 1fr); }
  .form .hd-btn { width: 100%; }
  .hs-result { padding: var(--space-4); }
}

/* ---------- Schrift-Staffelung: Ueberschriften und Zahlen weiss, Fliesstext und Akzentwoerter beige ---------- */
:root { --hs-heading: var(--on-royal); --hs-text: var(--line); }
[data-theme="dark"] { --ink: var(--hs-text); }
.hd-stage, .hs-sec, .hs-ftr, .hd-menu, .hd-pilot, .hs-eyebrow, .hs-result, .hd-tile__num, .eyebrow, .case__result { color: var(--hs-text); }
.hd-stage__nav a:not(.hd-btn) { color: var(--hs-text); }
.hd-tile--royal .hd-tile__num { color: var(--on-royal); }
h1, h2, h3, .h1, .h2, .h3, .h4, .hd-stage__title, .hd-stage__h2, .hs-h2, .hs-stat__n, .hs-result__n, .hs-case__name, .hs-ftr__h + ul a:hover, .stat__n, .proof__n, .case__result .n, .faq summary, .hd-menu__links a { color: var(--hs-heading); }
h1 .hd-serif, h2 .hd-serif, .hd-stage__aside { color: var(--hs-text); }
.hs-ftr__h { color: var(--hs-text); }
.hd-stage__cta .hd-btn--ghost, .hd-menu__cta .hd-btn--ghost { color: var(--hs-heading); }
.hd-stage__nav li a:not(.hd-btn) { color: var(--hs-heading); opacity: 1; }
.hd-stage__nav li a:not(.hd-btn):hover, .hd-stage__nav li a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.hs-about { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--space-12); align-items: center; }
.hs-about__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.hs-about__img figcaption { margin-top: var(--space-3); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.hs-about__img b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .hs-about { grid-template-columns: 1fr; gap: var(--space-8); } .hs-about__img { max-width: 240px; } }

/* ---------- Pilot-Banner (sticky) ---------- */
.hd-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--night-raised); border-bottom: 1px solid var(--line); color: var(--paper); font-size: var(--text-small-size); line-height: var(--text-small-lh); text-align: center; text-decoration: none; }
.hd-banner b { font-weight: 600; }
.hd-banner__dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--tangerine); }
.hd-banner__m { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hd-banner__ar { flex: none; color: var(--tangerine); transition: transform .15s ease; }
.hd-banner:hover .hd-banner__ar { transform: translateX(var(--space-1)); }
.hd-banner__s { display: none; }
@media (max-width: 720px) { .hd-banner__t, .hd-banner__m { display: none; } .hd-banner__s { display: inline; } }

/* ---------- Pilot-Seite ---------- */
.pl-list { display: grid; gap: var(--space-3); margin-top: var(--space-2); list-style: none; padding: 0; }
.pl-list li { position: relative; padding-left: var(--space-6); color: var(--ink-muted); }
.pl-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--tangerine); }
.pl-card h3 { margin-bottom: var(--space-2); }
.pl-no { display: block; margin-bottom: var(--space-6); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--tangerine); }
.pl-sub { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.pl-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); }
@media (max-width: 900px) { .pl-sub + .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .pl-sub + .tiles, .tiles[style] { grid-template-columns: minmax(0, 1fr) !important; } }