/* ════════════════════════════════════════════════════════
   buero ®S — shared styles (alle Seiten)
   Seitenspezifisches CSS steht inline im jeweiligen <style>-Block
   der einzelnen Seite (Teaser, About-Bio, Impressum, Hero-Bild).
   ════════════════════════════════════════════════════════ */

/* Design-System-Regel: FETT WIRD NIE PER font-weight/CSS-Bold ERZEUGT.
   PolySans-Bulky (--font, Datei oben) ist selbst der fette Schriftschnitt
   und wird als eigene font-family unter 'normal' weight eingebunden – daher
   für JEDEN Text, der optisch fett wirken soll: font-family: var(--font)
   (statt var(--font-text) + font-weight: bold/700). Grund: synthetisches
   Fett (Faux-Bold) verzerrt die Buchstabenformen und sieht auf PolySans
   sichtbar schlechter aus als der echte Bulky-Schnitt. Deshalb steht bei
   jeder Verwendung von var(--font) zusätzlich font-weight: normal UND
   font-synthesis: none, um zu verhindern, dass der Browser trotzdem
   versucht, künstlich fett zu rendern. Gilt sitewide, keine Ausnahmen –
   siehe z. B. .doc-layout .col-lead strong, .teaser__title, .circle-btn. */
/* Schriftformate: WOFF2 zuerst, WOFF als Rückfallebene.
   Die Reihenfolge in src ist entscheidend – der Browser nimmt das ERSTE
   Format, das er beherrschen kann, und lädt die übrigen gar nicht erst
   herunter. WOFF2 unterstützt jeder relevante Browser (Safari ab 10,
   Chrome ab 36, Firefox ab 39); die WOFF-Zeile greift damit praktisch nur
   noch für sehr alte Umgebungen und kostet dort nichts extra. */
