/* Analyse-Strecke (Fassung Porträt): klebende Scroll-Strecke in der Sprache der Seite.
   Kopf zentriert wie die anderen Abschnitte; darunter das Bild in der Mitte, Text und Anzeigen wechseln je Takt
   zwischen links und rechts. Alles Erscheinen folgt dem (geglätteten) Scrollen, gesteuert von analyse.js.
   Ohne Skript oder mit reduzierter Bewegung: Standbild neben der Liste der Schritte. */
.analyse{position:relative;background:linear-gradient(180deg,var(--gelb) 0,var(--gelb-hell) 240px,var(--gelb-hell) calc(100% - 300px),var(--weiss) 100%)}
.analyse__kopf{max-width:720px;margin:0 auto;padding:130px var(--rand) 0;text-align:center}
.analyse__kopf .h2{margin:22px 0 22px}
.analyse__unterzeile{max-width:520px;margin:0 auto;font-size:18px;line-height:1.5;color:var(--leise)}

/* Bühne */
.analyse__lauf{position:relative}
html.js:not(.still) .analyse__lauf{height:1000vh;height:1000svh}
.analyse__buehne{--kh:min(calc(100svh - 150px),860px);--kw:calc(var(--kh) * .75);position:relative}
html.js:not(.still) .analyse__buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* Fortschritt: sieben Striche, oben mittig */
.analyse__fortschritt{display:none}
html.js:not(.still) .analyse__fortschritt{position:absolute;left:50%;top:98px;z-index:5;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(420px,calc(100% - 48px));margin:0;padding:0;list-style:none;transform:translateX(-50%)}
.analyse__fortschritt li{position:relative;height:2px;border-radius:1px;background:rgba(35,39,42,.14);overflow:hidden}
.analyse__fortschritt i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--f,0));background:var(--knopf)}

