/* ==============================================================
   cam.lashbar — Designsystem (v33)
   Editorial-Layout: Bild führt, Typografie ordnet, Haarlinien statt Karten.
   Alle Seiten nutzen dieses eine Stylesheet.

   Inhalt
   1. Schriften (selbst gehostet, keine Verbindung zu Google)
   2. Tokens (Farben, Typo, Abstände, Bildformate)
   3. Basis
   4. Typografie-Bausteine
   5. Buttons & Links
   6. Header, Mega-Menü, Mobile-Menü, Sticky-Booking
   7. Medien (Bildrahmen, Seitenverhältnisse, Video)
   8. Editorial-Sektionen (Hero, Edit, Collection, Lash Edit, Artist, Lookbook, Reviews, Visit)
   9. Leistungsseiten (Service-Hero, Fakten, Text, Steps, Preise, Vergleich, FAQ, Weiterlesen)
   10. Footer
   11. Rechtsseiten
   12. Consent-Banner (nur Optik, Logik bleibt in consent.js)
   13. Bewegung
============================================================== */

/* 1. Schriften ------------------------------------------------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }

/* 2. Tokens ---------------------------------------------------- */
:root {
  --paper: #F7F4EF;      /* Grundfläche, warmes Off-White */
  --linen: #EEE8DF;      /* abgesetzte Abschnitte */
  --sand: #CDBFAE;       /* Haarlinien */
  --taupe: #74695E;      /* Sekundärtext (Kontrast ≥ 4.5:1 auf Paper) */
  --ink: #1C1917;        /* Headlines, Buttons, dunkle Flächen */
  --graphite: #3D3833;   /* Fließtext */
  --cam: #B85F25;        /* CAM-Orange, nur Mikro-Akzent (Kontrast ≥ 4.5:1 auf Paper) */
  --on-ink: #EFE9E1;     /* Text auf Ink */
  --on-ink-soft: #ADA296;/* Sekundärtext auf Ink */
  --ink-line: #3A3430;   /* Haarlinien auf Ink */
  --cam-on-ink: #CF8350; /* CAM-Orange auf Ink, gedämpft (Kontrast ≥ 4.5:1) */
  --mandarin: #E9853A;   /* CAM-Orange als Fläche (Me Time, Has Zitat), Text darauf in Ink */
  --mandarin-soft: #F7E2CF;

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(3.4rem, 7.6vw, 7.75rem);
  --fs-h1: clamp(2.9rem, 6vw, 5.5rem);
  --fs-h2: clamp(2.5rem, 4.8vw, 4.5rem);
  --fs-h3: clamp(1.6rem, 2.2vw, 2rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.18rem);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --text: 36rem;
  --space: clamp(88px, 11vw, 168px);
  --space-s: clamp(56px, 7vw, 96px);
  --gap: clamp(16px, 2.4vw, 32px);
  --header-h: 72px;
}

/* 3. Basis ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 400 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
em { font-style: italic; }
strong { font-weight: 500; color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { left: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 1px solid var(--cam); outline-offset: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4. Typografie-Bausteine ------------------------------------- */
.eyebrow { display: inline-block; font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.eyebrow .dot { color: var(--cam); margin-right: 0.6em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }
.lead { font-size: var(--fs-lead); line-height: 1.65; max-width: var(--text); }
.de { font: 500 0.8125rem/1.4 var(--sans); color: var(--ink); letter-spacing: 0.01em; }
.muted { color: var(--taupe); }
.prose { display: grid; gap: 1.1em; max-width: var(--text); }
.prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--sand); }
.prose a:hover { color: var(--cam); }
.ticks { list-style: none; display: grid; gap: 0; max-width: var(--text); }
.ticks li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--sand); position: relative; }
.ticks li:first-child { border-top: 1px solid var(--sand); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 1px; background: var(--cam); }

/* 5. Buttons & Links ------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background-color .25s ease, color .25s ease; cursor: pointer; }
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 42px; padding: 0 18px; }
.link { display: inline-flex; align-items: center; gap: 10px; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 6px 0; border-bottom: 1px solid currentColor; transition: color .25s ease; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.link:hover { color: var(--cam); }
.link .arr { transition: transform .25s ease; }
.link:hover .arr { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* Dunkle Flächen */
.dark { background: var(--ink); color: var(--on-ink-soft); }
.dark h1, .dark h2, .dark h3, .dark strong, .dark .de { color: var(--on-ink); }
.dark .eyebrow { color: var(--on-ink-soft); }
.dark .eyebrow .dot { color: var(--cam-on-ink); }
.dark .link { color: var(--on-ink); }
.dark .link:hover { color: var(--cam-on-ink); }
.dark .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.dark .btn:hover { background: transparent; color: var(--on-ink); }
.dark .btn--ghost { background: transparent; color: var(--on-ink); }
.dark .btn--ghost:hover { background: var(--on-ink); color: var(--ink); }
.dark a:focus-visible, .dark button:focus-visible, .dark summary:focus-visible { outline-color: var(--cam-on-ink); }
.dark .ticks li, .dark .ticks li:first-child { border-color: var(--ink-line); }
.dark .prose a { color: var(--on-ink); text-decoration-color: var(--ink-line); }
.linen { background: var(--linen); }