@font-face {
  font-family: 'PolySans';
  src: url('/assets/fonts/PolySans-Bulky.woff2') format('woff2'),
       url('/assets/fonts/PolySans-Bulky.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: 'PolySans-Neutral';
  src: url('/assets/fonts/PolySans-Neutral.woff2') format('woff2'),
       url('/assets/fonts/PolySans-Neutral.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  touch-action: manipulation;
}

/* ── Fokus-Stile: eigener, markentypischer Ring statt Browser-Standard ──
   :focus-visible greift nur bei Tastatur-/Switch-Navigation, nicht bei
   Maus-/Touch-Klicks – kein visuelles Rauschen für die meisten Besucher,
   klare Orientierung für alle, die per Tastatur navigieren. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Skip-Link ──
   Erstes fokussierbares Element im Dokument: erlaubt Tastatur-Nutzer:innen,
   Hero und Mini-Header zu überspringen und direkt zum Content zu springen.
   Visuell verborgen, bis sie per Tab fokussiert wird – dann faded sie sichtbar ein. */
.skip-link {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 100;
  padding: var(--space-12) var(--space-16);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: var(--body-md);
  text-decoration: none;
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-header);
  transform: translateY(-150%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

:root {
  /* ════════════════════════════════════════════════════════
     DESIGN TOKENS
     Single source of truth für Farben, Typografie, Abstände,
     Motion & Form. Werte fluid via clamp() (Viewport 390–1280px
     für Content, 390–1920px für Hero/Display).
     ════════════════════════════════════════════════════════ */

  /* ════════ FARB-PRIMITIVE · Palette nach Figma ════════ */
  /* ── Neutrale ── */
  /* ®S Black */
  --black-100: #101010;
  --black-ultra: #000000;
  /* ®S Grey */
  --grey-80: #404040;
  --grey-64: #666666;
  --grey-48: #8C8C8C;
  --grey-32: #B3B3B3;
  --grey-16: #D9D9D9;
  --grey-8: #ECECEC;
  --grey-4: #F8F8F8;
  /* ®S White */
  --white-100: #F8F8F8;
  --white-ultra: #FFFFFF;

  /* ── Hues ── */
  /* ®S Red */
  --red-100: #F8282D;
  --red-80: #FF5256;
  --red-64: #FF7478;
  --red-48: #FF9799;
  --red-32: #FFB9BB;
  --red-16: #FFDDDD;
  --red-8: #FFEEEE;
  /* ®S Rose */
  --rose-100: #FF90BC;
  --rose-80: #FFA6C9;
  --rose-64: #FFB8D4;
  --rose-48: #FFCADF;
  --rose-32: #FFDBEA;
  --rose-16: #FFEDF4;
  --rose-8: #FFF6FA;
  /* ®S Fuchsia */
  --fuchsia-100: #E80084;
  --fuchsia-80: #ED339D;
  --fuchsia-64: #F05CB0;
  --fuchsia-48: #F485C4;
  --fuchsia-32: #F8ADD8;
  --fuchsia-16: #FBD6EB;
  --fuchsia-8: #FDEBF5;
  /* ®S Purple */
  --purple-100: #6C3CDC;
  --purple-80: #8054D6;
  --purple-64: #9E76DE;
  --purple-48: #BD98E7;
  --purple-32: #D3BBEF;
  --purple-16: #E9DDF7;
  --purple-8: #F4EEFB;
  /* ®S Night Blue */
  --night-blue-100: #38297C;
  --night-blue-80: #62529C;
  --night-blue-64: #8275B0;
  --night-blue-48: #A197C3;
  --night-blue-32: #C0BAD7;
  --night-blue-16: #E0DCEB;
  --night-blue-8: #EFEEF5;
  /* ®S Blue */
  --blue-100: #0078D0;
  --blue-80: #2F94DD;
  --blue-64: #59A9E4;
  --blue-48: #82BEEB;
  --blue-32: #ACD4F1;
  --blue-16: #D5E9F8;
  --blue-8: #EAF4FC;
  /* ®S Turquoise */
  --turquoise-100: #00B2A6;
  --turquoise-80: #33C1B8;
  --turquoise-64: #5CCEC6;
  --turquoise-48: #85DAD4;
  --turquoise-32: #ADE6E3;
  --turquoise-16: #D6F3F1;
  --turquoise-8: #EBF9F8;
  /* ®S Green */
  --green-100: #00A048;
  --green-80: #33B873;
  --green-64: #5CC68F;
  --green-48: #85D4AB;
  --green-32: #ADE3C7;
  --green-16: #D6F1E3;
  --green-8: #EBF8F1;
  /* ®S Light Green */
  --light-green-100: #96C21F;
  --light-green-80: #ABCE4C;
  --light-green-64: #BCD870;
  --light-green-48: #CDE293;
  --light-green-32: #DDEBB7;
  --light-green-16: #EEF5DB;
  --light-green-8: #F7FAED;
  /* ®S Yellow */
  --yellow-100: #FFAC00;
  --yellow-80: #FFBD33;
  --yellow-64: #FFCA5C;
  --yellow-48: #FFD785;
  --yellow-32: #FFE4AD;
  --yellow-16: #FFF2D6;
  --yellow-8: #FFF8EB;
  /* ®S Orange */
  --orange-100: #FF7214;
  --orange-80: #FF8E43;
  --orange-64: #FFA569;
  --orange-48: #FFBB8E;
  --orange-32: #FFD2B4;
  --orange-16: #FFE8D9;
  --orange-8: #FFF4EC;

  /* ── Semantische Tokens (Verweise auf die Palette) ── */
  --color-ink:        var(--black-100);  /* primärer Text / dunkle UI  (#111 → #101010) */
  --color-ink-2:      var(--grey-80);    /* sekundärer Text            (#333 → #404040) */
  --color-paper:      var(--white-ultra);/* Weiß / Content-Hintergrund (#fff) */
  --white: var(--color-paper);           /* Alias (Abwärtskompatibilität) */

  /* ── Schrift ──
     --font (Bulky) = fetter Schnitt, --font-text (Neutral) = Fließtext.
     Bold-Wirkung IMMER über --font erzeugen, NIE über font-weight/CSS-Bold
     auf --font-text – Regel + Begründung siehe @font-face oben im Dokument. */
  --font:      'PolySans', sans-serif;                                                   /* Display / UI  */
  --font-text: 'PolySans-Neutral', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; /* Fließtext */

  /* ── Typografie · fluide Skala nach Figma ──
     Untergrenze = Figma-Spalte „1+" (gilt ab ~390px abwärts),
     Obergrenze = Figma-Spalte „1280+", erreicht erst bei 1920px.
     Bei 1280px liegen die Größen daher bewusst unter dem Maximum. */
  --body-sm:     16px;                                                           /*  16 · konstant       */
  --body-md:     clamp(18px, calc(18px + 2  * ((100vw - 390px) / 1530)), 20px);  /*  18 → 20 · Fließtext */
  --body-lg:     clamp(20px, calc(20px + 4  * ((100vw - 390px) / 1530)), 24px);  /*  20 → 24             */
  /* ── TEST (mobile Untergrenzen angehoben) ──────────────────────────────
     Nur die Startwerte der drei headline-Stufen wurden erhöht, die
     Maximalwerte bleiben unverändert. Wichtig dabei: Der mittlere Faktor
     ist die DIFFERENZ (Max − Min), nicht der Endwert – er muss also
     mitgezogen werden, sonst verschiebt sich das Maximum.

     ZUM ZURÜCKSETZEN einfach die drei aktiven Zeilen durch die drei
     auskommentierten darunter ersetzen:
       --headline-sm: clamp(22px, calc(22px + 10 * ((100vw - 390px) / 1530)), 32px);
       --headline-md: clamp(24px, calc(24px + 16 * ((100vw - 390px) / 1530)), 40px);
       --headline-lg: clamp(28px, calc(28px + 20 * ((100vw - 390px) / 1530)), 48px);

     Hinweis: Sichtbar wird davon derzeit nur --headline-sm (Menü, Tagline,
     Teaser-Titel, doc-layout h2, Akkordeon, Laufband). --headline-md und
     --headline-lg werden auf der Website aktuell nirgends verwendet. */
  --headline-sm: clamp(24px, calc(24px + 8  * ((100vw - 390px) / 1530)), 32px);  /*  TEST: 24 → 32  (vorher 22 → 32) */
  --headline-md: clamp(28px, calc(28px + 12 * ((100vw - 390px) / 1530)), 40px);  /*  TEST: 28 → 40  (vorher 24 → 40) */
  --headline-lg: clamp(32px, calc(32px + 16 * ((100vw - 390px) / 1530)), 48px);  /*  TEST: 32 → 48  (vorher 28 → 48) */
  --display-sm:  clamp(32px, calc(32px + 32 * ((100vw - 390px) / 1530)), 64px);  /*  32 → 64             */
  --display-md:  clamp(36px, calc(36px + 44 * ((100vw - 390px) / 1530)), 80px);  /*  36 → 80             */
  --display-lg:  clamp(40px, calc(40px + 56 * ((100vw - 390px) / 1530)), 96px);  /*  40 → 96             */
  --ultra-sm:    clamp(56px, calc(56px + 72 * ((100vw - 390px) / 1530)), 128px); /*  56 → 128 · Logo     */
  --ultra-lg:    clamp(72px, calc(72px + 88 * ((100vw - 390px) / 1530)), 160px); /*  72 → 160            */

  /* ── Abstände · Skala nach Figma ──
     4–16 fest, ab 24 fluid (Min = „1+", Max = „1280+" bei 1920px).
     Token-Name = der „1280+"-Wert.                                */
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-24:   clamp(20px, calc(20px + 4   * ((100vw - 390px) / 1530)), 24px);  /*  20 → 24  */
  --space-32:   clamp(24px, calc(24px + 8   * ((100vw - 390px) / 1530)), 32px);  /*  24 → 32  */
  --space-48:   clamp(32px, calc(32px + 16  * ((100vw - 390px) / 1530)), 48px);  /*  32 → 48  */
  --space-64:   clamp(40px, calc(40px + 24  * ((100vw - 390px) / 1530)), 64px);  /*  40 → 64  */
  --space-96:   clamp(48px, calc(48px + 48  * ((100vw - 390px) / 1530)), 96px);  /*  48 → 96  */
  --space-128:  clamp(64px, calc(64px + 64  * ((100vw - 390px) / 1530)), 128px); /*  64 → 128 */
  --space-160:  clamp(80px, calc(80px + 80  * ((100vw - 390px) / 1530)), 160px); /*  80 → 160 */
  --space-224:  clamp(96px, calc(96px + 128 * ((100vw - 390px) / 1530)), 224px); /*  96 → 224 */

  /* ── Layout-Insets (außerhalb der Figma-Skala) ── */
  --space-inset:  clamp(16px, calc(16px + 16 * ((100vw - 390px) / 1530)), 32px); /* 16→32 · Viewport oben/unten */
  --space-edge:   clamp(16px, calc(16px + 48 * ((100vw - 390px) / 1530)), 64px); /* 16→64 · Seitenrand          */

  /* ── Mini-Header-Metriken (global, damit auch der Hero-Spacer rechnen kann) ── */
  --h-item: clamp(40px, calc(40px + 4 * ((100vw - 390px) / 1530)), 44px); /* Logo/Button: 40→44 */
  --h-pad:  clamp(16px, calc(16px + 4 * ((100vw - 390px) / 1530)), 20px); /* Innenabstand: 16→20 */

  /* ── Grid-Gutter · Spaltenabstand für Content-Grid & Teaser · fluid 16 → 48px (390→1920px) ── */
  --grid-gutter: clamp(16px, calc(16px + 32 * ((100vw - 390px) / 1530)), 48px);

  /* ── Layout ── */
  --content-max: 640px;   /* max. Lesebreite im Content/Panel */

  /* ── Form / Radius ── */
  --radius-round:  50%;    /* runde Icons & Buttons */
  --radius-header: clamp(36px, calc(36px + 8 * ((100vw - 390px) / 1530)), 44px); /* Mini-Header: 36→44 */
  --radius-media:  16px;   /* Teaser-Bilder */
  --radius-sm:     8px;    /* Test: dezente Rundung Bilder/Tags */

  /* ── Schatten ── */
  --shadow-header: 0 8px 32px rgba(0, 0, 0, 0.08);  /* x0 y8 blur32 · #000 @ 8% */

  /* ── Motion ── */
  --dur-slide:  0.5s;                          /* Icon-Slide (Pfeil, x)        */
  --ease-slide: cubic-bezier(0.65, 0, 0.35, 1);/* sanftes Ein/Aus              */
  --dur-panel:  0.5s;                          /* Mini-Header / Teaser-Hover   */
  --ease-panel: cubic-bezier(0.2, 0, 0, 1);    /* dezel. Ausklang              */
  --dur-fade:   0.8s;                          /* Hintergrund-Crossfade        */

  /* Wort-Karussell: asymmetrische, SEQUENZIELLE Bewegung statt symmetrischem
     Ein/Aus – das alte Wort fährt vollständig raus (beschleunigend, aus der
     Ruhe heraus), erst danach kommt das neue rein (abbremsend, fast bis zum
     Stillstand). Kein Überlappen der beiden Wörter. Test – siehe [[project_buero-rs_animations]]. */
  /* Standard-Version (Referenz für Rückgriff – aktuell aktiv):
     --dur-word-out: 0.55s; --dur-word-in: 0.7s; Hold 1000ms; Zyklus 2.25s
     --ease-word-in:  cubic-bezier(0.08, 0.82, 0.17, 1);
     --ease-word-out: cubic-bezier(0.86, 0, 1, 0.18);

     Slow-Version (Referenz für Rückgriff):
     --dur-word-out: 1.2s; --dur-word-in: 1.6s; Hold 0ms; Zyklus 2.8s
     --ease-word-in:  cubic-bezier(0.25, 0.85, 0.35, 1);
     --ease-word-out: cubic-bezier(0.65, 0, 0.75, 0.15); */
  --dur-word-out: 0.55s;
  --dur-word-in:  0.7s;
  --ease-word-in:  cubic-bezier(0.08, 0.82, 0.17, 1);
  --ease-word-out: cubic-bezier(0.86, 0, 1, 0.18);
}

html, body {
  width: 100%;
}

/* Horizontalen Überlauf verhindern – bewusst auf HTML, nicht auf BODY.

   Vorher stand "overflow-x: hidden" auf body. Nach CSS-Spezifikation
   propagiert Overflow nur vom ROOT-Element (html) auf den Viewport; steht es
   dagegen auf body (während html "visible" ist), wird BODY selbst zu einem
   eigenen Scroll-Container – der Browser setzt dann zwangsweise auch
   overflow-y auf "auto". Gemessen war exakt das der Fall: body_overflowY
   "auto", body_clientHeight = volle Inhaltshöhe (2516px), und
   window.scrollTo(0, 99999) erreichte statt 1852px nur 96px – die Seite
   scrollte also nicht im Dokument, sondern in einem verschachtelten
   zweiten Scroller.

   Zwei ineinander liegende Scroll-Container zusammen mit einem
   position:fixed-Hero sind auf iOS/iPadOS Safari eine bekannte Ursache für
   genau die gemeldeten Symptome (Flackern, Weißblitz, Zurückspringen beim
   Scroll-Richtungswechsel): Momentum-Scrolling, Scroll-Wiederherstellung
   und die Neuberechnung fixierter Ebenen greifen dabei auf verschiedene
   Scroller zu. Nebeneffekt war außerdem, dass window.scrollY/scrollTo
   praktisch wirkungslos waren (betrifft die Logo-/„work"-Scroll-Animationen).

   "clip" statt "hidden": clip verhindert den Überlauf ebenfalls, erzeugt
   aber grundsätzlich KEINEN Scroll-Container – dadurch bleibt auch
   position:sticky (.mini-header-anchor) unangetastet. "hidden" davor als
   Fallback für Browser ohne clip-Unterstützung. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  /* Browser-eigene "Scroll Anchoring"-Heuristik (hält beim Hochscrollen
     automatisch ein Element in Position, falls sich Inhalte darüber in
     der Größe ändern) explizit aus. Bei diesem Layout (fixierter .hero +
     darüber scrollender .content mit position:sticky Mini-Header) ist
     dafür kein Anwendungsfall vorgesehen – Verdacht: genau diese Heuristik
     verursacht den gemeldeten Sprung zurück zu einem Teaser beim
     Hochscrollen auf iOS/iPadOS Safari, da der Browser einen falschen
     Anker wählt. Layout/Scroll-Position hier bewusst vollständig
     eigenständig (kein dynamisches Nachladen o. ä.), daher unbedenklich
     abzuschalten. */
  overflow-anchor: none;
}

/* Text-Selektionsfarbe: kein Hervorhebungs-Kasten (transparenter Hintergrund),
   stattdessen färbt sich nur die Textfarbe selbst beim Markieren ein – site.js
   wählt --selection-fg pro Seitenaufruf zufällig aus der Uhr-Akzentpalette. */
:root {
  --selection-bg: transparent;
  --selection-fg: var(--rose-100);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(100lvh + 2px); /* GRÖSSTE (stabile) Viewport-Höhe + 2px Overscan.
     Vorher 100dvh (DYNAMISCH): das ändert sich live, während Safari beim
     Scrollen die Adressleiste ein-/ausblendet – ein fixiertes Element, das
     sich exakt während des Scrollens ständig selbst in der Höhe ändert, ist
     ein naheliegender Kandidat für Flacker-/Sprung-Artefakte. .hero-spacer
     daneben nutzt schon bewusst 100svh (stabil, s. dortiger Kommentar) –
     .hero selbst war nie mit auf "stabil" umgestellt worden. lvh ist die
     größte mögliche Höhe (Adressleiste ausgeblendet) und ändert sich nie
     während des Scrollens – deckt dadurch immer mindestens so viel wie
     dvh ab (keine weiße Naht), ohne die Live-Neuberechnung. */
  overflow: hidden;
  z-index: 1;
  background-color: var(--color-ink);
  /* Eigene, stabile Compositing-Ebene erzwingen (3D-Layer-Trick) – gegen
     ein bekanntes iOS/iPadOS-Safari-Rendering-Problem: fixierte Elemente
     können beim schnellen Scroll-Richtungswechsel (v. a. runter → hoch)
     kurz falsch/verzögert neu zusammengesetzt werden, wodurch Inhalte
     DARÜBER (hier: .content mit den Teasern) sichtbar flackern, kurz
     verschwinden oder springen – trotz korrekt gesetztem z-index. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* ── Farbbalken-Uhr: drei Spalten füllen die Stage ── */
.time-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
}
.time-col {
  position: relative;
  height: 100%;
  overflow: hidden;
  min-width: 0;
  margin-right: -1px; /* Sub-Pixel-Gap-Fix: Spalten überlappen um 1px */
}
.time-col:last-child {
  margin-right: 0;
}
/* Spaltenbreiten via Flex: Sekunden responsiv 15% (360px) → 12% (1920px), fluide.
   Stunden und Minuten teilen die Restfläche im Verhältnis 64:36. */
.time-col--hours   { flex: 64 1 0;                                      background: var(--turquoise-100); }
.time-col--seconds { flex: 0 0 clamp(12%, calc(17.7px + 11.1vw), 16%); background: var(--yellow-100); }
.time-col--minutes { flex: 36 1 0;                                      background: var(--rose-100); }

.time-col__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: height 1s linear;
}
/* hero--picture Sekunden-Abbau: Anker oben, Balken schrumpft von unten nach oben */
.time-col__fill--recede {
  bottom: auto;
  top: 0;
}
.time-col--hours   .time-col__fill { background: var(--night-blue-100); }
.time-col--seconds .time-col__fill { background: var(--red-100); }
.time-col--minutes .time-col__fill { background: var(--green-100); }

/* Nicht-locked Hero-Stage (Startseite + hero--compact-Seiten wie Imprint/
   Privacy/404/diverse Shop-Detailseiten): reine Farbflächen, keine Fotos –
   Füllstand hier bewusst per transform:scaleY() statt height. scaleY() ist
   ein reiner Compositor-Vorgang (kein Layout-Trigger), kollidiert dadurch
   nicht mehr mit dem Scroll-Rendering – Fix für das iOS/iPadOS-Safari-
   Flackern OHNE die Landeanimation zu kürzen oder bei Scroll abzubrechen
   (beides ausdrücklich nicht gewünscht). Nur die ECHTE Hero-Stage
   (.hero .time-col__fill) – NICHT das kleine "Create your own poster"-
   Preview-Widget im Shop (.poster-preview .time-col__fill, eigene ID/JS,
   nutzt bewusst weiter height): das ist ein kleiner Kartenausschnitt statt
   Full-Bleed-Fixed-Element, kein Scroll-Kollisionsrisiko, und läuft auf
   shop/TA-Personal sogar auf einer hero--compact-Seite mit. hero--picture-
   Seiten (Bild-Füllungen, background-size:cover) bleiben ohnehin beim
   height-Ansatz, da scaleY() die Fotos verzerren würde – hier greift diese
   Regel wegen :not(.hero--picture) am body gar nicht erst. */
body:not(.hero--picture) .hero .time-col__fill {
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s linear;
}

/* Transparenter Abstandshalter (zeigt den fixierten Hero). Die HÖHE ist
   SEITENSPEZIFISCH und steht im inline <style> der jeweiligen Seite:
   100vh auf Startseite & About (voller Hero), 34vh-Streifen auf den
   kürzeren Seiten (Imprint, Privacy, Services, Shop). */

/* ── Scroll-Content: steigt beim Scrollen über den fixierten Hero ── */
.content {
  position: relative;
  z-index: 2;
  /* Eigene isolierte Stacking-Ebene (gegen das iOS/iPadOS-Safari-Flacker-
     Problem beim Scroll-Richtungswechsel) – OHNE transform/translateZ:
     das hatte hier zusätzlich einen neuen Containing Block erzeugt, in dem
     .mini-header-anchor (position: sticky, direkter Nachfahre) auf
     WebKit nachweislich falsch berechnet wird – Verdacht auf den
     gemeldeten Sprung beim Hochscrollen zurück zu einem Teaser. isolation
     allein reicht für die Stacking-Absicherung, erzeugt aber KEINEN neuen
     Containing Block und beeinflusst sticky-Positionierung nicht. */
  isolation: isolate;
  background: var(--white);
  /* Dunkler Haarstrich an der Unterkante (nur Safari, je nach Viewport-Breite):
     .content ist über isolation:isolate eine eigene Compositing-Ebene. Fällt
     deren Unterkante auf einen Bruchteil-Pixel – was bei fluiden Abständen
     ständig passiert –, mischt WebKit die Randzeile beim Zusammensetzen gegen
     transparentes SCHWARZ (Premultiplied-Alpha-Artefakt) statt gegen den
     dahinterliegenden Hero. Ergebnis: eine ~1px dunkle Linie genau dort, wo
     der weiße Content endet und die Stage wieder sichtbar wird.

     Gegenmittel: den weißen Grund per box-shadow um 1px nach unten
     verlängern. box-shadow malt nur, beeinflusst das Layout nicht (die
     64px-Reveal-Höhe bleibt unverändert) und deckt die Saumzeile ab. Da
     direkt darüber ohnehin weißer Content steht, ist die Verlängerung
     unsichtbar. Kein transform/translateZ hier – das hatte an dieser Stelle
     schon einmal die sticky-Positionierung des Mini-Headers gebrochen. */
  box-shadow: 0 1px 0 0 var(--white);
  min-height: 100vh;
  min-height: 100dvh;
  /* Seitenrand exakt wie auf der Stage (Logo/Tagline nutzen denselben --space-edge) */
  padding-left:  max(var(--space-edge), env(safe-area-inset-left) + 12px);
  padding-right: max(var(--space-edge), env(safe-area-inset-right) + 12px);
}

/* ══════════════════════════════════════════
   CONTENT-GRID · gemeinsames Content-Spalten-Grid (Design System)
   ══════════════════════════════════════════
   Eine zentrale Quelle für das dreispaltige Content-Layout aller Seiten.
   Spaltenzahl responsiv: 1 (<800px) · 2 (≥800px) · 3 (≥1280px).
   column-gap kommt aus dem Grid-Token --grid-gutter (fluid 16 → 48px) – das ist
   damit die EINZIGE Quelle für den horizontalen Spaltenabstand. row-gap
   (vertikales Stapeln auf Mobil) bleibt bewusst großzügig über --space-64.

   Varianten lassen sich als Modifier ergänzen, ohne die Basis anzufassen, z. B.:
     .content-grid--2   { grid-template-columns: repeat(2, 1fr); }
     .content-grid--asym{ grid-template-columns: 2fr 1fr; }
     .content-grid--4up { zusätzliche 4. Spalten-Stufe ab 1600px, siehe unten }
   Seitenspezifische Typografie (Titel, Fließtext, Buttons) bleibt pro Seite. */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--space-128);
  text-align: left;
  margin-bottom: var(--space-128);
}
.content-grid__col { min-width: 0; }
/* Platzhalter-Spalte: erst ab der 3-Spalten-Stufe sichtbar (hält die Flucht) */
.content-grid__col--empty { display: none; }

