/* ==========================================================================
   Diana Ernst — "Serene Flow Narrative"
   Design-Tokens und Komponenten nach DESIGN.md.
   Handgeschrieben, kein Build-Schritt: die Datei wird direkt ausgeliefert.
   ========================================================================== */

@import url('/assets/fonts/fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Kernpalette — bindet die drei Teilmarken zusammen */
  --surface: #fef8f5;
  --surface-container-low: #f9f2ef;
  --surface-container: #f3ede9;
  --surface-variant: #e7e1de;
  --on-surface: #1d1b19;
  --on-surface-variant: #4d453e;
  --outline: #7f756c;
  --outline-variant: #d0c5ba;

  /* Primär — Diana Ernst: gedecktes Gold, Beige */
  --primary: #6c5c48;
  --on-primary: #ffffff;
  --primary-container: #a7937d;
  --personal-beige: #f5f2ed;
  --personal-gold: #c5a059;

  /* Sekundär — Yogini Unfolding: Rosé, Terrakotta */
  --secondary: #8a4c58;
  --yogini-pink: #f2d5d7;
  --yogini-terracotta: #c36f5e;

  /* Tertiär — Studio und Solo Yoga: Salbei, kühle Grautöne */
  --tertiary: #516259;
  --on-tertiary: #ffffff;
  --tertiary-container: #899b91;
  --on-tertiary-container: #22322b;
  --studio-white: #ffffff;
  --studio-grey: #e8e9eb;
  --studio-ash: #525b60;

  --error: #ba1a1a;
  --success: #2d6a30;

  /* Typografie — festgelegt am 19.07.2026 nach Vergleich mit
     Tinos + Nunito Sans. Beide Schriften sind selbstgehostet, es geht
     keine Anfrage an Google. */
  --font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radien — rund, aber nicht verspielt */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Raster und Rhythmus */
  --container-max: 1280px;
  --gutter: 20px;
  --section-gap-lg: 72px;
  --section-gap-sm: 48px;

  /* Tiefe entsteht über Farbschichtung, nicht über harte Schatten */
  --shadow-soft: 0 10px 30px rgba(167, 147, 125, 0.1);
  --shadow-lift: 0 18px 50px rgba(107, 92, 72, 0.14);

  /* Flächenfarbe des Solo-Yoga-Abschnitts. Ein entsättigtes Salbei, das dem
     tertiären Studioton entstammt — Solo Yoga findet im Studio statt, die
     Zuordnung stimmt also inhaltlich. Rosé bleibt Yogini vorbehalten. */
  --solo-surface: #e6ebe5;

  /* Abdunklung des Heldenbildes — EINE Stellschraube für den Gesamteindruck.
     0 = Foto voll unverändert, 1 = maximale Abdunklung.
     Skaliert die gebündelte Ellipse hinter dem Text (siehe
     .hero__media::after). Höher = lesbarer, niedriger = strahlender.
     Bei 0.6 bleibt das Bild an den Rändern hell und der Text lesbar. */
  --hero-dim: 0.6;
}

/* Ab Tablet öffnet sich der vertikale Rhythmus, damit zwischen den
   Teilmarken ein spürbarer "mentaler Reset" entsteht (DESIGN.md). */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-gap-lg: 100px;
    --section-gap-sm: 64px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 80px;
    --section-gap-lg: 120px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset und Grundlagen
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* Verhindert, dass die fixierte Navigation Ankerziele überdeckt.
     Muss zur Hoehe der Leiste passen: Logo 52px + 2x20px Innenabstand. */
  scroll-padding-top: 112px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> erzeugt selbst keinen Kasten. Ohne diese Regel haenge das
   darin liegende <img> mit height:100% an einem Element ohne Hoehe und
   die Bildrahmen fielen in sich zusammen. */
picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(108, 92, 72, 0.2);
  color: var(--primary);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Nutzer mit reduzierter Bewegungspräferenz bekommen keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Nur für Screenreader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke für Tastaturnutzer */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 24px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   3. Typografie-Skala
   -------------------------------------------------------------------------- */

/* overflow-wrap sichert lange deutsche Komposita wie
   "Meditationsretreats" auf schmalen Geraeten ab. */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.headline-lg {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.headline-md {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}

.body-lg {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
}

.body-md {
  font-size: 1rem;
  line-height: 1.6;
}

/* Kleines Label über Überschriften — trägt die Farbe der jeweiligen Teilmarke */
.label-caps {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-gap-lg);
}

.section--tight {
  padding-block: var(--section-gap-sm);
}

.stack > * + * {
  margin-top: 1rem;
}