/* 6. Header ---------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 239, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.site-header.is-scrolled { border-bottom-color: var(--sand); }
.hd { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo { font: 500 1.65rem/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; margin-right: auto; white-space: nowrap; }
.logo i { font-style: normal; color: var(--cam); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav-trigger { font: 500 0.71875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--graphite); padding: 14px 14px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nav > a:hover, .nav-trigger:hover, .nav > a[aria-current="page"] { color: var(--cam); }
.nav-trigger svg { width: 9px; height: 9px; transition: transform .25s ease; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd .btn { margin-left: 12px; }
.burger { display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 14px 0 14px 12px; min-height: 44px; }
.burger .lines { width: 20px; height: 9px; position: relative; display: inline-block; }
.burger .lines::before, .burger .lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .3s ease, top .3s ease; }
.burger .lines::before { top: 0; }
.burger .lines::after { top: 8px; }
.burger[aria-expanded="true"] .lines::before { top: 4px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .lines::after { top: 4px; transform: rotate(-45deg); }
.hd-book { display: none; font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding: 4px 0; }

/* Mega-Menü */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); padding-block: 40px 48px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: var(--gap); }
.mega-card { text-decoration: none; display: grid; gap: 12px; }
.mega-card .frame { aspect-ratio: 4 / 5; }
.mega-card .eyebrow { margin-top: 4px; }
.mega-card .t { font: 400 1.6rem/1.1 var(--serif); color: var(--ink); }
.mega-card:hover .t { color: var(--cam); }
.mega-list { border-left: 1px solid var(--sand); padding-left: var(--gap); display: grid; align-content: start; gap: 4px; }
.mega-list a { text-decoration: none; font: 400 1.25rem/1.3 var(--serif); color: var(--ink); padding: 7px 0; }
.mega-list a small { display: block; font: 400 0.8125rem/1.4 var(--sans); color: var(--taupe); }
.mega-list a:hover { color: var(--cam); }

/* Mobile-Menü */
.mnav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--paper); overflow-y: auto; padding: 28px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 28px; }
.mnav-edits { display: grid; gap: 0; }
.mnav-edits a { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--sand); }
.mnav-edits a:first-child { border-top: 1px solid var(--sand); }
.mnav-edits .frame { aspect-ratio: 1; }
.mnav-edits .t { font: 400 1.6rem/1.05 var(--serif); color: var(--ink); display: block; }
.mnav-list { display: grid; }
.mnav-list a { font: 400 1.6rem/1.2 var(--serif); color: var(--ink); text-decoration: none; padding: 10px 0; }
.mnav-info { font-size: 0.875rem; color: var(--taupe); display: grid; gap: 4px; }
.mnav .btn { width: 100%; }

@media (max-width: 1080px) {
  .nav, .hd .btn { display: none; }
  .burger, .hd-book { display: inline-flex; }
  .hd { height: 64px; gap: 20px; }
  :root { --header-h: 64px; }
}
@media (min-width: 1081px) { .mnav { display: none !important; } }

/* Sticky-Booking (mobil) */
.sticky-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--on-ink); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 0.8125rem; transform: translateY(100%); transition: transform .35s ease; }
.sticky-book.is-visible { transform: none; }
.sticky-book a { font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink); text-decoration: none; border-bottom: 1px solid var(--on-ink); padding: 8px 0 5px; }
@media (max-width: 860px) { .sticky-book { display: flex; } }

