@charset "UTF-8";

/* ============================================================
   PIÙ VISION — Hauptstylesheet
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --black:      #0A0A0A;
  --white:      #FFFFFF;
  --gray-mid:   #6B6B6B;
  --gray-line:  #E0E0E0;
  --gray-bg:    #F7F7F5;
  --green:      #1C3B2F;
  --green-dark: #142B22;

  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --size-hero:    clamp(3rem, 7vw, 7rem);
  --size-h2:      clamp(1.875rem, 4vw, 3.25rem);
  --size-h3:      clamp(1.125rem, 2vw, 1.625rem);
  --size-body:    1rem;
  --size-small:   0.8125rem;
  --size-nav:     0.6875rem;
  --size-eyebrow: 0.6875rem;
  --size-numeral: clamp(4.5rem, 10vw, 8.5rem);

  --pad-section: clamp(5rem, 10vw, 9rem);
  --pad-x:       clamp(1.25rem, 5vw, 3.5rem);
  --max-w:       1280px;
  --nav-h:       68px;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:  240ms;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--size-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
::selection { background: var(--black); color: var(--white); }

/* ── Skip Link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--green);
  color: var(--white);
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ── Layout Utilities ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--pad-section);
}
.section--sm { padding-block: clamp(3rem, 6vw, 5rem); }
.section--dark {
  background: var(--black);
  color: var(--white);
  margin-bottom: -1px; /* Sub-Pixel-Gap zum Footer schließen */
}
.section--gray {
  background: var(--gray-bg);
}
.section--process-push {
  margin-top: clamp(10rem, 20vw, 18rem);
  transition: margin-top 0.55s ease;
}
.comparison:has(.comparison__body.is-open) ~ .section--process-push {
  margin-top: 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}

/* ── Typography Helpers ────────────────────────────────────── */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 1.25rem;
}
.section--dark .eyebrow { color: rgba(255,255,255,0.5); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--size-hero); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p { max-width: 62ch; }

.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.9375rem 2.25rem;
  font-family: var(--sans);
  font-size: var(--size-nav);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
}
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn--dark {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}
.btn--dark:hover { opacity: 0.8; }

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.6);
}
.btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn--outline-dark {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
}
.btn--outline-dark:hover { background: var(--black); color: var(--white); }

.btn--ghost {
  padding-inline: 0;
  color: var(--black);
  font-size: var(--size-small);
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--gray-line);
  padding-bottom: 0.125rem;
  border-radius: 0;
}
.btn--ghost:hover { border-color: var(--black); transform: none; }
.section--dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.3); }
.section--dark .btn--ghost:hover { border-color: var(--white); }

/* ── Navigation ────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--dur) var(--ease);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo img {
  height: 20px;
  width: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav__link {
  font-family: var(--sans);
  font-size: var(--size-nav);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color var(--dur) var(--ease);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--white);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link--active::after { width: 100%; }
.nav__link--active { color: var(--white); }

.nav__link--cta {
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.5rem 1.125rem;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

/* Hamburger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile nav panel */
.nav__mobile {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--black);
  z-index: 99;
  padding: 2.5rem var(--pad-x);
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile .nav__link {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
}
.nav__mobile .nav__link--cta {
  font-size: var(--size-nav);
  padding: 0.75rem 1.5rem;
  align-self: flex-start;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100svh - var(--nav-h));
  margin-bottom: -1px; /* Sub-Pixel-Gap zur nächsten Section schließen */
  min-height: 560px;
  background: var(--black);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.2) 0%,
    rgba(10,10,10,0.5) 60%,
    rgba(10,10,10,0.75) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0;
}

.hero__headline {
  font-family: var(--serif);
  font-size: var(--size-hero);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 15ch;
}

.hero__tagline {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  max-width: none;
  margin-top: 8rem;
  margin-bottom: 2rem;
}

.hero__cta { margin-top: 0.5rem; }

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero__scroll span {
  font-family: var(--sans);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.4; }
}

/* ── Video Feature ─────────────────────────────────────────── */
.video-feature {
  background: var(--black);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}

.video-feature__wrap {
  position: relative;
  width: 75%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
}

.video-feature__video {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.video-feature__controls {
  position: absolute;
  bottom: 0.875rem;
  right: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.video-feature__vol {
  position: relative;
  width: 2.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visueller Strich — zentriert, abgerundete Enden */
.video-feature__vol::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  pointer-events: none;
  transition: background 0.2s;
}

.video-feature__vol:hover::before {
  background: rgba(0, 0, 0, 0.8);
}

.video-feature__slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 5.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
}

.video-feature__slider::-webkit-slider-runnable-track {
  background: transparent;
}

.video-feature__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.15s;
}

.video-feature__slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}

.video-feature__slider::-moz-range-track {
  background: transparent;
  border: none;
}

.video-feature__slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.video-feature__mute {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(6px);
}

.video-feature__mute:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
}

.video-feature__mute .icon-unmuted { display: none; }
.video-feature__mute.is-unmuted .icon-muted { display: none; }
.video-feature__mute.is-unmuted .icon-unmuted { display: block; }

/* ── Section Header ────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

/* ── Intro Section ─────────────────────────────────────────── */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.intro__text h2 {
  margin-bottom: 1.5rem;
}
.intro__text p {
  color: var(--gray-mid);
  margin-bottom: 1rem;
}
.intro__text p:last-of-type { margin-bottom: 1.75rem; }

.intro__services {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-item {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--gray-line);
}
.service-item:first-child { border-top: 1px solid var(--gray-line); }
.service-item h3 {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}
.service-item p {
  font-size: 0.9375rem;
  color: var(--gray-mid);
  max-width: none;
}

