/* ==========================================================================
   Work with me
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.wwm-hero {
  position: relative;
  overflow: hidden;
  /* Entwurfsmasse statt --pad-hero: dieser Hero steht hoeher als die
     der anderen Seiten. */
  padding-top: clamp(150px, 16vw, 220px);
  padding-bottom: clamp(56px, 6vw, 96px);
  border-bottom: 1px solid rgb(246 241 243 / .3);
}

/* Feines Punktraster ueber der ganzen Flaeche */
.wwm-hero__punkte {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image: radial-gradient(rgb(246 241 243 / .13) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Drei Spalten: Angaben links, Ueberschrift in der Mitte, Dauer rechts */
.wwm-hero__raster {
  position: relative;
  max-width: var(--breite-seite); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 2fr) minmax(0, .7fr);
  gap: clamp(20px, 3vw, 50px);
  align-items: start;
}
.wwm-hero__rand {
  display: flex; flex-direction: column;
  gap: clamp(24px, 3vw, 38px);
  padding-top: clamp(56px, 7vw, 110px);
}
.wwm-hero__rand--rechts { text-align: right; }
.wwm-hero__angabe { display: flex; flex-direction: column; gap: 8px; }
.wwm-hero__rand--rechts .wwm-hero__angabe { align-items: flex-end; }

.wwm-hero__strichlein {
  display: block; width: 22px; height: 1px;
  background: rgb(248 204 193 / .7);
  transform-origin: left center;
  animation: strich-atmen 4.2s var(--kurve) infinite;
}
.wwm-hero__rand--rechts .wwm-hero__strichlein {
  transform-origin: right center;
  animation-delay: .6s;
}
/* Der Entwurf setzt .55. Das traegt auf Navy nur 3.18 und faellt bei
   10px durch. .62 kommt auf 4.58 und bleibt so zurueckhaltend wie
   moeglich. */
.wwm-hero__marke {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgb(246 241 243 / .62);
}
.wwm-hero__wert { font-size: 14px; line-height: 1.6; color: rgb(246 241 243 / .86); }

.wwm-hero__mitte { position: relative; text-align: center; }

/* Zwei Kreise hinter der Ueberschrift: ein weicher Schein, ein Ring */
.wwm-hero__schein {
  position: absolute; left: 50%; top: clamp(-40px, -3vw, -10px);
  width: clamp(280px, 32vw, 460px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(248 204 193 / .22) 0%, rgb(248 204 193 / 0) 70%);
  transform: translate(-50%, 0);
  animation: ring-atmen 4.2s var(--kurve) infinite;
  pointer-events: none;
}
@keyframes ring-atmen {
  0%,100% { transform: translate(-50%, 0) scale(.94); opacity: .28 }
  50%     { transform: translate(-50%, 0) scale(1.06); opacity: .6 }
}
.wwm-hero__ring {
  position: absolute; left: 50%; top: clamp(110px, 14vw, 200px);
  width: clamp(320px, 40vw, 570px); aspect-ratio: 1;
  border: 1px solid rgb(248 204 193 / .18); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ring-drehen 64s linear infinite;
  pointer-events: none;
}
@keyframes ring-drehen {
  0%   { transform: translate(-50%, -50%) rotate(0deg) }
  100% { transform: translate(-50%, -50%) rotate(360deg) }
}

.wwm-hero__eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgb(248 204 193 / .85);
}
.wwm-hero__punkt {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--apricot);
  animation: punkt-atmen 4.2s var(--kurve) infinite;
}
@keyframes punkt-atmen {
  0%,100% { transform: scale(.7); opacity: .4 }
  50%     { transform: scale(1); opacity: 1 }
}

