/* ---------- Tokens: Adelinas drei Farben — Altrosa, Puder, Elfenbein; Aubergine als Schrift, Messing nur als Haarlinie ---------- */
:root{
  --rose:#c9958d;
  --rose-deep:#b98479;
  --powder:#efd9d3;
  --ivory:#f6f1ea;
  --gold:#b8925a;
  --gold-soft:color-mix(in srgb, var(--gold) 55%, transparent);
  --gold-faint:color-mix(in srgb, var(--gold) 28%, transparent);
  --aub:#2a1a1f;
  --ink:#26161a;
  --muted:color-mix(in oklch, var(--ink), var(--rose) 30%);
  --bg:var(--ivory);
  --display:"Playfair Display",Georgia,serif;
  --caps:"Italiana",serif;
  --sans:"Josefin Sans","Futura","Segoe UI",sans-serif;
  --sig:"Mrs Saint Delafield",cursive;
  --bodoni:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.25rem,.75rem + 3vw,4.5rem);
  --green:#1f4d46;               /* velvet stool: the palette's complementary to Altrosa */
  --hdr-h:104px;                 /* tall bar: the logo is the eye-catcher (Alois, 2026-09-07) */
  /* logo colour x bar colour, switchable in the preview panel via data-logo on <html>; default Aubergine on Altrosa */
  --bar-bg:var(--powder);--bar-ink:var(--aub);--logo:var(--aub);--bar-line:var(--gold-faint);   /* Adelina 8.9.: Aubergine auf Puder */
}
:root[data-logo="aub-rose"]{--bar-bg:var(--rose);--bar-ink:var(--aub);--logo:var(--aub);--bar-line:color-mix(in srgb,var(--aub) 18%,transparent)}
:root[data-logo="green-rose"]{--bar-bg:var(--rose);--bar-ink:var(--aub);--logo:var(--green);--bar-line:color-mix(in srgb,var(--aub) 18%,transparent)}
:root[data-logo="ivory-rose"]{--bar-bg:var(--rose);--bar-ink:var(--aub);--logo:var(--ivory);--bar-line:color-mix(in srgb,var(--aub) 18%,transparent)}
:root[data-logo="rose-ivory"]{--bar-bg:var(--ivory);--bar-ink:var(--aub);--logo:var(--rose);--bar-line:var(--gold-faint)}
:root[data-logo="aub-ivory"]{--bar-bg:var(--ivory);--bar-ink:var(--aub);--logo:var(--aub);--bar-line:var(--gold-faint)}
:root[data-logo="green-ivory"]{--bar-bg:var(--ivory);--bar-ink:var(--aub);--logo:var(--green);--bar-line:var(--gold-faint)}
:root[data-logo="ivory-aub"]{--bar-bg:var(--aub);--bar-ink:var(--ivory);--logo:var(--ivory);--bar-line:color-mix(in srgb,var(--ivory) 22%,transparent)}
:root[data-logo="rose-aub"]{--bar-bg:var(--aub);--bar-ink:var(--ivory);--logo:var(--rose);--bar-line:color-mix(in srgb,var(--ivory) 22%,transparent)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--hdr-h);background:var(--bg);color:var(--ink);font:300 1.02rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--aub);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gutter),1400px);margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--aub);display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--gold);flex:none}
.eyebrow.c{justify-content:center}
.eyebrow.c::after{content:"";width:2.2rem;height:1px;background:var(--gold);flex:none}
.ital{font-style:italic}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:0 1.7rem;border:1px solid var(--aub);color:var(--aub);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;transition:all .4s var(--ease);position:relative;text-align:center}
.btn:hover{background:var(--aub);color:var(--ivory)}
.btn.fill{background:var(--aub);color:var(--ivory)}
.btn.fill:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:var(--ivory)}
.ic{width:1.2em;height:1.2em;flex:none}
section{padding-block:clamp(4rem,3rem + 5vw,8rem);position:relative;scroll-margin-top:calc(var(--hdr-h) + .5rem)}
.powder{background:var(--powder)}
.rosebg{background:var(--rose)}
:root[data-bg="powder"]{--bg:var(--powder)}
:root[data-bg="powder"] .powder{background:var(--ivory)}
:root[data-bg="powder"] .dept-hero{background:var(--ivory)}
:root[data-bg="white"]{--bg:#fcfaf7}
:root[data-bg="blush"]{--bg:#f7ebe6}
:root[data-bg="blush"] .powder{background:#efdcd6}
.rosebg .muted,.rosebg p{color:color-mix(in oklch,var(--aub),var(--rose) 22%)}
.rosebg h2,.rosebg h3,.rosebg .eyebrow,.rosebg q,.rosebg .pull,.rosebg b{color:var(--aub)}

/* ---------- header: fixed, solid bar (Nacht-Aufbau), centred Editorial logo, split nav ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:.45rem var(--gutter);padding-top:calc(.45rem + env(safe-area-inset-top));min-height:var(--hdr-h);
  background:var(--bar-bg);color:var(--bar-ink);border-bottom:1px solid var(--bar-line);box-shadow:0 12px 30px -20px rgba(42,26,31,.45);
  transition:background .5s var(--ease),color .5s var(--ease)}
.nav{display:flex;gap:clamp(.6rem,1.8vw,1.8rem);align-items:center}
.nav.r{justify-content:flex-end}
.nav a{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.ico{min-width:44px;justify-content:center;position:relative}
.nav a.ico .ic{width:21px;height:21px}
.nav a.ico::after{display:none}
.logo{display:block;min-height:44px;color:var(--logo);transition:color .5s var(--ease)}
.lg-ed{display:grid;justify-items:center;gap:.32rem;line-height:1;width:max-content;margin-inline:auto}
.lg-ed-n{font-family:var(--bodoni);font-weight:600;font-size:2.15rem;letter-spacing:.22em;text-transform:uppercase;padding-left:.22em}
.lg-ed-r{display:flex;align-items:center;gap:.6rem;width:100%}
.lg-ed-r i{flex:1;height:1px;background:currentColor;opacity:.8}
.lg-ed-r svg{width:1.05rem;height:1.26rem;display:block}
.lg-ed-s{font-family:var(--sans);font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;font-weight:400;padding-left:.36em}
.burger{display:none;min-width:44px;min-height:44px;place-items:center}
.hdr .wa{display:none;min-width:44px;min-height:44px;place-items:center}
@media (max-width:1400px){.nav a{font-size:.7rem;letter-spacing:.13em}.nav{gap:clamp(.5rem,1.2vw,1.1rem)}.lg-ed-n{font-size:1.9rem}}
@media (max-width:1200px){:root{--hdr-h:88px}.nav{display:none}.hdr{grid-template-columns:44px 1fr 44px}.burger,.hdr .wa{display:grid}.lg-ed-n{font-size:1.6rem}.lg-ed-s{font-size:.56rem}.lg-ed-r svg{width:.9rem;height:1.08rem}}
@media (max-width:420px){.lg-ed-n{font-size:1.32rem}.lg-ed-s{font-size:.5rem;letter-spacing:.28em}}

/* ---------- mobile menu: full screen, Puder, big anchors, contact row ---------- */
.mnav{position:fixed;inset:0;z-index:60;background:var(--powder);color:var(--aub);display:none;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  padding:calc(4.5rem + env(safe-area-inset-top)) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));height:100vh;height:100dvh}
.mnav.open{display:flex}
.mnav a.m{font-family:var(--display);font-size:clamp(1.6rem,5.5vw,2rem);min-height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gold-soft)}
.mnav a.m small{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mnav .close{position:absolute;top:calc(.9rem + env(safe-area-inset-top));right:var(--gutter);min-width:44px;min-height:44px;display:grid;place-items:center}
.mnav .mlogo{position:absolute;top:calc(1rem + env(safe-area-inset-top));left:var(--gutter);color:var(--aub)}  /* menu sheet is always powder -> aubergine logo (rose-deep was 2.6:1) */
.mnav .mlogo .lg-ed-n{font-size:1.1rem}.mnav .mlogo .lg-ed-s{font-size:.45rem}.mnav .mlogo .lg-ed-r svg{width:.65rem;height:.78rem}
.mnav .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem}
.mnav .tools a{display:grid;justify-items:center;gap:.25rem;min-height:64px;border:1px solid var(--gold-soft);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:.6rem .2rem;text-align:center}
.mnav .tools a .ic{width:1.3rem;height:1.3rem}
.mnav .tools a b{font-weight:400;color:var(--muted)}
.mnav .contact{margin-top:auto;padding-top:1.5rem;display:grid;gap:.6rem}
.mnav .contact .btn{width:100%}
.mnav .hours{font-size:.9rem;color:var(--muted);text-align:center;margin-top:.4rem}