/* ── Comparison: Videoportrait vs. About Me ────────────────── */
.comparison {
  padding-top: var(--pad-section);
  padding-bottom: 0;
  background: var(--white);
}

.comparison__intro {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 0.85rem;
}
.comparison__intro h2 { margin-block: 1rem 1.25rem; white-space: nowrap; }
.comparison__intro p {
  color: var(--gray-mid);
  max-width: 540px;
  margin-inline: auto;
}
.comparison__or {
  font-style: italic;
  color: var(--gray-mid);
  font-weight: 300;
}

.comparison__toggle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-mid);
  line-height: 0;
}
.comparison__toggle::before,
.comparison__toggle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.comparison__toggle[aria-expanded="true"]::before,
.comparison__toggle[aria-expanded="true"]::after {
  opacity: 0;
}
.comparison__toggle svg {
  flex-shrink: 0;
  transition: transform 0.4s ease;
}
.comparison__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.comparison__toggle {
  margin-bottom: 2.5rem;
}

.comparison__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s ease;
}
.comparison__body.is-open {
  /* max-height set via JS to match close speed */
}

.comparison__split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: 100%;
}

.comparison__side {
  display: flex;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
  position: relative;
}

.comparison__side--light {
  background: var(--gray-bg);
  color: var(--black);
  justify-content: flex-end;
}
.comparison__side--dark {
  background: var(--green-dark);
  color: var(--white);
  justify-content: flex-start;
}

.comparison__inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comparison__tag {
  font-family: var(--sans);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.comparison__side--dark .comparison__tag { opacity: 0.65; }

.comparison__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: 0.25rem;
}

.comparison__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: inherit;
  opacity: 0.92;
}
.comparison__side--light .comparison__lead { color: var(--black); opacity: 0.85; }

.comparison__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block: 0.5rem 0.25rem;
}
.comparison__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.88;
}
.comparison__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.comparison__footer {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
  border-color: currentColor;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.7;
}
.comparison__side--light .comparison__footer { border-color: rgba(10, 10, 10, 0.18); }
.comparison__side--dark  .comparison__footer { border-color: rgba(255, 255, 255, 0.22); }

.comparison__divider {
  position: relative;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* ── Pillars / Why Section ─────────────────────────────────── */
.pillars { padding-block: var(--pad-section); }

.pillar {
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-line);
}

.pillar__number {
  font-family: var(--serif);
  font-size: var(--size-numeral);
  font-weight: 300;
  line-height: 1;
  color: var(--gray-line);
  display: block;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.pillar__title {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
  color: var(--black);
}

.pillar p {
  font-size: 0.9375rem;
  color: var(--gray-mid);
  line-height: 1.75;
  max-width: none;
}

/* ── Process Section ───────────────────────────────────────── */
.process__intro {
  max-width: none;
  margin-bottom: 4rem;
  text-align: center;
}
.process__intro h2 { margin-bottom: 1rem; white-space: nowrap; }
.process__intro p { color: var(--gray-mid); text-align: center; margin-inline: auto; }

.process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
}
.process__steps--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.process__steps + .process__steps {
  margin-top: 3rem;
}
.process__steps::before {
  content: '';
  position: absolute;
  top: calc(clamp(2rem, 4vw, 3.5rem) + 1.5rem);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gray-line);
}

.process__step {
  padding-top: 0;
  padding-right: 2rem;
  position: relative;
}
.process__step::before {
  content: '';
  position: absolute;
  top: calc(clamp(2rem, 4vw, 3.5rem) + 1.5rem - 4px);
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--black);
  z-index: 1;
}

.process__num {
  font-family: var(--sans);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--gray-line);
  display: block;
  line-height: 1;
  margin-bottom: 0;
}

.process__step h3 {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--black);
}
.process__step-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gray-mid);
  white-space: nowrap;
  margin-top: 0.2rem;
}

.process__step p {
  font-size: 0.9375rem;
  color: var(--gray-mid);
  max-width: none;
  line-height: 1.65;
}

/* ── Journey / 9-Schritte Timeline ────────────────────────── */
.journey__intro {
  max-width: 48ch;
  margin-bottom: 4.5rem;
}
.journey__intro h2 { margin-bottom: 1rem; }
.journey__intro p { color: var(--gray-mid); }

.journey__timeline {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
}

.journey__timeline::before {
  content: '';
  position: absolute;
  left: 95px;
  top: 0.625rem;
  bottom: 0.625rem;
  width: 1px;
  background: var(--gray-line);
}

.journey-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 50px 1fr;
  align-items: start;
  padding-bottom: 3.25rem;
}
.journey-item:last-child { padding-bottom: 0; }

.journey-item__num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 300;
  color: var(--gray-line);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: right;
  padding-right: 1rem;
  padding-top: 0;
}

.journey-item__dot {
  justify-self: center;
  margin-top: 0.625rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--black);
  position: relative;
  z-index: 1;
}

.journey-item__body {
  padding-left: 0.5rem;
  max-width: 60ch;
}

.journey-item__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
  min-height: 22px;
}

.journey-item__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--black);
  opacity: 0.85;
}

.journey-item__title {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.35;
  color: var(--black);
}

.journey-item__sub {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gray-mid);
  font-style: italic;
  font-size: 0.78125rem;
  margin-left: 0.25rem;
}

.journey-item__body p {
  font-size: 0.9375rem;
  color: var(--gray-mid);
  line-height: 1.8;
}