/* Karte mit Bild */
.analyse__karte{position:relative;margin:0}
html.js:not(.still) .analyse__karte{position:absolute;left:50%;top:120px;width:var(--kw);height:var(--kh);margin-left:calc(var(--kw) / -2)}
.analyse__rahmen{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);background:#A49486;isolation:isolate}
.analyse__dreh{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden}
.analyse__kamera{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,filter}
.analyse__bild,.analyse__film{position:absolute;inset:0;width:100%;height:100%;display:block}
.analyse__bild,.analyse__film{object-fit:cover}
.analyse__film{opacity:0;transition:opacity .35s ease;pointer-events:none}
.analyse.zeigt-film .analyse__film{opacity:1}
.analyse__hell{position:absolute;pointer-events:none;opacity:0;background:rgba(255,248,240,.55);mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%),linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 32%),linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
.analyse__schleier{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 45%,rgba(30,26,24,.12),rgba(30,26,24,.6))}
.analyse__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.analyse__svg .a-p{fill:rgba(255,255,255,.2);stroke:#fff;stroke-width:1.2;opacity:0}
.analyse__svg .a-mitte{stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 6;fill:none;opacity:0}
.analyse__svg .a-leit{stroke:rgba(255,255,255,.95);stroke-width:1;fill:none;opacity:0}
.analyse__svg .a-leit--aussen{stroke:rgba(35,39,42,.35)}
.analyse__svg .a-anker{fill:var(--sand);stroke:#fff;stroke-width:1.5;opacity:0}
.analyse__karte .schild{z-index:7}
.analyse__messhinweis{position:absolute;right:14px;bottom:14px;z-index:7;margin:0;padding:6px 10px;border-radius:999px;background:rgba(18,20,21,.62);color:#fff;font:500 12px/1.2 var(--sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Anzeigen: Karten der Fassung Porträt */
.analyse__ui{position:absolute;inset:0;z-index:4;pointer-events:none}
.analyse__ui [data-zeigen]{opacity:0;visibility:hidden;will-change:opacity,transform}
.a-kicker{display:flex;align-items:center;gap:8px;margin:0;font:500 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.a-kicker i{width:7px;height:7px;border-radius:2px;background:var(--sand);flex:none}
.a-karte{position:absolute;padding:18px 20px 18px;border-radius:16px;background:#fff;color:var(--text);box-shadow:0 18px 44px rgba(35,39,42,.12);border:1px solid rgba(35,39,42,.05)}
.a-gross{margin:10px 0 0;font:350 26px/1.1 var(--serif);letter-spacing:-.01em}
.a-gross em{font-style:italic}
.a-balken{position:relative;height:3px;margin-top:16px;border-radius:2px;background:var(--linie);overflow:hidden}
.a-balken i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--b,0));background:var(--knopf)}
.a-skala{display:flex;justify-content:space-between;margin:8px 0 0;font:500 11px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--leise)}

/* Takt 1: Zeilen mit Daumenbild */
.a-zeilen{position:absolute;margin:0;padding:0;list-style:none;display:grid;gap:8px}
.a-zeile{display:grid;grid-template-columns:34px 1fr 14px;align-items:center;gap:14px;min-height:52px;padding:8px 16px 8px 9px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(35,39,42,.1);border:1px solid rgba(35,39,42,.05)}
.a-zeile b{font:500 15px/1.2 var(--sans);white-space:nowrap}
.a-zeile i{position:relative;width:12px;height:12px;color:var(--leise)}
.a-zeile i::before,.a-zeile i::after{content:"";position:absolute;left:0;right:0;top:5.5px;height:1.2px;background:currentColor}
.a-zeile i::after{transform:rotate(90deg)}
.a-daumen{width:34px;height:34px;border-radius:9px;background:#A49486 url(bilder/portraet-analyse-1200.webp) no-repeat;background-size:var(--g,520%) auto;background-position:var(--px,50%) var(--py,50%)}
.a-daumen.a-daumen--profil{background-image:url(bilder/portraet-analyse-profil-800.webp)}

/* Takt 3: Hautschichten */
.a-schichten{position:absolute;display:grid;gap:8px}
.a-schicht{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 18px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(35,39,42,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.a-schicht b{font:500 15px/1 var(--sans)}
.a-schicht span{font-size:14px;color:#4C5257}
.a-schicht:nth-child(2){margin-left:22px}.a-schicht:nth-child(3){margin-left:44px}
.a-merkmal{position:relative;margin-top:8px}

/* Takt 4: Etiketten (Lage im Gewebe, kein Befund) und Laser als Pillen wie im Laser-Abschnitt */
.a-chips{position:absolute;display:grid;gap:10px}
.a-chip{display:grid;grid-template-columns:22px auto;column-gap:12px;row-gap:2px;align-items:center;justify-self:start;padding:10px 16px 10px 12px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(35,39,42,.1);border:1px solid rgba(35,39,42,.05)}
.a-chip i{grid-row:1/3;width:22px;height:22px;border-radius:7px;background:var(--f)}
.a-chip span{font:500 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.a-chip b{font:500 14px/1.25 var(--sans);white-space:nowrap}
.a-laser{position:absolute}
.a-laser__pillen{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.a-laser__pillen span{padding:8px 12px;border-radius:999px;border:1px solid var(--linie);background:#fff;font:500 13px/1 var(--sans);white-space:nowrap;transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.a-laser__pillen span.ist-an{background:var(--dunkel);border-color:var(--dunkel);color:#fff}
.a-laser__achse{position:relative;height:26px;margin-top:22px;border-top:1px solid rgba(35,39,42,.35);font:400 11px/1 var(--sans);color:var(--leise)}
.a-laser__achse span{position:absolute;top:12px;transform:translateX(-50%);white-space:nowrap}
.a-laser__achse span:nth-child(2){left:4.7%;transform:none}.a-laser__achse span:nth-child(3){left:35.8%}.a-laser__achse span:nth-child(4){right:0;left:auto;transform:none}
.a-laser__achse::before,.a-laser__achse::after{content:"";position:absolute;top:-4px;width:1px;height:7px;background:rgba(35,39,42,.35)}
.a-laser__achse::before{left:35.8%}.a-laser__achse::after{left:95.3%}
.a-laser__marke{position:absolute;top:-6px;left:calc(var(--m,.224) * 100%);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px rgba(200,169,107,.25);transition:left .7s var(--kurve)}
.a-laser__hinweis{margin:14px 0 0;font-size:12px;line-height:1.45;color:var(--leise)}
.a-lang{display:inline}.a-kurz{display:none}

/* Takt 5: Hauttyp-Legende, ohne Einstufung */
.a-hauttyp ol{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:14px 0 4px;padding:0;list-style:none;overflow:hidden;border-radius:4px}
.a-hauttyp li{height:26px;border-radius:4px;background:var(--f);font:500 11px/26px var(--sans);text-align:center;color:#23272A}
.a-hauttyp li:nth-child(n+5){color:#fff}
.a-hauttyp ol::after{content:"";position:absolute;top:0;bottom:0;width:34%;left:calc(var(--b,0) * 140% - 40%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}

/* Takt 6: Verlauf mit nummerierten Quadraten wie bei der Warteliste */
.a-punktfeld{position:absolute;left:0;top:16%;width:42%;height:46%;background-image:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px);background-size:12px 12px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 45%,#000 35%,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 30% 45%,#000 35%,transparent 75%)}
.a-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 0;padding:0;list-style:none}
.a-schritte li{display:grid;gap:8px;font:500 13px/1.25 var(--sans);color:var(--leise);transition:color .35s ease}
.a-schritte b{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--linie);color:var(--text);font:600 13px/1 var(--sans);transition:background-color .35s ease,color .35s ease}
.a-schritte li.ist-an{color:var(--text)}
.a-schritte li.ist-an b{background:var(--dunkel);color:#fff}

/* Takt 7: Blatt; das Bild schrumpft zum Passbild darin (Skript) */
.a-blatt{position:absolute;display:flex;flex-direction:column;overflow:hidden;padding:22px 22px 18px;border-radius:16px;background:#fff;color:var(--text);box-shadow:0 30px 60px rgba(35,39,42,.16)}
.a-blatt__kopf{display:flex;justify-content:space-between;align-items:center}
.a-blatt__marke{font:400 13px/1 var(--sans);letter-spacing:.06em}
.a-blatt__titel{margin:16px 0 14px;font:350 30px/1.05 var(--serif);letter-spacing:-.01em}
.a-blatt__titel em{color:var(--knopf)}
.a-blatt__bilder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-blatt__bilder img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;border-radius:8px;background:#A49486}
.a-blatt__liste{margin:14px 0 0;padding:0;list-style:none;display:grid;align-content:start}
.a-blatt__liste li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;padding:9px 0;border-top:1px solid var(--linie)}
.a-blatt__liste b{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--dunkel);color:#fff;font:600 11px/1 var(--sans)}
.a-blatt__liste span{font:500 14px/1.3 var(--sans)}
.a-blatt__liste small{grid-column:2;font-size:12.5px;line-height:1.4;color:var(--leise)}
.a-blatt__fuss{margin:auto 0 0;padding-top:10px;font:500 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.a-blatt--zwei{display:none}

/* Takt 8: Satz in der Unschärfe */
.analyse__satz{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:0 10%;pointer-events:none;opacity:0}
.analyse__satz p{margin:0;max-width:10ch;text-align:center;color:#fff;font:350 clamp(40px,4vw,62px)/1.05 var(--serif);letter-spacing:-.02em}
.analyse__satz em{font-style:italic}

/* Text der Takte und Schluss */
.analyse__takte{margin:0;padding:0;list-style:none}
.analyse__takt h3{margin:0;font:350 clamp(30px,2.6vw,40px)/1.08 var(--serif);letter-spacing:-.015em}
.analyse__takt p{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--leise)}
.analyse__nr{display:block;margin-bottom:14px;font:350 64px/1 var(--serif);color:var(--knopf);letter-spacing:-.02em}
.analyse__schlusssatz{margin:0;font:350 clamp(32px,3vw,46px)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.analyse__schlusssatz em{font-style:italic;color:var(--knopf);white-space:nowrap}
.analyse__liste-satz{margin:10px 0 18px;font:350 24px/1.2 var(--serif)}
.analyse__hinweis{margin:0;font:500 12px/1.4 var(--sans);color:var(--leise)}

/* Mit Skript: Text und Anzeigen um das Bild, je Takt eine Seite */
html.js:not(.still) .analyse__takt,html.js:not(.still) .analyse__schlusssatz,html.js:not(.still) .analyse__liste-karte{position:absolute;opacity:0;visibility:hidden;will-change:opacity,transform}
html.js:not(.still) .analyse__hinweis{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap}
@media (min-width:1200px){
  html.js:not(.still) .analyse__takt,html.js:not(.still) .analyse__schlusssatz{top:calc(120px + var(--kh) / 2);width:min(380px,calc(50% - var(--kw) / 2 - 104px))}
  html.js:not(.still) .analyse__takt[data-seite="links"],html.js:not(.still) .analyse__schlusssatz{right:calc(50% + var(--kw) / 2 + 64px);text-align:right}
  html.js:not(.still) .analyse__takt[data-seite="rechts"]{left:calc(50% + var(--kw) / 2 + 64px)}
  html.js:not(.still) .analyse__liste-karte{top:calc(120px + var(--kh) / 2);left:calc(50% + var(--kw) / 2 + 48px);width:min(340px,calc(50% - var(--kw) / 2 - 88px))}
  /* Anzeigen-Seiten (Gegenseite zum Text) */
  .a-zeilen{left:calc(100% - 40px);top:16%;width:min(330px,calc((100vw - 100%) / 2 - 20px))}
  .a-karte--3d{right:calc(100% - 40px);top:14%;width:min(320px,calc((100vw - 100%) / 2 - 20px))}
  .a-schichten{left:42%;top:42%;width:min(420px,calc((100vw - 100%) / 2 + 30%))}
  .a-chips{right:calc(100% + 56px);top:12%;width:min(340px,calc((100vw - 100%) / 2 - 76px))}
  .a-chips .a-chip{justify-self:end}
  .a-laser{right:calc(100% + 56px);top:50%;width:min(340px,calc((100vw - 100%) / 2 - 76px))}
  .a-hauttyp{left:calc(100% - 40px);top:30%;width:min(330px,calc((100vw - 100%) / 2 - 20px))}
  .a-verlauf{right:calc(100% - 40px);top:38%;width:min(360px,calc((100vw - 100%) / 2 - 20px))}
  .a-blatt{left:7%;right:7%;top:6%;bottom:6%}
  .a-blatt--zwei{display:flex;left:calc(100% - 36px);right:auto;top:14%;bottom:auto;width:min(300px,calc((100vw - 100%) / 2 - 24px))}
}

/* Kompakt (Tablet, Handy): Bild mittig, Text darunter, Anzeigen im Bild */
@media (max-width:1199px){
  .analyse__buehne{--kh:min(calc(100svh - 250px),760px);--kw:min(calc(var(--kh) * .75),calc(100vw - 32px))}
  html.js:not(.still) .analyse__karte{top:112px}
  html.js:not(.still) .analyse__takt,html.js:not(.still) .analyse__schlusssatz{left:50%;top:calc(112px + var(--kh) + 22px);width:min(560px,calc(100vw - 48px));margin-left:calc(min(560px,calc(100vw - 48px)) / -2);text-align:center}
  html.js:not(.still) .analyse__liste-karte{display:none}
  html.js:not(.still) .analyse__hinweis{display:none}
  .analyse__nr{display:inline;margin:0 10px 0 0;font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--knopf)}
  .analyse__takt h3{display:inline;font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
  .analyse__takt p{margin:10px 0 0;font:350 21px/1.3 var(--serif);color:var(--text)}
  .analyse__schlusssatz{font-size:26px}
  .a-zeilen{left:5%;right:5%;top:4%}
  .a-zeile{min-height:44px;padding:5px 12px 5px 6px;grid-template-columns:30px 1fr 14px}
  .a-daumen{width:30px;height:30px}
  .a-zeile b{font-size:14px}
  .a-karte{padding:14px 16px}
  .a-gross{font-size:22px}
  .a-karte--3d{left:6%;right:6%;top:4%}
  .a-schichten{left:6%;right:20%;top:40%}
  .a-chips{left:5%;right:5%;top:4%}
  .a-laser{left:5%;right:5%;top:4%}
  .a-laser__hinweis .a-lang{display:none}.a-laser__hinweis .a-kurz{display:inline}
  .a-hauttyp{left:6%;right:6%;top:4%}
  .a-verlauf{left:5%;right:5%;bottom:58px}
  .a-blatt{left:5%;right:5%;top:4%;bottom:52px}
  .a-blatt__titel{font-size:26px;margin:12px 0 10px}
}
@media (max-width:899px){
  html.js:not(.still) .analyse__lauf{height:900svh}
  .analyse__kopf{padding:100px 20px 0}
  .analyse__unterzeile{font-size:17px}
  .analyse__buehne{--kh:calc(100svh - 296px);--kw:calc(100vw - 32px)}
  html.js:not(.still) .analyse__fortschritt{top:82px}
  html.js:not(.still) .analyse__karte{top:96px}
  html.js:not(.still) .analyse__takt,html.js:not(.still) .analyse__schlusssatz{top:calc(96px + var(--kh) + 16px)}
  .analyse__takt p{font-size:19px}
  html.js:not(.still) .analyse__hinweis{display:none}
  .analyse__karte .schild{left:12px;bottom:12px}
  .analyse__messhinweis{right:12px;bottom:12px}
  .a-zeilen li:nth-child(n+4){display:none}
  .a-chip b{font-size:13px}
  .a-laser__pillen span{padding:7px 10px;font-size:12px}
  .a-blatt__liste li:nth-child(n+3){display:none}
  .analyse__satz p{font-size:38px}
}
@media (max-width:899px) and (max-height:700px){
  .a-merkmal{display:none}
  .a-schichten{top:30%}
  .a-zeilen li:nth-child(n+3){display:none}
  .a-blatt__bilder img{aspect-ratio:4/3}
  .a-blatt__liste li:nth-child(n+2){display:none}
  .analyse__takt p{font-size:17px}
}

/* Ohne Skript, reduzierte Bewegung */
html.ohne-js .analyse__buehne,html.still .analyse__buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1200px;margin:0 auto;padding:64px var(--rand) 110px}
html.ohne-js .analyse__karte,html.still .analyse__karte{aspect-ratio:3/4}
html.ohne-js .analyse__kamera,html.still .analyse__kamera{inset:0;width:100%;height:100%}
html.ohne-js .analyse__ui,html.still .analyse__ui,html.ohne-js .analyse__svg,html.still .analyse__svg,html.ohne-js .analyse__film,html.still .analyse__film,html.ohne-js .analyse__satz,html.still .analyse__satz,html.ohne-js .analyse__unterzeile,html.still .analyse__unterzeile{display:none}
html.ohne-js .analyse__takte,html.still .analyse__takte{display:grid;gap:22px}
html.ohne-js .analyse__nr,html.still .analyse__nr{font-size:28px;margin-bottom:6px}
html.ohne-js .analyse__takt h3,html.still .analyse__takt h3{font-size:26px}
html.ohne-js .analyse__schluss,html.still .analyse__schluss{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
html.ohne-js .analyse__liste-karte,html.still .analyse__liste-karte{position:relative}
@media (max-width:899px){
  html.ohne-js .analyse__buehne,html.still .analyse__buehne,html.ohne-js .analyse__schluss,html.still .analyse__schluss{grid-template-columns:1fr;gap:32px}
}