/* ==========================================================================
   Hair by VI – Extensions (mit HerEXTENSIONS) – Abschnitt auf der Startseite
   ========================================================================== */
.ext{background:linear-gradient(180deg,var(--paper) 0%,var(--ext-bg) 18%,var(--ext-bg) 82%,var(--paper) 100%);overflow:hidden}
/* Video-Auftakt */
.ext-hero{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/9;background:#d9d1c6 url(r/lumera-verpackung-800.jpg) center/contain no-repeat;background-image:image-set(url(r/lumera-verpackung-800.jpg) 1x,url(r/lumera-verpackung-1075.jpg) 2x);margin-bottom:clamp(48px,6vw,80px);box-shadow:0 60px 120px -60px rgba(29,26,23,.5)}
.ext-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.2s ease}
.ext-hero video.ready{opacity:1}
.ext-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--ext-veil),.92) 0%,rgba(var(--ext-veil),.55) 34%,rgba(var(--ext-veil),0) 55%);pointer-events:none}
.ext-hero .cap{position:absolute;left:clamp(24px,5vw,64px);top:50%;transform:translateY(-50%);z-index:2;max-width:42%}
.ext-hero h2{margin:18px 0 22px;font-size:clamp(2.4rem,4.6vw,4.4rem)}
.ext-badge{display:inline-block;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:99px;padding:8px 14px}
.ext-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.ext h2{margin:20px 0 26px}
.ext .lead{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:300;line-height:1.4;color:var(--ink);margin-bottom:34px;max-width:560px}
.ext-brand{font-weight:600;letter-spacing:.04em}
.ext-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.ext-tabs button{all:unset;cursor:pointer;padding:12px 4px;margin-right:22px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);position:relative;transition:color .3s}
.ext-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ext-tabs button.on{color:var(--ink)}
.ext-tabs button.on::after{transform:scaleX(1)}
.ext-tabs button:focus-visible{outline:2px solid var(--taupe);outline-offset:4px}
.ext-pane{display:none}
.ext-pane.on{display:block;animation:panel .7s var(--ease)}
.ext-pane h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.1;margin-bottom:12px}
.ext-pane h3 em{font-style:italic;color:var(--taupe-d)}
.ext-pane p{color:var(--ink-2);max-width:540px}
.ext-facts{list-style:none;display:flex;gap:34px;margin:24px 0 6px;flex-wrap:wrap}
.ext-facts b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:300;line-height:1}
.ext-facts li{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-d)}
.ext-benefits{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px 0 36px}
.ext-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.ext-benefits li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6 5.4-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.ext-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ext-cta small{font-size:.8rem;color:var(--taupe-d);max-width:260px;line-height:1.5}

/* Interaktive Tresse */
.ext-vis{position:sticky;top:110px}
.ext-stage{position:relative;aspect-ratio:1/1.02;border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#fbf8f4 0%,#ece3d6 70%);box-shadow:0 50px 100px -50px rgba(29,26,23,.45),inset 0 0 0 1px rgba(29,26,23,.06)}
.ext-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ext-tag{position:absolute;right:18px;top:18px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;background:#1d1a17;color:#f7f2ec;padding:7px 12px;border-radius:99px;opacity:0;transform:translateY(-6px);transition:.5s var(--ease)}
.ext-tag.on{opacity:1;transform:none}
.ext-label{position:absolute;left:18px;bottom:16px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#4a433c;background:rgba(251,248,244,.8);backdrop-filter:blur(6px);padding:7px 12px;border-radius:99px}
.ext-pal{margin-top:18px;background:var(--card);border-radius:16px;padding:18px 18px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.ext-pal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.ext-pal-head span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe-d)}
.ext-pal-head b{font-family:var(--serif);font-weight:400;font-size:1.2rem;text-align:right}
.ext-sws{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.ext-sws button{all:unset;cursor:pointer;aspect-ratio:1/2.4;border-radius:10px 10px 4px 4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .4s var(--ease),box-shadow .3s}
.ext-sws button:hover{transform:translateY(-4px)}
.ext-sws button.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink);transform:translateY(-4px)}
.ext-sws button:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}
.ext-fine{font-size:.74rem;color:var(--taupe-d);margin-top:12px;line-height:1.5}