.journey-item__body p + p {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .journey-item {
    grid-template-columns: 48px 32px 1fr;
    padding-bottom: 2.5rem;
  }
  .journey__timeline::before { left: 64px; }
  .journey-item__num {
    font-size: 1.5rem;
    padding-right: 0.5rem;
  }
  .journey-item__head { flex-wrap: wrap; gap: 0.625rem; }
  .journey-item__sub { display: block; margin-left: 0; }
}

@media (max-width: 480px) {
  .journey-item {
    grid-template-columns: 36px 24px 1fr;
  }
  .journey__timeline::before { left: 48px; }
  .journey-item__num { font-size: 1.25rem; padding-right: 0.375rem; }
  .journey-item__body { padding-left: 0.25rem; }
}

/* ── Portfolio Cards (shared) ──────────────────────────────── */
.portfolio-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.portfolio-card__thumb {
  position: relative;
  z-index: 0;
  aspect-ratio: 16 / 9;
  background: var(--gray-bg);
  overflow: hidden;
}

.portfolio-card__thumb .thumb-static {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.portfolio-card:not([data-has-gif]):hover .thumb-static { transform: scale(1.04); }
.portfolio-card[data-has-gif]:hover .thumb-static { opacity: 0; }

.portfolio-card__thumb .thumb-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
  transform: scale(1.0);
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.portfolio-card[data-has-gif]:hover .thumb-gif {
  opacity: 1;
  transform: scale(1.04);
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(10,10,10,0.33);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }

.portfolio-card__thumb--empty {
  background: var(--gray-bg);
  display: grid;
  place-items: center;
}
.portfolio-card__thumb--empty::after {
  content: '▶';
  font-size: 2rem;
  color: var(--gray-line);
}

.play-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
}
.play-icon svg { width: 18px; height: 18px; fill: white; margin-left: 3px; }

.portfolio-card__info {
  padding-top: 1rem;
}

.portfolio-card__cat {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
  display: block;
  margin-bottom: 0.375rem;
}

.portfolio-card__title {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--black);
}

/* Image-type card */
.portfolio-card[data-type="image"] .play-icon { display: none; }
.portfolio-card[data-type="image"]:hover .portfolio-card__overlay {
  background: rgba(10,10,10,0.35);
}

/* ── Portfolio Preview (Landing Page) ──────────────────────── */
.portfolio-preview .section-header { margin-bottom: 7rem; }
.portfolio-preview__tagline {
  margin-top: 1.25rem;
  font-size: var(--size-body);
  color: var(--gray-mid);
  max-width: 38ch;
}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.testimonial {
  padding-top: 1.75rem;
  border-top: 1px solid var(--gray-line);
}

.testimonial__quote {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.75vw, 1.3125rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--black);
  margin-bottom: 1.5rem;
  max-width: none;
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.testimonial__name {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.testimonial__role {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--gray-mid);
  letter-spacing: 0.06em;
}

/* ── About / Über mich ─────────────────────────────────────── */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.about__photo {
  position: sticky;
  top: 6rem;
}
.about__photo img {
  width: 100%;
  height: clamp(480px, 70vh, 700px);
  object-fit: cover;
  object-position: top center;
}

.about__text .eyebrow { margin-bottom: 1rem; }
.about__text h2 { margin-bottom: 1.75rem; }
.about__text p {
  color: var(--gray-mid);
  margin-bottom: 1.125rem;
  max-width: 48ch;
}
.about__text p:last-of-type { margin-bottom: 1.875rem; }

.about__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--black);
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--black);
  max-width: 30ch;
}

.about__signature {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  color: var(--black);
  display: block;
  margin-top: 1.75rem;
}

/* ── Legal / Impressum & Datenschutz ───────────────────────── */
.legal-page .page-hero { border-bottom: none; }

.legal {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.legal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
  max-width: 880px;
}

.legal__block {
  border-top: 1px solid var(--gray-line);
  padding-top: clamp(2rem, 3vw, 2.5rem);
}
.legal__block--wide { /* legacy, kept for backward compat */ }

.legal__heading {
  font-family: var(--serif);
  font-size: var(--size-h2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 1.5rem;
}

.legal__address {
  font-style: normal;
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.legal__contact {
  display: grid;
  grid-template-columns: 6rem 1fr;
  row-gap: 0.5rem;
  column-gap: 1.5rem;
  align-items: baseline;
}
.legal__contact dt {
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-mid);
}
.legal__contact dd {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-mid);
}
.legal__contact a {
  border-bottom: 1px solid var(--gray-line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal__contact a:hover { color: var(--black); border-color: var(--black); }

.legal__block p {
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 62ch;
}
.legal__block a {
  color: var(--gray-mid);
  border-bottom: 1px solid var(--gray-line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal__block a:hover { color: var(--black); border-color: var(--black); }

.legal__section {
  border-top: 1px solid var(--gray-line);
  padding-top: clamp(3rem, 5vw, 4.5rem);
}
.legal__section .eyebrow { margin-bottom: 1rem; }

.legal__heading-lg {
  font-family: var(--serif);
  font-size: var(--size-h2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 2.5rem;
}

.legal__longform {
  max-width: 62ch;
}
.legal__longform p {
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.legal__longform p:last-child { margin-bottom: 0; }

.legal__subheading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--black);
  margin-top: 2rem;
  margin-bottom: 0.625rem;
}
.legal__longform > .legal__subheading:first-child { margin-top: 0; }

.legal__longform a {
  color: var(--gray-mid);
  border-bottom: 1px solid var(--gray-line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  word-break: break-word;
}
.legal__longform a:hover { color: var(--black); border-color: var(--black); }

.legal__longform .legal__address {
  margin-bottom: 1.25rem;
}
.legal__longform .legal__address:last-child { margin-bottom: 0; }

.legal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.legal__list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--gray-mid);
}

@media (max-width: 768px) {
  .legal__contact { grid-template-columns: 5rem 1fr; column-gap: 1rem; }
}

/* ── Final CTA Section ─────────────────────────────────────── */
.cta-final {
  text-align: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}
.cta-final h2 {
  margin-bottom: 1.25rem;
  max-width: 34ch;
  margin-inline: auto;
}
.cta-final p {
  color: rgba(255,255,255,0.6);
  padding-top: 0.375rem;
  margin-bottom: 2rem;
  margin-inline: auto;
  max-width: 46ch;
}
#cta-home h2 {
  margin-bottom: 2.5rem;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--black);
  color: var(--white);
  padding-top: 4.5rem;
  padding-bottom: 2rem;
}

.footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.75rem;
}

