/* Static replacements for behaviour that the prototype handled in React */

/* one body font on every page (the landing prototype already used the system sans-serif) */
:root{--font-sans:sans-serif}
[hidden]{display:none !important}
/* always reserve the scrollbar's space: no sideways jump between short/long pages,
   after the intro (which locks scrolling) or when the menu opens */
html{scrollbar-gutter:stable}
/* no browser 'scroll anchoring': it scrolled the page by the header height after a reload on phones */
html,body{overflow-anchor:none}

/* design-system buttons: hover / press (was component state) */
[data-btn]:hover{color:inherit}
[data-btn="dark"]:hover{background:var(--btn-dark-bg-hover) !important}
[data-btn="light"]:hover{background:var(--btn-light-bg-hover) !important}
[data-btn="white"]:hover{background:var(--gray-100) !important}
[data-btn="ghost"]:hover{background:var(--gray-100) !important}
[data-btn]:active{transform:scale(.98)}
a[data-btn="dark"]:hover{color:var(--btn-dark-fg)}
a[data-btn="white"]:hover,a[data-btn="light"]:hover{color:var(--gray-900)}

/* header: what used to be decided by window width in JS */
[data-hdr-bar],[data-hdr-space]{height:76px}
@media (max-width:639.98px){[data-hdr-bar],[data-hdr-space]{height:64px}}
@media (max-width:1319.98px){[data-only="wide"]{display:none !important}}
@media (min-width:1320px){[data-only="narrow"],[data-menu]{display:none !important}}
@media (max-width:559.98px){[data-only="cta"]{display:none !important}}

/* two-state icons (menu, FAQ) */
[aria-expanded="true"] [data-ico="closed"],[aria-expanded="false"] [data-ico="open"]{display:none !important}