.stack-lg > * + * {
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   5. Buttons — durchgehend Pillenform
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover {
  background: #5a4c3b;
}

.btn--outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* Auf dem Heldenbild: heller Button auf dunklem Grund */
.btn--light {
  background: var(--studio-white);
  color: var(--primary);
}

.btn--light:hover {
  background: var(--personal-beige);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn--terracotta {
  background: var(--yogini-terracotta);
  color: #fff;
}

.btn--terracotta:hover {
  background: #ad5f50;
}

/* Salbei — trägt den Solo-Yoga-Abschnitt und die Studio-Zuordnung */
.btn--tertiary {
  background: var(--tertiary);
  color: var(--on-tertiary);
}

.btn--tertiary:hover {
  background: #43514a;
}

.btn--sm {
  padding: 0.7rem 1.6rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: rgba(254, 248, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
  transition: padding 0.3s ease;
}

/* Beim Scrollen rückt die Leiste enger zusammen */
.nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(107, 92, 72, 0.1);
}

.nav.is-scrolled .nav__inner {
  padding-block: 0.75rem;
}

/* Wortmarke — Seitenverhaeltnis rund 3:1, deshalb ueber die Hoehe steuern */
.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Die Signatur hat sehr feine Striche. Bei kleiner Darstellung wirkt sie
   duenn und verliert an Praesenz, deshalb bewusst grosszuegig skaliert —
   "fetter" laesst sich bei einer Pfad-Grafik nur ueber die Groesse loesen. */
.nav__brand img {
  display: block;
  height: 52px;
  width: auto;
  transition: opacity 0.2s ease, height 0.3s ease;
}

.nav__brand:hover img {
  opacity: 0.75;
}

.nav.is-scrolled .nav__brand img {
  height: 42px;
}

@media (max-width: 899px) {
  .nav__brand img {
    height: 42px;
  }
  .nav.is-scrolled .nav__brand img {
    height: 36px;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding-block: 0.25rem;
  transition: color 0.2s ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--primary);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__cta {
  display: none;
}

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--on-surface);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobiles Ausklappmenü */
.nav__mobile {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  background: var(--surface);
  border-top: 1px solid var(--outline-variant);
}

.nav__mobile.is-open {
  grid-template-rows: 1fr;
}

.nav__mobile-inner {
  overflow: hidden;
}

.nav__mobile a {
  display: block;
  padding: 1rem var(--gutter);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  border-bottom: 1px solid var(--outline-variant);
}

.nav__mobile a:last-child {
  border-bottom: 0;
}

@media (min-width: 900px) {
  .nav__links,
  .nav__cta {
    display: flex;
  }
  .nav__toggle,
  .nav__mobile {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* MOBIL: Bild oben, Text darunter.

   Grund: Das Motiv ist ein Querformat (1.55:1), der Heldenbereich auf dem
   Handy aber ein hohes Hochformat (~0.5:1). Bei Text ueber Bild blieben
   nur 34 % der Bildbreite sichtbar — beide Haende weg, und damit genau
   das, was die Kriegerin-Haltung ausmacht. Gestapelt bleibt das Foto
   vollstaendig und der Text wird obendrein besser lesbar.

   Ab 768px kippt es in die klassische Fassung mit Text ueber Bild. */
.hero {
  position: relative;
  padding-top: 96px;
}

.hero__media {
  position: relative;
  width: 100%;
}

.hero__media img {
  width: 100%;
  height: auto;
}

/* Auf dem Handy liegt der Text auf der Flaeche, nicht auf dem Foto —
   der Verlauf waere dort ohne Funktion. */
.hero__media::after {
  content: none;
}

/* ---- Grundregeln (mobil): Text unter dem Bild, auf cremefarbenem Grund ---- */

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  /* min-width verhindert, dass lange deutsche Woerter das Flex-Element
     ueber die Bildschirmbreite hinaus aufziehen */
  min-width: 0;
  margin-inline: auto;
  padding-block: 2.5rem 3rem;
  padding-inline: var(--gutter);
  text-align: center;
  /* Mobil steht der Text auf der Flaeche, nicht auf dem Foto — also dunkel.
     Ab 768px kippt es auf Weiss, siehe Desktop-Block weiter unten. */
  color: var(--on-surface);
}

/* Wortmarke im Hero — traegt den Namen, die Ueberschrift daneben nicht mehr.
   max-width als Sicherung, damit die Signatur nie ueber die Spaltenbreite
   hinauslaeuft. */
.hero__logo {
  width: min(340px, 66vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto 2rem;
}

.hero__title {
  margin-bottom: 1.5rem;
}

.hero__text {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  color: var(--on-surface-variant);
  font-weight: 400;
}

/* Mobil stehen die Buttons auf cremefarbenem Grund — die hellen Fassungen
   waeren dort unsichtbar. Deshalb nur bis 767px in die dunklen Varianten
   umgefaerbt, statt im HTML zwei Buttonsaetze vorzuhalten. Ab 768px liegen
   sie auf dem Foto und behalten ihre hellen Original-Fassungen. */
@media (max-width: 767px) {
  .hero__actions .btn--light {
    background: var(--primary);
    color: var(--on-primary);
  }

  .hero__actions .btn--ghost-light {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
  }
}

/* ---- Desktop ab 768px: Text liegt auf dem Foto ----
   Dieser Block kommt bewusst NACH den Grundregeln, damit seine
   Farb-Ueberschreibungen (helle Schrift) gewinnen. Media-Queries erhoehen
   die Spezifitaet nicht — die Reihenfolge entscheidet. */
@media (min-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88vh;
    padding-block: 140px 100px;
    overflow: hidden;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  /* Abdunklung NUR auf dem Desktop, wo Text auf dem Foto liegt. Mobil bleibt
     ::after via content:none aus (siehe oben), das Bild also unangetastet.

     Zweck: das Bild strahlt, der Text bleibt lesbar. Erreicht durch
     BÜNDELUNG statt gleichmäßiger Abdunklung — die kräftige Ellipse sitzt
     eng hinter dem Text und verblasst schnell, sodass Motiv, Pflanzen und
     Boden hell bleiben. Der flache Verlauf gibt nur Kopf- und Fußbereich
     etwas Halt. --hero-dim skaliert die Ellipse: höher = lesbarer,
     niedriger = strahlender. */
  .hero__media::after {
    content: '';
    background:
      radial-gradient(
        ellipse 72% 46% at 50% 45%,
        rgba(29, 27, 25, 0.9) 0%,
        rgba(29, 27, 25, 0.32) 55%,
        transparent 78%
      ),
      linear-gradient(
        to bottom,
        rgba(29, 27, 25, 0.22) 0%,
        rgba(29, 27, 25, 0.04) 32%,
        rgba(29, 27, 25, 0.28) 100%
      );
    opacity: var(--hero-dim);
  }

  .hero__content {
    padding-block: 0;
    color: #fff;
  }

  /* Der Schatten legt nur sanft Tiefe unter die helle Schrift; die
     eigentliche Kontrastarbeit leistet die Ellipse oben. */
  .hero__logo {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
  }

  .hero__title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 4px 30px rgba(0, 0, 0, 0.4);
  }

  .hero__text {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
  }

  .hero__scroll {
    display: block;
  }
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 600px) {
  .hero__actions {
    flex-direction: row;
  }
}

/* Nur in der Desktop-Fassung sinnvoll: mobil folgt der Text ohnehin
   direkt unter dem Bild, da braucht es keinen Hinweis nach unten. */
.hero__scroll {
  display: none;
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  color: rgba(255, 255, 255, 0.8);
  animation: hero-bounce 2.4s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* --------------------------------------------------------------------------
   8. Über mich
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
}

/* Das Motiv ist nahezu quadratisch (1000x1021), der Rahmen hochkant.
   Beschnitten wird deshalb nur seitlich, die Bildhoehe bleibt vollstaendig —
   Kopf und Blickrichtung sitzen dadurch unveraendert im oberen Drittel.

   Das Seitenverhaeltnis ist bewusst 3:4: ein quadratischer Rahmen waere
   neben der langen Textspalte deutlich zu kurz. Wer mehr vom Laub und
   vom Teich sehen will, setzt hier 4/5 oder 1/1 — Diana bleibt in jeder
   dieser Varianten vollstaendig im Bild. */
.about__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sie steht leicht rechts der Bildmitte; der Ausschnitt folgt ihr
     minimal nach rechts, damit links etwas Laub als Rahmen bleibt. */
  object-position: 54% center;
}

.about__label {
  color: var(--primary);
  margin-bottom: 1rem;
}

.about__title {
  margin-bottom: 2rem;
}

.about__text {
  color: var(--on-surface-variant);
}

.about__text > * + * {
  margin-top: 1.5rem;
}

/* Hervorgehobener Kurzsteckbrief — Tiefe über Farbfläche, nicht Schatten */
.callout {
  padding: 2rem;
  background: var(--personal-beige);
  border: 1px solid rgba(208, 197, 186, 0.5);
  border-radius: var(--radius-lg);
}

.callout__title {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.callout__quote {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--on-surface);
}

/* --------------------------------------------------------------------------
   8b. Solo Yoga

   Traegt die Primaerfarben der Personenmarke — es ist Dianas eigenes
   1:1-Angebot und steht damit farblich zwischen dem cremefarbenen
   Ueber-mich-Abschnitt und dem rosafarbenen Yogini-Bereich.
   -------------------------------------------------------------------------- */

/* Die Farbe steckt in der Fläche, nicht in den Elementen: die Karten
   heben sich allein durch ihr Weiß ab. Das gibt dem Abschnitt Klarheit,
   ohne dass einzelne Bauteile bunt werden müssten. */
.solo {
  background: var(--solo-surface);
}

.solo__intro {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: 3.5rem;
  text-align: center;
}

.solo__label {
  color: var(--tertiary);
  margin-bottom: 1rem;
}

.solo__title {
  margin-bottom: 1.5rem;
}

/* Zwei gleichwertige Spalten: der Unterschied zwischen offener Praxis und
   festem Programm soll sich durch Nebeneinanderstellen erschliessen. */
.solo__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .solo__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Kein Rahmen: auf der farbigen Fläche trennt schon der Helligkeitssprung.
   Der Schatten ist salbeigetönt statt neutral grau — sonst wirkt er
   schmutzig auf dem grünlichen Grund. */
.solo-card {
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  background: var(--studio-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgba(81, 98, 89, 0.13);
}

/* Bewusst KEINE Hervorhebung einer der beiden Karten: Privatstunden und
   Programme sind gleichrangige Wege, keine Stufen. Eine kraeftigere Kante
   waere eine Empfehlung, die inhaltlich nicht gedeckt ist. */

.solo-card__kind {
  color: var(--tertiary);
  margin-bottom: 0.75rem;
}

.solo-card__title {
  margin-bottom: 1rem;
}

.solo-card__text {
  color: var(--on-surface-variant);
  margin-bottom: 1.5rem;
}

.solo-card__facts {
  margin-top: auto;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tertiary);
}

.solo-card__facts li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.4rem;
  border-top: 1px solid var(--outline-variant);
}

.solo-card__facts li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--tertiary-container);
}

