/* ============================================================
   MANNAZ STUDIOS — Slide-Based Layout
   ============================================================ */

/* --- Fonts (Google Fonts via <link>) --- */

@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/BebasNeue-subset.woff2') format('woff2'),
       url('assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Playlist Script';
  src: url('assets/fonts/PlaylistScript-subset.woff2') format('woff2'),
       url('assets/fonts/Playlist-Free-Font/Playlist Script.otf') format('opentype');
  font-display: swap;
}

:root {
  --black: #0C0A10;
  --black-warm: #141118;
  --black-card: #1A1720;
  --grey-dark: #505060;
  --grey-mid: #707080;
  --grey-light: #9898A8;
  --grey-pale: #C0C0D0;
  --white: #F0F0F0;
  --accent-blue: #78A8D0;
  --accent-rose: #C06868;

  --font-display: 'Bebas Neue', sans-serif;
  --font-script: 'Playlist Script', cursive;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --nav-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: dark; }
body { font-family: var(--font-body); background: var(--black); color: var(--white); overflow-x: hidden; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* --- Cursor (invert blend) --- */
.cursor {
  position: fixed; width: 36px; height: 36px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: exclusion;
  will-change: transform;
  contain: layout paint; opacity: 0;
}

/* --- Page Wrapper --- */
.page-wrapper { isolation: isolate; }

/* Hide default cursor on desktop */
@media (min-width: 601px) {
  body, a, button { cursor: none; }
}

/* --- Nav --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 64px); height: var(--nav-h);
  background: rgba(12, 10, 16, 0.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(240, 240, 240, 0.06);
  transform: translateY(-100%); will-change: transform;
}
.nav__logo img { height: 36px; width: auto; }
.nav__links { display: flex; gap: clamp(20px, 3vw, 48px); }
.nav__link {
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey-pale); position: relative;
  padding: 12px 8px;
}
.nav__link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 1px; background: var(--white);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Slides (shared) --- */
.slide {
  position: relative;
  width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* ===== SLIDE 1: HERO ===== */
.hero__bg {
  position: absolute; inset: 0;
  transform: scale(1.1); will-change: transform;
}
/* Start and loop layer sit on top of each other so the handover never shows black. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; will-change: opacity;
}
/* The loop only ever fades IN, over the start layer's held last frame. */
.hero__video--loop { transition: opacity 0.35s linear; }
.hero__overlay {
  position: absolute; inset: 0;
  background: rgba(12, 10, 16, 0.45);
}
.hero__content {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  will-change: transform, opacity;
}
.hero__logo-anim {
  display: flex; align-items: center; justify-content: center;
}
.hero__logo {
  width: clamp(320px, 52vw, 720px); height: auto;
  aspect-ratio: 1454 / 684; object-fit: contain;
}
.hero__logo-static { display: none; }   /* fallback image — shown by JS only when the video can't play */
.hero__tagline {
  display: flex; gap: 0.35em;
  font-family: var(--font-script); font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--grey-pale); overflow: hidden;
  margin-top: 24px;
}
.hero__tagline .word {
  display: inline-block; transform: translateY(120%); will-change: transform;
}
.hero__line {
  width: 0; height: 1px;
  background: rgba(240, 240, 240, 0.3); will-change: width;
}
.hero__scroll-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; will-change: opacity;
}
.hero__scroll-hint span {
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-mid);
}
.hero__scroll-bar {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--grey-mid), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-bar::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--white);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(200%); }
  100% { transform: translateY(200%); }
}

/* ===== PROJEKTE (inside h-panel) ===== */
.projekte__content {
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px;
  padding: 0 clamp(24px, 4vw, 64px);
  text-align: center;
}
.projekte__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  clip-path: inset(0 0 100% 0); will-change: clip-path;
}
.projekte__line {
  width: 0; height: 1px; margin: 12px auto 16px;
  background: rgba(240, 240, 240, 0.2); will-change: width;
}
.projekte__subtitle {
  font-family: var(--font-script);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--grey-light);
  opacity: 0; transform: translateY(10px);
}
.projekte__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  margin-top: clamp(32px, 4vh, 56px);
}

