/* ============================================================
   guitarnotemap.com — Stylesheet
   ============================================================

   Die Farbwelt ist DIESELBE wie in den Produkten: die Werte stammen aus
   shared/tokens.css und sind hier nicht neu erfunden worden. Wer ein
   Produkt öffnet, nachdem er die Website gesehen hat, soll dasselbe
   Papier, dieselbe Rostfarbe und dieselbe Schrift wiedererkennen.

   Was hier ANDERS ist als in den Werkzeugen, und warum:
     * größere Typo und mehr Weißraum — eine Verkaufsseite wird gescrollt,
       ein Werkzeug wird benutzt;
     * die Papierkörnung liegt schwächer auf (0,22 statt 0,4), weil sie
       über ganzflächigen Fotos sonst schmutzig wirkt;
     * Bewegung. In den Werkzeugen gibt es fast keine, hier trägt sie —
       aber jede Regung steht unter prefers-reduced-motion.

   Schriften liegen lokal (assets/fonts). Kein Google-Fonts-Aufruf: das
   wäre eine Datenübermittlung in die USA, die in der
   Datenschutzerklärung stehen müsste. Der Verzicht ist die einfachere
   und ehrlichere Lösung.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrains_Mono.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* aus shared/tokens.css */
  --bg: #f3ead8;
  --bg-deep: #e8dcc0;
  --paper: #faf3e3;
  --ink: #2a1d12;
  --ink-soft: #5a4a38;
  --accent: #c2410c;
  --accent-deep: #7a2a08;
  --gold: #d4a942;
  --gold-deep: #a07d24;
  --green: #3f6b4c;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --line: rgba(90, 74, 56, 0.28);
  --line-soft: rgba(90, 74, 56, 0.16);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06), 0 4px 14px rgba(60, 40, 20, 0.07);
  --shadow-md: 0 2px 6px rgba(60, 40, 20, 0.08), 0 18px 44px rgba(60, 40, 20, 0.13);
  --shadow-lg: 0 4px 10px rgba(60, 40, 20, 0.10), 0 40px 80px rgba(60, 40, 20, 0.18);

  --wrap: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --r: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Papierkorn — dieselbe Textur wie in den Werkzeugen, nur zurückhaltender */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: multiply;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem;
  font-family: var(--mono); font-size: 0.85rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:where(a, button, select, summary, input):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------- Typo */

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.kicker::before {
  content: ''; display: inline-block;
  width: 22px; height: 2px; background: var(--gold);
  vertical-align: 0.28em; margin-right: 0.6rem;
}

.sec-head {
  text-wrap: balance;
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.sec-lede {
  text-wrap: pretty;
  margin-top: 1rem;
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--ink-soft);
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--ink-soft); }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }

/* ---------------------------------------------------------- Knöpfe */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.72rem 1.25rem;
  border: 1.6px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background 0.18s, color 0.18s,
              border-color 0.18s, box-shadow 0.18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: var(--paper); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 0.88rem; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.75rem; }

/* ---------------------------------------------------------- Kopfzeile */

.top {
  position: sticky; top: 0; z-index: 90;
  background: rgba(243, 234, 216, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.top.is-stuck { border-bottom-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.top-inner {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 68px;
}
.brand { flex: 0 0 auto; display: block; }
.brand-mark { height: 26px; width: auto; }
.top-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.top-nav a {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.03em; text-decoration: none; color: var(--ink-soft);
  padding-block: 0.4rem; position: relative;
}
.top-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0.15rem;
  height: 1.5px; background: var(--accent);
  transition: right 0.28s var(--ease);
}
.top-nav a:hover { color: var(--ink); }
.top-nav a:hover::after { right: 0; }
.top-right { display: flex; align-items: center; gap: 0.9rem; }
.lang {
  display: inline-flex; border: 1.5px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--paper);
}
.lang a {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  padding: 0.32rem 0.62rem; text-decoration: none; color: var(--ink-soft);
  transition: background 0.18s, color 0.18s;
}
.lang a.is-on { background: var(--ink); color: var(--paper); }
.lang a:not(.is-on):hover { color: var(--accent); }

.burger {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 42px; height: 42px; margin-left: auto;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 10px; cursor: pointer; padding: 0 10px;
}
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 0.2rem;
  padding: 0.6rem var(--pad) 1.3rem;
  border-top: 1px solid var(--line-soft);
}
.mobile-nav a {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; padding: 0.75rem 0;
  border-bottom: 1px dotted var(--line-soft);
}
.mobile-nav .btn { margin-top: 0.9rem; border-bottom: 0; }
.mobile-lang { color: var(--accent); }

