/* ==========================================================================
   Unterseite Über Anny – baut auf style.css auf (Tokens, Header, Footer, Komponenten).
   Dramaturgie: Porträt + Einstieg → Seelenweg (Wörter werden scharf, Lichtband) →
   der Name "Annyma" (Ensō) → Dieses magische Mehr + Ausbildungen → Abschluss mit Unterschrift.
   Nur Annys persönliche Texte; was Annyma Yoga allgemein beschreibt, steht auf den anderen Seiten.
   ========================================================================== */

.page-anny .section h2 { font-size: calc(clamp(2.2rem, 4.2vw, 3.8rem) * var(--display-scale)); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   Auftakt: Porträt links, Einstieg rechts, Stempel als Wasserzeichen
   -------------------------------------------------------------------------- */

.ap-hero {
  position: relative;
  overflow-x: clip;
  padding: calc(7.5rem + 4vh) 0 0;
}
.ap-hero .grid { position: relative; align-items: start; row-gap: clamp(4rem, 8vw, 7rem); }
/* Das Porträt klebt, während rechts Einstieg und Seelenweg vorbeiziehen, und steht dabei senkrecht mittig im
   Fenster unter der Navigation (8. Oktober 2026). Der Rahmen füllt den ganzen Rasterbereich (Strecke zum Kleben),
   das Bild klebt darin; main.js setzt top = Navigation + halber Rest (CSS-Wert ist nur die Rückfallebene).
   Endet mit dem Raster; die Aussage darunter schiebt es aus dem Bild. */
.ap-portrait-wrap {
  --nav: 6rem;   /* Glas-Band der Unterseiten */
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
  align-self: stretch;
  z-index: 1;
}
.ap-portrait {
  position: sticky;
  top: calc(var(--nav) + 1.5rem);
  width: 100%;
  max-height: calc(100svh - var(--nav) - 3rem);
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand-100);
}
.ap-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ap-hero-copy { grid-column: 7 / span 6; grid-row: 1; position: relative; z-index: 1; margin-top: clamp(2rem, 9vh, 7rem); }
.ap-kicker { font-size: 0.95rem; letter-spacing: 0.04em; color: var(--taupe); margin-bottom: 1.5rem; }
.ap-hero h1 {
  font-size: calc(clamp(2.8rem, 5.6vw, 5.4rem) * var(--display-scale));
  line-height: 1.04;
  color: var(--head-color);
  margin-bottom: 2rem;
}
.ap-hero-copy p { max-width: 30em; }
/* Stempel: dieselbe Variante wie auf der Startseite, hier etwas höher, damit er hinter der Überschrift liegt */
.ap-hero .seal--about { top: -1rem; }

/* --------------------------------------------------------------------------
   Seelenweg
   -------------------------------------------------------------------------- */

.ap-path { padding-top: 0; }
.ap-path-copy { grid-column: 7 / span 6; grid-row: 2; }
.ap-path-copy p:not(.lead) { max-width: 32em; }
.ap-statement {
  /* unter dem Raster: sie schiebt das klebende Porträt aus dem Bild. Viel Luft oben und unten (8. Oktober 2026),
     damit die Aussage für sich steht */
  margin: clamp(6rem, 12vw, 11rem) 0 clamp(2rem, 4vw, 4rem);
  max-width: 21em;
  font-size: calc(clamp(2rem, 4vw, 4.2rem) * var(--display-scale)) !important;
  line-height: 1.12;
}
.ap-statement .w { display: inline-block; white-space: pre; }
.ap-band {
  margin-top: clamp(6rem, 11vw, 10rem);
  margin-bottom: 0;
  aspect-ratio: 2.86 / 1;
  overflow: hidden;
  background: var(--sand-100);
}
.ap-band img { position: relative; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 40%; }

/* --------------------------------------------------------------------------
   Der Name: Annyma steht für die Seele
   -------------------------------------------------------------------------- */

.ap-name { position: relative; overflow: hidden; text-align: center; padding-block: calc(var(--section) * 0.9); }
.ap-name-inner { position: relative; z-index: 1; }
.ap-name-pre { max-width: 30em; margin: 0 auto 2rem; color: var(--taupe); }
.page-anny .section .ap-name-title {
  font-size: calc(clamp(3rem, 9vw, 9rem) * var(--display-scale));
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--head-color);
  margin-bottom: 2.5rem;
  white-space: nowrap;
}
.ap-name .lead { max-width: 28em; margin-inline: auto; }
.orbit--name {
  width: 74vmin; height: 74vmin;
  left: 50%; top: 50%;
  margin: -37vmin 0 0 -37vmin;
}

/* --------------------------------------------------------------------------
   Dieses magische Mehr + Ausbildungen
   -------------------------------------------------------------------------- */

.ap-more .grid { row-gap: 3rem; align-items: start; }
.ap-more-copy { grid-column: 1 / span 6; }
.ap-more-copy p:not(.lead):not(.about-more-claim) { max-width: 32em; }
.ap-creds { grid-column: 8 / span 5; position: sticky; top: 8rem; }
.ap-creds .cred { border-top: 1px solid var(--sand-200); }

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

.ap-close {
  text-align: center;
  background: linear-gradient(to bottom, rgba(241, 222, 218, 0) 0%, #F1DEDA 40%, #F1DEDA 62%, rgba(241, 222, 218, 0) 100%);   /* unten aus: Footer-Karte steht auf Sand */
  padding-block: calc(var(--section) * 1.2);
}
.ap-sign { display: block; width: 17rem; height: auto; margin: 1.5rem auto 0; }   /* Annys Unterschrift (25. Oktober 2026) */
.ap-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-top: 3rem; }

/* --------------------------------------------------------------------------
   Schmaler (Mobil kommt später, hier nur, dass nichts bricht)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .ap-portrait-wrap, .ap-hero-copy, .ap-path-copy, .ap-more-copy, .ap-creds { grid-column: 1 / span 12; }
  .ap-portrait-wrap, .ap-hero-copy, .ap-path-copy { grid-row: auto; }
  .ap-portrait { position: relative; top: auto !important; max-height: none; }
  .ap-creds { position: relative; top: 0; }
  .page-anny .section .ap-name-title { white-space: normal; }
}
.ap-close .letter-mini { margin-bottom: 2.5rem; }