/* 7. Medien ---------------------------------------------------- */
.frame { position: relative; overflow: hidden; background: var(--linen); max-width: 100%; }
.dark .frame { background: #26221F; }
.frame > img, .frame > video, .frame > picture, .frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.r-4x5 { aspect-ratio: 4 / 5; }
.r-3x4 { aspect-ratio: 3 / 4; }
.r-1x1 { aspect-ratio: 1; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-21x9 { aspect-ratio: 21 / 9; }
.frame .credit { position: absolute; right: 10px; bottom: 8px; font: 400 0.625rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.frame .credit--dark { color: rgba(28,25,23,.6); }
figcaption { font-size: 0.8125rem; color: var(--taupe); margin-top: 10px; }
.dark figcaption { color: var(--on-ink-soft); }
.zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
a:hover .zoom img, .zoom:hover img { transform: scale(1.03); }

/* 8. Editorial-Sektionen -------------------------------------- */
.section { padding-block: var(--space); }
.section--s { padding-block: var(--space-s); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head > div { display: grid; gap: 14px; max-width: 46rem; }
.sec-head p { max-width: 28rem; }
.rule { border-top: 1px solid var(--sand); }
.dark .rule { border-color: var(--ink-line); }

/* Hero (Startseite) */
.hero { display: grid; grid-template-columns: 5fr 7fr; min-height: min(86vh, 860px); }
.hero-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; min-width: 0; padding: clamp(48px, 7vw, 110px) var(--gutter) clamp(48px, 6vw, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero .display { font: 400 var(--fs-display)/0.92 var(--serif); color: var(--ink); letter-spacing: -0.025em; }
.hero h1 { font: 500 0.75rem/1.6 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.hero .frame { height: 100%; }
.hero .frame img { object-position: center 28%; }
.hero-cap { position: absolute; right: 18px; bottom: 16px; font: italic 400 1rem/1 var(--serif); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .frame { order: -1; aspect-ratio: 4 / 5; height: auto; }
  .hero-text { padding: 36px var(--gutter) 64px; gap: 22px; }
}

.statement { font: 400 clamp(1.7rem, 3.2vw, 2.75rem)/1.24 var(--serif); color: var(--ink); max-width: 24em; }
.statement em { color: var(--cam); }

/* Edit-Story (Bild + Text, asymmetrisch) */
.edit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.edit + .edit { margin-top: var(--space); }
.edit .main { grid-column: 1 / 8; grid-row: 1; }
.edit .body { grid-column: 9 / 13; grid-row: 1; display: grid; gap: 22px; align-content: end; min-width: 0; }
.edit .detail { width: 62%; margin-bottom: 14px; }
.edit--rev .main { grid-column: 6 / 13; }
.edit--rev .body { grid-column: 1 / 5; }
.edit--rev .detail { margin-left: auto; }
.edit--wide .main { grid-column: 1 / 9; }
.edit h2 em, .edit h3 em { font-style: italic; }
@media (max-width: 860px) {
  .edit { grid-template-columns: 1fr; row-gap: 28px; }
  .edit .main, .edit .body, .edit--rev .main, .edit--rev .body, .edit--wide .main { grid-column: 1; grid-row: auto; }
  .edit .detail { display: none; }
}

/* Collection */
.coll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.look { display: grid; gap: 14px; text-decoration: none; min-width: 0; align-content: start; }
.look .t { font: 400 1.7rem/1.05 var(--serif); color: var(--ink); }
.dark .look .t { color: var(--on-ink); }
.look .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9rem; }
.look:hover .t { color: var(--cam); }
.dark .look:hover .t { color: var(--cam-on-ink); }
@media (max-width: 860px) {
  .coll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .look { scroll-snap-align: start; }
}

/* Lash Edit / Preisliste */
.split { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); }
.split > * { min-width: 0; }
.split .side { display: grid; gap: 22px; align-content: start; }
@media (min-width: 861px) { .split .side--sticky { position: sticky; top: calc(var(--header-h) + 32px); } }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.plist { display: grid; }
.pgroup + .pgroup { margin-top: 44px; }
.pgroup-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.pgroup-h h3 { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.pgroup-h a { font-size: 0.8125rem; color: var(--taupe); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--sand); font-variant-numeric: tabular-nums; }
.prow .n { font: 400 1.5rem/1.15 var(--serif); color: var(--ink); }
.prow .n a { text-decoration: none; }
.prow .n a:hover { color: var(--cam); }
.prow .n small { display: block; font: 400 0.875rem/1.5 var(--sans); color: var(--taupe); margin-top: 4px; }
.prow .d { font-size: 0.875rem; color: var(--taupe); white-space: nowrap; }
.prow .p { font-size: 0.9375rem; color: var(--ink); white-space: nowrap; text-align: right; min-width: 5.5em; }
.prow .p--ask { font-size: 0.8125rem; color: var(--taupe); }
.prow .b { grid-column: 1 / -1; }
.pnote { font-size: 0.8125rem; color: var(--taupe); margin-top: 18px; max-width: 40rem; }
.dark .prow { border-color: var(--ink-line); }
.dark .pgroup-h { border-color: var(--on-ink); }
.dark .prow .n, .dark .prow .p { color: var(--on-ink); }
.dark .prow .n small, .dark .prow .d { color: var(--on-ink-soft); }
@media (max-width: 600px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto; }
  .prow .d { grid-column: 1; grid-row: 2; }
  .prow .p { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

/* Baukasten Korean Lashlifting */
.builder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--sand); }
.builder > div { padding: 22px 18px 26px 0; display: grid; gap: 6px; align-content: start; }
.builder > div + div { padding-left: 18px; border-left: 1px solid var(--sand); }
.builder .op { font: 400 1.6rem/1 var(--serif); color: var(--cam); }
.builder .n { font: 400 1.35rem/1.15 var(--serif); color: var(--ink); }
.builder .p { font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.builder .total { background: var(--linen); padding-left: 18px; }
@media (max-width: 700px) { .builder { grid-template-columns: 1fr 1fr; } .builder > div:nth-child(3) { border-left: 0; padding-left: 0; } .builder > div:nth-child(n+3) { border-top: 1px solid var(--sand); } .builder .total { padding-left: 18px; } }

/* Artist & Studio */
.artist { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.artist .por { grid-column: 1 / 6; }
.artist .txt { grid-column: 7 / 12; display: grid; gap: 26px; min-width: 0; }
.quote { font: italic 400 clamp(1.8rem, 3.2vw, 3rem)/1.15 var(--serif); color: var(--ink); }
.quote b { font-weight: 400; color: var(--cam); }
.studio { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: var(--gap); margin-top: var(--space-s); }
.studio figure { display: grid; align-content: start; gap: 10px; min-width: 0; margin: 0; }

@media (max-width: 860px) {
  .artist .por, .artist .txt { grid-column: 1 / -1; }
  .studio { grid-template-columns: 1fr 1fr; }
  .studio figure:first-child { grid-column: 1 / -1; }
}

/* Lookbook */
.filters { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.filters button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 8px 0; min-height: 36px; font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); cursor: pointer; }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.lookbook figure { min-width: 0; }
.lookbook figure.big { grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: 1fr auto; }
.lookbook figure.big .frame { aspect-ratio: auto; height: 100%; }
.lookbook figcaption { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.lookbook a { text-decoration: none; }
@media (max-width: 860px) {
  .lookbook { grid-template-columns: 1fr 1fr; }
  .lookbook figure.big { grid-column: 1 / -1; grid-row: auto; }
  .lookbook figure.big .frame { aspect-ratio: 4 / 5; }
}

/* Reviews */
.reviews { text-align: center; display: grid; justify-items: center; gap: 24px; }
.reviews .quote { max-width: 22em; font-style: italic; }
.cite { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); font-style: normal; }
.reviews-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); max-width: 980px; text-align: left; margin: 40px 0 16px; }
.reviews-more p { font: 400 1.35rem/1.4 var(--serif); color: var(--ink); margin-bottom: 12px; }
.reviews .fine { font-size: 0.75rem; color: var(--taupe); max-width: 36rem; }
@media (max-width: 700px) { .reviews-more { grid-template-columns: 1fr; } }

/* Visit & Booking */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); padding-top: 48px; border-top: 1px solid var(--ink-line); }
.visit-grid > * { min-width: 0; }
.visit dl { display: grid; gap: 22px; }
.visit dt { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-soft); margin-bottom: 6px; }
.visit dd { color: var(--on-ink); }
.visit dd a { color: var(--on-ink); text-underline-offset: 3px; text-decoration-color: var(--ink-line); }
.visit dd a:hover { color: var(--cam-on-ink); }
.visit .book { display: grid; gap: 26px; align-content: start; }
.visit .book p { color: var(--on-ink); font-size: var(--fs-lead); max-width: 28rem; }
.map-slot { margin-top: 28px; border: 1px solid var(--ink-line); padding: 22px; display: grid; gap: 12px; }
.map-slot p { font-size: 0.875rem; }
.map-slot a { color: var(--on-ink); }
iframe.map { width: 100%; aspect-ratio: 4 / 3; border: 0; margin-top: 28px; filter: grayscale(.6); }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

