/* framescale — modeled on the futuredeluxe interaction spec; mobile rules at the end */

:root {
  --text: rgba(0, 0, 0, 0.8);
  --brand: #fe8076;          /* TODO: framescale brand colour */
  --nav-dark: #363a3e;
  --gutter: 30px;
  --hero-h: 750px;           /* hero height = content offset */
  --fade-dist: 300px;        /* scroll distance until hero is fully white (used in JS) */
  --radius: 14px;            /* rounded corners for cards */
  --muted: rgba(0, 0, 0, 0.35);
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  background: #fff;          /* the white the hero fades into */
  color: var(--text);
  font-family: "Gothic A1", sans-serif;
  font-weight: 300;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, video { display: block; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 40px var(--gutter) 0;
  pointer-events: none;
}
.header a { pointer-events: auto; }

.logo img {
  height: 40px;
  width: auto;
  transition: filter 0.3s ease-in-out;
}

.nav {
  margin-left: auto;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
/* menu only at the very top; slides away as soon as you scroll (logo stays) */
.header.nav-hidden .nav {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.nav ul { display: flex; gap: 28px; }
.nav a {
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.nav a:hover { border-color: var(--brand); }

/* after 300px scroll: header switches to dark on white */
.header.active .nav a,
.hero-light .header .nav a { color: var(--text); }
.hero-light .header .logo img { filter: brightness(0) opacity(0.8); }
.header.active .logo img { filter: brightness(0) opacity(0.8); }

/* ---------- Hero ---------- */
.hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hero-h);
  background: #000;
  overflow: hidden;
  z-index: 0;
  will-change: opacity;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero video { opacity: 0; transition: opacity 0.8s ease-in-out; }
.hero.is-playing video { opacity: 1; }
.hero.scrolled { pointer-events: none; }
/* shown until the hero video actually plays */
.hero-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
  transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
}
.hero.is-playing .hero-loader { opacity: 0; visibility: hidden; }
.hero-loader img { width: 150px; height: auto; filter: brightness(0); opacity: 0.85; }
.hero-loader span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  animation: loaderPulse 1.6s ease-in-out infinite;
}
@keyframes loaderPulse { 50% { opacity: 0.3; } }
/* soft top shade so the white header stays readable on bright visuals */
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.hero-light .hero::after { display: none; }

/* ---------- Content (transparent layer over the hero) ---------- */
.content {
  position: relative;
  z-index: 2;
  padding-top: var(--hero-h);
}

.statement {
  padding: 110px var(--gutter) 0;
  max-width: 1100px;
}
.statement.right { margin-left: auto; }
.statement h1,
.statement h2 {
  font-size: 32px;
  line-height: 40px;
  color: var(--text);
}
.statement h1 { font-weight: 500; }
.statement h2 { font-weight: 300; }
.statement strong { font-weight: 500; }
.statement h2.muted { color: rgba(0, 0, 0, 0.35); margin-top: 10px; }
.statement a {
  position: relative;
  border-bottom: 3px solid var(--brand);
}

/* ---------- Project grid ---------- */
.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 110px 0 0;
}
.grid .item {
  flex: 0 0 50%;
  padding: 0 var(--gutter) var(--gutter);
}
/* offset layout: right column drops, left column lifts */
.grid.offset { padding-top: 220px; }
.grid.offset .item:nth-of-type(odd)  { margin-top: -110px; }
.grid.offset .item:nth-of-type(even) { margin-top: 110px; }

.item a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.item figure {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: var(--radius);
  transform: translateZ(0); /* keeps rounded clipping during the zoom in Safari */
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 4s ease-in-out;
}
.item a:hover img { transform: scale(1.2); }

.item hgroup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 40px 30px 35px;
  pointer-events: none;
  color: #fff;
  /* soft bottom shade so titles stay readable on light product shots */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 45%);
}
.item h2,
.item h3 {
  font-size: 19px;
  line-height: 26px;
  font-weight: 300;
}
.item h2 { font-weight: 500; }
.item h3 {
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease-in-out;
}
.item a:hover h3 { border-color: #fff; }

/* ---------- Shared bits ---------- */
.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.section { padding: 160px var(--gutter) 0; }

.section-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}

