/* ============================================================
   QMei — pages.css : geteilte Unterseiten-Bausteine
   Page-Hero · Statement · Dropping-Stack · Page-CTA
   ============================================================ */

/* Initialzustand für Zeilen-Reveals (nur mit JS) */
.js [data-reveal-lines] > span {
  opacity: 0;
}

/* ---------------- Rechtliche Seiten (Impressum/Datenschutz) ---------------- */
.legal {
  min-height: 100svh;
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--gutter) + 6rem) var(--gutter) var(--section-y);
  color: var(--c-white);
  background: var(--c-black);
}
.legal h1 {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.9;
}
.legal h2 {
  margin: 2.4rem 0 0.6rem;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--c-coral);
}
.legal p,
.legal li {
  margin-bottom: 0.7rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--c-white-rgb) / 82%);
}
.legal ul { margin: 0 0 0.7rem 1.2rem; }
.legal a { color: var(--c-coral); }
.legal strong { color: var(--c-white); }
.legal__lead { font-size: 1.1rem; }
.legal__note {
  margin-top: 2.6rem;
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  color: rgb(var(--c-white-rgb) / 70%);
  border-left: 3px solid var(--c-coral);
  background: rgb(var(--c-white-rgb) / 6%);
}
.legal__back {
  display: inline-block;
  margin-top: 2.4rem;
  font-weight: 700;
  color: var(--c-coral);
}

/* ---------------- Page-Hero ---------------- */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--gutter) + 5rem) 0 var(--section-y);
  overflow: hidden;
}
.page-hero--coral {
  color: var(--c-black);
  background: var(--c-coral);
}
.page-hero--dark {
  color: var(--c-white);
  background: var(--c-black);
}
.page-hero--coral .kicker {
  color: var(--c-black);
}
.page-hero__title {
  margin-top: 0.2em;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.82;
}
.page-hero__title > span {
  display: block;
}
.page-hero__title .word-cycle {
  display: inline-grid;
  justify-items: start;
  overflow: hidden;
}
.page-hero__title .word-cycle__item {
  grid-row: 1;
  grid-column: 1;
}
.page-hero__lead {
  max-width: 42ch;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  font-size: var(--fs-lead);
  font-weight: 500;
}
.page-hero--coral .page-hero__lead {
  color: rgb(var(--c-black-rgb) / 80%);
}
.page-hero__scroll {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
}
.page-hero__scroll svg {
  width: 22px;
  height: 44px;
  color: currentColor;
  animation: pageBob 1.8s ease-in-out infinite;
}
@keyframes pageBob {
  0%, 100% { translate: 0 0; opacity: 0.5; }
  50% { translate: 0 6px; opacity: 1; }
}

/* ---------------- Statement ---------------- */
.statement {
  padding: var(--section-y) 0;
  color: var(--c-white);
  background: var(--c-black);
}
.statement__big {
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 0.86;
  color: var(--c-white);
}
.statement__big > span {
  display: block;
}
.statement__sub {
  max-width: 46ch;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: rgb(var(--c-white-rgb) / 70%);
}
.statement__sub strong {
  color: var(--c-white);
}