.solo__themen {
  margin-top: 3rem;
  text-align: center;
}

.solo__themen-titel {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

/* Halbtransparentes Weiss statt Rahmen — die Chips schweben damit auf der
   Flaeche wie die Karten, nur leichter. */
.chip {
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  color: var(--on-tertiary-container);
}

.solo__hinweis {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
}

.solo__cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Yogini Unfolding
   -------------------------------------------------------------------------- */

.yogini {
  position: relative;
  background: rgba(242, 213, 215, 0.28);
  overflow: hidden;
}

.yogini__intro {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: 4rem;
  text-align: center;
}

/* Das Signet traegt den Abschnitt optisch und darf deshalb Praesenz haben.
   Es steht ohne Schriftzug, kollidiert also nicht mehr mit der Ueberschrift
   darunter — anders als das vollstaendige Logo, das den Namen doppelt
   gezeigt haette. */
.yogini__logo {
  width: min(200px, 44vw);
  height: auto;
  margin: 0 auto 1.75rem;
}

.yogini__label {
  color: var(--yogini-terracotta);
  margin-bottom: 1rem;
}

.yogini__title {
  margin-bottom: 1.5rem;
}

.yogini__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .yogini__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .yogini__media {
    order: 2;
  }
}

/* 2:3 statt quadratisch — und das ist keine Geschmacksfrage: das Motiv ist
   eine Ganzkoerperaufnahme, bei der die erhobenen Haende oben und der
   angehobene Fuss unten die Pose tragen. Ein quadratischer Rahmen wuerde
   genau diese beiden Enden abschneiden. Das Seitenverhaeltnis entspricht
   deshalb exakt dem der Datei: es wird gar nichts beschnitten. */
