/* =============================================================
   RAFU's Welt – Stylesheet
   1  Design-Tokens
   2  Reset & Basis
   3  Layout-Bausteine
   4  Buttons, Badges, Karten
   5  Header & Navigation
   6  Hero
   7  Mission
   8  Bücher
   9  Lesungen
   10 Teaser (Hörbuch & Musical)
   11 Über uns
   12 Shop
   13 Kontakt
   14 Footer
   15 Modal
   16 Unterseiten (Impressum, Datenschutz)
   17 Responsive
   18 Reduced Motion & Print
   ============================================================= */

/* ---------- 1  Design-Tokens ---------- */
:root {
  /* Markenfarben */
  --c-orange:       oklch(68% 0.17 42);
  --c-orange-deep:  oklch(55% 0.17 42);
  --c-orange-dark:  oklch(45% 0.17 42);
  --c-orange-line:  oklch(85% 0.10 42);
  --c-orange-pale:  oklch(88% 0.06 42);
  --c-orange-bg:    oklch(94% 0.06 42);

  --c-green:        oklch(58% 0.13 148);
  --c-green-mid:    oklch(78% 0.12 148);
  --c-green-bg:     oklch(93% 0.05 148);

  --c-blue:         oklch(68% 0.10 224);
  --c-blue-deep:    oklch(55% 0.12 224);
  --c-blue-ink:     oklch(30% 0.05 224);
  --c-blue-bg:      oklch(90% 0.07 224);

  --c-yellow:       oklch(78% 0.15 75);
  --c-yellow-mid:   oklch(88% 0.10 75);
  --c-yellow-soft:  oklch(90% 0.08 75);
  --c-yellow-ink:   oklch(45% 0.14 60);

  /* Flächen */
  --c-sand:         oklch(95% 0.025 75);
  --c-sand-light:   oklch(97% 0.015 75);
  --c-sand-soft:    oklch(94% 0.05 75);
  --c-sand-line:    oklch(90% 0.03 75);
  --c-sand-tint:    oklch(96% 0.02 75);
  --c-white:        #fff;

  /* Typo-Farben */
  --c-ink:          oklch(25% 0.02 50);
  --c-ink-strong:   oklch(28% 0.03 50);
  --c-ink-head:     oklch(30% 0.03 50);
  --c-ink-body:     oklch(40% 0.02 50);
  --c-ink-soft:     oklch(42% 0.02 50);
  --c-ink-muted:    oklch(45% 0.02 50);
  --c-ink-faint:    oklch(55% 0.02 50);

  /* Footer */
  --c-footer-bg:    oklch(30% 0.03 50);
  --c-footer-text:  oklch(90% 0.01 60);
  --c-footer-muted: oklch(78% 0.01 60);
  --c-footer-faint: oklch(70% 0.01 60);
  --c-footer-line:  oklch(40% 0.02 50);

  /* Schriften */
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:    'Fredoka', var(--font-body);
  --font-display: 'Baloo 2', var(--font-head);

  /* Maße */
  --wrap:        1300px;
  --wrap-narrow: 1200px;
  --gutter:      7%;
  --header-h:    76px;

  /* Radien */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  28px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Bewegung */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 2  Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--c-ink-head);
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--c-orange-deep);
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: var(--c-orange-dark); }

img, video { max-width: 100%; }

button { font: inherit; }

/* Das hidden-Attribut muss stärker sein als display:block/flex weiter unten */
[hidden] { display: none !important; }

::selection { background: var(--c-yellow-mid); }

:focus-visible {
  outline: 3px solid var(--c-orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarken nicht unter den Sticky-Header schieben */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--c-orange);
  color: var(--c-white);
  font-weight: 800;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--c-white); }

/* ---------- 3  Layout-Bausteine ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: 60px 100px; position: relative; overflow: hidden; }
.section--tight { padding-block: 50px 80px; }

.section-head {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800;
  margin-bottom: 16px;
}
.section-head p {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--c-ink-body);
}

/* dekorative Formen & Figuren */
.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.blob--sun {
  top: -40px; left: -40px;
  width: 180px; height: 180px;
  background: var(--c-yellow-mid);
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  transform: rotate(12deg);
}
.blob--sky {
  bottom: -60px; right: -30px;
  width: 220px; height: 220px;
  background: var(--c-blue-bg);
  border-radius: 45% 55% 50% 50% / 50% 55% 45% 50%;
}