.footer__brand {}
.footer__logo { height: 20px; width: auto; margin-bottom: 1.25rem; }
.footer__brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 26ch;
}

.footer__col-title {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--dur) var(--ease);
}
.footer__link:hover { color: var(--white); }

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--dur) var(--ease);
}
.footer__social-link:hover { color: var(--white); }
.footer__social-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer__copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}
.footer__legal {
  display: flex;
  gap: 1.5rem;
}
.footer__legal a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  transition: color var(--dur) var(--ease);
}
.footer__legal a:hover { color: rgba(255,255,255,0.6); }

/* ── Portfolio Page ────────────────────────────────────────── */
.page-hero {
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--gray-line);
}
.page-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.page-hero h1 { margin-top: 0.5rem; }
.page-hero p { color: var(--gray-mid); max-width: 44ch; margin-top: 1.25rem; }

/* Services page hero variant */
.page-hero--services {
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.page-hero--services .page-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
}
.page-hero--services .page-hero__center h1 {
  margin-top: 0;
  text-align: center;
  align-self: center;
}
.page-hero--services .svc-rule {
  border: none;
  border-top: 1px solid var(--gray-line);
  width: 50%;
  align-self: center;
  margin-top: 1.5rem;
}
.page-hero--services .page-hero__center p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  white-space: nowrap;
  max-width: none;
  margin-top: 1.5rem;
  align-self: center;
}
.page-hero--services .page-hero__center p svg { color: var(--green); flex-shrink: 0; }
.page-hero--services .page-hero__center .btn { margin-top: 1.75rem; align-self: center; }

/* Portfolio grid on portfolio page */
.portfolio-page .page-hero {
  border-bottom: none;
}
.portfolio-page .section--sm {
  padding-top: 0;
}
.portfolio-page .grid-3 {
  gap: clamp(1rem, 3vw, 2rem);
}
.portfolio-page .portfolio-card__thumb {
  aspect-ratio: 1 / 1;
}



/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10,10,10,0.94);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  animation: lbFadeIn 0.25s var(--ease);
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__inner {
  position: relative;
  width: min(92vw, 1020px);
  aspect-ratio: 16 / 9;
  background: #000;
  animation: lbScaleIn 0.3s var(--ease);
}
@keyframes lbScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox__inner iframe,
.lightbox__inner video,
.lightbox__inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox__close {
  position: fixed;
  top: 1.5rem;
  right: 1.75rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 1001;
}
.lightbox__close:hover { color: var(--white); transform: rotate(90deg); }

/* ── Booking Page ──────────────────────────────────────────── */
.booking__layout {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  align-items: start;
}

.booking__col { padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
.booking__col:first-child { padding-left: 0; }
.booking__col:last-child { padding-right: 0; }

.booking__col h2 {
  font-family: var(--sans);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--gray-mid);
}

.booking__col > p {
  color: var(--gray-mid);
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

.booking__divider {
  width: 1px;
  background: var(--gray-line);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.booking__divider span {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--gray-mid);
  background: var(--white);
  padding-block: 0.5rem;
  position: relative;
  z-index: 1;
}

/* Calendly embed wrapper */
.calendly-wrap {
  height: 700px;
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
}
.calendly-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Contact Form */
.form-group {
  margin-bottom: 1.75rem;
}
.form-group label {
  display: block;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 0.625rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--gray-line);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--black);
  outline: none;
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--black); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-line); }

.form__submit { margin-top: 0.5rem; }
.form__status {
  margin-top: 1rem;
  font-size: var(--size-small);
  color: var(--gray-mid);
  min-height: 1.5rem;
}
.form__status--ok { color: var(--green); }
.form__status--err { color: #B94A48; }

/* Booking tertiary */
.booking-tertiary {
  text-align: center;
}
.booking-tertiary p { color: var(--gray-mid); margin-bottom: 1.5rem; margin-inline: auto; }

/* ── Services / Pricing Page ───────────────────────────────── */


/* Pricing Grid — Desktop: 4 Cols + Add-on spannt Cols 1-2 in Row 2 */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 1.25rem 1.5rem;
  align-items: stretch;
}
/* DOM-Reihenfolge: card1, card2, addon, card3, card4 — explizite Grid-Platzierung: */
.pricing__grid > .pricing-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.pricing__grid > .pricing-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.pricing__grid > .pricing-card:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.pricing__grid > .pricing-card:nth-of-type(4) { grid-column: 4; grid-row: 1; }
.pricing__grid > .pricing-addon:nth-of-type(1) { grid-column: 1 / 3; grid-row: 2; }
.pricing__grid > .pricing-addon:nth-of-type(2) { grid-column: 3 / 5; grid-row: 2; align-self: start; }