/* ---------- picture frame ---------- */
.frame{position:relative;padding:12px;border:9px solid var(--rose);background:var(--powder);box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),inset -1px -1px 0 rgba(42,26,31,.12),0 14px 30px -20px rgba(42,26,31,.4)}
.frame::after{content:"";position:absolute;inset:3px;border:1px solid var(--rose-deep);pointer-events:none}
:root[data-frame="hair-rose"] .frame,:root[data-frame="hair-rose"] .spot .ph{border:1px solid var(--rose);background:transparent;box-shadow:none;padding:12px}
:root[data-frame="hair-rose"] .frame::after,:root[data-frame="hair-rose"] .spot .ph::after{inset:5px;border:1px solid color-mix(in srgb,var(--rose) 60%,transparent)}
:root[data-frame="hair-gold"] .frame,:root[data-frame="hair-gold"] .spot .ph{border:1px solid var(--gold-soft);background:transparent;box-shadow:none;padding:12px}
:root[data-frame="hair-gold"] .frame::after,:root[data-frame="hair-gold"] .spot .ph::after{inset:5px;border:1px solid var(--gold-faint)}
.frame img{width:100%;height:100%;object-fit:cover}

/* ---------- product card (vitrine row + shop grid) ---------- */
.spot{flex:0 0 clamp(230px,26vw,330px);scroll-snap-align:start;display:block;position:relative}
.spot .ph{position:relative;aspect-ratio:4/5;border:7px solid var(--rose);padding:.6rem;background:var(--powder);box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),inset -1px -1px 0 rgba(42,26,31,.12);transition:transform .6s var(--ease),border-color .5s}
.spot .ph::after{content:"";position:absolute;inset:3px;border:1px solid var(--rose-deep);pointer-events:none}
.spot:hover .ph{transform:translateY(-6px);border-color:var(--gold)}
.spot img{width:100%;height:100%;object-fit:cover}
.spot .m{padding:1rem .2rem 0;display:grid;gap:.15rem}
.spot .b{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--aub)}
.spot .t{font-family:var(--display);font-style:italic;font-size:1.2rem}
.spot .p{font-family:var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}

/* footer: follows the bar colours */
footer{background:var(--bar-bg);color:var(--bar-ink);padding:clamp(3rem,5vw,5rem) 0 calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--bar-line);transition:background .5s var(--ease)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem;align-items:start}
footer .logo .lg-ed{margin:0}
footer .lg-ed-n{font-size:2.6rem}footer .lg-ed-s{font-size:.78rem}footer .lg-ed-r svg{width:1.3rem;height:1.56rem}
footer h4{margin:0 0 .9rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--bar-ink);opacity:.75}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:inline-flex;min-height:38px;align-items:center;opacity:.8}
footer li a:hover{opacity:1}
.imprint{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--bar-line);display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;font-size:.85rem;opacity:.9}
.imprint b{font-weight:400;font-family:var(--display);font-size:1.05rem}
.imprint .todo{color:var(--rose-deep);font-style:italic}
:root[data-logo="rose"] .imprint .todo{color:var(--rose-deep)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--bar-line);font-size:.8rem;opacity:.85}
.fbot .social{display:flex}
.fbot .social a{min-width:44px;min-height:44px;display:grid;place-items:center}

@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.imprint{grid-template-columns:1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- picture-frame variants (preview panel) ---------- */
:root[data-frame="hair-aub"] .frame,:root[data-frame="hair-aub"] .spot .ph{border:1px solid var(--aub);background:transparent;box-shadow:none;padding:12px}
:root[data-frame="hair-aub"] .frame::after,:root[data-frame="hair-aub"] .spot .ph::after{border-color:color-mix(in srgb,var(--aub) 45%,transparent)}
:root[data-frame="hair-green"] .frame,:root[data-frame="hair-green"] .spot .ph{border:1px solid var(--green);background:transparent;box-shadow:none;padding:12px}
:root[data-frame="hair-green"] .frame::after,:root[data-frame="hair-green"] .spot .ph::after{border-color:color-mix(in srgb,var(--green) 50%,transparent)}
:root[data-frame="mat-ivory"] .frame,:root[data-frame="mat-ivory"] .spot .ph{border:1px solid var(--gold-soft);background:var(--ivory);padding:20px;box-shadow:none}
:root[data-frame="mat-ivory"] .frame::after,:root[data-frame="mat-ivory"] .spot .ph::after{inset:9px;border-color:var(--gold-soft)}
:root[data-frame="gild"] .frame,:root[data-frame="gild"] .spot .ph{border:0;padding:14px;background:linear-gradient(135deg,#efdcb2 0%,#b8925a 38%,#8f6b3a 52%,#d9bc86 70%,#b8925a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(42,26,31,.35),0 30px 60px -30px rgba(42,26,31,.55)}
:root[data-frame="gild"] .frame::after,:root[data-frame="gild"] .spot .ph::after{inset:5px;border:3px double rgba(42,26,31,.55)}
:root[data-frame="velvet"] .frame,:root[data-frame="velvet"] .spot .ph{border:1px solid var(--gold);background:var(--aub);padding:14px;box-shadow:none}
:root[data-frame="velvet"] .frame::after,:root[data-frame="velvet"] .spot .ph::after{inset:7px;border-color:var(--gold-soft)}
:root[data-frame="none"] .frame,:root[data-frame="none"] .spot .ph{border:0;padding:0;background:transparent;box-shadow:none}
:root[data-frame="none"] .frame::after,:root[data-frame="none"] .spot .ph::after{display:none}
:root[data-frame="none"] .hero .frame{box-shadow:0 30px 60px -30px rgba(42,26,31,.45)}
:root[data-frame="gild"] .duo .lbl,:root[data-frame="velvet"] .duo .lbl,:root[data-frame="mat-ivory"] .duo .lbl{inset:auto 14px 14px 14px}
:root[data-frame="mat-ivory"] .duo .lbl{inset:auto 20px 20px 20px}

/* ---------- Vergleichs-Panel (nur Vorschau): Logo-Farbe, Porträt, Rahmen ---------- */
.cmp{position:fixed;left:calc(.8rem + env(safe-area-inset-left));bottom:calc(.8rem + env(safe-area-inset-bottom));z-index:70;font-family:var(--sans);color:var(--aub);max-width:min(92vw,320px)}
.cmp-t{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;background:var(--aub);color:var(--ivory);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 10px 30px -12px rgba(42,26,31,.6)}
.cmp-t .ic{width:1.1rem;height:1.1rem}
.cmp-b{margin-top:.5rem;background:var(--ivory);border:1px solid var(--gold-soft);padding:1rem;display:grid;gap:.9rem;box-shadow:0 20px 40px -20px rgba(42,26,31,.5)}
.cmp-b[hidden]{display:none}
.cmp-b .lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--aub)}
.seg button{min-height:40px;font-size:.78rem;letter-spacing:.08em;padding:0 .8rem}
.seg.list{grid-template-columns:1fr}
.seg.list button{display:flex;align-items:center;gap:.6rem;min-height:36px;padding:0 .6rem;text-align:left;border-top:1px solid color-mix(in srgb,var(--aub) 15%,transparent)}
.seg.list button:first-child{border-top:0}
.seg.list button i{display:inline-grid;place-items:center;width:1.7rem;height:1.25rem;font:600 .72rem var(--bodoni);border:1px solid color-mix(in srgb,var(--aub) 25%,transparent);flex:none}
.seg.list button small{margin-left:auto;font-size:.66rem;opacity:.7;font-variant-numeric:tabular-nums}
.cmp-b{max-height:min(70vh,560px);overflow:auto}

.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.stagger>*{opacity:1;transform:none}
  .ticker .track{animation:none}
}