/* --- Cards --- */
.card {
  position: relative;
  background: var(--black-card);
  border: 1px solid rgba(240, 240, 240, 0.06);
  border-radius: 14px;
  padding: clamp(24px, 2.5vw, 40px) clamp(16px, 1.5vw, 24px);
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 14px;
  overflow: hidden;
  opacity: 0; transform: translateY(50px) scale(0.9);
  will-change: transform, opacity;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.card:hover {
  border-color: rgba(240, 240, 240, 0.15);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.card__nr {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-display); font-size: 0.75rem;
  letter-spacing: 0.08em; color: var(--grey-dark);
}
.card__icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.card__icon img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0.85);
  transition: transform 0.5s var(--ease-out);
}
.card:hover .card__icon img { transform: scale(1.12) rotate(-3deg); }
.card__title {
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.card__text {
  font-size: 0.85rem; line-height: 1.65; color: var(--grey-light);
}
.card__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(240,240,240,0.04) 45%, rgba(240,240,240,0.07) 50%, rgba(240,240,240,0.04) 55%, transparent 60%);
  transform: translateX(-100%); will-change: transform;
}
.card:hover .card__shine { animation: shine 0.7s ease-out forwards; }
@keyframes shine { to { transform: translateX(100%); } }

/* Hover-revealed background video (the shine "uncovers" it, wiping L→R) */
.card__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 100% 0 0);          /* hidden until hover */
  transition: clip-path 0.7s var(--ease-out);
  pointer-events: none;
}
.card__media-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,10,16,0.30) 0%, rgba(12,10,16,0.72) 100%);
  opacity: 0; transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.card:hover .card__video { clip-path: inset(0 0 0 0); }
.card:hover .card__media-scrim { opacity: 1; }
/* keep card content above the revealed media */
.card__nr, .card__icon, .card__title, .card__text { position: relative; z-index: 2; }
.card__shine { z-index: 3; }               /* gloss sits on top of everything */

/* Full-cover click target — keeps the heading valid outside the <button> */
.card__open {
  position: absolute; inset: 0; z-index: 4;
  background: none; border: 0; padding: 0;
  cursor: inherit;
}

/* ===== SLIDE 2: PROJEKTE ===== */
.slide--projekte {
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.panel__bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.12; pointer-events: none; z-index: 0;
}
.panel__bg-video--light {
  opacity: 0.06;
}
.panel__bg-overlay {
  position: absolute; inset: 0;
  background: rgba(12, 10, 16, 0.6); pointer-events: none;
}

/* ===== SLIDE 3: ABOUT ===== */
.slide--about {
  background: var(--white); color: var(--black);
  display: flex; align-items: center; justify-content: center;
}

/* ===== ABOUT (inside transition panel) ===== */
.about__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 100px);
  max-width: 1050px; width: 100%;
  padding: 0 clamp(24px, 4vw, 64px);
  align-items: center;
}
.about__image-col { display: flex; justify-content: center; position: relative; }
.about__brush {
  position: absolute;
  width: 130%; max-width: 480px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.about__mask {
  overflow: hidden; border-radius: 12px;
  max-width: 360px; position: relative; z-index: 1;
  clip-path: inset(100% 0 0 0); will-change: clip-path;
}
.about__portrait {
  width: 100%; height: auto; border-radius: 12px;
  transform: scale(1.15); will-change: transform;
}
.about__text-col {
  display: flex; flex-direction: column; gap: 18px;
}
.about__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--black);
  clip-path: inset(0 0 100% 0); will-change: clip-path;
}
.about__line {
  width: 0; height: 1px;
  background: rgba(12, 10, 16, 0.2); will-change: width;
}
.about__text {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.75; color: var(--grey-dark);
  opacity: 0; transform: translateY(15px);
}
.about__quote {
  padding: 16px 0 16px 20px;
  border-left: 2px solid var(--grey-mid);
  opacity: 0; will-change: opacity;
}
.about__quote p {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--black-warm); line-height: 1.5;
}
.about__stamp {
  width: clamp(120px, 12vw, 180px); opacity: 0;
}