/* Pricing Card */
.pricing-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-line);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}
.pricing-card:hover {
  border-color: rgba(10,10,10,0.45);
  box-shadow: 0 14px 36px -20px rgba(10,10,10,0.22);
  transform: translateY(-2px);
}
.pricing-card--highlight {
  border: 2px solid var(--green);
  box-shadow: 0 14px 32px -22px rgba(28,59,47,0.35);
}
.pricing-card--highlight:hover {
  border-color: var(--green-dark);
  box-shadow: 0 18px 40px -22px rgba(28,59,47,0.4);
}
.pricing-card--dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.pricing-card--dark:hover {
  border-color: #1a1a1a;
  box-shadow: 0 14px 36px -20px rgba(0,0,0,0.4);
}
.pricing-card--dark .pricing-card__tag,
.pricing-card--dark .pricing-card__intro {
  color: rgba(255,255,255,0.7);
}
.pricing-card--dark .pricing-card__name,
.pricing-card--dark .pricing-card__amount,
.pricing-card--dark .pricing-card__amount-text {
  color: var(--white);
}
.pricing-card--dark .pricing-card__features li {
  color: rgba(255,255,255,0.9);
}
.pricing-card--dark .btn--outline-dark {
  color: var(--white);
  border-color: var(--white);
}
.pricing-card--dark .btn--outline-dark:hover {
  background: var(--white);
  color: var(--black);
}
.pricing-card--gray {
  background: #D8D8D8;
  border-color: #D8D8D8;
  color: var(--black);
}
.pricing-card--gray:hover {
  border-color: #c0c0c0;
  box-shadow: 0 14px 36px -20px rgba(0,0,0,0.15);
}
.pricing-card--gray .pricing-card__tag {
  color: rgba(0,0,0,0.6);
}

#cinematic .pricing-card__badge {
  background: var(--black);
}
.pricing-card__badge {
  position: absolute;
  top: -0.625rem;
  right: 1.5rem;
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.pricing-card__tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
  white-space: nowrap;
}
.pricing-card__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--black);
  margin: 0;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
  min-height: 3rem;
}
.pricing-card__prefix {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-mid);
  align-self: center;
}
.pricing-card__amount {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  color: var(--black);
  letter-spacing: -0.02em;
}
.pricing-card__currency {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--black);
}
.pricing-card__amount-text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  color: var(--black);
  line-height: 1.2;
}
.pricing-card__addon-note {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: -0.375rem;
}

.pricing-card__cta {
  width: 100%;
  justify-content: center;
}

.pricing-card__divider {
  border: 0;
  border-top: 1px solid var(--gray-line);
  margin: 0;
}
.pricing-card--dark .pricing-card__divider {
  border-top-color: var(--white);
}
.pricing-card--gray .pricing-card__divider {
  border-top-color: var(--white);
}

.pricing-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pricing-card__feat-title {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-mid);
}
.pricing-card__intro {
  font-size: 0.875rem;
  color: var(--gray-mid);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--black);
}
.pricing-card__features svg {
  flex-shrink: 0;
  margin-top: 0.3125rem;
  color: var(--green);
}
.feature--not-included svg {
  color: #DC3545;
}
.feature--not-included span {
  text-decoration: line-through;
}
.pricing-card__features .feature--exclusive,
.pricing-card__features .feature--exclusive svg {
  color: var(--green);
}
.pricing-card__features .feature--exclusive span {
  font-weight: 600;
}
#klein .pricing-card__features li {
  opacity: 0.65;
}

/* Music Add-on Banner */
.pricing-addon {
  background: var(--white);
  border: 1px dashed rgba(10,10,10,0.25);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pricing-addon__inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 280px;
  min-width: 0;
}
.pricing-addon__eyebrow {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
}
.pricing-addon__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--black);
  margin: 0;
  line-height: 1.2;
}
.pricing-addon__desc {
  font-size: 0.8125rem;
  color: var(--gray-mid);
  margin: 0;
  max-width: 56ch;
  line-height: 1.5;
}
.pricing-addon__action {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.pricing-addon__price {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--black);
}

/* Raw Material Add-on — same height as Music Add-on */
.pricing-addon--raw {
  min-height: 180px;
}

/* Toggle Switch */
.pricing-addon__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}
.pricing-addon__toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.pricing-addon__toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--gray-line);
  border-radius: 999px;
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}
.pricing-addon__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.pricing-addon__toggle input:checked + .pricing-addon__toggle-track {
  background: var(--green);
}
.pricing-addon__toggle input:checked + .pricing-addon__toggle-track .pricing-addon__toggle-thumb {
  transform: translateX(16px);
}
.pricing-addon__toggle input:focus-visible + .pricing-addon__toggle-track {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.pricing-addon__toggle-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
  transition: color var(--dur) var(--ease);
}
.pricing-addon__toggle input:checked ~ .pricing-addon__toggle-label {
  color: var(--green);
}

.pricing__note {
  font-size: 0.75rem;
  color: var(--gray-mid);
  text-align: center;
  margin-top: 2.5rem;
  margin-inline: auto;
  letter-spacing: 0.04em;
}

/* "Was du immer bekommst"-Section */
.services-included__intro {
  text-align: center;
  margin-bottom: 3.5rem;
}
.services-included__intro p {
  margin-inline: auto;
  max-width: 52ch;
  color: var(--gray-mid);
  margin-top: 1rem;
}
.services-included__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  max-width: 880px;
  margin-inline: auto;
}
.services-included__item h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.625rem;
}
.services-included__item p {
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ── Animations ────────────────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.anim.is-visible {
  opacity: 1;
  transform: none;
}
.process__step.anim {
  transform: none;
  transition: opacity 1.4s cubic-bezier(0.25, 0, 0.1, 1);
}
.process__step.anim.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .anim { transition: none; }
}
.anim-delay-1 { transition-delay: 80ms; }
.anim-delay-2 { transition-delay: 160ms; }
.anim-delay-3 { transition-delay: 240ms; }