@media (min-width: 800px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .content-grid { grid-template-columns: repeat(3, 1fr); }
  .content-grid__col--empty { display: block; }
  /* [hidden] ist eine User-Agent-Regel (schwächste Herkunftsstufe) – Autoren-
     CSS gewinnt IMMER dagegen, unabhängig von der Spezifität. Ohne diese
     Regel würde eine per hidden ausgeblendete Platzhalter-Spalte hier
     trotzdem wieder als Block auftauchen. */
  .content-grid__col--empty[hidden] { display: none; }
}

/* Modifier: zusätzliche 4. Spalten-Stufe ab 1600px (breiter Desktop) –
   bewusst eine eigene Klasse statt Teil der Basis-Progression 1→2→3, damit
   die reine 3-Spalten-Variante als Alternative im Design System erhalten
   bleibt (z. B. für die Shop-Produktseiten mit ihrem festen 2-Spalten-
   Bild/Text-Layout + Spacer, wo eine 4. Spalte die Proportionen verzerren
   würde). Angewendet auf: Startseite (eigene JS-Masonry, siehe dort),
   Shop-Übersicht, About, Imprint, Privacy, Projektseiten (work/eikon,
   work/_template). .content-grid__col--span2 lässt eine einzelne Spalte
   über 2 der 4 Spalten laufen (nur innerhalb dieser Stufe relevant) – z. B.
   für Text-Spalten, die inhaltlich mehr Breite brauchen als die schmaleren
   Bild-/Listen-Spalten daneben. */
