/* Vollmondwerk – Startseite. Dieselbe Welt wie die persönliche Seite: Nacht, Kreide, Mondlicht, Papier. */
:root {
  --nacht: #06090F; --tiefe: #0E1626; --kreide: #EFE9DC; --silber: #B9C1CF; --mondlicht: #F4F1E6; --morgen: #23304A; --linie: rgba(239,233,220,0.14); --stumm: #6F7A90; --tinte: #1A1A1C;
  --display: 'Instrument Serif', 'Georgia', serif;
  --body: 'Manrope', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Menlo', monospace;
  --gutter: clamp(20px, 4.5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --box: rgba(6, 9, 15, 0.58);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nacht); color: var(--kreide); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--silber); text-decoration: none; transition: color 0.3s; } @media (hover: hover) { a:hover { color: var(--mondlicht); } }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.klein { color: var(--silber); text-transform: uppercase; }
.muted { color: var(--stumm); }
[hidden] { display: none !important; }

/* Kopf */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px var(--gutter); background: linear-gradient(180deg, rgba(6,9,15,0.85) 0%, rgba(6,9,15,0) 100%); }
.top-nav { display: flex; gap: 30px; text-transform: uppercase; }
.cart { text-transform: uppercase; }
.cart::after { content: " (" attr(data-cart-count) ")"; color: var(--stumm); }
.wordmark { font-family: var(--display); font-size: 28px; color: var(--kreide); --dx: 1.2em; }
.wordmark-small { font-family: var(--display); font-size: 20px; color: var(--silber); }