/* ---------------- Dropping-Stack ---------------- */
.uq-stack {
  padding: var(--section-y) 0;
  color: var(--c-black);
  background: var(--c-white);
  overflow: hidden;
}
.uq-stack__head {
  text-align: left;
}
.uq-stack__title {
  margin-top: 0.3em;
  font-size: clamp(2.2rem, 6vw, 5rem);
}
.uq-stack__hint {
  display: block;
  margin-top: 1rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--c-coral);
  rotate: -2deg;
}
.dstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.dstack__deck {
  position: relative;
  width: min(860px, 94vw);
  height: clamp(440px, 66vw, 620px);
}
.dcard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 3.6rem);
  border-radius: 28px;
  cursor: grab;
  user-select: none;
  will-change: transform;
}
.dcard:active {
  cursor: grabbing;
}
.dcard--coral { color: var(--c-black); background: var(--c-coral); }
.dcard--yellow { color: var(--c-black); background: var(--c-yellow); }
.dcard--purple { color: var(--c-white); background: var(--c-purple); }
.dcard--dark { color: var(--c-white); background: var(--c-black); }
.dcard__no {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 0.85;
  opacity: 0.9;
}
.dcard__title {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 0.95;
}
.dcard__text {
  margin-top: 0.7rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
}
.dcard__tags {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.dstack__controls {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.dstack__ctrl {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.5rem;
  color: var(--c-black);
  border: 2px solid var(--c-black);
  border-radius: 50%;
  transition: color 0.3s, background 0.3s, scale 0.3s var(--ease-out);
}
.dstack__ctrl:hover {
  color: var(--c-white);
  background: var(--c-black);
  scale: 1.07;
}
.dstack__count {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: 1.2rem;
}
.dstack__count b {
  color: var(--c-coral);
}

/* ---------------- Page-CTA ---------------- */
.page-cta {
  position: relative;
  padding: var(--section-y) 0;
  text-align: left;
  color: var(--c-white);
  background: var(--c-black);
  overflow: hidden;
}
.page-cta .hand {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--c-coral);
  rotate: -3deg;
}
.page-cta__title {
  margin-top: 0.2em;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.86;
  color: var(--c-white);
}
.page-cta__title > span {
  display: block;
  text-wrap: balance;
}
.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.page-cta .hand {
  font-size: clamp(2.1rem, 3.7vw, 3.2rem);
  line-height: 0.85;
}
.page-cta .btn--ghost {
  color: var(--c-white);
  border-color: rgb(var(--c-white-rgb) / 28%);
}
.page-cta .btn--ghost:hover {
  color: var(--c-black);
  background: var(--c-white);
  border-color: var(--c-white);
}
.page-cta__doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-cta__doodle {
  position: absolute;
  display: block;
  will-change: transform;
}
.page-cta .container {
  position: relative;
  z-index: 1;
}
.page-cta .btn--coral {
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-cta .btn--coral:hover {
  scale: 1.07;
  rotate: -2.5deg;
}
@media (max-width: 1399px) {
  .page-cta__doodle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__scroll svg {
    animation: none;
  }
}

/* ---------------- Kontakt-Seite (nur die Nummer + fallende Smileys) ---------------- */
.kontakt {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--gutter) + 5rem) var(--gutter) var(--section-y);
  text-align: left;
  color: var(--c-white);
  background: var(--c-black);
  overflow: hidden;
}
.kontakt .footer-physics {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kontakt__inner {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* … echte Links bleiben klickbar (Smiley-Canvas liegt darunter) */
.kontakt__inner a {
  pointer-events: auto;
}
.kontakt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.8rem;
}
/* Schlanker Rechts-Footer auf Kontakt (Impressum & Co., ohne Telefon-Marquee) */
.kf-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  padding: 2rem var(--gutter) 2.6rem;
  font-size: 0.85rem;
  color: rgb(var(--c-white-rgb) / 55%);
  background: var(--c-black);
}
.kf-legal nav a {
  margin-left: 1.2rem;
  color: rgb(var(--c-white-rgb) / 78%);
  text-decoration: underline;
}
.kf-legal nav a:first-child {
  margin-left: 0;
}
.kf-legal nav a:hover {
  color: var(--c-white);
}
.kontakt__inner .hand {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--c-coral);
  rotate: -3deg;
}
.kontakt__phone {
  display: inline-block;
  margin-top: 0.15em;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--c-white);
  pointer-events: auto;
  transition: color 0.3s var(--ease-out);
}
.kontakt__phone:hover {
  color: var(--c-coral);
}
.kontakt__sub {
  display: block;
  margin-top: 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--c-white-rgb) / 60%);
  pointer-events: auto;
}
.kontakt__sub:hover {
  color: var(--c-white);
}

/* ---------------- Stats ---------------- */
.stats {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) 0;
  color: var(--c-black);
  background: var(--c-coral);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 3px solid var(--c-black);
}
.stat__num {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  font-weight: 800;
  font-size: clamp(3.6rem, 9vw, 9rem);
  line-height: 0.82;
}
.stat__label {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-black);
}

