/* ============================================================
   LANDINGPAGE — Layout + Premium-Ebene
   ------------------------------------------------------------
   Grundlage bleibt das Design-System „Tatjana Kulcsar"
   (tokens.css / styles.css, eingefroren, nur gelesen).
   NEU seit 22.09.2026 (Jans Überarbeitung nach Tatjanas Figma-
   Datei): tiefes Lila + Gold aus Figma als eigene Ebene, nur in
   dieser Datei. Die hellen/grünen Bänder bleiben aus dem System.
   Prefix: .lp-
   ============================================================ */

/* ---- Figma-Palette (gemessen in Tatjanas Figma-Frames) ---- */
:root{
  --lp-plum-1:#5A3F78;            /* heller Rand oben links       */
  --lp-plum-2:#3E2A58;            /* Mitte                        */
  --lp-plum-3:#221731;            /* tiefe Ecke                   */
  --lp-plum-bg:radial-gradient(120% 95% at 0% 0%,var(--lp-plum-1) 0%,var(--lp-plum-2) 46%,var(--lp-plum-3) 100%);
  --lp-gold:#E6C38F;              /* Text-Gold auf Lila   7.4:1   */
  --lp-gold-deep:#B98C5A;
  --lp-gold-line:rgba(230,195,143,.38);
  --lp-gold-grad:linear-gradient(100deg,#B98C5A 0%,#E9C995 28%,#F7E6BF 46%,#D9B07A 64%,#A97E55 100%);
  --lp-on-plum:#F5EFF7;           /* Fließtext auf Lila  12.9:1   */
  --lp-on-plum-2:#D2C6DC;         /* gedämpft             8.0:1   */
  --lp-base:#2A1D3C;              /* durchgehender Grund der ganzen Seite */
  --lp-ease:cubic-bezier(.22,1,.36,1);   /* ruhiges ease-out für Einblendungen */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}   /* Sprungziele nicht unter der festen Kopfzeile */
body{margin:0;background:var(--lp-base);color:var(--ds-text);
  font-family:var(--ds-font-body);font-weight:var(--ds-w-body)}
img{max-width:100%;height:auto}
a{color:inherit}
a.ds-btn,a.lp-footer__link{text-decoration:none}

/* ---- Satzspiegel ---------------------------------------- */
.lp-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;position:relative}
.lp-wrap--narrow{max-width:820px}

/* ---- Bänder: der Rhythmus der Seite ---------------------- */
.lp-band{padding:clamp(64px,9vw,120px) 0}
.lp-band--paper2{background:var(--ds-paper-2)}
.lp-band--paper3{background:var(--ds-paper-3)}

/* ---- Lila Band (Figma) ----------------------------------- */
.lp-plum{color:var(--lp-on-plum);position:relative;overflow:hidden;isolation:isolate;
  /* Lichtflecken laufen VOR den Rändern aus → keine sichtbaren Nähte zwischen den Abschnitten */
  background:
    radial-gradient(ellipse 58% 40% at 10% 42%,rgba(104,74,138,.55) 0%,transparent 100%),
    radial-gradient(ellipse 50% 36% at 92% 62%,rgba(16,10,26,.55) 0%,transparent 100%),
    var(--lp-base)}
.lp-plum .ds-h1,.lp-plum .ds-h2{color:var(--lp-gold)}
.lp-plum--alt{background:
    radial-gradient(ellipse 58% 40% at 90% 42%,rgba(104,74,138,.55) 0%,transparent 100%),
    radial-gradient(ellipse 50% 36% at 8% 62%,rgba(16,10,26,.55) 0%,transparent 100%),
    var(--lp-base)}
/* Übergang zwischen zwei Abschnitten: Goldstrich, der zu den Seiten ausläuft,
   mit kleinem Mandala in der Mitte. */
.lp-plum + .lp-plum::before{content:"";position:absolute;top:36px;left:50%;
  width:min(620px,78%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(230,195,143,.55) 30%,rgba(247,230,191,.9) 50%,rgba(230,195,143,.55) 70%,transparent)}
.lp-plum + .lp-plum::after{content:"";position:absolute;top:24px;left:50%;width:26px;height:26px;
  margin-left:-13px;background:var(--lp-base) url(../img/mandala-gold-dunkel.svg) center/20px no-repeat;
  border-radius:50%;box-shadow:0 0 0 6px var(--lp-base)}
