/* ==========================================================================
   YELS – Layout: Header, Menü, Hero, Footer, Scroll-Animationen
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,0);
  transition: background var(--t-mid) var(--ease), height var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap { display: flex; align-items: center; gap: var(--gap-m); }

/* gescrollt: kompakter, weiß, mit feiner Linie */
.site-header.is-scrolled {
  height: 64px;
  background: rgba(250,246,239,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* Seiten mit hellem Kopfbereich brauchen von Anfang an weißen Header */
body.header-solid .site-header { background: rgba(250,246,239,.92); backdrop-filter: blur(14px);
                                -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }

.brand {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.45rem; letter-spacing: -.05em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: .05em;
  transition: opacity var(--t-fast) var(--ease);
}
.brand .dot { color: var(--accent); }
.brand:hover { opacity: .65; }
/* Platzhalter-Hinweis: hier kommt später die Logo-Grafik hin */

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav a {
  position: relative; font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em;
  padding-block: .35em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { font-weight: 800; }

.header-cta { margin-left: clamp(.5rem, 1.5vw, 1.25rem); }

/* Burger */
.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  cursor: pointer; position: relative;
}
.burger i {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.burger i:nth-child(1) { top: 17px; }
.burger i:nth-child(2) { top: 23px; }
.burger i:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobiles Menü */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: calc(var(--header-h) + 2rem) var(--pad-x) 2rem;
  display: flex; flex-direction: column; gap: var(--gap-m);
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease-out);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a.m-link {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.04em; line-height: 1.05;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-nav.is-open a.m-link { opacity: 1; transform: none; }
.mobile-nav.is-open a.m-link:nth-child(1) { transition-delay: .08s; }
.mobile-nav.is-open a.m-link:nth-child(2) { transition-delay: .13s; }
.mobile-nav.is-open a.m-link:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open a.m-link:nth-child(4) { transition-delay: .23s; }
.mobile-nav.is-open a.m-link:nth-child(5) { transition-delay: .28s; }
.mobile-nav .m-foot { margin-top: auto; display: grid; gap: var(--gap-s); }
body.nav-open { overflow: hidden; }

@media (max-width: 940px) {
  .nav, .header-cta { display: none; }
  .burger { display: block; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.hero-title .ln { display: block; overflow: hidden; }
.hero-title .ln > span { display: block; }
.hero-figure {
  position: relative; border-radius: var(--radius-l); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--paper-warm);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero-name {
  position: absolute; right: 0; top: 0; z-index: 2;
  background: var(--paper);
  border-radius: 0 0 0 var(--radius-l);
  padding: .8rem 1.1rem; text-align: right;
}
.hero-name .nm { display: block; font-family: var(--font-display); font-weight: 800;
                 font-size: 1.05rem; letter-spacing: -.02em; }
.hero-name .rl { display: block; font-size: var(--fs-micro); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-muted); margin-top: .25em; }
.hero-badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--paper); border-radius: 0 var(--radius-l) 0 var(--radius-l);
  padding: 1.1rem 1.4rem; max-width: 15rem;
}
.hero-badge .num { font-family: var(--font-display); font-weight: 900; font-size: 1.9rem;
                   letter-spacing: -.04em; line-height: 1; }
/* Die Zahlen unter dem Hero. "max-content" haelt die beiden Spalten genau so
   breit wie ihr laengster Text – schoen am Rechner, auf dem Handy sprengte es
   aber die Seite, weil die Spalte sich dort nicht verkleinern darf. */
.hero-stats { display: grid; grid-template-columns: repeat(2, max-content);
              gap: clamp(1.2rem, 2.5vw, 2rem) clamp(2rem, 5vw, 4rem); }
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-stats .num { font-family: var(--font-display); font-weight: 900; font-size: 2rem;
                   letter-spacing: -.04em; line-height: 1; }
.hero-stats .lbl { font-size: var(--fs-micro); letter-spacing: .12em;
                   text-transform: uppercase; color: var(--ink-muted); margin-top: .35em; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { aspect-ratio: 4 / 3.4; order: -1; }
}

/* --- Seitenkopf für Unterseiten ----------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(60% 140% at 85% 0%, var(--glow-b), transparent 65%),
    var(--paper-soft);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head .lead { max-width: 52ch; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden;
  color: var(--paper); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(138,96,118,.45), transparent 62%),
    var(--deep);
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid {
  display: grid; gap: var(--gap-l);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
.site-footer .brand { font-size: 2.2rem; color: var(--paper); }
.site-footer h4 { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
                  font-family: var(--font-body); font-weight: 700; color: rgba(255,255,255,.5);
                  margin-bottom: 1em; }
.site-footer a { color: rgba(255,255,255,.8); font-size: var(--fs-small); }
.site-footer a:hover { color: var(--paper); }
.footer-links { display: grid; gap: .6em; }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-small); color: rgba(255,255,255,.5);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Abschluss-Banner --------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .inner {
  display: grid; gap: var(--gap-l); align-items: center;
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 820px) { .cta-band .inner { grid-template-columns: minmax(0, 1fr); } }

/* --- Mobile Aktionsleiste (immer sichtbar auf dem Handy) ---------------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .6rem; padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(250,246,239,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; padding-inline: .6em; }
@media (max-width: 700px) {
  .mobile-bar { display: flex; }
  body:has(.mobile-bar) { padding-bottom: 76px; }
}

/* ==========================================================================
   Scroll-Animationen  (JS setzt .is-in, sobald das Element sichtbar wird)
   ========================================================================== */
[data-reveal] { opacity: 0; transition: opacity .8s var(--ease-out), transform .8s var(--ease-spring); }
[data-reveal="up"]    { transform: translateY(34px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* Auf schmalen Bildschirmen werden die seitlichen Einblendungen zu
   senkrechten. Grund: Ein Element, das noch nicht eingeblendet ist, steht
   34 px weiter aussen - auf dem Handy schiebt das die ganze Seite nach
   rechts auf, solange man noch nicht daran vorbeigescrollt ist. Nach oben
   zu verschieben kann das nicht, weil die Seite ohnehin senkrecht scrollt. */
@media (max-width: 860px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(34px); }
}

/* gestaffelte Kinder */
[data-stagger] > * { opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .49s; }

/* Überschrift baut sich zeilenweise auf (JS zerlegt den Text in .ln > span)
   padding/margin gleichen aus, dass overflow:hidden sonst Unterlängen
   wie bei "g" oder "ß" abschneidet */
.split-lines .ln { display: block; overflow: hidden;
                   padding: .16em 0 .20em; margin: -.16em 0 -.20em; }
.split-lines .ln > span {
  display: block; transform: translateY(105%);
  transition: transform .9s var(--ease-out);
}
.split-lines.is-in .ln > span { transform: none; }
.split-lines.is-in .ln:nth-child(2) > span { transition-delay: .09s; }
.split-lines.is-in .ln:nth-child(3) > span { transition-delay: .18s; }
.split-lines.is-in .ln:nth-child(4) > span { transition-delay: .27s; }

/* Bild fährt beim Einscrollen leicht heran */
.zoom-in img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.zoom-in.is-in img { transform: scale(1); }

/* sanfter Parallax – JS setzt --py */
[data-parallax] { will-change: transform; }
[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .split-lines .ln > span { transform: none !important; }
  .zoom-in img, [data-parallax] img { transform: none !important; }
}

/* ==========================================================================
   Zusätzliche Bewegung (Stufe „deutlich mehr Schauwert")
   Alles läuft über transform/opacity/clip-path – das übernimmt die Grafik-
   karte. Breiten oder Positionen zu animieren würde ruckeln.
   ========================================================================== */

/* --- Fortschrittsbalken im Header --------------------------------------- */
.scroll-fortschritt {
  position: fixed; left: 0; top: 0; height: 2px; z-index: 130;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent), var(--accent-deep));
  pointer-events: none;
}
body.has-demo-bar .scroll-fortschritt { top: 34px; }

/* --- Bild wächst beim Einscrollen aus einer Maske ------------------------
   Bewusst NUR der Beschnitt. Das Bild darin zusätzlich zu skalieren wäre
   schöner, würde aber den Parallax und die Hover-Zooms überschreiben – die
   fassen dieselbe Eigenschaft an (transform).
------------------------------------------------------------------------ */
.mask-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
.mask-reveal.is-in { clip-path: inset(0 0 0 0); }

/* --- Karten heben sich unter dem Zeiger ---------------------------------- */
[data-spotlight] {
  position: relative;
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease);
}
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                              var(--glow-a), transparent 65%);
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight]:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
[data-spotlight] > * { position: relative; z-index: 1; }