.scroll-progress { height: 2px; background: transparent; }
.scroll-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--accent));
}

/* ---------------------------------------------------------- Hero */

.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); overflow: hidden; }
.hero-bg {
  position: absolute; inset: auto 0 0 0; top: -10%;
  pointer-events: none; opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
}
.hero-bg svg { width: 100%; height: 100%; }
.bg-strings line { stroke: var(--ink); stroke-width: 1; opacity: 0.28; }
.bg-frets line { stroke: var(--ink); stroke-width: 1.6; opacity: 0.18; }
.bg-dots circle { fill: var(--gold); opacity: 0.5; }

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  position: relative; z-index: 2;
}
.hero-head {
  font-size: clamp(2.4rem, 6vw, 4.05rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  margin-bottom: 1.3rem;
}
.hero-head .line { display: block; }
.hero-head .accent {
  color: var(--accent);
  position: relative;
}
.hero-head .accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 0.09em; background: var(--gold); opacity: 0.55; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: underline 1s var(--ease) 0.45s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.hero-text .lede { max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 2.4rem; padding-top: 1.5rem;
  border-top: 1px dashed var(--line);
  list-style: none;
}
.hero-facts li {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.4;
}
.hero-facts b {
  display: block; font-family: var(--serif); font-size: 1.9rem;
  font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  text-transform: none;
}
.hero-shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #f6f6f4;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
  transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
  animation: float-in 1.1s var(--ease) both;
}
@keyframes float-in {
  from { opacity: 0; transform: perspective(1400px) rotateY(-9deg) translateY(28px); }
}

/* ---------------------------------------------------------- USP-Band */

.usp-strip { padding-block: 0; }
.usp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.usp { background: var(--paper); padding: 1.5rem 1.3rem; }
.usp .ico { width: 26px; height: 26px; color: var(--accent); margin-bottom: 0.7rem; }
.usp h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.2rem; }
.usp p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------------------------------------------------------- Demo */

