/* Salon Linde — Stil nach der Artefakt-Vorlage: Schwarz-Weiß, riesige Großbuchstaben, Marker, gestapelte Farbkarten, auffächernder Stack. */
:root { --bg: #0d0d0d; --fg: #fff; --muted: rgba(255,255,255,.58); --line: rgba(255,255,255,.2); --surface: rgba(255,255,255,.04); --accent: #fff; --on-accent: #0d0d0d; --hl-off: rgba(255,255,255,.2); --ease: cubic-bezier(.2,0,0,1); }
body { background: #0d0d0d; }
.demo-bar { position: fixed; top: auto; bottom: .9rem; left: 50%; transform: translateX(-50%); z-index: 120; border-radius: 0; padding: .5rem 1.1rem; background: #fff; color: #0d0d0d; border: 0; white-space: nowrap; gap: 1.2rem; max-width: calc(100% - 1.5rem); } .demo-bar a { color: #0d0d0d; } .demo-bar span { opacity: .6; }
@media (max-width: 560px) { .demo-bar span { display: none; } }
.hd { position: fixed; z-index: 100; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 1.3rem var(--gutter); font: 500 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; mix-blend-mode: difference; }
.hd nav { display: flex; gap: 2.2rem; } .hd nav a { opacity: .7; } .hd nav a:hover { opacity: 1; } @media (max-width: 860px) { .hd nav { display: none; } }
.btn { border-radius: 0; background: #fff; color: #0d0d0d; text-transform: uppercase; letter-spacing: .12em; font: 500 .8rem var(--mono); padding: 1.1rem 1.8rem; } .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--line); }

.hero { position: relative; z-index: 2; min-height: max(100lvh, 44rem); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 6rem 0 2rem; isolation: isolate; }
#strands { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.hero > * { position: relative; z-index: 1; }
.markers { display: flex; justify-content: space-between; gap: 2rem; font: 500 .74rem/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .markers p:last-child { text-align: right; } @media (max-width: 700px) { .markers p:last-child { display: none; } }
.hero h1 { align-self: end; font-size: clamp(1.1rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; text-transform: uppercase; max-width: 28rem; }
.giant { margin: .8rem 0 .14em -.05em; font-size: clamp(5rem, 24vw, 22rem); line-height: .78; letter-spacing: -.075em; font-weight: 700; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.9); background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0%; -webkit-background-clip: text; background-clip: text; animation: fillup 2.6s .5s var(--ease) forwards; user-select: none; }
@keyframes fillup { to { background-size: 100% 100%; } }
.hero-foot { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: end; margin-top: 1.4rem; }
.badge { display: flex; gap: .8rem; align-items: center; font: 500 .7rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .badge b { display: block; font-size: .95rem; color: #fff; letter-spacing: .04em; }

.marq { overflow: hidden; border-block: 1px solid var(--line); padding: .9rem 0; position: relative; z-index: 2; background: #0d0d0d; } .marq div { display: flex; gap: 2.5rem; width: max-content; animation: slide 34s linear infinite; font: 500 .85rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .marq span::after { content: '/'; margin-left: 2.5rem; } @keyframes slide { to { transform: translateX(-50%); } }

section { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; }
.head { display: grid; gap: 1.5rem; margin-bottom: 3.5rem; } @media (min-width: 900px) { .head { grid-template-columns: 14rem 1fr; } }
h2 { font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .9; letter-spacing: -.055em; font-weight: 700; text-transform: uppercase; max-width: 56rem; }
#hl { font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 600; text-transform: uppercase; max-width: 60rem; }

/* Looks: gestapelte Karten */
.looks { padding-top: 0; }
.look { position: sticky; top: calc(9vh + var(--i) * 28px); min-height: 74lvh; margin-bottom: 4vh; border-radius: 34px; padding: clamp(1.5rem, 4vw, 3.2rem); display: grid; gap: 2rem; grid-template-columns: 1fr; align-content: space-between; overflow: hidden; transform-origin: top center; will-change: transform, filter; }
@media (min-width: 900px) { .look { grid-template-columns: 1fr 1fr; } }
.look .t { display: grid; align-content: space-between; gap: 2rem; position: relative; z-index: 1; } .look .n { font: 500 .8rem var(--mono); letter-spacing: .14em; }
.look h3 { font-size: clamp(3.4rem, 11vw, 10rem); line-height: .82; letter-spacing: -.07em; font-weight: 700; text-transform: uppercase; } .look p { max-width: 24rem; font-size: 1.1rem; font-weight: 500; } .look .tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .look .tags span { padding: .5rem .9rem; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.look svg { position: absolute; right: -6%; top: 50%; width: min(62%, 38rem); transform: translateY(-50%); opacity: .95; } .look svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 18 14; animation: dash 9s linear infinite; } .look svg path:nth-child(2n) { animation-duration: 13s; opacity: .6; } @keyframes dash { to { stroke-dashoffset: -320; } }
@media (max-width: 899px) { .look svg { width: 90%; right: -20%; top: 30%; opacity: .5; } }
.l1 { background: #2a35ff; color: #fff; } .l2 { background: #c8703a; color: #0d0d0d; } .l3 { background: #c9f23f; color: #0d0d0d; } .l4 { background: #ff9fbd; color: #0d0d0d; }

/* Stack */
#stack-run { height: 420lvh; }
#stack-run .pane { display: grid; align-content: center; background: #0d0d0d; }
.stack-grid { display: grid; gap: 2rem 4rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .stack-grid { grid-template-columns: .7fr 1.2fr .9fr; } }
#stack-cur { font-size: clamp(6rem, 18vw, 15rem); line-height: .8; letter-spacing: -.08em; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px #fff; }
.stack-view { position: relative; height: min(32rem, 52lvh); perspective: 1500px; }
#stack { --gap: .4rem; position: absolute; left: 50%; top: 50%; width: min(26rem, 62vw); height: min(17rem, 40vw); transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-32deg); }
.layer { position: absolute; inset: 0; border-radius: 18px; padding: 1.2rem; display: flex; align-items: flex-end; font: 500 .8rem var(--mono); letter-spacing: .14em; text-transform: uppercase; background: rgba(13,13,13,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transform: translateZ(calc(var(--k) * var(--gap))); transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s; backdrop-filter: blur(2px); }
.layer.on { background: #fff; color: #0d0d0d; box-shadow: 0 0 60px rgba(255,255,255,.28); }
.sts { position: relative; display: grid; } .st { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .st.on { opacity: 1; transform: none; pointer-events: auto; }
.st h3 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: .95; letter-spacing: -.05em; font-weight: 700; text-transform: uppercase; } .st p { margin-top: 1rem; color: var(--muted); max-width: 22rem; font-size: 1.05rem; }

/* Details */
.dets { border-top: 1px solid var(--line); } .det { position: relative; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem 2rem; align-items: baseline; padding: 1.7rem 0; border-bottom: 1px solid var(--line); isolation: isolate; transition: color .3s, padding .4s var(--ease); }
.det::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); z-index: -1; } .det:hover { color: #0d0d0d; padding-left: 1rem; } .det:hover::before { transform: scaleY(1); } .det:hover p { color: rgba(13,13,13,.62); }
.det .i { font: 500 .8rem var(--mono); } .det h3 { font-size: clamp(1.5rem, 3.4vw, 2.8rem); letter-spacing: -.045em; font-weight: 700; text-transform: uppercase; } .det p { grid-column: 2; color: var(--muted); max-width: 32rem; }
.price li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.3rem 0; border-top: 1px solid var(--line); } .price li:last-child { border-bottom: 1px solid var(--line); } .price b { font-size: clamp(1.3rem, 2.8vw, 2.2rem); letter-spacing: -.04em; font-weight: 600; text-transform: uppercase; } .price small { display: block; color: var(--muted); font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 400; } .price em { font-style: normal; font: 500 1rem var(--mono); } .price .i { font: 500 .8rem var(--mono); color: var(--muted); }

.faq details { border-top: 1px solid var(--line); padding: 1.3rem 0; } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: -.03em; font-weight: 600; text-transform: uppercase; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-weight: 400; transition: transform .4s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { margin-top: .9rem; color: var(--muted); max-width: 38rem; }

.book { display: grid; gap: 3rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .book { grid-template-columns: 1fr 1fr; } }
.hours li { display: flex; justify-content: space-between; padding: .8rem 0; border-top: 1px solid var(--line); font: 500 .95rem var(--mono); letter-spacing: .04em; } .hours li:last-child { border-bottom: 1px solid var(--line); } .hours li.today { background: #fff; color: #0d0d0d; padding-inline: .8rem; }
form.fake input, form.fake textarea, form.fake select { border-radius: 0; background: transparent; }
.mega { overflow: hidden; padding: 4rem 0 6rem; } .mega p { font-size: clamp(7rem, 33vw, 34rem); line-height: .74; letter-spacing: -.08em; font-weight: 700; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); text-align: center; }
.foot-x { padding-bottom: 5rem; }

/* ---------- Typo: Salon Linde ----------
   Bodoni Moda (kontrastreiche Modeschrift, wie in einer Strecke im Modemagazin) für alles Große,
   Jost für Text, Navigation und Preise. Großbuchstaben nur noch beim Riesenwort und den Looks; keine Mono-Labels. */
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/ref/BodoniModa-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/ref/BodoniModa-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../assets/fonts/ref/Jost-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root { --font: 'Jost', system-ui, sans-serif; --mono: 'Jost', system-ui, sans-serif; --didone: 'Bodoni Moda', 'Didot', serif; }
.hero h1, .giant, h2, #hl, .look h3, .st h3, .det h3, .mega p { font-family: var(--didone); font-weight: 500; }
.hero h1, h2, #hl, .st h3, .det h3, .mega p { text-transform: none; letter-spacing: -.02em; }
.hero h1 { font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; font-style: italic; }
h2 { line-height: .95; }
#hl { line-height: 1.12; font-weight: 400; }
.giant, .look h3 { letter-spacing: -.035em; font-weight: 600; }
h2 em, #hl em { color: inherit; }
.hd, .btn, .markers, .badge, .marq div, .look .n, .look .tags span, .layer, .det .i, .price .i, .price em, .hours li, .faq summary, .tag { font-family: var(--font); text-transform: none; letter-spacing: .01em; }
.hd { font-size: .95rem; font-weight: 500; }
.btn { font-size: .95rem; font-weight: 500; }
.marq div { font-family: var(--didone); font-style: italic; font-size: 1.5rem; letter-spacing: 0; }
.price b { font-family: var(--didone); text-transform: none; font-weight: 500; letter-spacing: -.02em; }