/* ---------- cart badge, shared helpers ---------- */
.nav a.ico b{position:absolute;top:3px;right:-1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--bar-ink);color:var(--bar-bg);font:500 .62rem/1 var(--sans);letter-spacing:0;display:grid;place-items:center;box-sizing:border-box}
.nav a.ico b[hidden]{display:none}
.ph-empty{position:absolute;inset:.8rem;display:grid;place-content:center;justify-items:center;gap:.6rem;background:var(--powder);color:var(--rose-deep);text-align:center}
.ph-empty .ic{width:2.6rem;height:2.6rem;opacity:.75}
.ph-empty span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.spot .tag{position:absolute;top:1.2rem;left:1.2rem;background:var(--aub);color:var(--ivory);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .55rem;z-index:1}
.spot .ph{overflow:hidden}
.demo-note{background:var(--aub);color:var(--ivory);font-size:.78rem;letter-spacing:.06em;text-align:center;padding:.5rem var(--gutter)}
.demo-note b{font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-right:.6rem}

@media (max-width:700px){.demo-note{font-size:.7rem;letter-spacing:.03em;padding:.45rem var(--gutter)}.demo-note b{display:block;margin-bottom:.1rem}}

/* Fusszeile „Neu im Fenster“: statt eines Satzes die drei Kanaele als Symbole
   (Adelina 21.09.). Runde Flaechen, Beschriftung darunter, Hitbox >= 44 px. */
.nl .sozial{display:flex;gap:1rem;flex-wrap:wrap}
.nl .sozial a{display:grid;justify-items:center;gap:.4rem;min-width:44px;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.85;transition:opacity .3s var(--ease)}
.nl .sozial a:hover{opacity:1}
.nl .sozial .ic{width:1.5rem;height:1.5rem;box-sizing:content-box;padding:.75rem;border-radius:50%;
  border:1px solid var(--bar-ink);transition:background .3s var(--ease),color .3s var(--ease)}
.nl .sozial a:hover .ic{background:var(--bar-ink);color:var(--bar-bg)}

/* ---------- wall panelling ornaments ---------- */
.panels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.panels i{position:absolute;border:1px solid var(--gold-faint);outline:1px solid var(--gold-faint);outline-offset:8px}

/* ---------- hero (Boudoir): framed photo + Clean intro ---------- */
.hero{position:relative;padding:clamp(2.5rem,5vw,5rem) 0 clamp(3rem,6vw,6rem);overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.hero .lamp{position:absolute;right:-10%;top:-20%;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,224,.7),rgba(255,240,224,0));z-index:0;pointer-events:none}
.hero .frame{aspect-ratio:5/6;transform:rotate(-1.2deg);transform-origin:center;box-shadow:0 30px 60px -30px rgba(42,26,31,.45)}
.hero .frame img{transform:rotate(1.2deg) scale(1.04);object-position:46% 50%}
.hero-pic .hp-mirror{display:none}
:root[data-hero="mirror"] .hero-pic .hp-chair{display:none}
:root[data-hero="mirror"] .hero-pic .hp-mirror{display:block;object-position:50% 40%}
.hero h1{font-size:clamp(2.5rem,1.3rem + 4.4vw,5.6rem);line-height:1.02;margin:1.2rem 0 1.4rem}
.hero h1 em{font-style:italic;font-weight:400;color:var(--aub)}
.hero p.lead{font-size:1.12rem;max-width:46ch;color:var(--muted)}
.facts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem;font-size:.9rem}
.facts li{display:flex;gap:.6rem;align-items:flex-start;color:var(--aub)}
.facts li .ic{color:var(--gold);margin-top:.15rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.stagger>*{opacity:0;transform:translateY(16px);animation:up 1s var(--ease) forwards}
.stagger>*:nth-child(2){animation-delay:.12s}.stagger>*:nth-child(3){animation-delay:.24s}.stagger>*:nth-child(4){animation-delay:.36s}.stagger>*:nth-child(5){animation-delay:.48s}
@keyframes up{to{opacity:1;transform:none}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero .frame{aspect-ratio:4/5;max-width:520px;margin-inline:auto}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

/* ---------- ticker ---------- */
.ticker{background:var(--rose);color:var(--aub);overflow:hidden;padding:1rem 0;border-block:1px solid var(--gold-faint)}
/* brand wordmarks approximated with the site fonts (the original logos need the brands' permission) */
.ticker .b-lv{font-family:var(--sans);font-weight:600;letter-spacing:.3em}
.ticker .b-prada,.ticker .b-dior{font-family:var(--bodoni);font-weight:400;letter-spacing:.3em}
.ticker .b-chanel,.ticker .b-burberry,.ticker .b-mcm{font-family:var(--sans);font-weight:600;letter-spacing:.16em}
.ticker .b-tomford{font-family:var(--bodoni);font-weight:600;letter-spacing:.34em}
.ticker .b-loub,.ticker .b-dg{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.5rem}
.ticker .b-gucci{font-family:var(--display);font-weight:700;letter-spacing:.22em}
.ticker .b-missoni{font-family:var(--sans);font-weight:300;letter-spacing:.36em}
.ticker .track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker span{font-family:var(--caps);font-size:1.35rem;letter-spacing:.22em;text-transform:uppercase;padding:0 1.6rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1.6rem}
.ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--aub);opacity:.5}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec-h{text-align:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-h h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.8rem);line-height:1.08;margin-top:1rem}
.sec-h p{max-width:56ch;margin:1rem auto 0;color:var(--muted)}

