/* ==========================================================================
   pulb.werbung — Rahmen: Kopfzeile, Burger, Menue-Overlay, Fusszeile, Cursor
   ========================================================================== */

/* ==========================================================================
   Kopfzeile
   Startet unsichtbar und wird am Ende der Intro-Choreografie eingeblendet.
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 2.1vw var(--gutter);
  color: var(--fg);
}

/* Weicher Schleier statt Mischmodus: bleibt auch ueber hellen Bildern und
   ueber weissem Text lesbar, ohne dass etwas invertiert aussieht. */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 -5vw 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(21, 21, 25, .78) 0%, rgba(21, 21, 25, .42) 46%, rgba(21, 21, 25, 0) 100%);
  pointer-events: none;
}

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

/* --- Burger --------------------------------------------------------------- */

.burger {
  display: flex;
  align-items: center;
  gap: 1.15vw;
  color: var(--fg);
}

.burger__lines {
  position: relative;
  display: block;
  width: 2.9vw;
  min-width: 34px;
  height: 8px;
}

.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease-out),
              background-color var(--t-fast) linear;
}

.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 7px; }

.burger:hover .burger__line:nth-child(1) { transform: scaleX(.55); }
.burger:hover .burger__line:nth-child(2) { transform: scaleX(1); }

.burger__label {
  font-size: clamp(.72rem, .78vw, .9rem);
  letter-spacing: .02em;
  color: currentColor;
}

/* --- Logo in der Kopfzeile ------------------------------------------------ */

/* Auf dem Startbildschirm bleibt die Kopfzeile leer — das grosse Logo steht
   dort schon in der Mitte. Erst ab dem Info-Bereich blendet die kleine
   Wortmarke oben ein (gesteuert in main.js). */
.header__logo {
  display: block;
  width: 5.4vw;
  min-width: 64px;
}

.header__logo svg { width: 100%; height: auto; color: var(--mark); }

/* --- Kontakt-Kurzlink rechts --------------------------------------------- */

.header__cta {
  position: relative;
  font-size: clamp(.72rem, .78vw, .9rem);
  color: var(--fg);
  white-space: nowrap;
}

.header__cta::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.35em;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-med) var(--ease-out);
}

.header__cta:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   Menue-Overlay
   Vollbild, Zeilen kommen gestaffelt von unten.
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 2.1vw var(--gutter) 3vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__logo { width: 6.4vw; min-width: 74px; }

.menu__close {
  position: relative;
  width: 2.6vw;
  min-width: 30px;
  height: 2.6vw;
  min-height: 30px;
  color: var(--fg);
}

.menu__close::before,
.menu__close::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: background-color var(--t-fast) linear;
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after  { transform: rotate(-45deg); }
.menu__close:hover::before,
.menu__close:hover::after { background: var(--accent); }

/* --- Navigationsliste ----------------------------------------------------- */

.menu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu__nav { margin-bottom: 4vw; }

.menu__item { overflow: hidden; }

.menu__link {
  position: relative;
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 9vw;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--mark);
  transition: color var(--t-med) var(--ease-out);
}

.menu__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: .14em;
  width: 100%; height: .045em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease-out);
}

.menu__link:hover { color: var(--fg); }
.menu__link:hover::after { transform: scaleX(1); }

/* Ziffer vor dem Menuepunkt */
.menu__index {
  font-family: var(--ff-text);
  font-size: .13em;
  letter-spacing: .12em;
  color: var(--muted);
  vertical-align: super;
  margin-right: .3em;
}

/* --- Kontaktzeile im Menue ------------------------------------------------ */

.menu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2.2vw;
  padding-top: 2vw;
  border-top: 1px solid var(--line);
}

.menu__meta a {
  position: relative;
  font-size: clamp(.85rem, .95vw, 1.05rem);
  color: var(--mark);
  transition: color var(--t-fast) var(--ease-out);
}

.menu__meta a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.28em;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-med) var(--ease-out);
}

.menu__meta a:hover { color: var(--fg); }
.menu__meta a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   Fusszeile
   ========================================================================== */

.footer {
  position: relative;
  padding: 6vw var(--gutter) 2vw;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* Riesige, fast unsichtbare Marke im Hintergrund — Detail der Referenz */
.footer__ghost {
  display: block;
  width: 100%;
  margin: 4vw 0 2vw;
  opacity: .05;
  pointer-events: none;
}

/* Breit und flach halten — sonst frisst die Marke die ganze Fusszeile. */
.footer__ghost svg {
  width: auto;
  height: 19vw;
  max-height: 260px;
  margin-inline: auto;
}

.footer__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2vw;
  flex-wrap: wrap;
  padding-top: 1.6vw;
  border-top: 1px solid var(--line);
}

.footer__legal {
  display: flex;
  gap: 1.8vw;
  flex-wrap: wrap;
}

