@font-face {
      font-family: 'Rockwell';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('assets/fonts/f33040c1d872.ttf') format('truetype');
    }

    /* ══════════════════════════════════════════
       BASIS
    ══════════════════════════════════════════ */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --clr-bg:       #0a0a0a;
      --clr-surface:  #141414;
      --clr-white:    #ffffff;
      --clr-gray-hi:  #888888;
      --clr-gray-lo:  #555555;
      --clr-border:   rgba(255,255,255,0.06);
      --clr-border-hi:rgba(255,255,255,0.10);

      --font-display: 'Montserrat', sans-serif;
      --font-body:    'Nunito Sans', sans-serif;

      --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);

      --pad-x: 52px;
    }

    html {
      -webkit-text-size-adjust: 100%;
    }

    html { overscroll-behavior-x: none; overflow-x: hidden; }
    body {
      background: var(--clr-bg);
      color: var(--clr-white);
      font-family: var(--font-body);
      overflow-anchor: auto;
      overscroll-behavior-x: none;
      overflow-x: hidden;
    }

    img, video, iframe {
      display: block;
      max-width: 100%;
    }

    /* ══════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════ */
    .nav-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 160px;
      background: linear-gradient(to bottom, #0a0a0a 25%, transparent 100%);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
    }

    .site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 88px;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .nav-pill {
      pointer-events: all;
      display: flex;
      align-items: center;
      background: none;
      border: none;
      padding: 0;
      gap: 0;
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease;
    }

    .site-nav.versteckt .nav-pill {
      transform: translateY(-80px);
      opacity: 0;
      pointer-events: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Rockwell', 'Arvo', serif;
      font-size: 14px;
      letter-spacing: 0.10em;
      text-transform: lowercase;
      text-decoration: none;
      color: rgba(255,255,255,1);
      font-weight: 700;
      padding: 6px 10px;
      white-space: nowrap;
      position: relative;
      text-shadow: none;
      transition: color 0.2s ease;
    }

    .nav-links a:hover { color: rgba(255,255,255,0.85); }

    .nav-links a:focus-visible {
      outline: 2px solid rgba(255,255,255,0.5);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .nav-links a.aktiv {
      color: var(--clr-white);
      background: none;
    }

    /* Handgemalter Buntstift-Kreis für aktiven Nav-Link */
    .nav-links a.aktiv::before {
      content: '';
      position: absolute;
      inset: 0px -4px;
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'><path d='M7,18 C9,4 28,0 50,0.5 C72,1 93,5 93,18 C93,31 72,36 50,35.5 C28,35 6,32 7,18 Z' fill='none' stroke='%230800f1' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/><path d='M8,16 C11,3 29,0.5 51,1 C73,1.5 94,7 93,19 C92,33 73,37 50,36.5 C27,36 5,31 8,16' fill='none' stroke='%230800f1' stroke-width='1.2' stroke-linecap='round' opacity='0.5'/></svg>");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    /* ══════════════════════════════════════════
       HERO
    ══════════════════════════════════════════ */
    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000 url('https://i.vimeocdn.com/video/2170657618-19d50b6b143b9ce5b82f67a80d583abb0af836d4e3e97ec0095ef7b3ac5c1012-d_1280x720') center/cover no-repeat;
    }

    .hero-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    .hero-video iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      height: 56.25vw;
      min-height: 100%;
      min-width: 177.78vh;
      transform: translate(-50%, -50%);
      border: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .hero-logo {
      position: fixed;
      z-index: 150;
      pointer-events: all;
      opacity: 0;
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    .hero-logo:focus { outline: none; }

    .hero-fade {
      position: absolute;
      inset: 0;
      background: black;
      opacity: 0;
      z-index: 9;
      pointer-events: none;
    }

    /* ══════════════════════════════════════════
       KAPITEL-GRUNDLAYOUT
    ══════════════════════════════════════════ */
    .kapitel {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 100px var(--pad-x);
      background: var(--clr-bg);
    }

    /* ══════════════════════════════════════════
       ANIMATIONS-KLASSEN
       Ausschließlich transform + opacity → GPU
    ══════════════════════════════════════════ */
    .scramble-text .schar       { display: inline; }
    .scramble-text .schar.space { display: inline; white-space: pre; }

    .einblenden {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.65s ease, transform 0.65s var(--ease-out);
    }
    .einblenden.sichtbar { opacity: 1; transform: translateY(0); }

    .wort-reveal .wort {
      display: inline-block;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
      margin-right: 0.28em;
    }

    .stats-wrap {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.75s ease, transform 0.75s var(--ease-out);
    }
    .stats-wrap.sichtbar { opacity: 1; transform: translateY(0); }

    /* ══════════════════════════════════════════
       ABSCHNITTSLABEL (überall gleich)
    ══════════════════════════════════════════ */
    .abschnitt-label {
      display: none;
    }

    /* Innere Header für Grid-Sektionen */
    .section-header {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-bottom: 24px;
      padding: 0 var(--pad-x);
      text-align: right;
    }

    .section-header h2 {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(44px, 5.5vw, 72px);
      letter-spacing: 0.04em;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .section-header .alle {
      font-size: 11px;
      color: var(--clr-gray-lo);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      padding-bottom: 4px;
    }

    /* ══════════════════════════════════════════
       ÜBER MICH
    ══════════════════════════════════════════ */
    #ueber-mich .inner {
      display: grid;
      grid-template-columns: 30% 1fr;
      gap: clamp(40px, 3.5vw, 72px);
      align-items: start;
      width: 100%;
    }

    /* Film-Rahmen Wrapper */
    .portrait-wrapper {
      position: relative;
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
    }
    .portrait-wrapper.sichtbar { opacity: 1; transform: translateX(0); }

    .portrait {
      position: relative;
      aspect-ratio: 3 / 4;
      width: 100%;
      background: #ede8df;
      overflow: hidden;
      border-radius: 2px;
      /* Polaroid frame */
      border-top: 16px solid #ede8df;
      border-bottom: 56px solid #ede8df;
      border-left: 16px solid #ede8df;
      border-right: 16px solid #ede8df;
      box-sizing: border-box;
      box-shadow:
        0 2px 4px rgba(0,0,0,0.25),
        0 8px 24px rgba(0,0,0,0.35),
        0 20px 48px rgba(0,0,0,0.20);
    }

    .portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 0;
    }

    /* Kodak texts hidden for Polaroid */
    .film-text-oben,
    .film-text-unten { display: none; }

    /* Klebeband-Streifen */
    .tape {
      position: absolute;
      z-index: 20;
      pointer-events: none;
    }

    .tape-oben-links {
      width: 292px;
      left: -115px;
      top: -11px;
      transform: rotate(-37deg);
      transform-origin: center center;
    }

    .tape-unten-rechts {
      width: 310px;
      right: 15px;
      bottom: -30px;
      transform: rotate(-5deg);
      transform-origin: center center;
    }

    .tape img {
      width: 100%;
      height: auto;
      display: block;
    }

    .portrait-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .ueber-text {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .ueber-text h2,
    .ueber-text h1 {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(24px, 2.4vw, 64px);
      line-height: 1.1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .ueber-text p {
      font-family: 'Rockwell', 'Arvo', serif;
      font-size: clamp(13px, 0.85vw, 18px);
      line-height: 1.65;
      color: var(--clr-white);
      font-weight: 400;
      max-width: 100%;
    }

    .ueber-text {
      gap: 16px;
    }

    .kennzahlen {
      display: flex;
      gap: 52px;
      padding-top: 20px;
      border-top: 1px solid var(--clr-border);
    }

    .kennzahl {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .kennzahl-zahl {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(32px, 2.2vw, 52px);
      line-height: 1;
    }

    .kennzahl-label {
      font-size: clamp(11px, 0.7vw, 14px);
      color: var(--clr-gray-lo);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════
       SHOWREEL
    ══════════════════════════════════════════ */
    #showreel .inner {
      width: 100%;
    }

    .showreel-kopf {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-bottom: 32px;
      padding: 0 var(--pad-x);
    }

    .showreel-kopf h2 {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(44px, 5.5vw, 72px);
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .showreel-jahr {
      font-size: 12px;
      color: var(--clr-gray-lo);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      padding-bottom: 8px;
    }

    /* Vimeo-Container: 16:9, kein Überlaufen */
    .video-container {
      position: relative;
      width: 75vw;
      margin-left: calc(12.5vw - var(--pad-x));
      aspect-ratio: 16 / 9;
      background: var(--clr-bg);
      overflow: hidden;
      border-radius: 2px;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s ease 0.25s, transform 0.9s var(--ease-out) 0.25s;
    }
    .video-container.sichtbar { opacity: 1; transform: translateY(0); }

    .video-container iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Platzhalter bis Vimeo-ID eingetragen ist */
    .video-platzhalter {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      border: 1px solid var(--clr-border);
    }

    .play-kreis {
      width: 64px;
      height: 64px;
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s ease, transform 0.25s var(--ease-out);
      cursor: pointer;
    }
    .play-kreis:hover  { border-color: var(--clr-white); transform: scale(1.08); }
    .play-kreis:focus-visible {
      outline: 2px solid rgba(255,255,255,0.5);
      outline-offset: 3px;
    }
    .play-kreis svg    { margin-left: 4px; }

    .video-platzhalter p {
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--clr-gray-lo);
    }

    /* ══════════════════════════════════════════
       PROJEKTE
    ══════════════════════════════════════════ */
    #projekte {
      padding-left: 0;
      padding-right: 0;
    }

    .projekt-grid {
      position: relative;
      width: 100%;
      aspect-ratio: 21 / 9;
      overflow: hidden;
      cursor: grab;
    }
    .projekt-grid:active { cursor: grabbing; }
    .projekt-karte {
      position: absolute;
      width: 80%;
      left: 10%;
      top: 50%;
      aspect-ratio: 21 / 9;
      background: var(--clr-surface);
      overflow: hidden;
      cursor: pointer;
      border: 0.5px solid rgba(255,255,255,0.04);
      opacity: 0;
      transform: translateY(-50%) translateX(0) scale(0.75);
      transform-origin: center center;
      transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease;
      z-index: 1;
    }
    .projekt-karte.pk-active { z-index: 2; }
    .pk-carousel-btn {
      position: absolute;
      top: 50%;
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 52px;
      font-weight: 700;
      line-height: 1;
      z-index: 20;
      padding: 0;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .pk-carousel-btn:hover { opacity: 1; }
    .pk-btn-prev { left: 10%; transform: translateY(-50%) translateX(-50%); }
    .pk-btn-next { right: 10%; transform: translateY(-50%) translateX(50%); }

    .projekt-thumb {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #141414, #1c1c1c);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #222;
      transition: transform 0.6s var(--ease-out);
      will-change: transform;
    }
    .projekt-karte:hover .projekt-thumb { transform: scale(1.04); }

    /* Abdunkelungs-Overlay – liegt zwischen Bild und Titel */
    .projekt-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0);
      transition: background 0.3s ease;
    }
    .projekt-karte:hover .projekt-thumb::after {
      background: rgba(0,0,0,0.45);
    }

    .projekt-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .projekt-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 22px 28px;
    }

    .projekt-overlay h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      text-align: center;
      margin-bottom: 0;
    }

    .projekt-overlay span {
      display: none;
      font-size: 11px;
      color: #999;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .projekt-nummer {
      display: none;
    }

    /* ══════════════════════════════════════════
       COLOR GRADING SLIDER
    ══════════════════════════════════════════ */
    #color-grading {
      padding-left: 0;
      padding-right: 0;
    }

    .cg-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      width: 100%;
    }

    .cg-karte {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      cursor: ew-resize;
      border: 0.5px solid rgba(255,255,255,0.04);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.65s ease, transform 0.65s var(--ease-out);
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y; /* pan-y: Browser scrollt vertikal nativ, JS übernimmt horizontal */
    }
    .cg-karte.sichtbar { opacity: 1; transform: translateY(0); }

    /* NACHHER-Layer (immer vollflächig sichtbar, dahinter) */
    .cg-nachher {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* VORHER-Layer (vorne, wird von rechts per clip-path beschnitten) */
    .cg-vorher {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: clip-path;
    }

    /* Vertikale Trennlinie, bewegt sich horizontal */
    .cg-linie {
      position: absolute;
      top: 0; bottom: 0;
      width: 2px;
      background: rgba(255,255,255,0.85);
      pointer-events: none;
      z-index: 10;
      transform: translateX(-50%);
      will-change: left;
    }

    /* Kreis-Handle */
    .cg-griff {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1.5px solid rgba(255,255,255,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      pointer-events: none;
      flex-direction: row;
    }
    .cg-griff::before,
    .cg-griff::after {
      content: none;
    }

    /* Labels */
    .cg-label {
      position: absolute;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 5px 10px;
      pointer-events: none;
      z-index: 9;
      background: rgba(10,10,10,0.55);
      border-radius: 2px;
      color: rgba(255,255,255,0.65);
    }
    .cg-label-vorher  { top: 14px; left:  14px; }
    .cg-label-nachher { top: 14px; right: 14px; }

    /* ══════════════════════════════════════════
       FOTO-GALERIE
    ══════════════════════════════════════════ */
    #fotos {
      padding-left: 0;
      padding-right: 0;
    }

    /* Spalten-Layout wie pascalkerouche:
       3 Spalten nebeneinander, Bilder stapeln sich in natürlicher Höhe.
       Kein festes grid-auto-rows → Bilder werden NICHT beschnitten. */
    .foto-grid {
      display: flex;
      gap: 3px;
      width: 100%;
      align-items: stretch;
    }

    .foto-spalte {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
    }

    .foto-item {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      background: var(--clr-surface);
      width: 100%;
      opacity: 0;
      transform: scale(1.04);
      transition: opacity 0.65s ease, transform 0.65s var(--ease-out);
      will-change: opacity, transform;
    }
    .foto-item.sichtbar { opacity: 1; transform: scale(1); }

    .foto-item img {
      display: block;
      width: 100%;
      height: auto; /* natürliche Proportionen */
      transition: transform 0.55s var(--ease-out);
      will-change: transform;
    }
    .foto-item:hover img { transform: scale(1.03); }

    .foto-spalte .foto-item:last-child {
      flex: 1;
      min-height: 300px;
    }
    .foto-spalte .foto-item:last-child img {
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    /* Hover-Overlay: abdunkeln + Wort einblenden */
    .foto-beschriftung {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0);
      transition: background 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
    }
    .foto-item:hover .foto-beschriftung {
      background: rgba(0,0,0,0.42);
    }

    .foto-beschriftung span {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--clr-white);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
    }
    .foto-item:hover .foto-beschriftung span {
      opacity: 1;
      transform: translateY(0);
    }

    /* ══════════════════════════════════════════
       LIGHTBOX
    ══════════════════════════════════════════ */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .lightbox.offen {
      opacity: 1;
      pointer-events: all;
    }

    .lightbox-bg {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.88);
      cursor: zoom-out;
    }

    .lightbox-bild {
      position: relative;
      z-index: 1;
      max-width: 90vw;
      transform: scale(0.94);
      transition: transform 0.35s var(--ease-out);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .lightbox.offen .lightbox-bild {
      transform: scale(1);
    }

    .lightbox-bild img {
      display: block;
      max-width: 90vw;
      max-height: 88vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 2px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.7);
    }

    .lightbox-schliessen {
      position: absolute;
      top: -16px;
      right: -16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      backdrop-filter: blur(8px);
    }
    .lightbox-schliessen:hover { background: rgba(255,255,255,0.22); }

    .lightbox-bild img {
      max-height: 68vh;
    }
    .lightbox-info {
      padding: 14px 2px 0;
      width: 100%;
    }
    .lightbox-caption {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,1);
      font-weight: 600;
      margin-bottom: 8px;
    }
    .lightbox-text {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      line-height: 1.65;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    /* ══════════════════════════════════════════
       BTS CAROUSEL LIGHTBOX
    ══════════════════════════════════════════ */
    .bts-lb {
      position: fixed;
      inset: 0;
      z-index: 1100;
      background: rgba(0,0,0,0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
      touch-action: none;
    }
    .bts-lb.offen { opacity: 1; pointer-events: all; }

    .bts-lb-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bts-lb-media {
      max-width: 90vw;
      max-height: 86vh;
      object-fit: contain;
      display: block;
      border-radius: 3px;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: auto;
    }
    video.bts-lb-media { background: #000; max-width: 90vw; max-height: 86vh; }

    .bts-lb-close {
      position: absolute;
      top: 16px; right: 16px;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      border: none; color: #fff;
      font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 10;
      line-height: 1;
    }
    .bts-lb-close:hover { background: rgba(255,255,255,0.22); }

    .bts-lb-btn {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      background: none; border: none;
      color: rgba(255,255,255,0.6);
      font-size: 52px; font-weight: 300;
      cursor: pointer; line-height: 1;
      transition: color 0.2s, opacity 0.2s;
      z-index: 10; padding: 0 16px;
      font-family: sans-serif;
    }
    .bts-lb-btn:hover { color: #fff; }
    .bts-lb-btn[style*="display:none"], .bts-lb-btn[style*="display: none"] { display: none; }
    .bts-lb-prev { left: 0; }
    .bts-lb-next { right: 0; }

    .bts-lb-counter {
      position: absolute;
      bottom: 18px; left: 50%; transform: translateX(-50%);
      font-size: 10px; letter-spacing: 0.2em;
      color: rgba(255,255,255,0.45);
      font-weight: 600; pointer-events: none;
      font-family: var(--font-sans);
      text-transform: uppercase;
    }

    /* thumbnail strip in BTS for click targets */
    .pm-fotos img, .pm-fotos-videos video {
      cursor: zoom-in;
    }

    .bts-vid-wrap {
      position: relative;
      width: calc(25% - 5px);
      min-width: 100px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .pm-fotos-videos .bts-vid-wrap video {
      width: 100%;
      aspect-ratio: 9 / 16;
      border-radius: 4px;
      display: block;
      background: #111;
      object-fit: cover;
    }
    .bts-play-icon {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      border: 1.5px solid rgba(255,255,255,0.6);
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
      color: #fff;
      font-size: 13px;
      padding-left: 3px;
    }

    /* ══════════════════════════════════════════
       PROJEKT MODAL
    ══════════════════════════════════════════ */
    .projekt-modal {
      position: fixed;
      inset: 0;
      z-index: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .projekt-modal.offen {
      opacity: 1;
      pointer-events: all;
    }

    .pm-bg {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.82);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      cursor: pointer;
    }

    .pm-panel {
      position: relative;
      z-index: 1;
      background: var(--clr-bg);
      border-radius: 10px;
      width: min(880px, 94vw);
      max-height: 88vh;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateY(28px) scale(0.98);
      transition: transform 0.42s var(--ease-out);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.12) transparent;
    }
    .pm-panel::-webkit-scrollbar { width: 4px; }
    .pm-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
    .projekt-modal.offen .pm-panel {
      transform: translateY(0) scale(1);
    }

    .pm-carousel-outer {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #0a0a0a;
    }
    .pm-slide {
      position: absolute;
      width: 80%;
      left: 10%;
      top: 50%;
      aspect-ratio: 16 / 9;
      transform: translateY(-50%) translateX(0) scale(0.75);
      transform-origin: center center;
      z-index: 1;
      background: #111;
    }
    .pm-slide.active {
      z-index: 2;
    }
    .pm-slide iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    .pm-slide-label {
      position: absolute;
      bottom: 10px;
      left: 12px;
      color: rgba(255,255,255,0.65);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-family: var(--font-body);
      pointer-events: none;
      z-index: 3;
    }
    .pm-video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.15);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      z-index: 5;
    }
    .pm-slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(20,20,20,0.7);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      transition: background 0.2s;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 10;
    }
    .pm-slider-btn:hover { background: rgba(255,255,255,0.22); }
    .pm-slider-prev { left: 10px; }
    .pm-slider-next { right: 10px; }

    .pm-inhalt {
      padding: 30px 36px 44px;
    }

    .pm-meta {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-bottom: 10px;
    }
    .pm-nummer {
      font-size: 10px;
      color: rgba(255,255,255,0.22);
      letter-spacing: 0.18em;
      font-weight: 600;
    }
    .pm-kategorie {
      font-size: 10px;
      color: rgba(255,255,255,0.38);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .pm-titel {
      font-family: var(--font-display);
      font-size: clamp(22px, 3.2vw, 38px);
      font-weight: 700;
      margin: 0 0 20px;
      line-height: 1.1;
    }
    .pm-text {
      font-size: 13px;
      line-height: 1.72;
      color: rgba(255,255,255,0.6);
      max-width: 640px;
      margin-bottom: 32px;
    }
    .pm-bts-label {
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      margin-bottom: 14px;
    }
    .pm-fotos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .pm-fotos img {
      width: calc(33.33% - 4px);
      min-width: 120px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 4px;
      display: block;
    }
    .pm-fotos-videos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 6px;
    }
    .pm-fotos-videos video {
      width: calc(25% - 5px);
      min-width: 100px;
      aspect-ratio: 9 / 16;
      border-radius: 4px;
      display: block;
      background: #111;
    }

    .pm-schliessen {
      position: absolute;
      top: 14px;
      left: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      z-index: 1000;
      backdrop-filter: blur(8px);
    }
    .pm-schliessen:hover { background: rgba(255,255,255,0.2); }
    @media (max-width: 900px) {
      .pm-schliessen {
        top: 10px;
        left: auto;
        right: 14px;
      }
    }

    /* ══════════════════════════════════════════
       KONTAKT
    ══════════════════════════════════════════ */
    #kontakt {
      text-align: center;
      min-height: auto;
      padding: 80px var(--pad-x) 60px;
    }

    #kontakt .inner {
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
    }

    #kontakt .abschnitt-label { margin-bottom: 20px; }

    #kontakt h2 {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(16px, 5.5vw, 68px);
      letter-spacing: 0.04em;
      margin: 16px 0 20px;
      line-height: 1.05;
      text-transform: uppercase;
      overflow-wrap: normal;
      word-break: normal;
    }

    #kontakt p {
      font-size: 15px;
      color: #777;
      margin-bottom: 40px;
      line-height: 1.8;
      font-weight: 300;
    }

    /* ── Kontakt Hover-Gruppe ── */
    .kontakt-gruppe {
      display: inline-grid;
      place-items: center;
      cursor: pointer;
    }

    /* Pill und Subs liegen im selben Grid-Bereich übereinander */
    .k-pill,
    .k-subs { grid-area: 1 / 1; }

    /* Schreib-mir-Pill */
    .k-pill {
      padding: 14px 44px;
      background: var(--clr-white);
      color: var(--clr-bg);
      border-radius: 100px;
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 700;
      font-family: var(--font-body);
      white-space: nowrap;
      transition: opacity 0.18s ease;
    }
    .kontakt-gruppe:hover .k-pill {
      opacity: 0;
      pointer-events: none;
    }

    /* Drei Kreise */
    .k-subs {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }
    .kontakt-gruppe:hover .k-subs {
      opacity: 1;
      pointer-events: all;
    }

    .k-cirkel {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--clr-white);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--clr-bg);
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      border: none;
      font-family: var(--font-body);
      cursor: pointer;
      transition: width 0.38s var(--ease-out), border-radius 0.38s var(--ease-out);
    }
    .k-cirkel:hover {
      width: 230px;
      border-radius: 27px;
    }

    /* Icon: sichtbar im Kreiszustand, verschwindet beim Expandieren */
    .k-icon {
      position: absolute;
      color: rgba(0,0,0,0.4);
      transition: opacity 0.18s ease;
      pointer-events: none;
    }
    .k-cirkel:hover .k-icon { opacity: 0; }

    .k-cirkel span {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      font-family: var(--font-body);
      white-space: nowrap;
      max-width: 0;
      overflow: hidden;
      opacity: 0;
      position: relative;
      transition: max-width 0.32s var(--ease-out) 0.08s, opacity 0.2s ease 0.08s;
    }
    .k-cirkel:hover span {
      max-width: 220px;
      opacity: 1;
    }

    #emailKopieren:hover {
      width: 230px;
    }
    #emailKopieren span {
      font-size: 10px;
      letter-spacing: 0.06em;
    }

    /* ── Kontakt: Mobile untereinander ── */
    @media (max-width: 600px) {
      #kontakt .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
    }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    .impressum-modal {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .impressum-modal.offen { opacity: 1; pointer-events: all; }
    .impressum-modal-bg {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(6px);
      cursor: pointer;
    }
    .impressum-panel {
      position: relative;
      z-index: 1;
      background: #111;
      border: 0.5px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 40px;
      width: min(420px, 90vw);
      transform: translateY(16px);
      transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .impressum-modal.offen .impressum-panel { transform: translateY(0); }
    .impressum-schliessen {
      position: absolute;
      top: 14px; right: 14px;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.07);
      border: none;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .impressum-titel {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #555;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .impressum-block {
      margin-bottom: 16px;
    }
    .impressum-block p {
      font-size: 13px;
      color: #777;
      line-height: 1.8;
      font-weight: 300;
    }
    .impressum-block a {
      color: #777;
      text-decoration: none;
      transition: color 0.2s;
    }
    .impressum-block a:hover { color: var(--clr-white); }

    .site-footer {
      border-top: 1px solid var(--clr-border);
      padding: 28px var(--pad-x);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .site-footer p {
      font-size: 11px;
      color: #808080;
      letter-spacing: 0.08em;
    }

    .footer-links {
      display: flex;
      gap: 24px;
    }

    .footer-links a {
      font-size: 11px;
      color: #444;
      text-decoration: none;
      letter-spacing: 0.08em;
      transition: color 0.2s ease;
    }
    .footer-links a:hover { color: var(--clr-white); }

    /* ══════════════════════════════════════════
       RESPONSIVENESS
    ══════════════════════════════════════════ */

    /* Tablet (≤ 900px) */
    @media (max-width: 900px) {
      :root { --pad-x: 32px; }

      .nav-pill { margin-top: 0; }
      .nav-links a { padding: 5px 10px; font-size: 8.5px; }
      .nav-logo { margin-right: 14px; }

      .kapitel { padding: 100px var(--pad-x); }

      #ueber-mich .inner {
        grid-template-columns: 38% 1fr;
        gap: 36px;
        width: 100%;
      }

      .projekt-grid  { grid-template-columns: 1fr; }
      .projekt-karte { aspect-ratio: 21/9; }

      .cg-grid { grid-template-columns: 1fr; }

      /* Foto: 2 Spalten auf Tablet */
      .foto-spalte:last-child { display: none; }
    }

    /* Mobile (≤ 600px) */
    @media (max-width: 600px) {
      :root { --pad-x: 20px; }

      /* Mobile: Nav oben unter Logo – erscheint erst nach Hero-Scroll */
      .site-nav {
        display: flex !important;
        top: 65px !important;
        bottom: auto !important;
        height: 34px !important;
        min-height: auto !important;
        padding: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease !important;
      }
      .site-nav.mob-sichtbar {
        opacity: 1 !important;
        pointer-events: all !important;
      }
      .site-nav.versteckt .nav-pill,
      .site-nav .nav-pill {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: inherit !important;
      }
      .nav-pill {
        overflow: visible;
        padding: 0 10px;
        width: 100%;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        gap: 0;
      }
      .nav-links {
        gap: 0;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        width: 100%;
      }
      .nav-links a {
        font-size: 9px;
        padding: 3px 2px;
        letter-spacing: 0.02em;
        white-space: nowrap;
      }
      .nav-links a.aktiv::before {
        inset: -4px -8px !important;
      }
      .mobile-tabs { display: none !important; }
      body { padding-bottom: env(safe-area-inset-bottom, 16px); }

      .kapitel { padding: 50px var(--pad-x) 30px; min-height: auto; }

      #ueber-mich .inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .portrait-wrapper { max-width: 280px; margin: 0 auto; }
      .tape-oben-links { width: 221px; left: -87px; top: -9px; }
      .tape-unten-rechts { width: 235px; right: -42px; bottom: -23px; }

      .kennzahlen { gap: 28px; }

      .showreel-kopf { flex-direction: column; align-items: flex-end; gap: 8px; padding: 0 !important; }
      .showreel-kopf h2 { text-align: right; width: 100%; }
      /* Showreel: volle Breite auf Mobile */
      .video-container {
        width: calc(100% + 2 * var(--pad-x));
        margin-left: calc(-1 * var(--pad-x));
        margin-right: 0;
      }
      .showreel-player { min-height: unset; }
      #showreelPlayer { height: auto; }

      .section-header { flex-direction: column; align-items: flex-end; gap: 8px; position: relative; z-index: 10; margin-bottom: 16px !important; }

      /* Foto: 1 Spalte auf Mobile */
      .foto-grid { flex-direction: column; }
      .foto-spalte:last-child { display: flex; }

      .cg-grid { grid-template-columns: 1fr; }

      /* Projekt-Carousel: schmalerer Rand auf Mobile */
      .projekt-karte {
        width: 88%;
        left: 6%;
      }
      .pk-btn-prev { left: 6%;  transform: translateY(-50%) translateX(-50%); }
      .pk-btn-next { right: 6%; transform: translateY(-50%) translateX(50%); }

      /* Projekt-Modal: fullscreen slide-up */
      .projekt-modal {
        padding: 0;
        align-items: flex-end;
      }
      .pm-panel {
        width: 100%;
        max-height: 93dvh;
        border-radius: 16px 16px 0 0;
      }

      /* BTS im Modal: 2 Spalten statt 3/4 */
      .pm-fotos img { width: calc(50% - 4px); }
      .pm-fotos-videos video { width: calc(50% - 4px); }
    }

    /* ══════════════════════════════════════════
       MOBILE TAB BAR
    ══════════════════════════════════════════ */
    /* Cookie Banner */
    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 800;
      padding: 14px var(--pad-x);
      background: rgba(14,14,14,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 0.5px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s ease;
    }
    .cookie-banner.versteckt {
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
    }
    @media (max-width: 600px) {
      .cookie-banner { bottom: env(safe-area-inset-bottom, 0px); flex-direction: column; align-items: flex-start; gap: 10px; }
    }
    .cookie-text {
      font-size: 11px;
      color: #666;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
    .cookie-text a {
      color: #888;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .cookie-ok {
      flex-shrink: 0;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--clr-white);
      background: none;
      border: 0.5px solid rgba(255,255,255,0.25);
      padding: 6px 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.2s, color 0.2s;
      font-family: 'Rockwell', 'Arvo', serif;
    }
    .cookie-ok:hover { border-color: rgba(255,255,255,0.6); }

    .mobile-tabs { display: none; } /* Desktop: unsichtbar */

    @media (max-width: 600px) {
      .mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(10,10,10,0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 0.5px solid rgba(255,255,255,0.08);
        z-index: 500;
      }
      .mob-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: rgba(255,255,255,0.35);
        text-decoration: none;
        font-size: 9.5px;
        letter-spacing: 0.06em;
        font-family: 'Rockwell', 'Arvo', serif;
        text-transform: lowercase;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
      }
      .mob-tab svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .mob-tab.aktiv { color: rgba(255,255,255,1); }
    }

    /* Ultrawide (≥ 1600px) */
    @media (min-width: 1600px) {
      :root { --pad-x: 80px; }
    }

    /* Logo (nur im Hero) */
    .site-logo { display: none; }

/* latin */
@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/24d27c0329b6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/2e27e76f2127.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/7c41f558372a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/96a99d48bb2f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/ec6f530fccc4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/ac6944e9e266.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/6cc017985faa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/7c41f558372a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/96a99d48bb2f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ec6f530fccc4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ac6944e9e266.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/6cc017985faa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/7c41f558372a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/96a99d48bb2f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ec6f530fccc4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ac6944e9e266.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/6cc017985faa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/7c41f558372a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/96a99d48bb2f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/ec6f530fccc4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/ac6944e9e266.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/6cc017985faa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/c11fe89ac248.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/b8ddd8a4e4a4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/5e7fee2839b4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/c7c6d6f43d26.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/7d79e606010e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/c11fe89ac248.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/b8ddd8a4e4a4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/5e7fee2839b4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/c7c6d6f43d26.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/7d79e606010e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/c11fe89ac248.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/b8ddd8a4e4a4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/5e7fee2839b4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/c7c6d6f43d26.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/7d79e606010e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/c11fe89ac248.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/b8ddd8a4e4a4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/5e7fee2839b4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/c7c6d6f43d26.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/7d79e606010e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/e83c5a4505fc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/9c2eccbf007f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/66ed72430100.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/86f39408edbf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/60c104d3a99a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/e83c5a4505fc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/9c2eccbf007f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/66ed72430100.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/86f39408edbf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/60c104d3a99a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/e83c5a4505fc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/9c2eccbf007f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/66ed72430100.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/86f39408edbf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/60c104d3a99a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}