/* =========================================================
   Morty's Mysteries — zentrales Stylesheet (site.css)
   Automatisch aus den bisherigen Inline-Styles konsolidiert.
   Kanon = Produktseiten. Seitenspezifisches (Spielfarbe, Hero)
   bleibt als kleiner <style>-Block auf der jeweiligen Seite.
   ========================================================= */

/* ===== BASIS (Kanon: krimidinner/der-tod-des-schiffbruechigen) ===== */

@font-face {
  font-family: 'MortysHeady';
  src: url('/fonts/MortysHeadyFont.woff2') format('woff2'), url('/fonts/MortysHeadyFont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MortysMarmelade';
  src: url('/fonts/MortysMarmeladeFont.woff2') format('woff2'), url('/fonts/MortysMarmeladeFont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MortysMadness';
  src: url('/fonts/MortysMadnessFont.woff2') format('woff2'), url('/fonts/MortysMadnessFont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #000000;
  --dark: #212121;
  --dark-mid: #1a1a1e;
  --gray-bg: #1a1a1e;
  --white: #ffffff;
  --paper: #f5f1ea;
  --paper-dark: #1e1e22;
  --paper-shadow: rgba(0,0,0,0.55);
  --gray: #ededed;
  --gray-dark: #444444;
  --gray-mid: #888888;
  --ink: #1a1a1a;
  --ink-mid: #3a3a3a;
  --pink: #E91E8C;
  --schiff: #005aa8;
  --font-heady: 'MortysHeady', Georgia, serif;
  --font-madness: 'MortysMadness', Arial, sans-serif;
  --font-marmelade: 'MortysMarmelade', Georgia, cursive;
  --paper-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  --paper-radius-alt: 15px 225px 15px 255px/225px 15px 255px 15px;
}

html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body { background: var(--gray-bg); color: var(--white); font-family: var(--font-madness); line-height: 1.7; font-size: 16px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.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; }

/* ── BREADCRUMB ──────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 5.5rem 2rem 0;
  max-width: 1060px; margin: 0 auto;
}
.breadcrumb-list { display: flex; gap: 0.5rem; align-items: center; list-style: none; flex-wrap: wrap; }
.breadcrumb-list li { font-size: 0.75rem; color: var(--gray-mid); font-family: var(--font-madness); }
.breadcrumb-list a { color: var(--gray-mid); text-decoration: none; transition: color 0.2s; }
.breadcrumb-list a:hover { color: var(--white); }
.breadcrumb-list .sep { color: var(--gray-dark); }
.breadcrumb-list .current { color: var(--gray); }

/* ── WAVES ───────────────────────────────────────────────────────────────── */
.wave-divider { position: relative; width: 100%; height: 60px; overflow: hidden; line-height: 0; }
.wave-divider svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.wave-layer-1 { animation: waveA 8s ease-in-out infinite alternate; }
.wave-layer-2 { animation: waveB 6s ease-in-out infinite alternate; }
@keyframes waveA { 0% { transform: translateX(0); } 100% { transform: translateX(-12%); } }
@keyframes waveB { 0% { transform: translateX(0); } 100% { transform: translateX(-8%); } }

/* ── PAPER ───────────────────────────────────────────────────────────────── */
.paper-note {
  background: var(--paper); color: var(--ink); padding: 2rem 2.2rem;
  position: relative; border: 3px solid var(--ink);
  border-radius: var(--paper-radius);
  box-shadow: 4px 5px 16px var(--paper-shadow);
}
.paper-note h3 { font-family: var(--font-marmelade); font-size: 1.3rem; color: var(--ink); margin-bottom: 0.6rem; }
.paper-note p { font-family: var(--font-madness); font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7; }
.paper-note .pin { position: absolute; top: -14px; width: 28px; height: 28px; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.paper-note .pin.left { left: 18px; }
.paper-note .pin.right { right: 18px; }
.paper-note .pin.center { left: 50%; transform: translateX(-50%); }

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
section { padding: 5rem 2rem; }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-label { font-family: var(--font-marmelade); font-size: 1rem; color: var(--gray-mid); display: block; margin-bottom: 0.4rem; text-align: center; }
.section-title { font-family: var(--font-heady); font-size: clamp(1.6rem, 3.5vw, 2.5rem); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.2rem; line-height: 1.2; text-align: center; }
.section-divider { width: 40px; height: 1px; background: var(--gray-dark); margin-bottom: 2rem; margin-left: auto; margin-right: auto; }

/* ── HERO PRODUKTSEITE ───────────────────────────────────────────────────── */
.product-hero {
  background: var(--gray-bg);
  background-image: url('/img/heroes/hero-schiffbruechiger.webp');
  background-size: cover; background-position: center;
  padding: 6.5rem 2rem 4rem; position: relative;
}
.product-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,26,30,0) 55%, rgba(26,26,30,0.88) 100%);
  pointer-events: none;
}
.product-hero-inner { position: relative; z-index: 1; }
.product-hero-inner {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.product-hero-image {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem;
}
/* Handgezeichneter Rahmen — wie Spielkarten auf Homepage */
.product-frame {
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 4px 10px 5px 8px/8px 4px 10px 5px;
  box-shadow: 6px 8px 24px rgba(0,0,0,0.8), 2px 2px 0 rgba(0,0,0,0.3);
  overflow: hidden;
  transform: rotate(-1deg);
  max-width: 440px; width: 100%;
}
.product-frame img { width: 100%; display: block; }
/* Keine Farbbalken-Linie am Frame */
/* Passepartout-Effekt innen */
.product-frame::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(0,0,0,0.15); pointer-events: none; z-index: 3;
  border-radius: 2px;
}
.product-pin {
  position: absolute; top: -14px; right: 20px;
  width: 32px; height: 32px; z-index: 4;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Produktinfo rechts */
.product-hero-info { }
.product-kategorie {
  display: inline-block;
  font-family: var(--font-madness); font-size: 0.72rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--schiff); border: 1px solid var(--schiff);
  padding: 0.2rem 0.7rem; margin-bottom: 1rem;
}
.product-title {
  font-family: var(--font-heady);
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.1; margin-bottom: 0.6rem;
}
.product-subtitle {
  font-family: var(--font-marmelade);
  font-size: 1.2rem; color: var(--gray);
  margin-bottom: 1.5rem; display: block;
}
.product-meta-row {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.product-meta-item {
  display: flex; flex-direction: column;
  font-family: var(--font-madness); font-size: 0.8rem;
}
.product-meta-label { color: var(--gray-mid); font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 0.1rem; }
.product-meta-value { color: var(--white); font-size: 0.9rem; }
.product-lead { color: var(--gray); font-size: 1rem; line-height: 1.8; margin-bottom: 2rem; max-width: 460px; }

/* Kauf-Boxen */
.buy-options { display: flex; flex-direction: column; gap: 1rem; }
.buy-option {
  background: var(--paper-dark);
  border: 1px solid var(--gray-dark);
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem;
  transition: border-color 0.3s;
}
.buy-option-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.buy-option:hover { border-color: var(--gray-mid); }
.buy-option.featured { border-color: var(--schiff); }
.buy-option:nth-child(1) { border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
.buy-option:nth-child(2) { border-radius: 15px 225px 15px 255px/225px 15px 255px 15px; }
.buy-option-info { flex: 1; }
.buy-option-type { font-family: var(--font-madness); font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 0.2rem; }
.buy-option-name { font-family: var(--font-heady); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); margin-bottom: 0.2rem; }
.buy-option-desc { font-size: 0.78rem; color: #b0b0b0; } /* #b0b0b0 auf #1e1e22 = Kontrast 6.4:1 WCAG AA ✓ */
.buy-option-price { font-family: var(--font-heady); font-size: 1.4rem; color: var(--white); white-space: nowrap; }
.buy-option-price small { font-family: var(--font-madness); font-size: 0.6rem; color: var(--gray-mid); display: block; text-align: left; }
.btn-buy {
  background: #005AA8; color: var(--white); border: 3px dashed #fff;
  padding: 0.7rem 1.5rem; font-family: var(--font-heady); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; transition: all 0.25s; text-decoration: none;
  white-space: nowrap; min-height: 44px; min-width: 132px;
  display: flex; align-items: center; justify-content: center;
}
.btn-buy:hover { background: transparent; color: var(--pink); border-color: #005AA8; }
.btn-secondary-buy {
  background: #5BA9E8; color: #fff;
  border: 3px dashed #fff;
  padding: 0.7rem 1.5rem; font-family: var(--font-heady); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; transition: all 0.25s; text-decoration: none;
  white-space: nowrap; min-height: 44px; min-width: 132px;
  display: flex; align-items: center; justify-content: center;
}
.btn-secondary-buy:hover { background: #fff; color: #005AA8; border-color:#fff; }

/* ── DER FALL ────────────────────────────────────────────────────────────── */
.fall-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3.5rem; align-items: start; margin-top: 2rem; }
.fall-text p { color: var(--gray); margin-bottom: 1rem; line-height: 1.85; }
.fall-text p:first-child::first-letter {
  font-family: var(--font-heady); font-size: 3.5rem; float: left;
  line-height: 0.8; margin-right: 0.1em; color: var(--white);
}

/* Spielinfo-Zettel */
.info-zettel {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--paper-radius-alt);
  box-shadow: 4px 5px 14px var(--paper-shadow);
  padding: 1.8rem; position: relative;
  transform: rotate(0.8deg);
}
.info-zettel .pin { position: absolute; top: -14px; width: 28px; height: 28px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); right: 20px; }
.info-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0; }
.info-row + .info-row { border-top: 1px dashed rgba(0,0,0,0.15); }
.info-label { font-family: var(--font-madness); font-size: 0.78rem; color: var(--ink-mid); }
.info-value { font-family: var(--font-heady); font-size: 0.95rem; color: var(--ink); text-align: right; }
.info-value.highlight { color: var(--schiff); }

/* ── VERDÄCHTIGE ─────────────────────────────────────────────────────────── */
.suspects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  justify-content: center;
  align-items: flex-end; /* Zettel-Beschriftungen unten bündig */
}
.suspect-card {
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  transition: transform 0.25s;
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 calc(25% - 1.2rem);
  max-width: 200px;
}
/* Kleiner Namens-Zettel unter dem Bild — getrennt */
.suspect-label {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 255px 10px 225px 10px / 10px 225px 10px 255px;
  padding: 0.45rem 0.8rem 0.6rem;
  margin-top: 0.7rem;
  width: 100%;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.18),
    inset 0 -15px 25px -15px rgba(60,45,30,0.1);
}
/* Jede Karte leicht andere Form */
.suspect-card:nth-child(1) { transform: rotate(-1.1deg); }
.suspect-card:nth-child(2) { transform: rotate(0.7deg); }
.suspect-card:nth-child(3) { transform: rotate(-0.5deg); }
.suspect-card:nth-child(4) { transform: rotate(1.2deg); }
.suspect-card:nth-child(5) { transform: rotate(-0.8deg); }
.suspect-card:nth-child(6) { transform: rotate(0.5deg); }
.suspect-card:nth-child(7) { transform: rotate(-0.4deg); }
.suspect-card:nth-child(1):hover { transform: translateY(-4px) rotate(-1.1deg); }
.suspect-card:nth-child(2):hover { transform: translateY(-4px) rotate(0.7deg); }
.suspect-card:nth-child(3):hover { transform: translateY(-4px) rotate(-0.5deg); }
.suspect-card:nth-child(4):hover { transform: translateY(-4px) rotate(1.2deg); }
.suspect-card:nth-child(5):hover { transform: translateY(-4px) rotate(-0.8deg); }
.suspect-card:nth-child(6):hover { transform: translateY(-4px) rotate(0.5deg); }
.suspect-card:nth-child(7):hover { transform: translateY(-4px) rotate(-0.4deg); }
/* Pin — jede Karte anders positioniert */
.suspect-pin {
  position: absolute; top: 0; width: 30px; height: 34px; z-index: 2;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
}
.suspect-card:nth-child(odd)   .suspect-pin { left: 50%; transform: translateX(-50%); }
.suspect-card:nth-child(even)  .suspect-pin { right: 18px; }
.suspect-card:nth-child(3n)    .suspect-pin { left: 18px; transform: none; }
/* Bild: volle Breite, kein Rand */
.suspect-img {
  width: 100%; height: auto;
  display: block;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
}
/* Text auf hellem Papier — WCAG AA */
.suspect-name { font-family: var(--font-heady); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 0.15rem; line-height: 1.2; text-align: center; }
.suspect-role { font-family: var(--font-madness); font-size: 0.68rem; color: var(--ink-mid); text-align: center; }