/* ---------------- Story ---------------- */
.story {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) 0;
  color: var(--c-black);
  background: var(--c-white);
}
.story__title {
  margin-top: 0.3em;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.86;
}
.story__title > span {
  display: block;
}
.story__text {
  max-width: 50ch;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: rgb(var(--c-black-rgb) / 72%);
}
.story__text strong {
  color: var(--c-black);
}

/* ---------------- Team (Momentum-Hover) ---------------- */
.team {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) 0;
  color: var(--c-white);
  background: var(--c-black);
}
.team__title {
  margin-top: 0.2em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-size: clamp(2.4rem, 7vw, 6rem);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
/* Visuelle Reihenfolge: Isa direkt nach Johanna (Kunden-Wunsch).
   Nur CSS-order → die DOM-Reihenfolge (und damit die positionsbasierte
   CMS-Zuordnung Foto↔Name) bleibt unangetastet. */
.team__grid .team-card:nth-child(1) { order: 1; } /* Philipp */
.team__grid .team-card:nth-child(2) { order: 2; } /* Björn */
.team__grid .team-card:nth-child(3) { order: 3; } /* Johanna */
.team__grid .team-card:nth-child(6) { order: 4; } /* Isa → hinter Johanna */
.team__grid .team-card:nth-child(4) { order: 5; } /* Dani */
.team__grid .team-card:nth-child(5) { order: 6; } /* Ina */
.team__grid .team-card:nth-child(7) { order: 7; } /* Der Joker */
.team__grid .team-card:nth-child(8) { order: 8; } /* Du? */
.team-card__inner {
  display: block;
  color: inherit;
  will-change: transform;
}
.team-card__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
}
/* Portrait (transparente Cut-out-Figur) steht unten in der Farbfläche; Initialen sind Fallback dahinter */
.team-card__photo-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.team-card__photo--coral { color: var(--c-black); background: var(--c-coral); }
.team-card__photo--purple { color: var(--c-white); background: var(--c-purple); }
.team-card__photo--yellow { color: var(--c-black); background: var(--c-yellow); }
/* Sekundäre Varianten: weiß gefüllt & weiß umrandet */
.team-card__photo--white { color: var(--c-black); background: var(--c-white); border: 2px solid rgb(var(--c-black-rgb) / 12%); }
.team-card__photo--outline { color: var(--c-white); background: transparent; border: 2px solid rgb(var(--c-white-rgb) / 45%); }
.team-card__photo--dark {
  color: var(--c-white);
  border: 2px dashed rgb(var(--c-white-rgb) / 25%);
  background: rgb(var(--c-white-rgb) / 8%);
}
.team-card__initials,
.team-card__plus {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5rem);
}
.team-card__meta {
  margin-top: 1rem;
}
.team-card__name {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}
.team-card__role {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgb(var(--c-white-rgb) / 55%);
}
.team-card__inner--join .team-card__photo--dark {
  transition: background 0.3s, border-color 0.3s;
}
.team-card__inner--join:hover .team-card__photo--dark {
  border-color: var(--c-coral);
  background: rgb(var(--c-coral-rgb) / 12%);
}