.wwm-hero__titel {
  position: relative;
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(46px, 7.2vw, 116px); line-height: .98; letter-spacing: -.03em;
  color: var(--apricot);
  animation: sanft-schweben 8.4s var(--kurve) infinite;
}
@keyframes sanft-schweben { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

.wwm-hero__strich {
  position: relative;
  display: block;
  width: clamp(60px, 8vw, 120px); height: 1px;
  margin: clamp(24px, 2.8vw, 38px) auto clamp(28px, 3.2vw, 42px);
  background: rgb(248 204 193 / .6);
  animation: strich-atmen 4.2s var(--kurve) infinite;
}
@keyframes strich-atmen { 0%,100% { transform: scaleX(.55); opacity: .5 } 50% { transform: scaleX(1); opacity: 1 } }

.wwm-hero__zeilen {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(7px, .9vw, 13px);
  font-size: clamp(18px, 1.6vw, 25px); line-height: 1.4;
  color: rgb(246 241 243 / .94);
}
.wwm-hero__heilung {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(24px, 2.4vw, 38px); line-height: 1.2;
  color: var(--apricot);
}

/* Dreiteiliges Bildband */
.wwm-band {
  max-width: var(--breite-seite);
  margin: clamp(38px, 4.6vw, 70px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: end;
}
.wwm-band__teil { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.wwm-band__rahmen { overflow: hidden; filter: grayscale(1) contrast(1.05); }
.wwm-band__rahmen img { width: 100%; height: 100%; object-fit: cover; animation: langsam-zoomen 20s var(--kurve) infinite; }
.wwm-band__teil--links  .wwm-band__rahmen { height: clamp(140px, 19vw, 230px); }
.wwm-band__teil--mitte  .wwm-band__rahmen { height: clamp(200px, 27vw, 340px); }
.wwm-band__teil--rechts .wwm-band__rahmen { height: clamp(160px, 22vw, 270px); }
.wwm-band__teil--mitte  .wwm-band__rahmen img { animation-duration: 18s; animation-delay: 1.5s; }
/* Zwei der Fotos sind Hochformate in querliegenden Rahmen, von ihnen
   ist nur ein Streifen zu sehen. Der Streifen ist so gesetzt, dass
   links die Haende und rechts beide Gesichter darin liegen. */
.wwm-band__teil--links  .wwm-band__rahmen img { object-position: 50% 75%; }
.wwm-band__teil--rechts .wwm-band__rahmen img { object-position: 50% 51%; }
.wwm-band__teil--rechts .wwm-band__rahmen img { animation-duration: 22s; animation-delay: 3s; }
@keyframes langsam-zoomen { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }


/* --- Essenz -------------------------------------------------------------- */

.wwm-essenz { padding-block: clamp(90px, 11vw, 150px) clamp(60px, 7vw, 90px); }
.wwm-essenz__inhalt { max-width: 1220px; margin-inline: auto; text-align: center; }
.wwm-essenz__satz {
  font-family: var(--schrift-headline);
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.24; letter-spacing: -.005em;
  color: var(--apricot);
  text-wrap: balance;
}
.wwm-essenz__unter {
  margin: clamp(10px, 1.2vw, 16px) auto 0;
  max-width: 44ch;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 25px); line-height: 1.6;
  color: rgb(246 241 243 / .88);
}

/* --- Breathwork 1:1 ------------------------------------------------------ */

/* Unten keine Polsterung: das Foto soll buendig mit dem
   Schachbrettstreifen abschliessen. Den Abstand nach unten bringt
   stattdessen die Textspalte mit, damit der Text nicht an den
   Streifen stoesst. */
.wwm-eins { padding-block: clamp(50px, 6vw, 80px) 0; }
.wwm-eins__raster {
  max-width: 1300px; margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
/* Unten buendig, auch wenn die Textspalte einmal hoeher ist. */
.wwm-eins__bild { align-self: end; }
.wwm-eins__text { padding-bottom: clamp(70px, 8vw, 110px); }
.wwm-eins__bild img { width: 100%; height: auto; object-fit: contain; }
.wwm-eins__marke {
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding: 7px 12px;
  background: var(--apricot); color: var(--navy);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
}
.wwm-eins__absaetze {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  text-align: justify;
  /* Der Entwurf setzt am Kasten 1.9, ueberschreibt sie aber an jedem
     Absatz einzeln mit rund 1.5. Gerendert steht dort 1.5. */
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5;
  color: rgb(246 241 243 / .92);
}
.wwm-eins__absaetze p + p { margin-top: 0; }
.wwm-eins__ort {
  margin-top: clamp(34px, 4vw, 52px);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  /* Apricot erreicht auf Taubenblau nur 4.05 und faellt bei 12px durch.
     Creme kommt auf 5.29. */
  color: var(--creme);
}

/* --- Pakete -------------------------------------------------------------- */

.wwm-pakete { position: relative; padding-block: clamp(100px, 12vw, 160px) clamp(96px, 11vw, 150px); overflow: hidden; }
/* Der Entwurf setzt hier 1240px, nicht die uebliche Seitenbreite. */
.wwm-pakete__inhalt { position: relative; max-width: 1240px; margin-inline: auto; }
.wwm-pakete__kreis {
  position: absolute; top: -140px; left: -110px;
  width: 420px; height: 420px;
  border: 1px solid rgb(44 66 103 / .16); border-radius: 50%;
  animation: kreis-atmen 4.2s var(--kurve) infinite;
  pointer-events: none;
}
@keyframes kreis-atmen {
  0%,100% { transform: scale(1); opacity: .45 }
  50%     { transform: scale(1.13); opacity: .8 }
}
.wwm-pakete__titel {
  margin-bottom: clamp(110px, 12vw, 170px);
  text-align: center;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.01em;
}

/*
 * Die Karten im Entwurf: abgerundet, mit Rand und hartem Schatten, und
 * oben links ein Kreis mit dem Preis, der halb ueber den Rand ragt.
 * Der Grund wechselt von Karte zu Karte, und mit ihm die Seite, auf
 * der das Foto steht.
 */
.paket {
  position: relative;
  background: var(--navy);
  color: var(--creme);
  border: 1.5px solid var(--navy-tief);
  border-radius: 26px;
  box-shadow: 12px 12px 0 rgb(44 66 103 / .2);
  padding: clamp(96px, 10vw, 130px) clamp(28px, 4vw, 64px) clamp(44px, 4.6vw, 64px);
  /* Grosszuegig, damit der Preiskreis der naechsten Karte Platz hat. */
  margin-bottom: clamp(120px, 13vw, 190px);
}
.paket:last-child { margin-bottom: 0; }
.paket--gedreht { background: var(--taubenblau); }

.paket__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(32px, 4.4vw, 72px);
  align-items: center;
}
/* Auf den gedrehten Karten steht das Foto links und in der schmalen
   Spalte, der Text rechts in der breiten. Und der Preiskreis rechts. */
.paket--gedreht .paket__raster { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.paket--gedreht .paket__bild { grid-column: 1; grid-row: 1; }
.paket--gedreht .paket__text { grid-column: 2; grid-row: 1; }

/* Der Preiskreis haengt zur Haelfte ueber der Oberkante. */
.paket__preis {
  position: absolute;
  top: calc(clamp(126px, 12vw, 176px) / -2);
  left: clamp(28px, 4vw, 64px);
  width: clamp(126px, 12vw, 176px); height: clamp(126px, 12vw, 176px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--taubenblau);
  border: 1.5px solid var(--navy-tief);
  font-family: var(--schrift-headline);
  font-size: clamp(27px, 2.9vw, 42px); letter-spacing: .05em;
  color: var(--apricot);
}
/* Auf den taubenblauen Karten muss sich der Kreis absetzen. */
.paket--gedreht .paket__preis { background: var(--navy); left: auto; right: clamp(28px, 4vw, 64px); }

.paket__name {
  display: inline-block;
  padding: 7px 12px;
  background: var(--apricot); color: var(--navy);
  font-style: italic; font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .02em;
}

.paket__klapp:first-of-type { margin-top: clamp(30px, 3.4vw, 44px); border-top: 1px solid rgb(248 204 193 / .4); }
.paket__klapp summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 2px;
  border-bottom: 1px solid rgb(248 204 193 / .4);
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--creme);
}
.paket__klapp summary:hover { opacity: .75; }
.paket__klapp summary::-webkit-details-marker { display: none; }

/* Plus, das beim Oeffnen zum Minus wird */
.paket__zeichen { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.paket__zeichen::before,
.paket__zeichen::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 16px; height: 1.5px;
  background: var(--apricot);
  transition: transform 300ms var(--kurve);
}
.paket__zeichen::after { transform: rotate(90deg); }
.paket__klapp[open] .paket__zeichen::after { transform: rotate(0deg); }

.paket__klapp ul {
  margin: 0; padding: 16px 2px 22px;
  list-style: none;
  display: grid; gap: 14px;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.85;
  color: rgb(246 241 243 / .82);
}
/* Auf Taubenblau traegt .82 nur 4.16 und faellt durch. .9 kommt auf
   4.70. Auf Navy reicht der Entwurfswert .82 mit 8.32. */
.paket--gedreht .paket__klapp ul { color: rgb(246 241 243 / .9); }
.paket__klapp li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.paket__klapp li::before { content: "·"; color: var(--apricot); }

.paket__absatz {
  margin-top: clamp(30px, 3.4vw, 42px);
  text-align: justify;
  font-size: clamp(14px, 1.08vw, 16px); line-height: 1.9;
  color: rgb(246 241 243 / .9);
}
/* Der Schlussabsatz steht unter beiden Spalten ueber die volle Breite. */
.paket__absatz--breit { margin-top: clamp(40px, 4.6vw, 64px); }

.paket__knopf {
  margin-top: clamp(28px, 3.2vw, 40px);
  padding: 16px 36px;
  font-size: 12px; letter-spacing: .16em;
}
/* Das Seitenverhaeltnis muss am img selbst haengen. Am Kasten daneben
   misst der Browser die Bildhoehe am <picture> statt am Quadrat, und
   die Karte wird so hoch wie das Foto lang ist. */
.paket__bild { width: 100%; }
.paket__bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* --- Abschluss ----------------------------------------------------------- */

.wwm-schluss { padding-block: clamp(80px, 9vw, 130px); }
.wwm-schluss__zitat {
  max-width: 900px; margin-inline: auto;
  text-align: center;
}
.wwm-schluss__zitat p {
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(28px, 4vw, 58px); line-height: 1.24; letter-spacing: -.01em;
  color: var(--apricot);
  text-wrap: balance;
}

/* ==========================================================================
   Schmalere Schirme
   ========================================================================== */

@media (max-width: 1023px) {
  .wwm-hero { padding-top: 132px; padding-bottom: 72px; }
  .wwm-hero__raster { grid-template-columns: 1fr; gap: 36px; }
  .wwm-hero__rand { padding-top: 0; }
  .wwm-hero__rand--rechts { text-align: left; }
  .wwm-hero__rand--rechts .wwm-hero__angabe { align-items: flex-start; }
  .wwm-hero__rand--rechts .wwm-hero__strichlein { transform-origin: left center; }
}

/* Auf dem Tablet stehen die beiden Randspalten nebeneinander unter der
   Ueberschrift, so wie im Entwurf. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wwm-hero__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "mitte mitte" "links rechts";
    row-gap: 44px; column-gap: 32px;
  }
  .wwm-hero__mitte { grid-area: mitte; }
  .wwm-hero__rand--links { grid-area: links; }
  .wwm-hero__rand--rechts {
    grid-area: rechts;
    text-align: right;
  }
  .wwm-hero__rand--rechts .wwm-hero__angabe { align-items: flex-end; }
  .wwm-hero__rand--rechts .wwm-hero__strichlein { transform-origin: right center; }
}

@media (max-width: 767px) {
  .wwm-hero { padding-top: 116px; padding-bottom: 64px; }
  .wwm-band { grid-template-columns: 1fr; }
  .wwm-band__teil--links .wwm-band__rahmen,
  .wwm-band__teil--mitte .wwm-band__rahmen,
  .wwm-band__teil--rechts .wwm-band__rahmen { height: clamp(240px, 70vw, 320px); }

  .wwm-eins__raster { grid-template-columns: 1fr; gap: 0; }
  /* Der Entwurf schiebt das Foto hier aus der Mitte nach links, mit
     festen 63 Pixeln. Das trifft auf einem Telefon genau die
     Textkante, laesst das Foto auf einem Tablet aber wieder in der
     Mitte haengen. Deshalb direkt an die Textkante gebunden -- dort
     steht auch "Breathwork 1:1" darunter. */
  .wwm-eins__bild { width: min(62%, 260px); margin-inline: 0 auto; }

  /* Jede zweite Karte ist am Rechner gespiegelt: Foto links in der
     schmalen Spalte, Text rechts in der breiten. Einspaltig muss das
     wieder zurueck. Die gespiegelten Regeln tragen zwei Klassen und
     sind damit staerker als ein blosses .paket__raster -- ohne die
     zweite Zeile hier behielten die Karten mit 1150 und 250 Euro ihr
     Zwei-Spalten-Raster und quetschten den Text in die halbe Breite. */
  .paket__raster,
  .paket--gedreht .paket__raster { grid-template-columns: 1fr; }
  /* Bild nach oben, damit es nicht unter dem Knopf haengt */
  .paket__bild,
  .paket--gedreht .paket__bild { grid-row: 1; grid-column: 1; max-width: 340px; }
  .paket--gedreht .paket__text { grid-column: 1; grid-row: 2; }

  /* Blocksatz bricht auf schmalen Spalten auseinander */
  .wwm-eins__absaetze,
  .paket__absatz { text-align: left; }

  /* Nicht unter 17px, sonst zoomt iOS */
  .wwm-eins__absaetze,
  .paket__klapp ul,
  .paket__absatz { font-size: 17px; }

  .paket__knopf { display: block; width: 100%; }
}

@media (max-width: 479px) {
  .wwm-hero { padding-top: 104px; }
}