/* Schaufenster: horizontale Vitrinen-Reihe (Aufbau aus Nacht) */
.row{display:flex;gap:clamp(1rem,2vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1.4rem;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;-webkit-overflow-scrolling:touch}
.row::-webkit-scrollbar{height:6px}.row::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px}.row::-webkit-scrollbar-track{background:transparent}
.row-hint{text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:center;gap:.5rem;align-items:center}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,2rem)}
.duo a{display:block;position:relative;color:var(--ivory)}
.duo .frame{aspect-ratio:4/5}
.duo .lbl{position:absolute;inset:auto 0 0 0;padding:2rem;display:flex;justify-content:space-between;align-items:end;background:linear-gradient(transparent,rgba(42,26,31,.72))}
.duo .lbl h3{font-size:clamp(2.2rem,1.2rem + 3vw,4.4rem);font-style:italic;line-height:1;color:var(--ivory)}
.duo .lbl span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.duo .lbl .ic{transition:transform .5s var(--ease)}
.duo a:hover .lbl .ic{transform:translateX(6px)}
@media (max-width:640px){.duo{grid-template-columns:1fr}.duo .lbl{padding:1.2rem}}

/* Die Kuratorin (Altrosa) */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.rosebg .frame{border-color:color-mix(in srgb,var(--ivory) 75%,transparent)}
.rosebg .frame::after{border-color:color-mix(in srgb,var(--ivory) 45%,transparent)}
.about .frame{aspect-ratio:4/5}
.about .lord{margin:1rem 0 0}
.about .lord .frame{aspect-ratio:4/3}
.about .lord figcaption{margin-top:.5rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aub);text-align:center}
.portrait img.pt-duo{display:none}
:root[data-portrait="duo"] .portrait img.pt-color{display:none}
:root[data-portrait="duo"] .portrait img.pt-duo{display:block}
.about h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.8rem);line-height:1.08;margin:1rem 0 1.4rem}
.about q{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,1rem + 1.2vw,2rem);line-height:1.3;display:block;quotes:"„" "“";margin-bottom:1.4rem}
.about q::before{content:open-quote}.about q::after{content:close-quote}
.about .triad{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;margin-bottom:1rem}
.about p.t{font-size:1.06rem;max-width:54ch}
.about p.t+p.t{margin-top:1rem}
.tl{list-style:none;margin:1.6rem 0 0;padding:0;border-left:1px solid color-mix(in srgb,var(--aub) 35%,transparent)}
.tl li{position:relative;padding:0 0 1.1rem 1.6rem}
.tl li::before{content:"";position:absolute;left:-4px;top:.5rem;width:7px;height:7px;border-radius:50%;background:var(--aub)}
.tl .when{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aub)}
.tl b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:400;margin:.15rem 0}
.tl .d{font-size:.95rem}
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem);margin-top:clamp(2.5rem,4vw,4rem);padding-top:clamp(2rem,3vw,3rem);border-top:1px solid color-mix(in srgb,var(--aub) 25%,transparent)}
.story h3{font-size:1.55rem;margin-bottom:.9rem}
.story p+p{margin-top:.9rem}
.story p{max-width:56ch}
.story .pull{margin-top:1.6rem;font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,1rem + 1.4vw,2.3rem);line-height:1.25}
.sig{font-family:var(--sig);font-size:3.4rem;line-height:1;color:var(--aub);margin-top:1rem}
@media (max-width:860px){.about,.story{grid-template-columns:1fr}.about .frame{max-width:460px}}

/* Qualität */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.promise div{border-top:1px solid var(--gold);padding-top:1.1rem}
.promise .n{font-family:var(--display);font-style:italic;font-size:2rem;color:var(--gold);line-height:1}
.promise h3{font-size:1.5rem;margin:.5rem 0 .4rem}
.promise p{color:var(--muted)}
.qword{max-width:64ch;margin:0 auto clamp(2rem,4vw,3.5rem);text-align:center;font-family:var(--display);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.45;color:var(--ink)}
.qword cite{display:block;margin-top:.7rem;font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* Private Shopping (USP) */
.pshop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.pshop .frame{aspect-ratio:4/5}
.pshop h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.08;margin:.8rem 0 1.2rem}
.pshop p{color:var(--muted);max-width:48ch}
.pshop p+p{margin-top:.9rem}
.pshop ul{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem}
.pshop li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.pshop li .ic{width:1.5rem;height:1.5rem;color:var(--gold);margin-top:.1rem}
.pshop li b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem}
.pshop li span{font-size:.95rem;color:var(--muted)}
.pshop .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
@media (max-width:860px){.pshop{grid-template-columns:1fr}.pshop .frame{max-width:460px}}

/* Nachhaltigkeit */
.manifest .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem);align-items:start}
.manifest h2{font-size:clamp(2.2rem,1.2rem + 3vw,4.2rem);line-height:1.05;margin:.8rem 0 1.2rem}
.manifest h2.q{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);font-style:italic;line-height:1.2;max-width:22ch}
.manifest .lead{color:var(--muted);max-width:48ch}
.manifest .lead+.lead{margin-top:.9rem}
.manifest ol{list-style:none;margin:0;padding:0;counter-reset:m}
.manifest li{display:grid;grid-template-columns:2.6rem 1fr;gap:.8rem;padding:1rem 0;border-top:1px solid var(--gold-soft);counter-increment:m}
.manifest li::before{content:counter(m,decimal-leading-zero);grid-row:1/3;font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--gold);line-height:1.2}
.manifest li b,.manifest li span{grid-column:2}
.manifest li b{font-weight:400;font-family:var(--display);font-size:1.15rem}
.manifest li span{color:var(--muted);font-size:.95rem}
.manifest blockquote{margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--gold);font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,1rem + 1vw,1.9rem);line-height:1.3;max-width:30ch}
.manifest blockquote cite{display:block;margin-top:.7rem;font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aub)}

/* Der Salon */
.feel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.feel h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.08;margin:.8rem 0 1.2rem}
.feel p{color:var(--muted);max-width:46ch}
.feel p+p{margin-top:.9rem}
.feel ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.feel li{display:flex;gap:.8rem;align-items:flex-start}
.feel li .ic{color:var(--gold);margin-top:.2rem}
.feel .pics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.feel .pics .frame{aspect-ratio:3/4}
.feel .pics .frame:last-child{margin-top:3rem}
.press{padding-block:clamp(2rem,4vw,4rem);border-block:1px solid var(--gold-faint)}
.press ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.press q{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.25;quotes:"„" "“"}
.press q::before{content:open-quote}.press q::after{content:close-quote}
.press small{display:block;margin-top:.6rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* Kommission (Altrosa) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem);counter-reset:s}
.step{border:1px solid color-mix(in srgb,var(--ivory) 70%,transparent);padding:2.2rem 1.8rem;position:relative;background:color-mix(in srgb,var(--ivory) 55%,transparent);counter-increment:s}
.step::after{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--ivory) 45%,transparent);pointer-events:none}
.step .n{font-family:var(--display);font-style:italic;font-size:3rem;line-height:1;color:var(--rose-deep)}
.step h3{font-size:1.5rem;margin:1rem 0 .6rem}
.steps-cta{text-align:center;margin-top:2.5rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* Besuch */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem);align-items:center}
.visit .frame{aspect-ratio:4/5}
.visit h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.08;margin:1rem 0 1.2rem}
.visit .w{color:var(--muted);max-width:52ch}
.visit .w+.w{margin-top:.8rem}
.visit dl{margin:1.8rem 0 0;display:grid;gap:1.1rem}
.visit dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aub);display:flex;align-items:center;gap:.5rem}
.visit dt .ic{color:var(--gold)}
.visit dd{margin:.25rem 0 0;font-family:var(--display);font-size:1.25rem}
.visit dd small{display:block;font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:.1rem}
.visit .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.map{margin-top:1.6rem;border:1px solid var(--gold-soft);padding:8px;color:var(--aub);--map-pin:var(--rose-deep);--map-water:#8aa9b3;background:color-mix(in srgb,var(--ivory) 55%,white);font-family:var(--sans)}
.map svg{display:block;width:100%;height:auto}.map .map-street{font-size:30px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}.map .map-place{font-size:34px;font-style:italic}.map .map-shop{font-size:40px;font-weight:500}.map .map-shop-sub{font-size:28px}.map .map-small{font-size:22px;letter-spacing:.08em}
.map .map-place,.map .map-shop{font-family:var(--display)}.map .map-shop{font-style:italic;font-weight:400;font-size:44px}
.maplink{margin-top:.7rem}.maplink a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aub);border-bottom:1px solid var(--gold)}
@media (max-width:860px){.visit{grid-template-columns:1fr}.visit .frame{max-width:460px}}