.deco {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
}
.deco--remo-mission { top: 10px;  right: 6%;  width: 90px;  height: 100px; transform: rotate(8deg); }
.deco--giraffe-books{ top: 40px;  left: 2%;   width: 110px; height: 220px; transform: rotate(-6deg); opacity: .9; }
.deco--remo-about   { bottom: 20px; right: 3%; width: 130px; height: 140px; transform: rotate(-6deg) scaleX(-1); opacity: .9; }
.deco--giraffe-shop { top: 20px;  right: 2%;  width: 80px;  height: 170px; transform: rotate(5deg); opacity: .85; }
.deco--remo-footer  { bottom: 0;  left: 2%;   width: 90px;  height: 100px; opacity: .8; }

.grid {
  display: grid;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.grid--mission { grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.grid--books   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--authors { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--sets    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.grid--singles { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* ---------- 4  Buttons, Badges, Karten ---------- */
.btn {
  display: inline-block;
  padding: 16px 30px;
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .18s var(--ease-pop), box-shadow .18s, background .18s, border-color .18s;
}
.btn:active { transform: scale(.95); }

.btn--primary { background: var(--c-orange); color: var(--c-white); }
.btn--primary:hover {
  color: var(--c-white);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 20px oklch(55% 0.17 42 / .35);
}

.btn--ghost {
  background: var(--c-white);
  color: var(--c-ink-head);
  border: 3px solid var(--c-sand-line);
}
.btn--ghost:hover {
  color: var(--c-ink-head);
  transform: translateY(-3px) scale(1.04);
  border-color: var(--c-orange);
}

.btn--light { background: var(--c-white); color: var(--c-orange-deep); }
.btn--light:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px oklch(20% 0.02 50 / .25);
}
.btn--light:active { transform: scale(.93); }

.btn--blue {
  background: var(--c-blue-deep);
  color: var(--c-white);
  padding: 14px 28px;
  font-size: 16px;
}
.btn--blue:hover {
  color: var(--c-white);
  transform: scale(1.05);
  box-shadow: 0 8px 18px oklch(45% 0.12 224 / .4);
}

.btn--buy {
  margin-top: auto;
  width: 100%;
  padding: 14px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 16px;
}
.btn--buy:hover { transform: scale(1.05); box-shadow: 0 8px 18px oklch(55% 0.17 42 / .4); }
.btn--buy:active { transform: scale(.92); }

.btn--buy-sm { padding: 8px; font-size: 13px; }
.btn--buy-sm:hover { transform: scale(1.06); box-shadow: none; }

.btn--submit { width: 100%; padding: 15px; font-size: 16px; }
.btn--submit:hover { transform: scale(1.03); box-shadow: 0 8px 18px oklch(55% 0.17 42 / .4); }

/* kleiner Textlink im Buch-Card-Footer */
.link-pill {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--c-sand-tint);
  color: var(--c-orange-dark);
  font-weight: 800;
  font-size: 14px;
  transition: transform .15s, background .15s;
}
.link-pill:hover { background: var(--c-sand-soft); transform: scale(1.06); }
.link-pill:active { transform: scale(.94); }

.eyebrow {
  display: inline-block;
  width: fit-content;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--c-yellow-soft);
  color: var(--c-yellow-ink);
  font-weight: 800;
  font-size: 14px;
}

.badge {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: oklch(28% 0.05 60);
  font-weight: 800;
  font-size: 12px;
}

/* Grundkarte: farbiger Rahmen + versetzter Schatten, Neigung über --tilt */
.card {
  --accent: var(--c-orange);
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 3px solid var(--accent);
  border-radius: var(--r-xl);
  box-shadow: 7px 7px 0 var(--accent);
  transform: rotate(var(--tilt));
}

/* ---------- 5  Header & Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(97% 0.015 75 / .95);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--c-sand-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 5%;
}
.brand {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--c-orange-deep);
  white-space: nowrap;
}
.brand:hover { color: var(--c-orange-deep); }
.brand span { color: var(--c-green); }

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__link {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-weight: 700;
  font-size: 15px;
  transition: transform .15s, background .15s;
}
.nav__link:hover {
  color: var(--c-ink);
  background: var(--c-sand-soft);
  transform: translateY(-2px);
}
.nav__link:active { transform: translateY(0) scale(.95); }
.nav__cta {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-white);
  font-weight: 800;
  font-size: 15px;
  transition: transform .15s, box-shadow .15s;
}
.nav__cta:hover {
  color: var(--c-white);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 14px oklch(55% 0.17 42 / .4);
}
.nav__cta:active { transform: scale(.94); }

/* Sprachumschalter */
/* Aktiver Abschnitt – wird beim Scrollen von js/main.js gesetzt */
.nav__link[aria-current="page"] {
  background: var(--c-sand-soft);
  color: var(--c-orange-deep);
}
.nav__cta[aria-current="page"] {
  background: var(--c-orange-deep);
  box-shadow: 0 0 0 3px var(--c-orange-line);
}
.nav-mobile a[aria-current="page"] {
  background: oklch(92% 0.03 75);
  color: var(--c-orange-deep);
}
.nav-mobile .nav-mobile__cta[aria-current="page"] {
  background: var(--c-orange-deep);
  color: var(--c-white);
}

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: oklch(90% 0.02 60);
  font-weight: 800;
  font-size: 13px;
}
.lang span {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: oklch(60% 0.01 60);
}
.lang [aria-current="true"] {
  background: var(--c-white);
  color: var(--c-ink-head);
}

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid oklch(88% 0.03 60);
  border-radius: var(--r-sm);
  background: var(--c-white);
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.burger:hover { background: var(--c-sand-soft); }
.burger:active { transform: scale(.9); }
.burger span {
  width: 20px; height: 2.5px;
  background: var(--c-ink-head);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 5% 20px;
  border-top: 2px solid var(--c-sand-line);
}
.nav-mobile[data-open="true"] { display: flex; }
.nav-mobile a {
  padding: 14px 12px;
  border-radius: 14px;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 17px;
  transition: background .15s;
}
.nav-mobile a:hover { color: var(--c-ink); background: oklch(92% 0.03 75); }
.nav-mobile a:active { background: var(--c-sand-soft); }
.nav-mobile .nav-mobile__cta {
  margin-top: 6px;
  background: var(--c-orange);
  color: var(--c-white);
  font-weight: 800;
  text-align: center;
}
.nav-mobile .nav-mobile__cta:hover { color: var(--c-white); transform: scale(1.02); }

