/* ---------- 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 ; 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} .nl label{display:block;margin-bottom:.6rem;font-size:.95rem;opacity:.85} .nl .nrow{display:flex;border-bottom:1px solid var(--bar-ink)} .nl input{flex:1;min-width:0;background:transparent;border:0;color:var(--bar-ink);font:inherit;font-size:1rem;min-height:48px;border-radius:0} .nl input::placeholder{color:var(--bar-ink);opacity:.5} .nl button{min-width:48px;min-height:48px;display:grid;place-items:center} .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}}