/* Playfair setzt sonst Mediävalziffern — die „3" hinge unter der Zeile. */
.ds-h1,.ds-h2,.lp-hero__lead,.lp-day__title,.lp-mission p{font-variant-numeric:lining-nums}
.lp-plum .lp-item__text{color:var(--lp-on-plum)}
/* Goldene Überschrift mit leisem Schimmer, wie in Figma. */
.lp-plum .lp-head h2{background:var(--lp-gold-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Großes Mandala als Wasserzeichen am Rand — wie in den Figma-Frames. */
.lp-orn{position:absolute;z-index:-1;pointer-events:none;user-select:none;
  width:min(620px,70vw);height:auto;opacity:.09;
  /* läuft zum Rand hin weich aus — keine harte Kante an der Abschnittsgrenze */
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.lp-orn--tr{top:-12%;right:-12%}
.lp-orn--bl{bottom:2%;left:-18%}
.lp-orn--r{top:50%;right:-22%;transform:translateY(-50%)}

/* ---- Kopfzeile ------------------------------------------- */
.lp-header{position:sticky;top:0;z-index:20;
  background:rgba(34,23,49,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lp-gold-line)}
.lp-header__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--ds-s-md);padding-top:12px;padding-bottom:12px}
.lp-header .ds-btn{white-space:nowrap}
.lp-header .ds-logo__wm{color:var(--lp-gold)}
.lp-header .ds-logo__tag{color:var(--lp-on-plum-2)}
.lp-header .ds-btn--outline{color:var(--lp-gold);box-shadow:inset 0 0 0 1.5px var(--lp-gold)}
.lp-header .ds-btn--outline:hover{background:rgba(230,195,143,.12)}
@media (max-width:640px){.lp-header [data-cta]{display:none}}
.lp-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.lp-brand__mark{width:42px;height:42px;flex:none}

/* ---- Hero ------------------------------------------------ */
.lp-hero{padding:clamp(56px,8vw,112px) 0 clamp(72px,9vw,128px);
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%,rgba(110,78,146,.7) 0%,transparent 100%),
    radial-gradient(ellipse 55% 45% at 85% 55%,rgba(16,10,26,.5) 0%,transparent 100%),
    var(--lp-base)}