/* light covers (white product shots): dark titles, no shade */
.item.light hgroup { color: var(--text); background: none; }
.item.light a:hover h3 { border-color: var(--text); }
.item.light figure { background: #f4f4f4; }

/* ---------- Coming soon (Renz card) ---------- */
.soon-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; cursor: default; }
.soon-card figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f4f4;
  transform: translateZ(0);
}
.soon-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 4s ease-in-out, filter 0.6s ease-in-out; }
.soon-card hgroup { color: var(--text); background: none; }
.soon-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.soon-overlay span {
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  transform: translateY(8px);
  transition: transform 0.6s ease-in-out;
}
.soon-card:hover .soon-overlay,
.soon-card:focus .soon-overlay { opacity: 1; }
.soon-card:hover .soon-overlay span,
.soon-card:focus .soon-overlay span { transform: none; }
.soon-card:hover img,
.soon-card:focus img { transform: scale(1.08); filter: blur(12px); }

/* ---------- Logo slider ---------- */
.logos {
  margin-top: 160px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logos-track {
  display: flex;
  width: max-content;
  will-change: transform;    /* moved by main.js; slows down smoothly on hover */
}
.logos-set { display: flex; align-items: center; }
.logos-set img {
  width: auto;
  margin-right: 100px;
  opacity: 0.85;               /* logos are pre-tinted to one gray (#8a8a8a) */
  transition: opacity 0.3s ease-in-out;
}
.logos-set img:hover { opacity: 1; }
.logos-set .lg-renz { height: 50px; }
.logos-set .lg-somira { height: 17px; }
.logos-set .lg-viasit { height: 26px; }
.logos-set .lg-belanoti { height: 17px; }
.logos-set .lg-wschillig { height: 38px; }
.logos-set .lg-kunde { height: 22px; }
.logos-set .lg-deportes { height: 62px; }
.logos-set .lg-kyo { height: 26px; }
.logos-set .lg-moebelkultur { height: 18px; }

/* ---------- Feature cards ---------- */
.feature-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.feature-card figure {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #111;
  transform: translateZ(0);
}
.feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 4s ease-in-out;
}
.feature-card:hover img { transform: scale(1.1); }
.feature-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 30px 35px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 50%);
}
.feature-info .label { color: rgba(255, 255, 255, 0.7); }
.feature-info h2,
.feature-info h3 { font-size: 19px; line-height: 26px; }
.feature-info h2 { font-weight: 500; }
.feature-info h3 {
  font-weight: 300;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease-in-out;
}
.feature-card:hover h3 { border-color: #fff; }

/* Konzept des Monats: blurred cover with "Coming soon" */
.concept figure { aspect-ratio: 21 / 9; }
.concept img {
  object-position: center 30%;
  filter: blur(10px);
  transform: scale(1.08);
  transition: filter 1s ease-in-out, transform 4s ease-in-out;
}
.concept:hover img { filter: blur(4px); transform: scale(1.12); }
.concept-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
}
.concept-veil .label { color: rgba(255, 255, 255, 0.8); }
.concept-veil strong { font-size: 43px; line-height: 49px; font-weight: 500; }
/* live concept: sharp image, links to the concept page */
.concept.is-live { display: block; color: #fff; }
.concept.is-live img { filter: none; transform: none; transition: transform 4s ease-in-out; }
.concept.is-live:hover img { filter: none; transform: scale(1.05); }
.concept.is-live .concept-veil { background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12)); }
.concept-more { margin-top: 14px; font-size: 15px; font-weight: 400; border-bottom: 1px solid rgba(255, 255, 255, 0.7); padding-bottom: 2px; }

/* ---------- Ansatz & Gründer ---------- */
.approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.approach-text p { font-size: 32px; line-height: 40px; max-width: 520px; }
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin-top: 26px;
  max-width: 520px;
}
.values li { font-size: 17px; color: var(--muted); }
.founders-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.founders-photos img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(1);
  transition: filter 0.6s ease-in-out;
}
.founders-photos img:hover { filter: none; }
.founders-caption { margin-top: 18px; font-size: 19px; font-weight: 500; line-height: 26px; }
.founders-caption .label { margin-bottom: 4px; }

