/* ============================================================
   cuecom — global.css  (reset, base, layout, nav, footer)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden): clips horizontal overflow from the hero
   animations WITHOUT turning html/body into a scroll container — the latter
   silently breaks the sticky header (it would scroll away instead of sticking). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}
/* anchor targets (e.g. #kontaktformular, #event) clear the sticky header
   when opened via a direct link like kontakt.html#kontaktformular */
:target{scroll-margin-top:calc(var(--header-h) + var(--sp-4))}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-snug);
  text-wrap:balance;
}
h1{font-size:var(--fs-hero);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-4xl);letter-spacing:var(--ls-tight)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-md)}
p{max-width:68ch}

::selection{background:var(--c-brand);color:var(--c-text-inv)}

:focus-visible{outline:2px solid var(--c-brand-3);outline-offset:3px}

/* ---- Dark islands: re-scope the token system ----
   Any component inside these containers automatically adapts. */
.xhero,.bg-deep,footer,#cookie-banner,.cookie-modal__panel,.toast{
  --c-text:var(--c-ondark);
  --c-text-2:var(--c-ondark-2);
  --c-text-3:var(--c-ondark-3);
  /* apply the light text color, not just re-map the tokens — otherwise
     headings/copy without an explicit color inherit the dark body color
     and render dark-on-dark (fixes contrast in all dark islands). */
  color:var(--c-text);
  --c-border:rgba(255,255,255,.10);
  --c-border-2:rgba(255,255,255,.20);
  --c-surface:#23272E;
  --c-bg-2:#2A2F37;
  --c-bg-3:#343A44;
  --c-accent:#A7A49D;
  /* brighter orange for labels/links on dark — improves legibility (AA) */
  --c-emph:var(--c-brand-2);
}

/* Index only: the header floats fixed over the hero, but stays fully
   hidden while the immersive hero is on screen — the video/animation
   gets the whole viewport with no nav bar on top. It reveals softly
   (opacity + slide + backdrop-blur) only once the user scrolls past the
   hero stage (main.js toggles .header-revealed via [data-hero-section]).
   While the expansion scroll runs (body.hero-animating) it stays hidden. */
body.has-dark-hero #site-header{
  position:fixed;top:0;left:0;right:0;
  background:rgba(250,248,243,.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom-color:var(--c-border);
  opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:opacity var(--t-base),transform var(--t-slow) var(--ease-out),
             background var(--t-base),border-color var(--t-base);
}
body.has-dark-hero #site-header.header-revealed{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
/* never let it flash in during the expansion hijack */
body.has-dark-hero.hero-animating #site-header{
  opacity:0;transform:translateY(-100%);pointer-events:none;
}

/* ---- Skip link ---- */
.skip-link{
  position:fixed;top:-100px;left:var(--sp-4);z-index:1000;
  background:var(--c-brand);color:var(--c-text-inv);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
  font-weight:var(--fw-semibold);transition:top var(--t-fast);
}
.skip-link:focus{top:var(--sp-4)}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-gap)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

/* section background rhythm */
.bg-base{background:var(--c-bg)}
.bg-raise{background:var(--c-bg-2)}
.bg-deep{background:var(--c-dark)}
.bg-paper{background:var(--c-light);color:var(--c-text-dark)}
.bg-paper h2,.bg-paper h3{color:var(--c-text-dark)}
.bg-paper p{color:var(--c-text-dark-2)}
.bg-brand{background:var(--c-brand);color:var(--c-text-inv)}

/* ---- Section label ---- */
.label{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--c-emph);margin-bottom:var(--sp-5);
}
.label::before{content:'';width:24px;height:1.5px;background:var(--c-emph);flex-shrink:0}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#site-header{
  position:sticky;top:0;z-index:100;
  transition:transform var(--t-base),background var(--t-base),border-color var(--t-base);
  background:transparent;
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background:rgba(250,248,243,.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom-color:var(--c-border);
}
#site-header.nav-hidden{transform:translateY(-100%)}

.nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:var(--sp-6);
}