.header-mobile-tools {
  display: none;
  align-items: center;
  gap: 10px;
}

/* ---------- 6  Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  align-items: stretch;
  min-height: 560px;
}
.hero__media {
  position: relative;
  display: block;
}

/* Auszeichnungs-Siegel, sitzt an der Kante zwischen Bild und Text */
.hero__award {
  position: absolute;
  right: clamp(14px, 2.6vw, 32px);
  bottom: clamp(14px, 2.6vw, 32px);
  width: clamp(88px, 10vw, 134px);
  height: auto;
  aspect-ratio: 1;
  transform: rotate(-7deg);
  filter: drop-shadow(0 6px 16px oklch(20% 0.02 50 / .38));
}

.hero__img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 7%;
  background: var(--c-sand);
}
.hero__text .eyebrow { margin-bottom: 18px; }
.hero__text h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.08;
  font-weight: 800;
  margin-bottom: 18px;
}
.hero__text p {
  max-width: 480px;
  margin-bottom: 30px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-ink-body);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 7  Mission ---------- */
.mission { padding: 50px 0 80px; }
.mission__card {
  --accent: var(--c-yellow);
  --tilt: 0deg;
  padding: clamp(16px, 2vw, 26px) clamp(12px, 1.7vw, 22px);
  text-align: center;
  background: var(--c-white);
  border: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--accent);
  transform: rotate(var(--tilt));
}
.mission__dot {
  width: clamp(38px, 3.6vw, 52px);
  aspect-ratio: 1;
  margin: 0 auto clamp(10px, 1vw, 14px);
  border-radius: 50%;
  background: var(--accent);
}
.mission__card p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14.5px, 1.5vw, 18px);
  line-height: 1.3;
  color: var(--c-ink-strong);
}