/* ── Responsive — Tablet (≤ 1024px) ───────────────────────── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .video-feature__wrap { width: 90%; }

  .intro__grid { grid-template-columns: 1fr; gap: 3rem; }
  .pillars .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
  .process__steps::before { display: none; }
  .process__step::before { display: none; }
  .process__step { padding-top: 0; border-top: 1px solid var(--gray-line); padding-top: 1.5rem; }

  .testimonials__grid { grid-template-columns: 1fr; gap: 2rem; }

  .about__inner { grid-template-columns: 1fr; }
  .about__photo { position: static; }
  .about__photo img { height: clamp(340px, 55vw, 500px); }
  .about__quote { font-size: 1.25rem; margin: 1.75rem 0; }

  .footer__main { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .nav__list { display: none; }
  .nav__burger { display: flex; }

  .comparison__split {
    grid-template-columns: 1fr;
  }
  .comparison__side--light { justify-content: center; }
  .comparison__side--dark  { justify-content: center; }
  .comparison__inner { max-width: 560px; margin-inline: auto; }
  .comparison__divider {
    width: 100%;
    height: 0;
    background: transparent;
  }
  .comparison__divider span {
    position: relative;
    top: auto;
    left: auto;
    transform: translateY(-50%);
    margin-inline: auto;
  }

  .booking__layout {
    grid-template-columns: 1fr;
  }
  .booking__divider { width: 100%; height: 1px; padding-block: 2rem; background-clip: content-box; }
  .booking__divider span { padding-inline: 1rem; }
  .booking__col { padding-inline: 0; }
  .booking__col:first-child,
  .booking__col:last-child { padding-inline: 0; }

  .page-hero__inner { flex-direction: column; align-items: flex-start; }

  /* Pricing: 2 cols — Add-ons unter Karten 1+2 und 3+4 */
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing__grid > .pricing-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .pricing__grid > .pricing-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .pricing__grid > .pricing-card:nth-of-type(3) { grid-column: 1; grid-row: 1; }
  .pricing__grid > .pricing-card:nth-of-type(4) { grid-column: 2; grid-row: 1; }
  .pricing__grid > .pricing-addon:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .pricing__grid > .pricing-addon:nth-of-type(2) { grid-column: 2; grid-row: 2; }

  .services-included__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Responsive — Mobile (≤ 640px) ────────────────────────── */
@media (max-width: 640px) {
  :root { --pad-section: clamp(3.5rem, 8vw, 5rem); }

  /* Prevent iOS auto-zoom on form focus (font-size must be ≥ 16px) */
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 16px; }

  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }

  .portfolio-page .grid-3 { row-gap: 3rem; }

  .pillars .grid-3 { grid-template-columns: 1fr; }

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

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer__main { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .hero__headline { font-size: clamp(2.5rem, 12vw, 4rem); }

  .video-feature__wrap { width: 100%; }

  .comparison__side {
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
    padding-inline: var(--pad-x);
  }
  .comparison__divider span {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
  }

  .nav__link--cta { display: none; }

  /* Pricing: 1 col, Add-ons zwischen Karte 2 und 3 */
  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pricing__grid > .pricing-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .pricing__grid > .pricing-card:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .pricing__grid > .pricing-addon:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .pricing__grid > .pricing-addon:nth-of-type(2) { grid-column: 1; grid-row: 4; }
  .pricing__grid > .pricing-card:nth-of-type(3) { grid-column: 1; grid-row: 5; }
  .pricing__grid > .pricing-card:nth-of-type(4) { grid-column: 1; grid-row: 6; }

  .pricing-addon { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .pricing-addon__action { width: 100%; justify-content: space-between; }

  /* Services Page Hero — mobile */
  .page-hero--services .page-hero__center p {
    white-space: normal;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 88%;
  }
}

/* ── Soundbite Layout (leistungen-neu) ─────────────────────── */
#leistungen-neu {
  background: var(--white);
  padding-block: clamp(4rem, 8vw, 7rem);
}

#leistungen-neu .container {
  padding-inline: calc(var(--pad-x) - 1rem);
}

.se-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: stretch;
}

.se-part-a {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.se-hook,
.se-beats {
  padding-right: 3rem;
}

.se-part-a-img {
  width: calc(100% - 3rem);
  margin-top: 1rem;
  overflow: hidden;
}

.se-part-a-img img {
  width: 100%;
  height: auto;
  display: block;
}

.se-part-b {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  padding-left: 3rem;
  border-left: 1px solid var(--gray-line);
  min-width: 0;
}

.se-hook {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.625rem, 2.75vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: none;
}

.se-beats {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(0.875rem, 1.25vw, 1.0625rem);
  line-height: 1.5;
  max-width: none;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.se-part-b p {
  font-size: 0.9375rem;
  line-height: 1.8;
  max-width: none;
}

@media (max-width: 768px) {
  /* Vertikales Atmen reduzieren */
  #leistungen-neu {
    padding-block: clamp(3rem, 9vw, 4.5rem);
  }

  /* Seitenpadding für Mobile zurücksetzen (Desktop-Anpassung neutralisieren) */
  #leistungen-neu .container {
    padding-inline: clamp(1.25rem, 5vw, 1.75rem);
  }

  /* Eine Spalte, großzügiger Abstand zwischen Teil A und Teil B */
  .se-split {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  /* Erzwungene Desktop-Zeilenumbrüche in der Headline ausblenden — natürlicher Umbruch auf Mobile */
  .se-hook br {
    display: none;
  }

  /* Teil A: bequemer Rhythmus, mobile Typografie */
  .se-part-a {
    gap: 1rem;
  }
  .se-hook {
    padding-right: 0;
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.25;
  }
  .se-beats {
    padding-right: 0;
    font-size: clamp(0.9375rem, 3.75vw, 1.0625rem);
  }

  /* Bild voller Mobile-Breite, harmonischer Abstand zur Subline */
  .se-part-a-img {
    width: 100%;
    margin-top: 1.25rem;
  }

  /* Teil B: harte Linie entfernen, dezenter Akzentstrich, mehr Luft zwischen Absätzen */
  .se-part-b {
    border-left: none;
    padding-left: 0;
    padding-top: 0;
    gap: 1.25rem;
  }
  .se-part-b p {
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}

/* ── Cookie Consent ─────────────────────────────────────────
   Banner, Modal, Toggles, Embed-Platzhalter
   ────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cookie Banner — fixed unten */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9000;
  background: var(--black);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -20px 50px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 2rem;
  align-items: center;
}

.cookie-banner__title {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
  color: var(--white);
}
.cookie-banner__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 64ch;
  margin: 0;
}
.cookie-banner__body a {
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: border-color var(--dur) var(--ease);
}
.cookie-banner__body a:hover { border-color: var(--white); }