/* 9. Leistungsseiten ------------------------------------------ */
.crumbs { font-size: 0.75rem; color: var(--taupe); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--taupe); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.dark .crumbs, .dark .crumbs a { color: var(--on-ink-soft); }
.shero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-block: clamp(32px, 5vw, 72px) var(--space-s); }
.shero .txt { grid-column: 1 / 7; display: grid; gap: 24px; min-width: 0; align-self: center; }
.shero .media { grid-column: 8 / 13; }
.shero--wide .media { grid-column: 7 / 13; }
.shero h1 { font-size: var(--fs-h1); }
.shero h1 .sub { display: block; font: 500 0.75rem/1.6 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin-top: 18px; }
.dark .shero h1 .sub { color: var(--on-ink-soft); }
@media (max-width: 860px) {
  .shero { grid-template-columns: 1fr; row-gap: 32px; padding-top: 0; }
  .shero .txt, .shero .media, .shero--wide .media { grid-column: 1; }
  .shero .media { order: -1; margin-inline: calc(var(--gutter) * -1); }
}
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); max-width: 34rem; }
.facts > div { padding: 14px 16px 14px 0; display: grid; gap: 2px; }
.facts > div + div { border-left: 1px solid var(--sand); padding-left: 16px; }
.facts dt { font: 500 0.625rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); }
.facts dd { font: 400 1.35rem/1.2 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.dark .facts, .dark .facts > div + div { border-color: var(--ink-line); }
.dark .facts dt { color: var(--on-ink-soft); }
.dark .facts dd { color: var(--on-ink); }

.results { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.results figure { min-width: 0; }
.results figure:nth-child(1) { grid-column: 1 / 7; }
.results figure:nth-child(2) { grid-column: 8 / 13; margin-top: clamp(40px, 8vw, 140px); }
.results figure:nth-child(3) { grid-column: 2 / 6; }
.results figure:nth-child(4) { grid-column: 7 / 12; }
.results--2 figure:nth-child(2) { margin-top: 0; }
@media (max-width: 860px) { .results { grid-template-columns: 1fr 1fr; } .results figure:nth-child(n) { grid-column: auto; margin-top: 0; } .results figure:first-child { grid-column: 1 / -1; } }

.textblock { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 6vw, 96px); }
.textblock > * { min-width: 0; }
.textblock h2 { font-size: var(--fs-h2); }
@media (max-width: 860px) { .textblock { grid-template-columns: 1fr; } }

.compare { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.compare > div { padding: 26px 22px 30px 0; display: grid; gap: 12px; align-content: start; }
.compare > div + div { border-left: 1px solid var(--sand); padding-left: 22px; }
.compare .k { font-size: 0.875rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.compare .is-here { color: var(--cam); font: 500 0.625rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.dark .compare { border-color: var(--on-ink); }
.dark .compare > div + div { border-color: var(--ink-line); }
.dark .compare .k { color: var(--on-ink); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--sand); } .dark .compare > div + div { border-color: var(--ink-line); } }

.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap); counter-reset: s; }
.steps li { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 10px; align-content: start; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; color: var(--cam); }
.steps h3 { font-size: 1.5rem; }
.dark .steps li { border-color: var(--on-ink); }
.dark .steps li::before { color: var(--cam-on-ink); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--sand); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 22px 0; font: 400 1.4rem/1.25 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.4rem/1 var(--sans); color: var(--taupe); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 24px; max-width: 40rem; }
.dark .faq { border-color: var(--on-ink); }
.dark .faq details { border-color: var(--ink-line); }
.dark .faq summary { color: var(--on-ink); }

.ba { position: relative; overflow: hidden; aspect-ratio: 1; user-select: none; touch-action: pan-y; max-width: 100%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: #fff; pointer-events: none; }
.ba .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; border-radius: 50%; background: rgba(28,25,23,.35); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba .lbl { position: absolute; top: 12px; font: 500 0.625rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(28,25,23,.45); padding: 6px 8px; }
.ba .lbl--b { left: 12px; }
.ba .lbl--a { right: 12px; }

.more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.more a { text-decoration: none; display: grid; gap: 12px; min-width: 0; align-content: start; }
.more .t { font: 400 1.5rem/1.1 var(--serif); color: var(--ink); }
.more a:hover .t { color: var(--cam); }
@media (max-width: 860px) { .more { grid-template-columns: 1fr 1fr; } }

.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; }
.cta-band h2 { font-size: var(--fs-h2); }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }

/* 10. Footer --------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink-soft); padding-block: 56px 40px; font-size: 0.875rem; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--cam-on-ink); }
.ft { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px var(--gap); padding-bottom: 40px; border-bottom: 1px solid var(--ink-line); }
.ft .logo { color: var(--on-ink); }
.ft .logo i { color: var(--cam-on-ink); }
.ft h2 { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-soft); margin-bottom: 14px; }
.ft ul { list-style: none; display: grid; gap: 8px; }
.ft p { max-width: 22rem; margin-top: 16px; }
.fb { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 0.8125rem; }
.fb nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 860px) { .ft { grid-template-columns: 1fr 1fr; } .ft > div:first-child { grid-column: 1 / -1; } .site-footer { padding-bottom: 96px; } }

/* 11. Rechtsseiten --------------------------------------------- */
.legal { padding-block: clamp(40px, 6vw, 88px) var(--space); }
.legal h1 { font-size: var(--fs-h1); margin-bottom: 40px; }
.legal-body { max-width: 46rem; }
.legal-body h2 { font-size: 1.9rem; margin: 2.2em 0 .6em; }
.legal-body h3 { font-size: 1.4rem; margin: 1.8em 0 .5em; }
.legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 1em; }
.legal-body ul, .legal-body ol { padding-left: 1.2em; }
.legal-body a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--sand); word-break: break-word; }
.legal-body a:hover { color: var(--cam); }
.legal-body table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal-body th, .legal-body td { text-align: left; border-bottom: 1px solid var(--sand); padding: 8px 10px 8px 0; vertical-align: top; }
.legal-body .table-wrap { overflow-x: auto; }

/* 12. Consent-Banner: nur Optik -------------------------------- */
.cl-consent .cl-consent-card { border-radius: 0; box-shadow: 0 24px 60px rgba(28,25,23,.22); background: var(--paper); color: var(--graphite); font-family: var(--sans); }
.cl-consent .cl-consent-card h2, .cl-consent .cl-consent-card h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.cl-consent .cl-consent-card h2 { font-size: 1.6rem; }
.cl-consent .cl-consent-card h3 { font-size: 1.2rem; }
.cl-consent .cl-category { border-color: var(--sand); }
.cl-consent .cl-settings-actions { background: var(--paper); border-color: var(--sand); }
.cl-consent .cl-btn { font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; }
.cl-consent .cl-btn:hover { transform: none; }
.cl-consent .cl-btn--primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.cl-consent .cl-btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.cl-consent .cl-btn--soft { background: var(--linen); color: var(--ink); border: 1px solid var(--sand); }
.cl-consent .cl-toggle input:checked + span { background: var(--ink); }
.cl-consent .cl-btn:focus-visible, .cl-consent .cl-toggle input:focus-visible + span { outline: 1px solid var(--cam); }

