/* ==========================================================================
   SCHMINKRAUM · p-about.css — Über mich · Referenzen · Kontakt · 404
   Loaded only on these pages (tools/build.py PAGE_CSS), after styles.css + fx.css.
   Signature: the milestone line draws itself while you scroll (.ms, scroll-driven CSS).
   Without support / with reduced motion the line is simply drawn and every dot is lit.
   ========================================================================== */

/* ---- shared: tap targets >= 44px on these pages ---- */
.crumbs a{padding-block:.75rem;margin-block:-.75rem}
.jump a{display:inline-flex;align-items:center;min-height:44px}
.tlink{min-height:44px}

/* ==== Über mich ==== */

/* Mein Weg: short H2, her own line as the lead below it */
.weg-h{max-width:21ch}
.weg-lead{max-width:36ch;margin:clamp(1rem,2vw,1.4rem) 0 clamp(2.6rem,5vw,4.5rem)}
.weg .split{align-items:start}
.weg .photo{max-width:none}
.weg .copy p+p{margin-top:1rem}
.weg .copy .lead{margin-bottom:1.4rem}

/* Stationen: sticky heading, timeline on the right (the 25/10 numbers live on the home page) */
.ms-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.ms-head{position:sticky;top:clamp(6rem,14vh,8rem)}

.ms{--x:.55rem;--pad:clamp(2.4rem,4vw,3.4rem);--fs:clamp(1.65rem,1.2rem + 1.5vw,2.6rem);
  list-style:none;position:relative;padding-left:var(--pad)}
/* track (hairline) + the gold line that draws itself */
.ms::before,.ms::after{content:"";position:absolute;left:var(--x);top:calc(var(--fs) * .58);bottom:0;width:1px;pointer-events:none}
.ms::before{background:var(--line-2)}
.ms::after{background:linear-gradient(var(--gold) 82%,transparent);transform-origin:top}
.ms>li{position:relative;padding-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.ms>li:last-child{padding-bottom:0}
.ms>li::before{content:"";position:absolute;z-index:1;width:11px;height:11px;border-radius:50%;
  left:calc(var(--x) - var(--pad) - 5px);top:calc(var(--fs) * .58 - 5.5px);
  background:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 0 5px var(--bg)}
.ms-y{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--fs);line-height:1.16;color:var(--gold-2);font-variation-settings:"opsz" 9}
.ms p{margin-top:.55rem;max-width:46ch;color:var(--ink-2);font-size:clamp(1.02rem,.98rem + .25vw,1.14rem)}
.ms>li:last-child .ms-y{color:var(--ink)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* the pen sits at 75 % of the viewport height: the line is complete after ~2/3 of the list has passed, then holds */
    .ms{view-timeline-name:--ms}
    .ms::after{animation:ms-draw linear both;animation-timeline:--ms;animation-range:cover 25vh cover calc(100% - 75vh)}
    .ms>li{view-timeline-name:--ms-i}
    .ms>li::before{animation:ms-dot linear both;animation-timeline:--ms-i;animation-range:cover calc(25vh - .4rem) cover calc(25vh + 1.6rem)}
  }
}
@keyframes ms-draw{from{transform:scaleY(0)}}
@keyframes ms-dot{from{background:var(--bg);scale:.62}}

/* Heute: studio photo with Martina at the mirror laid over its corner */
.heute h2{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.7rem);hyphens:manual;-webkit-hyphens:manual}
.heute .copy p+p{margin-top:1rem}
.heute .note{margin-top:1.2rem}
.stack{position:relative;width:100%;max-width:600px;justify-self:end;padding-bottom:clamp(3.5rem,10vw,7rem)}
.stack .s1{width:86%}
.stack .s2{position:absolute;right:0;bottom:0;z-index:1;width:52%}
.stack .s2 .ph{border:clamp(6px,.8vw,10px) solid var(--bg)}

/* Mein Motto */
.motto{position:relative;isolation:isolate;overflow:hidden}
.motto::before{content:"";position:absolute;z-index:-1;inset:-35% 10%;background:radial-gradient(closest-side,rgba(176,138,78,.17),transparent 70%)}
.motto .eyebrow{text-align:center;margin-bottom:0}
.motto blockquote{max-width:25ch}
.motto blockquote::before{content:"";display:block;width:1px;height:clamp(3rem,7vw,5.5rem);margin:clamp(1.2rem,2.5vw,1.8rem) auto clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(transparent,var(--gold-soft))}

/* Herzenssache Hochzeit: photo left */
.herz .photo{max-width:480px}
.herz .copy p+p{margin-top:1rem}

/* Backstage */
.bs-more{margin-top:clamp(2rem,4vw,3rem)}

/* Presse: hairline rows on a light section */
.presse{align-items:start}
.presslist{list-style:none;border-top:1px solid var(--line-2)}
.presslist li{border-bottom:1px solid var(--line-2)}
.presslist li>*{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:44px;padding:1.25rem 0;
  font-family:var(--display);font-size:clamp(1.3rem,1rem + 1vw,1.8rem);line-height:1.2;font-variation-settings:"opsz" 9}
.presslist small{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.presslist svg{width:1.05rem;height:1.05rem;transition:transform .35s var(--ease)}
.presslist a{transition:color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .presslist a:hover{color:var(--gold-2)}
  .presslist a:hover svg{transform:translate(3px,-3px)}
}

/* ==== Referenzen ==== */
.ref-intro{display:grid;gap:.9rem;max-width:60ch}
.ref-intro p:not(.lead){color:var(--ink-2)}
.ref-moments .gallery{margin-bottom:clamp(2rem,4vw,3rem)}
.refgroup{scroll-margin-top:5rem}
.refgroup h2 small{font-variation-settings:normal}
@media (min-width:1081px){.refgroup h2{position:sticky;top:6.5rem;align-self:start}}
/* long groups: first 20 names visible, the rest behind "Alle anzeigen" (summary = flex, text in one span) */
.ref-more{margin-top:.9rem}
.ref-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.75rem;min-height:44px;
  font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);transition:color .3s var(--ease)}
.ref-more summary::-webkit-details-marker{display:none}
.ref-more summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.ref-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ref-more .names{margin-top:.5rem}
@media (hover:hover) and (pointer:fine){.ref-more summary:hover{color:var(--ink)}}

/* ==== Kontakt ==== */
.k-direct,.k-form{align-items:start}
.k-direct .reach{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
@media (hover:hover) and (pointer:fine){.paper .reach a:hover{background:var(--porcelain)}}
.k-form .lead{margin:1.2rem 0 2.2rem}
@media (min-width:1081px){.k-form .photo{position:sticky;top:7rem}}

/* ==== 404 ==== */
.nf{min-height:78svh;display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden}
.nf>.wrap{width:100%}
.nf .actions{margin-top:2rem}
.nf::after{content:"404" / "";position:absolute;z-index:-1;right:var(--gut,1rem);bottom:-.2em;padding-right:.08em;pointer-events:none;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(9rem,5rem + 22vw,26rem);line-height:1;color:var(--gold);opacity:.11;font-variation-settings:"opsz" 9}

/* ==== phone / tablet ==== */
@media (max-width:1080px){
  .ms-grid{grid-template-columns:1fr}
  .ms-head{position:static}
  .stack{justify-self:start}
  .herz .photo{order:-1}
}
@media (max-width:760px){
  .ms{--pad:2.2rem}
  .stack .s1{width:90%}
  .stack .s2{width:58%}
}
@media print{
  .ms::after,.ms>li::before{animation:none!important}
}