@media (min-width: 1600px) {
  .content-grid--4up { grid-template-columns: repeat(4, 1fr); }
  .content-grid__col--span2 { grid-column: span 2; }
}

/* ── Doc Layout · Typografie für Textseiten (Imprint, Privacy, Services …) ──
   Wird zusammen mit .content-grid verwendet. Steuert zentral Titel, Fließtext,
   Abstände und Hilfselemente für alle dokumentartigen Seiten. */
.doc-layout .col-title {
  font-family: var(--font);
  font-weight: normal;
  font-size: var(--display-sm);
  letter-spacing: normal;
  line-height: 1.0;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: var(--space-64);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.doc-layout h2 {
  font-family: var(--font);
  font-weight: normal;
  font-size: var(--headline-sm);
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: var(--space-32);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.doc-layout .section             { margin-bottom: 0; }
/* Design-System-Regel: Abstand zwischen zwei ECHTEN, eigenständigen
   Abschnitten innerhalb einer Spalte = --space-96 (Token). Gilt für zwei
   inhaltlich unabhängige, aufeinanderfolgende .section--header/.section--
   angaben-Blöcke (z. B. "restless by design" → "who's ®S" auf about).

   WICHTIG – kein Titel-only-.section--header vor eigenem Content:
   Wenn ein .section--header NUR den Titel für den direkt folgenden
   .section-Block enthält (Titel + Content gehören eigentlich zusammen,
   sind nur aus Layout-/Historie-Gründen in zwei Divs), NICHT als zwei
   Divs aufteilen – sonst kollabiert das kleinere margin-bottom des Titels
   mit diesem 96px-Wert und der Abstand wird ungewollt groß (siehe Git-
   History: passierte bei "disciplines", "imprint"/"Legal Notice",
   "privacy"/"Privacy Policy", "contact"/Adresse). Stattdessen den Titel
   als erstes Kind IN den folgenden .section-Block schreiben, siehe dort. */
.doc-layout .section--header     { margin-bottom: var(--space-96); }
.doc-layout .section--angaben    { margin-bottom: var(--space-96); }
/* Letztes Element einer Spalte: kein eigener margin-bottom mehr, sonst addiert
   er sich beim gestapelten Mobil-Layout zum row-gap des .content-grid
   (imprint, privacy). Gleiches Prinzip wie .accordion:last-child auf services. */
.doc-layout .content-grid__col > .section--angaben:last-child { margin-bottom: 0; }
/* Gleiches Prinzip, falls eine Spalte nur aus .section--header besteht
   (z. B. "very serious about having fun" auf services) – ohne Reset addiert
   sich das Trailing-Margin zum Abstand der nächsten Komponente darunter. */
.doc-layout .content-grid__col > .section--header:last-child { margin-bottom: 0; }
.doc-layout .section--lang-divider {
  margin-top: var(--space-128);
  margin-bottom: var(--space-64);
}
.doc-layout h3 {
  font-family: var(--font);
  font-weight: normal;
  font-size: var(--body-lg);
  line-height: 1.4;
  color: var(--color-ink);
  margin-top: var(--space-32);
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.doc-layout h3 + p { margin-top: 0; }
.doc-layout p {
  font-family: var(--font-text);
  font-size: var(--body-md);
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-32);
}
.doc-layout p:last-child { margin-bottom: 0; }
.doc-layout address {
  font-style: normal;
  font-family: var(--font-text);
  font-size: var(--body-md);
  line-height: 1.4;
  color: var(--color-ink);
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

/* ── Circle Button · Icon-Kreis mit Slide-Animation (Content-Seiten) ──
   48px schwarzer Kreis, Icon wechselt per translateX oder translateY —
   Richtung und Icon-Wahl werden im Markup gesetzt. */
.circle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-ink);
  font-family: var(--font);
  font-size: var(--body-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.circle-btn__icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-ink);
  flex-shrink: 0;
  overflow: hidden;
}
.circle-btn__arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-slide) var(--ease-slide);
}
.circle-btn__arrow--in { transform: translateX(-100%); }
/* Nur auf Geräten mit echtem Hover (Maus) – sonst bleibt der Pfeil auf
   Touch nach dem Antippen sichtbar "gewischt" stehen (kein mouseleave-
   Äquivalent auf Touchscreens, siehe gleiches Prinzip bei allen anderen
   :hover-Regeln in dieser Datei). */
@media (hover: hover) and (pointer: fine) {
  .circle-btn:hover .circle-btn__arrow--out { transform: translateX(100%); }
  .circle-btn:hover .circle-btn__arrow--in  { transform: translateX(0); }
}
.circle-btn__icon .material-symbols-rounded {
  font-size: 24px;
  font-variation-settings: 'wght' 600;
  color: var(--color-paper);
}

