/* ============================================================================
   Classic Lashes JL – Unterseiten im Studio-Design
   Lädt nach tailwind.css, site.css und studio.css und bringt die Bausteine der
   Unterseiten (Karten, Buttons, Intensitätsskala, FAQ, Preistabellen) in die
   Welt der Puderdose: Creme-Grund, Papierkarten mit Goldhaarlinie, Tinte,
   Pfännchen statt Nummernkreise.
   ========================================================================== */

/* --- Grund ------------------------------------------------------------------ */
body.sub {
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.flyer-background { background: var(--cream); background-image: none; }
body.sub main { padding-top: 4.75rem; } /* Platz unter der festen Kopfleiste */
body.sub main > section:first-child { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
body.sub h1 { font-weight: 500; letter-spacing: .01em; text-wrap: balance; }
body.sub h2, body.sub h3 { text-wrap: balance; }
body.sub .bar { background: rgba(251, 247, 242, .94); backdrop-filter: saturate(1.2) blur(14px); box-shadow: 0 10px 30px -22px rgba(var(--shadow), .55); }
body.sub .mobile-menu.hidden { display: none; }
body.sub :focus-visible { outline-color: var(--ink); }

/* Zweite Fläche statt halbtransparentem Weiß */
body.sub .bg-white\/35 { background-color: var(--linen); border-color: var(--line); }

/* --- Karten: Papier mit Goldhaarlinie ------------------------------------------ */
body.sub .glass-panel {
  background: var(--paper);
  backdrop-filter: none;
  border: 1px solid rgba(200, 162, 94, .42);
  box-shadow: 8px 26px 50px -38px rgba(var(--shadow), .65), 0 1px 2px rgba(var(--shadow), .06);
}
body.sub .hover-lift:hover { box-shadow: 10px 30px 56px -34px rgba(var(--shadow), .7); }
body.sub .secondary-teaser { background: rgba(255, 253, 251, .7); border-color: var(--line); }
body.sub [class*="aspect-"] { background-color: var(--linen); }

/* --- Buttons: Tinte mit Goldinnenrand, Linie für die zweite Wahl -------------- */
body.sub .rounded-full.bg-brand-text,
body.sub .rounded-full.bg-brand-dark {
  box-shadow: 0 10px 24px -12px rgba(var(--shadow), .6), inset 0 0 0 1.5px rgba(243, 224, 181, .5);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .2s;
}
body.sub .rounded-full.bg-brand-text:hover,
body.sub .rounded-full.bg-brand-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(var(--shadow), .65), inset 0 0 0 1.5px var(--gold-hi); }
body.sub .rounded-full.border-brand-text { border-width: 1.5px; }
/* WhatsApp bleibt der zweite Weg, aber in der Formensprache der Seite (kein Grün) */
body.sub .whatsapp-cta { background: transparent; border-color: currentColor; color: var(--ink); }
body.sub .whatsapp-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Intensität: Pfännchen statt Punkte ---------------------------------------- */
.pan-dot {
  --c: var(--pan-soft);
  display: inline-block; width: .95rem; height: .95rem; border-radius: 50%; padding: 2px; flex: none;
  background: var(--metal-glint), var(--silver-ring);
  box-shadow: 1px 1px 2px rgba(var(--shadow), .3);
}
.pan-dot::before {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--c), white 26%), var(--c) 55%, color-mix(in oklab, var(--c), black 20%));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.intensity-row { gap: .35rem; margin: .35rem 0 .9rem; }
.intensity-dot { width: .6rem; height: .6rem; background: var(--ink); }
.intensity-dot.is-off { background: rgba(31, 25, 26, .16); }
.intensity-label { color: var(--ink-soft); font-weight: 600; letter-spacing: .12em; }