@media (max-width:860px){.promise,.manifest .grid,.feel,.press ul{grid-template-columns:1fr}}

.seg button[aria-pressed="true"]{background:var(--aub);color:var(--ivory)}
.cmp-b small{font-size:.75rem;color:var(--muted);line-height:1.4}


/* ---------- Runde 9 (29.09.): die feste Fassung ----------
   Alois: „Es soll schon eine fixe Webseite sein, nichts mehr zum Auswaehlen.“
   Das Vergleichs-Panel ist raus, und jede bisher umschaltbare Wahl steht hier als
   fester Wert: Hintergrund Zartrosa, Startbild-Ausschnitt „Blueten“, Marken-Laufband
   Elfenbein & Aubergine, Haarlinie Altrosa, Fotos ohne Rahmen, Pressestimmen stehend.
   Alle [data-...]-Umschalter sind entfernt — was hier steht, ist das Ergebnis. */
:root{--bg:#f7ebe6;--hcrop:38%}

/* ---------- Grundlage: gedaempfte Schrift wird je Flaeche gemischt ----------
   Bis hierher gab es EINEN gedaempften Ton (--muted, Aubergine mit 30 % Altrosa) fuer
   alle Flaechen. Auf Elfenbein und Zartrosa traegt der; auf der Altrosa-Flaeche nicht:
   gemessen an den angegebenen Farbwerten (nicht an der kantengeglaetteten Schrift, die
   misst systematisch zu dunkel) kommt der Lead im Kommissionsblock auf 4,11 : 1 und
   bleibt damit unter den 4,5 : 1, die Fliesstext braucht. Auf Altrosa wird der Ton
   deshalb mit weniger Rosa gemischt. Alles, was in einer Altrosa-Sektion gedaempft
   gesetzt ist, zieht automatisch mit — ein Ton je Flaeche statt Einzelfaelle.
   Geprueft nach der Umstellung: siehe CLAUDE.md, Runde 8. */
.rosebg{--muted:color-mix(in oklch,var(--aub),var(--rose) 12%)}
.rosebg p,.rosebg .muted{color:var(--muted)}
/* Die Karten im Kommissionsblock haben ihre eigene, hellere Flaeche (Elfenbein zu 55 %
   auf Altrosa). Dort darf der Ton weicher bleiben — gemessen 7,31 : 1. Ein Ton je
   Flaeche, nicht ein Ton je Seite. */
.rosebg .step p{color:color-mix(in oklch,var(--aub),var(--rose) 22%)}
/* Die grossen Schrittziffern standen in Altrosa-Dunkel auf der hellen Karte: 1,96 : 1.
   Sie sind 48 px gross, also grosse Schrift — dort gelten 3 : 1. Gemessen ergibt
   „Altrosa-Dunkel mit 35 % Aubergine“ 3,59 : 1 und bleibt dabei deutlich weicher als
   Ueberschrift (10,39 : 1) und Fliesstext (7,33 : 1), die Zierwirkung bleibt also. */
.rosebg .step .n{color:color-mix(in oklch,var(--rose-deep),var(--aub) 35%)}

/* ---------- Kopfleiste: ueber dem Startbild halb durchsichtig (Adelina 28.09.) ----------
   „Waere es moeglich, dass wir die Haelfte vom Logo durchsichtig machen fuer die
   Startseite. Ich finde, irgendwie passen die Farben nicht zusammen. Es schlaegt sich
   irgendwie dieses Puderrosa mit dem Altrosa.“
   Gedeutet als die Leiste hinter dem Logo: sie stand als volle Puderflaeche auf dem
   altrosa Foto. Jetzt ist sie ueber dem Startbild zur Haelfte deckend und
   weichgezeichnet, das Foto scheint durch; sobald gescrollt wird, wird sie wieder fast
   deckend, damit die Schrift ueber hellem Inhalt traegt. Das Logo selbst bleibt voll
   sichtbar — es ist ihr Zeichen und der Blickfang. */
.hdr{background:color-mix(in srgb,var(--bar-bg) 50%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom-color:color-mix(in srgb,var(--bar-line) 55%,transparent);box-shadow:none}
:root.gescrollt .hdr{background:color-mix(in srgb,var(--bar-bg) 92%,transparent);
  border-bottom-color:var(--bar-line);box-shadow:0 12px 30px -20px rgba(42,26,31,.45)}

/* ---------- Auftakt: Spiegelfoto ueber die ganze Breite ----------
   Gemessen 16.09. bei 1440x900: Auftakt 1425x796, Foto 1125x1600, mit object-fit:cover
   liegen nur 39 % der Bildhoehe im Fenster. Die ganze Lampe ist randlos nie zu zeigen.
   Adelina 21.09.: Ausschnitt „Blueten“; Anordnung „wie B4“ — also wie in V4 eine
   Schriftzeile und zwei Knoepfe, zentriert unten; „Buttons durchsichtig und Puder“,
   „mit Elfenbein-Schriftzug“; „Button Neu eingetroffen entfernen“.
   Elfenbein auf Puder haette nur 1,2 : 1 — die Knoepfe sind deshalb nur zu 22 % Puder,
   weichgezeichnet, und der Verlauf unten ist etwas kraeftiger als in Runde 7. */
.hero5{position:relative;padding:0;isolation:isolate;overflow:hidden;
  min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h));
  display:grid;align-items:end}
.hero5 .bild{position:absolute;inset:0;z-index:-2}
.hero5 .bild img{width:100%;height:100%;object-fit:cover;object-position:50% var(--hcrop)}
.hero5::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,20,21,0) 45%,rgba(23,20,21,.22) 72%,rgba(23,20,21,.55) 100%)}
.hero5 .ecke{position:absolute;left:0;right:0;bottom:clamp(1.8rem,6vh,3.8rem);z-index:2;
  display:grid;gap:1.1rem;justify-items:center;text-align:center;padding-inline:var(--gutter)}