/* ---------- 8  Bücher ---------- */
.books { background: var(--c-sand-soft); }
.book { padding: 22px; }
.book__figure { position: relative; margin: 0; }
.book__cover {
  width: 100%;
  height: 280px;
  object-fit: contain;
  border-radius: 20px;
  display: block;
}
.book__badge {
  position: absolute;
  top: 12px; right: 12px;
  transform: rotate(-6deg);
}
.book__award {
  position: absolute;
  top: -18px; right: -14px;
  width: 84px; height: 84px;
  transform: rotate(8deg);
  filter: drop-shadow(0 4px 12px oklch(20% 0.02 50 / .32));
}
.book__part {
  margin: 16px 0 4px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.book h3 {
  margin-bottom: 10px;
  font-size: 23px;
  font-weight: 700;
  color: var(--c-ink-strong);
}
.book__blurb {
  flex: 1;
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.book__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.book__price {
  font-weight: 800;
  font-size: 19px;
  color: var(--c-ink-head);
}

/* ---------- 9  Lesungen ---------- */
.lesungen {
  background: var(--c-orange);
  padding: 70px 0;
}
.lesungen__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  align-items: center;
}
.lesungen .badge { display: inline-block; margin-bottom: 16px; font-size: 13px; padding: 6px 16px; }
.lesungen h2 {
  margin-bottom: 16px;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: var(--c-white);
}
.lesungen p {
  max-width: 480px;
  margin-bottom: 26px;
  font-size: 17px;
  line-height: 1.6;
  color: oklch(96% 0.02 42);
}
.lesungen__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* ---------- 10  Teaser (Hörbuch & Musical) ---------- */
.teaser {
  --tilt: 0deg;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 32px 36px;
  background: var(--c-blue-bg);
  border: 3px dashed var(--c-blue);
  border-radius: var(--r-2xl);
  transform: rotate(var(--tilt));
}
.teaser__body { flex: 1; min-width: 220px; }
.teaser__title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--c-ink-strong);
}
.teaser__body p {
  margin-bottom: 10px;
  font-size: 15.5px;
  color: var(--c-ink-body);
}
.teaser__cover {
  width: 120px; height: 120px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}
.teaser__video {
  width: 280px; height: 160px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--c-ink-head);
  object-fit: cover;
}
.shops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  list-style: none;
  padding: 0;
}
.shops a {
  display: block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-blue-ink);
  font-weight: 700;
  font-size: 13px;
  transition: transform .15s, box-shadow .15s;
}
.shops a:hover {
  color: var(--c-blue-ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px oklch(30% 0.05 224 / .18);
}

.section--audio { padding: 70px 0 40px; overflow: visible; }
.section--musical { padding: 0 0 90px; overflow: visible; }

/* ---------- 11  Über uns ---------- */
.about { background: var(--c-green-bg); }
.author {
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border-color: var(--c-green-mid);
  box-shadow: 6px 6px 0 var(--c-green-mid);
}
.author__img {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border: 3px solid var(--c-green-mid);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.author__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--c-ink-strong);
}
.author__role {
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--c-green);
}
.author p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.about__story {
  max-width: 760px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: oklch(38% 0.02 50);
}

/* ---------- 12  Shop ---------- */
.shop { background: var(--c-orange-bg); padding-block: 60px 40px; }
.shop .section-head { margin-bottom: 40px; }

.shop-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.shop-divider__label {
  padding: 8px 22px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}
.shop-divider__line {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--c-orange-line);
}
.shop-divider--sub { margin-bottom: 22px; }
.shop-divider--sub .shop-divider__label {
  padding: 0;
  background: none;
  color: var(--c-ink-body);
  font-size: 17px;
  transform: none;
}
.shop-divider--sub .shop-divider__line { height: 2px; }

.grid--sets { margin: 28px 0 56px; }

/* Steht nur ein Set zur Wahl, soll es nicht über die ganze Breite laufen. */
.grid--sets:has(> .set:only-child) {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.set {
  padding: 24px;
  border-width: 4px;
  box-shadow: 8px 8px 0 var(--accent);
  transition: transform .2s;
}
.set:hover { transform: rotate(0deg) translateY(-6px); }
.set__badge {
  position: absolute;
  top: -14px; left: 22px;
  transform: rotate(-3deg);
  font-size: 13px;
  padding: 6px 16px;
}
.set__img {
  width: 100%;
  height: 230px;
  margin-top: 10px;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
}
.set__name {
  margin: 16px 0 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--c-ink-strong);
}
.set__desc {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--c-ink-soft);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.price {
  font-weight: 800;
  font-size: 23px;
  color: var(--c-orange-deep);
}
.price--old {
  font-size: 14px;
  color: var(--c-ink-faint);
  text-decoration: line-through;
}