.yogini__image {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.yogini__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Auf grossen Schirmen wuerde das hohe Format die Textspalte daneben
   ueberragen und den Abschnitt unnoetig strecken. Die Deckelung haelt
   beide Spalten in Balance, ohne den Bildinhalt anzutasten. */
@media (min-width: 900px) {
  .yogini__image {
    max-width: 460px;
    margin-inline: auto;
  }
}

/* Merkmalsliste mit runden Icon-Feldern */
.feature {
  display: flex;
  gap: 1.5rem;
}

.feature + .feature {
  margin-top: 2rem;
}

.feature__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--yogini-pink);
  border-radius: var(--radius-full);
  color: var(--yogini-terracotta);
}

.feature__title {
  margin-bottom: 0.4rem;
}

.feature__text {
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   10. Movement Studio
   -------------------------------------------------------------------------- */

/* Randloses Band ueber die volle Fensterbreite.

   Die Hoehe waechst bewusst mit: bliebe sie fest bei 600px, wuerde das
   breitere Band das Motiv staerker beschneiden statt mehr davon zu zeigen
   — auf einem 1920er Schirm waeren nur noch 47 % der Bildflaeche sichtbar
   statt 70 %. Mit der mitwachsenden Hoehe bleiben es rund 69 % ueber den
   gesamten ueblichen Bereich. */
.studio__frame {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 46vw, 880px);
  padding-block: 3rem;
  overflow: hidden;
}