.hero5 .eyebrow{color:var(--ivory);text-shadow:0 1px 14px rgba(23,20,21,.55)}
.hero5 .eyebrow::before,.hero5 .eyebrow::after{background:color-mix(in srgb,var(--ivory) 70%,transparent)}
.hero5 .cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
/* Adelina 28.09.: „die Knoepfe mit Jetzt shoppen und Private Shopping, koennen wir das
   vielleicht in Puderrosa machen. Und wenn ich drauf bin, vielleicht in Altrosa.“
   Damit ist das rauchige Glas aus Runde 8 weg: die Knoepfe sind jetzt deckendes Puder.
   Deckend ist zugleich die Loesung fuer die Lesbarkeit — die Schrift muss Aubergine
   sein, Elfenbein auf Puder waere 1,1 : 1. Ein weicher Schatten haelt die Knoepfe vom
   hellen Spiegel dahinter ab. */
.hero5 .cta .btn,.hero5 .cta .btn.fill{
  background:var(--powder);border:1px solid var(--powder);color:var(--aub);
  -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none;
  box-shadow:0 8px 24px -14px rgba(23,20,21,.6)}
/* Eigene Hover-Regel ist Pflicht (Lehre v0.18.1): die eigene Hintergrundregel ist
   spezifischer als .btn:hover aus chrome.css — ohne diese Zeile bliebe der Grund
   stehen, waehrend die Schrift wechselt. */
.hero5 .cta .btn:hover,.hero5 .cta .btn.fill:hover{background:var(--rose);border-color:var(--rose);color:var(--aub)}
@media (max-width:860px){
  /* Am Handy brach die Schriftzeile so um, dass der Mittelpunkt die zweite Zeile
     anfuehrte („· DAMEN & HERREN“). Kleiner, enger gesperrt, ohne Seitenlinien —
     dann passt sie bei 375 px in eine Zeile. */
  .hero5 .eyebrow{font-size:.6rem;letter-spacing:.14em;white-space:nowrap}
  .hero5 .eyebrow::before,.hero5 .eyebrow::after{display:none}
  .hero5 .ecke{bottom:1.6rem}
  /* Alois 21.09.: am Handy weniger Staengel und keine weisse Ecke oben links.
     Am Handy ist das Foto hoehengebunden (Bildformat 0,70 ist breiter als der
     Bildschirm mit ~0,52): es steht schon in voller Hoehe da, object-position in
     der Hoehe wirkt dort gar nicht. Deshalb die Bildbox nach oben verlaengern —
     was oberhalb des Auftakts liegt, schneidet overflow:hidden weg. Bei -18 %
     fallen die obersten ~15 % des Fotos weg: die Deckenecke (0-12 %) ganz, von
     der Aufhaengung (6-21 %) der groessere Teil. Blueten beginnen bei 21 %. */
  .hero5 .bild{top:var(--hero-oben-mobil,-18%)}
  .hero5 .cta{flex-wrap:nowrap;gap:.5rem;width:100%}
  .hero5 .cta .btn{flex:1 1 0;min-width:0;max-width:12rem;min-height:42px;padding:0 .6rem;
    font-size:.63rem;letter-spacing:.09em;white-space:nowrap}
}

/* ---------- Knoepfe auf der Seite: Aubergine mit Elfenbein (Adelina 28.09.) ----------
   Ihre Wahl aus den drei Fassungen von Runde 8: „Da haette ich gerne Aubergine und
   Elfenbein.“ Gilt fuer alle Knoepfe ausser denen im Startbild, die sie eigens in
   Puder wollte. Beim Darueberfahren dreht das Paar auf Puder mit Aubergine — eine
   eigene Hover-Regel ist Pflicht (Lehre v0.18.1), sonst bliebe der dunkle Grund
   stehen, waehrend die Schrift dunkel wird. */
main .btn,main .btn.fill{background:var(--aub);border:1px solid var(--aub);color:var(--ivory)}
main .btn:hover,main .btn.fill:hover{background:var(--powder);border-color:var(--rose);color:var(--aub)}

/* ---------- Boutique nur fuer Sie: Bild von der Ueberschrift bis zum zweiten Knopf ----------
   Adelina 21.09.: „Bild soll oben erst bei der dicken Ueberschrift anfangen und unten
   bis zum Ende des zweiten Buttons gehen.“ Die Augenbrauenzeile steht deshalb in einer
   eigenen Rasterzeile ueber dem Text, Text und Bild teilen sich die zweite Zeile.
   Das Bild ist absolut positioniert, damit es die Zeile nicht selbst hoeher macht —
   die Hoehe bestimmt allein der Text (gemessene Falle aus Runde 6: height:100% im
   Raster waechst sonst mit dem Bild). */
.pshop{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto auto;
  align-items:stretch;row-gap:0}
/* .pshop p{max-width:48ch} aus der Vorlage trifft auch diese Zeile; bei der kleinen,
   gesperrten Schrift ergibt 48ch nur ~344 px und sie bricht nach „&“ um. */
.pshop > .eyebrow{grid-column:1;grid-row:1;margin:0 0 .8rem;max-width:none}
.pshop > .rv{grid-column:1;grid-row:2}
.pshop > .rv > h2:first-child{margin-top:0}
.pshop > .rv > :last-child{margin-bottom:0}
.pshop > .frame{grid-column:2;grid-row:2;position:relative;aspect-ratio:auto;align-self:stretch;
  min-height:20rem;overflow:hidden}
.pshop > .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .pshop{grid-template-columns:1fr}
  .pshop > .frame{grid-column:1;grid-row:3;aspect-ratio:4/5;min-height:0;max-width:460px;margin-top:2rem}
}

/* ---------- iPhone (WebKit), gemessen 29.09. nach Alois' Foto vom iPhone mini ----------
   (1) Ein Rasterelement mit Seitenverhaeltnis streckt WebKit nicht auf die Spaltenbreite:
       der Bildrahmen bei „Boutique nur fuer Sie“ schrumpfte am Handy auf 24 x 30 px
       (Chromium 329 x 411) — das Bild darin ist absolut und traegt nichts zur Breite bei.
       Darum eine ausdrueckliche Breite.
   (2) Eine Prozent-Hoehe in einem Kasten mit Seitenverhaeltnis rechnet WebKit gegen die
       Aussenmasse statt gegen die Innenflaeche: das Bild der Schaufenster-Karten lief bis an
       den unteren Innenrand (Chromium 197 x 254, WebKit 197 x 288). Das Bild liegt deshalb
       absolut in der Innenflaeche; die Groesse der Karte bestimmt allein das Seitenverhaeltnis.
       Dasselbe bei Portraet und Lord-Foto der Kuratorin (dort 24 px zu hoch, Rahmen-Innenabstand
       12 px). Chromium bleibt dabei pixelgleich bzw. lagegleich (gemessen). */
@media (max-width:860px){.pshop > .frame{width:100%}}
main .spot .ph > img{position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
/* the footer logo (2.6rem = 323 px) made the page wider than the screen below 345 px (measured) */
@media (max-width:349px){footer .lg-ed-n{font-size:2.2rem}footer .lg-ed-s{font-size:.66rem}}
/* below 349 px (iPhone SE 1st gen.) the header was wider than the screen: 164 px lettering in 160 px (measured) */
@media (max-width:349px){.hdr .lg-ed-n{font-size:1.1rem;letter-spacing:.15em;padding-left:.15em}.hdr .lg-ed-s{font-size:.44rem;letter-spacing:.22em;padding-left:.22em}}
main .about .frame > img{position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px)}