/* ── Formulare · Eingabefelder & Button (global, wiederverwendbar) ──
   Entstanden auf der Shop-Seite ("Create your own poster"), aber nicht an
   den Poster-Konfigurator gebunden – für jedes künftige Formular nutzbar.
   .form-btn ersetzt NICHT .circle-btn (der bleibt für Link-artige "weiter"-
   Aktionen mit Icon-Kreis), sondern ist die klassische Button-Variante für
   Formular-Aktionen (z. B. "Shuffle colors"). Layout-Aspekte, die vom
   jeweiligen Kontext abhängen (Breite, Abstände einer konkreten Zeile),
   bleiben seitenspezifisch und werden lokal über zusätzliche Klassen ergänzt. */
.form-select-wrap {
  position: relative;
  width: 100%;
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 48px;
  font-family: var(--font-text);
  font-size: var(--body-sm);
  color: var(--color-ink);
  background: var(--white-ultra);
  border: none;
  outline: 2px solid var(--grey-16);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12);
  padding-right: 40px; /* Platz für den eigenen Pfeil */
  cursor: pointer;
  transition: background-color 0.25s ease, outline-color 0.25s ease; /* gleiches Prinzip wie Menü-Hover */
}
@media (hover: hover) and (pointer: fine) {
  .form-select:hover {
    background: var(--white-ultra);
    outline-color: var(--black-100);
  }
}
/* Eigener Default-Outline (Rahmen) belegt dieselbe CSS-Property wie der
   globale Fokus-Ring (:focus-visible, siehe oben im Dokument) – ohne diese
   Regel gewinnt .form-select per Reihenfolge im Stylesheet und der
   Fokus-Ring verschwindet. Höhere Spezifität + sitewide Ink-Ring-Farbe
   stellen ihn hier gezielt wieder her. */
.form-select:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}
.form-select-arrow {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 20px;
  color: var(--color-ink);
}
.form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%; /* Buttons (secondary wie primary) füllen immer die verfügbare Spaltenbreite */
  height: 48px;
  font-family: var(--font-text);
  font-size: var(--body-sm);
  color: var(--color-ink);
  background: var(--grey-8);
  border: none;
  text-decoration: none; /* falls .form-btn auf einem <a> statt <button> sitzt (z. B. primary-CTA "get in touch") */
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .form-btn:hover {
    background: var(--grey-16);
  }
}
.form-btn .material-symbols-rounded {
  font-size: 20px;
  transition: transform var(--dur-slide) var(--ease-slide);
}
/* Rotation wird per JS als inline transform gesetzt (kumulativ +180° pro
   Klick, siehe Shop-Seite) – so dreht sich das Icon bei jedem Klick immer
   weiter in dieselbe Richtung, statt bei einer Klasse zwischen 0°/180° hin-
   und herzuspringen. */

/* ── Button-Varianten: secondary & primary (ergänzen die neutrale .form-btn-
   Basis oben – Layout/Radius/Icon-Verhalten bleiben gleich, nur Farbe ändert
   sich). Secondary entstanden für den Shuffle-Button im Shop-Poster-
   Konfigurator: Hintergrund folgt der aktuellen Textmarkierungsfarbe
   (--selection-accent-16/-32, pro Seitenaufruf von site.js gesetzt, s.
   Kommentar bei ::selection) – 16 im Ruhezustand, 32 beim Hover (gleiches
   Prinzip wie grey-8→grey-16 bei der neutralen Basis, nur mit der
   Akzentfarbe statt Grau). Primary ist die volle Ink-Variante mit hellem
   Text, für die jeweils wichtigste Aktion in einem Formular; kein Hover-
   Wechsel dort, damit das Ink-Schwarz nicht kurz herausspringt. */
.form-btn--secondary {
  background: var(--selection-accent-16);
}
@media (hover: hover) and (pointer: fine) {
  .form-btn--secondary:hover {
    background: var(--selection-accent-32);
  }
}
.form-btn--primary {
  background: var(--black-100);
  color: var(--white-ultra);
}
.form-btn--primary:hover {
  background: var(--black-100);
}

/* ── Hinweistext unter "Get in touch to order" (alle Produkt-Unterseiten:
   wo-andering, TA_01–06, TA_Personal) · sekundäre Textfarbe (--color-ink-2 =
   --grey-80), kleinste Fließtextgröße. Höhere Spezifität als ".doc-layout p"
   nötig (Klasse+Tag schlägt sonst die einfache Klasse hier), sonst gewinnt
   dessen body-md/--color-ink trotzdem. ── */
.doc-layout .order-note {
  font-family: var(--font-text);
  font-size: var(--body-sm);
  line-height: 1.4;
  color: var(--color-ink-2);
  margin-bottom: 0;
}
.form-btn + .order-note {
  margin-top: var(--space-16);
}

/* ── Projekt-Teaser · wiederverwendbare Karte (Startseite, "featured project" …) ──
   Verschoben aus index.html, damit auch andere Seiten den exakt gleichen
   Teaser einbinden können. Layout-Kontext (Grid/Masonry) bleibt seitenspezifisch. */
.teaser { break-inside: avoid; }
.teaser__link {
  display: block;
  text-decoration: none;
  color: var(--color-ink);
  border-radius: var(--radius-sm); /* lässt den Fokus-Ring der Bildrundung folgen */
}

/* Bild / Platzhalter – aspect-ratio hält die Höhe schon vor dem Laden stabil.
   Gilt für Platzhalter-Teaser (Sekunden-Farbanimation, aspect-ratio per
   Inline-Style im Markup gesetzt) – siehe .teaser__media--auto weiter unten
   für Teaser mit echtem Foto. */
.teaser__media {
  position: relative;
  width: 100%;
  background: var(--grey-8);
  overflow: hidden;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}
.teaser__media img,
.teaser__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Echtes Foto/Video: Format kommt vom Medium selbst (width/height-Attribute),
   kein manuelles aspect-ratio nötig. Quer-, Hoch- oder Quadratformat ergibt
   sich automatisch aus der Datei – einfach reinlegen. */
.teaser__media--auto {
  aspect-ratio: auto;
}
.teaser__media--auto img,
.teaser__media--auto video {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Leichter Scroll-Parallax auf einzelnen Teaser-Bildern (aktuell: Eikon).
   Container bekommt ein festes Seitenverhältnis (statt --auto/height:auto)
   und schneidet das Bild an (overflow: hidden, schon von .teaser__media
   geerbt) – das Bild selbst liegt etwas größer als der Container und wird
   per JS (site.js) beim Scrollen sanft auf/ab verschoben. Ohne JS oder bei
   reduced-motion bleibt es einfach mittig stehen, kein Sprung.
   1/1 ist nur der Default – pro Teaser per Inline-Style überschreibbar,
   z. B. style="aspect-ratio: 2 / 3;" (Inline gewinnt automatisch gegenüber
   der Klasse), analog zu den Platzhalter-Teasern weiter unten. */
.teaser__media--parallax {
  aspect-ratio: 1 / 1;
}
.teaser__media--parallax img,
.teaser__media--parallax video {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

/* Sekunden-Füllung je Teaser (steigt von unten, wie der Sekundenbalken der Stage) */
.teaser__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: height 1s linear;
}
/* Ausgeblendet (Markup bleibt erhalten, jederzeit reaktivierbar) */
.teaser__meta   { display: none; }   /* Teasertext-Zeile */

/* ── Fächer-Hover (Modifier .teaser--hover-fan, jetzt auf allen Teasern) ──
   Der frühere Kreis-Button (.teaser__action) wurde komplett entfernt
   (Markup + CSS) – dieser Effekt ist jetzt der einzige Teaser-Hover.
   ZWEI farbige Flächen, beide bodenbündig
   (bottom:0) und beide bei Hover von unten ins Bild fahrend (translateY
   100%→0) – wie ein Fächer gestapelt: hinten (.teaser__hover-overlay, ohne
   Modifier) 36% hoch, niedrigerer z-index; vorne (Modifier --front) 24%
   hoch, höherer z-index UND mit leichtem Verzögerungs-Versatz (transition-
   delay), damit sie sichtbar nach der hinteren einfährt. Da beide am
   selben unteren Rand ansetzen, deckt die vordere (kleinere) Fläche die
   unteren 24% der hinteren komplett ab – sichtbar bleibt nur ein 12%
   hoher Farbstreifen der hinteren Fläche darüber (36%-24%), genau der
   Fächer-Effekt. Kein Icon/Text mehr in der vorderen Fläche (bewusst
   entfernt – zwei reine Farbflächen). Farben: --hover-overlay-color (hinten) /
   --hover-overlay-color-2 (vorne), die ein Script auf index.html bei jedem
   "mouseenter" neu und garantiert unterschiedlich zufällig setzt (bei
   jedem Hover ein neues, nie gleiches Farbpaar statt einer fixen Farbe pro
   Seitenaufruf); Fallback auf --selection-fg (die pro Seitenaufruf
   zufällig gewählte Akzentfarbe aus site.js), falls das Script mal nicht
   läuft. Das Bild verschiebt sich parallel leicht nach oben – auf einem
   eigenen Wrapper (.teaser__media-inner), NICHT auf dem <img> selbst, weil
   site.js dort beim Scrollen per JS bereits ein eigenes translateY setzt
   (inline style); ein zweiter CSS-Transform auf demselben Element würde
   damit kollidieren. Der Wrapper ist absolut positioniert (inset:0,
   deckungsgleich mit .teaser__media), das <img> bleibt unverändert – seine
   bestehende position:absolute greift jetzt einfach gegen den Wrapper statt
   gegen .teaser__media, sieht optisch identisch aus. */
.teaser__media-inner {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-slide) var(--ease-slide);
}
/* Nur auf Geräten mit echtem Hover (Maus) – auf Touch bliebe die Farbfläche
   sonst nach dem Antippen sichtbar "hängen" (kein mouseleave-Äquivalent auf
   Touchscreens, s. gleiches Prinzip bei allen anderen :hover-Regeln in
   dieser Datei). */