/* --- Abschnitte, die sich beim Scrollen übereinanderschieben ------------- */
.stapel { position: relative; }
.stapel > .stapel-teil {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
}

/* --- Weiche Farbwolke, die langsam wandert ------------------------------- */
.wolke {
  position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 68%);
  filter: blur(18px);
  animation: wolke-treiben 26s ease-in-out infinite alternate;
}
.wolke.zwei { background: radial-gradient(circle, var(--glow-b), transparent 70%);
              animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes wolke-treiben {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.15); }
}

/* --- Zeilen einer Überschrift kommen gestaffelt (Verstärkung) ------------ */
.split-lines.is-in .ln:nth-child(5) > span { transition-delay: .36s; }
.split-lines.is-in .ln:nth-child(6) > span { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-fortschritt { display: none; }
  .mask-reveal { clip-path: none !important; }
  .wolke { animation: none; }
  [data-spotlight]:hover { transform: none; }
}

/* --- Hero-Einblendungen auf dem Handy ------------------------------------
   Namensschild und Bewertungsplakette liegen als weisse Kaesten ueber dem
   Foto. Am Rechner ist dafuer reichlich Platz; auf dem Handy verdeckten sie
   zusammen fast die Haelfte des Bildes – von Yelda war kaum noch etwas zu
   sehen. Deshalb hier deutlich kompakter: weniger Polsterung, kleinere
   Schrift, schmalere Plakette. Der Inhalt bleibt derselbe.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-name {
    padding: .45rem .7rem;
    border-radius: 0 0 0 var(--radius-m);
  }
  .hero-name .nm { font-size: .8rem; }
  .hero-name .rl { font-size: .58rem; letter-spacing: .08em; margin-top: .15em; }

  .hero-badge {
    padding: .5rem .75rem;
    max-width: 9.5rem;
    border-radius: 0 var(--radius-m) 0 var(--radius-l);
  }
  .hero-badge .num { font-size: 1.15rem; }
  .hero-badge .small { font-size: .58rem; line-height: 1.3; }
}