/* Hero mit echtem Himmel */
.hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: end; padding: 120px var(--gutter) 40px; overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #0f1a30 0%, #070d1c 45%, var(--nacht) 100%); }
.sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-clouds { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s linear; }
.cloud { position: absolute; border-radius: 50%; filter: blur(34px); mix-blend-mode: screen; }
.c1 { left: -10%; top: 18%; width: 70%; height: 22%; background: radial-gradient(ellipse, rgba(150,162,186,0.55) 0%, rgba(150,162,186,0) 70%); }
.c2 { left: 35%; top: 8%; width: 60%; height: 18%; background: radial-gradient(ellipse, rgba(175,185,205,0.45) 0%, rgba(175,185,205,0) 70%); }
.c3 { left: 10%; top: 38%; width: 80%; height: 20%; background: radial-gradient(ellipse, rgba(140,152,176,0.5) 0%, rgba(140,152,176,0) 70%); }
.sky-moon { position: absolute; left: 74%; top: 30%; width: clamp(140px, 16vw, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.sky-moon img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: saturate(0.85); animation: mondauf 3.6s cubic-bezier(0.16, 0.6, 0.2, 1) both; }
.moon-halo { position: absolute; inset: -80%; border-radius: 50%; background: radial-gradient(circle, rgba(244,241,230,0.28) 0%, rgba(244,241,230,0.10) 22%, rgba(244,241,230,0.03) 45%, rgba(244,241,230,0) 65%); animation: haloauf 4.2s ease-out both 0.8s; }
/* Erstes Laden: der Mond taucht wie hinter einem Dunstschleier auf, das Licht kommt nach, dann erst die Worte. */
@keyframes mondauf {
  0%   { opacity: 0; transform: translateY(10px) scale(0.965); filter: saturate(0.85) blur(10px) brightness(1.6); }
  45%  { opacity: 1; filter: saturate(0.85) blur(2px) brightness(1.25); }
  100% { opacity: 1; transform: none; filter: saturate(0.85) blur(0) brightness(1); }
}
@keyframes haloauf { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.sky-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; }
.sky-horizon svg { width: 100%; height: 100%; display: block; }
.hero-copy { position: relative; max-width: 640px; }
.hero h1 { font-size: clamp(64px, 8vw, 128px); line-height: 0.94; letter-spacing: -0.01em; color: var(--mondlicht); margin: 22px 0 28px; }
.lede { font-size: 18px; line-height: 1.65; color: var(--silber); max-width: 520px; }
.cta-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; background: var(--mondlicht); color: var(--nacht); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.4s var(--ease), background 0.3s; }
@media (hover: hover) { .btn:hover { background: #fff; color: var(--nacht); transform: translateY(-2px); } }
.link-line { text-transform: uppercase; border-bottom: 1px solid var(--silber); padding-bottom: 4px; }
.hero-data { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--linie); color: var(--kreide); }
.hero-data div { display: flex; flex-direction: column; gap: 5px; }
.hero-data dt { color: var(--stumm); text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; }
.hero-data dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.hero-data dd.koord { color: var(--stumm); font-size: 11px; }

/* Schrift: Wörter aus der Tiefe, Blöcke steigen auf */
.split .w { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(8px); }
.split.go .w, .reveal.in .split .w { animation: word 1.1s var(--ease) both; animation-delay: calc(var(--i) * 90ms + var(--d, 0s)); }
@keyframes word { to { opacity: 1; transform: none; filter: blur(0); } }
.rise { opacity: 0; transform: translateY(18px); animation: rise 1.2s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Abschnitte */
section.bekommst, section.edition, section.nacht, section.stimme, section.fragen, section.antworten { padding: 110px var(--gutter); border-top: 1px solid var(--linie); }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(44px, 5vw, 76px); line-height: 0.98; color: var(--mondlicht); }
.edition-satz, .ort-satz { font-size: 19px; color: var(--silber); max-width: 640px; line-height: 1.6; }
.ort-satz { font-family: var(--display); font-size: 24px; line-height: 1.4; max-width: 760px; }

/* Was du bekommst */
.bekommst-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.foto { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.foto img {
  filter: saturate(0.82) contrast(1.04) brightness(0.94);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.foto img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%), radial-gradient(ellipse at 50% 50%, #000 60%, rgba(0,0,0,0.35) 100%); mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%), radial-gradient(ellipse at 50% 50%, #000 60%, rgba(0,0,0,0.35) 100%); }
.foto { position: relative; }
.foto img { width: 100%; height: auto; display: block; }

.foto figcaption, .karte-text { font-size: 15px; line-height: 1.6; color: var(--silber); display: flex; flex-direction: column; gap: 6px; }
.foto figcaption .mono, .karte-text .mono { color: var(--stumm); text-transform: uppercase; }
.karte-halter { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.karte-text { max-width: 420px; text-align: center; align-items: center; }

/* Die Karte: Papier mit Faserstruktur, keine Linien */
.karte {
  position: relative; color: var(--tinte); padding: 30px 32px 22px; max-width: 460px; width: 100%; transform: rotate(0.8deg);
  --zeile: 28px;
  background-color: #E6DECB;
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at 90% 100%, rgba(120,100,70,0.16) 0%, rgba(120,100,70,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.35' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.32  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(21,26,36,0.08), inset 0 0 60px rgba(120,100,70,0.12);
}
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.karte-marke { font-family: var(--display); font-size: 18px; color: #4A4640; }
.karte-nr { color: #4A4640; } .karte-nr b { color: var(--tinte); font-weight: 500; }
.karte-titel { font-family: var(--display); font-size: 52px; line-height: 0.95; color: var(--tinte); margin-bottom: 6px; }
.karte-mineral { font-size: 13px; color: #5A554C; margin-bottom: 18px; }
.karte-satz { font-family: var(--display); font-size: 19px; line-height: 1.35; margin-bottom: 20px; }
.karte-daten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding-top: 16px; border-top: 1px solid rgba(26,26,28,0.22); }
.karte-daten div { display: flex; flex-direction: column; gap: 2px; }
.karte-daten dt { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #6E685E; }
.karte-daten dd { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--tinte); }
.karte-fuss { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(26,26,28,0.22); color: #6E685E; font-size: 9px; }

/* Edition: jeder Stein auf seiner Karte, wie auf den Tisch gelegt */
.pkarten { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; padding: 20px 0 8px; }
.pkarte { max-width: 340px; width: 100%; transform: rotate(var(--rot, 0deg)); padding: 22px 24px 18px; transition: transform 0.6s var(--ease); }
@media (hover: hover) { .pkarte:hover { transform: rotate(0deg) translateY(-6px); } }
.pkarte-foto { position: relative; margin: 0 0 18px; aspect-ratio: 1; background: #DCD3BE; padding: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(26,26,28,0.08); }
.pkarte-foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s var(--ease); filter: saturate(0.9) contrast(1.03); }
.pkarte-foto.geladen img { opacity: 1; }
.pkarte .karte-kopf { margin-bottom: 12px; }
.pkarte .karte-marke { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6E685E; }
.pkarte .karte-titel { font-size: 44px; margin-bottom: 4px; }
.pkarte .karte-mineral { margin-bottom: 12px; }
.pkarte .karte-satz { font-size: 17px; line-height: 1.4; margin-bottom: 16px; min-height: 4.2em; }
.pkarte .karte-fuss { align-items: center; margin-top: 0; font-size: 11px; }
.pkarte button { font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--tinte); border: none; color: var(--kreide); height: 36px; padding: 0 16px; cursor: pointer; transition: background 0.3s, transform 0.4s var(--ease); }
@media (hover: hover) { .pkarte button:hover { background: #000; transform: translateY(-1px); } }
.pkarte button[disabled] { opacity: 0.4; cursor: default; transform: none; }
.pkarte .karte-nr.knapp b { color: #8A4B2A; }
.note { margin-top: 40px; max-width: 640px; }

/* Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.schritte li { display: flex; flex-direction: column; gap: 12px; }
.schritte .num { color: var(--stumm); }
.schritte h3 { font-size: 30px; line-height: 1.05; color: var(--mondlicht); }
.schritte p { font-size: 15px; line-height: 1.65; color: var(--silber); }

/* Stimme */
.stimme-inner { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.player { width: 100%; max-width: 520px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px 16px 14px; background: var(--box); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linie); box-shadow: 0 24px 60px rgba(0,0,0,0.45); margin-top: 10px; }
.player-knopf { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(244,241,230,0.55); background: rgba(244,241,230,0.06); color: var(--mondlicht); cursor: pointer; display: grid; place-items: center; }
.player-knopf[disabled] { opacity: 0.5; cursor: default; }
.player-mitte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.player-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.player-titel { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--mondlicht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-zeit { color: var(--silber); font-variant-numeric: tabular-nums; }
.player-track { height: 38px; }
.welle { width: 100%; height: 100%; display: block; }
.zitat { font-family: var(--display); font-style: italic; font-size: clamp(26px, 3vw, 36px); line-height: 1.3; color: var(--mondlicht); max-width: 760px; margin-top: 10px; }

/* Frage */
.fragen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.fragen h2 { font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--mondlicht); margin-top: 14px; }
.antwort { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.65; color: var(--silber); padding-top: 40px; max-width: 560px; }
.antwort .kern { font-family: var(--display); font-size: 30px; line-height: 1.3; color: var(--mondlicht); margin-top: 6px; }

/* Fuß */
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding: 40px var(--gutter); border-top: 1px solid var(--linie); color: var(--stumm); }
.bottom nav { display: flex; gap: 28px; text-transform: uppercase; }
.bottom .quelle { width: 100%; color: #3E4A62; }

@media (max-width: 1100px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bekommst-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .top-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 110px; }
  .hero-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: 1fr; }
  .fragen { grid-template-columns: 1fr; gap: 24px; }
  .antwort { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split .w, .rise { opacity: 1; transform: none; filter: none; animation: none; }
  .sky-moon img, .moon-halo { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Das Geschenk: zurückgenommen – kleiner, mittig, viel Luft. Die Karte ist ein Detail, kein Plakat. */
section.bekommst { padding-top: 96px; padding-bottom: 96px; }
.bekommst .section-head { align-items: center; text-align: center; margin-bottom: 56px; }
.bekommst .section-head h2 { font-size: clamp(30px, 2.9vw, 44px); color: var(--kreide); }
.bekommst-grid { max-width: 1120px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
.bekommst .foto img { filter: saturate(0.78) contrast(1.02) brightness(0.86); }
.bekommst .foto { max-width: 300px; margin: 0 auto; gap: 16px; }
.bekommst .foto figcaption, .bekommst .karte-text { font-size: 13.5px; line-height: 1.6; color: var(--stumm); }
.bekommst .foto figcaption .mono, .bekommst .karte-text .mono { font-size: 10px; letter-spacing: 0.16em; }
.bekommst .karte-text { max-width: 320px; }
.bekommst .karte { max-width: 340px; padding: 22px 24px 16px; transform: rotate(-0.6deg); box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(21,26,36,0.08), inset 0 0 40px rgba(120,100,70,0.12); }
.bekommst .karte-kopf { margin-bottom: 18px; }
.bekommst .karte-marke { font-size: 15px; }
.bekommst .karte-nr { font-size: 11px; }
.bekommst .karte-titel { font-size: 34px; margin-bottom: 4px; }
.bekommst .karte-mineral { font-size: 11px; margin-bottom: 12px; }
.bekommst .karte-satz { font-size: 15px; line-height: 1.35; margin-bottom: 14px; }
.bekommst .karte-daten { gap: 8px 14px; padding-top: 12px; }
.bekommst .karte-daten dt { font-size: 8px; }
.bekommst .karte-daten dd { font-size: 10px; }
.bekommst .karte-fuss { margin-top: 14px; padding-top: 9px; font-size: 8px; }

/* ==========================================================================
   Der Tag. Nach dem Hero geht die Nacht in den Morgen über: Papier, Kreide,
   Schiefer (die Farbe des Logos). Magisch bleibt der Himmel oben, hell wird
   alles, was man kaufen und verschenken kann.
   ========================================================================== */
:root { --schiefer: #53677C; --papier: #F3EEE4; --papier-tief: #E9E2D4; --tinte-weich: #3A4250; --linie-hell: rgba(83,103,124,0.22); }

/* Wortmarke aus dem Vault (SVG-Symbol, Farbe über currentColor) */
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--kreide); transition: color 0.6s; }
.ic { display: block; width: 34px; height: 35px; fill: currentColor; }
.wm { display: block; width: 190px; height: 50px; fill: currentColor; }
.wm-karte { display: block; width: 104px; height: 27px; color: #4A4640; fill: currentColor; }
.wm-fuss { display: inline-block; width: 120px; height: 32px; vertical-align: middle; color: var(--kreide); fill: currentColor; }
.ic-fuss { display: inline-block; width: 20px; height: 21px; vertical-align: middle; margin-right: 8px; color: var(--kreide); fill: currentColor; }

/* Kopf wechselt die Farbe, sobald der Tag beginnt */
.top { transition: background 0.6s; }
.top a { transition: color 0.5s; }
.top { transition: background 0.5s, padding 0.5s, box-shadow 0.5s; }
/* Sobald gescrollt wird, bekommt die Leiste einen festen Grund, damit nichts durchscheint */
.top.fest { padding-top: 14px; padding-bottom: 14px; background: rgba(6,9,15,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(239,233,220,0.08); }
.top.hell { background: rgba(243,238,228,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--linie-hell); }
.top.hell .wordmark { color: var(--schiefer); }
.top.hell a, .top.hell .cart { color: var(--schiefer); }
.top.hell .cart::after { color: rgba(83,103,124,0.6); }

/* Dämmerung: der Himmel des Heros läuft weich in den Morgen aus */
.tag { position: relative; background: var(--papier); color: var(--tinte); }
.daemmerung { height: 38vh; pointer-events: none;
  background: linear-gradient(180deg, #05080F 0%, #0E1626 16%, #23304A 34%, #55657F 50%, #8E9AAC 64%, #C4C5C1 80%, #E4E0D5 92%, var(--papier) 100%); }
.hero { z-index: 0; }

.tag section.bekommst, .tag section.edition, .tag section.nacht, .tag section.stimme, .tag section.fragen, .tag section.antworten { border-top: 1px solid var(--linie-hell); }
.tag section.bekommst { border-top: none; padding-top: 40px; }
.tag .klein { color: var(--schiefer); }
.tag .muted { color: #8A8E96; }
.tag .section-head h2, .tag .bekommst .section-head h2, .tag .fragen h2, .tag .schritte h3, .tag .antwort .kern, .tag .zitat, .tag .player-titel { color: var(--tinte); }
.tag .edition-satz, .tag .ort-satz, .tag .antwort, .tag .schritte p, .tag .lede { color: var(--tinte-weich); }
.tag .schritte .num { color: var(--schiefer); }
.tag a { color: var(--schiefer); } @media (hover: hover) { .tag a:hover { color: var(--tinte); } }

/* Das Geschenk auf hellem Grund: Fotos ohne Nachtschleier, Karte mit leichtem Schatten */
.tag .foto img, .tag .bekommst .foto img { filter: saturate(0.9) contrast(1.02); -webkit-mask-image: none; mask-image: none; }
.tag .bekommst .foto figcaption, .tag .bekommst .karte-text { color: var(--tinte-weich); }
.tag .bekommst .foto figcaption .mono, .tag .bekommst .karte-text .mono { color: var(--schiefer); }
.tag .bekommst .karte { box-shadow: 0 18px 44px rgba(58,66,80,0.18), inset 0 0 0 1px rgba(21,26,36,0.08), inset 0 0 40px rgba(120,100,70,0.12); }

/* Schmuck und Steine: ruhige Produktkacheln wie im Schmuckhandel – Foto, Name, Material, Preis */
.tag .pkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px 32px; max-width: 1240px; padding: 8px 0 0; justify-content: start; }
.tag .pkarte { max-width: none; width: auto; padding: 0; transform: none; background: none; box-shadow: none; }
@media (hover: hover) { .tag .pkarte:hover { transform: none; } }
.tag .pkarte-foto { padding: 0; background: var(--papier-tief); box-shadow: none; margin-bottom: 16px; overflow: hidden; }
.tag .pkarte-foto img { transition: opacity 1s var(--ease), transform 1.2s var(--ease); filter: saturate(0.92) contrast(1.02); }
@media (hover: hover) { .tag .pkarte:hover .pkarte-foto img { transform: scale(1.03); } }
.tag .pkarte .karte-kopf { margin-bottom: 8px; }
.tag .pkarte .karte-marke { color: var(--schiefer); }
.tag .pkarte .karte-nr { color: #8A8E96; font-size: 11px; } .tag .pkarte .karte-nr b { color: var(--tinte); }
.tag .pkarte .karte-titel { font-size: 30px; line-height: 1.05; margin-bottom: 2px; }
.tag .pkarte .karte-mineral { font-size: 12.5px; color: var(--tinte-weich); margin-bottom: 8px; }
.tag .pkarte .karte-satz { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--tinte-weich); min-height: 0; margin-bottom: 14px; }
.tag .pkarte .karte-fuss { border-top: 1px solid var(--linie-hell); padding-top: 12px; color: var(--tinte); font-size: 12px; }
.tag .pkarte button { background: var(--schiefer); color: var(--papier); }
@media (hover: hover) { .tag .pkarte button:hover { background: var(--tinte); } }
.tag .pkarte .karte-nr.knapp b { color: #8A4B2A; }

/* Hörprobe auf Papier */
.tag .player { background: rgba(255,255,255,0.55); border: 1px solid var(--linie-hell); box-shadow: 0 18px 44px rgba(58,66,80,0.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tag .player-knopf { border-color: var(--schiefer); background: var(--schiefer); color: var(--papier); }
.tag .player-zeit { color: var(--tinte-weich); }

/* Fuß: die Nacht kommt zurück */
.bottom { background: var(--nacht); border-top: none; padding-top: 48px; padding-bottom: 48px; }
.tag .stimme-inner h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1; }
@media (min-width: 1300px) { .tag .pkarten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 28px; max-width: none; } }
/* Die Editionszeile im Hero kommt nach dem Mond, leise, mit sich setzender Sperrung */
.hero .klein { opacity: 0; animation: zeile 1.8s var(--ease) both; animation-delay: 1.2s; }
@keyframes zeile { from { opacity: 0; letter-spacing: 0.26em; transform: translateY(6px); } to { opacity: 1; letter-spacing: 0.08em; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .klein { opacity: 1; animation: none; } }

/* Verschenken */
.tag section.schenken { padding: 96px var(--gutter); border-top: 1px solid var(--linie-hell); }
.anlaesse { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -8px 0 56px; }
.anlaesse-label { color: var(--schiefer); margin-right: 8px; text-transform: uppercase; }
.anlaesse button { font: inherit; font-family: var(--body); font-size: 14px; color: var(--tinte); background: transparent; border: 1px solid var(--linie-hell); border-radius: 999px; height: 40px; padding: 0 18px; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.anlaesse button.aktiv { background: var(--schiefer); color: var(--papier); border-color: var(--schiefer); transform: translateY(-1px); }
@media (hover: hover) { .anlaesse button:hover { background: var(--schiefer); color: var(--papier); border-color: var(--schiefer); transform: translateY(-1px); } }
.schenken-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1120px; }
.schachtel { max-width: 440px; margin: 0; }
.schachtel figcaption { color: var(--tinte-weich); font-size: 14px; }
.schachtel figcaption .mono { color: var(--schiefer); }
.weihnachten { display: flex; flex-direction: column; gap: 16px; max-width: 480px; padding: 36px 40px; background: rgba(255,255,255,0.5); border: 1px solid var(--linie-hell); box-shadow: 0 18px 44px rgba(58,66,80,0.10); }
.weihnachten h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.05; color: var(--tinte); }
.weihnachten p { color: var(--tinte-weich); font-size: 15px; line-height: 1.65; }
.weihnachten .klein { color: #8A4B2A; }
.weihnachten-hinweis { color: var(--schiefer); font-size: 11px; line-height: 1.6; }
.weihnachten .btn { align-self: flex-start; background: var(--schiefer); color: var(--papier); margin-top: 6px; }
@media (hover: hover) { .weihnachten .btn:hover { background: var(--tinte); color: var(--papier); } }
.tag .pkarte.hervor .pkarte-foto { box-shadow: 0 0 0 2px var(--schiefer), 0 18px 44px rgba(58,66,80,0.18); }
.tag .pkarte .pkarte-foto { transition: box-shadow 0.6s; }
@media (max-width: 1100px) { .schenken-grid { grid-template-columns: 1fr; } }
.schachtel img { -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 52%, transparent 76%); mask-image: radial-gradient(ellipse at 50% 50%, #000 52%, transparent 76%); }

/* Collage auf Rasterpapier */
.collage { position: relative; max-width: 1120px; height: 640px; margin: 0 0 72px; background-color: #ECE6D9;
  background-image: linear-gradient(rgba(83,103,124,0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(83,103,124,0.11) 1px, transparent 1px); background-size: 28px 28px;
  box-shadow: inset 0 0 0 1px var(--linie-hell); overflow: hidden; }
.cl-foto { position: absolute; margin: 0; padding: 10px 10px 12px; background: #FBF9F4; box-shadow: 0 14px 30px rgba(58,66,80,0.22), 0 2px 4px rgba(58,66,80,0.12); transition: transform 0.8s var(--ease); }
.cl-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
@media (hover: hover) { .cl-foto:hover { transform: rotate(0deg) scale(1.02); z-index: 5; } }
.cl-1 { left: 6%; top: 52px; width: 34%; height: 300px; transform: rotate(-2.2deg); }
.cl-2 { right: 7%; top: 120px; width: 25%; height: 330px; transform: rotate(2.4deg); }
.cl-3 { left: 33%; top: 318px; width: 27%; height: 280px; transform: rotate(-1deg); z-index: 2; }
.cl-mond { position: absolute; left: 43%; top: 64px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #0E1626; box-shadow: 0 10px 22px rgba(58,66,80,0.3); z-index: 3; }
.cl-mond img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); }
.cl-zettel { position: absolute; left: 3%; top: 330px; width: 300px; padding: 26px 28px 30px; z-index: 3; transform: rotate(-1.4deg); color: var(--tinte);
  background-color: #E6DECB;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  clip-path: polygon(0% 3%, 6% 0%, 13% 2.5%, 22% 0.5%, 31% 3%, 42% 1%, 53% 3.5%, 64% 0.5%, 75% 2.5%, 86% 0%, 94% 2.5%, 100% 1%, 99% 97%, 92% 100%, 83% 97.5%, 72% 99.5%, 61% 97%, 50% 100%, 38% 97.5%, 27% 99.5%, 16% 97%, 7% 100%, 0% 98%);
  filter: drop-shadow(0 10px 18px rgba(58,66,80,0.2)); }
.cl-zettel h3 { font-size: 40px; font-style: italic; line-height: 1; margin-bottom: 14px; }
.cl-zettel ul { margin: 0; padding: 0 0 0 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; line-height: 1.9; color: var(--tinte-weich); }
.cl-notiz { position: absolute; font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--schiefer); z-index: 4; }
.cl-notiz svg { display: block; width: 110px; height: 64px; fill: none; stroke: var(--schiefer); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-n1 { right: 4%; top: 34px; width: 180px; text-align: right; transform: rotate(4deg); }
.cl-n1 svg { margin: 4px 40px 0 auto; }
.cl-n2 { left: 9%; top: 14px; font-size: 20px; transform: rotate(-3deg); }
.cl-farben { position: absolute; right: 9%; bottom: 44px; display: flex; gap: 14px; }
.cl-farben span { width: 76px; height: 92px; background: #FBF9F4; box-shadow: 0 6px 14px rgba(58,66,80,0.16); position: relative; }
.cl-farben span::before { content: ""; position: absolute; inset: 0 0 18px 0; }
.cl-farben .f1::before { background: #0E1626; } .cl-farben .f2::before { background: #53677C; } .cl-farben .f3::before { background: #D9B59A; } .cl-farben .f4::before { background: #C9CFD8; }
@media (max-width: 1000px) {
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
  .cl-foto, .cl-zettel, .cl-mond, .cl-notiz, .cl-farben { position: static; width: auto; height: auto; transform: none; }
  .cl-foto img { aspect-ratio: 1; } .cl-mond { width: 120px; height: 120px; } .cl-notiz svg { display: none; }
}

/* Erster Abschnitt nach der Dämmerung: ohne Trennlinie, dichter dran */
.tag .daemmerung + section { border-top: none; padding-top: 40px; }
.tag section.bekommst { border-top: 1px solid var(--linie-hell); padding-top: 96px; }
.tag section.schenken { padding-bottom: 72px; }
.collage { margin-bottom: 0; height: 620px; }
.cl-mond { left: 53%; top: 58px; }
.cl-zettel h3 { font-size: 34px; }

/* Konto im Shop */
.top { gap: 22px; }
.konto-link { text-transform: uppercase; margin-left: auto; }
.konto-link[data-anzahl]::after { content: " (" attr(data-anzahl) ")"; color: var(--stumm); }
.top.hell .konto-link[data-anzahl]::after { color: rgba(83,103,124,0.6); }
.pkarte-foto { position: relative; }
.hast-du { position: absolute; left: 10px; bottom: 10px; right: auto; padding: 7px 11px 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier) !important; background: rgba(14,22,38,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (hover: hover) { .hast-du:hover { background: var(--schiefer); } }
.top { justify-content: flex-start; }
.top-nav { margin: 0 auto; }
.konto-link { margin-left: 0; }

/* Produktkacheln: gerahmt, gleich hoch, Preiszeile immer auf einer Linie, kleines Logo im Kopf */
.tag .pkarten { align-items: stretch; }
.tag .pkarte { display: flex; flex-direction: column; padding: 14px 14px 16px; border: 1px solid var(--linie-hell); background: rgba(255,255,255,0.38); transition: border-color 0.4s, box-shadow 0.5s, transform 0.6s var(--ease); }
@media (hover: hover) { .tag .pkarte:hover { border-color: rgba(83,103,124,0.5); box-shadow: 0 18px 40px rgba(58,66,80,0.12); transform: translateY(-3px); } }
.tag .pkarte .karte-kopf { align-items: center; }
.tag .pkarte .karte-marke { display: inline-flex; align-items: center; gap: 8px; }
.pk-icon { width: 17px; height: 18px; fill: var(--schiefer); flex: none; }
.tag .pkarte .karte-mineral { min-height: 2.9em; }
.tag .pkarte .karte-satz { flex: 1 1 auto; }
.tag .pkarte .karte-fuss { margin-top: auto; }

/* ============================================================
   Umbau 18.9.2026 – sechs Steinarten, Halskette, Set „Alle sechs“
   ============================================================ */

/* Sieben Kacheln: vier oben, drei darunter. Ruhiger als 5 + 2. */
.tag .pkarten { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 1240px; gap: 44px 28px; }
@media (min-width: 1240px) { .tag .pkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 44px 30px; } }
@media (min-width: 1660px) { .tag .pkarten { gap: 48px 36px; } }

/* „Steht für: Kraft · Mut · Lebensfreude“ – zwischen Mineral und Beschreibung */
.tag .pkarte .karte-mineral { min-height: 2.6em; margin-bottom: 10px; }
.karte-steht { display: block; font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--tinte); margin: 0 0 12px; padding-top: 10px; border-top: 1px dotted var(--linie-hell); min-height: 47px; }
.karte-steht span { text-transform: uppercase; letter-spacing: 0.14em; color: var(--schiefer); }
.tag .pkarte.schmuck .pkarte-foto { background: var(--papier-tief); }

/* Das Set: eine breite, ruhige Kachel unter den Kacheln */
.set-halter { margin: 52px 0 8px; max-width: 1240px; }
@media (min-width: 1240px) { .set-halter { max-width: none; } }
.set-kachel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center;
  border: 1px solid var(--linie-hell); background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.34));
  padding: 30px 32px; transition: border-color 0.4s, box-shadow 0.5s; }
@media (hover: hover) { .set-kachel:hover { border-color: rgba(83,103,124,0.5); box-shadow: 0 20px 48px rgba(58,66,80,0.12); } }
.set-reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end;
  padding: 26px 20px 18px; background: var(--papier-tief); box-shadow: inset 0 0 0 1px rgba(83,103,124,0.10); }
.set-stueck { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.set-stueck img { display: block; width: 100%; max-width: 86px; height: auto; filter: drop-shadow(0 8px 14px rgba(58,66,80,0.22)); }
.set-stueck figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.set-name { font-family: var(--body); font-size: 11.5px; line-height: 1.25; color: var(--tinte-weich); }
.set-nr { font-size: 10px; letter-spacing: 0.12em; color: var(--schiefer); }
.set-text .karte-titel { font-family: var(--display); font-size: 38px; line-height: 1.02; margin: 0 0 8px; color: var(--tinte); }
.set-text .karte-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.set-text .karte-marke { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--schiefer); }
.set-text .karte-nr { font-family: var(--mono); font-size: 11px; color: #8A8E96; } .set-text .karte-nr b { color: var(--tinte); }
.set-lead { font-size: 15.5px; line-height: 1.55; color: var(--tinte); margin-bottom: 10px; }
.set-lead b { font-weight: 600; }
.set-text .karte-satz { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--tinte-weich); margin-bottom: 16px; }
.set-text .karte-fuss { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--linie-hell); padding-top: 12px; color: var(--tinte); font-size: 12px; }
.set-text .karte-fuss button { font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--schiefer); border: none; color: var(--papier); height: 36px; padding: 0 16px; cursor: pointer; transition: background 0.3s, transform 0.4s var(--ease); }
@media (hover: hover) { .set-text .karte-fuss button:hover { background: var(--tinte); transform: translateY(-1px); } }
.set-text .karte-fuss button[disabled] { opacity: 0.4; cursor: default; transform: none; }
@media (max-width: 1000px) { .set-kachel { grid-template-columns: 1fr; gap: 26px; padding: 24px; } .set-reihe { gap: 8px; padding: 20px 12px 14px; } .set-stueck img { max-width: 60px; } .set-name { font-size: 10px; } }
@media (max-width: 560px) { .set-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } }

/* „Dieser Vollmond“ – ruhiger Block im Abschnitt „Die Nacht“ */
.vollmond-block { max-width: 640px; margin: 40px 0 56px; padding: 26px 30px 24px; border-left: 2px solid var(--linie-hell); background: rgba(255,255,255,0.34); }
.vollmond-block .klein { color: var(--schiefer); display: block; margin-bottom: 8px; }
.vollmond-zeile { font-family: var(--display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; color: var(--tinte); margin-bottom: 10px; }
.vollmond-satz { font-size: 15.5px; line-height: 1.6; color: var(--tinte-weich); margin-bottom: 12px; }
.vollmond-daten { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--schiefer); }

/* Anlass-Chips: sieben Stück brauchen etwas mehr Luft */
.anlaesse { gap: 10px 10px; }

/* Nachtwahl: aus welcher Vollmondnacht soll das Stück kommen? */
.vollmond-wann { color: var(--schiefer); margin-top: 4px; }
.nachtwahl { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--linie-hell); background: var(--papier); color: var(--tinte); box-shadow: 0 40px 120px rgba(6,9,15,0.55); overflow: auto; }
.nachtwahl::backdrop { background: rgba(6,9,15,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nachtwahl[open] { animation: nw-auf 0.5s var(--ease) both; }
@keyframes nw-auf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nachtwahl-inner { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 34px 36px 28px; }
.nachtwahl-zu { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border: none; background: none; font-size: 26px; line-height: 1; color: var(--schiefer); cursor: pointer; }
@media (hover: hover) { .nachtwahl-zu:hover { color: var(--tinte); } }
.nachtwahl-kopf { display: flex; gap: 20px; align-items: center; }
.nachtwahl-kopf img { width: 84px; height: 84px; object-fit: cover; flex: none; box-shadow: 0 8px 18px rgba(58,66,80,0.2); }
.nachtwahl-kopf .klein { color: var(--schiefer); margin-bottom: 6px; }
.nachtwahl-kopf h3 { font-size: 38px; line-height: 1; }
.nachtwahl-unter { font-size: 13px; color: var(--tinte-weich); margin-top: 6px; }
.nachtwahl-lead { font-size: 15px; line-height: 1.6; color: var(--tinte-weich); max-width: 60ch; }
.nachtwahl-liste { display: flex; flex-direction: column; gap: 12px; }
.nw-nacht { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 18px 20px; border: 1px solid var(--linie-hell); background: rgba(255,255,255,0.45); cursor: pointer; transition: border-color 0.3s, background 0.3s, box-shadow 0.4s; }
@media (hover: hover) { .nw-nacht:hover { border-color: rgba(83,103,124,0.55); } }
.nw-nacht.an { border-color: var(--schiefer); background: #fff; box-shadow: 0 12px 30px rgba(58,66,80,0.14), inset 0 0 0 1px var(--schiefer); }
.nw-nacht.leer { opacity: 0.5; cursor: default; }
.nw-nacht input { position: absolute; opacity: 0; pointer-events: none; }
.nw-nacht:focus-within { outline: 2px solid var(--schiefer); outline-offset: 2px; }
.nw-mond { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #0E1626; box-shadow: 0 6px 14px rgba(58,66,80,0.3); }
.nw-mond img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); display: block; }
.nw-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nw-datum { color: var(--schiefer); text-transform: uppercase; font-size: 11px; }
.nw-name { font-family: var(--display); font-size: 30px; line-height: 1.05; }
.nw-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-marken i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px 3px; background: var(--schiefer); color: var(--papier); }
.nw-satz { font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.35; color: var(--tinte); }
.nw-besonders { font-size: 14px; line-height: 1.6; color: var(--tinte-weich); }
.nw-besonders b { font-weight: 600; color: var(--tinte); }
.nw-daten { font-size: 11px; color: #7A7F88; }
.nachtwahl-fuss { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0 4px; background: linear-gradient(180deg, rgba(243,238,228,0) 0%, var(--papier) 30%); }
.nachtwahl-ok { background: var(--schiefer); color: var(--papier); border: none; cursor: pointer; }
@media (hover: hover) { .nachtwahl-ok:hover { background: var(--tinte); color: var(--papier); } }
.nachtwahl-ok[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* Schritt 1: Vollmond wählen */
.nachtleiste-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1240px; margin-bottom: 22px; }
.ns-nacht { font: inherit; text-align: left; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 18px; row-gap: 4px; align-items: center; padding: 20px 22px; color: var(--tinte); background: rgba(255,255,255,0.38); border: 1px solid var(--linie-hell); cursor: pointer; transition: border-color 0.4s, background 0.4s, box-shadow 0.5s, transform 0.5s var(--ease); }
@media (hover: hover) { .ns-nacht:hover { border-color: rgba(83,103,124,0.55); transform: translateY(-2px); } }
.ns-nacht.an { background: var(--tiefe); color: var(--kreide); border-color: var(--tiefe); box-shadow: 0 22px 50px rgba(14,22,38,0.28); }
.ns-mond { grid-row: 1 / span 4; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #0E1626; box-shadow: 0 8px 18px rgba(58,66,80,0.3); transition: box-shadow 0.6s; }
.ns-nacht.an .ns-mond { box-shadow: 0 0 0 1px rgba(244,241,230,0.25), 0 0 34px rgba(244,241,230,0.35); }
.ns-mond img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); display: block; }
.ns-monat { text-transform: uppercase; color: var(--schiefer); font-size: 11px; }
.ns-nacht.an .ns-monat, .ns-nacht.an .ns-datum { color: var(--silber); }
.ns-name { font-family: var(--display); font-size: 27px; line-height: 1.05; }
.ns-datum { font-size: 11px; color: #7A7F88; }
.ns-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ns-marken i { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px 3px; background: var(--schiefer); color: var(--papier); }
.ns-nacht.an .ns-marken i { background: rgba(244,241,230,0.16); color: var(--mondlicht); }
.nacht-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; max-width: 1240px; padding: 30px 32px; margin-bottom: 56px; background: rgba(255,255,255,0.5); border: 1px solid var(--linie-hell); }
.nacht-panel.frisch { animation: np-neu 0.7s var(--ease) both; }
@keyframes np-neu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nacht-panel .klein { color: var(--schiefer); margin-bottom: 8px; }
.np-name { font-size: clamp(34px, 3.4vw, 50px); line-height: 1; margin-bottom: 14px; }
.np-satz { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--tinte); }
.np-besonders { font-size: 15px; line-height: 1.65; color: var(--tinte-weich); margin-bottom: 18px; }
.np-besonders b { color: var(--tinte); font-weight: 600; }
.np-daten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--linie-hell); }
.np-daten div { display: flex; flex-direction: column; gap: 3px; }
.np-daten dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schiefer); }
.np-daten dd { margin: 0; font-size: 12px; color: var(--tinte); }
.schritt-zwei { margin: 0 0 22px; }
@media (max-width: 1000px) { .nacht-panel { grid-template-columns: 1fr; gap: 24px; } }

/* Klein bei den Produkten: der gewählte Vollmond */
.schritt-nacht { text-transform: none; letter-spacing: 0.04em; color: var(--tinte-weich); }
.schritt-nacht b { font-weight: 500; color: var(--tinte); }
.schritt-nacht a { border-bottom: 1px solid currentColor; }
.mond-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 12px; padding: 5px 10px 4px 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--schiefer) !important; background: rgba(83,103,124,0.09); border-radius: 999px; transition: background 0.3s; }
@media (hover: hover) { .mond-chip:hover { background: rgba(83,103,124,0.18); } }
.mond-chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; background: #0E1626; }
.tag .pkarte .karte-satz { margin-bottom: 12px; }
.set-kachel .mond-chip { margin-top: 4px; }

/* „Steht für“ ist die Hauptsache der Kachel: groß, kräftig, direkt unter dem Namen */
.tag .pkarte .karte-steht { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 12px; padding: 12px 0 12px; border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); min-height: 92px; font-family: var(--body); letter-spacing: 0; }
.tag .pkarte .karte-steht span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--schiefer); }
.tag .pkarte .karte-steht b { font-family: var(--body); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--tinte); letter-spacing: 0.005em; text-wrap: balance; }
.tag .pkarte .karte-steht.leer { border: none; min-height: 0; padding: 0; margin: 0; }
.tag .pkarte .karte-mineral { min-height: 0; font-size: 11.5px; color: #8A8E96; margin-bottom: 6px; }
.tag .pkarte .karte-titel { margin-bottom: 0; }
/* „Steht für“ edler: nicht fett und groß, sondern in der kursiven Serifenschrift der Marke */
.tag .pkarte .karte-steht { gap: 4px; margin: 6px 0 10px; padding: 10px 0 0; border-bottom: none; min-height: 74px; }
.tag .pkarte .karte-steht span { font-size: 9.5px; }
.tag .pkarte .karte-steht b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.22; color: var(--schiefer); letter-spacing: 0; }
/* „Steht für“ als nachtblaues Band, Schrift hell wie im Header */
.tag .pkarte .karte-steht { margin: 10px -14px 12px; padding: 12px 14px 13px; min-height: 78px; border-top: none; background: var(--tiefe); background-image: radial-gradient(ellipse at 85% 0%, rgba(90,120,190,0.22) 0%, rgba(90,120,190,0) 60%); }
.tag .pkarte .karte-steht span { color: var(--silber); }
.tag .pkarte .karte-steht b { color: var(--mondlicht); }
/* Band deutlich dunkelblau statt fast schwarz */
.tag .pkarte .karte-steht { background: #1C2A47; background-image: linear-gradient(100deg, #182440 0%, #23355A 100%); }
/* „Steht für“: kein gefülltes Band mehr – fein in Schieferblau umrandet, Schrift in Schieferblau */
.tag .pkarte .karte-steht { margin: 10px 0 12px; padding: 10px 12px 11px; min-height: 76px; background: transparent; background-image: none; border: 1px solid rgba(83,103,124,0.55); }
.tag .pkarte .karte-steht span { color: rgba(83,103,124,0.8); }
.tag .pkarte .karte-steht b { color: var(--schiefer); }
/* „Steht für“: Schrift wieder wie am Anfang (kleine Mono-Zeile), Rahmen 2 px in Schieferblau */
.tag .pkarte .karte-steht { display: block; min-height: 58px; padding: 9px 11px 9px; border: 2px solid rgba(83,103,124,0.6); font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.06em; color: var(--tinte); }
.tag .pkarte .karte-steht span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schiefer); }
.tag .pkarte .karte-steht span::after { content: ": "; }
.tag .pkarte .karte-steht b { font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 11px; line-height: 1.55; letter-spacing: 0.06em; color: var(--tinte); }
/* „Steht für“ wieder in eigener Zeile, die Eigenschaften darunter in einer Zeile */
.tag .pkarte .karte-steht { display: flex; flex-direction: column; gap: 3px; min-height: 66px; }
.tag .pkarte .karte-steht span::after { content: ""; }
.tag .pkarte .karte-steht span { font-size: 9.5px; }
.tag .pkarte .karte-steht b { letter-spacing: 0.03em; font-size: 11.5px; }
.tag .pkarte .karte-steht { padding-left: 10px; padding-right: 8px; }
.tag .pkarte .karte-steht b { letter-spacing: 0; font-size: 11px; white-space: normal; }

/* Der Abend: vom Papier zurück in die Nacht – die Stimme und die Frage liegen wieder im Dunkeln */
.abenddaemmerung { height: 42vh; pointer-events: none;
  background: linear-gradient(180deg, var(--papier) 0%, #E4E0D5 8%, #C4C5C1 20%, #8E9AAC 36%, #55657F 52%, #23304A 68%, #0E1626 84%, var(--nacht) 100%); }
.nachtwelt { position: relative; background: radial-gradient(ellipse at 70% 0%, #101a30 0%, #080d1b 45%, var(--nacht) 100%); color: var(--kreide); }
.nachtwelt section.stimme { border-top: none; padding-top: 60px; }
.nachtwelt .stimme-inner h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--mondlicht); }
.nachtwelt section.fragen { border-top: 1px solid var(--linie); }

/* Seitenende: Stimme zweispaltig mit Zitat als Papierkarte, ruhiger Schluss, dann sanft zurück in die Nacht */
.stimme-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; max-width: 1240px; }
.tag .stimme-inner { max-width: 560px; }
.zitat-karte { position: relative; margin: 0; padding: 46px 48px 38px; transform: rotate(0.7deg); color: var(--tinte);
  background-color: #E6DECB;
  background-image: radial-gradient(ellipse at 18% 8%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%), radial-gradient(ellipse at 90% 100%, rgba(120,100,70,0.16) 0%, rgba(120,100,70,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  box-shadow: 0 24px 60px rgba(58,66,80,0.18), inset 0 0 0 1px rgba(21,26,36,0.08), inset 0 0 50px rgba(120,100,70,0.12); }
.zitat-icon { display: block; width: 34px; height: 36px; fill: var(--schiefer); margin-bottom: 22px; }
.tag .zitat-karte .zitat { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.28; color: var(--tinte); max-width: none; }
.zitat-karte figcaption { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(26,26,28,0.2); color: #6E685E; text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; }
.tag section.schluss { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 120px var(--gutter) 90px; border-top: 1px solid var(--linie-hell); }
.schluss-icon { width: 54px; height: 56px; fill: var(--schiefer); }
.tag section.schluss h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1; color: var(--tinte); }
.tag section.schluss p { color: var(--tinte-weich); font-size: 18px; }
.tag section.schluss .btn { margin-top: 10px; background: var(--schiefer); color: var(--papier); }
@media (hover: hover) { .tag section.schluss .btn:hover { background: var(--tinte); color: var(--papier); } }
.abend { height: 30vh; pointer-events: none; background: linear-gradient(180deg, var(--papier) 0%, #E4E0D5 10%, #C4C5C1 24%, #8E9AAC 40%, #55657F 56%, #23304A 72%, #0E1626 88%, var(--nacht) 100%); }
@media (max-width: 1000px) { .stimme-raster { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Was du noch wissen willst ---------- */
.antworten .section-head h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; margin-top: 12px; }
.antworten-liste {
  margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 56px; max-width: 1100px;
}
.antworten-liste > div { border-top: 1px solid var(--linie); padding-top: 18px; }
.tag .antworten-liste > div { border-top-color: var(--linie-hell); }
.antworten-liste dt { font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--mondlicht); margin: 0 0 10px; }
.antworten-liste dd { margin: 0; font-size: 16px; line-height: 1.65; color: var(--silber); max-width: 480px; }
.tag .antworten-liste dt { color: var(--tinte); }
.tag .antworten-liste dd { color: var(--tinte-weich); }
@media (max-width: 760px) { .antworten-liste { grid-template-columns: 1fr; gap: 26px; } }

/* ===== QA 4.10.2026: Handy, Tablet, große Schirme, Safari ===== */

/* Kopfzeile: Einträge bleiben einzeilig und auf einer Linie */
.top-nav a, .konto-link, .cart { white-space: nowrap; }
.top { align-items: center; }
@media (max-width: 1100px) {
  .top { gap: 18px; }
  .top-nav { gap: 18px; }
}
@media (max-width: 760px) {
  .top { gap: 14px; }
  .top .konto-link { margin-left: auto; }
  .top .konto-link, .top .cart { font-size: 11px; letter-spacing: 0.06em; }
  .top .wordmark svg { max-width: 46vw; }
}

/* Hero am Handy: der Mond sitzt über dem Text statt dahinter */
.hero { min-height: 100vh; }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
@media (max-width: 760px) {
  .hero { padding-top: 240px; }
  /* Der Himmel setzt den Mond sonst nach der echten Uhrzeit – am Handy landet er dann im Text. */
  .hero .sky-moon { left: 74% !important; top: 150px !important; width: 108px; }
}

/* „Ein Stein, eine Karte, eine Stimme“: bis 1100 px untereinander statt drei schmale Spalten */
@media (max-width: 1100px) {
  .bekommst-grid { grid-template-columns: 1fr; gap: 48px; max-width: 520px; }
  .bekommst-grid .karte { width: 100%; max-width: 420px; }
}

/* Angemeldet: am Handy und Tablet nur „Schatulle (31)“, der Vorname erst auf breiten Schirmen */
@media (max-width: 1100px) { .konto-link .nur-breit { display: none; } }

/* Schmale Handys: „Korb (0)“ statt „Warenkorb (0)“, Hauptnavigation erst ab Tablet quer */
@media (max-width: 900px) { .top-nav { display: none; } .top .konto-link, .top .top-nav + .cart { margin-left: auto; } }
@media (max-width: 480px) { .cart-waren { display: none; } }
@media (max-width: 420px) { .top { gap: 11px; } .top .wordmark svg { max-width: 40vw; } .top .konto-link, .top .cart { letter-spacing: 0.04em; } }

/* Preis nie auseinanderreißen */
.preis-ganz { white-space: nowrap; }

/* Große Schirme: Inhalt bleibt in einer ruhigen, mittigen Breite (max. 1600 px) */
@media (min-width: 1800px) {
  :root { --gutter: calc((100vw - 1600px) / 2); }
}

/* ===== Kopfzeile beim Laden (5.10.2026) =====
   Nichts darf springen: „Anmelden“ steht von Anfang an im HTML (unsichtbar, Platz reserviert) und blendet
   nur ein. Die Navigation sitzt ab 1000 px fest in der Mitte, unabhängig davon, was rechts steht.
   Die ganze Zeile blendet mit der Seite ein, statt sofort dazustehen. */
.top { animation: kopfAuf 1.4s var(--ease) both; animation-delay: 2.2s; }
@keyframes kopfAuf { from { opacity: 0; } to { opacity: 1; } }
.top.sofort { animation: kopfAuf 0.5s var(--ease) both; animation-delay: 0s; }
.konto-link { opacity: 0; transition: opacity 0.8s var(--ease), color 0.5s; }
.konto-link.bereit { opacity: 1; }
.konto-link.ohne { visibility: hidden; }
@media (min-width: 1001px) {
  .top-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .top .konto-link { margin-left: auto; }
}
@media (max-width: 1000px) { .top-nav { display: none; } .top .konto-link { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .top { animation: none; } .konto-link { transition: none; } }

/* 6.10.2026: fünf Steine – auf breiten Schirmen alle in einer Reihe statt 4 + 1 */
@media (min-width: 1240px) { .tag .pkarten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 22px; } }
.pkarte .fuss-text { display: flex; flex-direction: column; gap: 2px; }
.pkarte .fuss-text .preis-ganz { font-weight: 600; }
@media (min-width: 1240px) {
  .tag .pkarte .karte-fuss { flex-direction: column; align-items: stretch; gap: 12px; }
  .tag .pkarte .karte-fuss .fuss-text { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 11px; }
  .tag .pkarte .karte-fuss button { width: 100%; }
}

/* ===== Prüfung 15.10.2026 ===== */
/* Nur für Screenreader (Statuszeile „liegt im Warenkorb“) */
.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Kontraste auf WCAG AA: Metadaten auf hellem Grund dunkler, auf dunklem Grund heller – gleiche Farbtöne */
:root { --stumm: #7A859B; --meta-hell: #666A72; }
.tag .muted, .tag .pkarte .karte-nr, .set-text .karte-nr, .tag .pkarte .karte-mineral, .ns-datum { color: var(--meta-hell); }
.tag .pkarte .karte-nr, .set-text .karte-nr, .ns-datum { font-size: 12px; }
.tag .pkarte .karte-mineral { font-size: 12px; }
.ns-nacht.an .ns-datum { color: var(--silber); }
.bottom .quelle { color: #7A879F; }
.top.hell .cart::after, .top.hell .konto-link[data-anzahl]::after { color: var(--schiefer); }

/* Handy und Tablet: die Navigation als schlanke zweite Zeile im Kopf. Sie steht von Anfang an im HTML
   und blendet mit der Kopfzeile ein – nichts verschiebt sich beim Laden. */
@media (max-width: 1000px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top-nav { display: flex; order: 3; flex: 1 0 100%; justify-content: center; gap: 26px; position: static; transform: none; margin: 0; font-size: 11px; letter-spacing: 0.1em; overflow-x: auto; scrollbar-width: none; }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { padding: 4px 0; }
}
@media (max-width: 480px) {
  .top-nav { gap: 22px; letter-spacing: 0.08em; }
  .top-nav .nav-breit { display: none; }
}
@media (max-width: 760px) {
  .hero { padding-top: 260px; }
  .hero .sky-moon { top: 172px !important; }
}