html{scroll-behavior:smooth}
body{margin:0}

/* =========================================================
   hello again — Foundations
   Colors + Typography tokens
   ========================================================= */

@font-face {
  font-family: 'Nexa';
  src: url("assets/nexa-light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url("assets/nexa-bold.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brutal';
  src: url("assets/brutal.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand core ----------
     The two anchor hues form the signature "smart → loyal" gradient.
     Smart (cyan/turquoise) sits on the left, loyal (light green) on the right.
  */
  --ha-smart:        #00A7E1;   /* cyan — "smart" end of the gradient */
  --ha-loyal:        #8BC753;   /* green — "loyal" end of the gradient */
  --ha-smart-mid:    #2B9AA8;   /* teal mid-step used as solo accent */

  /* Signature gradient (always left → right, always smart → loyal) */
  --ha-gradient:     linear-gradient(90deg, #00A7E1 0%, #8BC753 100%); /* @kind color */
  --ha-gradient-45:  linear-gradient(45deg, #00A7E1 0%, #8BC753 100%); /* @kind color */
  --ha-gradient-soft:linear-gradient(90deg, rgba(0,167,225,.12) 0%, rgba(139,199,83,.12) 100%); /* @kind color */

  /* ---------- Neutrals ---------- */
  --ha-ink:          #262D35;   /* Primary dark — body text on light, brand dark */
  --ha-ink-2:        #3A424D;   /* secondary text */
  --ha-ink-3:        #6B7380;   /* tertiary / captions */
  --ha-line:         #D5D8DD;   /* dividers, 1px borders */
  --ha-surface-3:    #F5F6F7;   /* light background tint */
  --ha-surface-2:    #F3F4F6;   /* card tint */
  --ha-surface-1:    #FAFBFC;   /* page bg on light */
  --ha-white:        #FFFFFF;

  /* ---------- Foreground tokens (semantic) ---------- */
  --fg-1: var(--ha-ink);
  --fg-2: var(--ha-ink-2);
  --fg-3: var(--ha-ink-3);
  --fg-on-brand: #FFFFFF;
  --fg-on-dark:  #FFFFFF;

  /* ---------- Background tokens ---------- */
  --bg-page:     var(--ha-surface-1);
  --bg-card:     var(--ha-white);
  --bg-muted:    var(--ha-surface-3);
  --bg-dark:     var(--ha-ink);
  --bg-brand:    var(--ha-gradient);

  /* ---------- Status (semantic, same hue family as brand) ---------- */
  --ok:          #5BAE3C;       /* slightly deeper than loyal for contrast */
  --ok-bg:       #EAF5DC;
  --warn:        #E8A33C;       /* warm, stays outside gradient */
  --warn-bg:     #FBEFD5;
  --danger:      #E24848;
  --danger-bg:   #FBE3E3;
  --info:        var(--ha-smart);
  --info-bg:     #D6F0FB;

  /* ---------- Spacing scale (4-pt base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radius ----------
     hello again uses generously rounded, capsule-heavy UI.
     Buttons and pills are fully pill-shaped; cards are 12–16px. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* default card radius */
  --radius-lg: 20px;     /* large cards, sheets */
  --radius-xl: 28px;
  --radius-pill: 999px;  /* buttons, chips, badges */

  /* ---------- Elevation ----------
     Soft, low-contrast shadows. Never dramatic drop-shadows.
     Color is a cool ink tint, never pure black. */
  --shadow-1: 0 1px 2px rgba(38, 45, 53, .06),
              0 1px 1px rgba(38, 45, 53, .04);
  --shadow-2: 0 4px 14px rgba(38, 45, 53, .08),
              0 1px 2px rgba(38, 45, 53, .04);
  --shadow-3: 0 12px 32px rgba(38, 45, 53, .12),
              0 2px 6px  rgba(38, 45, 53, .05);
  --shadow-brand: 0 10px 28px rgba(0, 167, 225, .25);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---------- Typography — families ---------- */
  --font-display: 'Nexa', 'Brutal', system-ui, sans-serif;
  --font-body:    'Brutal', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography — scale ----------
     Display uses Nexa Bold + tight letter-spacing. Body uses Nexa Light
     at 400 weight equivalent for long reading.
  */
  --fs-display-xl: clamp(44px, 6vw, 72px); /* @kind font */
  --fs-display-lg: clamp(36px, 4.5vw, 56px); /* @kind font */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.08; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-normal:1.5; /* @kind font */
  --lh-loose: 1.65; /* @kind font */

  --tracking-tight: -0.02em; /* @kind font */
  --tracking-body:  0; /* @kind font */
  --tracking-caps:  0.08em; /* @kind font */

  /* ---------- Nexa optical-centering correction ----------
     Nexa's metrics: ascent 700 / descent 300 (unitsPerEm 1000) — and its cap
     height is ALSO exactly 700. So capitals completely fill the space above
     the baseline while the entire 0.3em descender slot below stays empty.

     Consequence: any cap-dominant string (buttons, badges, chips, nav labels,
     KPI numbers, uppercase overlines) that is vertically centred in a box
     lands too HIGH — the browser centres the 1em content box, not the ink.
     Measured at 200px: ink centre 69.8px above baseline vs box centre 40.0px
     = a 29.8px / 0.149em error. Mixed-case text WITH descenders is already
     centred correctly, so this is deliberately NOT a blanket metric override. */
  --nexa-cap-shift: 0.149em; /* @kind other */
}

/* ------------- Semantic element defaults ------------- */

html, body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); }
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ha-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Gradient text helper — use on highlighted words inside headlines.
   Wrap the emphasized word in <span class="ha-accent">…</span>. */
.gradient-text,
.ha-accent {
  background: var(--ha-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Slightly tighter to compensate for clipping artifacts at large sizes */
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   Nexa vertical centering — utilities
   ============================================================ */

/* Use on any Nexa element whose text is CAP-DOMINANT (no descenders) and is
   vertically centred inside a fixed-height box: buttons, badges, chips, pills,
   tab-bar labels, KPI numbers, uppercase overlines.
   `text-box` is the real fix (trims the line box to cap-top → baseline so
   centring uses the ink). The relative-position nudge is the fallback for
   engines without it, and works on inline and block elements alike. */
.ha-cap-center { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .ha-cap-center { position: relative; top: var(--nexa-cap-shift); }
}

/* Nexa has ZERO headroom above its capitals (ascent == cap height), so
   capital umlauts — Ä Ö Ü, unavoidable in German — paint ~0.2em ABOVE the
   font's own ascent and get clipped by any `overflow: hidden` ancestor.
   Add this to a tight, clipped Nexa line that may contain capital umlauts. */
.ha-umlaut-safe { padding-top: 0.2em; }

/* The system's own cap-only text class benefits automatically. */
.caption { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .caption { position: relative; top: var(--nexa-cap-shift); }
}


body{margin:0}
a{color:#0077A8}a:hover{color:#005F87}
.ha-accent-light{background:var(--ha-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (max-width: 767px){
.hide-m{display:none !important}
.show-m{display:flex !important}
[data-step-body] p{display:none}
ol[data-steps]{gap:24px 0 !important}
.hero-copy > figure{order:4 !important}
.call-row a{flex:1 1 100% !important}
.kz-row{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;gap:16px !important;margin:0 -20px;padding:4px 20px 16px;scrollbar-width:none}
.kz-row::-webkit-scrollbar{display:none}
.kz-dots{display:flex !important}
[style*="max-width: 1200px"]{padding-left:20px !important;padding-right:20px !important}
[style*="padding: 80px 32px"]{padding-top:56px !important;padding-bottom:56px !important}
.hero-row{padding-bottom:56px !important}
.cta-btns{flex-direction:column;width:100%}
.cta-btns a{width:100%;box-sizing:border-box;justify-content:center}
.logo-track{zoom:.8}
.kz-row>div{flex:0 0 74%;scroll-snap-align:start}
.hero-row{flex-direction:column !important;align-items:stretch !important;gap:20px !important}
.hero-copy{display:contents !important}
.hero-copy > *{order:3}
.hero-copy > .hero-top{order:1}
#termin{order:2;flex:0 0 auto !important;margin:8px 0 12px 0}
}
@media (hover:hover){html.ha-anim .ha-in.kz-row>*:hover{transform:translateY(-2px)}}
.kz-dots{display:none;justify-content:center;gap:8px;margin-top:-20px}
.kz-dots span{width:6px;height:6px;border-radius:999px;background:var(--ha-line);transition:width 220ms cubic-bezier(.22,1,.36,1),background 220ms}
.kz-dots span.on{width:18px;background:#00A7E1}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #00A7E1;outline-offset:2px}

.ha-accent,.ha-accent-light{padding:0.2em 0.06em 0.12em;margin:-0.2em -0.06em -0.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#termin{position:relative;isolation:isolate}
#termin::before{content:'';position:absolute;inset:-14% -22%;z-index:-1;pointer-events:none;background:radial-gradient(44% 40% at 30% 38%,rgba(0,167,225,.75),transparent 70%),radial-gradient(42% 38% at 72% 66%,rgba(139,199,83,.65),transparent 70%);filter:blur(48px);opacity:.9}

@media (hover:hover){.scp0:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.scp1,.scp2,#sticky-bar a,.call-row a{transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1),opacity 140ms}
.scp1:hover{transform:translateY(-2px);box-shadow:var(--shadow-brand)}
.scp2:hover,.call-row a:hover{transform:translateY(-2px)}}
.scp1:active,.scp2:active,.call-row a:active{transform:scale(.97)}
.logo-row img{transition:opacity 220ms}
.logo-row span{flex:0 0 auto}
.logo-row:hover .logo-track{animation-play-state:paused}
@keyframes ha-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){.logo-track.ha-loop{animation:ha-marquee 40s linear infinite}}
@media (prefers-reduced-motion:reduce){.logo-row{overflow-x:auto !important}}
@keyframes ha-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ha-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ha-breathe{0%,100%{opacity:.8}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
html.ha-anim .hero-copy>*{animation:ha-up 520ms cubic-bezier(.22,1,.36,1) both}
html.ha-anim #termin{animation:ha-in 640ms cubic-bezier(.22,1,.36,1) 180ms both}
#termin::before{animation:ha-breathe 7s ease-in-out infinite}
html.ha-anim [data-reveal],html.ha-anim [data-reveal-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity 520ms cubic-bezier(.22,1,.36,1),transform 520ms cubic-bezier(.22,1,.36,1)}
html.ha-anim .ha-in[data-reveal],html.ha-anim .ha-in[data-reveal-stagger]>*{opacity:1;transform:none}

}
.hero-copy li>span:last-child{text-wrap:pretty}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}


body{margin:0}


@media (min-width: 768px){.hero-copy{position:relative;top:-48px}}

/* Text links: Position wird einmal am geladenen Kalender ausgerichtet und dann festgehalten,
   damit er nicht springt, wenn HubSpot die Kalenderhöhe ändert (Laden, Formular, Absenden). */
@media (min-width: 768px){
.hero-row{align-items:flex-start !important}
.hero-copy{margin-top:var(--copy-offset,0px)}
.hero-copy.copy-glide{transition:margin-top 420ms cubic-bezier(.22,1,.36,1)}
}
/* Platzhalter in Kalenderhöhe, bis HubSpot sein Fenster eingefügt hat – so startet der Text gleich an der richtigen Stelle. */
@media (min-width: 768px){#hubspot-meetings:not(:has(iframe)){min-height:740px !important}}
/* Hinweis unter der Überschrift – nur auf dem Handy */
.hero-sub-m{display:none}
@media (max-width: 767px){
.hero-copy > .hero-sub-m{display:block;order:1;margin:-8px 0 0;font-size:16px;line-height:1.4;color:rgba(255,255,255,.6)}
}