.demo { padding-bottom: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, transparent, rgba(232, 220, 192, 0.5) 30%, transparent); }
.demo-panel {
  margin-top: 2.5rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.1rem, 3vw, 1.9rem);
}
.demo-controls {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end;
  padding-bottom: 1.3rem; margin-bottom: 1.4rem;
  border-bottom: 1px dashed var(--line);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > span {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.field select {
  font-family: var(--mono); font-size: 0.85rem;
  padding: 0.55rem 0.7rem; min-width: 9rem;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 9px; color: var(--ink); cursor: pointer;
}
.field-actions { flex-direction: row; gap: 0.6rem; margin-left: auto; }
.seg { display: inline-flex; gap: 0.3rem; }
.seg-btn {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700;
  padding: 0.5rem 0.8rem;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 9px; color: var(--ink-soft); cursor: pointer;
  transition: all 0.16s;
}
.seg-btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Griffbrett der Demo */
.demo-board { overflow-x: auto; padding-bottom: 0.5rem; }
.fb {
  min-width: 720px;
  display: grid;
  gap: 2px;
}
.fb-nums, .fb-row {
  display: grid;
  grid-template-columns: 30px repeat(var(--fbc, 13), minmax(0, 1fr));
  gap: 2px; align-items: center;
}
.fb-num {
  font-family: var(--mono); font-size: 0.68rem; text-align: center;
  color: var(--ink-soft); opacity: 0.7;
}
.fb-num.mark { color: var(--accent-deep); font-weight: 700; opacity: 1; }
.fb-board {
  background: linear-gradient(180deg, #e6d3b3, #b89968);
  border: 2px solid var(--ink); border-radius: 6px; padding: 4px;
  box-shadow: var(--shadow-sm);
}
.fb-label {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  text-align: center; color: var(--ink);
}
.fb-cell {
  position: relative; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-right: 2px solid #8a8580;
}
.fb-cell.nut { border-right: 4px solid var(--ink); }
.fb-cell::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(40, 28, 16, 0.5);
}
.fb-row[data-thick="1"] .fb-cell::before { height: 1.6px; }
.fb-row[data-thick="2"] .fb-cell::before { height: 2.2px; }
.fb-row[data-thick="3"] .fb-cell::before { height: 2.8px; }
.fb-inlay::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(250, 243, 227, 0.5); top: 100%; margin-top: -3.5px;
}
.fb-dot {
  position: relative; z-index: 2;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  color: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  transition: transform 0.14s var(--ease), background 0.2s, opacity 0.2s;
}
.fb-dot.on {
  background: var(--gold); color: var(--ink);
  border-color: rgba(42, 29, 18, 0.7); cursor: pointer;
}
.fb-dot.root {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.25);
}
.fb-dot.on:hover { transform: scale(1.14); }
.fb-dot.ring {
  animation: ring 0.48s var(--ease);
}
@keyframes ring {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 169, 66, 0.9); }
  40% { transform: scale(1.32); box-shadow: 0 0 0 7px rgba(212, 169, 66, 0); }
  100% { transform: scale(1); }
}
.demo-foot {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px dashed var(--line);
}
.demo-legend {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft);
}
.demo-legend .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 1.5px solid rgba(42, 29, 18, 0.6); }
.dot-root { background: var(--accent); }
.dot-scale { background: var(--gold); margin-left: 0.8rem; }
.demo-hint { margin-left: 0.8rem; opacity: 0.8; }
.demo-noaudio { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-deep); }
.demo-link {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.demo-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Produkte */

.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 2rem 0 2.2rem;
}
.filter {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.55rem 1rem;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 999px; color: var(--ink-soft); cursor: pointer;
  transition: all 0.18s var(--ease);
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line); }
.card.is-hidden { display: none; }
.card-wide { grid-column: 1 / -1; }
.card-open {
  position: absolute; inset: 0; z-index: 3;
  background: transparent; border: 0; cursor: pointer;
}
.card-shot {
  position: relative;
  background: #f6f6f4;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.card-shot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.card:hover .card-shot img { transform: scale(1.03); }
.card-wide .card-shot img { aspect-ratio: 21 / 8; }
.card-flag {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: var(--gold); color: var(--ink);
  border: 1.5px solid var(--gold-deep);
}
.card-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card-name { font-size: 1.24rem; font-weight: 700; letter-spacing: -0.015em; }
.card-line { margin-top: 0.35rem; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.chip {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.02em;
  padding: 0.24rem 0.55rem; border-radius: 6px;
  background: var(--bg-deep); color: var(--ink-soft);
}
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 1.1rem;
}
.price {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.card-more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700; color: var(--accent);
}
.card-more svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.card:hover .card-more svg { transform: translateX(4px); }

/* ---------------------------------------------------------- Detail-Schublade */

.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(42, 29, 18, 0.44);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(760px, 100%);
  background: var(--bg);
  border-left: 1.5px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-close {
  position: sticky; top: 0.9rem; margin-left: auto; margin-right: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; z-index: 5;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 50%; cursor: pointer; color: var(--ink);
}
.drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.drawer-close svg { width: 18px; height: 18px; }
.drawer-body { padding: 0 clamp(1.2rem, 4vw, 2.4rem) 3rem; margin-top: -42px; }

.detail-head { padding-top: 1.2rem; max-width: 34rem; }
.detail-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.35rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08;
}
.detail-claim { margin-top: 0.5rem; font-size: 1.08rem; color: var(--accent-deep); }
.gallery {
  position: relative; margin-top: 1.6rem;
  border-radius: var(--r); overflow: hidden;
  background: #f6f6f4; border: 1px solid var(--line-soft);
}
.slides { position: relative; aspect-ratio: 16 / 9; }
.slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(250, 243, 227, 0.92); border: 1.5px solid var(--line);
  cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.gal-nav svg { width: 18px; height: 18px; }