.lp-hero__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media (max-width:900px){.lp-hero__grid{grid-template-columns:1fr}}
.lp-hero__in{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-s-lg)}
.lp-hero__title{margin:0;display:flex;flex-direction:column;gap:4px}
.lp-hero__pre{font-family:var(--ds-font-body);font-weight:600;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--lp-on-plum)}
.lp-hero__big{font-family:var(--ds-font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,7vw,92px);line-height:1;letter-spacing:.02em;
  background:var(--lp-gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.lp-hero__lead{margin:0;max-width:30ch;font-family:var(--ds-font-head);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);line-height:1.32;color:var(--lp-on-plum)}
.lp-hero__rule{width:120px;height:1px;border:0;margin:4px 0;background:var(--lp-gold-grad)}

/* Foto im Bogen (Figma-Motiv). Hero = dasselbe Hochformat-Foto wie Figma-Frame 1
   (A85_9044) — Tatjana mittig, Kopf nicht angeschnitten. */
.lp-arch{margin:0;position:relative;border-radius:999px 999px var(--ds-r-xl) var(--ds-r-xl);
  box-shadow:0 40px 80px -40px rgba(10,4,20,.8)}
.lp-arch img{display:block;width:100%;border-radius:inherit;object-fit:cover}
.lp-arch::after{content:"";position:absolute;inset:-14px;border-radius:999px 999px 26px 26px;
  border:1px solid var(--lp-gold-line);pointer-events:none}
.lp-hero__photo{max-width:480px;justify-self:center;width:100%}
.lp-hero__photo img{aspect-ratio:4/5;object-position:50% 28%}

/* ---- Abschnittskopf -------------------------------------- */
.lp-head{display:flex;flex-direction:column;gap:14px;margin:0 0 var(--ds-s-2xl)}
.lp-head h2{margin:0}
.lp-head--center{align-items:center;text-align:center}
.lp-head__mark{width:64px;height:64px}
.lp-head__rule{width:min(360px,70%);height:1px;border:0;margin:6px 0 4px;background:var(--lp-gold-grad);opacity:.8}

/* ---- Punktelisten ---------------------------------------- */
.lp-grid{display:grid;gap:var(--ds-s-lg) var(--ds-s-2xl);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lp-item__icon{flex:none;color:var(--ds-primary);margin-top:2px}
.lp-item__text{font-family:var(--ds-font-body);font-weight:var(--ds-w-body);
  font-size:var(--ds-t-body);line-height:1.6;color:var(--ds-text);margin:0}
/* Goldpunkt wie in Figma */
.lp-dot{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding-top:var(--ds-s-lg);border-top:1px solid var(--lp-gold-line)}
.lp-dot::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:9px;
  background:var(--lp-gold-grad);box-shadow:0 0 12px rgba(230,195,143,.45)}

/* Karten-Fassung für die zweite Liste (grünes Band) */
.lp-card-grid{display:grid;gap:var(--ds-s-md);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.lp-tile{background:var(--ds-surface);border-radius:var(--ds-r-lg);box-shadow:var(--ds-e-2);
  padding:var(--ds-s-lg);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.lp-tile__icon{color:var(--ds-green);flex:none;margin-top:2px}
.lp-tile p{margin:0;font-size:var(--ds-t-body);line-height:1.6;color:var(--ds-text)}

/* ---- Programm (lila) ------------------------------------- */
.lp-days{border-top:1px solid var(--lp-gold-line)}
.lp-day{display:grid;grid-template-columns:128px 1fr;gap:var(--ds-s-lg);align-items:baseline;
  padding:var(--ds-s-xl) 0;border-bottom:1px solid var(--lp-gold-line)}
@media (max-width:560px){.lp-day{grid-template-columns:1fr;gap:8px}}
.lp-day__step{font-family:var(--ds-font-body);font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lp-gold);white-space:nowrap}
.lp-day__title{font-family:var(--ds-font-head);font-weight:500;
  font-size:clamp(21px,2.3vw,27px);line-height:1.35;color:var(--lp-on-plum);margin:0}

/* ---- Ablauf: 3 × 2 --------------------------------------- */
.lp-run{display:grid;gap:var(--ds-s-md);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.lp-run{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.lp-run{grid-template-columns:1fr}}
.lp-run__cell{background:var(--ds-surface);border-radius:var(--ds-r-lg);box-shadow:var(--ds-e-2);
  padding:var(--ds-s-lg);display:flex;flex-direction:column;gap:14px}
.lp-run__icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--ds-gold);box-shadow:inset 0 0 0 1px var(--ds-gold-mid)}
.lp-run__cell .lp-item__text{margin:0}

/* ---- Autorin --------------------------------------------- */
.lp-author{display:grid;gap:clamp(36px,5vw,72px);align-items:start;
  grid-template-columns:minmax(240px,380px) 1fr}
@media (max-width:820px){.lp-author{grid-template-columns:1fr}}
.lp-author__photo{max-width:380px;background:var(--ds-paper-2)}
.lp-author__photo::after{border-color:var(--ds-hairline)}
.lp-author__text p{margin:0 0 var(--ds-s-md)}
.lp-author__text p:last-child{margin-bottom:0}
/* Das goldgerahmte Feld: bewusst LEICHTE Schrift (Jan, 22.09.2026). */
.lp-mission{margin-top:var(--ds-s-lg);padding:var(--ds-s-xl)}
.lp-mission p{font-family:var(--ds-font-head);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.9vw,22px);line-height:1.5;color:var(--ds-ink);margin:0}

/* ---- Stimmen --------------------------------------------- */
.lp-voices{columns:2;column-gap:var(--ds-s-2xl)}
@media (max-width:720px){.lp-voices{columns:1}}
.lp-voice{break-inside:avoid;margin:0 0 var(--ds-s-2xl)}
.lp-voice .ds-quote__text{font-size:clamp(21px,2.1vw,26px);line-height:1.28}
.lp-voice .ds-quote{max-width:38ch}

/* ---- Video (Platzhalter) --------------------------------- */
.lp-video{position:relative;aspect-ratio:16/9;border-radius:var(--ds-r-xl);overflow:hidden;
  background:radial-gradient(90% 90% at 50% 40%,rgba(90,63,120,.9) 0%,rgba(24,15,36,.95) 100%);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.9),0 0 0 1px var(--lp-gold-line);
  display:grid;place-items:center}