/* ---------- Besuch: Oeffnungszeiten, Kontakt, Adresse ueber der Karte ----------
   Oeffnungszeiten als Wochenliste statt als eine Zeile; der heutige Tag ist hinterlegt,
   darunter steht „Jetzt geoeffnet“ bzw. wann wieder offen ist (Skript unten, Wiener
   Zeit). Die Zeiten kommen aus EINER Datenquelle im Builder (OEFFNUNG) — genau die
   Stelle, die spaeter die Einstellung aus der Kommissions-App liefert. */
/* Liste im linken Teil (Kaffee, Haustiere, Live-Musik): stand seit V4 mit
   Aufzaehlungspunkt UND Symbol direkt am Text — beim Zusammenlegen von Salon und
   Besuch kam die Gestaltung aus .feel nicht mit. In V5 unveraendert, hier behoben. */
.visit4 > .rv ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem;max-width:52ch}
.visit4 > .rv li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;color:var(--muted)}
.visit4 > .rv li .ic{width:1.4rem;height:1.4rem;color:var(--gold);margin-top:.1rem}
.visit dd .zeiten{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.1rem;max-width:22rem}
.visit dd .zeiten li{display:flex;justify-content:space-between;gap:1rem;font-size:1.08rem;
  padding:.28rem .6rem;border-radius:8px}
.visit dd .zeiten li b{font-weight:400;font-variant-numeric:tabular-nums}
.visit dd .zeiten li.zu{color:var(--muted);font-size:.95rem}
.visit dd .zeiten li.heute{background:color-mix(in srgb,var(--rose) 24%,transparent)}
.visit dd .jetzt{font-family:var(--sans);font-size:.86rem;letter-spacing:.04em;margin:.6rem 0 0;
  display:flex;align-items:center;gap:.5rem;color:var(--aub)}