/* ===== SLIDE 4: KONTAKT ===== */
.slide--kontakt {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.kontakt__bg {
  position: absolute; inset: 0; z-index: 0;
}
.kontakt__video { width: 100%; height: 100%; object-fit: cover; }
.kontakt__overlay {
  position: absolute; inset: 0;
  background: rgba(12, 10, 16, 0.72);
}
.kontakt__content {
  position: relative; z-index: 1;
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  max-width: 600px; width: 100%;
  padding: 0 24px;
}
.kontakt__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  clip-path: inset(0 0 100% 0); will-change: clip-path;
}
.kontakt__subtitle {
  font-family: var(--font-script);
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--grey-light);
  opacity: 0; transform: translateY(10px);
}
.kontakt__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 44px; margin: 8px 0;
  border: 1px solid var(--white); border-radius: 60px;
  font-family: var(--font-display); font-size: 0.9rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.4s, color 0.4s;
  opacity: 0; transform: translateY(15px);
  will-change: transform;
}
.kontakt__cta:hover { background: var(--white); color: var(--black); }
.kontakt__arrow {
  font-size: 1.1rem; display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.kontakt__cta:hover .kontakt__arrow { transform: translateX(6px); }
.kontakt__details {
  display: flex; flex-wrap: wrap; gap: 36px;
  justify-content: center; margin-top: 12px;
}
.kontakt__detail {
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transform: translateY(10px);
}
.kontakt__label {
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-mid);
}
.kontakt__detail a {
  color: var(--grey-pale); font-size: 0.9rem;
  transition: color 0.3s;
}
.kontakt__detail a:hover { color: var(--white); }
.kontakt__social {
  display: flex; gap: 20px; margin-top: 8px;
}
.kontakt__social a {
  width: 36px; height: 36px;
  display: flex;
  transition: transform 0.3s var(--ease-out);
}
.kontakt__social a img { width: 100%; height: 100%; object-fit: contain; }
.kontakt__social a:hover { transform: scale(1.15) rotate(-4deg); }

/* --- Footer (inside kontakt) --- */
.footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  border-top: 1px solid rgba(240, 240, 240, 0.06);
}
.footer__social { display: flex; gap: 20px; }
.footer__social a {
  width: 36px; height: 36px;
  display: flex;
  transition: transform 0.3s var(--ease-out);
}
.footer__social a img { width: 100%; height: 100%; object-fit: contain; }
.footer__social a:hover { transform: scale(1.15) rotate(-4deg); }
.footer__copy {
  font-size: 0.75rem; color: var(--grey-mid); letter-spacing: 0.04em;
}

/* ============================================================
   SERVICE DECK — the clicked grid card grows (GSAP FLIP) into a
   larger centred card over a dimmed backdrop; scroll/Esc/× closes.
   ============================================================ */
.deck {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vh, 48px);
}
.deck[hidden] { display: none; }

/* Dimmed background behind the expanded card */
.deck__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 5, 9, 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;                      /* GSAP fades it in */
}

/* The expanded card — grows from the clicked grid card */
.deck__card {
  position: relative; z-index: 1;
  width: min(1120px, 100%); height: min(700px, 100%);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

.deck__stage { position: absolute; inset: 0; }

/* Each service is a full-bleed panel; only the active one is shown */
.deck__panel {
  position: absolute; inset: 0;
  background: var(--black);
  display: flex; overflow-y: auto;
  opacity: 0; visibility: hidden;
}
.deck__panel.is-active { opacity: 1; visibility: visible; }

.deck__bg-container {
  position: absolute; inset: 0; z-index: 0;
  background: var(--black);
}

.deck__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Punchier footage so the stroke reads as a lit shape on black. Clipped to
     the brush by the container mask (applied after filter) — stays on-shape. */
  filter: contrast(1.08) saturate(1.12) brightness(1.06);
}
/* Directional gradient — radial gradient centred, dimming all edges for readability */
.deck__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle, rgba(12,10,16,0.40) 0%, rgba(12,10,16,0.48) 88%);
}
/* Constant base tint: keeps the brush shape visible even when the footage is
   dark (e.g. Digital). mix-blend-mode: screen lifts ONLY the dark areas toward a
   brand blue floor; bright footage (Konzept/Print) stays bright. Sits above the
   video+scrim; clipped to the brush by the container mask, so zero spread. */