.cookie-banner__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Buttons (shared mit Modal & Embed-Platzhalter) */
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cookie-btn--primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.cookie-btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.cookie-btn--outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.32);
}
.cookie-btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

.cookie-btn--ghost {
  color: rgba(255,255,255,0.7);
  padding-inline: 0.5rem;
  border-color: transparent;
}
.cookie-btn--ghost:hover { color: var(--white); }

/* Cookie Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.cookie-modal.is-visible { opacity: 1; }

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.6);
}

.cookie-modal__panel {
  position: relative;
  width: min(640px, calc(100% - 2rem));
  max-height: calc(100vh - 3rem);
  margin: 1.5rem auto;
  background: var(--white);
  color: var(--black);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}

.cookie-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cookie-modal__title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--black);
}
.cookie-modal__close {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gray-mid);
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem 0 0;
  transition: color var(--dur) var(--ease);
}
.cookie-modal__close:hover { color: var(--black); }

.cookie-modal__intro {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-mid);
  margin: 0;
}
.cookie-modal__intro a {
  color: var(--black);
  border-bottom: 1px solid var(--gray-line);
  transition: border-color var(--dur) var(--ease);
}
.cookie-modal__intro a:hover { border-color: var(--black); }

.cookie-modal__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.cookie-modal__actions .cookie-btn--outline {
  color: var(--black);
  border-color: var(--gray-line);
}
.cookie-modal__actions .cookie-btn--outline:hover {
  border-color: var(--black);
  background: transparent;
}
.cookie-modal__actions .cookie-btn--ghost { color: var(--gray-mid); }
.cookie-modal__actions .cookie-btn--ghost:hover { color: var(--black); }

/* Toggle-Optionen */
.cookie-options {
  display: flex;
  flex-direction: column;
}
.cookie-option {
  padding: 1rem 0;
  border-top: 1px solid var(--gray-line);
}
.cookie-option:first-child { border-top: none; padding-top: 0.5rem; }
.cookie-option:last-child  { padding-bottom: 0.5rem; }

.cookie-option__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.cookie-option__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--black);
}
.cookie-option__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--gray-mid);
  max-width: 60ch;
  margin: 0;
}

/* Toggle Switch */
.cookie-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.cookie-toggle input:disabled { cursor: not-allowed; }

.cookie-toggle__track {
  display: inline-block;
  width: 42px;
  height: 22px;
  background: var(--gray-line);
  border-radius: 999px;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.cookie-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform var(--dur) var(--ease);
}
.cookie-toggle input:checked + .cookie-toggle__track {
  background: var(--green);
}
.cookie-toggle input:checked + .cookie-toggle__track .cookie-toggle__thumb {
  transform: translateX(20px);
}
.cookie-toggle input:disabled + .cookie-toggle__track {
  opacity: 0.55;
}
.cookie-toggle input:focus-visible + .cookie-toggle__track {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Embed-Platzhalter (Vimeo/YouTube/Calendly blockiert) */
.embed-blocked {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  padding: 2rem 1.5rem;
  text-align: center;
}
.lightbox .embed-blocked {
  background: #111;
  color: var(--white);
  border-color: rgba(255,255,255,0.08);
  min-height: 60vh;
  aspect-ratio: 16 / 9;
}
.embed-blocked__inner {
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.embed-blocked__icon {
  color: var(--gray-mid);
  margin-bottom: 0.25rem;
}
.lightbox .embed-blocked__icon { color: rgba(255,255,255,0.55); }
.embed-blocked__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--black);
}
.lightbox .embed-blocked__title { color: var(--white); }
.embed-blocked__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gray-mid);
  margin: 0;
}
.lightbox .embed-blocked__body { color: rgba(255,255,255,0.7); }
.embed-blocked__fallback {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--gray-mid);
  margin: 0;
}
.embed-blocked__fallback a {
  color: inherit;
  border-bottom: 1px solid currentColor;
}
.lightbox .embed-blocked__fallback { color: rgba(255,255,255,0.55); }
.embed-blocked__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}
.embed-blocked__actions .cookie-btn--ghost {
  color: var(--gray-mid);
}
.embed-blocked__actions .cookie-btn--ghost:hover { color: var(--black); }
.lightbox .embed-blocked__actions .cookie-btn--ghost { color: rgba(255,255,255,0.7); }
.lightbox .embed-blocked__actions .cookie-btn--ghost:hover { color: var(--white); }