.gal-nav:hover { border-color: var(--accent); color: var(--accent); }
.gal-prev { left: 0.6rem; }
.gal-next { right: 0.6rem; }
.thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.thumb {
  width: 74px; aspect-ratio: 16 / 10; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-soft); border-radius: 8px; overflow: hidden;
  background: #f6f6f4; opacity: 0.6; transition: all 0.2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-on, .thumb:hover { opacity: 1; border-color: var(--accent); }
.detail-intro { margin-top: 1.5rem; font-size: 1.03rem; }
.detail-sub {
  margin-top: 2rem; font-family: var(--mono); font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.feat { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.8rem; }
.feat li {
  padding: 0.85rem 1rem;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}
.feat b { display: block; font-size: 0.98rem; }
.feat span { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.55; }
.detail-scope {
  margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-soft);
  padding: 0.9rem 1rem; background: var(--bg-deep); border-radius: 10px;
}
.detail-scope b { color: var(--ink); }
.detail-buy {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--line);
}
.detail-price-label {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.detail-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }

/* ---------------------------------------------------------- So läuft es */

.how { background: var(--bg-deep); }
.steps {
  list-style: none; display: grid; gap: 1.2rem; margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: s;
}
.step {
  position: relative; padding: 1.6rem 1.4rem;
  background: var(--paper); border: 1.5px solid var(--line-soft);
  border-radius: var(--r);
}
.step-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 0.95rem; font-weight: 700;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.step p { font-size: 0.94rem; color: var(--ink-soft); }
.how-note {
  margin-top: 1.6rem; font-family: var(--mono); font-size: 0.76rem;
  color: var(--ink-soft); text-align: center;
}

/* ---------------------------------------------------------- Über uns */

.about-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 3.6rem); align-items: start;
}
.about-text p + p { margin-top: 1rem; }
.about-text > p { max-width: 58ch; }
.ai-note {
  margin-top: 2rem; padding: 1.3rem 1.4rem;
  background: var(--paper); border: 1.5px solid var(--line-soft);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
}
.ai-note h3 {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.5rem;
}
.ai-note p { font-size: 0.92rem; color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden; }
.stat { background: var(--paper); padding: 1.2rem 1rem; text-align: center; }
.stat b { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.stat span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); }
.about-shot {
  margin-top: 1.2rem; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-soft); background: #f6f6f4;
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------- FAQ */

.qa-list { margin-top: 2.2rem; max-width: 820px; }
.qa {
  border-bottom: 1px solid var(--line-soft);
}
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1.06rem; font-weight: 600;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent);
  transition: transform 0.3s var(--ease); }
.qa[open] summary svg { transform: rotate(180deg); }
.qa-body { padding-bottom: 1.2rem; }
.qa-body p { color: var(--ink-soft); max-width: 68ch; }

/* ---------------------------------------------------------- Abschluss */

.cta { background: var(--ink); color: var(--bg); }
.cta::before {
  content: ''; position: absolute; inset: 0; opacity: 0.09;
  background-image: repeating-linear-gradient(90deg, transparent 0 98px, var(--gold) 98px 100px);
  pointer-events: none;
}
.cta-inner { position: relative; text-align: center; }
.cta h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1; max-width: 18ch; margin-inline: auto;
}
.cta p { margin: 1.1rem auto 0; max-width: 55ch; color: rgba(243, 234, 216, 0.78); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2rem; }
.cta .btn-ghost { background: transparent; border-color: rgba(243, 234, 216, 0.4); color: var(--bg); }
.cta .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------- Fußzeile */

.foot { background: var(--paper); border-top: 1px solid var(--line-soft); padding-block: 3.2rem 1.4rem; }
.foot-inner {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.foot-mark { height: 24px; }
.foot-tag { margin-top: 0.8rem; font-size: 0.95rem; color: var(--ink-soft); }
.foot-note { margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-soft); opacity: 0.85; max-width: 34ch; }
.foot-col h3 {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.foot-col a { display: block; font-size: 0.92rem; text-decoration: none; padding: 0.22rem 0; color: var(--ink); }
.foot-col a:hover { color: var(--accent); }
.foot-adr { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; line-height: 1.5; }
.foot-etsy { margin-top: 0.7rem; color: var(--accent) !important; font-weight: 600; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between;
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft);
}
.foot-lang a { text-decoration: none; }
.foot-lang a:hover { color: var(--accent); }