.deck__bg-container::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: #1a2540;
  mix-blend-mode: screen;
  opacity: 0.6;          /* strength of the base tint: 0 = pure video, 1 = full
                            floor. Lower lets the footage colours show more but
                            rescues dark panels less. */
  pointer-events: none;
}

/* Text sits directly on the footage — vertically and horizontally centred */
.deck__panel-inner {
  position: relative; z-index: 2;
  margin: auto;                     /* center horizontally & vertically */
  width: min(1000px, 90%);
  display: flex; flex-direction: column;
  align-items: center;              /* center align items */
  text-align: center;
  padding: clamp(36px, 6vh, 68px) clamp(20px, 4vw, 56px);
}
.deck__ghost { display: none; }   /* ghost number: desktop-only watermark */
.deck__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: 0.03em; text-transform: uppercase;
  line-height: 0.96;
}
.deck__subtitle {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  color: var(--accent-blue);
  margin-top: 10px;
}
.deck__line {
  width: clamp(48px, 7vw, 88px); height: 1px; background: var(--accent-blue);
  margin: clamp(16px, 2.4vh, 26px) auto clamp(14px, 2vh, 22px);
}
.deck__list {
  list-style: none;
  columns: 3; column-gap: clamp(20px, 3.5vw, 50px);
  width: 100%;
  text-align: left;
  margin-top: clamp(16px, 2.5vh, 32px);
}
.deck__list li {
  break-inside: avoid;
  position: relative; padding-left: 22px;
  margin-bottom: clamp(9px, 1.4vh, 15px);
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.45; color: var(--grey-pale);
}
.deck__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 1px; background: var(--accent-blue);
}

/* Close (accessibility / mouse) */
.deck__close {
  position: absolute; z-index: 4;
  top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240, 240, 240, 0.06);
  border: 1px solid rgba(240, 240, 240, 0.12);
  color: var(--white); font-size: 1.7rem; line-height: 1;
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.deck__close:hover { background: rgba(240, 240, 240, 0.14); transform: rotate(90deg); }

/* Scroll-to-return hint (bottom-left of the card, pulsing like the hero) */
.deck__hint {
  display: none;   /* "Scrollen zum Zurückkehren" removed per request */
  position: absolute; z-index: 4;
  left: clamp(28px, 4vw, 56px); bottom: clamp(20px, 3vh, 30px);
  align-items: center; gap: 14px;
  color: var(--grey-mid);
}
.deck__hint-bar {
  position: relative; width: 1px; height: 36px; overflow: hidden;
  background: linear-gradient(to bottom, transparent, rgba(240,240,240,0.25), transparent);
}
.deck__hint-bar::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--white);
  animation: scrollPulse 2s ease-in-out infinite;
}
.deck__hint-text {
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}