.lp-video::before{content:"";position:absolute;inset:12px;border-radius:12px;
  border:1px solid rgba(230,195,143,.2);pointer-events:none}
.lp-video__orn{position:absolute;width:62%;height:auto;opacity:.12;pointer-events:none}
.lp-video__play{position:relative;width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;background:var(--lp-gold-grad);color:var(--lp-plum-3);
  box-shadow:0 0 0 10px rgba(230,195,143,.12),0 18px 40px -12px rgba(0,0,0,.7)}
.lp-video__play svg{display:block}
@media (max-width:600px){.lp-video__play{width:66px;height:66px}.lp-video__play svg{width:26px;height:26px}}
.lp-video iframe,.lp-video video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- CTA ------------------------------------------------- */
.lp-cta{display:flex;justify-content:center;padding-top:var(--ds-s-2xl)}

/* Goldener Knopf für die lila Bänder. */
.lp-btn-gold{position:relative;background:var(--lp-gold-grad);background-size:220% 100%;
  background-position:0 0;color:#2A1B3D;border:1px solid rgba(255,240,210,.55);
  box-shadow:0 14px 34px -14px rgba(233,190,130,.6),inset 0 1px 0 rgba(255,255,255,.45);
  transition:background-position var(--ds-dur-slow) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease)}
.lp-btn-gold:hover{background-position:100% 0;
  box-shadow:0 18px 44px -14px rgba(233,190,130,.8),inset 0 1px 0 rgba(255,255,255,.55)}

/* Der Schluss-Knopf unter dem Video: größer, mit Goldring und Lichtkante. */
.lp-btn-hero{padding:24px 54px;font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  overflow:visible}
.lp-btn-hero::before{content:"";position:absolute;inset:-9px;border-radius:inherit;
  border:1px solid rgba(230,195,143,.45);pointer-events:none}
.lp-btn-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  background-size:250% 100%;background-position:120% 0;
  transition:background-position 900ms var(--ds-ease)}
.lp-btn-hero:hover::after{background-position:-20% 0}
@media (max-width:480px){.lp-btn-hero{padding:20px 30px;font-size:15px}}
.lp-cta--finale{padding-top:clamp(56px,7vw,80px)}

/* ---- Fußzeile -------------------------------------------- */
.lp-footer{background:linear-gradient(180deg,var(--lp-base) 0%,#1B1228 100%);color:var(--lp-on-plum-2);
  position:relative;padding:var(--ds-s-3xl) 0}
.lp-footer::before{content:"";position:absolute;top:0;left:50%;width:min(620px,78%);height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--lp-gold-line),transparent)}
.lp-footer .ds-logo__wm{color:var(--lp-gold)}
.lp-footer .ds-logo__tag{color:var(--lp-on-plum-2)}
.lp-footer__in{display:flex;flex-wrap:wrap;gap:var(--ds-s-lg) var(--ds-s-2xl);
  align-items:flex-start;justify-content:space-between}
.lp-footer__links{display:flex;flex-direction:column;gap:10px}
.lp-footer__link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:var(--ds-t-small);color:var(--lp-on-plum-2);
  transition:color var(--ds-dur) var(--ds-ease)}
.lp-footer__link:hover{color:var(--lp-gold)}
.lp-legal{margin-top:var(--ds-s-xl);padding-top:var(--ds-s-md);
  border-top:1px solid var(--lp-gold-line);display:flex;flex-wrap:wrap;gap:var(--ds-s-md)}
.lp-legal a{font-family:var(--ds-font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lp-on-plum-2);text-decoration:none}
.lp-legal a:hover{color:var(--lp-gold)}

@media (prefers-reduced-motion:reduce){
  .lp-btn-gold,.lp-btn-hero::after{transition:none}
}


/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   Nur Textsatz — Farben und Schriften kommen aus dem System.
   ============================================================ */
.lp-doc{max-width:70ch}
.lp-doc h2{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);
  font-size:var(--ds-t-h3);line-height:1.3;color:var(--ds-ink);
  margin:var(--ds-s-2xl) 0 var(--ds-s-sm)}
.lp-doc h2:first-of-type{margin-top:var(--ds-s-xl)}
.lp-doc h3{font-family:var(--ds-font-body);font-weight:700;font-size:var(--ds-t-body);
  color:var(--ds-ink);margin:var(--ds-s-lg) 0 6px}