/* 13. Bewegung ------------------------------------------------- */
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-pending { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
  .zoom img, .link .arr, .sticky-book { transition: none; }
}

/* Upgrade-Hinweise (Me Time) */
.upline { display: grid; gap: 6px; padding: 14px 0 14px 16px; border-left: 2px solid var(--cam); text-decoration: none; color: var(--ink); font: 400 1.15rem/1.3 var(--serif); max-width: 30rem; }
.upline:hover span:last-child { color: var(--cam); }
.upline .eyebrow { color: var(--cam); }
.dark .upline { color: var(--on-ink); }
.upgrade { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "e e p" "n d p"; column-gap: 18px; row-gap: 6px; align-items: baseline; margin-top: 14px; padding: 18px 18px 20px; background: var(--ink); color: var(--on-ink); text-decoration: none; }
.upgrade .eyebrow { grid-area: e; color: var(--cam-on-ink); }
.upgrade .n { grid-area: n; font: 400 1.6rem/1 var(--serif); }
.upgrade .d { grid-area: d; font-size: 0.9rem; color: var(--on-ink-soft); }
.upgrade .p { grid-area: p; align-self: center; font-variant-numeric: tabular-nums; }
.upgrade:hover .n { color: var(--cam-on-ink); }
@media (max-width: 700px) { .upgrade { grid-template-columns: 1fr auto; grid-template-areas: "e p" "n p" "d d"; } }