/* --- Desktop: straight horizontal brush-stroke card --- */
/* --- Responsive Brush Stroke (Global) --- */
  .deck__card {
    width: 96vw;                  /* brush spans the screen, frayed ends visible */
    height: clamp(320px, 40vw, 540px);   /* flatter so the content fills the stroke, less empty video */
    border-radius: 0;
    overflow: visible;
    flex-shrink: 0;
    background: transparent;
    box-shadow: none;             /* no rectangular frame — only the brush shows */
    transform: none;              /* straight horizontal stroke across the screen */
    will-change: auto;            /* don't create a containing block for the fixed × */
  }
  .deck__stage {
    position: absolute; inset: 0;
    overflow: visible; /* stage also needs overflow visible to let title leak out of the card */
  }
  .deck__panel { overflow: visible; background: transparent; }   /* no black rectangle */

  /* (1) The VIDEO is shaped into the brush stroke AND wiped in:
     two mask layers intersected — brush-shape.png (organic solid silhouette,
     frayed ends) ∩ brush-edge.png (the wipe edge sweeping left -> right).
     --reveal (set by JS) drives the wipe. */
  .deck__bg-container {
    clip-path: none;   /* silhouette now comes from the brush-shape mask */
    -webkit-mask-image: url(assets/img/brush-shape.png?v=3), url(assets/img/brush-edge.png);
            mask-image: url(assets/img/brush-shape.png?v=3), url(assets/img/brush-edge.png);
    -webkit-mask-repeat: no-repeat, no-repeat;  mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 250% 100%;    mask-size: 100% 100%, 250% 100%;
    -webkit-mask-position: center, var(--reveal, 96%) center;
            mask-position: center, var(--reveal, 96%) center;
    -webkit-mask-composite: source-in;  mask-composite: intersect;
  }
  /* (2) The TEXT (title, subtitle, list) is NOT masked — it floats over the
     brush and is never clipped. It fades in/out with the paint (opacity, JS). */
  .deck__panel.is-erase .deck__bg-container {
    -webkit-mask-image: url(assets/img/brush-shape.png?v=3), url(assets/img/brush-edge-rev.png);
            mask-image: url(assets/img/brush-shape.png?v=3), url(assets/img/brush-edge-rev.png);
  }
  /* (2) TEXT: editorial — a big title breaking over the stroke's top edge, a
     tilted script "signature", a ghost number behind, keywords in one row. */
  .deck__panel-inner {
    position: absolute; inset: 0;
    margin: 0; padding: 0;
    width: auto; max-width: none;          /* Override inherited 1000px limit from mobile CSS so it stretches fully */
    display: block; text-align: left;
    --list-font: clamp(0.65rem, 1.5vw, 1.05rem);
    --list-width: calc(40.5 * var(--list-font));
    --list-half: calc(20.25 * var(--list-font));
  }
  .deck__ghost {
    position: absolute;
    left: 50%; top: 42%; transform: translate(-50%, -50%);   /* centred watermark */
    font-family: var(--font-display);
    font-size: clamp(14rem, 24vw, 26rem);
    font-weight: 700; line-height: 1;
    color: rgba(240, 240, 240, 0.045);
    pointer-events: none; z-index: 0;
  }
  .deck__title {
    position: absolute; z-index: 2;
    left: max(4vw, calc(50% - var(--list-half))); top: 18%;
    transform: translateY(-50%);
    text-align: left; margin: 0;
    font-size: clamp(2.4rem, 6.5vw, 7rem);            /* Reduced min-size for mobile */
    line-height: 0.9;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
  }
  .deck__subtitle {
    position: absolute; z-index: 3;
    /* starts under the "P" of the title (= title-left + width of "KONZE" ≈ 2.1× font) */
    left: calc(max(4vw, 50% - var(--list-half)) + clamp(2.4rem, 6.5vw, 7rem) * 2.1); top: 26%;
    transform: translateY(-50%) rotate(-5deg);      /* below the P, tilts up to the right */
    text-align: left; margin: 0; padding-left: 0;
    font-size: clamp(1.1rem, 2.2vw, 2.4rem);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
  }
  /* Print & Production: long title — flush-left, with the full-size signature
     (like the other panels) sitting fully UNDER the title; list nudged down. */
  .deck__panel[data-service="print"] .deck__title {
    left: max(4vw, calc(50% - var(--list-half)));
  }
  .deck__panel[data-service="print"] .deck__subtitle {
    /* tucked under the title's tail (right of "PRODUCTION"), lifted up.
       The min() cap keeps the nowrap script line on-screen on narrow
       viewports: 13rem/29vw ~ rendered text width plus a small margin. */
    left: min(calc(max(4vw, 50% - var(--list-half)) + clamp(2.4rem, 6.5vw, 7rem) * 6.0),
              calc(100% - max(13rem, 29vw)));
    top: 28%;
  }

  .deck__line { display: none; }
  .deck__list {
    position: absolute; z-index: 2;
    left: 0; right: 0; margin: 0 auto;       /* Dead center over the video circle */
    width: 100%;                             /* MUST be 100% so left edge is at 0 (or 4vw with padding) */
    max-width: var(--list-width);            /* perfectly tracks the text width! */
    padding: 0 4vw;                          /* prevent touching edges on mobile */
    top: 50%; transform: translateY(-50%);
    display: flex; flex-wrap: wrap;
    justify-content: center;                 /* Center the text! "center center" */
    text-align: center;
    align-items: center; row-gap: 12px;
    column-gap: 0;                           /* overrides inherited 50px gap from base CSS */
  }
  .deck__list li {
    margin: 0; padding: 0;
    font-family: var(--font-display);
    font-size: var(--list-font);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--grey-pale); white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    display: flex; align-items: center;
  }
  .deck__list li::before { display: none; }
  .deck__list li::after {                  /* DOT placed at the END so wrapped lines start flush left */
    content: ''; position: static;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-blue);
    margin: 0 clamp(8px, 1vw, 14px);       /* margin around the dot */
    flex-shrink: 0;
  }
  .deck__list li:last-child::after { display: none; }
  .deck__close {
    position: fixed;              /* pin to the viewport, not the off-screen card edge */
    top: 22px; right: 26px;
    transform: none;
  }
  .deck__close:hover {
    background: rgba(240, 240, 240, 0.14);
    transform: rotate(90deg);
  }
  .deck__hint {
    left: clamp(40px, 8vw, 130px);
    bottom: clamp(14px, 2.4vh, 26px);
  }
