:root {
  --grund: #F3EDEE;
  --text: #2A2024;
  --text-2: rgb(42 32 36 / 0.68);
  --text-3: rgb(42 32 36 / 0.48);
  --linie: rgb(42 32 36 / 0.14);
  --akzent: #D9B3CF;
  --hell: #F7F2F3;
  --hell-2: rgb(247 242 243 / 0.7);
  --hell-3: rgb(247 242 243 / 0.5);

  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --rand: 20px;
  --luft: 72px;
  --radius: 4px;
  --bar: 40px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; }
}

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.breite { max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }

/* Balken ganz oben */
.bar {
  display: flex; align-items: center; justify-content: center;
  height: var(--bar);
  padding-inline: var(--rand);
  background: var(--akzent);
  font-size: 14px; letter-spacing: -0.005em;
  text-align: center;
}

/* Logo als Maske, Farbe über color */
.logo {
  display: block;
  width: 176px; aspect-ratio: 535 / 135;
  background: currentColor;
  -webkit-mask: url(img/logo.svg) center / contain no-repeat;
          mask: url(img/logo.svg) center / contain no-repeat;
}

/* Einstieg */
.hero {
  position: relative;
  height: calc(100svh - var(--bar));
  min-height: 560px;
  overflow: hidden;
  color: var(--hell);
  background: #2A2024;
}
.hero__bild { position: absolute; inset: -12% 0 0 0; }
.hero__bild img {
  object-position: 42% 50%;
  animation: bild-rein 1600ms var(--expo) both;
}
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(30 20 24 / 0.42), rgb(30 20 24 / 0) 22%),
    linear-gradient(to top, rgb(30 20 24 / 0.78), rgb(30 20 24 / 0) 52%);
}

.kopf {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 40px;
  padding: 24px var(--rand) 0;
}
.kopf__link { display: none; font-size: 15px; color: var(--hell); transition: opacity 150ms ease-out; }
.kopf__link:hover { opacity: 0.7; }
@media (min-width: 900px) {
  .kopf { max-width: 1200px; margin-inline: auto; }
  .kopf__link { display: block; flex: 1; }
  .kopf__link:nth-child(2) { flex: 0 0 auto; margin-right: auto; }
  .kopf__link:first-child { flex: 0 0 auto; }
  .kopf__link:nth-child(4) { flex: 0 0 auto; margin-left: auto; }
  .kopf__link:last-child { flex: 0 0 auto; }
  .kopf .logo { position: absolute; left: 50%; translate: -50% 0; width: 200px; }
  .hero__bild { inset: 0; }
  .hero__bild img { object-position: 50% 20%; }
}

.hero__text {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 96px;
  max-width: 1200px; margin-inline: auto;
  padding-inline: var(--rand);
}
h1 {
  font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.08em; }
.zeile > span { display: block; animation: zeile-rein 1000ms var(--expo) both; }
.zeile:nth-child(1) > span { animation-delay: 250ms; }
.zeile:nth-child(2) > span { animation-delay: 340ms; }
.zeile:nth-child(3) > span { animation-delay: 430ms; }
.hero__unter {
  margin-top: 16px;
  color: var(--hell-2);
  animation: blende 800ms ease-out 700ms both;
}

@keyframes bild-rein { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes zeile-rein { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }

/* Abschnitte */
.abschnitt { padding-block: var(--luft); }
.abschnitt--eng { padding-top: 0; }

.titelreihe {
  display: grid; gap: 16px;
  padding-bottom: 40px;
}
h2 {
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hinweis { max-width: 46ch; font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) {
  .titelreihe { grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: end; padding-bottom: 64px; }
  .titelreihe h2 { grid-column: span 2; }
}

/* Preise */
.preise { display: grid; gap: 64px; }
@media (min-width: 900px) {
  .preise { grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
}
.preise h3 {
  font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--text);
}
.preise dl > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--linie);
}
.preise dt { color: var(--text); }
.preise dd { font-family: var(--mono); font-size: 15px; white-space: nowrap; color: var(--text-2); }
.preise__notiz { margin-top: 16px; font-size: 15px; color: var(--text-3); }