/* ---------- Kundenstimmen (Slider) ---------- */
.voices {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
}
.voices > .label { grid-row: span 2; }
/* all quotes share one grid cell: the stage is as tall as the longest quote */
.voices-stage {
  display: grid;
}
.voices blockquote {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
  pointer-events: none;
}
.voices blockquote.current { opacity: 1; transform: none; pointer-events: auto; }
.voices blockquote p {
  font-size: 32px;
  line-height: 42px;
  font-weight: 300;
  max-width: 820px;
}
.voices blockquote footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.35); filter: grayscale(1); }
.avatar img[src*="deportes"] { transform: scale(0.8); }
.avatar-wide img { transform: scale(0.82); }
.avatar.initials { font-size: 16px; font-weight: 500; color: var(--muted); }
.who { font-size: 17px; font-weight: 500; line-height: 24px; }
.who small { display: block; font-size: 15px; font-weight: 300; color: var(--muted); }
.voices-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  color: var(--muted);
}
.voices-nav button {
  font: inherit;
  font-size: 20px;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
.voices-nav button:hover { opacity: 1; }

/* ---------- Bekannt aus ---------- */
.press {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: center;
}
.press figure { grid-column: 2; grid-row: 1; max-width: 900px; }
.press figure img { width: 100%; height: auto; }
.press > div { grid-column: 1; grid-row: 1; }
.press h3 { font-size: 32px; line-height: 40px; font-weight: 500; }
.press-logo { display: block; height: 30px; width: auto; margin: 6px 0 4px; }
.press p { margin-top: 10px; font-size: 17px; line-height: 26px; max-width: 360px; color: var(--muted); }

/* ---------- Projekt-CTA mit Video ---------- */
.cta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin: 180px var(--gutter) 0;
}
.cta-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f1f1f1;
}
.cta-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-text h2 { font-size: 43px; line-height: 49px; font-weight: 500; }
.cta-text p { margin-top: 14px; font-size: 21px; line-height: 29px; color: var(--muted); }
.cta-mail {
  display: inline-block;
  margin-top: 26px;
  font-size: 21px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s ease-in-out;
}
.cta-mail:hover { opacity: 0.6; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding: 16px 30px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.button:hover { transform: scale(1.03); background: #000; }

/* ---------- Case page ---------- */
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  padding: 110px var(--gutter) 0;
}
.case-intro h1 { font-size: 32px; line-height: 40px; font-weight: 500; }
.case-intro h2 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 300;
  color: var(--muted);
  max-width: 760px;
}
.case-meta { align-self: end; }
.case-meta div {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 15px;
  line-height: 22px;
}
.case-meta dt { color: var(--muted); }
.case-media {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 110px var(--gutter) 0;
}
.case-media figure.rounded { border-radius: var(--radius); overflow: hidden; }
.case-media img,
.case-media video { width: 100%; height: auto; display: block; }
.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.case-pair img { aspect-ratio: 4 / 3; object-fit: cover; }
.case-reels {
  display: grid;
  gap: var(--gutter);
  justify-content: center;
}
.case-reels.reels-2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
.case-reels.reels-4 { grid-template-columns: repeat(4, 1fr); }
.case-reels figure {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f1f1f1;
}
.case-reels video { width: 100%; height: 100%; object-fit: cover; }
.film { position: relative; background: #000; }
.film video { aspect-ratio: 16 / 9; object-fit: cover; }
/* small glass pill bottom-right; the video itself stays untouched on hover */
.sound-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.sound-toggle:hover { background: rgba(0, 0, 0, 0.45); transform: scale(1.04); }
.sound-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  /* speaker, muted */
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z' fill='black'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E");
}
.film.sound-on .sound-icon {
  /* speaker, sound on */
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z' fill='black'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}
.case-text {
  max-width: 620px;
  font-size: 21px;
  line-height: 29px;
}
/* Case copy: image captions, labeled paragraphs, two-column text */
.case-item figure.rounded { border-radius: var(--radius); overflow: hidden; }
.case-caption { margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--muted); }
.case-caption span { color: var(--text); font-weight: 500; }
.case-copy {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: baseline;
}
.case-copy p { font-size: 21px; line-height: 31px; max-width: 760px; }
.case-copy-cols {
  display: grid;
  grid-auto-flow: column;      /* one column per text block (2 or 3) */
  grid-auto-columns: 1fr;
  gap: 48px;
}
.case-copy-cols p { font-size: 17px; line-height: 27px; max-width: 540px; }