/* ---------------------------------------------------------- Rechtsseite */

.page-legal .legal { padding-block: 3rem 5rem; }
.legal-wrap { max-width: 780px; }
.legal-wrap h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 0.9rem; }
.back { font-family: var(--mono); font-size: 0.76rem; text-decoration: none;
  color: var(--accent); display: inline-block; margin-bottom: 1.6rem; }
.back:hover { text-decoration: underline; }
.legal-binding {
  margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft);
  padding: 0.8rem 1rem; background: var(--bg-deep); border-radius: 10px;
}
.legal-toc {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: baseline;
  margin: 2rem 0 1rem; padding: 1rem 1.2rem;
  background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: var(--r);
}
.legal-toc b { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); }
.legal-toc a { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-sec { padding-top: 2.6rem; }
.legal-sec h2 {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--gold); margin-bottom: 1.2rem;
}
.legal-sec h3 { font-size: 1.04rem; font-weight: 700; margin: 1.6rem 0 0.4rem; }
.legal-sec p { margin-bottom: 0.7rem; color: var(--ink-soft); }
.legal-sec p strong, .legal-sec li strong { color: var(--ink); }
.legal-sec a { color: var(--accent); }
.legal-sec address {
  font-style: normal; margin: 0.5rem 0 1rem; padding: 0.9rem 1.1rem;
  background: var(--paper); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; color: var(--ink);
}
.legal-sec ul { margin: 0.4rem 0 1rem 1.3rem; color: var(--ink-soft); }
.legal-sec li { margin-bottom: 0.3rem; }
.legal-note {
  font-size: 0.88rem !important; padding: 0.8rem 1rem;
  background: var(--bg-deep); border-radius: 10px;
}