/* wordmark: recreated from the cuecom logo (cue ▪ com) */
.brand-mark{
  display:inline-flex;align-items:baseline;gap:.14em;
  font-family:var(--font-display);
  font-size:1.55rem;font-weight:var(--fw-xbold);
  letter-spacing:-0.045em;line-height:1;
}
.brand-mark .cue{color:var(--c-text)}
.brand-mark .dot{
  width:.5em;height:.5em;border-radius:.14em;
  background:var(--c-brand);align-self:center;flex-shrink:0;
}
.brand-mark .com{color:var(--c-accent)}
.brand-sub{
  display:block;font-family:var(--font-display);
  font-size:.56rem;font-weight:var(--fw-medium);
  letter-spacing:.34em;text-transform:lowercase;
  color:var(--c-text-3);margin-top:.28em;
}
.bg-paper .brand-mark .cue{color:var(--c-text-dark)}

.nav-links{display:none;align-items:center;gap:var(--sp-8)}
.nav-links a{
  position:relative;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--c-text-2);padding-block:var(--sp-2);
  transition:color var(--t-fast);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--c-brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base);
}
.nav-links a:hover{color:var(--c-text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--c-text)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-actions{display:flex;align-items:center;gap:var(--sp-4)}
.lang-switch{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide);color:var(--c-text-3);
}
.lang-switch a{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);transition:color var(--t-fast),background var(--t-fast)}
.lang-switch a:hover{color:var(--c-text)}
.lang-switch a[aria-current="true"]{color:var(--c-emph);background:var(--c-brand-soft)}
.nav-cta{display:none}

/* Hamburger */
.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;z-index:210;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:var(--c-text);
  border-radius:2px;transition:transform var(--t-base),opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile overlay */
.nav-overlay{
  position:fixed;inset:0;z-index:200;background:var(--c-bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gutter);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--t-base),visibility 0s var(--t-base);
}
.nav-overlay.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity var(--t-base)}
.nav-overlay ul{display:flex;flex-direction:column;gap:var(--sp-5)}
.nav-overlay a{
  font-family:var(--font-display);font-size:var(--fs-3xl);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
  color:var(--c-text-2);transition:color var(--t-fast);
}
.nav-overlay a:hover,.nav-overlay a[aria-current="page"]{color:var(--c-emph)}
.nav-overlay .overlay-meta{
  margin-top:var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--c-text-3);
}
.nav-overlay .overlay-meta a{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);letter-spacing:0}

@media(min-width:1024px){
  .nav-links{display:flex}
  .nav-toggle{display:none}
  .nav-cta{display:inline-flex}
}

/* ============================================================
   FOOTER — 3 columns with distinct visual weight
   ============================================================ */
footer{background:var(--c-dark);border-top:1px solid var(--c-border)}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-12);
  padding-block:var(--sp-20) var(--sp-12);
}
.footer-brand .brand-mark{font-size:1.9rem}
.footer-brand p{
  margin-top:var(--sp-5);color:var(--c-text-2);
  font-size:var(--fs-md);max-width:34ch;
}
.footer-brand a.footer-mail{
  display:inline-block;margin-top:var(--sp-5);
  font-family:var(--font-display);font-size:var(--fs-lg);
  font-weight:var(--fw-semibold);color:var(--c-brand);
  transition:color var(--t-fast);
}
.footer-brand a.footer-mail:hover{color:var(--c-brand-2)}
.footer-col h4{
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--c-text-3);margin-bottom:var(--sp-5);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-col a{font-size:var(--fs-sm);color:var(--c-text-2);transition:color var(--t-fast)}
.footer-col a:hover{color:var(--c-brand)}
.footer-col--legal a{font-size:var(--fs-xs);color:var(--c-text-3)}
.footer-col--legal address{
  font-style:normal;font-size:var(--fs-xs);color:var(--c-text-3);
  line-height:var(--lh-relaxed);margin-bottom:var(--sp-4);
}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--c-border);
  padding-block:var(--sp-6);
  font-size:var(--fs-xs);color:var(--c-text-3);
}
.footer-bottom .legal-links{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.footer-bottom a{transition:color var(--t-fast)}
.footer-bottom a:hover{color:var(--c-text)}

@media(min-width:768px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
}

/* ---- Print ---- */
@media print{
  #site-header,footer,.btn,#cookie-banner,.nav-overlay{display:none!important}
  body{font-size:12pt;color:#000;background:#fff}
}