@media (max-width: 760px) {
  .stats__grid,
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------- Case-Grid (Übersicht) ---------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--c-black);
}
.case-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  color: var(--c-white);
  overflow: hidden;
}
.case-tile__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 62% at 70% 28%, rgb(var(--grade-1) / 52%), transparent 60%),
    radial-gradient(58% 58% at 24% 76%, rgb(var(--grade-2) / 42%), transparent 62%),
    var(--grade-base);
  transition: scale 0.8s var(--ease-out);
}
.case-tile:hover .case-tile__media {
  scale: 1.06;
}
.case-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 65%), transparent 55%);
}
.case-tile__tag {
  position: absolute;
  top: clamp(1.2rem, 3vw, 2.2rem);
  left: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 2;
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--c-white-rgb) / 75%);
}
.case-tile__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  text-transform: uppercase;
  translate: -50% -50%;
  transition: translate 0.5s var(--ease-out);
}
.case-tile:hover .case-tile__logo {
  translate: -50% -64%;
}
.case-tile__info {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.2rem);
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  left: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.case-tile__title {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
.case-tile__more {
  flex: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-coral);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.4s, translate 0.4s;
}
.case-tile:hover .case-tile__more {
  opacity: 1;
  translate: 0 0;
}
.case-tile__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.case-tile__video.is-ready {
  opacity: 1;
}
.case-tile__logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(8rem, 22vw, 15rem);
  max-height: 36%;
  object-fit: contain;
  translate: -50% -50%;
  filter: brightness(0) invert(1);
  transition: translate 0.5s var(--ease-out);
}
.case-tile:hover .case-tile__logo-img {
  translate: -50% -64%;
}
/* Cases ohne Verlauf: weiße Grundfarbe, Inhalte dunkel → auf Hover (Video) weiß */
.case-grid {
  background: rgb(var(--c-black-rgb) / 12%);
}
.case-tile__media {
  background: var(--c-white);
}
.case-tile__tag,
.case-tile__title,
.case-tile__logo {
  transition: color 0.4s var(--ease-out);
}
.case-tile__logo-img {
  transition: filter 0.4s var(--ease-out), translate 0.5s var(--ease-out);
}
.case-tile::after {
  transition: opacity 0.4s var(--ease-out);
}
.case-tile:not(:hover) .case-tile__tag {
  color: rgb(var(--c-black-rgb) / 55%);
}
.case-tile:not(:hover) .case-tile__title,
.case-tile:not(:hover) .case-tile__logo {
  color: var(--c-black);
}
.case-tile:not(:hover) .case-tile__logo-img {
  filter: brightness(0);
}
.case-tile:not(:hover)::after {
  opacity: 0;
}

/* ---------------- Clients ---------------- */
.clients-sec {
  padding: var(--section-y) 0;
  color: var(--c-black);
  background: var(--c-coral);
}
.clients-sec__title {
  margin-top: 0.3em;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: clamp(2rem, 6vw, 4.5rem);
}
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.5rem);
}
.clients-grid span {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  text-transform: uppercase;
  color: rgb(var(--c-black-rgb) / 38%);
  transition: color 0.3s;
}
.clients-grid span:hover {
  color: var(--c-black);
}
.clients-grid img {
  height: clamp(2rem, 4.5vw, 3.4rem);
  width: auto;
  max-width: clamp(7rem, 16vw, 11rem);
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.clients-grid img:hover {
  opacity: 1;
}

/* ---------------- Layered Image Slider (Cases-Übersicht, Osmo) ---------------- */
.layered-slider {
  position: relative;
  height: 100svh;
  color: var(--c-white);
  background: var(--c-black);
  overflow: clip;
  cursor: url('../icons/hand-cursor.svg') 32 50, pointer;
  user-select: none;
}
.layered-slider.has-glove-cursor {
  cursor: none;
}
.layered-slider__container {
  position: relative;
  width: 100%;
  height: 100%;
}
.layered-slider__bg-collection {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.layered-slider__bg-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.layered-slider__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layered-slider__bg-dark {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(0 0 0 / 42%);
}
.layered-slider__text-collection {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.layered-slider__text-list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.layered-slider__text-item {
  position: absolute;
  top: 24%;
  max-width: 92%;
  text-align: left;
}
.layered-slider__text-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 6.5rem);
  line-height: 0.84;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: color 0.4s var(--ease-out);
}
.layered-slider__text-item[data-active] .layered-slider__text-title {
  color: var(--c-coral);
}
.layered-slider__mask-collection {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 3;
  width: clamp(15em, 30vw, 25em);
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  translate: -50% -50%;
  rotate: 5deg;
}
.layered-slider__mask-list {
  position: absolute;
  inset: 0;
}
.layered-slider__mask-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.layered-slider__mask-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.layered-slider__mask-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  max-height: 46%;
  object-fit: contain;
  translate: -50% -50%;
  filter: brightness(0) invert(1);
}
.layered-slider__mask-txt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--c-white);
}
.layered-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 120em;
  margin-inline: auto;
  padding: 2em var(--gutter);
  pointer-events: none;
}
.layered-slider__overlay-top {
  display: flex;
  gap: 0.7em;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  pointer-events: auto;
}
.layered-slider__progress {
  width: 7em;
  height: 2px;
  border-radius: 10em;
  background: rgb(255 255 255 / 28%);
  overflow: hidden;
}
.layered-slider__progress-inner {
  width: 100%;
  height: 100%;
  background: var(--c-white);
  transform-origin: left center;
  scale: 0 1;
}
.layered-slider__overlay-btm {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.layered-slider__nav {
  display: flex;
  gap: 0.6em;
  pointer-events: auto;
}
.layered-slider__nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.6em;
  height: 4.6em;
  padding: 0;
  border: none;
  background: none;
  transition: scale 0.3s var(--ease-out), rotate 0.3s var(--ease-out);
}
.layered-slider__nav-button:hover {
  scale: 1.18;
  rotate: -8deg;
}
.layered-slider__nav-button:active {
  scale: 1.04;
}
.layered-slider__nav-button--prev .layered-slider__nav-icon {
  scale: -1 1;
}
.layered-slider__nav-icon {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.layered-slider__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 74px;
  height: 74px;
  pointer-events: none;
  will-change: transform;
}
.layered-slider__cursor img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .layered-slider__text-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
  .layered-slider__overlay {
    padding: 1em var(--gutter);
  }
  .layered-slider__overlay-top {
    display: none;
  }
}