@media (hover: hover) and (pointer: fine) {
  .teaser--hover-fan:has(.teaser__link:hover) .teaser__media-inner {
    transform: translateY(-6%);
  }
}
.teaser__hover-overlay {
  position: absolute;
  /* -1px auf allen 3 Kanten (statt 0/100%): beim Rein-/Rausfahren
     (translateY, GPU-Compositing) rundet der Browser die %-Höhe manchmal
     auf einen leicht anderen Subpixel-Wert als die overflow:hidden-
     Clipkante von .teaser__media – das erzeugt einen kurz aufblitzenden
     1px-Spalt/Riss am unteren Rand während der Animation ("Blitzer").
     Der 1px-Überstand liegt außerhalb von .teaser__media und wird von
     dessen overflow:hidden ohnehin abgeschnitten, überbrückt aber die
     Rundungslücke. */
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: auto;
  height: calc(36% + 1px);
  z-index: 1;
  background: var(--hover-overlay-color, var(--selection-fg));
  transform: translateY(100%);
  transition: transform var(--dur-slide) var(--ease-slide);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .teaser--hover-fan:has(.teaser__link:hover) .teaser__hover-overlay {
    transform: translateY(0);
  }
}
.teaser__hover-overlay--front {
  height: calc(24% + 1px);
  z-index: 2;
  background: var(--hover-overlay-color-2, var(--selection-fg));
  transition-delay: 60ms;
}

/* Text */
.teaser__title {
  font-family: var(--font);
  font-size: var(--headline-sm);
  font-weight: normal;                   /* PolySans-Bulky ist nativ fett – kein 700 erzwingen */
  font-synthesis: none;                  /* verhindert synthetisches Fett (Faux-Bold) */
  line-height: 1.1;
  margin: var(--space-32) 0 0;           /* Abstand Bild → Textabschnitt */
}
/* Titel-Link enthält nur die Headline (kein Bild) und ist ein eigenständiges
   <a>, getrennt vom Bild-Link – dadurch ist die Lücke zwischen Bild und
   Titel (margin-top von .teaser__title) NICHT mehr Teil irgendeines Links
   (sie collapsed nach außen, zwischen die beiden <a>-Geschwister).
   width: fit-content (statt des Default-Block, der die volle Spalten-/
   Flexbreite einnehmen würde) sorgt zusätzlich dafür, dass die Hover-/
   Klickfläche exakt dem kurzen Titeltext folgt statt der ganzen Breite. */
.teaser__link:has(> .teaser__title) {
  width: fit-content;
  max-width: 100%;
}
.teaser__meta {
  font-family: var(--font-text);
  font-size: var(--body-md);
  line-height: 1.4;
  color: var(--color-ink);
  margin: var(--space-16) 0 0;           /* Headline → Teasertext */
}

/* Tags */
.teaser__tags {
  list-style: none;
  margin: var(--space-24) 0 0;           /* Abstand Teasertext → Tags */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.teaser__tags li {
  font-family: var(--font-text);
  font-size: var(--body-sm);
  line-height: 1;
  color: var(--color-ink);
  background: var(--grey-8);
  /* Pill-Form: fester Px-Wert (> halbe Höhe) statt %, sonst skaliert der
     Radius horizontal/vertikal unterschiedlich und ergibt eine Ellipse statt
     gerader Seitenkanten mit rund abgeschlossenen Enden. Der Browser kappt
     999px automatisch auf die halbe Höhe des Elements. */
  border-radius: 999px;
  padding: var(--space-12) var(--space-16);  /* oben/unten 12, links/rechts 16 */
}

/* ── Accordion · aufklappbare Abschnitte (Services, .project …) ──
   Icon-Breite 20px + Spalt var(--space-12) = Einzug für den Body-Text.
   Höhenanimation per JS (scrollHeight), Icon-Tausch wie Mini-Header-Toggle. */
.accordion { margin-bottom: var(--space-32); }
.accordion:last-child { margin-bottom: 0; }
.doc-layout .accordion__heading { margin: 0; }

.accordion__btn {
  display: inline-grid;
  grid-template-columns: 48px auto;
  gap: var(--space-12);
  align-items: center;
  width: auto;
  max-width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-weight: normal;
  font-size: var(--headline-sm);
  line-height: 1.4;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.accordion__icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-ink);
  flex-shrink: 0;
  overflow: hidden;                      /* schneidet die Hover-Faces ab */
}
.accordion__icon .material-symbols-rounded {
  font-size: 24px;
  font-variation-settings: 'wght' 600;
  color: var(--color-paper);
}

/* Hover-Mikro-Effekt: dasselbe "+"-Icon liegt zweimal übereinander
   (out/in) und verschiebt sich beim Hover minimal – nach UNTEN raus im
   geschlossenen, nach OBEN raus im geöffneten Zustand, das neue kommt
   jeweils von der Gegenseite nach. Diese Faces bleiben unrotiert (reine
   Vertikalbewegung); die 45°-Drehung passiert eine Ebene tiefer, direkt
   am Glyph (s.u.) – so überlagern sich Hover-Slide und Drehung nicht. */
.toggle-icon-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-slide) var(--ease-slide);
}
.toggle-icon-face--in { transform: translateY(-100%); }

/* Klick: "+" dreht sich um 45° und wird visuell zum "×" – die Drehung
   sitzt auf dem Glyph selbst, nicht auf dem Face-Wrapper, damit der
   vertikale Hover-Slide (oben) immer senkrecht bleibt, egal ob offen
   oder geschlossen. */
.accordion__icon .material-symbols-rounded {
  transition: transform var(--dur-slide) var(--ease-slide);
}
.accordion.is-open .accordion__icon .material-symbols-rounded {
  transform: rotate(45deg);
}

/* Geschlossen + Hover: nach unten raus, neues kommt von oben.
   .is-hovering wird per JS (mouseenter/mouseleave) gesetzt, NICHT über
   :hover – siehe site.js: so kann der Klick den Effekt gezielt abschalten
   und er "klebt" nicht künstlich an einer Maus, die einfach stehen bleibt. */
.accordion:not(.is-open).is-hovering .toggle-icon-face--out { transform: translateY(100%); }
.accordion:not(.is-open).is-hovering .toggle-icon-face--in  { transform: translateY(0); }

/* Geöffnet: Ruheposition umkehren, damit der Hover von unten kommen kann */
.accordion.is-open .toggle-icon-face--in { transform: translateY(100%); }

/* Geöffnet + Hover: nach oben raus, neues kommt von unten */
.accordion.is-open.is-hovering .toggle-icon-face--out { transform: translateY(-100%); }
.accordion.is-open.is-hovering .toggle-icon-face--in  { transform: translateY(0); }

/* Während des Klick-Wechsels (is-toggling, per JS gesetzt): nur die
   Transition abschalten, NICHT den Transform-Wert selbst überschreiben.
   So springt die versteckte Face sofort lautlos auf ihre neue
   Ruheposition (open/closed), statt kurz auf "none" (= Bildmitte, also
   sichtbar!) zu springen und danach animiert wieder rauszufahren – genau
   das sah aus wie "eine zweite Kopie fliegt aus dem Button". */
.accordion.is-toggling .toggle-icon-face--out,
.accordion.is-toggling .toggle-icon-face--in {
  transition: none !important;
}