/* Haelt die Karte im Textraster, obwohl das Band randlos laeuft */
.studio__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Nicht als Kind-Selektor: das Bild liegt jetzt in einem <picture>. */
.studio__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(29, 27, 25, 0.3);
}

/* Glasige Karte — sparsam eingesetzt, hält die Fläche leicht */
.studio__card {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .studio__card {
    padding: 3.5rem;
  }
}

.studio__label {
  color: var(--tertiary);
  margin-bottom: 0.75rem;
}

.studio__title {
  margin-bottom: 1.5rem;
}

.studio__text {
  margin-bottom: 2rem;
  color: var(--on-surface-variant);
}

.studio__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
  margin-bottom: 2.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.studio__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.studio__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--tertiary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. Erfahrung
   -------------------------------------------------------------------------- */

.journey {
  background: var(--surface-container-low);
}

.journey__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.journey__title {
  margin-bottom: 2.5rem;
}

.journey__text {
  text-align: left;
  color: var(--on-surface-variant);
}

.journey__text > * + * {
  margin-top: 2rem;
}

.journey__quote {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   12. Kontakt
   -------------------------------------------------------------------------- */

.contact__panel {
  padding: 3rem var(--gutter);
  background: var(--personal-beige);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .contact__panel {
    padding: 4.5rem;
    border-radius: 40px;
  }
}

.contact__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.contact__title {
  margin-bottom: 1.5rem;
}

.contact__text {
  margin-bottom: 2.5rem;
  color: var(--on-surface-variant);
}

/* Seitenverhaeltnis exakt wie die Datei (1000x1500): das Bild wird in
   voller Hoehe gezeigt, es wird nichts beschnitten. */
.contact__image {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.contact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Direkte Kontaktwege neben dem Formular */
.contact__channels {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

.channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.channel:hover {
  background: rgba(255, 255, 255, 0.9);
}

.channel__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(108, 92, 72, 0.1);
  border-radius: var(--radius-full);
  color: var(--primary);
}

.channel__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.channel__value {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   13. Formular — minimalistisch, unterstrichene Felder
   -------------------------------------------------------------------------- */

.form > * + * {
  margin-top: 1.5rem;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--primary);
  border-bottom-width: 2px;
  /* Gleicht die dickere Linie aus, damit nichts springt */
  margin-bottom: -1px;
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--outline);
}

.field--consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.field--consent input {
  width: auto;
  margin-top: 0.25rem;
  accent-color: var(--primary);
}

.field--consent a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen ihn aus */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__result {
  font-size: 0.9375rem;
  font-weight: 600;
}

.form__result--ok {
  color: var(--success);
}

.form__result--error {
  color: var(--error);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--personal-beige);
  border-top: 1px solid var(--studio-grey);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-block: var(--section-gap-sm);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__brand {
  display: inline-flex;
}

.footer__brand img {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 0.25rem;
  transition: opacity 0.2s ease;
}

.footer__brand:hover img {
  opacity: 0.75;
}

.footer__meta {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.footer__links a:hover {
  color: var(--primary);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(108, 92, 72, 0.1);
  border-radius: var(--radius-full);
  color: var(--primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  background: var(--primary);
  color: var(--on-primary);
}


/* --------------------------------------------------------------------------
   15. Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */

.legal {
  padding-top: 140px;
}

.legal__inner {
  max-width: 46rem;
  margin-inline: auto;
}

.legal__title {
  margin-bottom: 2.5rem;
}

.legal__body {
  color: var(--on-surface-variant);
}

.legal__body h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--on-surface);
}

.legal__body h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface);
}

.legal__body p,
.legal__body ul,
.legal__body ol {
  margin-top: 1rem;
}

.legal__body ul,
.legal__body ol {
  padding-left: 1.25rem;
}

.legal__body li + li {
  margin-top: 0.35rem;
}

.legal__body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   16. Hilfsklassen
   -------------------------------------------------------------------------- */

.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: 3rem;
}

.relative-layer {
  position: relative;
  z-index: 1;
}