/* ---------------------------------------------------------- Einblenden */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ---------------------------------------------------------- Schmale Fenster */

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-shot { transform: none; }
  .about-inner { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  html { scroll-padding-top: 76px; }
  .top-nav, .top-right { display: none; }
  .burger { display: flex; }
  .mobile-nav:not([hidden]) { display: flex; }
  .top-inner { min-height: 60px; }
  .field-actions { margin-left: 0; width: 100%; }
  .demo-foot { flex-direction: column; align-items: flex-start; }
  .drawer-panel { width: 100%; border-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .usp-grid { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
  .hero-facts { gap: 1.1rem; }
  .grid { grid-template-columns: 1fr; }
  .card-wide .card-shot img { aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .top, .foot, .drawer, .demo, .cta, .skip-link { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
}

/* ============================================================
   DATENSCHUTZ-HINWEIS
   ============================================================
   Bewusst KEIN bildschirmfüllender Vorhang mit "Zustimmen"-Zwang: hier
   wird nichts gemessen und nichts geteilt, also gibt es auch nichts
   wegzuklicken, bevor man die Seite sehen darf. Der Hinweis sitzt unten,
   lässt die Seite bedienbar und verschwindet auf einen Klick.
   ============================================================ */

.cc {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  padding: 0 var(--pad) max(var(--pad), env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform 0.42s var(--ease);
}
.cc.is-in { transform: none; }
.cc[hidden] { display: none; }
.cc-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1.1rem 2rem;
  align-items: center; justify-content: space-between;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.3rem;
}
.cc-text { flex: 1 1 26rem; min-width: 0; }
.cc-text h2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.4rem;
}
.cc-text p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.cc-list {
  margin: 0.6rem 0 0 1.1rem; font-size: 0.85rem; color: var(--ink-soft);
}
.cc-actions {
  display: flex; align-items: center; gap: 0.7rem 1rem; flex-wrap: wrap;
}
.cc-more {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-more:hover { color: var(--accent); }
.foot-cc {
  display: block; padding: 0.22rem 0; font: inherit; font-size: 0.92rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  text-align: left;
}
.foot-cc:hover { color: var(--accent); }

@media (max-width: 620px) {
  .cc-inner { flex-direction: column; align-items: stretch; }
  .cc-actions { justify-content: space-between; }
}

/* ============================================================
   LESEANZEIGE DER DEMO
   ============================================================
   Sie ersetzt das, was in den Werkzeugen der Klang leistet: eine Antwort
   auf das Antippen. Auf der Website gibt es bewusst keinen Ton, also
   sagt die Zeile in Worten, welcher Ton da liegt.
   ============================================================ */

.demo-readout {
  margin-top: 0.9rem; min-height: 2.6rem;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.55rem 0.9rem;
  background: var(--bg-deep); border-radius: 10px;
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft);
}
.demo-readout.is-set { color: var(--ink); }
.demo-readout b {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 800;
  letter-spacing: -0.01em; color: var(--accent); line-height: 1;
}
.ro-deg {
  padding: 0.16rem 0.5rem; border-radius: 999px;
  background: var(--gold); color: var(--ink); font-weight: 700;
  font-size: 0.74rem;
}
.ro-where { color: var(--ink-soft); font-size: 0.76rem; }
.cc-forget {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  padding: 0.4rem 0.7rem; background: transparent;
  border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
}
.cc-forget:hover { border-color: var(--accent); color: var(--accent); }
.cc-forget[hidden] { display: none; }

/* ============================================================
   STÖRER — das Rundsiegel über dem Kopfbild
   ============================================================
   Die ganze Seite ist Papier, also ist ein aufgeklebtes Siegel die
   Störung, die hier natürlich aussieht — ein grelles Rechteck wäre ein
   Fremdkörper aus einem anderen Baukasten. Er trägt ein echtes Bild aus
   dem Produkt: ohne das wäre er eine Behauptung, mit ihm ein
   Vorgeschmack.
   ============================================================ */

/* Der Störer liegt NEBEN dem Bildrahmen, nicht darin: .hero-shot hat
   overflow:hidden und eine 3D-Drehung — darin wurde das Siegel an der
   Kante abgeschnitten und kippte mit dem Bild weg. */
.hero-media { position: relative; }

.stoerer {
  position: absolute; left: 0; top: -32px; z-index: 5;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1.35rem 0.7rem 0.7rem;
  background: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(60, 40, 20, 0.32);
  text-decoration: none;
  transform: rotate(-6deg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.stoerer:hover {
  transform: rotate(-2deg) translateY(-3px) scale(1.03);
  box-shadow: 0 16px 40px rgba(60, 40, 20, 0.4);
}
.st-seal {
  flex: 0 0 auto; width: 76px; height: 76px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold-deep);
  background: #000;
}
.st-seal img { width: 100%; height: 100%; object-fit: cover; }
.st-text { display: flex; flex-direction: column; line-height: 1.15; }
.st-flag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.st-1, .st-2 {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.015em;
  color: var(--paper); font-size: 1.34rem; line-height: 1.08;
}
.st-1 { color: var(--gold); }
.st-go {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(250, 243, 227, 0.65); margin-top: 0.2rem;
}

/* Ein „Bald"-Vermerk statt eines Kaufknopfs ins Leere */
.card-soon, .detail-soon, .xp-soon {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--bg-deep); color: var(--ink-soft);
  border: 1.5px dashed var(--line);
}
.detail-soon { display: inline-block; }
.card-shot-art img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   DAS GOODIE — Rockstar Pet Portrait
   ============================================================
   Absichtlich dunkel, während die ganze Seite hell ist: das Produkt lebt
   von Bühnenlicht auf schwarzem Grund, und genau diese Optik haben auch
   seine Shop-Bilder. Derselbe helle Kartenrhythmus wie bei den Werkzeugen
   hätte das Gegenteil bewirkt — es wäre das zehnte Kästchen in einer
   Reihe von neun geworden.
   ============================================================ */

.xp {
  background: #14100c;
  color: var(--bg);
  overflow: hidden;
}
.xp::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(212, 169, 66, 0.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(194, 65, 12, 0.22), transparent 60%);
}
.xp > .wrap { position: relative; z-index: 2; }
.xp .kicker { color: var(--gold); }
.xp .kicker::before { background: var(--accent); }
.xp .sec-head { color: var(--paper); }
.xp .sec-lede { color: rgba(243, 234, 216, 0.72); }
.xp-head { max-width: 46rem; }

.xp-shots {
  display: grid; gap: 0.9rem; margin: 2.6rem 0 2.8rem;
  grid-template-columns: repeat(5, 1fr);
}
.xp-shot { position: relative; }
.xp-shot img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(212, 169, 66, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s var(--ease);
}
.xp-shot:hover img { transform: translateY(-6px) scale(1.02); }
.xp-shot figcaption {
  margin-top: 0.5rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(243, 234, 216, 0.6);
  text-align: center;
}
/* Das erste Bild bekommt mehr Gewicht — es ist der Aufmacher. */
.xp-shot:first-child img { border-color: var(--gold); }

.xp-cols {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
.xp-steps { list-style: none; display: grid; gap: 1rem; }
.xp-steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: 0.3rem 1rem;
  align-items: baseline;
}
.xp-nr {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
  color: var(--gold);
}
.xp-steps h3 { font-size: 1.08rem; font-weight: 700; color: var(--paper); }
.xp-steps p { font-size: 0.94rem; color: rgba(243, 234, 216, 0.72); }

.xp-side {
  padding: 1.4rem; border-radius: var(--r-lg);
  background: rgba(250, 243, 227, 0.05);
  border: 1px solid rgba(212, 169, 66, 0.28);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.xp .btn-ghost {
  background: transparent; border-color: rgba(243, 234, 216, 0.4);
  color: var(--bg);
}
.xp .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.xp-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.xp-soon {
  background: transparent; color: var(--gold);
  border-color: rgba(212, 169, 66, 0.55);
}
.xp-ai {
  font-size: 0.8rem; line-height: 1.55;
  color: rgba(243, 234, 216, 0.55);
}

@media (max-width: 900px) {
  .xp-shots { grid-template-columns: repeat(3, 1fr); }
  .xp-shot:nth-child(n+4) { display: none; }
  .xp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .stoerer { left: auto; right: 0; top: -26px; }
}
@media (max-width: 560px) {
  .xp-shots { grid-template-columns: 1fr 1fr; }
  .xp-shot:nth-child(n+3) { display: none; }
  .stoerer { padding: 0.5rem 0.9rem 0.5rem 0.5rem; top: -20px; }
  .st-seal { width: 56px; height: 56px; }
  .st-1, .st-2 { font-size: 1.02rem; }
}

/* ── Goodie: zwei beschriftete Bildreihen + Bonus-Hinweis ────────── */

.xp-bonus {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem;
  margin-top: 2rem; padding: 1rem 1.3rem;
  border: 1.5px solid var(--gold);
  border-radius: var(--r);
  background: rgba(212, 169, 66, 0.09);
}
.xp-bonus b {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--gold);
}
.xp-bonus span {
  flex: 1 1 22rem; font-size: 0.93rem; color: rgba(243, 234, 216, 0.78);
}

.xp-row { margin-top: 2.2rem; }
.xp-row-h {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243, 234, 216, 0.55);
  padding-bottom: 0.6rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(243, 234, 216, 0.14);
}
/* Die Reihen sind unterschiedlich lang (8 Stile, 7 weitere). Ein festes
   Raster mit fünf Spalten passte für keine von beiden — auto-fit füllt
   die Zeile und bricht von selbst um. */
.xp .xp-shots {
  display: grid; gap: 1rem; margin: 0;
  grid-template-columns: repeat(4, 1fr);
}
.xp-shot:first-child img { border-color: rgba(212, 169, 66, 0.35); }
.xp-row:first-of-type .xp-shot:first-child img { border-color: var(--gold); }

@media (max-width: 900px) {
  /* Die alte Regel blendete ab dem vierten Bild alles aus — bei zwei
     Reihen wäre damit die halbe Auswahl unsichtbar. Stattdessen wird die
     Reihe hier waagerecht wischbar. */
  .xp-shot:nth-child(n+4) { display: block; }
  .xp .xp-shots {
    display: flex; overflow-x: auto; padding-bottom: 0.6rem;
    scroll-snap-type: x mandatory;
  }
  .xp .xp-shots .xp-shot {
    flex: 0 0 46%; scroll-snap-align: start;
  }
}
@media (max-width: 560px) {
  .xp-shot:nth-child(n+3) { display: block; }
  .xp .xp-shots .xp-shot { flex: 0 0 66%; }
}