.shop-item {
  --accent: var(--c-orange-pale);
  padding: 14px;
  border-width: 2px;
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform .18s, box-shadow .18s;
}
.shop-item:hover { transform: translateY(-4px); box-shadow: 6px 10px 0 var(--accent); }
.shop-item__img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: var(--r-sm);
  display: block;
}
.shop-item__name {
  margin: 10px 0 2px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--c-ink-strong);
}
.shop-item__desc {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-ink-muted);
}
.shop-item__price {
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--c-orange-deep);
}
/* Gibt es das Buch als Hardcover und als Softcover, steht beides untereinander. */
.shop-item__price--variants {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
.shop-item__variant {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.shop-item__variant-name {
  font-weight: 700;
  color: var(--c-ink-muted);
}

/* ---------- 13  Kontakt ---------- */
.contact {
  max-width: 800px;
  margin-inline: auto;
  padding: 50px var(--gutter) 100px;
  text-align: center;
}
.contact h2 {
  margin-bottom: 14px;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 800;
}
.contact p {
  margin-bottom: 22px;
  font-size: 17px;
  color: var(--c-ink-body);
}

/* ---------- 14  Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 50px var(--gutter) 30px;
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.site-footer__brand {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--c-white);
}
.site-footer__claim {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-footer-muted);
}
.site-footer__cols {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.site-footer__cols ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}
.site-footer a { color: var(--c-footer-text); }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }
.site-footer__legal {
  max-width: var(--wrap);
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-footer-line);
  font-size: 13px;
  color: var(--c-footer-faint);
}

/* ---------- 15  Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: oklch(20% 0.02 50 / .55);
}
.modal[hidden] { display: none; }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
}
.modal__close {
  position: absolute;
  top: -16px; right: -16px;
  z-index: 2;
  width: 36px; height: 36px;
  border: 3px solid var(--c-orange);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink-head);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.modal__close:hover { transform: rotate(90deg) scale(1.1); background: oklch(96% 0.05 42); }
.modal__close:active { transform: rotate(90deg) scale(.9); }

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px;
  background: var(--c-white);
  border: 4px solid var(--c-orange);
  border-radius: var(--r-xl);
  box-shadow: 10px 10px 0 var(--c-orange);
}
.modal__kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-green);
}
.modal__form h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink-strong);
}
.modal__includes {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--c-green-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: oklch(38% 0.02 50);
}
.modal__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--c-sand-tint);
  font-size: 14.5px;
  color: oklch(35% 0.02 50);
}
.modal__summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Der Betrag bleibt in einer Zeile; wenn es eng wird, bricht die Beschriftung. */
.modal__summary span:last-child { font-weight: 700; white-space: nowrap; }
.modal__summary .modal__total {
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid oklch(88% 0.02 75);
}
.modal__total span { font-weight: 800; }
.modal__note { font-size: 13px; color: var(--c-ink-muted); }

/* Hardcover oder Softcover – erscheint nur, wenn es etwas zu wählen gibt. */
.modal__variants[hidden] { display: none; }

/*
 * Die Auswahlliste sieht aus wie die übrigen Felder des Formulars. Der Pfeil
 * steckt als SVG im Hintergrund, damit sie in jedem Browser gleich aussieht.
 */
.field select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 44px 12px 16px;
  border: 2px solid var(--c-sand-line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-ink);
  background-color: var(--c-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c0501a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.field select:hover { border-color: var(--c-orange-line); }
.field select:focus {
  outline: none;
  border-color: var(--c-orange);
}


.field {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  color: oklch(35% 0.02 50);
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border: 2px solid var(--c-sand-line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-ink);
  background: var(--c-white);
  transition: border-color .15s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--c-orange); }

body.is-locked { overflow: hidden; }

/* ---------- 16  Unterseiten ---------- */
.rafu-page {
  max-width: 800px;
  margin-inline: auto;
  padding: 60px var(--gutter) 90px;
}
.rafu-page h1 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800;
}
.rafu-page h2 {
  margin: 36px 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.rafu-page p, .rafu-page li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink-body);
}
.rafu-page p + p { margin-top: 12px; }
.rafu-page ul { padding-left: 20px; }
.rafu-page .todo {
  padding: 14px 18px;
  border: 2px dashed var(--c-orange);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: 14.5px;
  color: var(--c-ink-body);
}