.lp-doc p,.lp-doc li{font-family:var(--ds-font-body);font-weight:var(--ds-w-body);
  font-size:var(--ds-t-small);line-height:1.75;color:var(--ds-text-2)}
.lp-doc p{margin:0 0 var(--ds-s-md)}
.lp-doc ul{margin:0 0 var(--ds-s-md);padding-left:20px}
.lp-doc li{margin-bottom:6px}
.lp-doc a{color:var(--ds-primary);text-underline-offset:3px}
.lp-doc dl{margin:0 0 var(--ds-s-md);display:grid;gap:6px 20px;
  grid-template-columns:minmax(140px,auto) 1fr}
@media (max-width:560px){.lp-doc dl{grid-template-columns:1fr;gap:2px}}
.lp-doc dt{font-family:var(--ds-font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-ink-2);padding-top:5px}
.lp-doc dd{margin:0;font-size:var(--ds-t-small);line-height:1.7;color:var(--ds-text)}
/* Deutsche Rechtsbegriffe als leise Beistellung zum russischen Text. */
.lp-doc .de{color:var(--ds-n-500);font-size:.92em}

/* Noch einzutragende Angaben — bewusst nicht zu übersehen.
   Vor dem Livegang darf keine einzige davon übrig bleiben. */
.lp-fill{background:var(--ds-rose-soft);color:var(--ds-rose);
  font-family:var(--ds-font-mono);font-size:.85em;letter-spacing:.02em;
  padding:2px 8px;border-radius:var(--ds-r-sm);white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--ds-rose-light)}


/* ============================================================
   EINHEITLICH LILA (22.09.2026, Jan: „das grüne … gefällt mir
   gar nicht … damit es alles einheitlich ist")
   Alle Inhalte, die bisher auf hellem/grünem Grund standen,
   bekommen hier ihre Fassung auf Lila.
   ============================================================ */
/* Karten: dunkles Glas mit Goldkante statt weißer Kärtchen */
.lp-plum .lp-tile,.lp-plum .lp-run__cell{background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--lp-gold-line),0 24px 50px -34px rgba(0,0,0,.8)}
.lp-plum .lp-tile p{color:var(--lp-on-plum)}
.lp-plum .lp-tile__icon,.lp-plum .lp-run__icon{color:var(--lp-gold)}
.lp-plum .lp-run__icon{box-shadow:inset 0 0 0 1px var(--lp-gold-line)}
.lp-plum .ds-script{color:var(--lp-gold)}
/* Autorin */
.lp-plum .ds-body{color:var(--lp-on-plum-2)}
.lp-plum .lp-author__photo{background:var(--lp-plum-2)}
.lp-plum .lp-author__photo::after{border-color:var(--lp-gold-line)}
.lp-plum .lp-mission{background:rgba(255,255,255,.04);border:1px solid transparent;
  background-image:linear-gradient(var(--lp-plum-2),var(--lp-plum-2)),var(--lp-gold-grad);
  background-origin:border-box;background-clip:padding-box,border-box}
.lp-plum .lp-mission p{color:var(--lp-on-plum)}
/* Stimmen */
.lp-plum .ds-small{color:var(--lp-on-plum-2)}
.lp-plum .ds-quote{background-image:var(--lp-gold-grad)}
.lp-plum .ds-quote__text{color:var(--lp-on-plum)}
.lp-plum .ds-quote__source{color:var(--lp-gold)}

/* Figma-Frame 10: breites Foto im Bogen unter „ТАК МОЖЕТ БЫТЬ" */
.lp-wide-photo{max-width:760px;margin:var(--ds-s-3xl) auto 0}
.lp-wide-photo img{aspect-ratio:3/2;object-position:50% 40%}
.lp-wide-photo::after{border-radius:999px 999px 26px 26px / 520px 520px 26px 26px}
.lp-wide-photo,.lp-wide-photo img{border-radius:380px 380px var(--ds-r-xl) var(--ds-r-xl) / 300px 300px var(--ds-r-xl) var(--ds-r-xl)}


/* ============================================================
   FEINSCHLIFF + BEWEGUNG (25.09.2026)
   Bewegung nur als Einblendung beim Scrollen, einmal, ruhig.
   Grundsatz der Marke bleibt: kein Hüpfen, kein Blinken.
   Ohne JS oder bei „Bewegung reduzieren" ist alles sofort da.
   ============================================================ */