/* Selected – echte Einzelstücke */
.ext-sel{margin-top:clamp(64px,8vw,110px)}
.ext-sel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.ext-sel-head h3{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin-top:14px}
.ext-sel-head h3 em{font-style:italic;color:var(--taupe-d)}
.ext-sel-head p{max-width:440px;color:var(--ink-2);font-size:.95rem}
.ext-sel-track{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.ext-pc{position:relative;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ext-pc.in{opacity:1;transform:none}
.ext-pc .im{position:relative;aspect-ratio:3/5.4;border-radius:12px;overflow:hidden;background:#f1ece4;box-shadow:inset 0 0 0 1px var(--line)}
.ext-pc img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0;transition:transform 1.4s var(--ease)}
.ext-pc:hover img{transform:scale(1.06) rotate(.6deg)}
.ext-pc .no{position:absolute;left:8px;top:8px;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(29,26,23,.78);color:var(--cream);padding:5px 9px;border-radius:99px}
.ext-pc b{font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.1}
.ext-pc small{font-size:.7rem;color:var(--ink-2);line-height:1.45;letter-spacing:.02em}
.ext-pc .lv{display:flex;align-items:center;gap:6px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-d)}
.ext-pc .lv i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* Selected · Rohhaar (Haarzwilling) */
.ext-raw{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,80px);align-items:center}
.ext-raw h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.02;margin:16px 0 18px;text-wrap:balance}
.ext-raw h3 em{font-style:italic;color:var(--taupe-d)}
.ext-raw-copy>p{color:var(--ink-2);max-width:58ch}
.ext-raw-list{list-style:none;margin:26px 0 30px;border-top:1px solid var(--line)}
.ext-raw-list li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.ext-raw-list li::before{content:"";position:absolute;left:2px;top:21px;width:14px;height:1px;background:var(--gold)}
.ext-raw-list b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--ink);margin-bottom:2px}
.ext-raw-cta{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap}
.ext-raw-cta small{font-size:.8rem;color:var(--taupe-d);max-width:300px;line-height:1.5}
/* Video 720×1280: sichtbares Fenster x 30–70 %, y 40–92 % → nur das schwingende Haar, keine Hand */
.ext-raw-video{position:relative;justify-self:center;width:min(300px,100%);aspect-ratio:288/666;border-radius:20px;overflow:hidden;background:#ebe5dc url(r/rohhaar-02-480.jpg) center/cover;background-image:image-set(url(r/rohhaar-02-480.jpg) 1x,url(r/rohhaar-02-800.jpg) 2x);box-shadow:0 50px 90px -50px rgba(29,26,23,.5)}
.ext-raw-video video{position:absolute;width:250%;height:auto;left:-75%;top:-76.9%;opacity:0;transition:opacity 1s}
.ext-raw-video video.ready{opacity:1}
.ext-raw-video figcaption{position:absolute;left:12px;bottom:12px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(29,26,23,.72);color:#f7f2ec;padding:6px 10px;border-radius:99px}
.ext-drift{margin-top:clamp(40px,5vw,64px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ext-drift .track{display:flex;gap:12px;width:max-content;animation:extDrift 70s linear infinite}
.ext-drift:hover .track{animation-play-state:paused}
.ext-drift img{height:clamp(220px,26vw,330px);width:auto;max-width:none;border-radius:12px;transition:transform .8s var(--ease)}
.ext-drift img:hover{transform:translateY(-6px)}
@keyframes extDrift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ext-drift{overflow-x:auto}.ext-drift .track{animation:none}}

/* Ablauf */
.ext-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(60px,8vw,100px);counter-reset:e}
.ext-steps li{position:relative;padding:26px 22px 24px;background:var(--card-2);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.ext-steps span{font-family:var(--serif);font-size:2.6rem;font-weight:300;color:var(--taupe);line-height:1;display:block;margin-bottom:14px}
.ext-steps b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.15;margin-bottom:8px}
.ext-steps p{font-size:.88rem;color:var(--ink-2);line-height:1.55}
.ext-steps li:not(:last-child)::after{content:"";position:absolute;top:44px;right:-12px;width:8px;height:8px;border-top:1px solid var(--taupe);border-right:1px solid var(--taupe);transform:rotate(45deg)}

@media (max-width:1080px){.ext-sel-track{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){
  .ext-raw{grid-template-columns:1fr}
  .ext-raw-video{order:-1;width:min(240px,70%)}
  .ext-hero{aspect-ratio:4/5;border-radius:18px;background-size:cover}
  .ext-hero::after{background:linear-gradient(180deg,rgba(var(--ext-veil),0) 45%,rgba(var(--ext-veil),.94) 82%)}
  .ext-hero .cap{top:auto;bottom:22px;transform:none;max-width:none;right:20px;left:20px}
  .ext-hero h2{font-size:clamp(2.1rem,8vw,2.8rem);margin:12px 0 14px}
  .ext-sel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .ext-sel-track::-webkit-scrollbar{display:none}
  .ext-pc{flex:0 0 42%;scroll-snap-align:start}
  .ext-grid{grid-template-columns:1fr}
  .ext-vis{position:static;order:-1}
  .ext-sws{grid-template-columns:repeat(8,1fr)}
  .ext-steps{grid-template-columns:1fr 1fr}
  .ext-steps li::after{display:none}
  .ext-benefits{grid-template-columns:1fr}
}
@media (max-width:480px){
  .ext-steps{grid-template-columns:1fr}
  .ext-sws{grid-template-columns:repeat(11,1fr);gap:4px}
  .ext-sws button{aspect-ratio:1/2;border-radius:8px 8px 3px 3px}
  .ext-tabs button{margin-right:12px;font-size:.68rem;letter-spacing:.14em}
  .ext-facts{gap:22px}.ext-facts b{font-size:1.5rem}
  .ext-badge{display:none}
}


/* Bio-Texte: Kurzfassung + aufklappbare ausführliche Fassung */
.team-kurz{max-width:540px;margin-bottom:24px}
.team-kurz p{color:var(--ink-2);margin:0 0 14px}
.bio-mehr{max-width:560px;margin:0 0 30px}
.bio-mehr summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding:6px 0;border-bottom:1px solid currentColor}
.bio-mehr summary::-webkit-details-marker{display:none}
.bio-mehr summary:focus-visible{outline:2px solid var(--taupe-d);outline-offset:4px}
.bio-mehr summary i{position:relative;width:11px;height:11px}
.bio-mehr summary i::before,.bio-mehr summary i::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:currentColor;transition:transform .35s ease}
.bio-mehr summary i::after{transform:rotate(90deg)}
.bio-mehr[open] summary i::after{transform:rotate(0deg)}
.bio-mehr summary .auf,.bio-mehr[open] summary .zu{display:none}
.bio-mehr[open] summary .auf{display:inline}
.bio-mehr-text{padding-top:22px}
.bio-mehr-text h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.65rem);line-height:1.2;margin:26px 0 10px;color:var(--ink)}
.bio-mehr-text p{color:var(--ink-2);margin:0 0 14px}
.bio-mehr-text a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bio-mehr-text .gruss{font-family:var(--serif);font-size:1.45rem;color:var(--ink);margin-top:20px}
.about .grid:has(.bio-mehr[open]){align-items:start}
@media (prefers-reduced-motion:reduce){.bio-mehr summary i::before,.bio-mehr summary i::after{transition:none}}