/* Case results: three big numbers in a row */
.case-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 26px;
}
.case-stats strong { display: block; font-size: 54px; line-height: 60px; font-weight: 500; letter-spacing: -0.01em; }
.case-stats span:not(.label) { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }

/* Website link below the last case image: quiet outlined pill */
.site-link { display: flex; justify-content: center; }
.site-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.site-link a:hover { color: var(--text); border-color: rgba(0, 0, 0, 0.5); }

/* "Mehr Cases" banner: slim and quiet, slow zoom on hover */
.more-cases {
  position: relative;
  display: block;
  max-width: 1040px;           /* a touch smaller than full width, centered */
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
}
.more-cases figure {
  aspect-ratio: 2000 / 857;   /* full collage, nothing cropped */
  overflow: hidden;
  background: #f1f1f1;
  transform: translateZ(0);
}
.more-cases img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 4s ease-in-out;
}
.more-cases:hover img { transform: scale(1.05); }
.more-cases-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 24px 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 60%);
}
.more-cases-text strong { font-size: 28px; line-height: 34px; font-weight: 500; }
.more-cases-arrow {
  font-size: 24px;
  line-height: 34px;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.more-cases:hover .more-cases-arrow { transform: none; opacity: 1; }

/* ---------- Fade-in on scroll ---------- */
[data-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
[data-fade].in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.footer-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gutter);
  margin-top: 120px;
  padding: 60px var(--gutter) 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.footer-logo { height: 36px; width: auto; filter: brightness(0) opacity(0.8); }
.footer-main h4 {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-main li { font-size: 16px; line-height: 26px; }
.footer-main a:hover { color: var(--brand); }
.footer-lite {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--gutter) 30px;
  font-size: 14px;
  color: var(--muted);
}
.footer-lite p a + a { margin-left: 20px; }
.footer-lite a:hover { color: var(--text); }

/* ---------- Impressum / Datenschutz ---------- */
.legal {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 180px var(--gutter) 0;
}
.legal h1 { font-size: 43px; line-height: 49px; font-weight: 500; }
.legal-lead { margin-top: 10px; font-size: 17px; color: var(--muted); }
.legal section { margin-top: 48px; }
.legal h2 { font-size: 21px; line-height: 29px; font-weight: 500; margin-bottom: 10px; }
.legal h3 { font-size: 17px; line-height: 26px; font-weight: 500; margin: 22px 0 6px; }
.legal p,
.legal li { font-size: 16px; line-height: 26px; }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 20px; margin: 10px 0 12px; }
.legal a { border-bottom: 1px solid rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
.legal a:hover { border-color: currentColor; }
.legal strong { font-weight: 500; }

/* Mockups that end in a hard cut: the image itself fades out into the white page */
.fade-bottom img {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
}

/* ---------- Über uns ---------- */
.about-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: baseline;
  padding: 120px var(--gutter) 0;
}
.about-row p,
.about-list li { font-size: 21px; line-height: 31px; max-width: 760px; }
.about-lead { font-size: 26px !important; line-height: 36px !important; }
.about-list { list-style: none; }
.about-list li + li { margin-top: 6px; }
.about-values strong { font-weight: 500; }
.about-image { padding: 140px var(--gutter) 20px; }
.about-image figure { max-width: 900px; margin-left: auto; border-radius: var(--radius); overflow: hidden; }
.about-image img { width: 100%; height: auto; display: block; }
.about-founders { max-width: 620px; }
.about-founders figcaption { margin-top: 12px; font-size: 17px; font-weight: 500; line-height: 24px; }
.about-founders figcaption small { display: block; font-size: 15px; font-weight: 300; color: var(--muted); }
.about-place { margin-top: 24px; color: var(--muted); }
.about-row .cta-mail { margin-top: 0; }
.about-row-top { align-items: start; }
.about-image-left figure { margin-left: 0; margin-right: auto; }
.career-mail { margin-top: 22px; }

/* ---------- KI-Hinweis unten rechts ---------- */
.ai-note {
  position: fixed;
  right: var(--gutter);
  bottom: 18px;
  z-index: 90;
  font-family: "Gothic A1", sans-serif;
  font-size: 11px;
  font-weight: 500;          /* same face/weight as the menu */
  letter-spacing: 0.02em;
  color: #fff;
  mix-blend-mode: difference; /* stays readable on light and dark backgrounds */
  opacity: 0.45;
  pointer-events: none;
}
.ai-note { transition: opacity 0.4s ease-in-out; }
.ai-note.is-hidden { opacity: 0; }