/* ---------- 17  Responsive ---------- */
@media (max-width: 859px) {
  .nav,
  .deco { display: none; }
  .grid--mission { grid-template-columns: repeat(2, 1fr); }
  .header-mobile-tools { display: flex; }
  .burger { display: flex; }
  .lang { margin-left: 0; font-size: 12px; }
  .lang span { padding: 4px 9px; }

  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__img { min-height: 260px; max-height: 46vh; }
  .hero__text { padding: 40px var(--gutter); }

  .teaser { padding: 24px; gap: 20px; transform: none; }
  .teaser__video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .lesungen__img { height: 220px; }

  .author { flex-direction: column; }
  .modal__form { padding: 24px; }
  .modal__close { top: -12px; right: -6px; }
}

@media (max-width: 520px) {
  :root { --gutter: 6%; }
  .card, .mission__card, .set { transform: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .grid--singles,
  .grid--mission { grid-template-columns: 1fr; }
  .book__award { width: 68px; height: 68px; top: -14px; right: -8px; }
  .shop-divider__label { font-size: 18px; padding: 7px 16px; }
  .book__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- 18  Reduced Motion & Print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .card:hover, .set:hover, .shop-item:hover,
  .nav__link:hover, .link-pill:hover { transform: none; }
}

@media print {
  .site-header, .modal, .deco, .blob, .btn, .burger { display: none !important; }
  body { background: #fff; }
  .card, .set, .shop-item, .mission__card { transform: none; box-shadow: none; }
}

/* =============================================================
   19  WordPress-Ergänzungen
   Alles, was erst durch WordPress, ACF und Contact Form 7 dazukommt.
   ============================================================= */

/* Video-Platzhalter, solange kein Kurzfilm hinterlegt ist */
.teaser__video--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--c-white);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* Sprachumschalter: aktive Sprache als Pille, andere als Link */
.lang a {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: oklch(60% 0.01 60);
  font-weight: 800;
}
.lang a:hover { color: var(--c-ink-head); background: oklch(94% 0.01 60); }

/* Navigation aus einem gepflegten WP-Menü */
.nav__list,
.nav-mobile__list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-mobile__list { flex-direction: column; align-items: stretch; gap: 4px; }
.nav__list a { padding: 8px 16px; border-radius: var(--r-pill); color: var(--c-ink); font-weight: 700; font-size: 15px; }
.nav__list a:hover { background: var(--c-sand-soft); color: var(--c-ink); }
.nav-mobile__list a { padding: 14px 12px; border-radius: 14px; color: var(--c-ink); font-weight: 700; font-size: 17px; }

/* ---- Contact Form 7 im Anfrage-Modal ---- */
.modal__cf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal__cf7 .wpcf7-form-control-wrap { display: block; }

/* Der Honigtopf darf niemanden erreichen – auch nicht per Tabulator. */
.modal__cf7 .rafu-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modal__cf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-orange-dark);
}
.modal__cf7 .wpcf7-not-valid { border-color: var(--c-orange); }

.modal__cf7 .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border: 2px solid var(--c-sand-line);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.5;
}
.modal__cf7 form.sent .wpcf7-response-output {
  border-color: var(--c-green-mid);
  background: var(--c-green-bg);
  color: oklch(35% 0.06 148);
}
.modal__cf7 form.invalid .wpcf7-response-output,
.modal__cf7 form.failed .wpcf7-response-output,
.modal__cf7 form.spam .wpcf7-response-output {
  border-color: var(--c-orange);
  background: oklch(96% 0.04 42);
  color: var(--c-orange-dark);
}

/* Ladeanzeige neben dem Absenden-Knopf */
.modal__cf7 .wpcf7-spinner {
  display: block;
  margin: 8px auto 0;
}

/* Der Absenden-Knopf trägt bereits .btn – nur die Breite fehlt. */
.modal__cf7 input[type="submit"] { width: 100%; }

/* ---- Backend-Vorschau der Startseite (Blockeditor deaktiviert) ---- */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}