.intensity-scale { gap: .9rem; }
.intensity-scale li,
.intensity-scale li:nth-child(n) {
  display: grid; justify-items: center; gap: .15rem;
  padding: 1.2rem .75rem 1.1rem; border-radius: 1.3rem;
  background: var(--paper); border: 1px solid rgba(200, 162, 94, .42);
  color: var(--ink);
}
.intensity-scale li strong { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; letter-spacing: .02em; }
.intensity-step {
  --c: var(--pan-soft);
  position: relative; width: 3.1rem; height: 3.1rem; margin-bottom: .55rem; padding: 3px;
  background: var(--metal-glint), var(--silver-ring);
  color: transparent; font-size: 0;
  box-shadow: 1px 3px 6px rgba(var(--shadow), .3);
}
.intensity-step::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background:
    radial-gradient(ellipse 72% 52% at 36% 26%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--c), white 26%), var(--c) 55%, color-mix(in oklab, var(--c), black 20%));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .32);
}
.intensity-step::after { /* Stufe als kleine Zahl unter dem Pfännchen bleibt lesbar */
  content: attr(data-step) "/4"; position: absolute; left: 50%; bottom: -1.35rem; translate: -50% 0;
  font: 600 .66rem/1 var(--sans); letter-spacing: .14em; color: var(--ink-soft);
}
.intensity-scale li strong { margin-top: .85rem; }
.intensity-scale li:nth-child(1) .intensity-step { --c: var(--pan-soft); }
.intensity-scale li:nth-child(2) .intensity-step { --c: var(--pan-classic); }
.intensity-scale li:nth-child(3) .intensity-step { --c: var(--pan-mascara); }
.intensity-scale li:nth-child(4) .intensity-step { --c: var(--pan-volumen); }
.intensity-note { color: var(--ink-soft); }

/* --- Fakten und Preistabellen ---------------------------------------------------- */
.look-facts { border-top-color: rgba(200, 162, 94, .6); font-variant-numeric: tabular-nums; }
.look-facts dt { color: var(--ink-soft); }
.look-facts dd { color: var(--ink); }
.price-table { font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { border-bottom-color: rgba(31, 25, 26, .12); }
.price-table caption, .price-table tbody th, .price-table .price-value { color: var(--ink); }
.price-table .price-meta, .price-table thead th { color: var(--ink-soft); }

/* --- FAQ ------------------------------------------------------------------------- */
body.sub .faq-item summary { align-items: center; }
body.sub .faq-toggle {
  position: relative; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1px rgba(200, 162, 94, .8);
  color: var(--ink); font-size: 1.1rem; line-height: 1;
  transition: transform .4s var(--ease-out), background-color .3s;
}
body.sub .faq-item[open] .faq-toggle { background: var(--case); }

/* --- Hinweise / Badges ------------------------------------------------------------ */
.usp-badge { background: var(--ink); color: var(--gold-hi); border: 0; box-shadow: none; }
.jeanny-portrait { border: 0; padding: 4px; background: var(--metal-glint), var(--gold-ring); }
.jeanny-portrait img { border-radius: 50%; }
.result-chip { background: var(--blush); color: var(--ink); }
.check { flex: none; width: .55rem; height: .55rem; margin-top: .55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 94, .22); }

/* --- Nachschliff ------------------------------------------------------------------ */
/* Skala sitzt schon in einer Karte: Stufen ohne eigene Karte (keine verschachtelten Karten) */
.intensity-scale li,
.intensity-scale li:nth-child(n) { background: transparent; border: 0; padding-inline: .25rem; }
/* WhatsApp-Grün aus dem alten Design → Tinte wie alle Hauptbuttons */
body.sub .bg-\[\#25D366\] { background-color: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -12px rgba(var(--shadow), .6), inset 0 0 0 1.5px rgba(243, 224, 181, .5); }
body.sub .bg-\[\#25D366\]:hover { background-color: #000; }
/* Aufklapp-Fragen ohne eigenes Plus (Pflege): gleiches Plus wie überall */
body.sub details:not(.faq-item) > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
body.sub details:not(.faq-item) > summary::-webkit-details-marker { display: none; }
body.sub details:not(.faq-item) > summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1px rgba(200, 162, 94, .8); font-weight: 400; font-size: 1.1rem; line-height: 1;
  transition: transform .4s var(--ease-out), background-color .3s;
}
body.sub details:not(.faq-item)[open] > summary::after { transform: rotate(45deg); background: var(--case); }