.footer__legal a {
  position: relative;
  font-size: clamp(.72rem, .8vw, .92rem);
  color: var(--muted-2);
  transition: color var(--t-fast) var(--ease-out);
}

.footer__legal a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.3em;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-med) var(--ease-out);
}

.footer__legal a:hover { color: var(--fg); }
.footer__legal a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.footer__copy {
  font-size: clamp(.72rem, .8vw, .92rem);
  color: var(--muted);
}

/* ==========================================================================
   Cursor
   Zwei Ebenen: WebGL-Linse (Canvas) und ein schlanker Ring als Fuehrung.
   Beide nur auf Zeigergeraeten.
   ========================================================================== */

.lens {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}

.lens.is-active { opacity: 1; }

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity .35s var(--ease-out),
              width .4s var(--ease-out),
              height .4s var(--ease-out),
              margin .4s var(--ease-out),
              background-color .4s var(--ease-out);
}

.cursor-ring.is-visible { opacity: 1; }

.cursor-ring.is-hover {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  background: var(--accent-soft);
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--accent);
  border-radius: 50%;
  z-index: 401;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity .35s var(--ease-out);
}

.cursor-dot.is-visible { opacity: 1; }

/* Auf Touch-Geraeten und ohne feinen Zeiger komplett aus */
@media (hover: none), (pointer: coarse) {
  .lens, .cursor-ring, .cursor-dot { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lens { display: none !important; }
}

/* ==========================================================================
   Startzustaende der Choreografie

   Nur die Eigenschaften, die GSAP spaeter animiert — und ausschliesslich
   wenn JavaScript laeuft. Struktur und Masse stehen bewusst weiter oben in
   ungebundenen Regeln, damit die Anpassungen in responsive.css sie ueber-
   schreiben koennen: eine Media Query erhoeht die Spezifitaet nicht.
   ========================================================================== */

.js .header    { opacity: 0; transform: translateY(-1.2vw); pointer-events: none; }

/* Die kleine Wortmarke darf auf dem Startbildschirm zu keinem Zeitpunkt
   aufblitzen — auch nicht in dem Moment, in dem die Kopfzeile einblendet.
   Sichtbar wird sie erst durch den ScrollTrigger in main.js. */
.js .header__logo { opacity: 0; visibility: hidden; }
.js .menu__link { transform: translateY(105%); }
.js .menu__meta { opacity: 0; }

/* ==========================================================================
   Navigation ohne JavaScript
   Das Markup steht in einem <noscript>-Block und existiert deshalb nur,
   wenn JavaScript abgeschaltet ist. Dann ersetzt diese Leiste den Burger.
   ========================================================================== */

.nojs-nav {
  position: relative;
  z-index: 500;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.nojs-nav a {
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mark);
}

.nojs-nav a:hover { color: var(--accent); }

.no-js .burger { display: none; }

/* Ohne JavaScript laeuft die Kopfzeile im Textfluss mit, damit sie nicht
   ueber der Ersatz-Navigation liegt. */
.no-js .header { position: relative; }

/* ==========================================================================
   Farbebene im Hintergrund
   Drei weiche Cyan-Verlaeufe, die sich beim Scrollen langsam verschieben.
   Bewusst sehr zurueckgenommen: sie sollen Tiefe geben, nicht auffallen.
   ========================================================================== */

.bgfx {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bgfx__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.bgfx__blob--1 {
  width: 74vw; height: 74vw;
  top: -22vw; left: -18vw;
  background: radial-gradient(circle,
    rgba(0, 150, 206, .085) 0%, rgba(0, 150, 206, .028) 42%, rgba(0, 150, 206, 0) 66%);
}

.bgfx__blob--2 {
  width: 88vw; height: 88vw;
  top: 34vw; right: -34vw;
  background: radial-gradient(circle,
    rgba(0, 150, 206, .065) 0%, rgba(120, 126, 140, .03) 40%, rgba(0, 150, 206, 0) 64%);
}

.bgfx__blob--3 {
  width: 64vw; height: 64vw;
  bottom: -26vw; left: 24vw;
  background: radial-gradient(circle,
    rgba(0, 150, 206, .055) 0%, rgba(0, 150, 206, 0) 62%);
}

/* Inhalt liegt ueber der Farbebene */
main,
.footer { position: relative; z-index: 1; }

/* ==========================================================================
   Textanimationen
   Zeilen steigen hinter einer Maske auf, einzelne Woerter hellen beim
   Scrollen von Grau nach Weiss auf.
   ========================================================================== */

/* Etwas Luft nach unten, sonst kappt die Maske Unterlaengen wie das g. */
[data-lines] > span {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
[data-lines] > span > span { display: inline-block; }

.js [data-lines] > span > span { transform: translateY(105%); }

.js [data-words] .word {
  display: inline-block;
  opacity: .24;
  will-change: opacity;
}