/* Standard oder Signature: Vergleich Lash Extensions */
.lcmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.lcmp > div { padding: 26px 28px 30px 0; display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; }
.lcmp > div + div { border-left: 1px solid var(--sand); padding-left: 28px; padding-right: 0; }
.lcmp > div:last-child { background: linear-gradient(var(--linen), var(--linen)) right / calc(100% - 1px) 100% no-repeat; padding-right: 22px; }
.lcmp .plist { width: 100%; }
.lcmp > div:last-child .eyebrow { color: var(--cam); }
.dark .lcmp { border-color: var(--on-ink); }
.dark .lcmp > div + div { border-color: var(--ink-line); }
.dark .lcmp > div:last-child { background: linear-gradient(#26211E, #26211E) right / calc(100% - 1px) 100% no-repeat; }
.dark .lcmp > div:last-child .eyebrow { color: var(--cam-on-ink); }
@media (max-width: 860px) { .lcmp { grid-template-columns: 1fr; } .lcmp > div:first-child { padding-right: 0; } .lcmp > div + div { border-left: 0; padding-left: 18px; border-top: 1px solid var(--sand); } .lcmp > div:last-child { background: var(--linen); } .dark .lcmp > div:last-child { background: #26211E; } }


/* ---- v36 Markencharakter: Orange als Farbe, Ha als Stimme ---- */
h1 em, .h2 em, .hero .display em { color: var(--cam); }
.dark h1 em, .dark .h2 em { color: var(--cam-on-ink); }
.eyebrow .dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--cam); color: transparent; overflow: hidden; vertical-align: .02em; position: relative; font-size: 1em; }
.eyebrow .dot::after { content: ""; position: absolute; top: -.18em; right: -.12em; width: .34em; height: .2em; border-radius: 0 100% 0 100%; background: #5E7B45; }
.dark .eyebrow .dot { background: var(--cam-on-ink); }
.link { text-decoration-color: var(--cam); }
.link:hover { border-bottom-color: var(--cam); }

.cam-surface { background: var(--mandarin); color: var(--ink); }
.cam-surface h1, .cam-surface h2, .cam-surface h3, .cam-surface .de, .cam-surface strong { color: var(--ink); }
.cam-surface .h2 em { color: var(--paper); }
.cam-surface .eyebrow { color: var(--ink); }
.cam-surface p, .cam-surface .ticks li { color: var(--ink); }
.cam-surface .ticks li, .cam-surface .ticks li:first-child { border-color: rgba(28,25,23,.25); }
.cam-surface .ticks li::before { background: var(--ink); }
.cam-surface .btn:hover { border-color: var(--ink); }
.cam-surface .link:hover { color: var(--paper); border-bottom-color: var(--paper); }
.cam-surface .credit { color: var(--paper); }

.metime { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.metime-img { position: relative; }
.metime-cap { display: inline-block; margin-top: 14px; font: italic 400 1.3rem/1.2 var(--serif); }
.metime-txt { display: grid; gap: 24px; justify-items: start; max-width: 34rem; }
.metime-price { display: flex; gap: 20px; align-items: baseline; font-variant-numeric: tabular-nums; }
.metime-price span:first-child { font: 400 2.6rem/1 var(--serif); }
@media (max-width: 860px) { .metime { grid-template-columns: 1fr; } }

.orange-quote { background: var(--mandarin); padding: clamp(24px, 3vw, 40px); position: relative; }
.orange-quote .quote { color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.orange-quote .quote b { color: var(--paper); font-weight: 500; }
.sign { font: italic 400 1.5rem/1 var(--serif); color: var(--cam); }
.artist .prose p { font-style: normal; }

.tip { border-left: 3px solid var(--mandarin); background: var(--mandarin-soft); padding: 18px 22px 20px; display: grid; gap: 8px; max-width: var(--text); }
.tip .eyebrow { color: var(--cam); }
.tip p { font: italic 400 1.3rem/1.35 var(--serif); color: var(--ink); margin: 0; }
.dark .tip { background: #2A2320; border-color: var(--cam-on-ink); }
.dark .tip p { color: var(--on-ink); }
.dark .tip .eyebrow { color: var(--cam-on-ink); }

/* Anime-Seite: ein Hauch Manga */
.anime-pop .shero { position: relative; isolation: isolate; }
.anime-pop .shero::before { content: ""; position: absolute; inset: -40px -10vw 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 72% 45%, rgba(224,138,78,.10) 0deg 1.2deg, transparent 1.2deg 7deg);
  -webkit-mask-image: radial-gradient(ellipse at 72% 45%, transparent 18%, #000 60%); mask-image: radial-gradient(ellipse at 72% 45%, transparent 18%, #000 60%); }
.anime-pop h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); }
.anime-pop .shero .media .frame { box-shadow: 14px 14px 0 var(--cam-on-ink); }
@media (max-width: 860px) { .anime-pop .shero .media .frame { box-shadow: 8px 8px 0 var(--cam-on-ink); } }
.anime-pop { overflow-x: clip; }
.hero .display { font-size: clamp(2.8rem, 5.4vw, 5.8rem); hyphens: none; }

/* v37: Bildausschnitte */
.edit .detail--wide { width: 78%; }
.lookbook figure.fit .frame { background: var(--linen); }
.lookbook figure.fit img { object-fit: contain; }
.strip3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* v39: kein Umbruch in Fachbegriffen */
.nw { white-space: nowrap; }

/* ==============================================================
   v40: Desktop-Feinschliff
   Größere Grundschrift auf großen Bildschirmen, keine Mikro-Texte,
   breitere Bühne, ruhige Bildkanten und gleiche Bildformate.
============================================================== */
:root {
  --max: 1520px;
  --gutter: clamp(16px, 4vw, 64px);
  --fs-h3: clamp(1.7rem, 2.1vw, 2.3rem);
  --fs-lead: clamp(1.1rem, 1.25vw, 1.3rem);
}
/* Grundschrift wächst auf Desktop mit (1440 px ≈ 17,5 px, 1920 px ≈ 19 px). Alles in rem wächst mit. */
@media (min-width: 1081px) { html { font-size: clamp(16px, calc(0.3125vw + 13px), 20px); } }

/* Kleintexte lesbarer */
.eyebrow, .pgroup-h h3, .filters button, .lookbook figcaption, .cite, .visit dt, .ft h2, .steps li::before { font-size: 0.75rem; }
.facts dt, .compare .is-here, .ba .lbl { font-size: 0.6875rem; }
.nav > a, .nav-trigger { font-size: 0.78rem; }
.btn, .link { font-size: 0.78rem; }
.de { font-size: 0.875rem; }
.hero h1, .shero h1 .sub { font-size: 0.8125rem; }
figcaption, .pnote, .pgroup-h a, .crumbs, .fb, .reviews .fine { font-size: 0.875rem; }
.prow .n small, .prow .d, .compare .k, .mega-list a small, .map-slot p, .upgrade .d { font-size: 0.9375rem; }
.prow .p, .builder .p { font-size: 1rem; }
.site-footer { font-size: 0.9375rem; }

/* Serifen: Cormorant hat kleine Mittellängen, deshalb etwas größer */
.prow .n { font-size: 1.65rem; }
.faq summary { font-size: 1.55rem; }
.steps h3 { font-size: 1.75rem; }
.builder .n { font-size: 1.5rem; }
.facts dd { font-size: 1.5rem; }
.reviews-more p { font-size: 1.5rem; }
.mega-list a { font-size: 1.35rem; }
.upline { font-size: 1.3rem; }
.tip p { font-size: 1.45rem; }
.metime-cap { font-size: 1.4rem; }
.more .t, .mega-card .t { font-size: 1.7rem; }

/* Linien in .wrap-Abschnitten nur so breit wie der Inhalt */
.wrap.rule { border-top: 0; background: linear-gradient(var(--sand), var(--sand)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.dark .wrap.rule { background-image: linear-gradient(var(--ink-line), var(--ink-line)); }

/* Lookbook-Filter in einer Zeile (vorher von .sec-head > div zu einer Spalte gemacht) */
.sec-head > .filters { display: flex; flex-wrap: wrap; gap: 4px 28px; max-width: none; }
.lookbook figure.wide { grid-column: span 2; display: grid; grid-template-rows: 1fr auto; }
.lookbook figure.wide .frame { aspect-ratio: auto; height: 100%; min-height: 0; }
@media (max-width: 860px) { .lookbook figure.wide { grid-column: 1 / -1; } .lookbook figure.wide .frame { aspect-ratio: 3 / 2; height: auto; } }

/* Vergleichsspalten exakt gleich breit, Trennlinie mittig im Abstand */
@media (min-width: 861px) {
  .compare { column-gap: 44px; }
  .compare > div, .compare > div + div { padding: 26px 0 30px; border-left: 0; position: relative; }
  .compare > div + div::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; border-left: 1px solid var(--sand); }
  .dark .compare > div + div::before { border-color: var(--ink-line); }
}

@media (min-width: 861px) {
  /* Startseiten-Hero: Hälfte/Hälfte, Text mittig, Headline größer */
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-text { justify-content: center; }
  .hero .display { font-size: clamp(3.4rem, 4.9vw, 6.2rem); }
  .hero .lead { max-width: 30rem; }

  /* Edit-Geschichten: kleines Bild bündig mit der Oberkante des großen, Text bündig mit der Unterkante */
  .edit { align-items: stretch; }
  .edit .body { display: flex; flex-direction: column; gap: 22px; justify-content: flex-end; }
  .edit .body > * { flex: none; }
  .edit .detail { width: 56%; margin-bottom: auto; }
  .edit .detail--wide { width: 78%; }
  .edit .detail + * { margin-top: 32px; }

  /* Ergebnis-Raster: gleiche Formate, gleiche Kanten */
  .results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .results figure:nth-child(n) { grid-column: auto; margin-top: 0; }
  .results--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Anime-Seite: ruhiger, ohne Strahlen und versetzten Rahmen */
.anime-pop .shero::before { content: none; }
.anime-pop .shero .media .frame { box-shadow: none; }
.anime-pop h1 { font-size: var(--fs-h1); }
@media (min-width: 861px) { .edit .h2 { font-size: clamp(2.5rem, 3.7vw, 4.1rem); } }
.lookbook figure.wide .frame, .lookbook figure.big .frame { position: relative; }
.lookbook figure.wide .frame img, .lookbook figure.big .frame img { position: absolute; inset: 0; }
@media (max-width: 860px) { .lookbook figure.big .frame { aspect-ratio: 4 / 5; height: auto; } }

/* ==============================================================
   v41 · Startseite: drei eigene Aufbauten + dezente Effekte
============================================================== */
.feat { display: grid; gap: 28px; }
.feat-body { display: grid; gap: 22px; align-content: center; min-width: 0; }
.feat-body .h2 em { font-style: italic; }
.feat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feat-pair figure { margin: 0; display: grid; gap: 10px; }
.feat-pair figcaption { font: 500 0.75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.feat--brows .feat-head, .feat--brows .feat-copy { display: grid; gap: 22px; align-content: start; }

.feat-bleed { display: grid; }
.feat-bleed-img .frame { aspect-ratio: 4 / 5; }
.feat-bleed-body { display: grid; gap: 22px; align-content: center; padding: 44px var(--gutter) 64px; }
.feat-bleed-body .h2 em { font-style: italic; }

@media (min-width: 861px) {
  .feat--korean { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .feat--korean .feat-img { grid-column: 1 / 7; }
  .feat--korean .feat-body { grid-column: 8 / 13; max-width: 34rem; }
  .feat--korean .h2, .feat-bleed-body .h2 { font-size: clamp(2.8rem, 4.2vw, 4.8rem); }

  .feat--brows { gap: 48px; }
  .feat--brows .feat-body { grid-row: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .feat--brows .feat-head { grid-column: 1 / 7; }
  .feat--brows .feat-copy { grid-column: 8 / 13; }
  .feat--brows .feat-pair { grid-row: 2; gap: var(--gap); }

  .feat-bleed { grid-template-columns: 5fr 7fr; align-items: center; }
  .feat-bleed-body { padding: var(--space) var(--gutter) var(--space) clamp(40px, 7vw, 140px); max-width: 40rem; }
}

/* Effekte (v43): Bild-Vorhang entfernt, Text-Staffelung und Parallaxe bleiben */
.stagger > * { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.stagger.fx-wait > * { opacity: 0; transform: translateY(22px); }
.stagger > *:nth-child(2) { transition-delay: .08s; }
.stagger > *:nth-child(3) { transition-delay: .16s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .32s; }
[data-parallax] img { height: 112%; top: -6%; position: relative; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
/* Unterstrich der Textlinks zeichnet sich beim Hover neu */
.link { border-bottom-color: transparent; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: color .25s ease, background-size .45s cubic-bezier(.65,0,.15,1); }
.link:hover { animation: cam-line .7s cubic-bezier(.65,0,.15,1); }
@keyframes cam-line { 0% { background-size: 100% 1px; background-position: right bottom; } 49% { background-size: 0 1px; background-position: right bottom; } 50% { background-size: 0 1px; background-position: left bottom; } 100% { background-size: 100% 1px; background-position: left bottom; } }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { transition: none; }
  .link:hover { animation: none; }
  [data-parallax] img { transform: none; }
}
.feat-bleed-body .h2 em { display: block; }

/* ==============================================================
   v42 · Preisliste stimmig, Me Time sanfter, ruhigerer Rhythmus
============================================================== */
/* Preisliste: Gruppen in Serif, Produkte eine Stufe kleiner, klare Abstände */
.plist > * + * { margin-top: 56px; }
.pgroup + .pgroup { margin-top: 56px; }
.pgroup-h { align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.pgroup-h h3 { font: 400 1.5rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pgroup-h a { font-size: 0.75rem; color: var(--ink); }
.prow { padding: 16px 0; gap: 4px 28px; }
.prow .n { font: 400 1.3rem/1.2 var(--serif); }
.prow .n small { font-size: 0.875rem; margin-top: 3px; }
.prow .d { font-size: 0.875rem; }
.prow .p { font: 500 1rem/1.2 var(--sans); }
.prow .p--ask { font-weight: 400; font-size: 0.875rem; }
.side .mnav-list .pcat { font: 400 1.25rem/1.3 var(--serif); padding: 8px 0; border-bottom: 1px solid var(--sand); }
.side .mnav-list .pcat:last-child { border-bottom: 0; }
.pnote { margin-top: 20px; }
@media (max-width: 860px) {
  .plist > * + *, .pgroup + .pgroup { margin-top: 44px; }
  .pgroup-h h3 { font-size: 1.35rem; }
  .prow .n { font-size: 1.2rem; }
}

/* Me Time: Orange als sanfte Fläche, der kräftige Ton bleibt für Akzente und Has Zitat */
.cam-surface { background: var(--mandarin-soft); color: var(--ink); }
.cam-surface .eyebrow { color: var(--cam); }
.cam-surface .h2 em { color: var(--cam); }
.cam-surface .link:hover { color: var(--cam); border-bottom-color: var(--cam); }
.cam-surface .credit { color: var(--ink); }
.cam-surface .metime-cap { color: var(--taupe); }
.cam-surface .ticks li, .cam-surface .ticks li:first-child { border-color: rgba(28,25,23,.18); }
.cam-surface .ticks li::before { background: var(--cam); }

/* ==============================================================
   v43 · Ein Orange (CAM #B85F25), keine Apricot- oder Knallorange-Flächen,
   Tipp-Kästen entfernt, Has Zitat ohne Farbfläche
============================================================== */
.cam-surface { background: var(--linen); color: var(--ink); }
.cam-surface .credit { color: var(--paper); }
.ha-quote { margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--cam); }
.ha-quote .quote { color: var(--ink); font-size: clamp(1.45rem, 2.2vw, 2.1rem); line-height: 1.3; }
.ha-quote .quote b { color: var(--cam); font-weight: 500; }
.dark .eyebrow .dot { color: var(--cam-on-ink); background: var(--cam-on-ink); }

/* ==============================================================
   v44 · Navigation nach Schwerpunkten, Studio-Bereich, Me-Time-Bild eingebettet
============================================================== */
@media (min-width: 1081px) and (max-width: 1320px) {
  .nav > a, .nav-trigger { padding: 14px 9px; font-size: 0.7rem; letter-spacing: 0.12em; }
}
#studio .studio { margin-top: 0; }
#studio .sec-head { margin-bottom: 40px; }
/* Me Time (v44): helles Symbolbild, das sich tonal in die Leinenfläche fügt; Kanten bleiben wie überall scharf */

/* v46: Abstand nur zwischen Preisgruppen, nicht zwischen einzelnen Preiszeilen (Fehler aus v42) */
.plist > .prow + .prow { margin-top: 0; }

/* v47: Signature Collection auf der Startseite als eigene Liste (kein Vergleich mehr) */
.sig-home { display: grid; gap: 28px; max-width: 52rem; }

/* v48: Korean-Baukasten mit drei Kacheln (Pflege ist jetzt inklusive) */
.builder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .builder { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .builder > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--sand); } .builder .total { padding-left: 18px; } }

/* v49: unsichtbare Sprungmarken der alten Website */
.old-anchor { position: absolute; width: 0; height: 0; overflow: hidden; }

/* v50: Vorher/Nachher-Regler – das Nachher-Bild liegt deckungsgleich über dem Vorher-Bild */
.ba .after { position: absolute; inset: 0; }
.ba--wide { aspect-ratio: 2 / 1; }
@media (max-width: 860px) { .ba--wide { aspect-ratio: 4 / 3; } }

/* v50: Lookbook gefiltert – alle Kacheln gleich groß, keine Lücken durch große Kacheln */
.lookbook.is-filtered figure.big, .lookbook.is-filtered figure.wide { grid-column: auto; grid-row: auto; display: block; }
.lookbook.is-filtered figure .frame { aspect-ratio: 3 / 4; height: auto; }

/* v50: CAM Wetlook als Textkachel, solange es kein eigenes Foto gibt */
.type-tile { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(22px, 3vw, 40px); background: #24201D; border: 1px solid rgba(239, 233, 225, .14); color: var(--on-ink); }
.type-tile .tt-top, .type-tile .tt-sub { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-soft); }
.type-tile .tt-word { align-self: center; font: 400 clamp(4rem, 9vw, 8.5rem)/.9 var(--serif); letter-spacing: -.01em; color: var(--on-ink); }
.type-tile .tt-word em { font-style: italic; color: var(--cam-on-ink); }
.type-tile .tt-sub { border-top: 1px solid rgba(239, 233, 225, .18); padding-top: 16px; }

/* v51: Vorher/Nachher im Format 3:2 (Bilder sind genau so zugeschnitten, nichts wird abgeschnitten) */
.ba--32 { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .results--2 { grid-template-columns: 1fr; } .results--2 figure:nth-child(n) { grid-column: auto; } }
/* v51: Korrektur-Block auf der Korean-Seite */
.fix { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(56px, 8vw, 120px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--sand); }
.fix > * { min-width: 0; }
.fix .h3 { margin: 14px 0 16px; }
.fix p { max-width: 46ch; margin: 0 0 14px; }
@media (max-width: 860px) { .fix { grid-template-columns: 1fr; } }
/* v51: Startseite mobil – Schwerpunkte klar als eigene Blöcke getrennt */
@media (max-width: 860px) {
  section[aria-labelledby="edit-natural"] { border-top: 1px solid var(--sand); margin-top: 24px; padding-block: 56px 64px; }
  section[aria-labelledby="edit-brow"] { background: var(--linen); box-shadow: 0 0 0 100vmax var(--linen); clip-path: inset(0 -100vmax); padding-block: 56px 64px; }
}

/* v52: Preislisten-Überschriften auf dunklem Grund sichtbar */
.dark .pgroup-h h3 { color: var(--on-ink); }
.dark .pgroup-h a { color: var(--on-ink-soft); }
/* v52: lange Wörter in Überschriften sauber trennen statt überlaufen */
h1, h2, .h2, .h3 { overflow-wrap: break-word; hyphens: manual; }
/* v52: Lookbook auf dem Handy mit 6 Bildern, Rest über „Mehr Looks anzeigen“ */
.lb-more { display: none; }
@media (max-width: 860px) {
  .lookbook:not(.is-open):not(.is-filtered) > figure:nth-of-type(n+7) { display: none; }
  .lb-more { display: flex; justify-content: center; margin-top: 28px; }
  .lookbook.is-open + .lb-more, .lookbook.is-filtered + .lb-more { display: none; }
  .lb-more button { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: none; border: 1px solid var(--ink); padding: 15px 22px; cursor: pointer; }
}
/* v52: Buchen-Knopf oben auf dem Handy größer und leichter zu treffen */
@media (max-width: 1080px) {
  .hd-book { border: 1px solid var(--ink); padding: 0 14px; min-height: 44px; align-items: center; }
}
/* v52: Grautöne auf Leinen etwas dunkler (Kontrast) */
.linen figcaption, .linen .de, .linen .fine, .linen .pnote, .linen .eyebrow, .cam-surface figcaption { color: #5E554C; }
/* v52: 404-Seite */
.nf { display: grid; gap: 20px; max-width: 46rem; }
.nf-links { list-style: none; margin: 8px 0 12px; padding: 0; border-top: 1px solid var(--sand); }
.nf-links li { border-bottom: 1px solid var(--sand); }
.nf-links a { display: flex; justify-content: space-between; padding: 16px 0; font: 400 1.35rem/1.2 var(--serif); color: var(--ink); text-decoration: none; }

/* v62: Anime-Regler auch auf dem Handy im 2:1-Format der Quelle, damit beide Augen ganz drin sind */
@media (max-width: 860px) { .ba--wide { aspect-ratio: 2 / 1; } }
/* v67: CAM Collection oben mit den drei Looks nebeneinander */
.shero--trio .txt { grid-column: 1 / 6; }
.shero--trio .trio { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); align-self: center; }
.shero--trio .trio a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.shero--trio .trio span { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-soft); }
@media (max-width: 860px) {
  .shero--trio .txt, .shero--trio .trio { grid-column: 1; }
  .shero--trio .trio { order: -1; margin-inline: 0; padding-top: 24px; gap: 8px; }
  .shero--trio .trio span { font-size: 0.625rem; letter-spacing: 0.1em; }
}