.accordion__body {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-panel) var(--ease-panel);
}
.accordion__body-inner {
  /* Einzug fluchtet mit dem Titeltext */
  padding-left: calc(48px + var(--space-12));
  padding-top: var(--space-16);
  padding-bottom: var(--space-32);
}
.accordion__body-inner p {
  font-size: var(--body-md);
}
.accordion__body-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion__body-inner li {
  font-family: var(--font-text);
  font-size: var(--body-md);
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-16);
}
.accordion__body-inner li:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .accordion__body              { transition: none; }
  .accordion__icon .toggle-icon { transition: none; }
  .toggle-icon-face              { transition: none; }
}

/* ── Große Statements · Lead & Outro (linksbündig in der Logo-Flucht) ── */
.content-statement {
  margin: 0;
  max-width: 80%;         /* Desktop: max. 80% der Inhaltsbreite, bricht dann um */
  font-family: var(--font);
  font-synthesis: none;
  font-size: var(--ultra-sm);
  line-height: 1.0;
  letter-spacing: normal;
  color: var(--black-100);
  text-align: left;
}
.content-lead  { padding-top: var(--space-128); padding-bottom: var(--space-128); }
/* ── Zwei Anzeigevarianten für Headlines: nur Headline (.content-lead
   allein, padding-bottom bleibt die fluide Standard-Distanz zum nächsten
   Block) ODER Headline + Subline (zusätzlich .content-subline direkt
   danach). Im zweiten Fall übernimmt .content-subline selbst den Abstand
   zur Headline (margin-top) UND zum nächsten Block (margin-bottom) –
   dafür wird padding-bottom der Headline hier deaktiviert (:has()), sonst
   addieren sich beide Abstände zu einem doppelt so großen Zwischenraum.
   So bleibt .content-lead überall identisch, nur die Subline-Abstände
   sind pro Kontext frei einstellbar (entstanden auf den Shop-Seiten,
   vorher dort als .shop-lead lokal dupliziert). */
.content-lead:has(+ .content-subline) {
  padding-bottom: 0;
}
.content-subline {
  max-width: 80%;
  /* Abstände über die fluiden Space-Tokens statt fester Pixelwerte (vorher
     hart "96px 0 128px 0"). Die Token-Endwerte sind identisch mit den
     bisherigen Zahlen, auf großen Screens ändert sich also nichts:
       --space-96  =  48 → 96px
       --space-128 =  64 → 128px
     Mobil halbieren sich die Abstände dadurch. Vorher standen dort auch auf
     einem 390px-Gerät starre 96 + 128px, zusammen also 224px – bei nur rund
     170px hohem Text wirkte das wie eine Lücke, während der Rest des Layouts
     längst mitskaliert. */
  margin: var(--space-96) 0 var(--space-128) 0;
  font-family: var(--font-text);
  font-size: var(--body-lg);
  line-height: 1.4;
  color: var(--color-ink);
}
@media (max-width: 900px) {
  .content-subline { max-width: 100%; }
}
.content-subline strong {
  font-family: var(--font);
  font-weight: normal;
  color: var(--color-ink);
  font-synthesis: none;
}
.content-subline p + p {
  margin-top: var(--space-16);
}
.content-outro {
  display: block;
  width: fit-content;
  padding-top: var(--space-224);
  margin-bottom: var(--space-128);   /* statt padding-bottom: kollabiert mit
                                         .content-footer's margin-top (s. u.),
                                         damit kein doppelter Abstand entsteht,
                                         wenn beides vorhanden ist */
  color: var(--black-100);
}
/* nur der Text ist der Link, nicht die gepolsterte Fläche */
.content-outro__link {
  color: inherit;
  text-decoration: none;
}

/* Hover-Lauftext: zwei Zeilen gestapelt, vertikaler Slide (wie in Standby/index.html) */
.swap {
  display: inline-grid;        /* Breite = längstes Wort → klickbarer Bereich bleibt stabil */
  overflow: hidden;            /* klippt den laufenden Text */
}
.swap > span {
  grid-area: 1 / 1;            /* beide Texte im selben Feld gestapelt */
  white-space: nowrap;
  transition: transform var(--dur-slide) var(--ease-slide);
}
/* Etwas mehr Zeilenhöhe als die umgebende display-statement-Zeile (1.0):
   gibt Unterlängen wie dem „y" in „shy" Raum, damit overflow:hidden sie
   nicht am unteren Rand abschneidet. */
.content-outro .swap {
  line-height: 1.2;
}
/* unten: default fährt nach OBEN raus, neuer Text kommt von unten rein */
.swap--up .swap__in          { transform: translateY(100%); }
@media (hover: hover) and (pointer: fine) {
  .swap--up:hover .swap__out   { transform: translateY(-100%); }
  .swap--up:hover .swap__in    { transform: translateY(0); }
}

/* Rotierendes Schlusswort im Lead-Statement: alle 2,5s ein Wechsel,
   gleicher vertikaler Slide wie der „don't be shy"-Hover (swap--up).
   Breite wird per JS auf das längste Wort fixiert, damit der Satz
   beim Wechsel nicht „springt". line-height bleibt bei 1.0 – exakt wie
   der umgebende Fließtext –, damit der Zeilenabstand identisch bleibt.
   Statt overflow:hidden (das bei line-height 1.0 Unterlängen wie das
   „y" in „playful" abschneiden würde) wird mit clip-path geklippt: oben
   bündig an der Boxkante (sauberes Ein-/Ausfahren), unten leicht darüber
   hinaus (Unterlängen bleiben sichtbar) – und links/rechts ebenfalls mit
   etwas Spielraum, damit das jeweils breiteste Wort nicht am „s" o. ä.
   abgeschnitten wird, falls die per JS gemessene Breite (Web-Font-Timing,
   Subpixel-Rundung) minimal knapper ausfällt als die tatsächliche Textbreite. */
.word-cycle {
  display: inline-grid;
  line-height: 1.0;
  clip-path: inset(0 -0.4em -0.28em -0.4em);
}
.word-cycle__slot {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform var(--dur-word-in) var(--ease-word-in); /* Default/Einstieg: Abbremsen */
}

/* Abschlusszeile: Copyright links, contact/imprint rechts */
.content-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-32);
  margin-top: var(--space-128);        /* Mindestabstand zum Content darüber –
                                           greift auch, wenn ein optionaler Link
                                           davor (next project / get in touch)
                                           fehlt; kollabiert mit dessen
                                           margin-bottom, falls vorhanden, statt
                                           sich zu addieren */
  padding-bottom: var(--space-32);     /* Abstand zum Seitenende */
  font-family: var(--font);
  font-synthesis: none;
  font-size: var(--body-md);
  color: var(--black-100);
}
.content-footer p { margin: 0; }
.content-footer__links {
  display: flex;
  gap: var(--space-32);                /* Abstand zwischen contact und imprint */
}

/* ── Opt-in: Footer immer am unteren Viewport-Rand verankern (statt im
   normalen Fluss direkt nach dem Content) – für kurze Seiten wie 404, wo
   sonst ein großer Leerraum zwischen Footer und .hero-reveal entsteht.
   Bewusst NICHT Standardverhalten von .content, da das die austarierte
   Mindestabstand-Logik oben (margin-top: var(--space-128)) auf normal
   langen Seiten durchbrechen würde (dort wächst .content ohnehin über
   einen Viewport hinaus, "unten verankern" ergibt dort keinen Sinn).
   Pro Seite gezielt auf <main class="content …"> ergänzen. ── */
.content--pin-footer {
  display: flex;
  flex-direction: column;
}
.content--pin-footer .content-footer {
  margin-top: auto;
}
.content-footer__links a {
  color: var(--black-100);
  text-decoration: none;
}

/* ── Scroll-Reveal: Element gleitet von 64px tiefer + transparent in Position ── */
@keyframes reveal-slide-up {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0; /* verhindert FOUC bevor die Animation startet */
  will-change: opacity, transform;
}
.reveal.is-visible {
  animation: reveal-slide-up var(--dur-fade) var(--ease-panel) both;
}

/* Seitenende: 64px der fixierten Hero-Stage wieder sichtbar machen */
.hero-reveal {
  height: var(--space-64);
}

/* ── Mini-Header-Overlay ──
   Dezente Abdunkelung des Hintergrunds bei geöffnetem Menü (8% Schwarz –
   gleicher Wert wie --shadow-header). Liegt unter der Mini-Header-Kapsel
   (z-index 50), über dem Content; faded synchron zum Öffnen/Schließen.
   Ein Klick aufs Overlay zählt als „Klick außerhalb" und schließt das Menü. */