/* --- Burger Menu (hidden on desktop) --- */
.nav__burger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; z-index: 101;
}
.nav__burger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav__burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Responsive: Tablet (≤ 900px) --- */
@media (max-width: 900px) {
  .projekte__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; text-align: center; }
  .about__mask { max-width: 260px; margin: 0 auto; }
  .about__quote { border-left: none; padding-left: 0; }
}

/* --- Responsive: Mobile (≤ 600px) --- */
@media (max-width: 600px) {
  :root { --nav-h: 56px; }

  /* Burger + slide-in drawer */
  .nav__burger { display: flex; }
  .nav { padding: 0 16px; }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    width: 260px; height: 100vh; height: 100dvh;
    z-index: 100;
    background: var(--black-warm);
    border-left: 1px solid rgba(240, 240, 240, 0.08);
    display: flex; flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 40px;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link {
    font-size: 1.1rem; padding: 18px 0;
    letter-spacing: 0.12em;
    width: 100%;
    border-bottom: 1px solid rgba(240, 240, 240, 0.06);
  }

  /* Hero — fit content vertically */
  .hero__content { padding: var(--nav-h) 20px 0; }
  .hero__logo { width: clamp(260px, 82vw, 420px); }
  .hero__tagline {
    font-size: clamp(1.3rem, 5vw, 2rem);
    flex-wrap: wrap; justify-content: center;
    margin-top: 20px;
  }
  .hero__scroll-hint { bottom: 20px; }

  /* Projekte — 2x2 grid stays, compact */
  .projekte__content { padding: var(--nav-h) 12px 0; }
  .projekte__title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .projekte__subtitle { font-size: clamp(0.8rem, 3vw, 1.1rem); }
  .projekte__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }
  .card {
    padding: 14px 10px;
    gap: 8px;
    border-radius: 10px;
  }
  .card__icon { width: 36px; height: 36px; }
  .card__title { font-size: 0.75rem; }
  .card__text { font-size: 0.65rem; line-height: 1.4; }
  .card__nr { font-size: 0.55rem; top: 6px; right: 8px; }
  .projekte__line { margin: 6px auto 8px; }

  /* About — 1 column but compact */
  .about__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
    padding: var(--nav-h) 16px 0;
    align-items: start;
  }
  .about__image-col { order: -1; }
  .about__mask { max-width: 160px; margin: 0 auto; }
  .about__brush { width: 140%; }
  .about__portrait { border-radius: 8px; }
  .about__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .about__text { font-size: 0.78rem; line-height: 1.5; }
  .about__quote p { font-size: clamp(0.85rem, 3vw, 1.1rem); padding: 0; }
  .about__stamp { width: 100px; margin: 0 auto; }
  .about__line { margin: 4px auto 6px; }

  /* Kontakt — compact */
  .kontakt__content { padding: var(--nav-h) 16px 80px; gap: 12px; }
  .kontakt__title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .kontakt__subtitle { font-size: clamp(0.8rem, 3vw, 1.1rem); }
  .kontakt__cta { padding: 12px 28px; font-size: 0.75rem; }
  .kontakt__details { flex-direction: column; gap: 12px; }
  .kontakt__detail a { font-size: 0.78rem; }
  .kontakt__social { gap: 14px; }
  .kontakt__social a { width: 30px; height: 30px; }

  /* Footer */
  .footer { padding: 12px; }
  .footer__copy { font-size: 0.65rem; }

  /* Deck — single-column, full-width text block */
  .deck__panel-inner { width: 100%; padding: 56px 20px 60px; align-items: flex-start; text-align: left; }
  .deck__line { margin-left: 0; margin-right: auto; }
  .deck__list { columns: 1; }
  .deck__close { width: 40px; height: 40px; font-size: 1.4rem; top: 12px; right: 12px; }
  .deck__hint { left: 20px; bottom: 16px; }
  .deck__hint-text { font-size: 0.62rem; letter-spacing: 0.16em; }

  /* No cursor on mobile */
  .cursor { display: none; }
}