/* ---------------- Case-Detail ---------------- */
.cd-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: calc(var(--gutter) + 5rem) 0 var(--section-y);
  color: var(--c-white);
  overflow: hidden;
}
.cd-hero__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 62% at 70% 28%, rgb(var(--grade-1) / 55%), transparent 60%),
    radial-gradient(58% 58% at 24% 76%, rgb(var(--grade-2) / 45%), transparent 62%),
    var(--grade-base);
  animation: heroKen 22s ease-in-out infinite alternate;
}
.cd-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cd-hero__video.is-ready {
  opacity: 1;
}
.cd-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 90%), rgb(0 0 0 / 60%) 40%, rgb(0 0 0 / 22%) 74%, transparent);
}
.cd-hero .container {
  position: relative;
  z-index: 2;
}
.cd-hero__title {
  max-width: 18ch;
  margin-top: 0.15em;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 0.9;
}
.cd-hero__lead {
  max-width: 60ch;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  font-size: var(--fs-lead);
  font-weight: 600;
  text-wrap: balance;
  color: var(--c-white);
}
.cd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.8rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.cd-fact {
  display: flex;
  flex-direction: column;
}
.cd-fact b {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}
.cd-fact span {
  font-size: 0.9rem;
  color: rgb(var(--c-white-rgb) / 70%);
}
.cd-story {
  padding: var(--section-y) 0;
  color: var(--c-black);
  background: var(--c-white);
}
/* Story als vertikale Timeline (untereinander, Spine + Punkte) */
.cd-story .container {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin-inline: auto;
  counter-reset: cdstep;
}
.cd-step {
  position: relative;
  counter-increment: cdstep;
  padding: 0 0 clamp(2.6rem, 6vw, 4.5rem) clamp(3.2rem, 7vw, 5rem);
  border-left: 2px solid rgb(var(--c-purple-rgb) / 20%);
}
.cd-step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.cd-step::after {
  content: '';
  position: absolute;
  top: 0.45em;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-purple);
}
.cd-step::before {
  content: 'N° ' counter(cdstep);
  display: block;
  margin-bottom: 0.1em;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--c-purple);
}
.cd-step__text {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.45;
  text-transform: none;
}
/* Aufgabe (N°1) als kräftiges Statement */
.cd-step:first-child .cd-step__text {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.cd-gallery {
  padding: var(--section-y) 0;
  background: var(--c-black);
}
.cd-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1rem);
}
.cd-shot {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background:
    radial-gradient(70% 70% at 60% 30%, rgb(var(--grade-1) / 55%), transparent 60%),
    radial-gradient(60% 60% at 30% 80%, rgb(var(--grade-2) / 45%), transparent 62%),
    var(--grade-base);
}
/* Großes Case-Video (Showcase) */
.cd-showcase {
  background: var(--c-black);
  overflow: hidden;
}
.cd-showcase__video {
  display: block;
  width: 100%;
  height: clamp(56vh, 72vw, 90vh);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.cd-showcase__video.is-ready {
  opacity: 1;
}

/* ---------------- Bold Kontaktformular ---------------- */
.kf {
  padding: var(--section-y) 0 clamp(4rem, 10vw, 8rem);
  color: var(--c-black);
  background: var(--c-white);
}
.kf__title {
  margin: 0.15em 0 clamp(2rem, 5vw, 3.5rem);
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.9;
}
.kf__form {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
}
.kf__group {
  margin: 0;
  padding: 0;
  border: 0;
}
.kf__legend {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(var(--c-black-rgb) / 55%);
}
.kf__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.kf__chip {
  cursor: pointer;
}
.kf__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kf__chip span {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  color: var(--c-black);
  border: 2px solid rgb(var(--c-black-rgb) / 20%);
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.kf__chip:hover span {
  border-color: var(--c-black);
}
.kf__chip input:checked + span {
  color: var(--c-white);
  background: var(--c-black);
  border-color: var(--c-black);
}
.kf__chip input:focus-visible + span {
  outline: 3px solid var(--c-coral);
  outline-offset: 3px;
}
.kf__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.kf__row + .kf__row {
  margin-top: 0.9rem;
}
.kf__input {
  flex: 1 1 14rem;
  padding: 1em 1.1em;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--c-black);
  background: rgb(var(--c-black-rgb) / 4%);
  border: 2px solid rgb(var(--c-black-rgb) / 14%);
  border-radius: 16px;
}
.kf__input:focus-visible {
  outline: none;
  border-color: var(--c-coral);
}
.kf__area {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.9rem;
  resize: vertical;
}
.kf__select {
  cursor: pointer;
}
.kf__file {
  display: inline-flex;
  align-items: center;
  margin-top: 0.9rem;
  cursor: pointer;
}
.kf__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.kf__file-label {
  padding: 0.85em 1.2em;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: rgb(var(--c-black-rgb) / 70%);
  border: 2px dashed rgb(var(--c-black-rgb) / 22%);
  border-radius: 16px;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.kf__file:hover .kf__file-label {
  color: var(--c-black);
  border-color: var(--c-coral);
}
.kf__send {
  align-self: flex-start;
  font-size: clamp(1rem, 2vw, 1.3rem);
}
.kf__done {
  margin-top: 2rem;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--c-coral);
}
.cd-shot:nth-child(4) {
  grid-column: span 2;
  aspect-ratio: 8 / 3;
}
.cd-quotes {
  padding: var(--section-y) 0;
  color: var(--c-black);
  background: var(--c-coral);
}
.cd-quotes__kicker {
  color: var(--c-white);
}
.cd-quotes__thread {
  margin-top: clamp(2rem, 5vw, 4rem);
}
.cd-qitem {
  position: relative;
}
.cd-qitem + .cd-qitem {
  margin-top: clamp(2rem, 4.5vw, 3.6rem);
}
/* Editier-Modus: Felder markieren, Löschen-Button, Hinzufügen-Button */
.cd-quotes--edit .cd-qitem [data-q],
.cd-quotes--edit .cd-qitem [data-a] {
  border-radius: 4px;
  outline: 2px dashed rgb(var(--c-black-rgb) / 30%);
  outline-offset: 4px;
  cursor: text;
}
.cd-qitem__del {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  color: var(--c-white);
  border: 0;
  border-radius: 50%;
  background: var(--c-black);
  cursor: pointer;
}
.cd-quotes:not(.cd-quotes--edit) .cd-qitem__del {
  display: none;
}
.cd-qadd {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  margin-left: calc(clamp(48px, 6vw, 68px) + clamp(0.8rem, 2vw, 1.4rem));
  padding: 0.7em 1.2em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-black);
  border-radius: 999px;
  border: 2px dashed rgb(var(--c-black-rgb) / 40%);
  background: transparent;
  cursor: pointer;
}
.cd-quotes--ok {
  box-shadow: inset 0 5px 0 0 rgb(41 196 103);
}
.cd-quotes--err {
  box-shadow: inset 0 5px 0 0 rgb(229 72 77);
}
.cd-next {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: var(--section-y) var(--gutter);
  text-align: left;
  color: var(--c-white);
  background: var(--c-black);
}
/* Handschrift-Annotation rechts neben dem Pfeil (Kunden-Wunsch: kleiner, aber stärker) */
.cd-next__side {
  flex-shrink: 0;
  display: flex;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  align-items: center;
}
.cd-next__label {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-coral);
  rotate: -3deg;
}
.cd-next__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease-out);
}
.cd-next__arrow {
  flex-shrink: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: var(--c-coral);
  transition: translate 0.4s var(--ease-out);
}
.cd-next:hover .cd-next__title {
  color: var(--c-coral);
}
.cd-next:hover .cd-next__arrow {
  translate: 0.25em 0;
}