/* Arbeiten */
.reihe {
  display: flex; gap: 16px;
  padding-inline: var(--rand);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
}
.reihe::-webkit-scrollbar { display: none; }
.reihe li { flex: 0 0 72%; scroll-snap-align: start; }
.reihe a { display: block; }
.reihe__bild {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius);
  background: var(--linie);
}
.reihe__bild img { transition: transform 600ms var(--expo); }
.reihe a:hover .reihe__bild img { transform: scale(1.04); }
.reihe__name { display: block; margin-top: 16px; font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; }
.reihe__art { display: block; margin-top: 2px; font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) {
  .reihe {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    max-width: 1200px; margin-inline: auto; overflow: visible;
  }
}

/* Bild-Reveal */
.js .reihe__bild { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--expo); }
.js .reihe__bild img { transform: scale(1.15); transition: transform 1400ms var(--expo); }
.js .offen-da .reihe__bild { clip-path: inset(0 0 0 0); }
.js .offen-da .reihe__bild img { transform: scale(1); }
.js .reihe li:nth-child(2) .reihe__bild, .js .reihe li:nth-child(2) img { transition-delay: 90ms; }
.js .reihe li:nth-child(3) .reihe__bild, .js .reihe li:nth-child(3) img { transition-delay: 180ms; }
.js .reihe li:nth-child(4) .reihe__bild, .js .reihe li:nth-child(4) img { transition-delay: 270ms; }

/* Termin */
.termin {
  background: var(--text);
  color: var(--hell);
  padding-block: var(--luft);
}
.termin__raster { display: grid; gap: 64px; }
@media (min-width: 900px) {
  .termin__raster { grid-template-columns: 2fr 1fr; gap: 40px; align-items: end; }
}
.termin h2 { font-size: clamp(44px, 8.2vw, 96px); letter-spacing: -0.035em; line-height: 1.02; }
.termin__text { max-width: 44ch; margin-top: 24px; font-size: 18px; color: var(--hell-2); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 40px;
  height: 56px; padding-inline: 32px;
  border-radius: 999px;
  background: var(--akzent); color: var(--text);
  font-weight: 500; font-size: 17px;
  transition: background-color 150ms ease-out;
}
.knopf:hover { background: #E6C8DE; }
.termin__daten > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid rgb(247 242 243 / 0.16);
}
.termin__daten > div:first-child { border-top: 1px solid rgb(247 242 243 / 0.16); }
.termin__daten dt { color: var(--hell-3); }
.termin__daten a { display: inline-block; padding-top: 8px; margin-top: -8px; border-bottom: 1px solid var(--hell-3); transition: border-color 150ms ease-out; }
.termin__daten a:hover { border-color: var(--hell); }
.offen { color: var(--hell-3); }

/* Fuss */
.fuss { background: var(--text); color: var(--hell-3); padding-block: 40px 64px; font-size: 14px; }
.fuss__raster {
  display: grid; gap: 16px;
  padding-top: 40px;
  border-top: 1px solid rgb(247 242 243 / 0.16);
}
.logo--fuss { color: var(--hell); width: 176px; margin-bottom: 8px; }
@media (min-width: 900px) {
  .fuss { padding-bottom: 40px; }
  .fuss__raster { grid-template-columns: 2fr 1fr; gap: 40px; align-items: end; }
  .logo--fuss { grid-column: 1 / -1; }
}

/* Schwebende Pille */
.pille {
  position: fixed; z-index: 50;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 24px 0 20px;
  border-radius: 999px;
  background: var(--text); color: var(--hell);
  font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 24px rgb(30 20 24 / 0.22);
  animation: pille-rein 900ms var(--expo) 900ms both;
  transition: transform 500ms var(--expo), opacity 200ms ease-out, background-color 150ms ease-out;
}
.pille:hover { background: #3A2D32; }
.pille__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.pille__klein { color: var(--hell-3); font-weight: 400; font-size: 15px; }
.pille.weg { transform: translateY(96px); opacity: 0; pointer-events: none; }
@keyframes pille-rein { from { transform: translateY(96px); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bild img, .zeile > span, .hero__unter, .pille { animation: none; }
  .js .reihe__bild { clip-path: none; transition: none; }
  .js .reihe__bild img, .reihe__bild img { transform: none; transition: none; }
  .pille { transition: opacity 200ms ease-out; }
  .pille.weg { transform: none; }
}