.mini-header-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-panel) var(--ease-panel);
}
.mini-header-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mini-Header ──
   Anker reserviert nur die geschlossene Höhe im Fluss; die Kapsel wächst
   darüber hinaus (overflow), sodass das Öffnen den Content nicht verschiebt. */
.mini-header-anchor {
  position: sticky;
  top: var(--space-32);                 /* klebt 32px unter der Oberkante */
  z-index: 50;                          /* immer oberste Ebene */
  width: fit-content;
  margin: 0 auto var(--space-32);       /* zentriert + spacing-32 zum Content */
  height: calc(var(--h-item) + 2 * var(--h-pad)); /* nur geschlossene Höhe im Fluss */
}

.mini-header {
  display: flex;
  flex-direction: column;
  padding: var(--h-pad);
  background: var(--color-paper);
  border-radius: var(--radius-header);
  box-shadow: var(--shadow-header);
}

/* obere Leiste (Logo + Toggle) */
.mini-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-64);                 /* Abstand zwischen Logo und Button */
}

.mini-header__logo { display: flex; }
.mini-header__logo svg {
  display: block;
  height: var(--h-item);
  width: auto;
  overflow: visible;        /* verhindert Beschnitt der unteren ®S-Kante bei krummen Skalierungshöhen */
}
/* ®S-Farbwechsel nur beim Hover über das Logo selbst (nicht über die ganze Kapsel/bei geöffnetem Menü) */
.mini-header__logo .logo-r,
.mini-header__logo .logo-s {
  fill: var(--color-ink);
  transition: fill 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mini-header__logo:hover .logo-r { fill: #3b2783; }   /* ®S-Night-Blue */
  .mini-header__logo:hover .logo-s { fill: var(--rose-100); }   /* S → rosé */
}

/* Toggle-Button mit vertikalem Icon-Slide (Burger runter raus, x von oben rein) */
.mini-header__toggle {
  position: relative;
  width: var(--h-item);
  height: var(--h-item);
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: var(--color-ink);         /* schwarzer Hintergrund */
  border-radius: var(--radius-round);
  color: var(--color-paper);            /* weißes Icon */
  cursor: pointer;
  overflow: hidden;                     /* schneidet die laufenden Icons ab */
}
.mini-header__toggle .toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-slide) var(--ease-slide);
}
.mini-header__toggle .toggle-icon .material-symbols-rounded {
  font-size: 24px;
  font-variation-settings: 'wght' 600;
}
.toggle-icon--close { transform: translateY(-100%); }                 /* x startet oben */
.mini-header.is-open .toggle-icon--menu  { transform: translateY(100%); } /* Burger nach unten raus */
.mini-header.is-open .toggle-icon--close { transform: translateY(0); }    /* x von oben rein */

/* aufklappbarer Navigationsbereich – animiert von 0 auf Inhaltshöhe */
.mini-header__nav {
  overflow: hidden;
  height: 0;                /* Höhe wird per JS gemessen gesetzt → Safari animiert das sauber */
  transition: height var(--dur-panel) var(--ease-panel);
}

.mini-header__links,
.mini-header__meta {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* spacing-32 zwischen den Abschnitten */
.mini-header__links  { padding-top: var(--space-32); }
.mini-header__meta   { padding-top: var(--space-32); }
.mini-header__social { padding-top: var(--space-32); }

.mini-header__links a {
  display: block;
  font-family: var(--font);
  font-size: var(--headline-sm);        /* Menüpunkte: 22 → 32 */
  line-height: 1.15;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mini-header__links a:hover { color: var(--grey-64); }
}

.mini-header__meta a {
  display: block;
  font-family: var(--font);
  font-size: var(--body-md);            /* Service-Links: 18 → 20 */
  line-height: 1.4;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mini-header__meta a:hover { color: var(--grey-64); }
}

.mini-header__social {
  display: flex;
  align-items: center;
  gap: var(--space-16);                 /* Abstand zwischen den Social-Icons – aktuell
                                           steht dort nur noch Instagram (Behance
                                           entfernt), die Regel bleibt aber, damit
                                           weitere Icons ohne Nacharbeit passen. */
}
.mini-header__social a {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mini-header__social a:hover { color: var(--grey-64); }
}
.mini-header__social svg {
  display: block;
  height: 32px;
  width: 32px;
}


/* ── GIF Text Clip Wrapper ── */
.text-mask-wrapper {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* ── Tagline / Clock – top right ── */
.tagline {
  position: absolute;
  top: max(var(--space-inset), env(safe-area-inset-top) + 12px);
  right: max(var(--space-edge), env(safe-area-inset-right) + 12px);
  font-family: var(--font);
  font-weight: normal;
  color: var(--white);
  text-align: right;
  line-height: 1.0;
  font-size: var(--headline-sm);
  letter-spacing: normal;
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;     /* falls die Tagline als Link (<a>) gerendert wird – keine Unterstreichung */
}

/* Zwei-Zeilen-Umbruch der Tagline nur auf Desktop (≥901px); darunter natürlicher Umbruch */
@media (max-width: 900px) {
  .content-statement { max-width: 100%; }
}

/* ── Logo – right, vertically centered ── */
.logo {
  position: absolute;
  left: max(var(--space-edge), env(safe-area-inset-left) + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-weight: normal;
  color: var(--white);
  line-height: 1;            /* volle Zeilenhöhe → kein Beschnitt der unteren Zeile */
  letter-spacing: normal;
  text-align: right;
  text-decoration: none;     /* falls das Logo als Link (<a>) gerendert wird – keine Unterstreichung */
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.logo__buero {
  display: block;
  font-size: var(--ultra-sm);
}

.logo__rs {
  display: block;
  font-size: var(--ultra-sm);
  margin-top: -0.05em;       /* holt die enge optische Stapelung zurück (≈ alter Abstand 0.95) */
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════

   Im Projekt existieren zwei Gruppen von Schwellen – bewusst getrennt
   dokumentiert, weil sie unterschiedliche Dinge steuern:

   1) LAYOUT-/GRID-STUFEN (die tragende Progression, weiter oben definiert):
        <  800px  →  1 Spalte
        >= 800px  →  2 Spalten
        >= 1280px →  3 Spalten (+ Platzhalter-Spalte)
        >= 1600px →  4 Spalten, nur bei .content-grid--4up
      Das JS-Masonry der Startseite (colCount() in index.html) verwendet
      exakt dieselben Schwellen 800/1280 – bei Änderungen dort mitziehen.

   2) HERO-/TEXTBREITEN-STUFEN (nur Feinjustierung, hier unten):
        <= 480px          →  Tagline/Logo enger am Rand, Tagline max 55vw
        481px – 900px     →  Tagline max 50vw
        <= 900px          →  .content-statement / .content-subline auf 100%
                             (steht bei den jeweiligen Komponenten weiter oben)

   Hinweis für später: Die 900px-Grenze der Gruppe 2 deckt sich NICHT mit
   der 800px-Grid-Stufe – zwischen 800 und 900px ist das Layout also schon
   zweispaltig, während Tagline/Textbreiten noch der Mobil-Regel folgen.
   Das ist aktuell so gewollt belassen (rein optische Feinjustierung, kein
   Fehler); eine Vereinheitlichung auf 800px wäre eine sichtbare Änderung
   und daher bewusst NICHT Teil dieses Aufräumens. */

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .tagline {
    top: max(16px, env(safe-area-inset-top) + 12px);
    right: max(16px, env(safe-area-inset-right) + 12px);
    max-width: 55vw;
  }

  .logo {
    left: max(16px, env(safe-area-inset-left) + 12px);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ── Klein-Tablet (481 – 900px): Tagline etwas schmaler halten ── */
@media (min-width: 481px) and (max-width: 900px) {
  .tagline {
    max-width: 50vw;
  }
}

/* Hinweis: Für ≥ 901px gab es hier zwei leere @media-Blöcke
   (901–1400px "Desktop 1280px" und ≥1401px "Wide 1920px") – beide ohne
   eine einzige Regel und mit Kommentar-Zahlen, die nicht zu ihren eigenen
   Queries passten. Entfernt statt mitgeschleppt; ab 901px gelten schlicht
   die Basisregeln oben plus die Grid-Stufen 1280/1600. */

/* ── Reduzierte Bewegung respektieren (Accessibility) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}