/* language switch DE · EN · UK: dark indicator slides to the active language */
[data-lang-seg]{position:relative;display:inline-flex;align-items:stretch;box-sizing:border-box;padding:4px;border-radius:8px;background:rgba(28,28,28,.06);color:inherit;font-weight:600;letter-spacing:-0.01em;transition:background .5s}
[data-lang-seg] a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:2.5em;padding:0 .5em;border-radius:6px;color:inherit;transition:color .45s cubic-bezier(.22,1,.36,1),opacity .3s}
[data-lang-seg] a:hover{color:inherit;opacity:.65}
[data-lang-seg] a[aria-current]{color:#fff;opacity:1}
[data-seg-ind]{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--seg-w,0px);transform:translateX(var(--seg-x,0px));border-radius:6px;background:#1C1C1C;transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),background .5s}
[data-lang-seg]:not([data-ready]) a[aria-current]{background:#1C1C1C}
[data-site-header][data-inv] [data-seg-ind],[data-site-header][data-inv] [data-lang-seg]:not([data-ready]) a[aria-current]{background:#fff}
[data-site-header][data-inv] [data-lang-seg] a[aria-current]{color:#1C1C1C}
@media (prefers-reduced-motion:reduce){[data-seg-ind]{transition:none}}

/* keyboard focus */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:2px}
[data-site-header] nav a{white-space:nowrap}

/* blog list on phones (grid falls to one column below ~643px): the "coming soon" tag sits
   under the title (number column = 17px + 14px gap); the closing CTA is centred like the
   landing page's mobile CTAs */
@media (max-width:643px){[data-blog-meta]{padding-left:31px}}
@media (max-width:640px){[data-blog-cta]{flex-direction:column;align-items:center !important;justify-content:center !important;text-align:center}[data-blog-cta] p{margin-left:auto !important;margin-right:auto !important}}

/* hero word / hero headline are split into letter spans for their entrance animation;
   the spans keep the parent's letter-spacing (the generic span rule would widen the word) */
#start [data-hero-word] span,#start h1 span{letter-spacing:inherit !important}

/* hero: "Helios" must sit at the same height in every language (no jump on language switch).
   The prototype centred it in whatever space the bottom row left over, and that row's height
   depends on text length. On desktop the row now gets a fixed, language-independent reserve
   (sized for the longest language) and is pinned to the bottom. */
@media (min-width:821px){
  [data-hero]{--hero-r:clamp(300px,12vw,340px)}
  [data-hero-stage]{flex:0 0 auto !important;height:max(clamp(200px,34vh,9999px),calc(100svh - 76px - clamp(16px,2.6vw,72px) - clamp(12px,2vh,32px) - var(--hero-r))) !important}
  [data-hero-row]{margin-top:auto}
}
@media (min-width:821px) and (max-height:720px){[data-hero]{--hero-r:240px}}
@media (min-width:1100px) and (max-height:720px){[data-hero]{--hero-r:160px}}
@media (max-width:820px){
  /* phones/tablets: same idea, reserve scales with width (taller stacked row on narrow screens) */
  [data-hero]{--hero-rm:clamp(252px,calc(520px - 35vw),390px)}
  [data-hero] [data-hero-stage]{flex:0 0 auto !important;height:max(46vh,calc(100svh - 72px - clamp(16px,2.6vw,72px) - clamp(12px,2vh,32px) - var(--hero-rm))) !important}
  [data-hero-row]{margin-top:auto}
}

/* "Das lässt sich ändern …" + arrow: centred on phones like the text around it */
@media (max-width:640px){p[data-fill][style*="display: flex"]{display:block !important;text-align:center}p[data-fill][style*="display: flex"] > a{display:inline-flex !important;vertical-align:middle;margin-left:6px}}

/* UK hero button text is longer: keep it on one line, the column widens only when needed */
[data-hero-br] [data-btn]{white-space:nowrap}
[data-hero-br]{min-width:min-content}

/* touch screens: bigger tap areas for small links without changing the layout
   (padding enlarges the hit area, the negative margin cancels it visually) */
@media (pointer:coarse){
  a[href="#check"][aria-label]{padding:12px;margin:-12px}
  [data-hero-br] [data-cta] > a:not([data-btn]){padding:12px 0;margin:-12px 0}
  #team a[href*="instagram"]{padding:13px 0;margin-top:7px !important;margin-bottom:-13px}
  [data-hdr-bar] > a:first-child{padding:5px 0}
  #kontakt [data-tab]{min-height:44px}
  footer a:not([data-btn]){padding:5px 0;margin:-5px 0}
}

/* phones: the generic "centre everything" rules of the prototype shrank the team rows to their
   text width and centred FAQ questions; keep these lists full-width and left-aligned */
@media (max-width:700px){[data-about-why] > div[style*="flex-direction: column"]{align-items:stretch !important}}
@media (max-width:640px){
  #fragen [data-faq] button{justify-content:space-between !important;text-align:left !important}
  #fragen [data-faq] p{text-align:left !important;margin-left:0 !important}
}
/* phones: form fields and the submit button use the full width of the form card */
@media (max-width:640px){#kontakt form{align-items:stretch !important}}

/* comparison table on narrow screens: soft shade at the right edge while there is more to scroll */
[data-scroll-hint]{position:relative;align-self:stretch;min-width:0}
[data-scroll-hint]::after{content:'';position:absolute;top:0;right:0;bottom:0;width:48px;border-radius:0 8px 8px 0;pointer-events:none;background:linear-gradient(to right,rgba(28,28,28,0),rgba(28,28,28,.12));opacity:0;transition:opacity .3s}
[data-scroll-hint][data-more]::after{opacity:1}

/* arriving via page/language switch: hero texts hidden until their entrance animation is set up */
html[data-nav-hero] [data-hero-row],html[data-nav-hero] [data-hero-word]{visibility:hidden}

/* muted grey on dark surfaces: lighter, so it keeps enough contrast (owner's decision, stage 4) */
[data-dark] [style*="color: rgb(112, 112, 112)"],[data-stack-card] [style*="color: rgb(112, 112, 112)"],footer [style*="color: rgb(112, 112, 112)"]{color:#8C8C8C !important}