@media (max-width: 760px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
  .cd-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cd-step:nth-child(even) {
    margin-left: 0;
    text-align: left;
  }
}

/* ============================================================ CASES — einfaches 2er-Grid ============================================================ */
.case-index {
  padding: clamp(8rem, 16vw, 13rem) 0 clamp(4rem, 10vw, 9rem);
}
.case-index__title {
  margin: 0.35em 0 0.45em;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.04; /* knapp genug, dass mehrzeilige Marker eng beieinander liegen — der Verlauf verhindert trotzdem Überlappung mit der Zeile darüber */
  text-transform: uppercase;
  color: var(--c-white);
}
.case-index__title > span {
  display: block;
}
.case-index__lead {
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: rgb(var(--c-white-rgb) / 70%);
}
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.case-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  color: var(--c-white);
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
}
/* Kategorie-Zuweisung im Bearbeiten-Modus (nur sichtbar, wenn das Dropdown injiziert ist) */
.cc-edit {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 6;
  padding: 0.28rem 0.4rem;
  border-radius: 10px;
  background: rgb(var(--c-black-rgb) / 82%);
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
  backdrop-filter: blur(4px);
}
.cc-edit::before {
  content: 'Kategorie';
  display: block;
  margin-bottom: 0.15rem;
  padding-left: 0.1rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--c-coral);
}
.cc-edit select {
  max-width: 62vw;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-black);
  border-radius: 7px;
  border: 0;
  background: var(--c-white);
  cursor: pointer;
}
.cc-edit.is-saving select { outline: 2px solid var(--c-yellow); }
.cc-edit.is-saved  select { outline: 2px solid #29c467; }
.cc-edit.is-fail   select { outline: 2px solid #e5484d; }
.case-card__video,
.case-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--ease-out), opacity 0.6s var(--ease-out);
  opacity: 0.82;
}
.case-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--c-black-rgb) / 82%), rgb(var(--c-black-rgb) / 10%) 55%, transparent 80%);
}
.case-card__body {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}
.case-card__tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--c-white-rgb) / 78%);
}
.case-card__title {
  margin-top: 0.18em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--c-white);
}
.case-card:hover .case-card__video,
.case-card:hover .case-card__media {
  opacity: 1;
  scale: 1.06;
}
.case-card.is-hidden {
  display: none;
}
/* Typ-Filter */
.case-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.case-filter__chip {
  padding: 0.6em 1.2em;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-white);
  border: 2px solid rgb(var(--c-white-rgb) / 22%);
  border-radius: var(--r-pill);
  background: transparent;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  cursor: pointer;
}
.case-filter__chip:hover {
  border-color: var(--c-white);
}
.case-filter__chip.is-active {
  color: var(--c-black);
  border-color: var(--c-white);
  background: var(--c-white);
}
@media (max-width: 700px) {
  .cases-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BEWERBUNGS-FENSTER (Video) ============================================================ */
.qm-apply {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2rem);
}
.qm-apply.is-open {
  display: flex;
}
.qm-apply__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--c-black-rgb) / 72%);
  backdrop-filter: blur(4px);
}
.qm-apply__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 92vh;
  color: var(--c-white);
  border-radius: 24px;
  background: var(--c-black);
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.qm-apply__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgb(var(--c-white-rgb) / 12%);
}
.qm-apply__who {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
}
.qm-apply__who svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--c-coral);
}
.qm-apply__close {
  position: absolute;
  top: 0.8rem;
  right: 1.1rem;
  z-index: 3;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-white);
  background: none;
  border: 0;
  cursor: pointer;
}
.qm-apply__body {
  flex: 1 1 auto;
  min-height: 0; /* erlaubt dem Flex-Kind zu schrumpfen → overflow-y greift wirklich (sonst wird der Inhalt abgeschnitten) */
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qm-apply__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.qm-apply__sub {
  margin: 0.6rem 0 1.2rem;
  color: rgb(var(--c-white-rgb) / 70%);
}
/* Nach dem Absenden: Video, Consent & Formular raus — nur die Bestätigung, groß & zentriert */
.qm-apply__body.is-sent {
  display: grid;
  place-items: center;
  min-height: 46vh;
  text-align: center;
}
.qm-apply__body.is-sent .qm-apply__title,
.qm-apply__body.is-sent .qm-apply__sub,
.qm-apply__body.is-sent .qm-apply__consent,
.qm-apply__body.is-sent .qm-apply__stage,
.qm-apply__body.is-sent .qm-apply__controls,
.qm-apply__body.is-sent .qm-apply__form {
  display: none;
}
.qm-apply__body.is-sent .qm-apply__done {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1;
  color: var(--c-coral);
}
.qm-apply__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: rgb(var(--c-white-rgb) / 6%);
  overflow: hidden;
}
.qm-apply__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.qm-apply__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: rgb(var(--c-white-rgb) / 50%);
}
.qm-apply__ph span {
  font-size: 2.4rem;
}
.qm-apply__rec {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.3em 0.7em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-white);
  border-radius: var(--r-pill);
  background: var(--c-coral);
}
.qm-apply__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
}
.qm-apply__form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.qm-apply__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.qm-apply__form input,
.qm-apply__form textarea {
  flex: 1 1 12rem;
  padding: 0.9em 1.1em;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-white);
  background: rgb(var(--c-white-rgb) / 8%);
  border: 2px solid rgb(var(--c-white-rgb) / 16%);
  border-radius: 14px;
}
.qm-apply__form textarea {
  width: 100%;
  resize: vertical;
}
.qm-apply__form input::placeholder,
.qm-apply__form textarea::placeholder {
  color: rgb(var(--c-white-rgb) / 45%);
}
.qm-apply__form input:focus-visible,
.qm-apply__form textarea:focus-visible {
  outline: none;
  border-color: var(--c-coral);
}
.qm-apply__send {
  align-self: flex-start;
}
/* Checkbox + Fließtext: der Satz steht in einem eigenen <span>, sonst zerlegt Flex
   jedes Textstück in eine eigene Spalte und der Datenschutz-Hinweis bricht auseinander. */
.qm-apply__consent {
  display: flex;
  gap: 0.6rem;
  align-items: start;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgb(var(--c-white-rgb) / 75%);
  cursor: pointer;
}
.qm-apply__consent input {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--c-coral);
}
.qm-apply__consent a {
  color: var(--c-coral);
  text-decoration: underline;
}
.qm-apply__file {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.qm-apply__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qm-apply__file span {
  padding: 0.85em 1.2em;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(var(--c-white-rgb) / 75%);
  border: 2px dashed rgb(var(--c-white-rgb) / 22%);
  border-radius: 14px;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.qm-apply__file:hover span {
  color: var(--c-white);
  border-color: var(--c-coral);
}
.qm-apply__done {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--c-coral);
}
/* hidden-Attribut muss immer verstecken (sonst gewinnt eine display-Regel) */
[hidden] {
  display: none !important;
}