/* ── WIE WIRD GESPIELT ───────────────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 2rem; }
.step-card {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); padding: 1.6rem 1.6rem 1.8rem;
  position: relative; box-shadow: 3px 4px 12px var(--paper-shadow);
}
.step-card:nth-child(1) { border-radius: 255px 8px 225px 8px/8px 225px 8px 255px; transform: rotate(-0.8deg); }
.step-card:nth-child(2) { border-radius: 8px 255px 8px 225px/225px 8px 255px 8px; transform: rotate(0.6deg); }
.step-card:nth-child(3) { border-radius: 200px 12px 180px 12px/12px 180px 12px 200px; transform: rotate(-0.4deg); }
.paper-pin {
  position: absolute; top: -14px; left: 18px; width: 28px; height: 28px; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.paper-pin.pin-right { left: auto; right: 18px; }
.step-number {
  font-family: var(--font-heady); font-size: 3.5rem; line-height: 1;
  color: rgba(0,0,0,0.08); position: absolute; top: 0.8rem; right: 1rem;
  letter-spacing: -0.02em; user-select: none;
}
.step-title { font-family: var(--font-marmelade); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.5rem; }
.step-text { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.7; }

/* ── BESONDERHEITEN ──────────────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.feature-item {
  background: var(--paper-dark);
  border: 2px solid var(--gray-dark);
  padding: 0;
  position: relative;
  transition: transform 0.2s;
}
.feature-img { aspect-ratio: 16/9; background: #0d0d10; overflow: hidden; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-body { padding: 1.25rem 1.4rem; }
/* 6 verschiedene Silhouetten */
.feature-item:nth-child(1) { border-radius: 255px 8px 225px 8px/8px 225px 8px 255px; transform: rotate(-0.6deg); }
.feature-item:nth-child(2) { border-radius: 8px 255px 8px 225px/225px 8px 255px 8px; transform: rotate(0.4deg); }
.feature-item:nth-child(3) { border-radius: 200px 10px 180px 10px/10px 180px 10px 200px; transform: rotate(-0.3deg); }
.feature-item:nth-child(4) { border-radius: 10px 200px 10px 180px/180px 10px 200px 10px; transform: rotate(0.7deg); }
.feature-item:nth-child(5) { border-radius: 220px 6px 240px 12px/12px 240px 6px 220px; transform: rotate(-0.5deg); }
.feature-item:nth-child(6) { border-radius: 6px 220px 12px 240px/240px 12px 220px 6px; transform: rotate(0.3deg); }
.feature-item:nth-child(odd):hover { transform: translateY(-2px) rotate(-0.4deg); }
.feature-item:nth-child(even):hover { transform: translateY(-2px) rotate(0.4deg); }
/* Pins statt Linie — siehe HTML */
.feature-pin {
  position: absolute; top: -14px; width: 28px; height: 28px; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.feature-pin.pin-l { left: 16px; }
.feature-pin.pin-r { right: 16px; }
.feature-pin.pin-c { left: 50%; transform: translateX(-50%); }
.feature-item h4 { font-family: var(--font-marmelade); font-size: 1rem; color: var(--white); margin-bottom: 0.4rem; }
.feature-item p { font-size: 0.82rem; color: var(--gray); line-height: 1.65; }

/* ── REVIEWS ─────────────────────────────────────────────────────────────── */
.reviews-grid { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.reviews-placeholder-wrap { margin-top: 2rem; }
.review-card {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  padding: 1.4rem; flex: 1; min-width: 280px;
  position: relative; box-shadow: 3px 4px 12px var(--paper-shadow);
}
.review-card:nth-child(1) { border-radius: 255px 8px 225px 8px/8px 225px 8px 255px; transform: rotate(-0.7deg); }
.review-card:nth-child(2) { border-radius: 8px 255px 8px 225px/225px 8px 255px 8px; transform: rotate(0.5deg); }
.review-card:nth-child(3) { border-radius: 200px 10px 180px 10px/10px 180px 10px 200px; transform: rotate(-0.3deg); }
.review-card .pin { position: absolute; top: -14px; width: 28px; height: 28px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.review-stars { color: var(--ink); font-size: 0.85rem; margin-bottom: 0.5rem; letter-spacing: 1px; }
.review-text { font-family: var(--font-marmelade); font-style: italic; font-size: 0.9rem; color: var(--ink-mid); line-height: 1.65; margin-bottom: 0.8rem; }
.review-author { font-family: var(--font-madness); font-size: 0.72rem; color: var(--ink-mid); }
.reviews-placeholder {
  background: var(--dark-mid); border: 1px dashed var(--gray-dark);
  padding: 2rem; text-align: center; width: 100%;
}
.reviews-placeholder p { color: var(--gray-mid); font-size: 0.85rem; font-style: italic; }

/* ── FAQ SEKTION ─────────────────────────────────────────────────────────── */
.faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--dark-mid); border: 1px solid var(--gray-dark);
  overflow: hidden;
}
.faq-question {
  width: 100%; background: none; border: none; color: var(--white);
  font-family: var(--font-marmelade); font-size: 1.05rem;
  padding: 1.1rem 1.4rem; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; transition: background 0.2s;
}
.faq-question:hover { background: rgba(255,255,255,0.04); }
.faq-question[aria-expanded="true"] { border-bottom: 1px solid var(--gray-dark); }
.faq-toggle {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--gray-dark); border-radius: 50%;
  position: relative; transition: transform 0.25s, background 0.2s;
}
.faq-toggle::before, .faq-toggle::after {
  content: ''; position: absolute; background: var(--gray);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 8px; height: 1.5px; }
.faq-toggle::after { width: 1.5px; height: 8px; transition: transform 0.25s; }
.faq-question[aria-expanded="true"] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-answer { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
.faq-answer.open { max-height: 400px; padding: 1rem 1.4rem 1.2rem; }
.faq-answer p { color: var(--gray); font-size: 0.88rem; line-height: 1.75; }
.faq-answer a { color: var(--white); text-decoration: underline; }

/* ── CTA BANNER ──────────────────────────────────────────────────────────── */
.cta-banner {
  background: var(--gray-bg);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
}
.cta-banner-inner { max-width: 680px; margin: 0 auto; }
.cta-banner h2 { font-family: var(--font-heady); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.8rem; }
.cta-banner p { color: var(--gray); margin-bottom: 2rem; }
.cta-options { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--black); }
.footer { padding: 3rem 2rem 1.5rem; }
.footer-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; }
.footer-brand p { font-size: 0.82rem; color: var(--gray-mid); line-height: 1.6; max-width: 260px; margin-top: 0.8rem; }
.footer-social { display: flex; gap: 1.2rem; margin-top: 1rem; }
.footer-social a { color: var(--gray-mid); font-size: 0.78rem; text-decoration: none; transition: color 0.3s; }
.footer-social a:hover { color: var(--white); }
.footer h4 { font-family: var(--font-marmelade); font-size: 1.1rem; margin-bottom: 0.8rem; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.4rem; }
.footer ul a { color: var(--gray-mid); text-decoration: none; font-size: 0.82rem; transition: color 0.3s; }
.footer ul a:hover { color: var(--white); }
.footer-bottom { max-width: 1060px; margin: 2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--gray-mid); }

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
/* fade-in handled below */
/* fade-in.visible handled below */

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── 900px — Tablet ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hero */
  .product-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-frame { max-width: 400px; margin: 0 auto; }
  .product-hero-info { text-align: left; }

  /* Fall-Sektion */
  .fall-grid { grid-template-columns: 1fr; gap: 2rem; }
  .info-zettel { transform: none; }

  /* Verdächtige */
  .suspects-grid { grid-template-columns: repeat(4, 1fr); }

  /* Schritte */
  .steps-grid { grid-template-columns: 1fr 1fr; }

  /* Besonderheiten */
  .features-grid { grid-template-columns: 1fr 1fr; }

  /* Digital-Sektion */
  .digital-grid { grid-template-columns: 1fr !important; }

  /* Kein Tilt auf Tablet */
  .suspect-card:nth-child(n) { transform: rotate(-0.3deg); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 600px — Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Nav */
  .nav { padding: 0.6rem 1.2rem; }
  .nav-logo { height: 40px; }
  .nav-toggle { display: block; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }

  /* Breadcrumb */
  .breadcrumb { padding-top: 5rem; }
  .breadcrumb-list li { font-size: 0.7rem; }

  /* Produkthero */
  .product-hero { padding: 1rem 1.2rem 3rem; }
  .product-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .product-frame { max-width: 100%; transform: rotate(-0.5deg); }
  .product-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .product-meta-row { gap: 1rem; }

  /* Kaufoptionen */
  .buy-options { gap: 0.8rem; }
  .buy-option { flex-wrap: wrap; gap: 0.8rem; }
  .buy-option-price { font-size: 1.2rem; }
  .btn-buy, .btn-secondary-buy {
    width: 100%; justify-content: center;
    min-height: 48px; padding: 0 1rem;
  }

  /* Sections */
  section { padding: 3rem 1.2rem; }
  .section-title { font-size: clamp(1.4rem, 7vw, 2rem); }

  /* Fall */
  .fall-grid { grid-template-columns: 1fr; gap: 2rem; }
  .info-zettel { transform: none; border-radius: 16px 4px 14px 4px/4px 14px 4px 16px; }
  .fall-text p:first-child::first-letter { font-size: 2.5rem; }

  /* Medien */
  .media-gallery { grid-template-columns: 1fr 1fr !important; }

  /* Verdächtige — 2 Spalten auf Mobile */
  .suspects-grid { gap: 1rem; }
  .suspect-card { flex: 0 0 calc(50% - 0.6rem); max-width: 160px; }
  .suspect-card:nth-child(n) { transform: none; }

  /* Schritte */
  .steps-grid { grid-template-columns: 1fr; }
  .step-card, .step-card:nth-child(n) { transform: none; border-radius: 16px 4px 14px 4px/4px 14px 4px 16px; }

  /* Besonderheiten */
  .features-grid { grid-template-columns: 1fr; }
  .feature-item, .feature-item:nth-child(n) { transform: none; border-radius: 16px 4px 14px 4px/4px 14px 4px 16px; }

  /* Bewertungen */
  .reviews-grid { flex-direction: column; }
  .review-card, .review-card:nth-child(n) { transform: none; border-radius: 16px 4px 14px 4px/4px 14px 4px 16px; }

  /* Digital-Sektion */
  .digital-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* CTA Banner */
  .cta-options { flex-direction: column; align-items: center; }
  .cta-options .btn-buy, .cta-options .btn-secondary-buy {
    width: 100%; max-width: 320px; justify-content: center; font-size: 0.9rem;
    min-height: 52px;
  }

  /* FAQ */
  .faq-question { font-size: 0.95rem; padding: 1rem 1.2rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.3rem; text-align: center; }
  .footer { padding: 2.5rem 1.2rem 1.2rem; }
}