/* Typografie: ausgewogene Umbrüche, keine einzelnen Wörter am Zeilenende */
.ds-h1,.ds-h2,.lp-hero__lead,.lp-day__title{text-wrap:balance}
.lp-item__text,.lp-tile p,.ds-body,.lp-mission p,.ds-quote__text{text-wrap:pretty}

/* Feine Körnung über der ganzen Seite — nimmt dem Verlauf das Digitale */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* „Zum Inhalt" — nur sichtbar, wenn man mit der Tastatur navigiert */
.lp-skip{position:absolute;left:16px;top:-60px;z-index:40;padding:10px 18px;border-radius:999px;
  background:var(--lp-gold);color:#2A1B3D;font-weight:700;text-decoration:none;transition:top .2s var(--lp-ease)}
.lp-skip:focus{top:12px}

/* Kopfzeile wird beim Scrollen etwas dichter */
.lp-header{transition:background-color .25s var(--lp-ease),box-shadow .25s var(--lp-ease)}
.lp-header.is-scrolled{background:rgba(27,18,40,.97);box-shadow:0 12px 30px -18px rgba(0,0,0,.7)}

/* Knöpfe: geben beim Drücken spürbar nach */
.lp-btn-gold{transition:background-position var(--ds-dur-slow) var(--ds-ease),
  box-shadow var(--ds-dur) var(--ds-ease),transform .12s var(--lp-ease)}
.lp-btn-gold:active{transform:scale(.97)}
.lp-btn-gold .ds-icon{transition:transform .25s var(--lp-ease)}
@media (hover:hover){.lp-btn-gold:hover .ds-icon{transform:translateX(3px)}}

/* Karten: Goldkante leuchtet unter der Maus leise auf */
@media (hover:hover){
  .lp-plum .lp-tile,.lp-plum .lp-run__cell{transition:box-shadow .25s var(--lp-ease),background-color .25s var(--lp-ease)}
  .lp-plum .lp-tile:hover,.lp-plum .lp-run__cell:hover{background-color:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px rgba(230,195,143,.7),0 24px 50px -30px rgba(0,0,0,.85)}
}

/* Mandala-Wasserzeichen drehen sich kaum merklich (1 Umdrehung / 3 Min) */
@keyframes lp-spin{to{rotate:360deg}}
.lp-orn,.lp-video__orn{animation:lp-spin 180s linear infinite}

/* Einmaliger Goldschimmer über „ИНТЕНСИВ" beim Laden */
@keyframes lp-shine{from{background-position:100% 0}to{background-position:0 0}}
.lp-hero__big{background-size:220% 100%;animation:lp-shine 2.2s var(--lp-ease) .5s both}

/* Weiteres Foto: Laptop (Abschnitt „Как проходит интенсив") */
.lp-wide-photo--laptop img{object-position:44% 35%}   /* seit 25.09. Foto mit Tasse (A85_9102): Gesicht mittig im Bogen */

/* ---- Einblenden beim Scrollen --------------------------------
   .lp-anim setzt ein kleines Skript im <head> — nur wenn der Browser
   es kann und niemand „Bewegung reduzieren" eingestellt hat.       */
.lp-anim .lp-rv{opacity:0;transform:translateY(20px);filter:blur(6px);
  transition:opacity .75s var(--lp-ease),transform .75s var(--lp-ease),filter .75s var(--lp-ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.lp-anim .lp-rv.is-in{opacity:1;transform:none;filter:none}
/* Fotos öffnen sich von unten, das Bild setzt sich dabei leicht */
/* (Clip am Bild, nicht am Rahmen — sonst wäre die äußere Goldlinie abgeschnitten.) */
.lp-anim .lp-rv-photo img{clip-path:inset(100% 0 0 0);transform:scale(1.08);
  transition:clip-path 1.1s var(--lp-ease),transform 1.4s var(--lp-ease)}
.lp-anim .lp-rv-photo::after{opacity:0;transition:opacity 1s var(--lp-ease) .45s}
.lp-anim .lp-rv-photo.is-in img{clip-path:inset(0);transform:none}
.lp-anim .lp-rv-photo.is-in::after{opacity:1}
/* Übergangs-Goldstrich zieht sich von der Mitte auf */
.lp-anim .lp-plum + .lp-plum::before{transform:translateX(-50%) scaleX(0);
  transition:transform 1.2s var(--lp-ease)}
.lp-anim .lp-plum + .lp-plum::after{opacity:0;transition:opacity .8s var(--lp-ease) .3s}
.lp-anim .lp-plum + .lp-plum.is-seen::before{transform:translateX(-50%) scaleX(1)}
.lp-anim .lp-plum + .lp-plum.is-seen::after{opacity:1}
/* Sicherheitsnetz: falls das Skript nicht läuft, nach 4 s alles zeigen */
.lp-anim-off .lp-plum + .lp-plum::before{transform:translateX(-50%)!important}
.lp-anim-off .lp-plum + .lp-plum::after{opacity:1!important}
.lp-anim-off .lp-rv,.lp-anim-off .lp-rv-photo img,.lp-anim-off .lp-rv-photo::after{
  opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}

@media (prefers-reduced-motion:reduce){
  .lp-orn,.lp-video__orn,.lp-hero__big{animation:none}
  .lp-btn-gold,.lp-btn-gold .ds-icon{transition:none}
}
@media print{
  body::after{display:none}
  .lp-rv,.lp-rv-photo img,.lp-rv-photo::after{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}

/* ---- Rechtsseiten auf Lila (25.09.2026, einheitlich mit der Landingpage) ---- */
.lp-legalpage .lp-doc h2,.lp-legalpage .lp-doc h3,.lp-legalpage .lp-doc dd{color:var(--lp-on-plum)}
.lp-legalpage .lp-doc h2{color:var(--lp-gold)}
.lp-legalpage .lp-doc p,.lp-legalpage .lp-doc li,.lp-legalpage .ds-small{color:var(--lp-on-plum-2)}
.lp-legalpage .lp-doc dt{color:var(--lp-gold)}
.lp-legalpage .lp-doc a,.lp-legalpage a:not(.ds-btn){color:var(--lp-gold)}
.lp-legalpage .lp-doc .de,.lp-legalpage .de{color:#A898B6}
.lp-legalpage .ds-rule{background:var(--lp-gold-grad)}

/* ---- Video (25.09.2026): hochkant 9:16 wie aufgenommen ---------------- */
.lp-video{aspect-ratio:9/16;max-width:400px;margin:0 auto;background:var(--lp-plum-3)}
.lp-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--lp-plum-3)}
/* leichte Abdunkelung unten, damit der Knopf auf dem Foto sicher steht */
.lp-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 50%,rgba(20,12,32,.35),transparent 70%);
  transition:opacity .25s var(--lp-ease)}
.lp-video::before{z-index:2}
.lp-video__play{position:absolute;z-index:3;left:50%;top:50%;margin:-46px 0 0 -46px;border:0;cursor:pointer;
  transition:transform .15s var(--lp-ease),opacity .25s var(--lp-ease),box-shadow .25s var(--lp-ease)}
@media (max-width:600px){.lp-video__play{margin:-33px 0 0 -33px}}
@media (hover:hover){.lp-video__play:hover{box-shadow:0 0 0 14px rgba(230,195,143,.18),0 18px 40px -12px rgba(0,0,0,.7)}}
.lp-video__play:active{transform:scale(.95)}
.lp-video__play:focus-visible{outline:2px solid var(--lp-gold);outline-offset:6px}
.lp-video.is-playing .lp-video__play,.lp-video.is-playing::after,.lp-video.is-playing::before{opacity:0;pointer-events:none}

/* ---- Autorin (25.09.2026, Jan): Foto etwas tiefer + drehendes Mandala links dahinter ---- */
@media (min-width:821px){.lp-author__photo{margin-top:56px}}
/* Mitte links oben am Foto → sichtbar um den Bogen herum und im Rand links daneben */
.lp-orn--al{top:14%;left:-19%;width:min(700px,75vw);opacity:.11}
@media (max-width:820px){.lp-orn--al{top:4%;left:-38%;width:90vw}}

/* ---- Ohne JavaScript (z. B. Vorschau auf iPhone/Android): Video mit normaler Steuerung ---- */
html:not(.lp-js) .lp-video__play,html:not(.lp-js) .lp-video::after,html:not(.lp-js) .lp-video::before{display:none}