/* --- Mobile portrait: stand the brush stroke up ---------------------------
   A horizontal stripe stretched across a tall phone leaves the footage a thin
   flat band. In portrait the silhouette is rotated 90° instead, so the stroke
   runs down the screen and shows far more of the video. Only the MASK is
   rotated — the footage inside stays upright. The wipe edge is dropped here
   because useBrush() (main.js) already disables the sweep below 768px. */
@media (max-width: 768px) and (orientation: portrait) {
  .deck__card {
    width: min(88vw, 460px);
    height: min(76vh, 780px);
  }
  .deck__bg-container,
  .deck__panel.is-erase .deck__bg-container {
    -webkit-mask-image: url(assets/img/brush-shape-v.png?v=2);
            mask-image: url(assets/img/brush-shape-v.png?v=2);
    -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;        mask-size: 100% 100%;
    -webkit-mask-position: center;       mask-position: center;
    -webkit-mask-composite: source-over; mask-composite: add;
  }

  /* Title, script line and keyword list form ONE centred group here. The desktop
     layout positions all three absolutely at fixed percentages, which pulls them
     apart as the portrait card grows taller. In flow they stay a fixed distance
     from each other on every device. The ghost stays absolute (watermark). */
  .deck__panel-inner {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    padding: 0 7vw;
    text-align: center;
  }
  .deck__title,
  .deck__panel[data-service="print"] .deck__title,
  .deck__subtitle,
  .deck__panel[data-service="print"] .deck__subtitle,
  .deck__list {
    position: static;
    left: auto; right: auto; top: auto;
    margin: 0; padding: 0;
    max-width: 100%;
  }
  .deck__title,
  .deck__panel[data-service="print"] .deck__title {
    transform: none; text-align: center;
    font-size: clamp(1.8rem, 7.5vw, 2.9rem);
    line-height: 1;
  }
  .deck__subtitle,
  .deck__panel[data-service="print"] .deck__subtitle {
    transform: rotate(-4deg);            /* rotation only — no layout offset */
    text-align: center;
    font-size: clamp(1rem, 4.2vw, 1.4rem);
    white-space: normal;                 /* long subtitles wrap instead of clipping */
  }
  .deck__list {
    transform: none;
    width: 100%;
    margin-top: clamp(4px, 1.4vw, 10px);
    row-gap: 10px;
  }
  .deck__ghost { top: 50%; font-size: clamp(9rem, 38vw, 15rem); }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .cursor { display: none; }
  .projekte__title, .about__title,
  .kontakt__title { clip-path: none; }
  .hero__tagline .word { transform: none; }
  .hero__logo-anim { opacity: 1; }
  .card { opacity: 1; transform: none; }
  .about__mask { clip-path: none; }
  .about__portrait { transform: none; }
  .deck__close:hover { transform: none; }
}

::selection { background: rgba(120, 168, 208, 0.3); color: var(--white); }