.visit dd .jetzt::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--muted);flex:none}
.visit dd .jetzt.offen::before{background:var(--offen,#2e7d4f)}
.visit dd .sozial{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.visit dd .sozial .btn{min-height:44px;padding:0 1rem;font-size:.72rem;gap:.45rem}
.visit dd .sozial .ic{width:1.15em;height:1.15em}
/* Alois 22.09.: address sits directly above the map, not at the top of the column;
   contact buttons moved to the left column above "Besuch planen" */
.visit dl.adr{margin:2rem 0 .8rem}
.visit4 > .rv dl.kontakt{margin:2rem 0 1.2rem}

/* ---------- Marken-Laufband: Flaeche und Schrift waehlbar ----------
   Adelina 17.09.: „den Banner sowie die Schrift auch in Puder, Zartrosa".
   Das Band ist die einzige Flaeche der Seite, die noch in Altrosa #c9958d steht —
   Altrosa war am 16.09. NICHT unter ihren vier Farben. Altrosa bleibt als Standard
   stehen (Stand von Runde 4, nichts ungefragt aendern), Puder und Zartrosa kommen
   als Wahl dazu, und weil sie „sowie die Schrift" gesagt hat, gibt es die Paare in
   beide Richtungen: helle Flaeche mit Aubergine-Schrift und Aubergine-Flaeche mit
   heller Schrift.
   Die Regeln greifen ueber `main > .ticker` (0,1,1) und schlagen damit das
   `.ticker` (0,1,0) aus der V3-Vorlage — V3 und V4 bleiben unberuehrt, weil dieser
   Block nur in den Kopf von V5 wandert. */
:root{--tick-bg:#f6f1ea;--tick-ink:#2a1a1f}   /* Adelina 21.09.: Elfenbein & Aubergine */

/* ---------- Hinweis: der Online-Shop kommt (Adelina 28.09.) ----------
   „Koennen wir das mal vielleicht auf der Startseite draufschreiben, dass der
   Online-Shop bald kommt.“ Die Zeile steht im Schaufenster, also dort, wo auch der
   Knopf „Jetzt shoppen“ steht — beides wird zusammen gelesen.
   Der Text liegt in EINEM span: ein Flex-Container blockifiziert jedes Kind, sonst
   zerfaellt der Satz an der Auszeichnung in Spalten (Lehre global.md 2026-09-29). */
.bald{display:inline-flex;align-items:center;gap:.6rem;margin:1.2rem auto 0;
  padding:.6rem 1.15rem;border:1px solid var(--rose);border-radius:999px;
  background:color-mix(in srgb,var(--powder) 55%,transparent);
  font-size:.95rem;line-height:1.4;color:var(--ink);text-align:left}
/* Messing allein hatte auf der Pille 2,27 : 1 (Zweitpruefung 29.09.). Mit 25 % Aubergine
   3,56 : 1 — derselbe Hausmassstab wie bei den Schrittziffern, und es bleibt warm. */
.bald .ic{width:1.15em;height:1.15em;color:color-mix(in oklch,var(--gold),var(--aub) 25%);flex:none}
.bald b{font-weight:600}
@media (max-width:600px){
  .bald{align-items:flex-start;border-radius:18px;font-size:.9rem}
  .bald .ic{margin-top:.15rem}
}
main > .ticker{background:var(--tick-bg);color:var(--tick-ink)}
/* Der Trennpunkt zwischen den Marken ist Schrift, nicht Flaeche — er folgt der Schriftfarbe. */
main > .ticker span::after{background:var(--tick-ink)}

/* ---------- Presse als Laufband, wie das Marken-Band ---------- */

/* ---------- Fotos ohne Rahmen ----------
   Adelina wollte den Rahmen von den Fotos nehmen; das gilt in V5 immer. */
main .frame{border:0 !important;background:none !important;box-shadow:none !important}
main .frame::after{display:none !important}

/* ---------- Showcase cards: frame „Haarlinie Altrosa“ (Adelina 29.09.) ----------
   „Sie möchte gern diese Rahmenart verwenden auf der Webseite und auch im Shop“ — her screenshot shows a showcase card
   in the panel version hair-rose: outer 1 px Altrosa, a line in Altrosa 60 % 5 px inside, the photo 12 px inside
   (instead of the wide Salon frame). Curator and Private Shopping photos stay frameless. */
main .spot .ph{border:1px solid var(--rose);background:transparent;box-shadow:none;padding:12px}
main .spot .ph::after{inset:5px;border-color:color-mix(in srgb,var(--rose) 60%,transparent)}

/* ---------- Trennlinien zwischen den Rubriken ----------
   Eigene Elemente statt Rahmenlinien: nur so lassen sich Doppellinien und
   Verzierungen zeigen. Umschaltbar im Vergleichs-Panel. */
.trenner{position:relative;height:1px;background:var(--rose);border:0;margin:0}
.trenner .orn{display:none}

/* Salon-Streifen: breites Altrosa mit heller Mittellinie */

/* Messing: zwei Haarlinien mit Abstand */

/* Verziert: durchgehende Messinglinie, in der Mitte das Kleid aus dem Logo.
   Die Linie besteht aus zwei Segmenten links und rechts des Zeichens (wie im Logo),
   damit sie unabhaengig vom Untergrund sichtbar bleibt — eine halbdurchsichtige
   Linie genau auf der Kante zweier farbiger Flaechen verschwindet sonst. */

/* Rahmenleiste: gerader Strich mit Profil, wie die Kante eines Bilderrahmens */


/* Die Laufbaender bringen eigene Linien mit; die weichen den Trennern. */
main > .ticker, main > .pstatic{border-block:0}

/* Die Fusszeile steht ausserhalb von main und bekommt ihre Linie eigens. */
footer{border-top:1px solid var(--rose)}

/* ---------- Pressestimmen: laufend oder stehend ---------- */
.pstatic{padding:clamp(1.6rem,3vw,2.6rem) 0;background:var(--ivory)}
.pstatic ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1.2rem,3vw,2.6rem)}
.pstatic li{display:grid;gap:.5rem;justify-items:center;text-align:center}
.pstatic q{font-family:var(--display);font-size:clamp(1rem,.92rem + .45vw,1.25rem);color:var(--aub);
  line-height:1.35;text-wrap:balance}
.pstatic small{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pstatic .eyebrow{justify-content:center;margin-bottom:1.2rem}

/* ---------- Finale Seite (Alois 29.09.): Online-Shop kommt bald ---------- */
.bald-dlg{border:0;padding:0;margin:auto;width:min(100% - 2rem,31rem);max-width:none;
  background:var(--ivory);color:var(--ink);outline:1px solid var(--rose);outline-offset:-9px;
  box-shadow:0 40px 90px -40px rgba(23,20,21,.6)}
.bald-dlg::backdrop{background:rgba(42,26,31,.5)}
.bald-dlg .in{position:relative;display:grid;justify-items:center;gap:.9rem;text-align:center;
  padding:clamp(2.4rem,6vw,3.1rem) clamp(1.4rem,5vw,2.6rem) clamp(1.9rem,5vw,2.5rem)}
.bald-dlg h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,1.5rem + 2vw,2.7rem);line-height:1.08;margin:0}
.bald-dlg .ital{font-style:italic}
.bald-dlg p{margin:0;max-width:34ch}
.bald-dlg .stueck{font-family:var(--display);font-size:1.05rem;padding:.5rem 1rem;
  border-block:1px solid var(--gold-soft)}
.bald-dlg .cta{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.4rem}
.bald-dlg .btn{background:var(--aub);border:1px solid var(--aub);color:var(--ivory)}
.bald-dlg .btn:hover{background:var(--powder);border-color:var(--rose);color:var(--aub)}
.bald-dlg .btn.neben{background:transparent;color:var(--aub)}
.bald-dlg .btn.neben:hover{background:var(--powder);border-color:var(--rose)}
.bald-dlg .zu{position:absolute;top:.7rem;right:.7rem;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.bald-dlg .zu:hover{background:var(--powder)}
.bald-dlg .zu:focus-visible,.musik:focus-visible{outline:2px solid var(--aub);outline-offset:3px}
.bald-dlg .zu .ic{width:1.3rem;height:1.3rem}
/* Es gibt noch keinen Warenkorb — also auch keine Zaehler an Warenkorb und Merkliste. */
[data-cart-count],[data-wish-count]{display:none!important}

/* ---------- Musik-Knopf: Aubergine mit Elfenbein, wie die Knoepfe der Seite ----------
   Text liegt in EINEM span (Flex-Lehre global.md 2026-09-29). */
.musik{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1.05rem 0 .9rem;border-radius:999px;
  background:var(--aub);color:var(--ivory);border:1px solid var(--aub);cursor:pointer;
  font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 12px 28px -14px rgba(23,20,21,.75);transition:background .25s var(--ease),color .25s var(--ease)}
.musik:hover{background:var(--powder);color:var(--aub);border-color:var(--rose)}
.musik .ic{width:1.2rem;height:1.2rem;flex:none}
.musik .ic.an{display:none}
.musik[aria-pressed="true"] .ic.an{display:block}
.musik[aria-pressed="true"] .ic.aus{display:none}
.musik[hidden]{display:none}
@media (max-width:600px){.musik{width:44px;padding:0;justify-content:center}.musik span{display:none}}
/* Auf schmalen Bildschirmen reicht die Knopfzeile im Startbild von Rand zu Rand — dort lag
   der Musik-Knopf ueber „Jetzt shoppen“ (gemessen bei 390 px). Die Zeile rueckt deshalb um
   eine Knopfhoehe nach oben, der Musik-Knopf behaelt seinen festen Platz unten links. */
@media (max-width:480px){.hero5 .ecke{bottom:calc(1.6rem + 3.4rem)}}
@media print{.musik{display:none}}

/* ---------- Impressum als Einblendung (Alois 29.09.): kein Seitenwechsel, die Musik laeuft
   weiter. Gleiche Machart wie der Hinweis „Bald hier.“; am Handy bildschirmfuellend. ---------- */
.imp-dlg{border:0;padding:0;margin:auto;width:min(100% - 2rem,48rem);max-width:none;
  max-height:min(100% - 2rem,56rem);overflow:hidden;background:var(--ivory);color:var(--ink);
  outline:1px solid var(--rose);outline-offset:-9px;box-shadow:0 40px 90px -40px rgba(23,20,21,.6)}
.imp-dlg[open]{display:grid;grid-template-rows:minmax(0,1fr)}
.imp-dlg::backdrop{background:rgba(42,26,31,.5)}
.imp-dlg .in{overflow:auto;overscroll-behavior:contain;
  padding:clamp(2.4rem,5vw,3.4rem) clamp(1.4rem,5vw,3.2rem) clamp(2rem,5vw,3rem)}
.imp-dlg .zu{position:absolute;top:.7rem;right:.7rem;z-index:1;width:44px;height:44px;display:grid;
  place-items:center;border:0;border-radius:999px;background:var(--ivory);color:var(--ink);cursor:pointer}
.imp-dlg .zu:hover{background:var(--powder)}
.imp-dlg .zu:focus-visible{outline:2px solid var(--aub);outline-offset:3px}
.imp-dlg .zu .ic{width:1.3rem;height:1.3rem}
.imp-dlg .titel{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);
  line-height:1.08;margin:.8rem 0 .6rem}
.imp-dlg h2:not(.titel){font-family:var(--display);font-weight:400;font-size:1.35rem;margin:2.1rem 0 .7rem}
.imp-dlg p{margin:0;max-width:70ch}
.imp-dlg p+p{margin-top:.8rem}
.imp-dlg .sub{color:var(--muted);font-size:.95rem;max-width:64ch}
.imp-dlg dl{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.6rem;margin:1.2rem 0 0;font-size:.98rem}
.imp-dlg dt{color:var(--muted);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding-top:.25rem}
.imp-dlg dd{margin:0}
.imp-dlg a{text-decoration:underline;text-underline-offset:3px}
.imp-dlg ul{margin:.8rem 0 0;padding-left:1.25rem;max-width:70ch}
.imp-dlg li+li{margin-top:.35rem}
@media (max-width:600px){
  .imp-dlg{width:100%;height:100%;max-height:none;margin:0;outline-offset:-7px}
  .imp-dlg .in{padding:calc(3.6rem + env(safe-area-inset-top)) 1.3rem calc(2rem + env(safe-area-inset-bottom))}
  .imp-dlg .zu{top:calc(.7rem + env(safe-area-inset-top))}
  .imp-dlg dl{grid-template-columns:1fr;gap:.2rem .8rem}
  .imp-dlg dt{padding-top:.6rem}}
.sr-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.visit4 .sublead{font-family:var(--display);font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.3;color:var(--ink);margin:.7rem 0 1.1rem;max-width:30ch}
.visit4{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,4vw,4rem);align-items:start}
@media (max-width:900px){.visit4{grid-template-columns:1fr}}