/* Datenschutzeinstellungen-Seite */
.consent-page__intro {
  color: var(--gray-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 2.5rem;
}
.consent-page__intro a {
  color: var(--black);
  border-bottom: 1px solid var(--gray-line);
  transition: border-color var(--dur) var(--ease);
}
.consent-page__intro a:hover { border-color: var(--black); }

.consent-page__panel {
  max-width: 720px;
  border: 1px solid var(--gray-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
}

.consent-page__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-line);
}
.consent-page__actions .cookie-btn--outline {
  color: var(--black);
  border-color: var(--gray-line);
}
.consent-page__actions .cookie-btn--outline:hover {
  border-color: var(--black);
}

.consent-status {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.consent-status.is-visible {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 768px) {
  .cookie-banner__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cookie-banner__actions {
    justify-content: stretch;
  }
  .cookie-banner__actions .cookie-btn {
    flex: 1 1 auto;
    padding-inline: 0.75rem;
  }
  .cookie-modal__actions {
    flex-direction: column-reverse;
  }
  .cookie-modal__actions .cookie-btn { width: 100%; }
  .cookie-option__head {
    flex-wrap: wrap;
  }
  .consent-page__actions { flex-direction: column; }
  .consent-page__actions .cookie-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REDESIGN — Vollständig (≤ 640px · Smartphones)
   Desktop-Layout (> 1024px) bleibt unverändert.
   Tablet-Breakpoints (≤ 1024px) bleiben erhalten.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Text-Overflow-Korrekturen ────────────────────────────── */
  /* Comparison-Headline: white-space:nowrap aus CSS wird hier zurückgesetzt */
  .comparison__intro h2 { white-space: normal; }
  /* Process-Überschrift: nowrap-Regel aus CSS überschreiben */
  .process__intro h2    { white-space: normal; }
  /* Schritt-Untertitel "(kostenlos und unverbindlich)" darf umbrechen */
  .process__step-sub    { white-space: normal; }

  /* ── Hero ─────────────────────────────────────────────────── */
  /* Eyebrow-Buchstabenabstand leicht reduzieren — auf schmalen Screens sonst zu breit */
  .hero__eyebrow { letter-spacing: 0.18em; }
  /* Abstände zwischen den Hero-Elementen etwas komprimieren */
  .hero__content { gap: 1.25rem; }
  /* hero__tagline margin-top: 8rem bleibt unverändert — editorielle Entscheidung */

  /* ── Video Feature ────────────────────────────────────────── */
  /* Vertikaler Lautstärke-Slider: auf Touch-Screens nicht bedienbar → ausblenden */
  .video-feature__vol { display: none; }
  /* Mute-Button etwas nach innen rücken */
  .video-feature__controls {
    bottom: 0.625rem;
    right: 0.625rem;
  }

  /* ── Portfolio Preview ────────────────────────────────────── */
  /* 7rem Abstand zwischen Section-Header und Grid ist auf Mobile zu viel */
  .portfolio-preview .section-header { margin-bottom: 2.5rem; }

  /* ── Comparison-Sektion ───────────────────────────────────── */
  /* Toggle-Button: etwas größere Touch-Fläche */
  .comparison__toggle { padding-block: 0.5rem; }
  /* Großes Desktop-margin-top auf Mobile deutlich reduzieren */
  .section--process-push { margin-top: clamp(3rem, 8vw, 4.5rem); }
  /* "vs"-Kreis exakt auf die Grenze grau↔grün setzen */
  .comparison__divider span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* Weißen Abstand zwischen ausgeklappter grüner Section und nächster Section entfernen */
  .comparison:has(.comparison__body.is-open) ~ .section--process-push {
    margin-top: 0;
  }

  /* ── Process Section ──────────────────────────────────────── */
  /* Unnötiges rechtes Padding auf Single-Column entfernen */
  .process__step { padding-right: 0; }
  /* Nummer → Titel-Abstand etwas komprimieren */
  .process__step h3 { margin-top: 1.5rem; }

  /* ── Pricing Cards ────────────────────────────────────────── */
  /* Leicht kompakteres Innenabstand auf engen Screens */
  .pricing-card         { padding: 1.75rem 1.375rem; }
  .pricing-card--highlight { padding: 1.75rem 1.375rem; }

  /* ── Final CTA Section ────────────────────────────────────── */
  /* Headline-max-width aufheben — volle Breite nutzen */
  .cta-final h2 { max-width: 100%; }
  .cta-final p  { white-space: normal !important; }

  /* ── Footer ───────────────────────────────────────────────── */
  /* Rechtliche Links dürfen umbrechen statt seitlich zu überlaufen */
  .footer__legal {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  /* ── Über mich — About Page ───────────────────────────────── */
  /* Zitat-Einrückung auf Mobile reduzieren */
  .about__quote {
    padding-left: 1rem;
    margin: 1.5rem 0;
  }

  /* ── Booking / Termin-Buchen Page ────────────────────────── */
  /* Calendly-Widget-Höhe auf Mobile anpassen */
  .calendly-wrap { height: 580px; }
}

/* ── Mobile-only Zeilenumbruch ───────────────────────────────── */
.mobile-break { display: none; }
@media (max-width: 768px) {
  .mobile-break { display: block; }
}

/* ── Sehr kleine Bildschirme (≤ 380px) ──────────────────────── */
@media (max-width: 380px) {
  /* Engere Typografie für sehr schmale Viewports */
  .hero__headline { font-size: 2.25rem; }
  .btn {
    letter-spacing: 0.12em;
    padding-inline: 1.5rem;
    font-size: 0.625rem;
  }
  .se-hook { font-size: 1.375rem; }
  .process__step h3 { font-size: 0.75rem; }
}