.nav-logo { height: 48px; transition: opacity 0.3s; }
.nav-logo:hover { opacity: 0.8; }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a { color: #bebebe; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.nav-links a:hover { color: #ffffff; }
.nav-links .shop-btn {
  color: #000000; background: #ffffff;
  border: 3px dashed #000000; padding: 0.35rem 1.1rem;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.3s;
}
.nav-links .shop-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: #ffffff; margin: 5px 0; }
/* Footer */
.site-footer { background: #000000; }
.footer { padding: 3rem 2rem 1.5rem; }
.footer-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; }
.footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; margin-bottom: 0.8rem; margin-top: 1.2rem; }
.footer h4:first-child { margin-top: 0; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.4rem; }
.footer ul a { color: #888888; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
.footer ul a:hover { color: #ffffff; }
.footer-brand p { color: #888888; font-size: 0.85rem; line-height: 1.6; margin: 0.6rem 0 1rem; }
.footer-social { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #888888; border: 1px dashed rgba(255,255,255,0.2); transition: all 0.2s; }
.footer-social a:hover { color: #ffffff; border-color: #ffffff; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { max-width: 1060px; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid #1a1a1a; display: flex; justify-content: space-between; flex-wrap: wrap; color: #888888; font-size: 0.8rem; gap: 0.5rem; }
@media (max-width: 600px) {
  .nav { padding: 0.6rem 1.2rem; }
  .nav-logo { height: 40px; }
  .nav-links a { padding: 0.6rem 0; min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer { padding: 2.5rem 1.2rem 1.2rem; }
}


/* ── NAV — global, mit Dropdowns ──────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 64px;
}
.nav-logo { height: 44px; transition: opacity 0.3s; display: block; }
.nav-logo:hover { opacity: 0.8; }

/* Nav-Links Zeile */
.nav-links {
  display: flex; gap: 0; list-style: none; align-items: stretch;
  height: 100%; margin: 0;
}
.nav-links > li { display: flex; align-items: center; position: relative; }

/* Normale Links */
.nav-links > li > a {
  color: rgba(255,255,255,0.75);
  font-family: var(--font-madness, 'MortysMadness', Arial, sans-serif);
  font-size: 0.88rem; text-decoration: none;
  padding: 0 1rem; height: 100%; display: flex; align-items: center;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links > li > a:hover { color: #ffffff; }

/* Dropdown-Toggle-Button (sieht aus wie Link) */
.nav-dropdown-toggle {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-madness, 'MortysMadness', Arial, sans-serif);
  font-size: 0.88rem;
  padding: 0 1rem; height: 100%; display: flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-has-dropdown:hover .nav-dropdown-toggle { color: #ffffff; }
.nav-chevron { transition: transform 0.2s; flex-shrink: 0; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Dropdown-Menü */
.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  background: #000000;
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 2px solid rgba(255,255,255,0.2);
  list-style: none; padding: 0.6rem 0; margin: 0;
  min-width: 240px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 100;
}
/* Hover öffnet auf Desktop */
.nav-has-dropdown:hover .nav-dropdown,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}

/* Dropdown-Items */
.nav-dropdown li a {
  display: block; padding: 0.55rem 1.4rem;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif);
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown li a:hover {
  color: #ffffff; background: rgba(255,255,255,0.06);
}

/* Dropdown Überschriften (Kategorie-Labels) */
.nav-dropdown-heading {
  display: block; padding: 0.4rem 1.4rem 0.2rem;
  font-family: var(--font-madness, 'MortysMadness', Arial, sans-serif);
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* Trennlinie im Dropdown */
.nav-dropdown-sep {
  height: 1px; background: rgba(255,255,255,0.08);
  margin: 0.4rem 0;
}

/* Shop-Button */
.nav-links .shop-btn {
  color: #000 ; background: #fff ;
  border: 3px dashed #000 ;
  padding: 0.3rem 1rem !important;
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif) ;
  font-size: 0.82rem !important; text-transform: uppercase; letter-spacing: 0.06em;
  transition: all 0.25s; margin-left: 0.5rem;
  white-space: nowrap;
}
.nav-links .shop-btn:hover {
  background: transparent ; color: #fff ;
  border-color: #fff ;
}

/* Hamburger */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.5rem; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: #fff;
  transition: transform 0.2s, opacity 0.2s;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav { padding: 0 1.2rem; }
  .nav-logo { height: 38px; }
  .nav-toggle { display: flex; }

  .nav-links {
    display: none; flex-direction: column;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: #000000;
    overflow-y: auto;
    padding: 1rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    height: auto; align-items: stretch; gap: 0;
    z-index: 999;
  }
  .nav-links.open { display: flex; }

  .nav-links > li { height: auto; flex-direction: column; align-items: stretch; }

  .nav-links > li > a {
    padding: 0.85rem 1.5rem; height: auto;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 1rem;
  }

  .nav-dropdown-toggle {
    padding: 0.85rem 1.5rem; height: auto; width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 1rem;
  }

  /* Mobile Dropdown: klappt inline auf */
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible;
    pointer-events: auto; transform: none;
    box-shadow: none; border: none; border-top: none;
    background: rgba(255,255,255,0.04);
    padding: 0; min-width: auto;
    display: none;
    transition: none;
  }
  .nav-dropdown.mobile-open { display: block; }
  .nav-dropdown li a {
    padding: 0.7rem 1.5rem 0.7rem 2.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9rem;
  }
  .nav-dropdown-heading { padding-left: 2.2rem; }
  .nav-dropdown-sep { margin: 0; }

  .nav-links .shop-btn {
    margin: 1rem 1.5rem 0 !important;
    padding: 0.65rem 1rem !important;
    text-align: center; display: block !important;
    font-size: 0.95rem !important;
  }

  /* Hamburger → X wenn offen */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}


/* ── Globale Overflow & Mobile Fixes ──────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }

/* Alle Überschriften: sicheres Umbrechen */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Hero-Titel Clamp für alle Seiten */
.hero-title, .article-title, .page-title, .p-title, .lp-title,
[id="page-h1"], [id="hero-h1"], [id="article-h1"] {
  font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Section-Titel */
.s-title, .section-title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-size: clamp(1.3rem, 3.5vw, 2.5rem) !important;
}

/* Padding-top für Content unter fixer Nav */
.breadcrumb, .breadcrumb-overlay + * { }
body > *:not(header):first-of-type { }

/* Alle Grid-Layouts auf Mobile: 1 Spalte */
@media (max-width: 600px) {
  /* Grids */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Flex-Reihen umbrechen */
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* Max-Width für schmale Container */
  .inner, .section-inner, .page-inner, .page-inner-narrow,
  .inner-narrow, .article-body, .legal-body {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  /* Hero min-height reduzieren */
  .site-hero, .article-hero, .blog-index-hero {
    min-height: 50vh !important;
  }
  /* Produkthero */
  .product-hero-inner {
    grid-template-columns: 1fr !important;
  }
  /* Team-Grid */
  .team-grid { gap: 1rem !important; }
  .team-card { flex: 0 0 calc(50% - 0.5rem) !important; max-width: none !important; }

  /* Feat-Cards */
  .feat, .feat-card { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr !important; }

  /* Blog-Grid */
  .blog-grid { grid-template-columns: 1fr !important; }
  .related-img-grid { grid-template-columns: 1fr !important; }

  /* Verdächtige */
  .suspects-grid { gap: 1rem !important; }
  .suspect { flex: 0 0 calc(50% - 0.5rem) !important; max-width: 160px !important; }

  /* Buttons */
  .hero-ctas { flex-direction: column !important; align-items: center !important; }
  .btn-primary, .btn-ghost, .btn-pink, .btn-buy {
    width: 100% !important; max-width: 320px !important;
    justify-content: center !important; text-align: center ;
  }

  /* Zettel: keine Rotation auf Mobile */
  .paper-note, .callout, .callout.alt, .info-zettel,
  .feat, .step, .blog-card, .related-img-card {
    transform: none !important;
  }

  /* Dark-Note CTA */
  .dark-note { padding: 2rem 1.5rem 2.5rem !important; }
  .dark-note .hero-ctas, .dark-note > div[style*="flex"] {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 900px) {
  /* Zweispaltige Grids → eine Spalte */
  .grid-2, .compare-grid, .kontakt-grid,
  .fall-grid, .grid-prose {
    grid-template-columns: 1fr !important;
  }
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  /* Steps */
  .steps-grid { grid-template-columns: 1fr 1fr !important; }
  /* Features */
  .features-grid { grid-template-columns: 1fr 1fr !important; }
  .feats .feat { flex: 0 0 calc(50% - 0.8rem) !important; }
}


/* fade-in: sichtbar als Fallback, Animation nur wenn JS läuft */
.fade-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.js .fade-in { opacity: 0; transform: translateY(20px); }
.js .fade-in.visible { opacity: 1; transform: translateY(0); }


/* Nav: HeadyFont für alle Links und Buttons */
.nav-links > li > a,
.nav-dropdown-toggle {
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif) ;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.nav-dropdown li a {
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif) ;
  font-size: 0.78rem !important;
}


/* HeadyFont überall uppercase erzwingen */
.p-title, .product-title, .hero-title, .lp-title,
.game-title, .section-title, .s-title, .article-title,
.step-title, .feat h4, .team-name,
h1[style*="font-heady"], h2[style*="font-heady"],
.info-zettel .info-value { font-family: var(--font-heady, 'MortysHeady', Georgia, serif); }


/* Breadcrumb-Overlay: kein Einfluss auf Hero-Layout */
.breadcrumb-overlay {
  position: absolute !important;
  top: 68px !important;
  left: 0 !important; right: 0 !important;
  padding: 0.8rem 2rem !important;
  z-index: 10 !important;
  pointer-events: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.breadcrumb-overlay * { pointer-events: auto; }
/* Hero bleibt vollbreit, Breadcrumb verdrängt nichts */
.site-hero, .article-hero, .blog-index-hero {
  position: relative !important;
  overflow: hidden !important;
}


/* Nav: HeadyFont für alle Links und Buttons */
.nav-links > li > a,
.nav-dropdown-toggle {
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif) ;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.nav-dropdown li a {
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif) ;
  font-size: 0.78rem !important;
}


/* HeadyFont überall uppercase erzwingen */
.p-title, .product-title, .hero-title, .lp-title,
.game-title, .section-title, .s-title, .article-title,
.step-title, .feat h4, .team-name,
h1[style*="font-heady"], h2[style*="font-heady"],
.info-zettel .info-value { font-family: var(--font-heady, 'MortysHeady', Georgia, serif); }


/* MortysHeadyFont immer uppercase */
.section-title, .s-title, .hero-title, .article-title, .p-title, .lp-title,
.step-title, .team-name, .game-title, .feat h4, .blog-card-title,
.related-card-title, .paper-note h3, .dark-note h2,
h1, h2, h3[class*="heady"], h3[class*="title"],
.nav-dropdown-toggle, .nav-links > li > a, .nav-dropdown li a,
.btn-primary, .btn-ghost, .btn-buy, .btn-ink, .btn-white, .shop-btn {
  font-family: var(--font-heady, 'MortysHeady', Georgia, serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* Kein automatischer Wortumbruch in Headlines */
h1, h2, h3, h4, .hero-title, .section-title, .s-title,
.article-title, .p-title, .lp-title {
  hyphens: none !important;
  overflow-wrap: break-word;
  word-break: break-word;
}


@media (max-width: 600px) {
  .paper-note, .callout, .step, .feat, .feat-card, .dark-note,
  .info-zettel, .img-note-body, .team-card-inner {
    padding: 1rem 1.1rem 1.2rem !important;
  }
  .paper-note h3, .callout h4 { font-size: 0.9rem !important; }
  .paper-note p, .callout p, .step-text, .feat p { font-size: 0.8rem !important; }
  /* Zettel-Grid: zentriert auf Mobile */
  .steps-grid, .features-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .step, .feat { width: 100% !important; max-width: 420px !important; }
  /* Weniger Padding an Seitenrändern */
  .section, .page-section { padding: 2.5rem 1rem !important; }
  .inner, .page-inner, .page-inner-narrow, .inner-narrow { 
    padding-left: 1rem !important; 
    padding-right: 1rem !important; 
  }
}


/* CSS Variable Fixes */
:root {
  --paper-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  --paper-radius-alt: 15px 225px 15px 255px/225px 15px 255px 15px;
  --paper: #f5f1ea;
  --paper-shadow: rgba(0,0,0,0.55);
  --ink: #1a1a1a;
  --ink-mid: #3a3a3a;
  --gray-bg: #1a1a1e;
  --gray-mid: #888;
  --gray-dark: #444;
  --gray-text: #ededed;
  --white: #fff;
  --black: #000;
  --pink: #E91E8C;
  --dark-mid: #1e1e22;
  --font-heady: 'MortysHeady', Georgia, serif;
  --font-madness: 'MortysMadness', Arial, sans-serif;
  --font-marmelade: 'MortysMarmelade', Georgia, cursive;
  --pr: 255px 15px 225px 15px/15px 225px 15px 255px;
  --pr-alt: 15px 225px 15px 255px/225px 15px 255px 15px;
}
/* fade-in: sichtbar ohne JS */
.fade-in { opacity: 1 ; transform: none !important; transition: opacity 0.5s ease, transform 0.5s ease; }
.js .fade-in { opacity: 0 ; transform: translateY(20px) !important; }
.js .fade-in.visible { opacity: 1 ; transform: none !important; }


/* ── GLOBAL PATCHES ─── */
body { background: #1a1a1e ; }
section { background: #1a1a1e ; }
.section, .detektivclub, .trust-bar { background: #1a1a1e ; }
.testimonial-card { background: #232329 ; }
.wave-to-black, .wave-divider { display: none !important; }

/* Totenkopf helle Zettel */
.paper-note ul, .callout ul, .category-door-list, .step-card ul, .info-zettel ul { list-style:none !important; padding-left:0 !important; }
.paper-note ul li, .callout ul li, .category-door-list li, .step-card ul li, .info-zettel ul li {
  list-style:none !important; padding:0.2rem 0 0.2rem 1.6rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cellipse cx='9' cy='8' rx='6.5' ry='7' fill='%231a1a1a'/%3E%3Cellipse cx='5' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='13' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='6.2' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cellipse cx='11.8' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cpath d='M8 10.5 Q9 9.5 10 10.5 L9.5 12 Q9 12.5 8.5 12Z' fill='%23f5f1ea'/%3E%3Crect x='3.5' y='13.2' width='11' height='1.2' rx='0.6' fill='%231a1a1a'/%3E%3Crect x='4.2' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='7.5' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='10.8' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='6.2' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3Crect x='9.5' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important;
  background-position:left 0.3rem !important; background-size:13px 14px !important;
}
.paper-note ul li::before, .callout ul li::before, .category-door-list li::before { content:none !important; }

/* Totenkopf dunkle Bereiche */
.game-card ul li, .feat ul li, .dark-note ul li, .article-body ul li, .faq-answer ul li {
  list-style:none !important; padding:0.2rem 0 0.2rem 1.6rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cellipse cx='9' cy='8' rx='6.5' ry='7' fill='%23bebebe'/%3E%3Cellipse cx='5' cy='11' rx='2' ry='1.2' fill='%23bebebe'/%3E%3Cellipse cx='13' cy='11' rx='2' ry='1.2' fill='%23bebebe'/%3E%3Cellipse cx='6.2' cy='7.5' rx='2.1' ry='2.3' fill='%231a1a1e'/%3E%3Cellipse cx='11.8' cy='7.5' rx='2.1' ry='2.3' fill='%231a1a1e'/%3E%3Cpath d='M8 10.5 Q9 9.5 10 10.5 L9.5 12 Q9 12.5 8.5 12Z' fill='%231a1a1e'/%3E%3Crect x='3.5' y='13.2' width='11' height='1.2' rx='0.6' fill='%23bebebe'/%3E%3Crect x='4.2' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='7.5' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='10.8' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='6.2' y='14.4' width='1.3' height='3' fill='%231a1a1e'/%3E%3Crect x='9.5' y='14.4' width='1.3' height='3' fill='%231a1a1e'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important;
  background-position:left 0.3rem !important; background-size:13px 14px !important;
}

/* Hover: alle Buttons invertieren */
.btn-primary:hover, .btn-ghost:hover, .game-card-buy:hover {
  background:#fff ; color:#000 ; border-color:#000 ;
}

/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Spielfarbe #005AA8 */
.btn-primary { background:#005AA8 ; border-color:#005AA8 ; }
.btn-primary:hover { background:#fff ; color:#005AA8 ; border-color:#005AA8 ; }
.game-card-buy { background:#005AA8 ; }
.game-card-buy:hover { background:#fff ; color:#005AA8 ; border-color:#005AA8 ; }
.s-label { color:#005AA8 ; }
.s-rule { background:#005AA8 ; }
.paper-note { border-top-color: var(--ink) ; } /* monochrom */
.faq-question[aria-expanded="true"] { border-bottom-color:#005AA8 ; }


/* Nav: transparent beim Start, solid beim Scrollen */
.nav {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.nav-transparent {
  background: transparent ;
  border-bottom-color: transparent ;
}
.nav.nav-transparent .nav-logo { filter: brightness(0) invert(1); }
.nav.nav-transparent .nav-links > li > a,
.nav.nav-transparent .nav-dropdown-toggle { color: rgba(255,255,255,0.9); }
.nav.nav-transparent .shop-btn {
  background: transparent ;
  color: #fff ;
  border-color: rgba(255,255,255,0.7) ;
}



.nav { transition: background 0.3s ease, border-bottom-color 0.3s ease; }
.nav.nav-transparent { background: transparent ; border-bottom-color: transparent ; }
.nav.nav-transparent .nav-dropdown-toggle,
.nav.nav-transparent .nav-links > li > a { color: rgba(255,255,255,0.9); }
.nav.nav-transparent .shop-btn { background: transparent ; color: #fff ; border-color: rgba(255,255,255,0.7) ; }


.btn-buy { background:#005AA8 ; color:#fff ; border:3px dashed #fff ; }
.btn-buy:hover { background:#fff ; color:#005AA8 ; border-color:#005AA8 ; }
.btn-secondary-buy { border-color:#fff ; color:#fff ; }
.btn-secondary-buy:hover { background:#fff ; color:#005AA8 ; border-color:#fff ; }
.section-label { color:#005AA8 ; }
.section-divider { background:#005AA8 ; }
.paper-note { border-top-color: var(--ink) ; } /* monochrom */
.faq-question[aria-expanded="true"] { border-bottom-color:#005AA8 ; }
/* Charakter-Bilder: transparenter Hintergrund */
.suspect-img { background: transparent ; }
.suspect-card { background: transparent ; border: none ; }

section { background: #1a1a1e; }

/* Breadcrumb: klein, schwarzer Hintergrund, unter der Nav */
.breadcrumb-overlay ol { display:flex; gap:0.4rem; list-style:none; padding:0; flex-wrap:wrap; max-width:1060px; margin:0 auto; }
.breadcrumb-overlay li { font-size:0.72rem; color:rgba(255,255,255,0.45); font-family:var(--font-madness,sans-serif); }
.breadcrumb-overlay a { color:rgba(255,255,255,0.45); text-decoration:none; transition:color 0.2s; }
.breadcrumb-overlay a:hover { color:rgba(255,255,255,0.85); }
.breadcrumb-overlay .sep { color:rgba(255,255,255,0.2); }
/* Schiffbrüchiger-Stil: breadcrumb als Block vor dem Hero */
.breadcrumb { background:#000 ; padding:0.6rem 2rem !important; }
.breadcrumb-list { display:flex; gap:0.4rem; list-style:none; max-width:1060px; margin:0 auto; flex-wrap:wrap; }
.breadcrumb-list li { font-size:0.72rem; color:rgba(255,255,255,0.45); }
.breadcrumb-list a { color:rgba(255,255,255,0.45); text-decoration:none; }
.breadcrumb-list a:hover { color:rgba(255,255,255,0.8); }


/* Einheitliche Zentrierung */
.section-label, .s-label { text-align: center ; display: block !important; }
.section-title, .s-title { text-align: center ; }
.section-divider, .s-rule { margin-left: auto !important; margin-right: auto !important; }
/* Ausnahmen: Fließtext bleibt links */
.article-body h2, .legal-body h2, .faq-answer p { text-align: left ; }
/* Mobile: Trust-Zettel auf 2 Spalten */
@media (max-width: 700px) {
  .trust-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 400px) {
  .trust-grid { grid-template-columns: 1fr !important; }
}


/* Einheitliche Zentrierung */
.section-label, .s-label { text-align: center ; display: block !important; }
.section-title, .s-title { text-align: center ; }
.section-divider, .s-rule { margin-left: auto !important; margin-right: auto !important; }
.article-body h2, .legal-body h2, .faq-answer p { text-align: left ; }
@media (max-width: 700px) { [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } }


/* ── GLOBAL FIXES ── */

/* 1. Nav: schwarzer Hintergrund, korrektes Padding, volle Höhe */
.nav {
  background: #000 ;
  border-bottom: 1px solid rgba(255,255,255,0.08) ;
  min-height: 60px;
}
.nav.nav-transparent {
  background: transparent ;
  border-bottom-color: transparent ;
}

/* 2. Shop-Button: besser gepolstert, Pink-Glow-Animation */
@keyframes pinkGlow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(233,30,140,0.0); }
  50%       { box-shadow: 0 0 18px 4px rgba(233,30,140,0.65); }
}
.shop-btn {
  padding: 0.55rem 1.3rem !important;
  margin: 0.5rem 0 0.5rem 1rem !important;
  animation: pinkGlow 2.8s ease-in-out infinite !important;
  background: #fff ;
  color: #000 ;
  border: 3px dashed #000 ;
  white-space: nowrap;
}
.shop-btn:hover {
  background: #000 ;
  color: #fff ;
  border-color: #fff ;
  animation: none !important;
  box-shadow: 0 0 18px 4px rgba(233,30,140,0.7) ;
}

/* 3. Wellen überall ausblenden */
.wave-to-black, .wave-divider, [class*="wave-"] { display: none !important; }



/* Hero als Bild (zweispaltig: Cover schwebt | Kaufen) */
.product-hero { background-image:none !important; }
.product-hero .hero-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.product-hero::before { background: rgba(20,20,24,0.35) ; z-index:1; }
.product-hero-inner { position:relative; z-index:2 !important; }
.product-frame { border:none ; box-shadow:none ; background:transparent ; overflow:visible !important; max-width:340px; }
.product-frame::after { display:none !important; }
.product-frame img { filter:drop-shadow(0 16px 28px rgba(0,0,0,0.6)); }
.product-hero-info .product-kategorie,.product-hero-info .product-title,
.product-hero-info .product-subtitle,.product-hero-info .product-lead { text-shadow:0 0 22px rgba(0,0,0,0.85),0 2px 6px rgba(0,0,0,0.9); }
.product-meta-label,.product-meta-value { text-shadow:0 0 10px rgba(0,0,0,0.9); }
/* Pin pinnt den Zettel, nicht die Figur */
.suspect-label { position:relative; overflow:visible; }
.suspect-pin { top:-15px !important; bottom:auto !important; left:50% !important; right:auto !important;
  transform:translateX(-50%) rotate(-6deg) !important; z-index:3; width:24px !important; height:28px !important; }
.suspect-card:nth-child(even) .suspect-pin { transform:translateX(-50%) rotate(6deg) !important; }
.suspect-card:nth-child(3n) .suspect-pin { left:50% !important; transform:translateX(-50%) rotate(-2deg) !important; }


  /* additiv ergänzt: Beschreibungstext der Verdächtigen, Optik identisch zu den anderen Krimidinner-Seiten */
  .suspect-desc { font-size: 0.72rem; color: var(--ink-mid); text-align: center; line-height: 1.5; margin-top: 0.45rem; }


/* FIX Breadcrumb-Vereinheitlichung: visually-hidden wie auf den generischen Seiten (additiv, gewinnt durch spaetere Position + !important) */
.breadcrumb-overlay{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 ;}


  /* Header global: immer schwarz, etwas größer, geschwungene Unterkante, kompakter Kaufen-Button */
  .nav { height:80px !important; min-height:80px !important; background:#000 ; align-items:center !important; position:fixed !important; z-index:9999 !important; }
  .nav.nav-transparent { background:#000 ; border-bottom-color:rgba(255,255,255,0.08) ; }
  .nav-logo { height:56px !important; width:auto !important; max-width:none !important; object-fit:contain !important; filter:none ; }
  .nav-links a { font-size:0.96rem !important; }
  .nav-links .shop-btn, .shop-btn { box-sizing:border-box !important; align-self:center !important; height:30px !important; min-height:0 !important; padding:0 1.15rem !important; margin:0 0 0 0.6rem !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:0.82rem !important; line-height:1 !important; border-width:2px ; }
  .nav::after { content:''; position:absolute; top:100%; left:0; width:100%; height:15px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V9 C1140,26 860,1 560,13 C320,22 140,5 0,13 Z' fill='%23000000'/%3E%3C/svg%3E") no-repeat;
    background-size:100% 100%; pointer-events:none; }
  @media (max-width:768px){ .nav { height:64px !important; min-height:64px !important; } .nav-logo { height:44px !important; width:auto !important; } }
  

      .pg-main { position:relative; max-width:360px; margin:0 auto; }
      .pg-stage { aspect-ratio:1; overflow:visible; transform:rotate(-1deg); }
      .pg-stage img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(4px 7px 16px rgba(0,0,0,0.55)); }
      .pg-mainpin { position:absolute; top:-14px; right:26px; width:32px; z-index:4; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
      .pg-thumbs { display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:1.6rem; }
      .pg-thumb { position:relative; width:62px; height:62px; padding:0; border:2px solid var(--ink); background:#0d0d10; cursor:pointer; border-radius:2px; box-shadow:2px 3px 8px rgba(0,0,0,0.5); transition:transform 0.15s ease, border-color 0.15s; }
      .pg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
      .pg-thumb::before { content:''; position:absolute; top:-9px; left:50%; width:18px; height:18px; transform:translateX(-50%); background:url('/img/ui/pin2.webp') no-repeat center/contain; z-index:3; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
      .pg-thumb:nth-child(3n+1){ transform:rotate(-4deg); }
      .pg-thumb:nth-child(3n+2){ transform:rotate(3deg); }
      .pg-thumb:nth-child(3n){ transform:rotate(-1.5deg); }
      .pg-thumb:hover { transform:rotate(0) scale(1.08); z-index:5; }
      .pg-thumb.is-active { border-color:#7dc0f5; box-shadow:0 0 0 2px rgba(125,192,245,0.5), 2px 3px 8px rgba(0,0,0,0.5); }
      .pg-arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:none; border-radius:50%; background:rgba(0,0,0,0.5); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
      .pg-arrow:hover { background:rgba(0,0,0,0.78); }
      .pg-prev { left:-8px; } .pg-next { right:-8px; }
      .pg-main:focus-visible { outline:2px solid #7dc0f5; outline-offset:6px; border-radius:4px; }
      

      .eindruecke-board { display:flex; flex-wrap:wrap; gap:2.5rem 3rem; align-items:center; justify-content:center; margin-top:1rem; }
      .eindruecke-tv { position:relative; width:min(470px,90vw); flex:0 0 auto; transform:rotate(-2.3deg); filter:drop-shadow(0 20px 26px rgba(0,0,0,0.5)); }
      .scene-cluster { display:flex; flex-direction:column; gap:1.8rem; flex:0 0 auto; }
      .scene-pin { position:relative; width:min(300px,82vw); margin:0; }
      .scene-pin img { width:100%; height:auto; display:block; border:6px solid #f3efe6; box-shadow:4px 6px 16px rgba(0,0,0,0.6); }
      .scene-pin::before { content:''; position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:26px; height:26px; background:url('/img/ui/pin3.webp') no-repeat center/contain; z-index:3; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
      .scene-pin:nth-child(1){ transform:rotate(-3deg); }
      .scene-pin:nth-child(2){ transform:rotate(2.5deg); }
      @media (max-width:880px){ .eindruecke-tv { transform:rotate(-1.5deg); width:min(470px,92vw); } }
      

  /* 3g — Lesbarkeit, Heady-Caps, Kontrast (additiv) */
  .suspect-name, .cta-banner h2, .info-value { text-transform: uppercase; }
  .faq-question { font-size: 1.18rem !important; }
  .review-text { font-size: 1.06rem !important; line-height: 1.72 !important; }
  .review-author { font-size: 0.84rem !important; }
  .product-kategorie { color:#5BA9E8 ; border-color:#5BA9E8 ; }
  /* Welle B: Kontrast Labels/Divider auf #5BA9E8 (#005AA8 fällt auf dunklem BG durch a11y) */
  .section-label { color:#5BA9E8 ; }
  .section-divider { background:#5BA9E8 ; }
  .faq-question[aria-expanded="true"] { border-bottom-color:#5BA9E8 ; }
  /* Welle B: Heady-Regel — step-title in Caps */
  .step-title { text-transform: uppercase; }
  @media (max-width:768px){ .faq-question { font-size: 1.05rem !important; } }
  

/* ===== + krimidinner/der-tod-des-samurai ===== */
.suspect-desc { font-size: 0.72rem; color: var(--ink-mid); text-align: center; line-height: 1.5; margin-top: 0.45rem; }
/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Spielfarbe #B072CE */
.btn-primary { background:#B072CE ; border-color:#B072CE ; }
/* breadcrumb als Block vor dem Hero */
.breadcrumb { background:#000 ; padding:0.6rem 2rem !important; }
/* Welle B: Kontrast Labels/Divider auf #C99BDF (#B072CE fällt auf dunklem BG durch a11y) */
  .section-label { color:#C99BDF ; }

/* ===== + krimidinner/der-tod-in-der-zombie-wg ===== */
/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Spielfarbe #83C829 */
.btn-primary { background:#83C829 ; border-color:#83C829 ; }
/* Welle B: Kontrast Labels/Divider auf #A8E04E (#83C829 fällt auf dunklem BG durch a11y) */
  .section-label { color:#A8E04E ; }

/* ===== + detektivspiele/der-tod-im-wikingerdorf ===== */
.suspect-card:nth-child(even) .suspect-label { border-radius: var(--paper-radius-alt); }
/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Spielfarbe #174A5D */
.btn-primary { background:#174A5D ; border-color:#174A5D ; }
.scene-pin:nth-child(3){ transform:rotate(-1.4deg); }
/* Welle B: Kontrast Labels/Divider auf #63A6BD (#174A5D fällt auf dunklem BG durch a11y) */
  .section-label { color:#63A6BD ; }

/* ===== + detektivspiele/der-tod-in-der-wandermenagerie ===== */
/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Spielfarbe #760C2B */
.btn-primary { background:#760C2B ; border-color:#760C2B ; }
/* Welle B: Kontrast Labels/Divider auf #C7869C (#760C2B fällt auf dunklem BG durch a11y) */
  .section-label { color:#C7869C ; }

/* ===== + blog ===== */
/* Wenn Morty-Bild hochgeladen: --bullet-img in :root setzen um SVG zu ersetzen */


/* Brückenseite: monochrom (Spielfarben sind die einzigen Farbakzente — Brand Guidelines) */
.btn-primary { background:#f5f5f5 ; border-color:#1a1a1e ; color:#1a1a1e ; }
.blog-filter { margin: 2rem 0; }
.filter-row { display:flex; gap:0.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filter-label { font-family:var(--font-madness); font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--gray-mid); white-space:nowrap; }
.filter-btn { background:transparent; border:1px dashed rgba(255,255,255,0.25); color:rgba(255,255,255,0.6); padding:0.3rem 0.9rem; font-family:var(--font-madness); font-size:0.78rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.filter-btn:hover, .filter-btn.active { background:#fff; color:#000; border-color:#fff; }
.blog-search { width:100%; max-width:480px; background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.25); color:#fff; padding:0.6rem 1rem; font-family:var(--font-madness); font-size:0.88rem; outline:none; transition:border-color 0.2s; }
.blog-search:focus { border-color:rgba(255,255,255,0.6); }
.blog-search::placeholder { color:rgba(255,255,255,0.3); }
.blog-card[data-hidden="true"] { display:none !important; }
.no-results { text-align:center; color:var(--gray-mid); padding:3rem; font-family:var(--font-marmelade); display:none; }
.no-results.visible { display:block; }
/* Blog-Cards */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1.5rem; }
.blog-card { position:relative; text-decoration:none; display:block; color:var(--ink,#1a1a1a); transition:transform 0.3s; }
.blog-card:nth-child(even) { transform:rotate(0.4deg); }
.blog-card:nth-child(odd) { transform:rotate(-0.5deg); }
.blog-card:hover { transform:translateY(-5px) rotate(0deg) !important; }
.blog-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:transparent; }
.blog-card-body { padding:1.2rem 1.4rem 1.6rem; }
.blog-card-tag { font-family:var(--font-madness,sans-serif); font-size:0.65rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-mid,#3a3a3a); margin-bottom:0.4rem; display:block; }
.blog-card-title { font-family:var(--font-heady,serif); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink,#1a1a1a); margin-bottom:0.4rem; line-height:1.3; }
.blog-card-excerpt { font-size:0.8rem; color:var(--ink-mid,#3a3a3a); line-height:1.6; }
.card-pin { position:absolute; top:-15px; width:30px; height:34px; z-index:2; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7)); }
.card-pin-l { left:18px; }
.card-pin-r { right:18px; }
.card-pin-c { left:50%; transform:translateX(-50%); }
@media(max-width:900px) {
  .blog-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .blog-grid { grid-template-columns:1fr; }
}
/* ── FIXES ── */

/* 1. Fallback-Bild für alle img-Tags */
img { min-height: 0; }
/* 2. Blog-Hero: Überschrift zentriert */
.blog-index-hero .hero-inner,
.blog-index-hero .article-tag,
.blog-index-hero .article-title,
.blog-index-hero .article-lead,
.blog-index-hero h1 {
  text-align: center ;
}
/* 3. Zettel-Links als schwarze Buttons mit gestricheltem Rand */
.category-door-cta,
.paper-note a:not([class]),
.paper-note .btn-zettel {
  display: inline-block;
  background: #000;
  color: #fff ;
  border: 2px dashed #fff;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-heady, serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  transition: all 0.22s;
  margin-top: 0.6rem;
}
.category-door-cta:hover,
.paper-note a:not([class]):hover,
.paper-note .btn-zettel:hover {
  background: #fff ;
  color: #000 ;
  border-color: #000;
}
/* Zettel-CTAs zentrieren */
.category-door-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-door-list { width: 100%; }
/* 4. Neuer Totenkopf (mit Zähnen) für Zettel-Listen */
.paper-note ul li,
.callout ul li,
.category-door-list li,
.step-card ul li,
.info-zettel ul li {
  list-style: none !important;
  padding-left: 1.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cellipse cx='9' cy='8' rx='6.5' ry='7' fill='%231a1a1a'/%3E%3Cellipse cx='5' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='13' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='6.2' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cellipse cx='11.8' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cpath d='M8 10.5 Q9 9.5 10 10.5 L9.5 12 Q9 12.5 8.5 12Z' fill='%23f5f1ea'/%3E%3Crect x='3.5' y='13.2' width='11' height='1.2' rx='0.6' fill='%231a1a1a'/%3E%3Crect x='4.2' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='7.5' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='10.8' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='6.2' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3Crect x='9.5' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 0.3rem !important;
  background-size: 13px 14px !important;
}
/* 5. Wellen verstecken */
.wave-to-black, .wave-divider { display: none !important; }
/* 6. Zentrierung */
.section-label, .s-label { text-align: center ; display: block !important; }
h2.section-title, h2.s-title { text-align: center ; }
/* 7. Testimonials dunkler Zettel */
.testimonial-card { background: #1c1c22 ; }
/* blog-index-hero-fix */

/* Blog-Hero: gleiche Höhe wie Spielseiten-Hero */
.blog-index-hero {
  position: relative;
  width: 100%;
  min-height: 65vh !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #1a1a1e;
}
.blog-index-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.blog-index-hero .hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-index-hero .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,26,30,0.2) 0%, rgba(26,26,30,0.6) 55%, rgba(26,26,30,0.95) 100%);
  z-index: 1;
}
.blog-index-hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  text-align: center ;
}
.blog-index-hero .article-title,
.blog-index-hero h1 {
  text-align: center ;
  font-family: var(--font-heady);
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  hyphens: none;
  text-shadow: 0 0 40px rgba(0,0,0,0.9);
}
.blog-index-hero .article-tag,
.blog-index-hero .article-lead {
  text-align: center ;
}
.blog-index-hero .breadcrumb-overlay {
  position: absolute !important;
  top: 68px !important;
}
/* Vereinheitlichung generische Seiten */
.breadcrumb-overlay{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 ;}
/* welle-center-text */
.page-inner-narrow{max-width:720px;margin-left:auto;margin-right:auto;}

/* ===== + blog/vorbereitung/krimidinner-essen ===== */
/* === RESTORE Blog-Artikel-Styling v2 – vollständig aus Original (project/blog-index.html + live blog-index), additiv === */
/* ARTICLE BODY: schmale, zentrierte Spalte + Typografie */
.article-body{max-width:780px;margin:0 auto;padding:4rem 2rem;}
.article-body h2{font-family:var(--font-heady);font-size:clamp(1.3rem,3vw,1.8rem);text-transform:uppercase;letter-spacing:.04em;margin:3rem 0 1rem;line-height:1.2;}
.article-body h3{font-family:var(--font-marmelade);font-size:1.2rem;color:var(--white);margin:2rem 0 .6rem;}
.article-body p{color:var(--gray);line-height:1.85;margin-bottom:1.1rem;}
.article-body p strong{color:var(--white);}
.article-body ul,.article-body ol{color:var(--gray);padding-left:1.4rem;margin-bottom:1.1rem;}
.article-body li{margin-bottom:.4rem;line-height:1.75;}
.article-body a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.article-body .drop-cap::first-letter{font-family:var(--font-heady);font-size:3.5rem;float:left;line-height:.8;margin-right:.1em;color:var(--white);}
@media(max-width:768px) {
  .article-body{padding:3rem 1.2rem;}
}
/* HERO-INNER + META */
.article-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:1;}
.article-tag{display:inline-block;font-family:var(--font-madness);font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-mid);border:1px solid var(--gray-dark);padding:.2rem .8rem;margin-bottom:1rem;}
.article-meta{font-size:.78rem;color:var(--gray-mid);margin-bottom:1.5rem;}
.article-lead{color:var(--gray);font-size:1.05rem;line-height:1.85;}
.article-img{margin:2rem 0;}
.article-img img{width:100%;height:auto;display:block;}
.article-img figcaption{font-size:.78rem;color:var(--gray-mid);text-align:center;margin-top:.5rem;font-style:italic;}
/* CALL-OUT ZETTEL */
.callout{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px 4px 14px 4px/4px 14px 4px 16px;box-shadow:4px 5px 14px var(--paper-shadow);padding:1.6rem 1.8rem;margin:2.5rem 0;position:relative;}
.callout .pin{position:absolute;top:-14px;right:20px;width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.callout h4{font-family:var(--font-marmelade);font-size:1.1rem;color:var(--ink);margin-bottom:.5rem;}
.callout p,.callout li{font-size:.88rem;color:var(--ink-mid);line-height:1.7;}
/* INFO-ZETTEL */
.info-zettel{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px 4px 14px 4px/4px 14px 4px 16px;box-shadow:4px 5px 14px var(--paper-shadow);padding:1.6rem 1.8rem;margin:2.5rem 0;position:relative;}
/* PINS */
.card-pin{position:absolute;top:-15px;width:30px;height:34px;z-index:2;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));}
.c-pin{position:absolute;top:-14px;right:20px;width:28px;height:28px;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
/* ARTICLE FOOTER NAV */
.article-nav{max-width:780px;margin:0 auto;padding:0 2rem 4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--gray-dark);padding-top:2rem;}
.article-nav a{color:var(--gray-mid);font-size:.82rem;text-decoration:none;transition:color .3s;}
.article-nav a:hover{color:var(--white);}
/* RELATED – ergänzend */
.related-img-wrap{position:relative;}
.related-card-body{padding:1rem 1.1rem 1.2rem;}
.related-card-tag{font-family:var(--font-madness);font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray-mid);}
/* STAGGER */
.stagger > *{transition-delay:.05s;}

/* ===== + ueber-uns ===== */
/* additiv: Teamfotos bändigen — Ursache war .team-card{max-width:none}. Karten auf sinnvolle Breite kappen, Reihe zentrieren. */
  .team-grid { justify-content: center; }
.team-card { max-width: 220px !important; }
/* welle-team-fix */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;align-items:flex-start;}
.team-pin{position:absolute;top:-14px;width:30px;height:auto;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.team-pin.l{left:16px;}
.team-pin.r{right:16px;}
.team-pin.c{left:50%;transform:translateX(-50%);}
/* welle-team-text */
.team-card-inner{text-align:center;}
.team-name{font-family:var(--font-heady);font-size:1rem;text-transform:uppercase;letter-spacing:0.03em;color:var(--white);margin-bottom:0.25rem;line-height:1.2;}
.team-role{font-family:var(--font-marmelade);font-size:1.05rem;color:var(--gray-text);margin-bottom:0.55rem;line-height:1.4;}
.team-bio{font-size:0.82rem;color:var(--gray-text);line-height:1.6;}

/* ===== + agb ===== */
.legal-body.agb-body{max-width:840px;margin:0 auto;}
.legal-body.agb-body .impr-section{text-align:left;}
.legal-body.agb-body h3{margin-top:1.8rem;}
.legal-body.agb-body p{text-align:left;line-height:1.75;}
.legal-body.agb-body ol{padding-left:1.4rem;margin:.6rem 0;}
.legal-body.agb-body ul{padding-left:1.4rem;margin:.6rem 0;list-style:disc;}
.legal-body.agb-body h4{margin-top:1.3rem;margin-bottom:.4rem;font-family:var(--font-marmelade,inherit);}
.legal-body.agb-body li{margin-bottom:.55rem;line-height:1.7;text-align:left;}
.agb-interim{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.3);padding:1rem 1.2rem;border-radius:8px;margin-bottom:2rem;font-size:.9rem;color:#cfcfcf;text-align:left;}
.legal-body{max-width:840px;margin-left:auto;margin-right:auto;}

/* ===== + index.html ===== */
/* ── INDEX-SPEZIFISCH ─────────────────────────────────────── */

/* Hero */
.site-hero { position:relative; width:100%; min-height:90vh; display:flex; align-items:center; overflow:hidden; background:var(--gray-bg); }
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,20,24,0.3) 0%, rgba(20,20,24,0.65) 60%, rgba(20,20,24,0.95) 100%); z-index:1; }
.hero-wrap { position:relative; z-index:2; max-width:860px; width:100%; margin:0 auto; padding:9rem 2rem 6rem; text-align:center; }
.hero-tag { display:inline-block; font-family:var(--font-madness); font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.6); border:1px dashed rgba(255,255,255,0.35); padding:0.3rem 1.1rem; margin-bottom:1.2rem; }
.hero-title { font-family:var(--font-heady); font-size:clamp(2rem,5.5vw,4rem); text-transform:uppercase; letter-spacing:0.04em; line-height:1.1; margin-bottom:0.8rem; text-shadow:0 0 40px rgba(0,0,0,0.9); hyphens:none; }
.hero-sub { color:rgba(255,255,255,0.85); font-size:1.1rem; line-height:1.8; max-width:680px; margin:0 auto 2.5rem; text-shadow:0 1px 4px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.75); }
.hero-ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; background:var(--pink); color:#fff; border:3px dashed #fff; padding:0.85rem 2.2rem; font-family:var(--font-heady); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.08em; text-decoration:none; transition:all 0.25s; min-height:48px; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#fff; border:3px dashed rgba(255,255,255,0.6); padding:0.85rem 2.2rem; font-family:var(--font-heady); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.08em; text-decoration:none; transition:all 0.25s; min-height:48px; }
.btn-ghost:hover { border-color:#fff; }
/* Trust Bar */
.trust-bar { background:#000; border-top:none; border-bottom:1px solid rgba(255,255,255,0.06); padding:1rem 2rem; }
.trust-inner { max-width:1060px; margin:0 auto; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:rgba(255,255,255,0.6); }
.trust-item strong { color:rgba(255,255,255,0.9); }
/* Kategorie-Türen */
.category-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; }
.category-door { background:var(--paper); color:var(--ink); border:3px solid var(--ink); position:relative; text-decoration:none; display:block; box-shadow:5px 6px 0 rgba(0,0,0,0.2); transition:transform 0.3s; }
.category-door:nth-child(1) { border-radius:255px 15px 225px 15px/15px 225px 15px 255px; transform:rotate(-0.6deg); }
.category-door:nth-child(2) { border-radius:15px 225px 15px 255px/225px 15px 255px 15px; transform:rotate(0.5deg); }
.category-door:hover { transform:translateY(-4px) rotate(0deg) !important; }
.category-door-img { width:100%; aspect-ratio:16/7; object-fit:cover; display:block; background:transparent; }
.category-door-body { padding:1.8rem 2rem 2.2rem; }
.category-door-title { font-family:var(--font-heady); font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; letter-spacing:0.04em; color:var(--ink); margin-bottom:0.5rem; }
.category-door-sub { font-family:var(--font-marmelade); font-size:0.95rem; color:var(--ink-mid); margin-bottom:1rem; }
.category-door-list li { font-size:0.85rem; color:var(--ink-mid); padding:0.2rem 0 0.2rem 1.2rem; position:relative; line-height:1.6; }
.category-door-list li::before { content:'—'; position:absolute; left:0; color:var(--ink-mid); }
.category-door-cta { display:inline-block; font-family:var(--font-heady); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:2px; }
.cat-pin { position:absolute; top:-16px; width:32px; height:36px; z-index:2; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.cat-pin-l { left:20px; }
.cat-pin-r { right:20px; }
/* Spiele-Grid */
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }
.game-card { background:transparent; border:none; text-decoration:none; display:block; transition:transform 0.25s; }
.game-card:hover { transform:translateY(-6px); }
.game-card-img { width:100%; aspect-ratio:1; object-fit:contain; background:transparent; display:block; filter:drop-shadow(0 12px 22px rgba(0,0,0,0.55)); }
.game-card-body { padding:1.2rem 1.4rem 1.6rem; }
.game-card-type { font-size:0.65rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--gray-mid); margin-bottom:0.4rem; display:block; }
.game-card-title { font-family:var(--font-heady); font-size:1rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--white); margin-bottom:0.5rem; }
.game-card-desc { font-size:0.82rem; color:var(--gray-text); line-height:1.6; margin-bottom:1rem; }
.game-card-meta { font-size:0.75rem; color:var(--gray-mid); }
/* Testimonials */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }
.testimonial-card:nth-child(1) { border-radius:255px 15px 225px 15px/15px 225px 15px 255px; transform:rotate(-0.5deg); }
.testimonial-card:nth-child(2) { border-radius:15px 225px 15px 255px/225px 15px 255px 15px; transform:rotate(0.4deg); }
.testimonial-card:nth-child(3) { border-radius:200px 15px 180px 20px/20px 180px 15px 200px; transform:rotate(-0.3deg); }
.t-pin { position:absolute; top:-14px; width:28px; height:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.t-pin.l { left:18px; }
.t-pin.r { right:18px; }
.t-pin.c { left:50%; transform:translateX(-50%); }
.t-stars { color:#f5c518; font-size:0.9rem; margin-bottom:0.6rem; }
.t-text { color:rgba(255,255,255,0.85); font-style:italic; font-size:0.88rem; line-height:1.7; margin-bottom:0.8rem; }
.t-author { color:rgba(255,255,255,0.45); font-size:0.75rem; }
/* So geht's Steps */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2rem; }
.step-pin { position:absolute; top:-14px; width:28px; height:28px; z-index:2; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.step-num { font-family:var(--font-heady); font-size:4rem; line-height:1; color:rgba(0,0,0,0.06); position:absolute; top:0.5rem; right:1rem; }
/* CTA Zettel */
.cta-zettel { background:#111114; border:3px solid rgba(255,255,255,0.12); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; box-shadow:6px 6px 0 rgba(0,0,0,0.4); padding:3rem 4rem 3.5rem; position:relative; text-align:center; max-width:600px; margin:0 auto; }
.cta-zettel h2 { font-family:var(--font-heady); font-size:clamp(1.5rem,3vw,2.2rem); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.8rem; }
.cta-zettel p { color:var(--gray-text); margin-bottom:2rem; }
.cta-pin { position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:32px; height:36px; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
/* Detektivclub Newsletter */
.detektivclub { background:#0a0a0c; border-top:none; }
.detektivclub-inner { max-width:600px; margin:0 auto; text-align:center; padding:5rem 2rem; }
.dc-icon { font-size:3rem; margin-bottom:1rem; }
.detektivclub input[type="email"] { width:100%; max-width:400px; background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.3); color:#fff; padding:0.85rem 1.2rem; font-family:var(--font-madness); font-size:0.95rem; outline:none; transition:border-color 0.2s; }
.detektivclub input[type="email"]:focus { border-color:rgba(255,255,255,0.6); }
.detektivclub button { background:var(--pink); color:#fff; border:3px dashed #fff; padding:0.85rem 2rem; font-family:var(--font-heady); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; cursor:pointer; transition:all 0.25s; white-space:nowrap; }
.detektivclub button:hover { background:transparent; color:var(--pink); border-color:var(--pink); }
.dc-form { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
.dc-small { font-size:0.75rem; color:var(--gray-mid); margin-top:0.8rem; }
/* Wellen */
@keyframes wA { 0%{transform:translateX(0)} 100%{transform:translateX(-12%)} }
@keyframes wB { 0%{transform:translateX(0)} 100%{transform:translateX(-8%)} }
.wave-to-black { position:relative; width:100%; height:70px; overflow:hidden; line-height:0; }
.wave-to-black svg { position:absolute; bottom:0; left:0; width:200%; height:100%; }
/* Mobile */
@media (max-width:900px) {
  .category-grid { grid-template-columns:1fr; }
  .games-grid { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .hero-wrap { padding:7rem 1.2rem 4rem; }
  .hero-title { font-size:clamp(1.6rem,8vw,2.8rem); }
  .hero-ctas { flex-direction:column; align-items:center; }
  .btn-primary, .btn-ghost { width:100%; max-width:300px; }
  .category-grid, .games-grid, .steps-grid { grid-template-columns:1fr; }
  .step-card:nth-child(n) { transform:none; }
  .testimonial-card:nth-child(n) { transform:none; }
  .category-door:nth-child(n) { transform:none; border-radius:8px; }
  .cta-zettel { padding:2rem 1.5rem 2.5rem; border-radius:8px; }
  .section { padding:3rem 1.2rem; }
}
/* Einheitlicher Hintergrund — keine schwarzen Blöcke */
body, .section, .detektivclub, .trust-bar { background: #1a1a1e ; }
.site-hero { background: #1a1a1e; }
/* Wellen: alle auf gleichen Hintergrund */
.wave-to-black { background: #1a1a1e ; }
/* Totenkopf-Aufzählungszeichen — helle Zettel (paper) */
.category-door-list li::before,
.paper-note ul li::before,
.callout ul li::before,
.step-card ul li::before { content: none; }
.category-door-list li,
.paper-note ul li,
.callout ul li { 
  padding-left: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='14' height='14'%3E%3Cellipse cx='10' cy='8.5' rx='6.5' ry='7' fill='%231a1a1a' stroke='%231a1a1a' stroke-width='0.5'/%3E%3Cellipse cx='7.2' cy='8' rx='2' ry='2.2' fill='white'/%3E%3Cellipse cx='12.8' cy='8' rx='2' ry='2.2' fill='white'/%3E%3Crect x='7.2' y='13.5' width='1.8' height='2.5' rx='0.4' fill='%231a1a1a'/%3E%3Crect x='10' y='13.5' width='1.8' height='2.5' rx='0.4' fill='%231a1a1a'/%3E%3Crect x='6.5' y='13' width='7' height='1.2' rx='0.4' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.15rem;
  background-size: 14px 14px;
}
/* Totenkopf — dunkle Bereiche (weiß/grau) */
.game-card ul li,
.step-text ul li,
article ul li { 
  padding-left: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='14' height='14'%3E%3Cellipse cx='10' cy='8.5' rx='6.5' ry='7' fill='%23bebebe' stroke='%23bebebe' stroke-width='0.5'/%3E%3Cellipse cx='7.2' cy='8' rx='2' ry='2.2' fill='%231a1a1e'/%3E%3Cellipse cx='12.8' cy='8' rx='2' ry='2.2' fill='%231a1a1e'/%3E%3Crect x='7.2' y='13.5' width='1.8' height='2.5' rx='0.4' fill='%23bebebe'/%3E%3Crect x='10' y='13.5' width='1.8' height='2.5' rx='0.4' fill='%23bebebe'/%3E%3Crect x='6.5' y='13' width='7' height='1.2' rx='0.4' fill='%23bebebe'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.2rem;
  background-size: 14px 14px;
  list-style: none;
}
/* Hover-Effekt: alle Buttons invertieren */
.btn-primary:hover { background: #fff ; color: #000 ; border-color: #000 ; }
.category-door-cta:hover { opacity: 0.6; }
/* Trust-Bar Kontrast auf grauem BG */
.trust-bar { border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Detektivclub auf grauem BG */
.detektivclub { border-top:none; }

/* ===== NAV + FOOTER (global, kanonisch) ===== */
.nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 0.6rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: #000000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-logo { height: 48px; transition: opacity 0.3s; }
.nav-logo:hover { opacity: 0.8; }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a { color: #bebebe; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.nav-links a:hover { color: #ffffff; }
.nav-links .shop-btn {
  color: #000000; background: #ffffff;
  border: 3px dashed #000000; padding: 0.35rem 1.1rem;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.3s;
}
.nav-links .shop-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: #ffffff; margin: 5px 0; }
.site-footer { background: #000000; }
.footer { padding: 3rem 2rem 1.5rem; }
.footer-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; }
.footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; margin-bottom: 0.8rem; margin-top: 1.2rem; }
.footer h4:first-child { margin-top: 0; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.4rem; }
.footer ul a { color: #888888; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
.footer ul a:hover { color: #ffffff; }
.footer-brand p { color: #888888; font-size: 0.85rem; line-height: 1.6; margin: 0.6rem 0 1rem; }
.footer-social { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #888888; border: 1px dashed rgba(255,255,255,0.2); transition: all 0.2s; }
.footer-social a:hover { color: #ffffff; border-color: #ffffff; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { max-width: 1060px; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid #1a1a1a; display: flex; justify-content: space-between; flex-wrap: wrap; color: #888888; font-size: 0.8rem; gap: 0.5rem; }
@media (max-width: 600px) {
  .nav { padding: 0.6rem 1.2rem; }
  .nav-logo { height: 40px; }
  .nav-links a { padding: 0.6rem 0; min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer { padding: 2.5rem 1.2rem 1.2rem; }
}


/* ===== FIXES & VERBESSERUNGEN ===== */
/* =================================================================
   FIXES & KONSISTENZ  (v3 — Landingpages an Startseite angeglichen)
   Gleiche Inhaltstypen = gleiches Aussehen. Landingpages nutzten
   eigene Container (.section ohne .section-inner, .prose, .feat-card)
   -> an das bewaehrte Zettel-/Layout-System angeglichen.
   Pink nur an Kauf-CTAs.
   ================================================================= */

:root {
  --skull-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cellipse cx='9' cy='8' rx='6.5' ry='7' fill='%231a1a1a'/%3E%3Cellipse cx='5' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='13' cy='11' rx='2' ry='1.2' fill='%231a1a1a'/%3E%3Cellipse cx='6.2' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cellipse cx='11.8' cy='7.5' rx='2.1' ry='2.3' fill='%23f5f1ea'/%3E%3Cpath d='M8 10.5 Q9 9.5 10 10.5 L9.5 12 Q9 12.5 8.5 12Z' fill='%23f5f1ea'/%3E%3Crect x='3.5' y='13.2' width='11' height='1.2' rx='0.6' fill='%231a1a1a'/%3E%3Crect x='4.2' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='7.5' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='10.8' y='14.4' width='2' height='3' rx='0.5' fill='%231a1a1a'/%3E%3Crect x='6.2' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3Crect x='9.5' y='14.4' width='1.3' height='3' fill='%23f5f1ea'/%3E%3C/svg%3E");
  --skull-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cellipse cx='9' cy='8' rx='6.5' ry='7' fill='%23bebebe'/%3E%3Cellipse cx='5' cy='11' rx='2' ry='1.2' fill='%23bebebe'/%3E%3Cellipse cx='13' cy='11' rx='2' ry='1.2' fill='%23bebebe'/%3E%3Cellipse cx='6.2' cy='7.5' rx='2.1' ry='2.3' fill='%231a1a1e'/%3E%3Cellipse cx='11.8' cy='7.5' rx='2.1' ry='2.3' fill='%231a1a1e'/%3E%3Cpath d='M8 10.5 Q9 9.5 10 10.5 L9.5 12 Q9 12.5 8.5 12Z' fill='%231a1a1e'/%3E%3Crect x='3.5' y='13.2' width='11' height='1.2' rx='0.6' fill='%23bebebe'/%3E%3Crect x='4.2' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='7.5' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='10.8' y='14.4' width='2' height='3' rx='0.5' fill='%23bebebe'/%3E%3Crect x='6.2' y='14.4' width='1.3' height='3' fill='%231a1a1e'/%3E%3Crect x='9.5' y='14.4' width='1.3' height='3' fill='%231a1a1e'/%3E%3C/svg%3E");
}

/* BREITE & ZENTRIERUNG — Landing-Container hatten keine Begrenzung */
.grid-prose { max-width: 760px; margin: 0 auto; text-align: center; }
.feats-wrap { max-width: 1000px; margin: 2.2rem auto 0; }
.steps-grid { max-width: 1060px; margin-left: auto; margin-right: auto; }
.prose { max-width: 720px; margin: 0 auto; }

/* SCHRITTE — Landing (.step) erbt Produkt-Zettel (.step-card) */
.step-card, .step {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); padding: 1.6rem 1.6rem 1.8rem;
  position: relative; box-shadow: 3px 4px 12px var(--paper-shadow);
  text-align: center;
}
.step-card:nth-child(1), .step:nth-child(1) { border-radius: 255px 8px 225px 8px/8px 225px 8px 255px; transform: rotate(-0.8deg); }
.step-card:nth-child(2), .step:nth-child(2) { border-radius: 8px 255px 8px 225px/225px 8px 255px 8px; transform: rotate(0.6deg); }
.step-card:nth-child(3), .step:nth-child(3) { border-radius: 200px 12px 180px 12px/12px 180px 12px 200px; transform: rotate(-0.4deg); }
.step-number, .step-num {
  font-family: var(--font-heady); font-size: 3.5rem; line-height: 1;
  color: rgba(0,0,0,0.08); position: absolute; top: 0.6rem; right: 1rem;
  letter-spacing: -0.02em; user-select: none;
}
.paper-pin, .step-pin {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.step .step-title, .step .step-text { position: relative; z-index: 1; }

/* FEATURE-KAERTCHEN — .feat-card war ungestylt (schwebte). Jetzt Papier-Zettel. */
.feat-card {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); padding: 1.6rem 1.5rem;
  box-shadow: 3px 4px 12px var(--paper-shadow);
  text-align: center; position: relative;
}
.feat-card:nth-child(odd) { transform: rotate(-0.6deg); }
.feat-card:nth-child(even) { transform: rotate(0.5deg); }
.feat-card h3, .feat-card h4, .feat-card .feat-title { color: var(--ink); font-family: var(--font-marmelade); margin-bottom: 0.4rem; }
.feat-card p { color: var(--ink-mid); font-size: 0.9rem; line-height: 1.6; }

/* FAQ — Landing (.faq-q/.faq-a) erbt Produkt-Accordion */
.faq-list { margin: 2rem auto 0; display: flex; flex-direction: column; gap: 0.8rem; max-width: 760px; }
.faq-item { background: var(--dark-mid); border: 1px solid var(--gray-dark); overflow: hidden; }
.faq-question, .faq-q {
  width: 100%; background: none; border: none; color: var(--white);
  font-family: var(--font-marmelade); font-size: 1.05rem;
  padding: 1.1rem 1.4rem; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; transition: background 0.2s;
}
.faq-question:hover, .faq-q:hover { background: rgba(255,255,255,0.04); }
.faq-question[aria-expanded="true"], .faq-q[aria-expanded="true"] { border-bottom: 1px solid var(--gray-dark); }
.faq-toggle {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--gray-dark); border-radius: 50%;
  position: relative; transition: transform 0.25s, background 0.2s;
}
.faq-toggle::before, .faq-toggle::after {
  content: ''; position: absolute; background: var(--gray);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 8px; height: 1.5px; }
.faq-toggle::after { width: 1.5px; height: 8px; transition: transform 0.25s; }
.faq-question[aria-expanded="true"] .faq-toggle::after,
.faq-q[aria-expanded="true"] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-answer, .faq-a { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
.faq-answer.open, .faq-a.open { max-height: 600px; padding: 1rem 1.4rem 1.2rem; }
.faq-answer p, .faq-a p { color: var(--gray); font-size: 0.88rem; line-height: 1.75; }
.faq-answer a, .faq-a a { color: var(--white); text-decoration: underline; }

/* SEKTIONS-LABEL/-LINIE — neutral, zentriert */
.s-label { color: var(--gray-mid) ; }
.s-rule  { background: var(--gray-dark) ; }

/* LANDING-HERO — entpinkt */
.site-hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: none; }
.hero-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 7rem 1.5rem 2rem; text-align: center; }
.hero-tag { display: inline-block; font-family: var(--font-madness); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--gray-dark); padding: 0.3rem 0.9rem; margin-bottom: 1.2rem; }
.hero-lead { color: var(--gray); font-size: 1.1rem; line-height: 1.75; max-width: 620px; margin: 1.2rem auto 2rem; }
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* BILDER — nicht beschneiden. Foto-Zettel: Bild OBEN (natuerliche Hoehe), Text UNTEN. */
.img-note { max-width: 420px; margin: 0 auto; background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 4px 12px var(--paper-shadow); overflow: hidden; border-radius: var(--paper-radius-alt); }
.img-note-img-wrap { width: 100%; overflow: hidden; }
.img-note-img-wrap img { width: 100%; height: auto; display: block; }
.img-note-body { padding: 1rem 1.2rem; text-align: center; }
.img-note-body, .img-note-body p, .img-note-body li { color: var(--ink-mid); }
.img-note-body h3 { color: var(--ink); font-family: var(--font-marmelade); margin-bottom: 0.3rem; }

/* Blog */
.article-body { max-width: 720px; }
.article-body p { font-size: 1.06rem; }
.article-img { margin: 2.6rem auto; max-width: 620px; }
.article-img img { border-radius: 4px; box-shadow: 2px 4px 16px rgba(0,0,0,0.35); }
.article-img.wide  { max-width: 100%; }
.article-img.small { max-width: 400px; }
.article-img figcaption { font-size: 0.78rem; }
@media (min-width: 720px) {
  .article-img.left  { float: left;  max-width: 320px; margin: 0.4rem 2rem 1.2rem 0; }
  .article-img.right { float: right; max-width: 320px; margin: 0.4rem 0 1.2rem 2rem; }
}
.article-body .drop-cap::first-letter { float: left; font-family: var(--font-heady); font-size: 3.6rem; line-height: 0.8; padding: 0.1rem 0.5rem 0 0; }

/* TOTENKOPF-BULLETS (dunkel auf Zetteln, hell auf dunklem Grund) */
.feat-card ul li, .img-note-body ul li {
  list-style: none !important; padding: 0.25rem 0 0.25rem 1.6rem !important;
  background: var(--skull-dark) no-repeat left 0.45em / 14px 16px ;
}
.prose ul li, .prose-block ul li, .hero-wrap ul li, .cta-box ul li,
.cta-inline ul li, .info-card ul li, .kontakt-item ul li, .body-p ul li {
  list-style: none !important; padding: 0.25rem 0 0.25rem 1.6rem !important;
  background: var(--skull-light) no-repeat left 0.45em / 14px 16px ;
}

/* VORBESTEHENDE WAISEN-KLASSEN — neutral; Pink nur am Kauf-Button */
.cta-box { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 2.6rem auto; max-width: 820px; background: var(--dark-mid); border: 1px solid var(--gray-dark); padding: 1.6rem 1.8rem; }
.cta-box-text { flex: 1; min-width: 240px; }
.cta-box-text p { color: var(--gray); line-height: 1.6; margin-top: 0.3rem; }
.cta-inline { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 2.2rem auto; max-width: 760px; border-left: 2px solid var(--gray-dark); background: rgba(255,255,255,0.03); padding: 1.1rem 1.3rem; }
.cta-inline-text { flex: 1; min-width: 220px; color: var(--gray); line-height: 1.55; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.info-card { background: var(--dark-mid); border: 1px solid var(--gray-dark); padding: 1.4rem; }
.kontakt-item { background: var(--dark-mid); border: 1px solid var(--gray-dark); padding: 1.3rem 1.5rem; }
.body-p { color: var(--gray); line-height: 1.8; margin: 0 auto 1rem; max-width: 720px; }
.prose-block { color: var(--gray); line-height: 1.8; max-width: 720px; margin: 0 auto; }
.prose-block p { margin-bottom: 1rem; }
.footer-foerder { gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.footer-foerder img { max-height: 46px; width: auto; opacity: 0.7; }
.victim-card { position: relative; }
.bg-dark { background: #141418; }
.history-note { background: rgba(255,255,255,0.03); border-left: 2px solid var(--gray-dark); padding: 1rem 1.3rem; margin: 1.8rem auto; max-width: 720px; font-style: italic; color: var(--gray); }
.update-date { color: var(--gray-mid); font-size: 0.82rem; }
.t-c { transform: rotate(0deg); }
.t-l { transform: rotate(-4deg); }
.t-r { transform: rotate(4deg); }
.f-pin, .i-pin, .c-pin { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* -----------------------------------------------------------------
   PIN-GRAFIKEN global begrenzen — verhindert Riesen-Pins überall,
   egal ob die Seite eine Größe gesetzt hat oder nicht.
   ----------------------------------------------------------------- */
img[src*="/img/ui/pin"] { max-width: 32px !important; height: auto !important; }

/* Vergleichs-Grids (Listen-Vergleich) nebeneinander statt untereinander */
.grid-2 { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; align-items: start; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr !important; } }

/* -----------------------------------------------------------------
   ZETTEL-CTAs auf hellem Papier: Hover NICHT zu Weiß invertieren
   (sonst verschwindet der Button auf dem hellen Grund). Statt dessen
   dunkel gefüllt bleiben — sichtbar auf Papier UND auf dunklem Grund.
   Vereinheitlicht alle CTAs, die auf einem Zettel sitzen.
   ----------------------------------------------------------------- */
.category-door-cta:hover,
.paper-note a:hover,
.category-door .btn-primary:hover, .category-door .btn-ghost:hover,
.step-card .btn-primary:hover, .step-card .btn-ghost:hover,
.img-note-body a:hover {
  background: transparent ;   /* kein weißer/gefüllter Kasten auf hellem Grund */
  color: var(--pink) ;         /* Hover-Akzent sichtbar auf Papier */
  border-color: var(--pink) ;
  opacity: 1 ;
}


:root {
  --shadow-zettel: 3px 5px 14px rgba(0,0,0,0.40);
  --zettel-dark: #33333c; --zettel-black: #111114;
  --pr-alt: 15px 225px 15px 255px/225px 15px 255px 15px;
  --pink: var(--game, #f5f1ea);
}
/* ================================================================
   MORTY'S MYSTERIES — SYSTEM (sauber, ohne !important)
   Encodiert die gemeinsam GEPRUEFTEN Entscheidungen. Diese Schicht
   ist die Quelle der Wahrheit fuer Aussehen; Struktur/Layout stehen
   darueber im Bestand. Kein !important noetig, da die alten
   widerspruechlichen Appearance-Regeln entfernt wurden.
   ================================================================ */

/* ---- THEME pro Spiel (geprueft, a11y-verifiziert) ---- */
.theme-schiffbruch     { --game:#005AA8; --game-ink:#ffffff; --game-akzent:#5BA9E8; --game-akzent-ink:#1a1a1a; --game-on-light:#005AA8; }
.theme-wikinger        { --game:#174A5D; --game-ink:#ffffff; --game-akzent:#63A6BD; --game-akzent-ink:#1a1a1a; --game-on-light:#174A5D; }
.theme-wandermenagerie { --game:#760C2B; --game-ink:#ffffff; --game-akzent:#C7869C; --game-akzent-ink:#1a1a1a; --game-on-light:#760C2B; }
.theme-zombie          { --game:#83C829; --game-ink:#1a1a1a; --game-akzent:#A8E04E; --game-akzent-ink:#1a1a1a; --game-on-light:#3A6B0F; }
.theme-samurai         { --game:#5E146E; --game-ink:#ffffff; --game-akzent:#B072CE; --game-akzent-ink:#1a1a1a; --game-on-light:#5E146E; }
.theme-neutral         { --game:#f5f1ea; --game-ink:#1a1a1a; --game-akzent:#ededed; --game-akzent-ink:#1a1a1a; --game-on-light:#3a3a3a; }

/* ---- BUTTONS (gefuellt Spielfarbe / Akzent, Hover invertiert) ---- */
.btn-buy, .btn-primary, .game-card-buy {
  background: var(--game); color: var(--game-ink); border: 3px dashed var(--game-ink);
}
.btn-buy:hover, .btn-primary:hover, .game-card-buy:hover {
  background: var(--game-akzent); color: var(--game-akzent-ink); border-color: var(--game-akzent-ink);
}
.btn-secondary, .btn-secondary-buy {
  background: var(--game-akzent); color: var(--game-akzent-ink); border: 3px dashed var(--game-akzent-ink);
}
.btn-secondary:hover, .btn-secondary-buy:hover {
  background: var(--game); color: var(--game-ink); border-color: var(--game-ink);
}
/* Tuer-Button: schwarz, voller weisser Strichrand */
.category-door-cta { background:#000; color:#fff; border:2px dashed #fff; }
.category-door-cta:hover { background:#fff; color:#000; border:2px dashed #000; }

/* Geometrie der Kachel-Buttons (game-card-buy) — systemisch, wie zuvor */
.game-card-buy {
  display: inline-flex; align-items: center; margin-top: 0.8rem;
  padding: 0.5rem 1.2rem; font-family: var(--font-heady); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none; line-height: 1.2; transition: all 0.22s;
}


/* ---- AKZENTE auf dunklem Seitengrund ---- */
[class*="theme-"] .section-label, [class*="theme-"] .s-label { color: var(--game-akzent); }
[class*="theme-"] .section-divider, [class*="theme-"] .s-rule { background: var(--game-akzent); }
[class*="theme-"] .product-kategorie { color: var(--game-akzent); border-color: var(--game-akzent); }
[class*="theme-"] .buy-option.featured { border-color: var(--game-akzent); }
[class*="theme-"] .pg-thumb.is-active { border-color: var(--game-akzent); }
[class*="theme-"] .pg-main:focus-visible { outline-color: var(--game-akzent); }
[class*="theme-"] .faq-question[aria-expanded="true"] { border-bottom-color: var(--game-akzent); }
/* Werte auf hellen Zetteln -> tiefe Spielfarbe */
[class*="theme-"] .info-zettel .info-value { color: var(--game-on-light); }

/* ---- ZETTEL-BASIS hell ---- */
.paper-note, .info-zettel, .suspect-label {
  background: var(--paper); border: 3px solid var(--ink); text-align: center;
  border-radius: var(--pr); box-shadow: var(--shadow-zettel);
}
.info-zettel:nth-of-type(even), .suspect-card:nth-of-type(even) .suspect-label { border-radius: var(--pr-alt); }
/* Listen in Zetteln linksbuendig, Gruppe mittig */
.paper-note ul, .paper-note ol, .dark-note ul, .dark-note ol, .cta-zettel ul, .cta-zettel ol {
  text-align: left; display: table; margin: 0.6rem auto 0;
}

/* ---- ZETTEL dunkel (grau) ---- */
.testimonial-card, .review-card, .feature-item, .info-card, .history-note, .dark-note {
  background: var(--zettel-dark); border: 2px solid rgba(255,255,255,0.16);
  border-radius: var(--pr); box-shadow: 3px 5px 16px rgba(0,0,0,0.50); color: #ededed;
}
.review-card:nth-of-type(even), .testimonial-card:nth-of-type(even), .feature-item:nth-of-type(even) { border-radius: var(--pr-alt); }
.review-card, .testimonial-card { padding: 1.7rem 1.6rem 1.4rem; }
.review-text, .t-text, .feature-body, .cta-zettel p { color: #ededed; }
.review-author, .t-author { color: #b8b8b8; }
.review-text, .t-text, .review-author, .t-author { font-family: var(--font-madness); }
/* Sterne weiss + weicher Glow */
.review-stars, .t-stars { color: #ffffff; text-shadow: 0 0 7px rgba(255,255,255,0.65), 0 0 2px rgba(255,255,255,0.9); }

/* ---- CTA-Zettel: schwarz (Abwechslung zu den grauen) ---- */
.cta-zettel { text-align: center; background: var(--zettel-black); border: 2px solid rgba(255,255,255,0.14); border-radius: var(--pr); box-shadow: 3px 5px 18px rgba(0,0,0,0.6); color: #ededed; }

/* ---- Empfehlungskarten: 2. Sub (Fliesstext) lesbar in Madness ---- */
.category-door-sub + .category-door-sub { font-family: var(--font-madness); }
/* Tuer-Bild-Slot: festes Seitenverhaeltnis fuer sauberen Zuschnitt */
.category-door-img { aspect-ratio: 16 / 9; height: auto; }

/* ---- FOTOS: Regel = Rahmen (Polaroid) + Pin ---- */
.pg-mainpin { display: none; }
.photo { position: relative; display: inline-block; background: #f8f6f0;
  padding: 0.6rem 0.6rem 1.6rem; border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 3px 5px 14px rgba(0,0,0,0.45); }
.photo img { display: block; width: 100%; height: auto; }
.photo::before { content: ""; position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%); width: 26px; height: 30px;
  background: url("/img/ui/pin1.webp") center/contain no-repeat; }
.photo--framed { background: none; border: none; padding: 0; box-shadow: none; }

/* Kleine Feature-Labels (Heady, Grossbuchstaben) */
.feature-tag { font-family: var(--font-heady); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; }

/* ================= MONOCHROME BUTTONS (Nicht-Spiel-Seiten) =========
   Zwei Typen, invertieren beim Hover. Hover nutzt nahe-weiss/nahe-schwarz,
   damit es vor dem dunklen Seiten-BG sichtbar bleibt.
   Regel: dunkler Grund -> WEISS, heller Grund (Papier-Zettel) -> SCHWARZ.
==================================================================== */
.btn-white { background:#ffffff; color:#1a1a1a; border:3px dashed #1a1a1a; }
.btn-white:hover { background:#2a2a2a; color:#ffffff; border-color:#ffffff; }
.btn-black { background:#111114; color:#ffffff; border:3px dashed #ffffff; }
.btn-black:hover { background:#f0f0f0; color:#1a1a1a; border-color:#1a1a1a; }

/* Automatische Zuordnung auf Neutralseiten: dunkler Seitengrund ->
   Primaer weiss, Sekundaer schwarz (Spielfarben-Buttons bleiben unberuehrt) */
.theme-neutral .btn-buy, .theme-neutral .btn-primary { background:#ffffff; color:#1a1a1a; border:3px dashed #1a1a1a; }
.theme-neutral .btn-buy:hover, .theme-neutral .btn-primary:hover { background:#2a2a2a; color:#ffffff; border-color:#ffffff; }
.theme-neutral .btn-secondary, .theme-neutral .btn-secondary-buy { background:#111114; color:#ffffff; border:3px dashed #ffffff; }
.theme-neutral .btn-secondary:hover, .theme-neutral .btn-secondary-buy:hover { background:#f0f0f0; color:#1a1a1a; border-color:#1a1a1a; }

/* Auf hellen Papier-Zetteln umgekehrt: Primaer schwarz, Sekundaer weiss */
.theme-neutral .paper-note .btn-buy, .theme-neutral .paper-note .btn-primary { background:#111114; color:#ffffff; border:3px dashed #ffffff; }
.theme-neutral .paper-note .btn-buy:hover, .theme-neutral .paper-note .btn-primary:hover { background:#f0f0f0; color:#1a1a1a; border-color:#1a1a1a; }
.theme-neutral .paper-note .btn-secondary { background:#ffffff; color:#1a1a1a; border:3px dashed #1a1a1a; }
.theme-neutral .paper-note .btn-secondary:hover { background:#2a2a2a; color:#ffffff; border-color:#ffffff; }

/* ================= BUTTON-GEOMETRIE (gemeinsam, alle Buttons) =======
   EINE Basis fuer Form/Font/Ausrichtung -> nie wieder mal uppercase,
   mal unterstrichen, mal winzig. Farben kommen aus den Typ-Regeln oben.
==================================================================== */
.btn-buy, .btn-primary, .btn-secondary, .btn-secondary-buy, .btn-white, .btn-black,
.game-card-buy, .category-door-cta, .dc-form button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heady); text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none; line-height: 1.2; cursor: pointer; transition: all 0.22s;
}
/* Standard-Groesse der Haupt-Buttons (Kachel/Tuer behalten ihre eigene) */
.btn-buy, .btn-primary, .btn-secondary, .btn-secondary-buy, .btn-white, .btn-black, .dc-form button {
  padding: 0.8rem 1.9rem; font-size: 0.82rem;
}
/* Newsletter-Button: weiss (dunkler Grund), invertiert beim Hover */
.dc-form button { background:#ffffff; color:#1a1a1a; border:3px dashed #1a1a1a; }
.dc-form button:hover { background:#2a2a2a; color:#ffffff; border-color:#ffffff; }


/* ── game-badge (Coming-Soon-Overlay auf Cover; Farbe via theme-*-Klasse) ── */
.game-badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  display: inline-block;
  font-family: var(--font-madness);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  background: var(--game);
  color: var(--game-ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.28);
  transform: rotate(2.5deg);
}


/* ── Pinnwand: automatisch durchlaufendes Foto-Band (unordentliche Pinnwand) ── */
.pinboard {
  overflow: hidden;
  padding: 2.5rem 0 3rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.pinboard-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: pinboard-scroll 55s linear infinite;
}
.pinboard:hover .pinboard-track { animation-play-state: paused; }
@keyframes pinboard-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pinboard-item {
  position: relative;
  flex: 0 0 auto;
  margin: 0 -8px;
  padding: 9px 9px 13px;
  background: #f7f3ec;
  box-shadow: 3px 6px 15px rgba(0,0,0,0.45);
}
.pinboard-item img {
  display: block;
  height: 155px;
  width: auto;
  max-width: 260px;
  object-fit: cover;
}
.pinboard-pin {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
}
@media (prefers-reduced-motion: reduce) {
  .pinboard-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
}



/* ═══ MOBILE-NAV KONSOLIDIERT — am Ende platziert, damit sie gegen die verstreuten
   Alt-Regeln gewinnt (gleiche Spezifitaet -> spaetere Position siegt, ohne !important) ═══ */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* backdrop-filter erzeugt Bezugsrahmen fuer fixed-Kinder -> Overlay bricht. Auf Mobile aus. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    background: #000000;
    overflow-y: auto;
    padding: 1rem 0 2rem;
    align-items: stretch;
    z-index: 1000;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { height: auto; flex-direction: column; align-items: stretch; }
  .nav-dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.03);
  }
  .nav-dropdown.mobile-open { display: block; }
}



/* ═══════════════ BLOG-ARTIKEL (zentral, aus Tonic-Referenz gehoben) ═══════════════ */
/* --gray im Artikelkontext etwas dunkler als global (#bebebe statt #ededed) */
.article-hero, .article-body, .breadcrumb, .callout, .steps-col, .cta-inline, .article-nav, .recipe-meta, .recipe-figure { --gray: #bebebe; }

.breadcrumb { padding: 5.5rem 2rem 0; max-width: 780px; margin: 0 auto; }
.breadcrumb ol { display: flex; gap: 0.5rem; list-style: none; flex-wrap: wrap; }
.breadcrumb li { font-size: 0.75rem; color: var(--gray-mid); }
.breadcrumb a { color: var(--gray-mid); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--white); }
.sep { color: var(--gray-dark); }

/* ── ARTICLE HERO ─────────────────────────────────────────────── */
.article-hero { background: var(--black); padding: 2.5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; }
.article-hero::before { content:''; position:absolute; inset:0; background:var(--hero-img,none) center/cover; opacity:0.16; pointer-events:none; }
.article-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.a-tag { display: inline-block; font-family: var(--font-madness); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-mid); border: 1px solid var(--gray-dark); padding: 0.2rem 0.8rem; margin-bottom: 1rem; }
.a-title { font-family: var(--font-heady); font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; margin-bottom: 0.5rem; }
.a-sub { font-family: var(--font-marmelade); font-size: 1.15rem; color: var(--gray); margin-bottom: 1rem; }
.a-meta { font-size: 0.78rem; color: var(--gray-mid); margin-bottom: 1.5rem; }
.a-lead { color: var(--gray); font-size: 1.05rem; line-height: 1.85; }

/* ── REZEPT-META-CHIPS ────────────────────────────────────────── */
.recipe-meta { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.recipe-meta span { font-family: var(--font-madness); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-mid); border: 1px dashed var(--gray-dark); padding: 0.25rem 0.8rem; }

/* ── ARTICLE BODY ─────────────────────────────────────────────── */
.article-body { max-width: 780px; margin: 0 auto; padding: 3rem 2rem 4rem; }
.article-body h2 { font-family: var(--font-heady); font-size: clamp(1.3rem, 3vw, 1.8rem); text-transform: uppercase; letter-spacing: 0.04em; margin: 3rem 0 1rem; line-height: 1.2; }
.article-body h3 { font-family: var(--font-marmelade); font-size: 1.2rem; color: var(--white); margin: 2rem 0 0.6rem; }
.article-body p { color: var(--gray); line-height: 1.85; margin-bottom: 1.1rem; }
.article-body p strong { color: var(--white); }
.article-body a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.article-body .drop-cap::first-letter { font-family: var(--font-heady); font-size: 3.5rem; float: left; line-height: 0.8; margin-right: 0.1em; color: var(--white); }

/* ── FEATURED FIGURE ──────────────────────────────────────────── */
.recipe-figure { max-width: 600px; margin: 2.6rem auto; position: relative; background: #fff; padding: 10px 10px 12px; box-shadow: 3px 6px 18px rgba(0,0,0,0.55); transform: rotate(-1.4deg); }
.recipe-figure img { width: 100%; height: auto; display: block; }
.recipe-figure figcaption { font-family: var(--font-marmelade); font-size: 0.85rem; color: var(--gray-mid); text-align: center; margin-top: 0.6rem; }

/* ── CALLOUT / ZUTATEN-ZETTEL ─────────────────────────────────── */
.callout { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--pr); box-shadow: 4px 5px 14px var(--paper-shadow); padding: 1.6rem 1.8rem; margin: 2.5rem 0; position: relative; transform: rotate(-0.5deg); }
.callout.alt { border-radius: var(--pr-alt); transform: rotate(0.4deg); }
.callout .pin { position: absolute; top: -14px; right: 20px; width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.callout h4 { font-family: var(--font-marmelade); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.6rem; }
.callout .yield { font-family: var(--font-madness); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mid); display: block; margin-bottom: 0.8rem; }
.callout p, .callout li { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7; }
.callout ul { list-style: none; }
.callout ul li { padding: 0.3rem 0 0.3rem 1.1rem; position: relative; border-bottom: 1px dashed rgba(0,0,0,0.1); }
.callout ul li:last-child { border-bottom: none; }
.callout ul li::before { content: '—'; position: absolute; left: 0; color: var(--ink-mid); }

/* ── STEPS ────────────────────────────────────────────────────── */
.steps-col { display: flex; flex-direction: column; gap: 0; position: relative; margin-top: 2rem; }
.steps-col::before { content: ''; position: absolute; left: 27px; top: 48px; bottom: 48px; width: 1px; background: repeating-linear-gradient(180deg, var(--gray-dark) 0, var(--gray-dark) 6px, transparent 6px, transparent 12px); }
.step-row { display: flex; gap: 1.8rem; align-items: flex-start; padding: 1.2rem 0; position: relative; z-index: 1; }
.step-num { width: 56px; height: 56px; flex-shrink: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heady); font-size: 1.3rem; color: var(--ink); box-shadow: 3px 3px 10px var(--paper-shadow); }
.step-body { flex: 1; padding-top: 0.6rem; }
.step-body h4 { font-family: var(--font-marmelade); font-size: 1.1rem; color: var(--white); margin-bottom: 0.3rem; }
.step-body p { color: var(--gray); font-size: 0.9rem; line-height: 1.75; margin: 0; }

/* ── CTA INLINE ───────────────────────────────────────────────── */
.cta-inline { background: var(--dark-mid); border: 1px solid var(--gray-dark); padding: 2rem; margin: 3.5rem 0 1rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-inline-text strong { color: var(--white); font-family: var(--font-marmelade); font-size: 1.15rem; display: block; margin-bottom: 0.3rem; }
.cta-inline-text p { color: var(--gray); font-size: 0.9rem; flex: 1; margin: 0; }
.btn-pink { background: #1a1a1a; color: #fff; border: 2px dashed #1a1a1a; padding: 0.7rem 1.6rem; font-family: var(--font-madness); font-size: 0.82rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: background 0.25s; white-space: nowrap; }
.btn-pink:hover { background: #fff; color: #1a1a1a; border-color: #1a1a1a; }

/* ── ARTICLE NAV ──────────────────────────────────────────────── */
.article-nav { max-width: 780px; margin: 0 auto; padding: 0 2rem 4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--gray-dark); padding-top: 2rem; }
.article-nav a { color: var(--gray-mid); font-size: 0.82rem; text-decoration: none; transition: color 0.3s; }
.article-nav a:hover { color: var(--white); }


@media (max-width: 640px) {
  .article-body { padding: 3rem 1.2rem 4rem; }
}
/* ═══════════════ /BLOG-ARTIKEL ═══════════════ */

/* ═══════════════ BLOG-FEINSCHLIFF: an Seiten-Konventionen angeglichen ═══════════════ */
/* Fließtext weiß statt grau (Kontrast-/Barrierefreiheits-Konvention wie body) */
.article-body p, .a-lead, .step-body p, .cta-inline-text p, .cta-inline-text strong { color: var(--white); }
/* Überschriften zentriert – wie .section-title seitenübergreifend */
.article-body h2 { text-align: center; }
/* Marmelade-Bildunterschrift lesbar groß (Marmelade braucht +Größe) */
.recipe-figure figcaption { font-size: 0.95rem; color: var(--ink-mid); margin-top: 0.4rem; }
/* Hero: Platz unter fixem Header + volle Höhe wie andere Seiten */
.article-hero { padding: 6.5rem 2rem 4rem; }
/* gestrichelte Steps-Linie raus */
.steps-col::before { display: none !important; }
/* Vorschau-Foto in die Zettel-Form clippen (obere Ecken wie der Zettel) */

/* zentrierter Pin – Klasse war unvollständig */
.card-pin-c { left: 50%; transform: translateX(-50%); }
/* CTA-Kasten: schwarze Zettel-Optik statt gerader Fremdkörper-Kasten */
.cta-inline { background: #111114; border: 3px solid rgba(255,255,255,0.12); border-radius: var(--pr); box-shadow: 6px 6px 0 rgba(0,0,0,0.4); transform: rotate(-0.5deg); }
/* CTA-Button: Marken-Button (weiß gestrichelt) statt Wildwuchs */
.cta-inline .btn-pink { background: transparent !important; color: var(--white) !important; border: 2px dashed var(--white) !important; text-transform: uppercase; letter-spacing: 0.04em; }
.cta-inline .btn-pink:hover { background: var(--white) !important; color: #111114 !important; }
/* ═══════════════ /BLOG-FEINSCHLIFF ═══════════════ */


/* ═══ BLOG-KORREKTUREN ═══ */
/* Helle Zettel-Boxen behalten dunklen Text (Weiß-Regel nahm zu breit) */
.callout p, .callout li, .paper-note p, .paper-note li { color: var(--ink-mid); }
/* Transparente/gerahmte Bilder (Polaroids) ohne zusätzlichen Kasten */
.recipe-figure.transparent img { border: none; box-shadow: none; }
/* ═══ /BLOG-KORREKTUREN ═══ */

/* Vorschau-Zettel-Pin: etablierte CSS-Methode wie .photo::before (kein <img>-Wildwuchs) */
.blog-card::before { content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:28px; height:32px; z-index:3; background:url("/img/ui/pin1.webp") center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }

/* ═══════════════ BLOG-BAUSTEIN: Vergleichs-Tabelle (Marken-Look, dunkler Body) ═══════════════ */
.a-table-wrap { margin: 2.2rem 0; overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 460px; }
.a-table thead th { font-family: var(--font-heady); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; color: var(--white); text-align: left; padding: 0.75rem 0.9rem; border-bottom: 2px dashed var(--gray-dark); }
.a-table td { color: var(--gray); padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.09); line-height: 1.55; }
.a-table tbody tr:last-child td { border-bottom: none; }
.a-table td:first-child { color: var(--white); font-family: var(--font-marmelade); font-size: 1.05rem; }

/* ═══════════════ BLOG-BAUSTEIN: Video-Rahmen für hochkant-Shorts (9:16) ═══════════════ */
.a-video { max-width: 330px; margin: 2.6rem auto; }
.a-video-frame { position: relative; aspect-ratio: 9 / 16; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 4px 5px 18px rgba(0,0,0,0.55); background: #000; }
.a-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.a-video figcaption { font-family: var(--font-marmelade); font-size: 1.1rem; color: var(--gray); text-align: center; margin-top: 0.8rem; line-height: 1.5; }
/* ═══════════════ /BLOG-BAUSTEINE ═══════════════ */

/* ═══ BLOG-BAUSTEIN: Foto-Collage (hingepinnt, gedreht, gemischte Größen) ═══ */
.photo-collage { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.7rem 1.1rem; max-width: 600px; margin: 2.6rem auto; align-items: start; }
.pc-item { position: relative; background: #fff; padding: 8px 8px 10px; box-shadow: 3px 6px 18px rgba(0,0,0,0.55); }
.pc-item img { display: block; width: 100%; height: auto; }
.pc-item figcaption { font-family: var(--font-marmelade); font-size: 0.95rem; color: var(--ink-mid); text-align: center; margin-top: 0.4rem; line-height: 1.4; }
.pc-item::before { content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 28px; z-index: 3; background: url("/img/ui/pin1.webp") center/contain no-repeat; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.pc-item.lg { grid-row: 1 / span 2; align-self: center; transform: rotate(-1.6deg); }
.pc-item.sm { transform: rotate(1.9deg); }
.pc-item.sm:last-of-type { transform: rotate(-1.3deg); margin-top: -1.2rem; z-index: 1; }
/* ═══ /BLOG ═══ */

/* Blog-Content etwas breiter, näher an Startseite */
.article-body { max-width: 900px; }

/* Blog-Card: Clip-Container trägt Zettel-Optik + Form, schneidet das Foto exakt mit (Pin bleibt außen) */
.blog-card-clip { display:block; background:var(--paper,#f5f1ea); border:3px solid var(--ink,#1a1a1a); box-shadow:4px 5px 0 rgba(0,0,0,0.18); overflow:hidden; border-radius:255px 15px 225px 15px/15px 225px 15px 255px; }
.blog-card:nth-child(even) .blog-card-clip { border-radius:15px 225px 15px 255px/225px 15px 255px 15px; }
.blog-card-media { display:block; }
.blog-card-media .blog-card-img { border-radius:0; }

/* Blog-Einzelfoto: hingepinnt wie die Collage (global) */
.recipe-figure::before { content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:24px; height:28px; z-index:3; background:url("/img/ui/pin1.webp") center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.recipe-figure.transparent { background:none; box-shadow:none; transform:none; padding:0; }
.recipe-figure.transparent::before { display:none; }


/* ============================================================
   CAST – animierte Figuren (additiver Block, siehe /js/morty-cast.js)
   Einbau pro Seite: <div class="cast" data-cast="shroom" data-side="left"></div>
   ============================================================ */
.cast-stage { position: relative; }
.cast {
  position: absolute; bottom: 0; z-index: 3;
  --cast-h: 240px; --cast-x: 4%;
  user-select: none; -webkit-user-select: none;
}
.cast[data-side="left"]  { left: var(--cast-x); }
.cast[data-side="right"] { right: var(--cast-x); }
.cast-walker { position: relative; transition: transform 1.2s cubic-bezier(.45,0,.2,1); will-change: transform; }
.cast-figure {
  display: block; height: var(--cast-h); width: auto; cursor: pointer;
  filter: drop-shadow(3px 6px 10px rgba(0,0,0,0.55));
}
/* Sprechblase: handgemalte Blase (bubble.webp), gespiegelt für Figuren am rechten Rand */
.cast-bubble {
  position: absolute; bottom: calc(var(--cast-h) * 0.78); width: 214px; min-height: 166px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 22px 48px;
  color: var(--ink); font-family: var(--font-madness); font-size: 0.86rem; line-height: 1.35; text-align: center;
  opacity: 0; transform: translateY(8px) scale(0.95);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.cast-bubble::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('/img/cast/bubble.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.45));
}
.cast-bubble span { position: relative; z-index: 1; }
.cast-bubble.show { opacity: 1; transform: none; }
.cast[data-side="left"]  .cast-bubble { left: 62%; }
.cast[data-side="right"] .cast-bubble { right: 62%; }
.cast[data-side="right"] .cast-bubble::before { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .cast-walker, .cast-bubble { transition: none; }
}
/* Auf schmalen Viewports gibt es keinen Platz neben dem Inhalt */
@media (max-width: 959px) { .cast { display: none; } }
@media (max-width: 1199px) { .cast[data-min="1200"] { display: none; } }

/* ============================================================
   MOBILE-FIX Spielseiten (17.09.2026): Grid-Spalte wuchs auf 485px,
   weil Kinder (Thumbnails, Meta-Zeile, Kaufoptionen) eine Mindestbreite
   erzwangen -> Kaufen-Button war auf dem Handy abgeschnitten.
   ============================================================ */
@media (max-width: 900px) {
  .product-hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .product-hero-inner > * { min-width: 0 !important; max-width: 100% !important; }
  .pg-main { max-width: 100% !important; }
  .pg-thumbs { flex-wrap: wrap !important; }
  .product-meta-row, .buy-options, .buy-option { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; }
  .buy-option-price small { white-space: normal !important; }
  .buy-option-foot { flex-wrap: wrap !important; }
  .buy-option > * { min-width: 0 !important; max-width: 100% !important; }
}

/* Mobile-Feinschliff 17.09.2026 */
@media (max-width: 640px) {
  .a-table { min-width: 0 !important; font-size: 0.82rem !important; }
  .a-table thead th, .a-table td { padding: 0.55rem 0.5rem !important; }
  .a-table td:first-child { font-size: 0.9rem !important; }
  .page-section a, .article-body a, .prose a, .section-inner p a { overflow-wrap: anywhere; }
}

/* ============================================================
   ZETTEL-BILDER (17.09.2026): Bilder oben in Zetteln folgen jetzt der
   handgerissenen Zettelform (wie auf der Blog-Übersicht), statt mit
   rechten Ecken auf dem Zettel zu liegen. Radius = Zettelradius minus Rand.
   ============================================================ */
.category-door:nth-child(1) .category-door-img { border-radius: 252px 12px 0 0 / 12px 222px 0 0; }
.category-door:nth-child(2) .category-door-img { border-radius: 12px 252px 0 0 / 222px 12px 0 0; }
.feature-item .feature-img { overflow: hidden; }
.feature-item:nth-child(1) .feature-img { border-radius: 253px 6px 0 0 / 6px 223px 0 0; }
.feature-item:nth-child(2) .feature-img { border-radius: 6px 253px 0 0 / 223px 6px 0 0; }
.feature-item:nth-child(3) .feature-img { border-radius: 198px 8px 0 0 / 8px 178px 0 0; }
.feature-item:nth-child(4) .feature-img { border-radius: 8px 198px 0 0 / 178px 8px 0 0; }
.feature-item:nth-child(5) .feature-img { border-radius: 218px 4px 0 0 / 10px 238px 0 0; }
.feature-item:nth-child(6) .feature-img { border-radius: 4px 218px 0 0 / 238px 10px 0 0; }
@media (max-width: 600px) {
  .category-door:nth-child(n) .category-door-img { border-radius: 6px 6px 0 0; }
}