/* public site · "Noir & Champagne" (the name of the site comes from Brand::name()) */
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Notte: blu notte · oro · bianco · grafite */
  --noir: #0c1420;
  --noir-2: #16233a;
  --noir-3: #1e3250;
  --blue: #1b3c63;
  --blue-2: #122a47;
  --blue-s: #2e6cb0;
  --ivory: #f6f8fb;
  --paper: #ffffff;
  --ink: #18212e;
  --ink-2: #44546a;
  --muted: #6c7d92;
  --cream: #e6ecf4;
  --cream-2: #afc0d4;
  --champ: #ebd49a;
  --champ-2: #c9a227;
  --champ-3: #8a6e12;
  --rose: #2e6cb0;
  --line: rgba(24, 33, 46, .12);
  --line-d: rgba(226, 236, 248, .13);
  --gold-grad: linear-gradient(135deg, #f3e3b8 0%, #d9be6c 38%, #b4912e 70%, #eedca8 100%);
  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-lg: 26px;
  --r-md: 18px;
  --shadow-lux: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(12,20,32,.04), 0 18px 40px -18px rgba(12,20,32,.22), 0 40px 80px -40px rgba(12,20,32,.28);
  --grain: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 17.5px/1.78 var(--sans); color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; line-height: 1.04; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 500; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
::selection { background: #ebd49a; color: #16202c; }
:focus-visible { outline: 2px solid var(--champ-2); outline-offset: 3px; border-radius: 6px; }

/* ---------- header: floating glass pill ---------- */
.site-head { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
/* intestazione: aspetto costante, niente cambio di pelle */
.head-in {
  pointer-events: auto; width: min(1180px, 100% - 24px); margin-inline: auto; height: 60px; padding: 0 10px 0 20px;
  display: flex; align-items: center; gap: 26px; border-radius: 999px;
  background: rgba(10, 17, 28, .62); border: 1px solid rgba(235, 212, 154, .14);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); transition: background .3s, box-shadow .3s;
}
.site-head.scrolled .head-in { background: rgba(10, 17, 28, .72); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 23px/1 var(--serif); letter-spacing: -.005em; text-decoration: none; color: #fbf3e4; }
.logo-mark { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff6e2 0, #f0d39c 22%, #c9984f 58%, #6b4516 100%); box-shadow: 0 0 0 1px rgba(255,235,200,.25), 0 0 22px rgba(233, 201, 143, .55); }
.head-nav { display: flex; gap: 4px; margin-left: auto; font-size: 14.5px; }
.head-nav a { text-decoration: none; color: #d6cab8; padding: 8px 14px; border-radius: 999px; transition: .2s; }
.head-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.head-cta { text-decoration: none; font-size: 14px; font-weight: 600; color: #1b140b; padding: 10px 18px; border-radius: 999px; background: var(--gold-grad); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px -6px rgba(233, 180, 100, .7); }

/* ---------- buttons ---------- */
.btn-lux, .btn-glass { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 600 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; border: 0; transition: transform .2s, box-shadow .25s, background .25s; }
.btn-lux { color: #1b140b; background: var(--gold-grad); background-size: 160% 160%; box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 -1px 0 rgba(120,70,10,.25) inset, 0 12px 34px -10px rgba(214, 160, 80, .75); }
.btn-lux:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 18px 44px -12px rgba(214, 160, 80, .9); }
.btn-lux span { transition: transform .2s; }
.btn-lux:hover span { transform: translateX(3px); }
.btn-glass { color: #f6ecdc; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 236, 205, .18); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.btn-glass.on-light { color: var(--ink); background: transparent; border-color: rgba(23,19,15,.18); }

/* ---------- aurora + grain ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .9; mix-blend-mode: overlay; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 640px; height: 640px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(233, 190, 120, .9), transparent 65%); }
.aurora i:nth-child(2) { width: 520px; height: 520px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(217, 140, 120, .55), transparent 65%); animation-duration: 22s; }
.aurora i:nth-child(3) { width: 380px; height: 380px; left: 40%; top: 30%; background: radial-gradient(circle, rgba(150, 110, 70, .5), transparent 65%); animation-duration: 26s; }
.aurora.soft i { opacity: .35; }
@keyframes drift { to { transform: translate(-60px, 40px) scale(1.08); } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #1e1812 0%, var(--noir) 60%); color: #f6ecdc; padding: 168px 0 120px; }
.hero::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,201,143,.4), transparent); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ecd9b8; background: rgba(255, 236, 205, .06); border: 1px solid rgba(255, 236, 205, .14); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); box-shadow: 0 0 0 4px rgba(233, 201, 143, .18), 0 0 14px rgba(233, 201, 143, .8); }
.hero h1 { font-size: clamp(52px, 7.6vw, 104px); color: #fbf3e4; }
.lead { font-size: 19.5px; line-height: 1.65; color: #cbbfae; max-width: 560px; margin: 28px 0 36px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 36px 0 0; font-size: 13.5px; color: #a89b88; }
.trust li::before { content: "✓"; color: var(--champ); margin-right: 8px; }

/* app-style preview card */
.phone {
  position: relative; display: grid; gap: 10px; padding: 22px; border-radius: 34px; text-decoration: none; color: #f6ecdc;
  background: linear-gradient(160deg, rgba(255, 245, 225, .12), rgba(255, 245, 225, .03));
  border: 1px solid rgba(255, 236, 205, .16); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 10px rgba(255, 236, 205, .03);
  transform: rotate(2deg); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.phone:hover { transform: rotate(0) translateY(-6px); }
.phone-top { display: flex; justify-content: space-between; align-items: baseline; }
.phone-top b { font: 600 22px var(--serif); }
.phone-top small { color: #a89b88; font-size: 12px; }
.phone-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.phone-bar i { display: block; width: 60%; height: 100%; background: var(--gold-grad); }
.phone-q { font: 500 21px/1.25 var(--serif); margin: 8px 0 4px; }
.phone-opt { padding: 12px 14px; border-radius: 14px; font-size: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.phone-opt.on { background: rgba(233, 201, 143, .14); border-color: rgba(233, 201, 143, .55); box-shadow: 0 0 24px -6px rgba(233, 201, 143, .5); }
.phone-res { margin-top: 8px; padding: 16px; border-radius: 18px; background: var(--gold-grad); color: #1b140b; display: grid; gap: 2px; }
.phone-res small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.phone-res b { font: 600 24px/1.1 var(--serif); }
.phone-res em { font-style: normal; font-size: 13px; opacity: .75; }

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; padding: 120px 0; }
.sec.light { background: var(--ivory); }
.sec.dark { background: var(--noir); color: #f6ecdc; }
.sec.champagne { background: linear-gradient(180deg, #f3e7d3, #efe0c7); }
.sec-head { margin-bottom: 56px; position: relative; z-index: 1; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champ-2); margin: 0 0 16px; }
.sec-head h2, .band-in h2 { font-size: clamp(38px, 5vw, 64px); }
.sec.dark h2 { color: #fbf3e4; }
.soon { color: var(--muted); font-style: italic; }
.center { text-align: center; margin-top: 50px; position: relative; z-index: 1; }

/* article cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; background: var(--paper); box-shadow: var(--shadow-lux); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.card:hover { transform: translateY(-8px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -24px rgba(40,25,5,.35), 0 60px 100px -50px rgba(40,25,5,.3); }
.card-art { position: relative; height: 170px; background: radial-gradient(90% 120% at 80% 0%, #f0d39c, #b7823a 55%, #3b2810); overflow: hidden; }
.card:nth-child(3n+2) .card-art { background: radial-gradient(90% 120% at 20% 0%, #f3c9b8, #b56f5a 55%, #3a1e17); }
.card:nth-child(3n+3) .card-art { background: radial-gradient(90% 120% at 60% 0%, #d9d1b9, #7d7656 55%, #23211a); }
.card-art::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: overlay; }
.card-art::before { content: ""; position: absolute; width: 140px; height: 140px; right: -30px; bottom: -40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 26px rgba(255,255,255,.06), 0 0 0 52px rgba(255,255,255,.04); transition: transform .6s; }
.card:hover .card-art::before { transform: scale(1.12); }
.card-no { position: absolute; left: 24px; bottom: 16px; font: italic 500 54px/1 var(--serif); color: rgba(255, 250, 240, .92); }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; flex: 1; }
.card h3 { font-size: 27px; line-height: 1.1; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.card-meta { font-size: 12px; color: var(--champ-2); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.card-more { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14.5px; }
.card-more span { display: inline-block; transition: transform .2s; }
.card:hover .card-more span { transform: translateX(4px); }

/* type tiles */
.types { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.type { position: relative; overflow: hidden; display: grid; gap: 6px; align-content: end; min-height: 230px; padding: 24px; border-radius: var(--r-lg); text-decoration: none; color: #fbf3e4; background: rgba(255, 245, 225, .04); border: 1px solid var(--line-d); transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.type:hover { transform: translateY(-6px); border-color: rgba(233, 201, 143, .45); }
.type b { font: 600 32px/1 var(--serif); }
.type small { color: #b3a692; font-size: 13.5px; }
.type-orb { position: absolute; width: 170px; height: 170px; right: -40px; top: -40px; border-radius: 50%; filter: blur(4px); opacity: .9; transition: transform .6s; }
.type:hover .type-orb { transform: scale(1.15); }
.t-frisch .type-orb { background: radial-gradient(circle at 35% 35%, #f6fff0, #a9d8c4 40%, #2f6f68 75%, transparent 76%); }
.t-blumig .type-orb { background: radial-gradient(circle at 35% 35%, #fff2f0, #f0b3a5 40%, #9a4a46 75%, transparent 76%); }
.t-orientalisch .type-orb { background: radial-gradient(circle at 35% 35%, #fff4dc, #e9b96a 40%, #8a4d16 75%, transparent 76%); }
.t-holzig .type-orb { background: radial-gradient(circle at 35% 35%, #f4ead8, #b49a72 40%, #4e3a22 75%, transparent 76%); }

/* travel band */
.band-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.band-p { font-size: 18px; color: var(--ink-2); margin: 24px 0 0; max-width: 520px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticks li { display: grid; gap: 2px; padding: 20px 22px 20px 64px; position: relative; border-radius: var(--r-md); background: rgba(255, 252, 247, .7); box-shadow: var(--shadow-lux); backdrop-filter: blur(8px); }
.ticks li::before { content: "✦"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: #3b2810; font-size: 13px; }
.ticks b { font-size: 16px; }
.ticks span { color: var(--muted); font-size: 14px; }

/* ---------- article ---------- */
.post-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1b2d48, var(--noir) 68%); color: #eef3f9; padding: 148px 0 68px; }
.post-hero-in { position: relative; z-index: 1; max-width: 900px; }
.back { display: inline-block; font-size: 14px; color: #b3a692; text-decoration: none; margin-bottom: 22px; }
.back:hover { color: var(--champ); }
.post-hero h1 { font-size: clamp(38px, 5.4vw, 70px); color: #fcfaf5; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #b3a692; font-size: 14.5px; margin: 26px 0 0; }
.post-meta i { font-style: normal; opacity: .5; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #2a1c0b; font: 600 15px var(--serif); }
.ad-note { font-size: 13px; color: #e6d6bd; background: rgba(233, 201, 143, .1); border: 1px solid rgba(233, 201, 143, .25); border-radius: 12px; padding: 10px 14px; margin-top: 22px; display: inline-block; }
.post-grid { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 64px; justify-content: center; padding: 64px 0 120px; }
.post-grid:not(:has(.toc)) { grid-template-columns: minmax(0, 720px); }
.toc { position: sticky; top: 100px; align-self: start; font-size: 14px; padding: 20px 20px 14px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-lux); }
.toc strong { display: block; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champ-2); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; color: var(--ink-2); }
.toc li { padding: 4px 0; line-height: 1.4; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--champ-3); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 1.7em 0 .45em; scroll-margin-top: 100px; }
.prose h3 { font-size: 25px; margin: 1.5em 0 .35em; }
.prose p, .prose li { font-size: 18.5px; line-height: 1.8; color: #2a231c; }
.prose > p:first-of-type { font-size: 21px; color: #3a3027; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--champ-3); text-decoration-color: rgba(141, 98, 39, .35); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--champ-2); }
.prose blockquote { margin: 2em 0; padding: 22px 26px; border-radius: var(--r-md); background: linear-gradient(135deg, #f6ebd8, #f1e2c9); border: 0; font: italic 500 23px/1.5 var(--serif); color: #3b2f22; }
.prose blockquote p { font: inherit; color: inherit; margin: 0; }
.prose figure { margin: 2.2em 0; }
.prose img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-lux); }
.prose figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.prose em { color: var(--ink-2); }

/* A/B call-to-action box */
.cta-box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 2.2em 0; padding: 24px 26px; border-radius: var(--r-md); text-decoration: none !important; color: #fbf3e4 !important; background: radial-gradient(120% 140% at 100% 0%, #3a2c1b, var(--noir) 70%); box-shadow: 0 24px 50px -24px rgba(20, 12, 2, .7); font: 600 23px/1.2 var(--serif); }
.cta-box::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: overlay; pointer-events: none; }
.cta-box b { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: #1b140b; font: 600 20px var(--sans); transition: transform .25s; }
.cta-box:hover b { transform: translateX(4px) rotate(-8deg); }

/* ---------- parfum-test ---------- */
.quiz-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1f1913, var(--noir) 65%); color: #f6ecdc; padding: 150px 0 90px; }
.quiz-in { position: relative; z-index: 1; max-width: 780px; }
.quiz-hero h1 { font-size: clamp(42px, 6vw, 76px); color: #fbf3e4; }
.quiz-hero .lead { margin-bottom: 40px; }
.quiz { position: relative; padding: 30px; border-radius: 32px; background: linear-gradient(160deg, rgba(255, 245, 225, .1), rgba(255, 245, 225, .03)); border: 1px solid rgba(255, 236, 205, .14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 40px 90px -40px rgba(0, 0, 0, .9); }
.quiz-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 26px; }
.quiz-bar i { display: block; height: 100%; width: 0; background: var(--gold-grad); box-shadow: 0 0 14px rgba(233, 201, 143, .8); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.quiz-step { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.quiz.js .quiz-step { display: none; margin: 0; }
.quiz.js .quiz-step.on { display: block; animation: qin .4s cubic-bezier(.2,.8,.2,1); }
@keyframes qin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.quiz-step legend { font: 500 clamp(26px, 3.4vw, 34px)/1.15 var(--serif); color: #fbf3e4; margin-bottom: 20px; padding: 0; }
.quiz-num { display: block; font: 600 12px var(--sans); letter-spacing: .16em; color: var(--champ); margin-bottom: 10px; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border-radius: 16px; cursor: pointer; font-size: 16.5px; color: #eadfcd; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); transition: .2s; }
.quiz-opt:hover { background: rgba(255, 255, 255, .08); border-color: rgba(233, 201, 143, .35); transform: translateX(3px); }
.quiz-opt input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 1.5px solid rgba(255, 236, 205, .4); display: grid; place-items: center; }
.quiz-opt input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-grad); transform: scale(0); transition: transform .2s; }
.quiz-opt input:checked { border-color: var(--champ); }
.quiz-opt input:checked::after { transform: scale(1); }
.quiz-opt:has(input:checked) { background: rgba(233, 201, 143, .12); border-color: rgba(233, 201, 143, .6); box-shadow: 0 0 30px -10px rgba(233, 201, 143, .6); color: #fff; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.quiz-back { background: none; border: 0; color: #b3a692; font: inherit; font-size: 15px; cursor: pointer; padding: 8px 0; }
.quiz-back:hover { color: var(--champ); }
.quiz-info { max-width: 760px; padding: 80px 0 110px; }
.second { font-size: 16px; color: #cbbfae; }
.second a { color: var(--champ); }
.note-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 26px 0 0; }
.note-chips li { padding: 9px 16px; border-radius: 999px; font-size: 14.5px; color: #f3e6d0; background: rgba(255, 245, 225, .07); border: 1px solid rgba(255, 236, 205, .16); backdrop-filter: blur(8px); }
.quiz-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.result.type-frisch .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(150, 215, 190, .8), transparent 65%); }
.result.type-blumig .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(240, 160, 150, .8), transparent 65%); }
.result.type-holzig .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(190, 160, 115, .8), transparent 65%); }

/* ---------- legal, 404 ---------- */
.legal { padding: 150px 0 100px; }
.legal h1 { font-size: 52px; margin-bottom: 24px; }
.legal-note { color: var(--muted); font-size: 14px; font-style: italic; }
.nf { padding: 190px 0 140px; text-align: center; }
.nf .kicker { font-size: 12.5px; letter-spacing: .2em; color: var(--champ-2); font-weight: 600; }
.nf h1 { font-size: clamp(44px, 6vw, 68px); margin-bottom: 16px; }
.nf p { color: var(--ink-2); margin-bottom: 34px; }

/* ---------- footer ---------- */
.site-foot { position: relative; background: var(--noir); color: #cbbfae; padding: 70px 0 34px; }
.site-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,201,143,.35), transparent); }
.foot-in { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-in p { margin: 12px 0 0; color: #8f8474; font-size: 15px; }
.foot-in nav { display: flex; gap: 6px 24px; flex-wrap: wrap; font-size: 14.5px; align-items: center; }
.foot-in nav a { text-decoration: none; color: #cbbfae; }
.foot-in nav a:hover { color: var(--champ); }
.foot-small { color: #6f665a; font-size: 13px; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line-d); }

/* ---------- scroll reveal ---------- */
.rv [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.rv [data-reveal].in { opacity: 1; transform: none; }
.rv .phone[data-reveal].in { transform: rotate(2deg); }
.rv .phone[data-reveal].in:hover { transform: rotate(0) translateY(-6px); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .band-in { grid-template-columns: 1fr; gap: 50px; }
  .phone { max-width: 380px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .types { grid-template-columns: 1fr 1fr; }
  .post-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; }
  .toc { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .head-in { height: 54px; padding: 0 6px 0 16px; gap: 10px; }
  .head-nav { display: none; }
  .head-cta { margin-left: auto; padding: 9px 15px; }
  .logo { font-size: 21px; }
  .hero { padding: 120px 0 80px; }
  .hero h1 { font-size: 50px; }
  .lead { font-size: 17.5px; }
  .sec { padding: 84px 0; }
  .sec-head { margin-bottom: 36px; }
  .cards, .types { grid-template-columns: 1fr; }
  .type { min-height: 150px; }
  .post-hero, .quiz-hero { padding: 116px 0 52px; }
  .prose p, .prose li { font-size: 17.5px; }
  .prose > p:first-of-type { font-size: 19px; }
  .quiz { padding: 22px 18px; border-radius: 26px; }
  .cta-box { font-size: 20px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* darker gold for italic headings on light backgrounds (contrast) */
.sec.light h2 em, .sec.champagne h2 em, .prose h2 em, .nf h1 em, .legal h1 em { background: linear-gradient(135deg, #b5803a 0%, #8d6227 55%, #a8742f 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- topics ---------- */
.topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.topic { position: relative; overflow: hidden; display: grid; gap: 6px; align-content: end; min-height: 250px; padding: 22px; border-radius: var(--r-lg); text-decoration: none; color: #fbf3e4; background: var(--noir-2); box-shadow: 0 30px 60px -36px rgba(20,12,2,.7); transition: transform .45s cubic-bezier(.2,.8,.2,1); isolation: isolate; }
.topic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 80% 0%, var(--tc, #c9984f), transparent 62%); opacity: .85; transition: opacity .4s, transform .6s; }
.topic::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); mix-blend-mode: overlay; }
.topic:hover { transform: translateY(-8px); }
.topic:hover::before { transform: scale(1.1); opacity: 1; }
.topic b { font: 600 30px/1 var(--serif); }
.topic small { color: #cdbfaa; font-size: 13.5px; line-height: 1.45; }
.topic em { font-style: normal; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--champ); margin-top: 8px; }
.topic-ic { position: absolute; top: 20px; left: 22px; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,245,225,.1); border: 1px solid rgba(255,236,205,.18); backdrop-filter: blur(6px); }
.topic-ic::after { content: ""; position: absolute; inset: 11px; background: var(--champ); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.tp-parfum { --tc: #a8861c; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5' y='9' width='14' height='12' rx='3'/%3E%3Cpath d='M9 9V6h6v3M12 6V3M10 3h4'/%3E%3C/svg%3E"); }
.tp-auto { --tc: #2f6ea8; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16v-3l2-5h14l2 5v3H3z'/%3E%3Ccircle cx='7.5' cy='16.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.8'/%3E%3C/svg%3E"); }
.tp-zuhause { --tc: #8a5a3c; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2 3 3 4.5 3 6.5a3 3 0 0 1-6 0C9 7.5 10 6 12 3z'/%3E%3Crect x='7' y='13' width='10' height='8' rx='2'/%3E%3C/svg%3E"); }
.tp-pflege { --tc: #4e7a6a; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z'/%3E%3C/svg%3E"); }
.tp-geschenke { --tc: #7a3f5e; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='12' rx='2'/%3E%3Cpath d='M3 9h18M12 9v12M12 9c-2-4-6-4-6-1.5S10 9 12 9zm0 0c2-4 6-4 6-1.5S14 9 12 9z'/%3E%3C/svg%3E"); }
.card.c-auto .card-art { background: radial-gradient(90% 120% at 78% 0%, #a9c6e2, #2f6ea8 52%, #0c1420); }
.card.c-zuhause .card-art { background: radial-gradient(90% 120% at 30% 0%, #e0b793, #8a5a3c 52%, #0c1420); }
.card.c-pflege .card-art { background: radial-gradient(90% 120% at 60% 0%, #bcd6cb, #4e7a6a 52%, #0c1420); }
.card.c-geschenke .card-art { background: radial-gradient(90% 120% at 70% 0%, #d8a9bf, #7a3f5e 52%, #0c1420); }
.card.c-parfum .card-art { background: radial-gradient(90% 120% at 80% 0%, #e8cf9a, #a8861c 52%, #0c1420); }
.post-hero .pill { margin-top: 4px; }
@media (max-width: 1100px) { .topics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .topics { grid-template-columns: 1fr 1fr; gap: 12px; } .topic { min-height: 190px; padding: 16px; } .topic b { font-size: 24px; } .topic-ic { top: 14px; left: 16px; width: 38px; height: 38px; } }
@media (max-width: 640px) { .topic { min-height: 230px; padding-top: 72px; } .topic:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 200px; } }

/* ---------- hero photo slideshow (pure CSS crossfade + slow zoom) ---------- */

/* ---------- v3: crisp photos (no blur), text in an adaptive window ---------- */

/* phones have 3x pixel density: the full 4K file keeps them sharp too */

.hero-copy.window {
  justify-self: start; width: fit-content; max-width: 640px; padding: 40px 44px 34px; border-radius: 28px;
  background: rgba(12, 10, 8, .8); border: 1px solid rgba(233, 201, 143, .26);
  box-shadow: 0 1px 0 rgba(255, 240, 210, .08) inset, 0 30px 70px -30px rgba(0, 0, 0, .85);
}
.hero-copy.window h1 { font-size: clamp(46px, 5.6vw, 82px); }
.hero-copy.window .lead { margin: 22px 0 28px; }
.hero-copy.window .trust { margin-top: 26px; }

/* text over photos sits in a frosted-glass window; the photo itself stays 4K-sharp */
.hero-copy.window { background: rgba(12, 10, 8, .42); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); border-color: rgba(255, 236, 205, .22); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-copy.window { background: rgba(12, 10, 8, .8); } }

@media (max-width: 640px) {
  
  .hero-copy.window { width: auto; padding: 26px 22px 22px; border-radius: 24px; background: rgba(12, 10, 8, .5); }
  .hero-copy.window h1 { font-size: 42px; }
  .hero-copy.window .lead { font-size: 16.5px; margin: 16px 0 22px; }
  .hero-copy.window .trust { display: none; }
}

/* ---------- v4: all three photos visible at once (triptych), crisp; text in a frosted window ---------- */
.hero.has-tri { position: relative; min-height: min(94vh, 940px); padding: 0; display: grid; background: var(--noir); }
.hero.has-tri::before { display: none; }

.hero.has-tri .hero-grid { position: relative; z-index: 2; grid-template-columns: 1fr; align-self: center; padding: 120px 0 150px; pointer-events: none; }
.hero.has-tri .hero-copy.window { pointer-events: auto; }
@media (max-width: 900px) {
  .hero.has-tri { min-height: 0; }
  
  
   
  .hero.has-tri .hero-grid { padding: 16px 0 26px; margin-top: 0; }
  
}

/* ---------- v5: the three photos stay behind the WHOLE homepage; every section sits in a frosted window ---------- */

.photo-home { position: relative; z-index: 1; }
.photo-home .hero.has-tri { background: transparent; min-height: min(94vh, 940px); }
.photo-home .sec { background: transparent !important; padding: 34px 0; }
.photo-home .sec:first-of-type { padding-top: 0; }
.photo-home .sec > .wrap { position: relative; padding: 52px 52px 56px; border-radius: 32px;
  background: rgba(12, 10, 8, .5); border: 1px solid rgba(255, 236, 205, .2);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,240,210,.08) inset, 0 30px 70px -30px rgba(0,0,0,.85); }
.photo-home .sec > .aurora { display: none; }
.photo-home .sec h2, .photo-home .sec h3:not(.card h3) { color: #fbf3e4; }
.photo-home .sec h2 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }
.photo-home .sec .soon, .photo-home .band-p { color: #d8ccba; }
.photo-home .ticks li { background: rgba(255, 252, 247, .92); }
.photo-home .site-foot { position: relative; z-index: 1; }
.photo-home + .site-foot, body:has(.photo-home) .site-foot { position: relative; z-index: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .photo-home .sec > .wrap { background: rgba(12,10,8,.85); } }
@media (max-width: 640px) {
  .photo-home .sec { padding: 18px 0; }
  .photo-home .sec > .wrap { padding: 30px 20px 32px; border-radius: 24px; width: calc(100% - 20px); }
  .photo-home .hero.has-tri { min-height: 100svh; }
}
@media (max-width: 900px) {  .photo-home .hero.has-tri .hero-grid { padding: 110px 0 30px; margin-top: 0; } }

/* ---------- v6: photos stacked top-to-bottom, scrolling with the page ---------- */

.photo-band { position: relative; background: var(--noir) var(--img) center / cover no-repeat; padding: 40px 0; }
.photo-band:first-child { padding-top: 0; }
.photo-band + .photo-band { border-top: 3px solid var(--noir); }
.photo-home .hero.has-tri { min-height: 100vh; }
@media (max-width: 640px) { .photo-band { padding: 20px 0; } .photo-home .hero.has-tri { min-height: 100svh; } }
.legal h2 { font-size: 26px; margin: 1.6em 0 .4em; }
.legal p { color: var(--ink-2); line-height: 1.75; }
.legal a { color: var(--champ-3); }

/* =====================================================================
   v7 · big update: navigation, search, article tools, smart features
   ===================================================================== */

/* phones get the portrait crop of the background photos: sharp and much lighter */
@media (max-width: 760px) and (orientation: portrait) { .photo-band { background-image: var(--img-p, var(--img)); } }

/* accessibility helpers */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--champ); color: #1b140b; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.logo-word { white-space: nowrap; }

/* header: icons, burger, active link */
.head-nav a[aria-current="page"] { color: #fff; background: rgba(233, 201, 143, .14); }
.head-ic { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #e6d9c4; transition: background .2s, color .2s; }
.head-ic:hover { background: rgba(255,255,255,.08); color: #fff; }
.head-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.merk-ic b { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--champ); color: #1b140b; font: 700 10.5px/17px var(--sans); text-align: center; }
.head-nav + .head-ic { margin-left: 4px; }
.head-burger { display: none; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; position: relative; }
.head-burger span { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: #f3e6d0; transition: transform .3s, top .3s; }
.head-burger span:first-child { top: 16px; } .head-burger span:last-child { top: 24px; }
.head-burger[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.head-burger[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }

/* mobile menu sheet */
.menu { position: fixed; inset: 0; z-index: 45; background: rgba(8, 7, 5, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu-in { position: absolute; inset: 0 0 auto; max-height: 100svh; overflow-y: auto; padding: 88px 18px 28px; background: linear-gradient(180deg, #15120f, #0c0a08); border-bottom: 1px solid var(--line-d); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); animation: menuIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes menuIn { from { transform: translateY(-14px); opacity: 0; } }
.menu-search { display: flex; gap: 8px; margin-bottom: 22px; }
.menu-search input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,236,205,.18); background: rgba(255,255,255,.05); color: #fbf3e4; font: 16px var(--sans); }
.menu-search button { width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--gold-grad); color: #1b140b; font-size: 20px; cursor: pointer; }
.menu-label { margin: 18px 4px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--champ-2); }
.menu-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-topics a { display: grid; gap: 3px; padding: 14px 15px; border-radius: 18px; text-decoration: none; color: #fbf3e4; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--tc) 38%, transparent), rgba(255,255,255,.03) 70%); border: 1px solid rgba(255,236,205,.1); }
.menu-topics a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-topics b { font: 600 22px/1.05 var(--serif); }
.menu-topics small { font-size: 12.5px; line-height: 1.35; color: #bfb19c; }
.menu-tools { display: grid; }
.menu-tools a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 6px; color: #eadfcd; text-decoration: none; border-bottom: 1px solid var(--line-d); font-size: 16px; }
.menu-tools small { color: var(--champ); font-size: 12.5px; }
html.menu-open { overflow: hidden; }

/* search overlay */
.search-pop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 7, 5, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; align-items: start; justify-items: center; padding: 14vh 16px 0; }
.search-box { width: min(680px, 100%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 22px; border-radius: 999px; background: var(--paper); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); animation: menuIn .3s cubic-bezier(.2,.8,.2,1); }
.search-box svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--champ-3); stroke-width: 2; stroke-linecap: round; }
.search-box input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font: 18px var(--sans); color: var(--ink); outline: none; }
.search-x { border: 1px solid var(--line); background: #f4ece0; border-radius: 10px; padding: 6px 10px; font: 600 12px var(--sans); color: var(--ink-2); cursor: pointer; }

/* breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 22px; font-size: 13.5px; color: #a89b88; }
.crumbs li + li::before { content: "›"; margin: 0 9px; opacity: .55; }
.crumbs a { color: #cbbfae; text-decoration: none; } .crumbs a:hover { color: var(--champ); }
.crumbs [aria-current] { color: #8f8474; }

/* article: cover, progress, toc, helpful, share, author */
.read-bar { position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(233,201,143,.7); }
.post-cover { margin: -36px auto 0; position: relative; z-index: 2; }
.post-cover img { width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 40px 80px -40px rgba(20,12,2,.55); display: block; }
.post-meta a { color: #e6d6bd; text-decoration: none; border-bottom: 1px solid rgba(233,201,143,.35); }
.avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
.toc details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.toc details > summary::-webkit-details-marker { display: none; }
.toc-n { font-size: 12px; color: var(--muted); }
.toc summary strong { margin-bottom: 0; }
.toc details[open] summary { margin-bottom: 8px; }
.toc a.on { color: var(--champ-3); font-weight: 600; }
.prose a.lx { color: inherit; text-decoration: underline dotted rgba(141, 98, 39, .55); text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: help; }
.prose a.lx:hover { color: var(--champ-3); }
.prose figure img { height: auto; }
.helpful { margin: 56px 0 0; padding: 26px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-lux); text-align: center; }
.helpful-q { font: 600 24px var(--serif); margin: 0 0 14px; }
.helpful-btns { display: flex; justify-content: center; gap: 10px; }
.helpful-btns button { padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(23,19,15,.14); background: #fff; font: 600 15px var(--sans); cursor: pointer; transition: .2s; }
.helpful-btns button:hover { border-color: var(--champ-2); transform: translateY(-2px); }
.helpful-more { display: grid; gap: 10px; text-align: left; max-width: 520px; margin: 0 auto; }
.helpful-more textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(23,19,15,.16); font: 15px/1.5 var(--sans); resize: vertical; }
.helpful-more .btn-lux { justify-self: start; }
.helpful-thx { margin: 0; color: var(--ink-2); }
.btn-lux.sm { padding: 11px 20px; font-size: 14px; }
.share { margin-top: 28px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.share > p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--champ-2); }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sh { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(23,19,15,.12); background: #fff; color: var(--ink); font: 600 13.5px var(--sans); text-decoration: none; cursor: pointer; transition: .2s; }
.sh:hover { border-color: var(--champ-2); transform: translateY(-2px); }
.sh.wa:hover { background: #e9f8ee; } .sh.pin:hover { background: #fdeeee; }
.sh.merk.on { background: #f6ebd8; border-color: var(--champ-2); color: var(--champ-3); }
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; margin-top: 46px; padding: 26px; border-radius: var(--r-md); background: linear-gradient(135deg, #f6ebd8, #f1e2c9); }
.author-img img, .author-img span { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--gold-grad); font: 600 40px var(--serif); color: #2a1c0b; box-shadow: 0 10px 24px -10px rgba(60,40,10,.5); }
.author-kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--champ-3); }
.author-name { margin: 2px 0 8px; font: 600 26px var(--serif); }
.author-box p { margin: 0 0 8px; color: #3b2f22; font-size: 15.5px; line-height: 1.65; }
.author-box a { color: var(--champ-3); font-weight: 600; text-decoration: none; font-size: 15px; }
.related { padding-top: 40px; }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 0 110px; }
.ns { display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--r-md); text-decoration: none; background: var(--noir); color: #fbf3e4; transition: transform .3s; }
.ns:hover { transform: translateY(-4px); }
.ns b { font: 600 24px var(--serif); color: var(--champ); }
.ns span { color: #cbbfae; font-size: 14.5px; }
.preview-bar { position: sticky; top: 0; z-index: 80; padding: 10px 16px; text-align: center; background: #a33; color: #fff; font: 600 14px var(--sans); }

/* cards: real photos + merk button */
.card { position: relative; }
.card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.card-art.has-img { background: #1d1915; }
.card-art.has-img::before { display: none; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-art img { transform: scale(1.05); }
.card-merk { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(12,10,8,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 18px; cursor: pointer; transition: transform .2s, background .2s; }
.card-merk:hover { transform: scale(1.08); }
.card-merk.on { background: var(--gold-grad); color: #3b2810; border-color: transparent; }

/* topic pages */
.topic-intro { max-width: 780px; margin: 0 0 54px; }
.topic-intro p { font-size: 18.5px; line-height: 1.8; color: #2a231c; margin: 0 0 16px; }
.topic-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px !important; }
.topic-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 56px; font-size: 14px; color: var(--muted); }
.topic-others a { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); font-weight: 600; }
.topic-others a:hover { border-color: var(--champ-2); }

/* home: tools */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 1; }
.tool { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; min-height: 230px; padding: 28px; border-radius: var(--r-lg); text-decoration: none; color: #fbf3e4; background: radial-gradient(120% 120% at 100% 0%, var(--tc), #15120f 70%); border: 1px solid rgba(255,236,205,.12); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tool:hover { transform: translateY(-6px); }
.tool b { font: 600 30px/1.05 var(--serif); }
.tool span { color: #d8ccba; font-size: 15px; line-height: 1.6; }
.tool em { margin-top: auto; font-style: normal; font-weight: 600; font-size: 14px; color: var(--champ); }
.t-gift { --tc: rgba(122, 63, 94, .7); } .t-lex { --tc: rgba(168, 134, 28, .62); } .t-ask { --tc: rgba(47, 110, 168, .7); }

/* forms */
.form-err { padding: 12px 16px; border-radius: 12px; background: #fbe9e6; color: #8a2b20; font-size: 15px; }
.form-ok { padding: 26px; border-radius: var(--r-md); background: #eef6ef; color: #1f4a2a; }
.form-ok.slim { padding: 14px 18px; font-weight: 600; }
.form-ok h2 { font-size: 30px; margin-bottom: 8px; color: #1f4a2a; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--champ-3); }
.pb-small { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.pb-small a { color: var(--champ-3); }

/* quiz result: duftwelt, duftprofil box, story */
.result-tag { margin: 10px 0 0; font: italic 500 26px var(--serif); color: var(--champ); }
.quiz-actions.top { margin-top: 34px; }
.result-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding: 80px 0 40px; }
.result-body .quiz-info { padding: 0; }
.season-grid, .world-grid { display: grid; gap: 14px; margin: 18px 0 8px; }
.season-grid { grid-template-columns: 1fr 1fr; }
.world-grid { grid-template-columns: repeat(3, 1fr); }
.season-card, .world { padding: 20px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-lux); }
.season-card b, .world b { display: block; font: 600 21px var(--serif); margin-bottom: 4px; }
.season-card p, .world p { font-size: 15.5px !important; line-height: 1.6 !important; margin: 0 0 8px; }
.world a { font-size: 14px; font-weight: 600; text-decoration: none; }
.wi { display: block; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; background: var(--gold-grad); -webkit-mask: var(--m) center / 24px no-repeat; mask: var(--m) center / 24px no-repeat; }
.wi-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7v9H3z'/%3E%3C/svg%3E"); background: #b56f5a; }
.wi-car { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 16v-4l2-5h12l2 5v4zM7 16v2M17 16v2'/%3E%3C/svg%3E"); background: #5d7f86; }
.wi-care { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v4H9zM7 7h10v14H7z'/%3E%3C/svg%3E"); background: #8a8a6a; }
.profile-box { position: sticky; top: 100px; padding: 30px 28px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 0%, #2a2016, var(--noir) 70%); color: #eadfcd; box-shadow: 0 40px 80px -40px rgba(20,12,2,.7); }
.profile-box h2 { color: #fbf3e4; font-size: 32px; margin: 4px 0 10px; }
.profile-box > p { color: #cbbfae; font-size: 15.5px; }
.pb-kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--champ); }
.pb-form { display: grid; gap: 14px; margin-top: 18px; }
.pb-form input[type=email] { height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,236,205,.2); background: rgba(255,255,255,.06); color: #fbf3e4; font: 16px var(--sans); }
.pb-form input[type=email]::placeholder { color: #8f8474; }
.profile-box .check { color: #cbbfae; font-size: 12.5px; }
.profile-box .pb-small { color: #8f8474; }
.profile-box .pb-small a { color: var(--champ); }
.profile-box .form-err { background: rgba(200, 80, 60, .18); color: #ffd9cf; }
.quiz-more { max-width: 1180px; padding: 30px 0 110px; }
.quiz-more ul { max-width: 760px; }
.story-box { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; margin: 40px 0 10px; padding: 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); max-width: 760px; }
.story-box img { width: 170px; height: auto; border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.story-box h3 { font-size: 28px; margin: 0 0 6px; }
.story-box p { font-size: 16px !important; }
.result.type-orientalisch .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(233, 170, 90, .85), transparent 65%); }

/* search + empty states */
.post-hero.slim { padding-bottom: 50px; }
.big-search { display: flex; gap: 10px; margin-top: 28px; max-width: 640px; }
.big-search input { flex: 1; min-width: 0; height: 56px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,236,205,.2); background: rgba(255,255,255,.07); color: #fbf3e4; font: 17px var(--sans); }
.nf .big-search { margin: 0 auto 10px; }
.nf .big-search input { background: #fff; color: var(--ink); border-color: var(--line); }
.muted-line { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }
.empty-search { max-width: 640px; padding: 34px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.empty-search h2 { font-size: 34px; margin-bottom: 10px; }
.empty-search p { color: var(--ink-2); }
.lx-hits { display: grid; gap: 10px; margin-bottom: 40px; max-width: 760px; }
.lx-hit { display: grid; gap: 2px; padding: 16px 20px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-lux); text-decoration: none; }
.lx-hit b { font: 600 22px var(--serif); } .lx-hit span { color: var(--ink-2); font-size: 14.5px; }

/* duftlexikon + duftrad */
.wheel-wrap { display: grid; grid-template-columns: 1fr minmax(260px, 380px) 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 34px; background: radial-gradient(120% 100% at 50% 0%, #211a13, var(--noir) 70%); color: #eadfcd; margin-bottom: 60px; }
.wheel-head h2 { color: #fbf3e4; font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 14px; }
.wheel-head p { color: #cbbfae; font-size: 15.5px; } .wheel-head a { color: var(--champ); }
.wheel svg { width: 100%; height: auto; display: block; overflow: visible; }
.wh-seg { cursor: pointer; outline: none; }
.wh-seg path { fill: var(--c); opacity: .55; stroke: #0c0a08; stroke-width: 1; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); transform-origin: 0 0; }
.wh-seg text { font: 600 10.5px var(--sans); fill: #fff; pointer-events: none; letter-spacing: .02em; }
.wh-seg:hover path, .wh-seg:focus-visible path { opacity: .8; }
.wh-seg.on path { opacity: 1; transform: scale(1.05); }
.wh-seg:focus-visible path { stroke: var(--champ); stroke-width: 2; }
.wh-core { fill: #15120f; stroke: rgba(233,201,143,.4); }
.wh-core-t, .wh-core-s { font: 600 13px var(--serif); fill: var(--champ); }
.wh-panel h3 { color: #fbf3e4; font-size: 38px; margin-bottom: 6px; }
.wh-panel h3::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--c); margin-top: 10px; }
.wh-panel p { color: #cbbfae; font-size: 15.5px; }
.wh-panel dl { margin: 16px 0; display: grid; gap: 6px; }
.wh-panel dt { font-weight: 600; color: #fbf3e4; font-size: 14px; }
.wh-panel dd { margin: 0 0 6px; color: #bfb19c; font-size: 14px; }
.wh-panel a { color: var(--champ); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.az { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; position: sticky; top: 86px; z-index: 5; padding: 10px 0; background: linear-gradient(var(--ivory) 70%, transparent); }
.az a { padding: 8px 15px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-lux); text-decoration: none; font: 600 13.5px var(--sans); }
.lx-group { margin-bottom: 50px; scroll-margin-top: 150px; }
.lx-group h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 18px; }
.lx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.lx-item { padding: 20px 22px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-lux); scroll-margin-top: 150px; transition: box-shadow .4s; }
.lx-item dt { font: 600 24px/1.15 var(--serif); margin-bottom: 6px; }
.lx-item dt small { font: 500 12.5px var(--sans); color: var(--muted); }
.lx-item dd { margin: 0; color: #2a231c; font-size: 15.5px; line-height: 1.65; }
.lx-uses { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.lx-uses a { color: var(--champ-3); }
.lx-item.flash { animation: flash 2.2s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--champ), var(--shadow-lux); } 100% { box-shadow: var(--shadow-lux); } }
.lx-missing { margin-top: 30px; color: var(--ink-2); } .lx-missing a { color: var(--champ-3); }

/* geschenk-finder */
.quiz-opts.many { grid-template-columns: 1fr 1fr; }
.gift-res { max-width: 860px; padding: 70px 0 110px; }
.gift-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.gift-idea { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.gift-no { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); font: 600 26px var(--serif); color: #2a1c0b; }
.gift-idea h2 { font-size: 28px; margin-bottom: 6px; }
.gift-idea p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.gift-more { margin-top: 40px; } .gift-more h2 { font-size: 30px; margin-bottom: 10px; } .gift-more a { color: var(--champ-3); }

/* frag / kontakt */
.frag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding: 70px 0 110px; align-items: start; }
.frag-form form { display: grid; gap: 14px; }
.frag-form label:not(.check) { font-weight: 600; font-size: 15px; }
.frag-form small { font-weight: 400; color: var(--muted); }
.frag-form textarea, .frag-form input:not([type=checkbox]) { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(23,19,15,.16); background: #fff; font: 16px/1.5 var(--sans); color: var(--ink); margin-top: 6px; }
.frag-form textarea:focus, .frag-form input:focus { outline: 2px solid var(--champ-2); outline-offset: 1px; }
.frag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frag-form .btn-lux { justify-self: start; }
.frag-side { padding: 28px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.frag-side h2 { font-size: 32px; margin-bottom: 8px; } .frag-side h3 { font-size: 22px; margin: 24px 0 6px; }
.frag-side p { color: var(--ink-2); font-size: 15.5px; }
.mail-link { font-weight: 600; color: var(--champ-3); word-break: break-all; }
.answered { padding-left: 18px; } .answered a { color: var(--champ-3); }

/* duftprofil page (+ print = PDF) */
.profile-page { padding: 130px 0 90px; }
.profile-card { padding: 44px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.profile-card h1 { font-size: clamp(42px, 6vw, 66px); margin: 6px 0 4px; }
.profile-card .result-tag { color: var(--champ-3); }
.profile-card .lead { color: var(--ink-2); }
.profile-card h2 { font-size: 28px; margin: 30px 0 8px; }
.note-chips.light li { color: var(--ink); background: #f6ebd8; border-color: #ead9bb; }
.world-dl dt { font-weight: 600; margin-top: 10px; } .world-dl dd { margin: 2px 0 0; color: var(--ink-2); }
.avoid { padding: 14px 18px; border-radius: 14px; background: #f6ebd8; }
.profile-foot { margin: 34px 0 0; font-size: 13px; color: var(--muted); text-align: right; font-style: italic; }
@media print {
  .site-head, .site-foot, .no-print, .to-top, .skip, .read-bar, .menu, .search-pop, .form-ok { display: none !important; }
  body { background: #fff; }
  .profile-page { padding: 0; }
  .profile-card { box-shadow: none; padding: 0; }
  .season-card { box-shadow: none; border: 1px solid #e8dcc6; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 80%; color: #666; }
}

/* back to top */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(18,15,12,.82); border: 1px solid rgba(255,236,205,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transition: transform .2s; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: var(--champ); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* footer, 4 columns */
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot-in nav { flex-direction: column; align-items: flex-start; gap: 9px; }
.foot-in nav b { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--champ-2); margin-bottom: 4px; }
.foot-brand p a { color: #cbbfae; }
.foot-soc { display: flex; gap: 14px; flex-wrap: wrap; }
.foot-soc a { color: var(--champ); text-decoration: none; font-size: 14px; }

/* responsive for everything above */
@media (max-width: 1100px) {
  .head-nav { gap: 0; font-size: 14px; } .head-nav a { padding: 8px 10px; }
}
@media (max-width: 980px) {
  .head-nav { display: none; }
  .head-burger { display: block; }
  .head-cta { margin-left: auto; }
  .result-body, .frag-grid { grid-template-columns: 1fr; gap: 40px; }
  .profile-box { position: static; }
  .wheel-wrap { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .wheel { max-width: 340px; margin: 0 auto; width: 100%; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool { min-height: 0; }
  .next-steps { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .toc { padding: 16px 18px; }
  .toc details:not([open]) summary { margin: 0; }
}
@media (max-width: 640px) {
  .head-in { gap: 4px; }
  .head-ic { width: 38px; height: 38px; }
  .merk-ic { display: none; }
  .head-cta { padding: 9px 13px; font-size: 13px; }
  .post-cover { margin-top: -20px; width: 100%; }
  .post-cover img { border-radius: 0; max-height: 420px; }
  .season-grid, .world-grid, .lx-list, .frag-row, .quiz-opts.many { grid-template-columns: 1fr; }
  .author-box { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
  .author-img img, .author-img span { width: 64px; height: 64px; font-size: 28px; }
  .story-box { grid-template-columns: 110px 1fr; gap: 16px; padding: 16px; }
  .story-box img { width: 110px; }
  .gift-idea { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .gift-no { width: 44px; height: 44px; font-size: 22px; }
  .profile-card { padding: 26px 20px; }
  .big-search { flex-direction: column; }
  .big-search .btn-lux { justify-content: center; }
  .az { top: 72px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .az a { white-space: nowrap; }
  .foot-in { grid-template-columns: 1fr; gap: 26px; }
  .share { flex-direction: column; align-items: flex-start; }
  .to-top { right: 12px; bottom: 12px; width: 44px; height: 44px; }
}
.head-cta { white-space: nowrap; }
@media (max-width: 400px) { .logo { font-size: 19px; gap: 8px; } .head-cta { padding: 8px 11px; font-size: 12.5px; } .head-ic { width: 34px; } }

/* ===== accessibility pass (WCAG 2.2 AA contrast ≥ 4.5:1, found by the "visita cliente") ===== */
:root { --muted: #6e6252; --gold-ink: #8d6227; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.eyebrow, .card-meta, .share > p, .toc strong, .author-kicker, .pb-kicker, .menu-label, .nf .kicker, .crumbs + h1 + .pill { color: var(--gold-ink); }
.sec.dark .eyebrow, .photo-home .eyebrow, .wheel-head .eyebrow, .post-hero .eyebrow, .quiz-hero .eyebrow, .profile-box .pb-kicker, .menu .menu-label, .tool .eyebrow { color: var(--champ); }
.photo-home .card-meta { color: var(--gold-ink); }
.foot-small { color: #9a8f80; }
.foot-in p { color: #a89c8b; }
.site-foot nav b { color: var(--champ); }
.toc-n, .muted-line, .topic-others span, .lx-item dt small, .lx-uses, .frag-form small, .pb-small { color: var(--muted); }
.author-kicker { color: #7a5320; }
.legal h1 { font-size: clamp(34px, 9vw, 52px); }
/* pages without a dark hero: the header pill gets a solid background so its text stays readable */
body:has(main > .legal) .head-in, body:has(main > .nf) .head-in, body:has(main > .profile-page) .head-in { background: rgba(14, 12, 10, .92); }
@media (max-width: 640px) { .big-search input { flex: none; width: 100%; } }
.wh-panel a { display: inline-block; padding: 8px 0; }
.mail-link { display: inline-block; padding: 6px 0; }

/* ===== logo «ü d'oro»: the two dots of the ü are golden scent drops ===== */
.logo-mark-img { width: 30px; height: 30px; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,235,200,.18), 0 4px 16px -4px rgba(233,201,143,.45); }
.u-gold { position: relative; display: inline-block; }
.u-gold::before, .u-gold::after { content: ""; position: absolute; top: -.02em; width: .15em; height: .21em; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(135deg, #f6e3bb, #e3b872 45%, #b7823a); clip-path: polygon(50% 0, 100% 62%, 92% 85%, 70% 100%, 30% 100%, 8% 85%, 0 62%); }
.u-gold::before { left: .1em; } .u-gold::after { right: .1em; }
@media (max-width: 400px) { .logo-mark-img { width: 26px; height: 26px; } }
.u-gold::before, .u-gold::after { top: .1em; width: .17em; height: .23em; }
.u-gold::before { left: .07em; } .u-gold::after { right: .07em; }

/* ===== Duftberater (page + floating widget) ===== */
.bt-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding: 60px 0 110px; align-items: start; }
.bt-box { display: grid; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.bt-log { display: grid; gap: 12px; align-content: start; min-height: 220px; max-height: 60vh; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.bt-msg { max-width: 88%; padding: 13px 16px; border-radius: 18px; font-size: 16px; line-height: 1.6; }
.bt-msg p { margin: 0; }
.bt-msg.bot { justify-self: start; background: #f4ecdf; color: var(--ink); border-bottom-left-radius: 6px; }
.bt-msg.me { justify-self: end; background: var(--noir-3); color: #fbf3e4; border-bottom-right-radius: 6px; }
.bt-msg.warn { background: #fbe9e6; color: #8a2b20; }
.bt-msg.typing p { color: var(--muted); font-style: italic; }
.bt-msg.typing p::after { content: " ✦"; display: inline-block; animation: btpulse 1s ease-in-out infinite; }
@keyframes btpulse { 50% { opacity: .2; } }
.bt-links { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bt-links a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(141, 98, 39, .25); color: #6d4a1b; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.bt-links a:hover { border-color: var(--champ-2); }
.bt-note { margin-top: 10px !important; font-size: 13.5px; color: var(--ink-2); }
.bt-note a { color: #6d4a1b; }
.bt-form { display: flex; gap: 10px; }
.bt-form input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 999px; border: 1px solid rgba(23,19,15,.18); background: #fff; font: 16px/1.4 var(--sans); color: var(--ink); }
.bt-form input:focus { outline: 2px solid var(--champ-2); outline-offset: 1px; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-chips button { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(23,19,15,.14); background: transparent; font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.bt-chips button:hover { border-color: var(--champ-2); color: var(--ink); }
.bt-legal { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bt-legal a { color: inherit; }
.bt-side { padding: 28px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.bt-side h2 { font-size: 30px; margin-bottom: 10px; }
.bt-side ol { padding-left: 1.2em; color: var(--ink-2); font-size: 15.5px; display: grid; gap: 8px; margin: 0 0 14px; }
.bt-side p { color: var(--ink-2); font-size: 15.5px; }
.bt-fab { position: fixed; right: 18px; bottom: 18px; z-index: 41; display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 22px 0 18px; border-radius: 999px; border: 0; background: var(--gold-grad); color: #1b140b; font: 700 15.5px/1 var(--sans); cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 36px -10px rgba(150,95,20,.75), 0 0 0 4px rgba(233,201,143,.18); transition: transform .2s, box-shadow .2s; }
.bt-fab svg { width: 28px; height: 28px; fill: none; stroke: #1b140b; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bt-fab:hover { transform: translateY(-3px) scale(1.03); }
.bt-dot { position: absolute; top: 4px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: #e2553f; box-shadow: 0 0 0 2px #fffaf2; }
.bt-fab.ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(233,201,143,.7); animation: btring 1.8s ease-out 3; }
@keyframes btring { to { box-shadow: 0 0 0 18px rgba(233,201,143,0); } }
.bt-teaser { position: fixed; right: 18px; bottom: 92px; z-index: 42; width: min(290px, calc(100vw - 36px)); animation: btin .45s cubic-bezier(.2,.8,.2,1); }
.bt-teaser-msg { display: block; width: 100%; padding: 16px 18px; border: 0; border-radius: 18px 18px 6px 18px; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); text-align: left; cursor: pointer; box-shadow: 0 22px 50px -18px rgba(20,12,4,.55), 0 0 0 1px rgba(23,19,15,.08); }
.bt-teaser-msg b { display: block; font: 600 21px/1.2 var(--serif); margin-bottom: 2px; }
.bt-teaser-x { position: absolute; top: -12px; left: -12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--noir-3); color: #fbf3e4; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
@keyframes btin { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.bt-pop { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100svh - 110px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--paper); box-shadow: 0 30px 70px -20px rgba(20,12,4,.55), 0 0 0 1px rgba(23,19,15,.08); }
.bt-pop .bt-log { flex: 1; min-height: 120px; max-height: none; }
.bt-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.bt-pop-head b { display: block; font: 600 22px/1.1 var(--serif); }
.bt-pop-head small { color: var(--muted); font-size: 12.5px; }
.bt-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1e8da; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.bt-pop .bt-msg { font-size: 15px; max-width: 92%; }
.bt-pop .bt-form input { padding: 12px 14px; font-size: 16px; }
.bt-send { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--gold-grad); color: #1b140b; font-size: 20px; cursor: pointer; }

/* ===== Duft-Duell ===== */
.duel-page { padding: 60px 0 110px; }
.duel-week { max-width: 760px; margin: 0 auto 70px; }
.duel-h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 22px; }
.duel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.duel { padding: 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lux); }
.duel h3 { font-size: 28px; margin: 0 0 16px; }
.duel-opts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0; }
.duel-opt { display: grid; gap: 4px; padding: 18px 14px; min-height: 96px; border-radius: 18px; border: 1px solid rgba(23,19,15,.12); background: #fff; cursor: pointer; text-align: center; font-family: var(--sans); color: var(--ink); transition: transform .2s, border-color .2s, box-shadow .2s; }
.duel-opt b { font: 600 24px/1.1 var(--serif); }
.duel-opt small { font-size: 13.5px; color: var(--ink-2); }
.duel-opt:hover { transform: translateY(-2px); border-color: var(--champ-2); box-shadow: 0 14px 30px -18px rgba(12,20,32,.55); }
.duel-opt.da { background: linear-gradient(160deg, #fff, #f3eddc); }
.duel-opt.db { background: linear-gradient(160deg, #fff, #e4ecf5); }
.duel-vs { font: italic 600 22px var(--serif); color: var(--champ-3); }
.duel-res { display: grid; gap: 10px; }
.duel-bar { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: 14px; background: #efe7da; font-size: 15.5px; }
.duel-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #ecd3a5, #e1b977); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.duel-bar.db::before { background: linear-gradient(90deg, #d9cfc0, #c4b7a3); }
.duel-bar b, .duel-bar span { position: relative; }
.duel-bar span { font-weight: 700; }
.duel-bar.mine { box-shadow: 0 0 0 2px var(--champ-3); }
.duel-total { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.duel-tip { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.duel-more { justify-self: start; font-weight: 600; font-size: 15px; color: #6d4a1b; }
.duel-foot { margin: 40px 0 0; font-size: 14px; color: var(--muted); }
.duel-foot a { color: #6d4a1b; }
.home-duel { position: relative; z-index: 1; max-width: 760px; margin: 34px auto 0; }
.home-duel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.home-duel .link-more { font-weight: 600; font-size: 14.5px; color: #6d4a1b; }

/* ===== Adventskalender ===== */
.advent-hero { background: radial-gradient(120% 90% at 50% 0%, #2a1a12, #0c0a08 68%); }
.advent-page { padding: 56px 0 110px; }
.advent-wait { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.advent-wait h2 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 8px; }
.advent-wait p { color: var(--ink-2); }
.advent-wait .ticks { text-align: left; margin-top: 18px; }
.advent-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.door { position: relative; min-height: 118px; border-radius: 16px; background: linear-gradient(150deg, #1d1712, #2c2017); color: #f6ecdc; box-shadow: inset 0 0 0 1px rgba(233,201,143,.18); }
.door summary, .door.locked { display: grid; place-content: center; justify-items: center; gap: 2px; min-height: 118px; padding: 10px; list-style: none; cursor: pointer; text-align: center; border-radius: 16px; }
.door summary::-webkit-details-marker { display: none; }
.door-n { font: 600 44px/1 var(--serif); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.door small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #cdbda4; }
.door.locked { cursor: default; background: repeating-linear-gradient(135deg, #e9e1d4 0 10px, #e4dbcd 10px 20px); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(23,19,15,.06); }
.door.locked .door-n { background: none; color: #b8ab98; }
.door.locked small { color: #8d8173; }
.door.today { box-shadow: inset 0 0 0 2px var(--champ), 0 0 30px -6px rgba(233,201,143,.6); }
.door.seen:not([open]) summary { opacity: .72; }
.door[open] { grid-column: 1 / -1; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lux); }
.door[open] summary { min-height: 0; justify-items: start; place-content: start; padding: 18px 22px 0; }
.door[open] summary small { display: none; }
.door[open] .door-n { font-size: 34px; }
.door-body { padding: 4px 22px 22px; }
.door-kind { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink, #8d6227); }
.door-body h3 { font-size: 30px; margin: 0 0 8px; }
.door-body > p { color: var(--ink-2); font-size: 17px; line-height: 1.7; margin: 0 0 10px; }
.door-q { margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: #f4ecdf; }
.door-q summary { cursor: pointer; font-weight: 600; }
.door-q summary em { font-style: normal; font-weight: 600; color: #6d4a1b; margin-left: 6px; white-space: nowrap; }
.door-q p { margin: 10px 0 0; color: var(--ink-2); }
.door-more { display: inline-block; margin-top: 6px; padding: 8px 0; font-weight: 600; color: #6d4a1b; }
.advent-teaser { padding: 0 0 70px !important; }
.advent-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 22px 28px; border-radius: var(--r-lg); text-decoration: none; color: #f6ecdc; background: radial-gradient(120% 140% at 0% 0%, #4a2d1c, #15100c 70%); box-shadow: inset 0 0 0 1px rgba(233,201,143,.2), 0 20px 50px -26px rgba(40,20,5,.7); }
.advent-card-n { font: 600 64px/1 var(--serif); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.advent-card .eyebrow { margin: 0 0 4px; color: var(--champ); }
.advent-card b { display: block; font: 600 30px/1.1 var(--serif); color: #fbf3e4; }
.advent-card small { color: #cdbda4; font-size: 15px; }
.advent-card em { font-style: normal; font-weight: 600; color: var(--champ); white-space: nowrap; }

@media (max-width: 900px) {
  .bt-page { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .advent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .duel-grid { grid-template-columns: 1fr; }
  .duel-opts { grid-template-columns: 1fr; }
  .duel-vs { text-align: center; font-size: 18px; }
  .duel-opt { min-height: 74px; }
  .advent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .door, .door summary, .door.locked { min-height: 96px; }
  .door-n { font-size: 36px; }
  .advent-card { grid-template-columns: auto 1fr; gap: 14px; padding: 18px; }
  .advent-card em { grid-column: 1 / -1; }
  .advent-card-n { font-size: 48px; }
  .advent-card b { font-size: 24px; }
  .bt-fab { right: 12px; bottom: 12px; height: 58px; padding: 0 16px 0 14px; font-size: 14.5px; }
  .bt-teaser { right: 12px; bottom: 82px; }
  .bt-pop { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100svh - 90px); }
  .to-top { bottom: 82px !important; }
  .bt-box { padding: 14px; }
  .bt-msg { max-width: 94%; }
}
@media print { .bt-fab, .bt-pop { display: none !important; } }
.bt-page > *, .duel-page > *, .advent-page > * { min-width: 0; }
.bt-box, .bt-log { grid-template-columns: minmax(0, 1fr); } .bt-box > * { min-width: 0; }

/* the chat button sits bottom-right: back-to-top moves above it */
body:has(.bt-fab) .to-top { bottom: 92px; }
@media (prefers-reduced-motion: reduce) { .bt-fab.ping::after, .bt-teaser { animation: none; } }
@media print { .bt-teaser { display: none !important; } }

/* ==========================================================================
   v7 · "Notte" — blu notte, oro, bianco, grafite.
   Il lusso sta solo nei punti strategici: polvere d'oro nell'apertura della
   home, riflesso sul bottone principale, nome grande nel footer della home,
   capolettera nel blocco personale e negli articoli lunghi, numeri di sezione
   in home, filo d'oro solo sulla scheda in evidenza.
   ========================================================================== */

/* ---------- apertura della home ---------- */
.nhero { position: relative; overflow: hidden; background: var(--noir); color: #eef3f9; padding: 164px 0 118px; min-height: 84vh; display: flex; align-items: center; }
.nhero-bg { position: absolute; inset: 0; }
.nhero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; animation: nkb 28s ease-in-out infinite alternate; }
@keyframes nkb { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.4%, -1.4%); } }
.nhero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8, 14, 24, .74) 0 26%, rgba(8, 14, 24, 0) 60%), linear-gradient(0deg, rgba(8, 14, 24, .9) 0, rgba(8, 14, 24, 0) 42%); }
.nhero-dust { position: absolute; inset: 0; pointer-events: none; }
.nhero-in { position: relative; z-index: 2; max-width: 740px; }
.glass { background: rgba(12, 20, 32, .44); border: 1px solid rgba(235, 212, 154, .17); border-radius: 26px; padding: 34px 36px;
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 30px 70px -40px #000, inset 0 1px 0 rgba(255, 245, 222, .1); }
.nhero h1 { font-size: clamp(42px, 6vw, 84px); color: #fcfaf5; margin-top: 16px; }
.nhero .lead { font-size: 18.5px; line-height: 1.72; color: #e6edf6; max-width: 52ch; margin: 18px 0 0; }
.nhero-intent { margin-top: 20px; display: inline-block; }
.nhero-intent > p { font: 500 24px/1.2 var(--serif); color: #f2f6fb; margin: 0 0 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 12px 19px; border-radius: 999px; font: 500 15px/1 var(--sans);
  text-decoration: none; color: #eef3f9; background: rgba(255, 252, 245, .07); border: 1px solid rgba(235, 212, 154, .26); transition: .25s; }
.chip svg { width: 17px; height: 17px; stroke: var(--champ); fill: none; stroke-width: 1.6; }
.chip:hover { background: rgba(235, 212, 154, .14); transform: translateY(-2px); }
.chip.on { background: var(--gold-grad); color: #1a1407; border-color: transparent; font-weight: 600; }
.chip.on svg { stroke: #1a1407; }

/* ---------- striscia delle prove (solo numeri già forti) ---------- */
.proof { position: relative; z-index: 3; margin-top: -58px; }
.proof-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lux);
  display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); overflow: hidden; }
.proof-c { padding: 24px 20px; text-align: center; position: relative; }
.proof-c + .proof-c::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.proof-c b { display: block; font: 600 38px/1 var(--serif); background: linear-gradient(135deg, #6b550c, #a8861c 55%, #c9a227);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof-c small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---------- intestazioni di sezione numerate (solo home) ---------- */
.eyebrow.n { display: flex; align-items: center; gap: 12px; }
.eyebrow.n::before { content: attr(data-n); font: 600 15px/1 var(--serif); letter-spacing: .06em; color: var(--champ-2); }
.sec-head .more { font: 600 14.5px/1 var(--sans); color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 5px; border-bottom: 1.5px solid rgba(27, 60, 99, .3); transition: .25s; }
.sec-head .more:hover { gap: 13px; border-color: var(--blue); }
.sec-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }

/* ---------- griglia da rivista ---------- */
.mag { display: grid; grid-template-columns: 1.32fr 1fr; gap: 24px; }
.mag-col { display: grid; gap: 24px; grid-template-rows: 1fr 1fr; }
.art-c { position: relative; display: block; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 30px -22px rgba(12, 20, 32, .4);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.art-c:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(12, 20, 32, .5); }
.art-c .ph { position: relative; overflow: hidden; background: var(--cream); }
.art-c .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.art-c:hover .ph img { transform: scale(1.06); }
.art-c .cat { position: absolute; top: 13px; left: 13px; z-index: 2; font: 600 10.5px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px; background: rgba(246, 248, 251, .93); color: var(--blue); }
.art-c .ph, .art-c .tx { display: block; }
.art-c .tx { padding: 22px 24px 26px; }
.art-c h3 { font-size: 26px; line-height: 1.15; }
.art-c p { margin: 10px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.art-c .meta { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.art-c .meta b { color: var(--blue); font-weight: 600; }
.art-c .meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--champ-2); display: block; }
.art-c.big .ph { aspect-ratio: 16/10; }
.art-c.big h3 { font-size: 36px; }
/* filo d'oro: solo sulla scheda in evidenza */
.art-c.big::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); pointer-events: none; border: 1px solid transparent;
  background: linear-gradient(135deg, transparent 40%, rgba(201, 162, 39, .55) 50%, transparent 60%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s; }
.art-c.big:hover::after { opacity: 1; }
.art-c.row { display: grid; grid-template-columns: 148px 1fr; align-items: stretch; }
.art-c.row .ph { height: 100%; }
.art-c.row .tx { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.art-c.row h3 { font-size: 20px; }
.art-c.row p { font-size: 14.5px; margin-top: 7px; }
.mag-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.mag-row .art-c .ph { aspect-ratio: 3/2; }
.mag-row .art-c h3 { font-size: 21px; }
/* scheda tipografica (lexikon) */
.art-c.type { background: linear-gradient(160deg, var(--noir-2), var(--noir)); border-color: rgba(235, 212, 154, .18);
  display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; }
.art-c.type .az { font: 600 64px/1 var(--serif); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-c.type h3 { color: #fbf7ee; margin-top: 12px; }
.art-c.type p { color: var(--cream-2); }
.art-c.type .go { margin-top: 16px; font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--champ); }

/* ---------- banda blu: Duftwelten ---------- */
.sec.band { background: linear-gradient(170deg, var(--blue), var(--blue-2)); color: var(--cream); }
.sec.band h2 { color: #f6f9fd; }
.sec.band .eyebrow { color: var(--champ); }
.sec.band .sub { color: #c3d3e4; max-width: 58ch; margin: 14px 0 0; font-size: 17px; }
.tiles { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 20px; margin-top: 42px; }
.tile { position: relative; display: flex; align-items: flex-end; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4;
  text-decoration: none; color: inherit; background: var(--blue-2); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 14, 24, .93) 4%, rgba(6, 14, 24, .1) 58%, rgba(6, 14, 24, .35)); }
.tile .t { position: relative; z-index: 2; display: block; padding: 26px 24px; width: 100%; }
.tile .n { font: 500 14px/1 var(--serif); letter-spacing: .2em; color: var(--champ); }
.tile h3 { font-size: 29px; color: #fbf7ee; margin-top: 6px; }
.tile p { font-size: 14.5px; color: #c3d3e4; margin: 6px 0 0; }
.tile .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 12.5px/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--champ); transition: gap .25s; }
.tile:hover .go { gap: 14px; }

/* ---------- il blocco personale ---------- */
.mensch { display: grid; grid-template-columns: .86fr 1.14fr; gap: 60px; align-items: center; }
.mensch-pic { position: relative; }
.mensch-pic img { border-radius: var(--r-md); height: auto; aspect-ratio: 4/5; object-fit: cover; width: 100%; box-shadow: var(--shadow-lux); position: relative; z-index: 1; }
.mensch-pic::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--champ-2); border-radius: var(--r-md); }
.mensch blockquote { font: 600 clamp(27px, 3.2vw, 40px)/1.22 var(--serif); color: var(--ink); margin: 14px 0 0; }
.mensch blockquote em { font-style: italic; font-weight: 500; color: var(--champ-3); }
.mensch p { margin: 18px 0 0; color: var(--ink-2); max-width: 56ch; }
/* capolettera: punto strategico 1 */
.dropcap::first-letter { font: 600 60px/.82 var(--serif); float: left; margin: 7px 12px 0 0; color: var(--blue); }
.sig { margin-top: 22px; display: flex; align-items: center; gap: 15px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 36px; line-height: 1; color: var(--champ-3); }
.sig::before { content: ""; width: 46px; height: 1px; background: var(--champ-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags span { font-size: 12.5px; padding: 8px 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }

/* ---------- banda scura del test ---------- */
.testband { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.testband .sub { color: var(--cream-2); margin: 14px 0 0; font-size: 17px; max-width: 46ch; }
.steps { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.steps small { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); }
.steps .bar { flex: 1; height: 4px; border-radius: 9px; background: rgba(235, 212, 154, .16); overflow: hidden; }
.steps .bar i { display: block; height: 100%; width: 20%; border-radius: 9px; background: linear-gradient(90deg, var(--champ-2), var(--champ)); }
.qcard { background: rgba(246, 248, 251, .05); border: 1px solid rgba(235, 212, 154, .17); border-radius: 24px; padding: 32px; }
.qcard .q { font: 600 28px/1.2 var(--serif); color: #fbf7ee; margin: 0; }
.qcard .opts { display: grid; gap: 10px; margin-top: 20px; }
.qcard .opt { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 14px; font-size: 15.5px; color: #eef3f9;
  background: rgba(255, 252, 245, .04); border: 1px solid rgba(235, 212, 154, .14); }
.qcard .opt u { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; text-decoration: none; font: 700 12px/1 var(--sans);
  background: rgba(235, 212, 154, .13); color: var(--champ); flex: 0 0 auto; }
.qcard .opt.on { background: linear-gradient(135deg, rgba(235, 212, 154, .2), rgba(201, 162, 39, .1)); border-color: var(--champ-2); }
.qcard .opt.on u { background: var(--champ-2); color: #1a1407; }

/* ---------- riflesso: solo sul bottone principale ---------- */
.btn-lux.sheen { position: relative; overflow: hidden; }
.btn-lux.sheen::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 68% { left: -60%; } 100% { left: 130%; } }

/* ---------- nome grande: solo nel footer della home ---------- */
.wordmark { margin: 54px 0 0; font: 600 clamp(44px, 12vw, 168px)/.9 var(--serif); text-align: center; letter-spacing: -.02em;
  background: linear-gradient(100deg, #3c4f68, #d9be6c 42%, #f3e6c2 50%, #b4912e 62%, #3c4f68); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 10s linear infinite; }
@keyframes foil { to { background-position: 260% 0; } }

/* ---------- niente effetti pesanti sul telefono o con animazioni ridotte ---------- */
@media (max-width: 760px) {
  .nhero { padding: 124px 0 92px; min-height: auto; }
  .nhero h1 { font-size: 40px; }
  .nhero .lead { font-size: 16.5px; }
  .glass { padding: 23px 21px; border-radius: 22px; }
  .nhero-intent > p { font-size: 20px; }
  .nhero-bg img { object-position: 58% 50%; animation: none; }
  .nhero-dust { display: none; }
  .wordmark { animation: none; }
  .btn-lux.sheen::after { display: none; }
  .proof { margin-top: -44px; }
  .proof-card { grid-template-columns: 1fr 1fr; }
  .proof-c:nth-child(3)::before { display: none; }
  .proof-c:nth-child(n+3) { border-top: 1px solid var(--line); }
  .proof-c b { font-size: 31px; }
  .mag, .mag-col, .mag-row, .tiles, .mensch, .testband { grid-template-columns: 1fr; }
  .mag-col { grid-template-rows: auto; }
  .mensch { gap: 30px; }
  .mensch-pic::before { inset: 13px -13px -13px 13px; }
  .art-c.big h3 { font-size: 28px; }
  .art-c.row { grid-template-columns: 116px 1fr; }
  .tile { aspect-ratio: 4/3; }
  .tile::after { background: linear-gradient(0deg, rgba(6, 14, 24, .96) 10%, rgba(6, 14, 24, .4) 62%, rgba(6, 14, 24, .3)); }
  .tile h3 { font-size: 25px; }
  .sec-head.row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .qcard { padding: 22px; }
  .testband { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .nhero-bg img, .wordmark { animation: none; }
  .nhero-dust, .btn-lux.sheen::after { display: none; }
}

/* ---------- riserve quando manca la foto ---------- */
/* nessuna foto? allora è una copertina tipografica, non un buco */
.art-c .ph.no { position: relative; display: grid; place-items: center; background: linear-gradient(155deg, var(--noir-3), var(--noir)); overflow: hidden; }
.art-c .ph.no::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 24px; height: 1px;
  background: linear-gradient(90deg, rgba(235,212,154,.55), transparent); }
.art-c .ph.no .cat { background: rgba(235, 212, 154, .14); color: var(--champ); }
/* la lettera è una filigrana, non un cartello */
.art-c .ph.no .ph-l { font: 600 108px/1 var(--serif); font-style: normal; opacity: .22;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-c.big .ph.no .ph-l { font-size: 160px; }
.art-c.row .ph.no .ph-l { font-size: 52px; }
.art-c.row .ph.no::after { left: 14px; right: 14px; bottom: 14px; }
.tile.no { background: linear-gradient(160deg, var(--noir-3), var(--blue-2)); }
.tile.no::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(235, 212, 154, .22); border-radius: 16px; }
.tile.no::after { background: linear-gradient(0deg, rgba(6, 14, 24, .75) 4%, rgba(6, 14, 24, .1) 70%); }

/* ---------- pagina articolo ---------- */
.post-cat { margin: 0 0 14px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
  background: var(--cream); border-radius: 999px; padding: 9px 15px; display: inline-block; }
.post-lead { font-size: 20px; line-height: 1.62; color: var(--ink-2); margin: 20px 0 0; max-width: 62ch; }
.post-meta .stamp { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; color: #1c6b4b;
  background: #e4f2eb; border: 1px solid #bfe0d2; padding: 6px 12px; border-radius: 999px; }
.kurz { background: linear-gradient(160deg, var(--noir-2), var(--noir)); color: var(--cream); border-radius: var(--r-md); padding: 28px 30px; margin: 0 0 34px; }
.kurz h2 { font-size: 26px; color: #fbf7ee; }
.kurz ul { list-style: none; margin: 14px 0 0; padding: 0; }
.kurz li { display: flex; gap: 12px; margin: 10px 0; font-size: 16.5px; color: #c9d7e6; }
.kurz li::before { content: "\2713"; color: var(--champ); font-weight: 700; }
/* capolettera: punto strategico 2, solo negli articoli lunghi */
.prose.has-cap > p:first-of-type::first-letter { font: 600 58px/.82 var(--serif); float: left; margin: 7px 12px 0 0; color: var(--blue); }
.in-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 44px 0; padding: 28px 30px; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue), var(--blue-2)); color: #e8eff7; }
.in-cta h3 { font-size: 25px; color: #fff; }
.in-cta p { margin: 6px 0 0; font-size: 15.5px; color: #b9c8da; }
.in-cta .btn-lux { margin-left: auto; }
.faq { margin: 48px 0 0; }
.faq > h2 { font-size: 32px; margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 17px 36px 17px 0; position: relative; font: 600 20px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--champ-2); font-size: 22px; font-family: var(--sans); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); font-size: 16.5px; max-width: 68ch; }
@media (max-width: 760px) {
  .post-lead { font-size: 17.5px; }
  .kurz { padding: 22px 20px; }
  .in-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .in-cta .btn-lux { margin-left: 0; }
  .faq summary { font-size: 18px; }
}

/* intestazione articolo su fondo scuro: etichetta e sottotitolo leggibili */
.post-hero .post-cat { background: rgba(235, 212, 154, .12); color: var(--champ); }
.post-hero .post-lead { color: #c9d7e6; }
.post-hero .post-meta .stamp { background: rgba(59, 167, 118, .16); border-color: rgba(59, 167, 118, .4); color: #8fdcb6; }

/* ---------- bersagli piu grandi da toccare + contrasto ---------- */
.head-ic { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.head-cta, .btn-lux, .btn-glass, .chip { min-height: 44px; }
.site-foot nav a { display: inline-block; padding: 7px 0; min-height: 34px; }
.card-merk { min-width: 44px; min-height: 44px; }
.link-more { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(27, 60, 99, .3); padding-bottom: 3px; }
.link-more:hover { border-color: var(--blue); }
.sec.dark .link-more, .sec.band .link-more { color: var(--champ); border-color: rgba(235, 212, 154, .4); }
.site-foot .wordmark { margin: 44px 0 10px; }
@media (max-width: 760px) { .site-foot .wordmark { margin: 30px 0 6px; } }

/* ---------- titoli delle bande: grandi come gli altri ---------- */
.sec.band h2, .testband h2, .sec.champagne h2 { font-size: clamp(32px, 4vw, 50px); margin-top: 10px; }

/* ---------- la tessera Duftwelten senza foto: copertina tipografica, come le schede ---------- */
.tile.no { background: linear-gradient(155deg, var(--noir-3), var(--noir)); }
.tile.no::before { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 128px/1 var(--serif); opacity: .2; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; border: 0; }
.tile.no::after { background: linear-gradient(0deg, rgba(6, 14, 24, .92) 6%, rgba(6, 14, 24, .15) 70%); }

/* la scheda A–Z sul telefono: un po' d'aria sotto la sigla */
@media (max-width: 760px) {
  .art-c.type { padding: 26px 22px; }
  .art-c.type .az { font-size: 52px; line-height: 1.05; }
  .art-c.type h3 { margin-top: 10px; }
}

/* ================= Einladungs-Fabrik ================= */
.inv-hero { padding-bottom: 36px; }
.inv-hero .lead { margin-bottom: 0; max-width: 64ch; }
.inv { background: var(--noir); color: #eadfcd; padding: 8px 0 96px; }
.inv-grid { scroll-margin-top: 84px; display: grid; grid-template-columns: minmax(260px, 5fr) 6fr; gap: 48px; align-items: start; }
.inv-stage { position: sticky; top: 92px; text-align: center; }
.inv-card { --ar: .709; position: relative; width: min(100%, calc(var(--ar) * 72vh)); aspect-ratio: var(--ar); margin: 0 auto; border-radius: 4px; overflow: hidden; background: #1b2638;
  box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 236, 205, .14); }
.inv-card canvas { display: block; width: 100%; height: 100%; }
.inv-skel { position: absolute; inset: 0; background: linear-gradient(110deg, #1b2638 30%, #27374f 50%, #1b2638 70%); background-size: 220% 100%; animation: invsk 1.4s linear infinite; }
@keyframes invsk { to { background-position: -220% 0; } }
.inv-cap { margin: 14px 0 0; font-size: 13px; letter-spacing: .04em; color: #a89c8b; }
.inv-demo { margin: 4px 0 0; font-size: 13px; color: var(--champ); }
.inv-warn { margin: 12px auto 0; max-width: 420px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; color: #ffdcab; background: rgba(255, 170, 60, .12); border: 1px solid rgba(255, 190, 100, .3); text-align: left; }
.inv-panel { position: relative; padding: 30px; border-radius: 32px; background: linear-gradient(160deg, rgba(255, 245, 225, .1), rgba(255, 245, 225, .03)); border: 1px solid rgba(255, 236, 205, .14); box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 40px 90px -40px rgba(0, 0, 0, .9); min-height: 420px; }
.inv-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--champ); }
.inv-progress .bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.inv-progress .bar i { display: block; height: 100%; width: 12%; background: var(--gold-grad); box-shadow: 0 0 14px rgba(233, 201, 143, .8); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.inv-q { font: 500 clamp(26px, 3.2vw, 34px)/1.15 var(--serif); color: #fbf3e4; margin: 0 0 8px; outline: none; }
.inv-sub { margin: 0 0 20px; color: #b3a692; font-size: 15.5px; line-height: 1.5; }
.inv-body > .inv-q + .inv-field, .inv-body > .inv-q + .inv-grid-opts, .inv-body > .inv-q + .inv-ways { margin-top: 18px; }
.inv-grid-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-grid-opts.styles { grid-template-columns: 1fr; }
.inv-ways { display: grid; gap: 10px; }
.inv-opt { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 15px 17px; min-height: 58px; border-radius: 16px; cursor: pointer; font: inherit; color: #eadfcd; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: .2s; }
.inv-opt b { font: 600 16.5px/1.25 var(--sans); color: #fbf3e4; }
.inv-opt span { font-size: 13.5px; line-height: 1.35; color: #b3a692; }
.inv-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: rgba(233, 201, 143, .38); }
.inv-opt[aria-pressed="true"] { background: rgba(233, 201, 143, .13); border-color: rgba(233, 201, 143, .7); box-shadow: 0 0 30px -10px rgba(233, 201, 143, .6); }
.inv-opt:focus-visible, .inv-chip:focus-visible, .inv-link:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; }
.inv-opt:disabled, .inv-opt.off { cursor: not-allowed; opacity: .55; }
.inv-soon { position: absolute; right: 14px; top: 14px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--champ); border: 1px solid rgba(233, 201, 143, .4); border-radius: 999px; padding: 4px 9px; }
.inv-style { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.inv-style .sw { display: flex; }
.inv-style .sw i { width: 22px; height: 22px; border-radius: 50%; margin-right: -7px; border: 2px solid #16233a; }
.inv-style span:last-child { flex-basis: 100%; padding-left: 0; }
.inv-sizes { margin-top: 20px; }
.inv-label { margin: 0 0 8px; font: 600 14px var(--sans); color: #d9ccb5; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-chip { padding: 11px 16px; min-height: 44px; border-radius: 999px; cursor: pointer; font: 500 14.5px var(--sans); color: #eadfcd; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); transition: .2s; }
.inv-chip:hover { border-color: rgba(233, 201, 143, .4); }
.inv-chip[aria-pressed="true"] { background: rgba(233, 201, 143, .16); border-color: rgba(233, 201, 143, .75); color: #fff; }
.inv-field { margin: 0 0 16px; }
.inv-field label:not(.inv-check) { display: block; margin-bottom: 7px; font: 600 14px var(--sans); color: #d9ccb5; }
.inv-field input[type="text"], .inv-field input[type="number"], .inv-field input[type="date"], .inv-field input[type="time"], .inv-field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; font: 400 16px/1.4 var(--sans); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color-scheme: dark; box-sizing: border-box; }
.inv-field textarea { resize: vertical; min-height: 84px; }
.inv-field input:focus, .inv-field textarea:focus { outline: 2px solid var(--champ); outline-offset: 1px; border-color: transparent; }
.inv-field input::placeholder, .inv-field textarea::placeholder { color: #8f8473; }
.inv-cnt { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: #8f8473; }
.inv-cnt.hot { color: var(--champ); }
.inv-hint { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #a89c8b; }
.inv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.inv-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.4; color: #eadfcd; }
.inv-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #d9be6c; }
.inv-more { margin: 4px 0 14px; }
.inv-more summary { cursor: pointer; font: 600 14px var(--sans); color: var(--champ); padding: 8px 0; }
.inv-actions-row { margin: 4px 0 18px; }
.inv-dl { display: grid; gap: 10px; margin: 20px 0 6px; justify-items: stretch; }
.inv-dl .btn-lux, .inv-dl .btn-glass { justify-content: center; text-align: center; }
.inv-link { background: none; border: 0; padding: 10px 0; cursor: pointer; font: 500 14.5px var(--sans); color: var(--champ); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.inv-msg { margin: 14px 0 0; font-size: 14.5px; line-height: 1.4; color: #ffb9a8; }
.inv-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.inv-nav .btn-lux { margin-left: auto; }
.inv-nav .btn-lux:disabled, .inv-nav .btn-lux.is-off { opacity: .5; }
.inv-nav .btn-lux:disabled { cursor: not-allowed; transform: none; }
.inv-off { padding: 30px; border-radius: 20px; background: rgba(255, 255, 255, .05); color: #eadfcd; }
.inv-guard { position: absolute; }
.inv-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.inv-feat { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: grid; gap: 8px; }
.inv-feat b { font: 600 18px var(--sans); color: var(--ink); }
.inv-feat span { color: var(--ink-2); line-height: 1.55; font-size: 15.5px; }
.inv-how { max-width: 820px; }
.inv-how h2 { margin: 54px 0 14px; }
.inv-how p, .inv-how li { color: var(--ink-2); line-height: 1.65; font-size: 17px; }
.inv-how .canon { font: 500 clamp(22px, 2.6vw, 28px)/1.35 var(--serif); color: var(--ink); padding: 22px 26px; border-left: 3px solid var(--champ-2); background: #fff; border-radius: 0 18px 18px 0; margin: 0 0 10px; }
.inv-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.inv-steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 66px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.inv-steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--sans); color: #1b140b; background: var(--gold-grad); }
.inv-steps b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.inv-faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 10px; }
.inv-faq summary { cursor: pointer; font: 600 16.5px var(--sans); color: var(--ink); }
.inv-faq details p { margin: 10px 0 0; }
@media (max-width: 900px) {
  .inv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .inv-stage { top: 76px; z-index: 6; background: var(--noir); padding: 8px 0 10px; margin: 0 -16px; border-bottom: 1px solid rgba(255, 236, 205, .08); }
  .inv-card { width: min(100%, calc(var(--ar) * 34vh)); }
  .inv-cap { margin-top: 6px; }
  .inv-demo { margin-top: 2px; }
  .inv-warn { margin: 8px 16px 0; max-width: none; padding: 6px 10px; font-size: 12.5px; }
  .inv-panel { padding: 22px 18px; border-radius: 26px; min-height: 0; }
  .inv-feats { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .inv-grid-opts { grid-template-columns: 1fr 1fr; }
  .inv-opt { padding: 13px 14px; }
  .inv-opt b { font-size: 15.5px; }
}
/* the floating helper would sit on top of the factory's buttons */
body:has(.inv[data-inv]) .bt-fab, body:has(.inv[data-inv]) .bt-pop, body:has(.inv[data-inv]) .bt-teaser { display: none !important; }
.t-inv { --tc: rgba(46, 130, 120, .65); grid-column: 1 / -1; min-height: 0; }
.inv-dl button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- Online-Zusage: Wizard-Teile, Gästeseite, Gästeliste */
.inv-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: #e9dcc4; background: rgba(233, 201, 143, .1); border: 1px solid rgba(233, 201, 143, .25); }
.inv-field select { width: 100%; padding: 13px 14px; border-radius: 12px; font: 400 16px/1.4 var(--sans); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color-scheme: dark; box-sizing: border-box; }
.inv-field select:focus { outline: 2px solid var(--champ); outline-offset: 1px; border-color: transparent; }
.inv-field select option { color: #111; background: #fff; }
.inv-items { display: grid; gap: 10px; }
.inv-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.inv-item input[type="text"], .inv-item input[type="number"], .inv-copy input[type="text"] { width: 100%; padding: 12px 14px; border-radius: 12px; font: 400 16px/1.4 var(--sans); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color-scheme: dark; box-sizing: border-box; }
.inv-field .inv-qty { display: flex; align-items: center; gap: 8px; font: 500 13px var(--sans); color: #b3a692; margin: 0; }
.inv-qty input { width: 64px !important; text-align: center; }
.inv-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #eadfcd; font-size: 22px; line-height: 1; cursor: pointer; }
.inv-x:hover { border-color: rgba(255, 140, 120, .6); color: #ffb9a8; }
.inv-add { justify-self: start; }
.inv-live { margin: 22px 0 8px; padding: 20px; border-radius: 22px; background: rgba(233, 201, 143, .07); border: 1px solid rgba(233, 201, 143, .3); }
.inv-live.is-on { background: rgba(120, 200, 150, .08); border-color: rgba(140, 210, 165, .4); }
.inv-live h3 { margin: 0 0 8px; font: 600 20px var(--serif); color: #fbf3e4; }
.inv-live > p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #d9ccb5; }
.inv-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-copy input[type="text"] { flex: 1 1 220px; min-width: 0; }
.inv-copy .btn-glass { flex: none; }
.inv-dirty { margin: 14px 0; padding: 14px; border-radius: 14px; background: rgba(255, 170, 60, .12); border: 1px solid rgba(255, 190, 100, .35); }
.inv-dirty p { margin: 0 0 10px; color: #ffdcab; font-size: 14.5px; }
.inv-radio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; cursor: pointer; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #eadfcd; font-size: 16px; }
.inv-radio input { width: 22px; height: 22px; accent-color: #d9be6c; flex: none; margin: 0; }
.inv-radio:has(input:checked) { background: rgba(233, 201, 143, .14); border-color: rgba(233, 201, 143, .7); }
.inv-radio:has(input:focus-visible), .inv-check:has(input:focus-visible) { outline: 2px solid var(--champ); outline-offset: 2px; border-radius: 10px; }
fieldset.inv-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.inv-field legend { padding: 0; }
.is-full { opacity: .55; }
.inv-check { margin-bottom: 10px; }

.lp [hidden] { display: none !important; }
.lp { padding-top: 104px; }   /* the fixed header is about 70px high */
.lp .pill { margin-bottom: 14px; }
.lp-title { margin: 0 0 6px; font: 500 clamp(32px, 5vw, 52px)/1.08 var(--serif); color: #fbf3e4; }
.lp .lead { margin: 0 0 8px; color: #cdbfa8; }
.lp-grid { display: grid; grid-template-columns: minmax(240px, 5fr) 6fr; gap: 48px; align-items: start; margin-top: 26px; }
.lp-cardcol { position: sticky; top: 24px; }
.lp-facts { margin: 0 0 18px; display: grid; gap: 14px; }
.lp-facts dt { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--champ); margin-bottom: 3px; }
.lp-facts dd { margin: 0; font-size: 17px; line-height: 1.5; color: #f3e9d6; }
.lp-counts { margin: 18px 0; font: 600 15px var(--sans); color: var(--champ); }
.lp-form, .lp-done { margin-top: 22px; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 245, 225, .1), rgba(255, 245, 225, .03)); border: 1px solid rgba(255, 236, 205, .14); }
.lp-form h2, .lp-done h2 { margin: 0 0 16px; font: 500 28px/1.15 var(--serif); color: #fbf3e4; }
.lp-done { outline: none; }
.lp-done p { color: #d9ccb5; line-height: 1.5; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.site-foot-lean { padding: 28px 0; }
.site-foot-lean a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.lh-top { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 28px; align-items: center; margin: 20px 0 22px; }
.lh-card .inv-card { width: 100%; }
.lh-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lh-stat { padding: 18px 14px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.lh-stat b { display: block; font: 500 40px/1 var(--serif); color: #fbf3e4; }
.lh-stat span { display: block; margin-top: 6px; font-size: 13.5px; color: #b3a692; }
.lh-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; }
.lh h2 { margin: 28px 0 12px; font: 500 26px var(--serif); color: #fbf3e4; }
.lh-table { display: grid; gap: 8px; }
.lh-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.lh-row.st-no { opacity: .7; }
.lh-name b { display: block; color: #fbf3e4; font-size: 16.5px; overflow-wrap: anywhere; }
.lh-st { font-size: 13.5px; color: var(--champ); }
.lh-row.st-no .lh-st { color: #b3a692; }
.lh-more { display: grid; gap: 2px; font-size: 14.5px; color: #d9ccb5; overflow-wrap: anywhere; }
.lh-more small { color: #8f8473; font-size: 12px; }
.lh-note { font-style: italic; }
.lh-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #d9ccb5; }
.lh-item b { color: #fbf3e4; }
@media (max-width: 860px) {
  .lp-grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-cardcol { position: static; }
  .lp-form, .lp-done { padding: 20px 16px; border-radius: 22px; }
  .lh-top { grid-template-columns: 1fr; gap: 16px; }
  .lh-card { max-width: 150px; }
  .lh-stat { padding: 14px 8px; }
  .lh-stat b { font-size: 34px; }
  .lh-row { grid-template-columns: 1fr auto; }
  .lh-more { grid-column: 1 / -1; order: 3; }
  .inv-item { grid-template-columns: 1fr auto; }
  .inv-item .inv-x { grid-column: 2; grid-row: 1; }
  .inv-item .inv-qty { grid-column: 1 / -1; }
}
body:has(.inv.lp) .bt-fab, body:has(.inv.lp) .bt-pop, body:has(.inv.lp) .bt-teaser { display: none !important; }

/* ---- persönliche Karten: Gästeliste des Gastgebers, Seite für einen eingeladenen Gast ---- */
.lh-sum { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.lp-hello { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 236, 205, .16); color: #f3e9d6; font-size: 17px; line-height: 1.5; }
.lp-hello b { color: #fbf3e4; }
.lg-list { display: grid; gap: 10px; margin: 18px 0 14px; }
.lg-row { display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.lg-row.st-no { opacity: .75; }
.lg-row.st-open { border-style: dashed; }
.lg-main { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(120px, .8fr) auto; gap: 10px; align-items: center; }
.lg-main input[type="text"], .lg-main select { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 12px; font: 400 16px/1.4 var(--sans); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color-scheme: dark; box-sizing: border-box; }
.lg-main select option { color: #111; background: #fff; }
.lg-main input:focus, .lg-main select:focus { outline: 2px solid var(--champ); outline-offset: 1px; border-color: transparent; }
.lg-acts { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.lg-acts .btn-glass { padding: 9px 16px; font-size: 14.5px; }
.lg-solo { margin-top: 8px; }
.lg-ticket { display: grid; grid-template-columns: minmax(140px, 230px) 1fr; gap: 22px; align-items: start; padding: 18px; margin-bottom: 18px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 236, 205, .16); }
.lg-ticket-card .inv-card { width: 100%; }
.lg-ticket-name { margin: 0 0 10px; font: 500 24px/1.2 var(--serif); color: #fbf3e4; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .lg-main { grid-template-columns: 1fr 1fr; }
  .lg-main .lh-st { grid-column: 1 / -1; }
  .lg-ticket { grid-template-columns: 1fr; }
  .lg-ticket-card { max-width: 200px; }
}

/* the radio rows sit inside .inv-field, whose generic label rule (display:block) would otherwise win */
.inv-field label.inv-radio:not(.inv-check) { display: flex; margin-bottom: 8px; font: 500 16px/1.4 var(--sans); color: #eadfcd; }
@media (max-width: 520px) { .lh-sum { grid-template-columns: repeat(2, 1fr); } }

/* ================= Satz-Box (Startseite + Seiten pro Anlass) ================= */
.nhero-chat .nhero-in { max-width: 820px; }
.chatbox { padding: 34px 36px 26px; }
.chatbox h1 { margin-top: 10px; }
.chatbox .lead { margin-bottom: 22px; }
.chatbox-page { margin-top: 30px; max-width: 820px; text-align: left; }
.chat { display: grid; gap: 14px; }
.chat-log { display: grid; gap: 12px; }
.bub { max-width: 92%; padding: 13px 17px; border-radius: 20px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.bub p { margin: 0; }
.bub.bot { justify-self: start; background: rgba(255,245,225,.1); border: 1px solid rgba(235,212,154,.16); color: #f2ece0; border-top-left-radius: 6px; }
.bub.you { justify-self: end; background: var(--gold-grad); color: #1b140b; border-top-right-radius: 6px; font-weight: 500; white-space: pre-wrap; }
.bub.err { border-color: rgba(255,170,120,.5); background: rgba(255,150,100,.12); color: #ffe2cf; }
.bub.typing { padding: 15px 18px; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); opacity: .35; animation: chatdot 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes chatdot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.found { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.found li { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(235,212,154,.13); border: 1px solid rgba(235,212,154,.28); color: #fbf3e0; font-size: 14.5px; font-weight: 600; }
.found small { white-space: nowrap; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--champ); font-weight: 600; }
.bub .chat-card { margin-top: 14px; }
.chat-card .inv-card { width: min(100%, calc(var(--ar) * 46vh)); opacity: 0; transition: opacity .35s; }
.chat-card .inv-card.on { opacity: 1; }
.chat-cap { margin: 9px 0 0; text-align: center; font-size: 13px; color: #b9ad9b; }
.chat-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.chat-more { font-size: 14px; color: #c8bcaa; max-width: 30ch; line-height: 1.4; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.chat-form textarea { width: 100%; min-height: 58px; max-height: 160px; resize: vertical; padding: 15px 18px; border-radius: 18px; border: 1px solid rgba(235,212,154,.3); background: rgba(8,14,24,.55); color: #fcfaf5; font: 400 16.5px/1.45 var(--sans); }
.chat-form textarea::placeholder { color: #9fb0c4; }
.chat-form textarea:focus-visible, .chat-ex button:focus-visible, .occ-card:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; }
.chat-form .btn-lux { height: 58px; white-space: nowrap; }
.chat-form .btn-lux[disabled] { opacity: .55; cursor: progress; transform: none; }
.chat-ex { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chat-ex > span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--champ); width: 100%; }
.chat-ex button { text-align: left; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(235,212,154,.24); background: rgba(255,245,225,.06); color: #efe6d6; font: 400 14px/1.4 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.chat-ex button:hover { background: rgba(235,212,154,.16); border-color: rgba(235,212,154,.5); }
.chat-hint, .chat-ns { margin: 0; font-size: 13px; line-height: 1.5; color: #aebbcb; }
.chat-hint a, .chat-ns a:not(.btn-lux) { color: var(--champ); }
.chat-ns { font-size: 15px; color: #e2e9f2; }
.chat-ns .btn-lux { margin-top: 10px; }

/* Anlässe als Karten */
.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 8px; }
.occ-card { position: relative; display: grid; gap: 4px; padding: 20px 44px 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .25s, border-color .2s; }
.occ-card b { font: 600 21px/1.2 var(--serif); }
.occ-card span { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.occ-card em { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--champ-2); transition: transform .2s; }
.occ-card:hover { transform: translateY(-3px); border-color: rgba(201,162,39,.55); box-shadow: 0 18px 40px -22px rgba(12,20,32,.35); }
.occ-card:hover em { transform: translate(4px, -50%); }

.duft-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.duft-intro h2 { margin: 6px 0 14px; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.04; color: #fbf3e4; }
.duft-intro .sub { color: #cfdae8; max-width: 46ch; margin: 0; }
.duft-intent > p { font: 500 24px/1.2 var(--serif); color: #f2f6fb; margin: 0 0 15px; }

/* Seiten pro Anlass */
.inv-must { list-style: none; padding: 0; margin: 10px 0 26px; display: grid; gap: 12px; }
.inv-must li { display: grid; gap: 3px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.inv-must b { font: 600 17px var(--sans); color: var(--ink); }
.inv-must span { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.inv-samples { display: grid; gap: 14px; margin: 14px 0 26px; }
.inv-sample { margin: 0; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.inv-sample figcaption { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.inv-sample figcaption b { color: var(--champ-3); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.inv-sample blockquote { margin: 0; font: 500 19px/1.5 var(--serif); color: var(--ink); }
.inv-sample blockquote p { margin: 0 0 8px; }
.inv-sample .s-intro { font-style: italic; color: var(--ink-2); }
.inv-sample .s-close { margin-bottom: 0; color: var(--ink-2); }
.inv-topic { margin: 26px 0 0; font-weight: 600; }
.inv-anlass .quiz-in { max-width: 860px; }

@media (max-width: 760px) {
  .chatbox { padding: 22px 16px 18px; }
  .bub { max-width: 100%; font-size: 15.5px; padding: 12px 14px; }
  .chat-form { grid-template-columns: 1fr; }
  .chat-form .btn-lux { height: 52px; justify-content: center; }
  .chat-card .inv-card { width: min(100%, calc(var(--ar) * 40vh)); }
  .chat-actions .btn-lux { width: 100%; justify-content: center; }
  .chat-more { max-width: none; }
  .duft-intro { grid-template-columns: 1fr; gap: 24px; }
  .occ-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .occ-card { padding: 16px 30px 16px 16px; }
  .occ-card b { font-size: 18px; }
  .occ-card span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: .7; }
  .chat-card .inv-card, .occ-card, .occ-card em { transition: none; }
}

/* narrow phones: the longer site name needs the room – search and the saved list are in the menu too */
@media (max-width: 430px) {
  .head-in > .merk-ic { display: none; }
  .head-cta { padding: 9px 12px; font-size: 13px; }
}
/* very narrow phones (360 px): grid columns may shrink below their content, the text wraps instead */
@media (max-width: 640px) {
  .inv-grid-opts, .menu-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-opt, .occ-card { min-width: 0; overflow-wrap: anywhere; }
}

/* lente con KI sotto: ricerca + domanda KI, su tutte le pagine */
.head-ki { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.head-ki svg { width: 20px; height: 20px; }
.head-ki small { font: 700 8.5px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* search + KI: one bar at the bottom of every page, typed into directly (the top bar has no search, no popup) */
.dock-ask { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: 640px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(12, 20, 32, .78); border: 1px solid rgba(201, 162, 77, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); }
.dock-ask svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #e3c27a; stroke-width: 2; stroke-linecap: round; }
.dock-ask input[type="search"] { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; color: #f4efe6; font: 16px var(--sans); }
.dock-ask input[type="search"]::placeholder { color: rgba(244, 239, 230, .62); }
.dock-ask input::-webkit-search-cancel-button { display: none; }
.dock-ask button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #e3c27a, #b8913f); color: #14100a; font: 700 18px var(--sans); cursor: pointer; }
.dock-ask .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body:has(.menu:not([hidden])) .dock-ask { display: none; }
.to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media print { .dock-ask { display: none !important; } }
/* the answer says where it comes from: search + KI, only from the checked texts */
.ki-badge { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(201, 162, 77, .14); border: 1px solid rgba(201, 162, 77, .45); color: #8a6a24; font: 600 12.5px/1.3 var(--sans); }
.ki-badge svg { width: 14px; height: 14px; fill: #b8913f; flex: none; }
/* the search window opens at the bottom, where the button is, and never wider than the screen */
.search-pop { grid-template-columns: minmax(0, 1fr); align-items: end; padding: 0 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
.search-box { box-sizing: border-box; max-width: 680px; justify-self: center; }
.search-box .hp, .search-box [name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.search-go { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #e3c27a, #b8913f); color: #14100a; font: 700 18px var(--sans); cursor: pointer; }
.search-box .search-x { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 15px; }
.search-box input::-webkit-search-cancel-button { display: none; }
.site-foot { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }   /* the last line of the page never hides under the search button */
/* PC like the app: same header as on the phone (button + ☰ on the right) */
.head-cta { margin-left: auto; }
.head-burger { display: block; }
/* the menu opens as a drop-down ("a tendina") right under the header, unrolling from the top */
.menu-in { inset: calc(84px + env(safe-area-inset-top, 0px)) 12px auto 12px; max-height: calc(100svh - 104px); padding: 18px 16px 20px; border: 1px solid rgba(235, 212, 154, .16); border-radius: 24px; transform-origin: top center; animation: menuDrop .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes menuDrop { from { clip-path: inset(0 0 100% 0 round 24px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 24px); opacity: 1; } }
@media (min-width: 981px) {
  .menu-in { left: auto; right: max(12px, calc((100% - 1180px) / 2)); width: 440px; transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) { .menu-in { animation: none; } }
.merk-ic { margin-left: auto; } .merk-ic + .head-cta { margin-left: 0; }   /* heart of the Merkliste on the right, next to the button */
/* LIGHT (Salvo: niente scuro che ritorna): drop-down menu and search bar in white frosted glass, dark text, gold only as accent */
.menu { background: rgba(24, 33, 46, .16); }
.menu-in { background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--line); box-shadow: 0 26px 60px -24px rgba(24, 33, 46, .45); }
.menu-label { color: var(--champ-3); }
.menu-topics a { color: var(--ink); background: color-mix(in srgb, var(--tc, #d9be6c) 7%, #ffffff); border: 1px solid var(--line); }
.menu-topics a:hover { border-color: color-mix(in srgb, var(--tc, #b4912e) 45%, transparent); }
.menu-topics b { color: var(--ink); }
.menu-topics small { color: var(--ink-2); }
.menu-tools a { color: var(--ink); border-bottom-color: var(--line); }
.menu-tools a:hover { color: var(--champ-3); }
.menu-tools small { color: var(--champ-3); }
.dock-ask { background: rgba(255, 255, 255, .9); border: 1px solid rgba(180, 145, 46, .45); box-shadow: 0 12px 30px -14px rgba(24, 33, 46, .45); }
.dock-ask svg { stroke: var(--champ-3); }
.dock-ask input[type="search"] { color: var(--ink); }
.dock-ask input[type="search"]::placeholder { color: var(--ink-2); }
.dock-ask button { background: var(--gold-grad); color: #1b140b; }