/* Impressum / Datenschutz: logo gets out of the way while reading */
.header .logo { transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
.header.logo-hidden .logo { opacity: 0; transform: translateY(-12px); pointer-events: none; }

/* =========================================================
   Mobile menu toggle (hidden on desktop)
   ========================================================= */
.menu-toggle { display: none; }

/* =========================================================
   Mobile (≤ 820px): same layout and effects, one column
   ========================================================= */
@media (max-width: 820px) {
  :root {
    --gutter: 18px;
    --hero-h: 72vh;
    --radius: 12px;
  }
  @supports (height: 1svh) { :root { --hero-h: 72svh; } }
  /* Homepage: the phone video is 5:4, so the header takes its shape and shows it uncropped */
  body.home { --hero-h: 80vw; }

  /* Header + menu overlay */
  /* page runs under the iPhone status bar (viewport-fit=cover); keep logo + menu below it */
  .header { padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
  .logo,
  .menu-toggle { position: relative; z-index: 2; }
  .logo img { height: 30px; }

  .menu-toggle {
    display: block;
    margin-left: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    transition: color 0.3s ease-in-out;
  }
  .menu-toggle span {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.4s ease-in-out, top 0.4s ease-in-out;
  }
  .menu-toggle span:first-child { top: 11px; }
  .menu-toggle span:last-child { top: 19px; }
  .header.active .menu-toggle,
  .hero-light .header .menu-toggle,
  .header.menu-open .menu-toggle { color: var(--text); }
  .header.menu-open .menu-toggle span:first-child { top: 15px; transform: rotate(45deg); }
  .header.menu-open .menu-toggle span:last-child { top: 15px; transform: rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: 0 var(--gutter) calc(90px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    opacity: 0;
    transform: none;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
  }
  .header.nav-hidden .nav { transform: none; }
  .header.menu-open .nav { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 10px; }
  .nav li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .header.menu-open .nav li { opacity: 1; transform: none; }
  .header.menu-open .nav li:nth-child(2) { transition-delay: 0.08s; }
  .header.menu-open .nav li:nth-child(3) { transition-delay: 0.16s; }
  .header.menu-open .nav li:nth-child(4) { transition-delay: 0.24s; }
  .nav a,
  .header.active .nav a,
  .hero-light .header .nav a {
    font-size: 36px;
    line-height: 44px;
    color: var(--text);
  }
  .header.menu-open .logo img { filter: brightness(0) opacity(0.8); }
  .header.menu-open.logo-hidden .logo { opacity: 1; transform: none; pointer-events: auto; }
  html.menu-lock { overflow: hidden; }

  /* Hero + statement */
  .hero::after { height: 120px; }
  .statement { padding: 56px var(--gutter) 0; }
  .statement h1,
  .statement h2 { font-size: 24px; line-height: 31px; }

  /* Project grid: single column, no offset */
  .grid { padding-top: 48px; }
  .grid.offset { padding-top: 48px; }
  .grid .item,
  .grid.offset .item:nth-of-type(odd),
  .grid.offset .item:nth-of-type(even) {
    flex: 0 0 100%;
    margin-top: 0;
    padding: 0 var(--gutter) 22px;
  }
  .item hgroup { padding: 14px 18px 16px; }
  .item h2,
  .item h3 { font-size: 16px; line-height: 22px; }
  .soon-overlay span { font-size: 16px; }

  .section { padding: 90px var(--gutter) 0; }

  /* Logos */
  .logos { margin-top: 80px; }
  .logos-set img { margin-right: 48px; }
  .logos-set .lg-renz { height: 36px; }
  .logos-set .lg-somira { height: 12px; }
  .logos-set .lg-viasit { height: 18px; }
  .logos-set .lg-belanoti { height: 12px; }
  .logos-set .lg-wschillig { height: 27px; }
  .logos-set .lg-kunde { height: 16px; }
  .logos-set .lg-deportes { height: 44px; }
  .logos-set .lg-kyo { height: 18px; }
  .logos-set .lg-moebelkultur { height: 13px; }

  /* Press */
  .press { grid-template-columns: 1fr; gap: 20px; }
  .press > div { grid-column: 1; grid-row: 1; }
  .press figure { grid-column: 1; grid-row: 2; }
  .press-logo { height: 24px; }
  .press p { font-size: 16px; line-height: 24px; }

  /* Konzept des Monats */
  .concept figure { aspect-ratio: 4 / 3; }
  .concept-veil strong { font-size: 30px; line-height: 36px; }

  /* Ansatz & Gründer */
  .approach { grid-template-columns: 1fr; gap: 44px; }
  .approach-text p { font-size: 24px; line-height: 31px; }
  .values { gap: 6px 20px; margin-top: 18px; }
  .values li { font-size: 15px; }
  .founders-photos { gap: 12px; }
  .founders-caption { font-size: 17px; }

  /* Kundenstimmen */
  .voices { grid-template-columns: 1fr; gap: 6px; }
  .voices > .label { grid-row: auto; }
  .avatar { width: 46px; height: 46px; }
  .voices-nav { grid-column: 1; }

  /* CTA */
  .cta { grid-template-columns: 1fr; gap: 28px; margin: 100px var(--gutter) 0; }
  .cta-text h2 { font-size: 30px; line-height: 36px; }
  .cta-text p { font-size: 18px; line-height: 26px; }
  .cta-mail { font-size: 18px; margin-top: 18px; }

  /* Case pages */
  .case-intro { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter) 0; }
  .case-intro h1,
  .case-intro h2 { font-size: 24px; line-height: 31px; }
  .case-meta div { grid-template-columns: 96px 1fr; font-size: 14px; line-height: 20px; }
  .case-media { gap: 32px; padding: 56px var(--gutter) 0; }
  .case-pair { grid-template-columns: 1fr; gap: 12px; }
  .case-reels { gap: 10px; }
  .case-reels.reels-2,
  .case-reels.reels-4 { grid-template-columns: repeat(2, 1fr); }
  .case-text { font-size: 18px; line-height: 27px; }
  .case-copy { grid-template-columns: 1fr; gap: 4px; }
  .case-copy p { font-size: 18px; line-height: 27px; }
  .case-copy-cols { grid-auto-flow: row; grid-template-columns: 1fr; gap: 28px; }
  .case-stats-row { gap: 12px; padding-top: 18px; }
  .case-stats strong { font-size: 30px; line-height: 36px; }
  .case-stats span:not(.label) { font-size: 13px; }
  .case-copy-cols p { font-size: 16px; line-height: 25px; }
  .case-caption { margin-top: 10px; font-size: 13px; line-height: 19px; }
  .sound-toggle { right: 12px; bottom: 12px; padding: 8px 14px 8px 11px; font-size: 12px; gap: 8px; }
  .sound-icon { width: 15px; height: 15px; }
  .more-cases-text { padding: 14px 18px; }
  .more-cases-text strong { font-size: 21px; line-height: 28px; }
  .more-cases-arrow { font-size: 19px; line-height: 28px; opacity: 1; transform: none; }

  /* Über uns / Karriere */
  .about-row { grid-template-columns: 1fr; gap: 6px; padding: 64px var(--gutter) 0; }
  .about-row p,
  .about-list li { font-size: 18px; line-height: 27px; }
  .about-lead { font-size: 21px !important; line-height: 29px !important; }
  .about-image { padding: 72px var(--gutter) 0; }
  .about-founders { gap: 12px; }

  /* Impressum / Datenschutz */
  .legal { padding: 110px var(--gutter) 0; }
  .legal h1 { font-size: 30px; line-height: 36px; }
  .legal section { margin-top: 36px; }
  .legal h2 { font-size: 19px; line-height: 26px; }
  .legal p,
  .legal li { font-size: 15px; line-height: 24px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px var(--gutter); margin-top: 80px; padding: 44px var(--gutter) 36px; }
  .footer-main section:first-child { grid-column: 1 / -1; }
  .footer-logo { height: 30px; }
  .footer-main li { font-size: 15px; line-height: 24px; }
  .footer-lite { flex-direction: column; gap: 6px; padding-bottom: 28px; }

  /* KI-Hinweis */
  .ai-note { right: var(--gutter); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 9px; letter-spacing: 0; white-space: nowrap; }
}

/* ---------- Karriere: offene Stellen ---------- */
.jobs { padding-top: 160px; padding-bottom: 40px; }
.job-list { list-style: none; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.job-list li {
  padding: 26px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 21px;
  line-height: 29px;
}
.job-list .job-empty { color: var(--muted); }
@media (max-width: 820px) {
  .jobs { padding-top: 90px; padding-bottom: 20px; }
  .job-list li { padding: 20px 0; font-size: 18px; line-height: 26px; }
}

/* Kontakt: smooth jump to the project CTA, clear of the fixed header */
html { scroll-behavior: smooth; }
#kontakt { scroll-margin-top: 110px; }

/* Never show the browser's own play button (iOS shows one when autoplay is refused) */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

@media (max-width: 820px) {
  /* Safari on iPhone paints the status-bar strip in the colour of any fixed element at the
     top. So on phones the hero scrolls with the page (still fading out), and the media run
     right up under the clock instead of a black or white strip. */
  .hero { position: absolute; background: transparent; will-change: auto; }

  /* Konzept des Monats: blur is driven by scroll position (main.js), no hover on touch */
  .concept img { transition: transform 4s ease-in-out; }

  /* Testimonials: one calm card per quote, swipe left/right, snaps to the centre */
  .voices-stage {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 6px;
    scroll-padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .voices-stage::-webkit-scrollbar { display: none; }
  .voices blockquote {
    flex: 0 0 100%;
    grid-area: auto;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 26px 22px 22px;
    border-radius: var(--radius);
    background: #f5f5f4;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .voices blockquote p { font-size: 17px; line-height: 26px; font-weight: 300; max-width: none; }
  .voices blockquote footer { margin-top: 0; gap: 12px; }
  .voices .avatar { width: 40px; height: 40px; }
  .voices .who { font-size: 15px; line-height: 20px; }
  .voices .who small { font-size: 13px; }
  .voices-nav { justify-content: center; margin-top: 16px; }
  .voices-nav button, .voices-count { display: none; }
  .voices-dots { display: flex; gap: 8px; }
  .voices-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text); opacity: 0.18;
    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
  }
  .voices-dots span.on { opacity: 0.7; width: 18px; border-radius: 3px; }
}
/* landscape case videos keep their 16:9 box even before the file has loaded */
.case-media figure.rounded > video { aspect-ratio: 16 / 9; object-fit: cover; background: #f1f1f1; }

/* external-link arrow as a drawn icon (the ↗ character turns into an emoji on iPhone) */
.ext-arrow { width: 0.8em; height: 0.8em; margin-left: 2px; vertical-align: -0.05em; }

/* While the hero video loads (white loader), header is dark like on light pages */
.hero:not(.is-playing)::after { opacity: 0; }
.hero::after { transition: opacity 0.8s ease-in-out; }
body:has(.hero-loader):has(.hero:not(.is-playing)) .header .logo { opacity: 0; }
body:has(.hero-loader):has(.hero:not(.is-playing)) .header .nav a,
body:has(.hero-loader):has(.hero:not(.is-playing)) .header .menu-toggle { color: var(--text); }

/* Case page: client quote */
.case-quote {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: baseline;
  margin: 0;
}
.case-quote p { font-size: 26px; line-height: 36px; font-weight: 300; max-width: 820px; }
.case-quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
@media (max-width: 820px) {
  .case-quote { grid-template-columns: 1fr; gap: 10px; }
  .case-quote blockquote { padding: 24px 22px 22px; border-radius: var(--radius); background: #f5f5f4; }
  .case-quote p { font-size: 17px; line-height: 26px; }
  .case-quote figcaption { margin-top: 22px; gap: 12px; }
  .case-quote .avatar { width: 40px; height: 40px; }
  .case-quote .who { font-size: 15px; line-height: 20px; }
  .case-quote .who small { font-size: 13px; }
}

/* ---------- Cookie consent (js/consent.js) ---------- */
.footer-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 20px;
  cursor: pointer;
}
.footer-link:hover { color: var(--text); }
.consent {
  position: fixed;
  z-index: 300;
  left: var(--gutter);
  bottom: 20px;
  width: min(480px, calc(100vw - 2 * var(--gutter)));
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  font-family: "Gothic A1", sans-serif;
}
.consent[hidden] { display: none; }
.consent-title { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.consent-text { font-size: 14px; line-height: 21px; font-weight: 400; }
.consent-text a { text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
/* both choices look exactly the same: same size, same weight, same colours */
.consent-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--text);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
.consent-btn:hover { background: var(--text); color: #fff; }
.consent-btn:focus-visible, .footer-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
body.consent-visible .ai-note { opacity: 0; }
@media (max-width: 820px) {
  .consent { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 18px 16px 16px; }
  .consent-text { font-size: 13px; line-height: 19px; }
  .consent-btn { padding: 12px 10px; }
}
.legal section[id] { scroll-margin-top: 110px; }

/* ---------- FAQ (Startseite) ---------- */
.faq {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: start;
}
.faq-list { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.faq-item h3 { margin: 0; font: inherit; }
.faq-q {
  position: relative;
  display: block;
  width: 100%;
  padding: 22px 48px 22px 0;
  font: inherit;
  font-size: 21px;
  line-height: 29px;
  font-weight: 400;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.faq-q:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
/* plus that turns into a minus */
.faq-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  opacity: 0.55;
  transition: opacity 0.25s ease-in-out;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6.5px;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s ease-in-out;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-q:hover .faq-icon { opacity: 1; }
/* answer: smooth height animation via grid rows */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-in-out;
}
.faq-a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.25s; }
.faq-a.open > div { visibility: visible; transition-delay: 0s; }  /* closed answers are not tabbable */
.faq-a.open { grid-template-rows: 1fr; }
.faq-a p {
  padding: 0 48px 24px 0;
  font-size: 17px;
  line-height: 27px;
  font-weight: 300;
  color: var(--muted);
  max-width: 720px;
}
.faq-a a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 820px) {
  .faq { grid-template-columns: 1fr; gap: 6px; }
  .faq-q { font-size: 17px; line-height: 24px; padding: 18px 36px 18px 0; }
  .faq-a p { font-size: 15px; line-height: 23px; padding: 0 36px 20px 0; }
}

/* ---------- Password gate for unpublished previews (konzept-rolf-benz.php) ---------- */
.gate { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px var(--gutter); }
.gate-logo { position: fixed; top: calc(40px + env(safe-area-inset-top, 0px)); left: var(--gutter); height: 40px; width: auto; filter: brightness(0) opacity(0.8); }
.gate form { width: min(420px, 100%); }
.gate h1 { font-size: 26px; line-height: 34px; font-weight: 400; margin-bottom: 28px; }
.gate label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.gate-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.gate input {
  font: inherit; font-size: 16px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2); background: #fff; color: var(--text); min-width: 0;
}
.gate input:focus { outline: none; border-color: var(--text); }
.gate button {
  font: inherit; font-size: 15px; font-weight: 500; padding: 11px 22px; border-radius: 999px;
  border: 1px solid var(--text); background: var(--text); color: #fff; cursor: pointer;
}
.gate-error { margin-top: 12px; font-size: 14px; color: #b3261e; }
@media (max-width: 820px) { .gate-logo { top: calc(18px + env(safe-area-inset-top, 0px)); height: 30px; } }

/* ---------- Video with chapters (Rolf Benz billboard): glass prev/next buttons ---------- */
.chapters { position: relative; }
/* reversed copy of the film, laid exactly over it; shown only while swiping backwards */
.chapters .chapter-rev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.chapters.rev-on .chapter-rev { opacity: 1; }
.chapter-nav {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;   /* up / dots / down, on the right edge */
  align-items: center;
  gap: 10px;
}
.glass-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease-in-out, transform 0.2s ease-in-out;
}
.glass-btn svg { width: 18px; height: 18px; }
.glass-btn:hover { background: rgba(255, 255, 255, 0.32); }
.glass-btn:active { transform: scale(0.94); }
.glass-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chapter-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.chapter-dots span {
  width: 6px; height: 6px; border-radius: 3px;
  background: #fff; opacity: 0.45;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.chapter-dots span.on { height: 18px; opacity: 1; }
@media (max-width: 820px) {
  .chapter-nav { right: 10px; gap: 8px; }
  .glass-btn { width: 38px; height: 38px; }
  .glass-btn svg { width: 15px; height: 15px; }
}