@charset "utf-8";
/* ===========================================================================
   autorin-barbaralayson.de – World of Talents
   ---------------------------------------------------------------------------
   Die Seite ist aus den vorhandenen Grafiken gebaut, nicht aus Flächen:

   - Rauch mit Zahlencodes (Wellen, rauch, flower-bg) – das Schlüsselmotiv
     der Bücher. Liegt im Held, im Klappentext und hinter dem Newsletter.
   - Der Kreuzgang der University of Talents (bg_uot1, bg-university) –
     hinter den Stimmen und den Figuren, so wie auf der bisherigen Seite.
   - Die Nebelschleier aus dem bisherigen Theme (fog1, fog2) ziehen über die
     dunklen Flächen. Das ist die einzige Bewegung auf der Seite.
   - Der silberne Schriftzug steht immer auf Dunkel, dort glänzt er.
   - Die Fotos aus dem Shop stehen gerahmt wie echte Fotos.

   Farben: die Markenfarben der bisherigen Seite (Türkis #006363, Violett
   #664a74), dazu das Pink der Change-Quaste nur für Kaufknöpfe.
   Schriften: Playfair Display und Poppins, wie bisher.

   Mobile first, keine externen Ressourcen außer den Bildern.
   =========================================================================== */

/* --------------------------------------------------------------- Schriften */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-italic.woff2') format('woff2');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ Token */
:root {
  /* Hell */
  --papier:       #fbfcfc;
  --nebel:        #e6efee;   /* Grund der Shop-Packshots. Nicht ändern. */
  --text:         #12292c;
  --text-2:       #4a6164;
  --linie:        rgba(5, 40, 44, .14);

  /* Dunkel */
  --tiefe:        #05282c;
  --tiefe-2:      #0a3a3f;
  --hell:         #f1f7f6;
  --hell-2:       #b4cccb;
  --linie-tief:   rgba(180, 204, 203, .26);
  --glas:         rgba(5, 40, 44, .72);

  /* Marke (bisherige Seite) */
  --tuerkis:      #006363;
  --tuerkis-hell: #7fd6cc;
  --violett:      #664a74;
  --flieder:      #d3bde2;

  /* Kaufen */
  --pink:         #c21f6b;
  --pink-dunkel:  #9c1554;

  --breit:  1180px;
  --mittel: 820px;
  --schmal: 660px;
  --schritt: clamp(3.4rem, 8vw, 6.2rem);
  --rund: 16px;
  --schatten: 0 24px 48px -24px rgba(3, 25, 28, .55);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* gewinnt gegen display-Regeln */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tuerkis); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--violett); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; background: var(--tiefe); color: #fff; padding: .7rem 1rem; z-index: 200; }
.skip:focus { left: 0; top: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.8vw, 3.7rem); letter-spacing: -0.01em; line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }
h4 { font-size: 1.1rem; }
/* Lange deutsche Wörter (Datenschutzerklärung) passen bei 320 px nicht in eine Zeile. */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 420px) { h1, h2 { hyphens: auto; -webkit-hyphens: auto; } }

p { margin: 0 0 1.1em; max-width: 64ch; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: rgba(5, 40, 44, .07); padding: .1em .35em; border-radius: 4px; }

/* --------------------------------------------------------------- Abschnitte */
.huelle { width: min(100% - 2.4rem, var(--breit)); margin-inline: auto; }
.huelle--mittel { width: min(100% - 2.4rem, var(--mittel)); }
.huelle--schmal { width: min(100% - 2.4rem, var(--schmal)); }

.abschnitt { padding-block: var(--schritt); position: relative; }
.abschnitt--eng { padding-block: clamp(2.6rem, 6vw, 4rem); }
.abschnitt--weiss { background: var(--papier); }
.abschnitt--nebel { background: var(--nebel); }
.abschnitt--rand { border-top: 1px solid var(--linie); }

/* Dunkle Abschnitte. Das Bild kommt über --bild: der Kreuzgang der
   University of Talents oder der Rauch. Darüber ein Schleier in Tiefseetürkis
   und der Nebel aus dem Theme. */
.abschnitt--tiefe {
  background-color: var(--tiefe);
  background-image:
    linear-gradient(180deg, rgba(5, 40, 44, .9) 0%, rgba(5, 40, 44, .78) 50%, rgba(5, 40, 44, .92) 100%),
    var(--bild, none);
  background-size: cover;
  background-position: center;
  color: var(--hell-2);
  isolation: isolate;
  overflow: hidden;
}
.abschnitt--tiefe h1, .abschnitt--tiefe h2, .abschnitt--tiefe h3, .abschnitt--tiefe h4 { color: var(--hell); }
.abschnitt--tiefe a { color: var(--tuerkis-hell); }
.abschnitt--tiefe a:hover { color: #fff; }
.abschnitt--tiefe p { color: var(--hell-2); }

/* Der Nebel: zwei transparente Schleier aus dem bisherigen Theme, die sehr
   langsam gegeneinander ziehen. */
.nebel { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nebel::before, .nebel::after {
  content: ''; position: absolute; inset: -10% -30%;
  background-image: var(--nebel-1, none);
  background-size: 100% 100%; background-repeat: no-repeat;
  /* Die Schleier haben keine durchsichtigen Ränder – ohne Maske sähe man
     ihre Kanten als Linie quer über dem Bild. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at center, #000 35%, transparent 100%);
  opacity: .5;
  animation: nebel 70s linear infinite alternate;
}
.nebel::after {
  background-image: var(--nebel-2, none);
  inset: -20% -40% 10%;
  opacity: .4;
  animation-duration: 95s;
  animation-direction: alternate-reverse;
}
@keyframes nebel { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* -------------------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(5, 40, 44, .96);
  border-bottom: 1px solid var(--linie-tief);
  backdrop-filter: blur(8px);
}
.kopf__innen {
  width: min(100% - 2.4rem, var(--breit)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 62px;
}
/* Die Wortmarke der bisherigen Seite: Versalien, weit gesperrt. */
.marke { text-decoration: none; color: var(--hell); display: flex; flex-direction: column; line-height: 1.15; }
.marke:hover { color: #fff; }
.marke__name { font-size: .92rem; letter-spacing: .32em; text-transform: uppercase; }
.marke__zusatz { font-family: var(--font-display); font-style: italic; font-size: .82rem; color: var(--hell-2); }

.menue-schalter {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--hell-2); color: var(--hell); border-radius: 8px;
  font-family: var(--font-text); font-size: .88rem; padding: .45rem .8rem; cursor: pointer;
}
.menue-schalter__balken { width: 15px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }

.navi { display: none; }
.navi[data-offen="true"] {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--tiefe); border-bottom: 1px solid var(--linie-tief);
  padding: 0 1.2rem 1.2rem;
  max-height: calc(100vh - 62px); overflow-y: auto;
}
.navi a { color: var(--hell); text-decoration: none; padding: .85rem 0; border-bottom: 1px solid var(--linie-tief); font-size: 1rem; }
.navi a:hover { color: var(--tuerkis-hell); }
.navi .navi__cta { color: #fff; background: var(--pink); border: 0; border-radius: 10px; margin-top: 1rem; padding: .8rem 1rem; text-align: center; font-weight: 500; }

@media (min-width: 1100px) {
  .menue-schalter { display: none; }
  .navi, .navi[data-offen="true"] {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: 1.6rem; padding: 0; border: 0; background: none; overflow: visible; max-height: none;
  }
  .navi a { border: 0; padding: .3rem 0; font-size: .9rem; color: var(--hell-2); }
  .navi a:hover { color: #fff; }
  .navi .navi__cta { margin: 0; padding: .55rem 1rem; color: #fff; }
  .navi .navi__cta:hover { background: var(--pink-dunkel); color: #fff; }
}

/* Seiten ohne Navigation (Danke, Kapitel): nur der Schriftzug. */
.markenband { background: var(--tiefe); padding: .9rem 1.1rem; display: flex; justify-content: center; }
.markenband img { height: 28px; width: auto; }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  padding: .95rem 1.45rem; border: 1.5px solid var(--text); border-radius: 10px;
  background: none; color: var(--text);
  text-decoration: none; cursor: pointer; line-height: 1.25; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.knopf:disabled { opacity: .6; cursor: progress; }

/* Kaufen. Die einzige pinke Fläche auf der Seite. */
.knopf--puls { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 12px 24px -14px rgba(194, 31, 107, .8); }
.knopf--puls:hover { background: var(--pink-dunkel); border-color: var(--pink-dunkel); color: #fff; }

.knopf--tiefe { background: var(--tuerkis); border-color: var(--tuerkis); color: #fff; }
.knopf--tiefe:hover { background: var(--tiefe); border-color: var(--tiefe); color: #fff; }

.knopf--linie { border-color: var(--tuerkis); color: var(--tuerkis); }
.knopf--linie:hover { background: var(--tuerkis); color: #fff; }

/* Auf Dunkel */
.abschnitt--tiefe .knopf--puls, .held .knopf--puls, .fuss .knopf--puls, .seitenkopf .knopf--puls { color: #fff; }
.abschnitt--tiefe .knopf--linie, .held .knopf--linie, .seitenkopf .knopf--linie { border-color: rgba(241, 247, 246, .7); color: var(--hell); }
.abschnitt--tiefe .knopf--linie:hover, .held .knopf--linie:hover, .seitenkopf .knopf--linie:hover { background: var(--hell); border-color: var(--hell); color: var(--tiefe); }
.abschnitt--tiefe .knopf--tiefe { background: var(--hell); border-color: var(--hell); color: var(--tiefe); }
.abschnitt--tiefe .knopf--tiefe:hover { background: #fff; border-color: #fff; }

.knopf--breit { width: 100%; }
.knopf--klein { padding: .55rem 1rem; font-size: .9rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.5rem 0; }
.knopfreihe--mitte { justify-content: center; }

/* -------------------------------------------------------------------- Held
   Der Rauch aus dem Buch als Hintergrund, links abgedunkelt für die Schrift,
   rechts offen. Darüber der Nebel. Das Foto aus dem Shop steht gerahmt.

   Mobil liegt das Foto klein neben der Überschrift. Ein großes Bild schiebt
   auf dem Handy Anriss, Sterne und Knöpfe aus dem Bild – und genau die
   müssen über der Falz stehen. */
.held {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--tiefe);
  background-image:
    linear-gradient(180deg, rgba(5, 40, 44, .72) 0%, rgba(5, 40, 44, .86) 55%, rgba(5, 40, 44, .95) 100%),
    var(--bild-klein, var(--bild, none));
  background-size: cover; background-position: center 35%;
  color: var(--hell-2);
  padding-block: clamp(1.4rem, 4vw, 3rem) clamp(2.4rem, 6vw, 4.4rem);
}
@media (min-width: 840px) {
  .held {
    background-image:
      linear-gradient(90deg, rgba(5, 40, 44, .96) 0%, rgba(5, 40, 44, .86) 42%, rgba(5, 40, 44, .35) 75%, rgba(5, 40, 44, .2) 100%),
      var(--bild, none);
    background-position: center 40%;
  }
}

.held__gitter {
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
  grid-template-areas:
    "logo logo"
    "bild kopf"
    "rest rest";
  column-gap: 1.1rem;
  row-gap: 1.1rem;
  align-items: center;
}
.held__logo { grid-area: logo; width: min(78%, 360px); margin: 0 0 .2rem; }
.held__bild { grid-area: bild; margin: 0; }
.held__kopf { grid-area: kopf; }
.held__rest { grid-area: rest; }

/* Das Foto: gerahmt, leicht gedreht, mit Schatten – wie hingelegt. */
.held__bild img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 4px solid #fff; border-radius: 12px;
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .7);
  transform: rotate(-2.5deg);
}
.held__bildunter { font-size: .74rem; color: var(--hell-2); margin: .9rem 0 0; max-width: none; display: none; text-align: center; }

.held__gattung { font-size: .82rem; color: var(--tuerkis); font-weight: 500; margin: 0 0 .45rem; letter-spacing: .01em; }
.held .held__gattung, .seitenkopf .held__gattung { color: var(--tuerkis-hell); }
.held__titel { margin-bottom: 0; color: #fff; max-width: 14ch; font-size: clamp(1.6rem, 6.6vw, 3.9rem); }
.held__anriss { font-size: 1.02rem; color: var(--hell); max-width: 48ch; }
.held__genre { font-size: .92rem; color: var(--hell-2); max-width: 48ch; }

@media (min-width: 560px) {
  .held__gitter { grid-template-columns: 30% minmax(0, 1fr); column-gap: 1.8rem; }
  .held__gattung { font-size: .95rem; }
  .held__anriss { font-size: 1.1rem; }
}

@media (min-width: 840px) {
  .held { min-height: min(88vh, 860px); display: flex; align-items: center; }
  .held > .huelle { width: min(100% - 2.4rem, var(--breit)); }
  .held__gitter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas:
      "logo bild"
      "kopf bild"
      "rest bild";
    column-gap: 4rem;
    row-gap: .9rem;
    align-items: start;
  }
  .held__logo { width: min(100%, 460px); margin-bottom: .6rem; }
  .held__bild { align-self: center; }
  .held__bildunter { display: block; }
  .held__anriss { font-size: 1.16rem; }
}
@media (min-width: 1100px) {
  .held__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 5.5rem; }
}

.sterne {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 1rem 0 0; font-size: .92rem; color: var(--text-2);
}
.sterne__zeichen { color: #f1b84b; font-size: 1.05rem; letter-spacing: .08em; }
.sterne b { color: var(--text); font-weight: 500; }
.held .sterne { color: var(--hell-2); }
.held .sterne b { color: #fff; }

/* Zweitknopf braucht ein Argument, nicht nur eine Richtung.
   Auf dem Handy volle Breite, damit beide sicher treffbar sind. */
.knopfreihe--haupt { margin-block: 1.2rem 0; gap: .6rem; }
.knopfreihe--haupt .knopf { width: 100%; padding: .95rem 1.1rem; }
@media (min-width: 600px) {
  .knopfreihe--haupt { margin-block: 1.6rem 0; gap: .8rem; }
  .knopfreihe--haupt .knopf { width: auto; padding: 1.05rem 1.6rem; font-size: 1.04rem; }
}

/* Angaben: drei Fakten als Datenzeile */
.angaben { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--linie-tief); margin-top: 1.6rem; }
.angaben > div { padding: .65rem 0; border-bottom: 1px solid var(--linie-tief); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.angaben > div:last-child { border-bottom: 0; }
.angaben__wert { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; color: var(--hell); }
.angaben__was { font-size: .78rem; line-height: 1.45; color: var(--hell-2); }
@media (min-width: 620px) {
  .angaben { grid-template-columns: repeat(3, 1fr); }
  .angaben > div { display: block; padding: 1rem 1.2rem; border-bottom: 0; border-right: 1px solid var(--linie-tief); }
  .angaben > div:first-child { padding-left: 0; }
  .angaben > div:last-child { border-right: 0; padding-right: 0; }
  .angaben__wert { display: block; margin-bottom: .3rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
  .angaben__was { display: block; }
}

/* ------------------------------------------------------------ Klappentext
   Links der Text, rechts eine hohe Rauchtafel – das Motiv vom Buchrücken.
   Auf ihr liegt das Talent-Profil von Ice. */
.buch { display: grid; gap: 2.6rem; align-items: start; }
@media (min-width: 900px) { .buch { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4.4rem; } }

.klapp { max-width: 60ch; }
.klapp .klapp__auftakt {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 1.95rem);
  line-height: 1.32; margin-bottom: 1.1rem; color: var(--text);
}
.klapp p { font-size: 1.04rem; }
.klapp .klapp__schluss {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.32;
  color: var(--violett); margin-top: 1.5rem;
}
@media (max-width: 559px) { .klapp__schluss br { display: none; } }
.abschnitt--tiefe .klapp .klapp__auftakt { color: var(--hell); }
.abschnitt--tiefe .klapp .klapp__schluss { color: var(--flieder); }

.rauchtafel {
  position: relative; margin: 0;
  border-radius: var(--rund); overflow: hidden;
  background-color: var(--tiefe-2);
  background-image: var(--bild, none);
  background-size: cover; background-position: center 30%;
  box-shadow: var(--schatten);
  padding: clamp(9rem, 32vw, 15rem) clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem);
}
@media (min-width: 900px) { .rauchtafel { padding-top: 15rem; } }
.rauchtafel + h3 { margin-top: 2.2rem; }

/* Zweispaltig auf dunklem Grund (Newsletter-Seite, Messen, Kapitel). */
.tiefe__gitter { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .tiefe__gitter { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } }
.tiefe__gitter--mittig { align-items: center; }

/* -------------------------------------------------------- Das Talent-Profil
   Die Eckdaten einer Figur als Datenblatt der University of Talents. */
.profil {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.3rem 1.2rem 1rem;
  margin-bottom: 1.6rem;
  max-width: 34rem;
}
.profil__titel { font-size: .8rem; color: var(--text-2); margin: 0 0 .5rem; max-width: none; }
.profil__daten { margin: 0; }
.profil__zeile { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--linie); align-items: baseline; }
.profil__zeile dt { font-size: .8rem; color: var(--text-2); }
.profil__zeile dd { margin: 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; }

/* Auf der Rauchtafel: dunkles Glas. */
.rauchtafel .profil, .abschnitt--tiefe .profil {
  background: var(--glas); border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  margin-bottom: 0;
}
.rauchtafel .profil__titel, .abschnitt--tiefe .profil__titel,
.rauchtafel .profil__zeile dt, .abschnitt--tiefe .profil__zeile dt { color: var(--hell-2); }
.rauchtafel .profil__zeile, .abschnitt--tiefe .profil__zeile { border-top-color: var(--linie-tief); }
.rauchtafel .profil__zeile dd, .abschnitt--tiefe .profil__zeile dd { color: #fff; }

.status {
  display: inline-block; vertical-align: .12em; margin-left: .35rem;
  font-family: var(--font-text); font-size: .72rem; font-weight: 500; letter-spacing: .04em;
  color: #fff; padding: .14em .7em; border-radius: 999px;
  background: linear-gradient(90deg, #00807e, var(--violett), var(--pink), var(--violett), #00807e);
  background-size: 300% 100%;
  animation: status 10s linear infinite;
}
@keyframes status { to { background-position: -300% 0; } }

.vermerk {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.5rem); line-height: 1.35;
  border-left: 3px solid var(--violett);
  padding-left: 1rem; margin: 2rem 0 1.4rem; max-width: 26ch; color: var(--text);
}
.abschnitt--tiefe .vermerk { color: var(--hell); border-left-color: var(--flieder); }

.tropen { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: .8rem 0 0; }
.tropen li { font-size: .82rem; padding: .3rem .8rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--text-2); background: var(--papier); }
.abschnitt--tiefe .tropen li { border-color: var(--linie-tief); color: var(--hell-2); background: none; }

/* ------------------------------------------------------------- Leserstimmen
   Gesetzte Zitate auf Glas, dahinter der Kreuzgang. Kein Karussell: alle
   Stimmen sind sofort lesbar, auch auf dem Handy. */
.stimmen { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 700px) { .stimmen { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; } }
@media (min-width: 1000px) { .stimmen { grid-template-columns: repeat(3, 1fr); } }

.stimme {
  margin: 0; padding: 1.5rem 1.4rem 1.3rem;
  border-radius: var(--rund);
  background: var(--papier); border: 1px solid var(--linie);
  display: flex; flex-direction: column; justify-content: space-between;
}
.stimme__zitat {
  font-family: var(--font-display); font-size: clamp(1.06rem, 1.9vw, 1.18rem);
  line-height: 1.5; color: var(--text); margin: 0 0 1rem;
}
.stimme__zitat::before {
  content: '„'; display: block; font-size: 3rem; line-height: .6; color: var(--violett); margin-bottom: .4rem;
}
.stimme__wer { font-size: .82rem; color: var(--text-2); font-style: normal; }
.stimme--einzeln { margin-top: 2rem; max-width: 34rem; }

.abschnitt--tiefe .stimme {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.abschnitt--tiefe .stimme__zitat { color: var(--hell); }
.abschnitt--tiefe .stimme__zitat::before { color: var(--flieder); }
.abschnitt--tiefe .stimme__wer { color: var(--hell-2); }

/* ------------------------------------------------------------------ Kaufen */
.kaufen { margin-top: 2.2rem; display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .kaufen { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.kaufweg {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden;
  box-shadow: 0 18px 36px -28px rgba(3, 25, 28, .55);
}
.kaufweg--haupt { border-color: rgba(194, 31, 107, .35); }

/* Bildkachel: die Packshots haben einen Grund in #e6efee, die Kachel auch. */
.kaufweg__bild { aspect-ratio: 16 / 10; background: var(--nebel); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.2rem 1rem; }
.kaufweg__bild img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.kaufweg__text { padding: 1.4rem 1.4rem 0; flex: 1; }
.kaufweg h3 { margin-bottom: .35rem; }
.kaufweg p { font-size: .95rem; margin-bottom: .6rem; }
.kaufweg ul { margin: 0; padding-left: 1.05rem; font-size: .9rem; color: var(--text-2); }
.kaufweg li { margin-bottom: .2rem; }
.kaufweg__aktion { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; border-top: 1px solid var(--linie); margin-top: 1.2rem; }
.kaufweg .kaufweg__preis { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.2rem); line-height: 1; margin: 0; }
.kaufweg__preis small { display: block; font-family: var(--font-text); font-size: .74rem; color: var(--text-2); margin-top: .4rem; line-height: 1.4; max-width: 15rem; }

/* ------------------------------------------------------- Buch entdecken */
.entdecken__titel { margin: 3rem 0 1.1rem; }
.entdecken { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 60rem; }
@media (min-width: 760px) { .entdecken { gap: 1.4rem; } }
.entdecken figure { margin: 0; }
.entdecken__bild { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--nebel); }
.entdecken__bild img { width: 100%; height: 100%; object-fit: cover; }
.entdecken figcaption { font-size: .82rem; color: var(--text-2); margin-top: .55rem; line-height: 1.45; }

/* Weitere Ausgaben: Preisliste */
.ausgaben { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); max-width: 52rem; }
.ausgabe { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .95rem 0; border-bottom: 1px solid var(--linie); }
.ausgabe__titel { display: block; font-weight: 500; }
.ausgabe__text { display: block; font-size: .86rem; color: var(--text-2); max-width: 56ch; }
.ausgabe__preis { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; }

/* ------------------------------------------------------------- Die Talents
   Sammelkarten im Format der gedruckten Charakterkarten. Wer noch keine
   gezeichnete Karte hat, bekommt eine aus dem Rauch mit dem Namen des Gens. */
.karten { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.3rem; } }
@media (min-width: 1040px) { .karten { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; } }
@media (min-width: 1040px) { .karten:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.karte { display: block; text-decoration: none; color: inherit; }
.karte__bild {
  display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px; background: var(--tiefe-2);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8);
  transition: transform .25s ease, box-shadow .25s ease;
}
.karte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.karte:hover .karte__bild, .karte:focus-visible .karte__bild { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 26px 36px -18px rgba(0, 0, 0, .85); }

.karte--gesetzt .karte__bild {
  background-image: linear-gradient(180deg, rgba(5, 40, 44, 0) 35%, rgba(5, 40, 44, .82) 100%), var(--bild, none);
  background-size: cover; background-position: center 40%;
  display: flex; align-items: flex-end; padding: .9rem;
}
.karte__gen { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 4.6vw, 1.75rem); line-height: 1.05; color: #fff; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
@media (min-width: 1040px) { .karte__gen { font-size: 1.35rem; } }

.karte__name { font-family: var(--font-display); font-size: 1.04rem; line-height: 1.25; margin: .8rem 0 .15rem; color: var(--text); }
.karte__daten { display: block; font-size: .78rem; color: var(--text-2); }
.abschnitt--tiefe .karte__name { color: var(--hell); }
.abschnitt--tiefe .karte:hover .karte__name { color: var(--tuerkis-hell); }
.abschnitt--tiefe .karte__daten { color: var(--hell-2); }

/* Eine Figur */
.brotkrumen { font-size: .85rem; margin-bottom: 1.2rem; }
.brotkrumen a::before { content: '‹ '; }
.talent { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .talent { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 3.6rem; } }
.talent--ohne-bild { grid-template-columns: minmax(0, 46rem); }
.talent__zwischen { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-top: 1.8rem; }
.talent__karte { margin: 0; }
.talent__karte img { width: 100%; border-radius: var(--rund); box-shadow: var(--schatten); }
.talent__karte figcaption { font-size: .8rem; color: var(--text-2); margin-top: .6rem; text-align: center; }
@media (max-width: 859px) { .talent__karte { max-width: 22rem; } }
.zuege { padding-left: 1.1rem; margin: 0 0 1rem; max-width: 60ch; }
.zuege li { margin-bottom: .45rem; }
.zuege li::marker { color: var(--violett); }

/* ------------------------------------------------------------ Messetermine */
.termine { list-style: none; padding: 0; margin: 1.4rem 0 0; border-top: 1px solid var(--linie); max-width: 48rem; }
.termin { display: grid; gap: .1rem .9rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 620px) { .termin { grid-template-columns: 14.5rem minmax(0, 1fr) auto; align-items: baseline; } }
.termin__wann { font-family: var(--font-display); font-size: 1.1rem; }
.termin__was { font-weight: 500; }
.termin__wo { font-size: .88rem; color: var(--text-2); }
.termine--vorbei { margin-top: .4rem; }
.termine--vorbei .termin { opacity: .75; }
.termine-vorbei { margin-top: 1.2rem; max-width: 48rem; }
.termine-vorbei summary { cursor: pointer; font-size: .9rem; color: var(--text-2); }
.abschnitt--tiefe .termine, .abschnitt--tiefe .termin { border-color: var(--linie-tief); }
.abschnitt--tiefe .termin__wann, .abschnitt--tiefe .termin__was { color: var(--hell); }
.abschnitt--tiefe .termin__wo, .abschnitt--tiefe .termine-vorbei summary { color: var(--hell-2); }

/* ----------------------------------------------------------------- Autorin
   Das freigestellte Porträt steht vor einer Rauchscheibe. */
.autorin { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 840px) { .autorin { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 3.6rem; } }
.portrait { position: relative; margin: 0 auto; width: min(100%, 22rem); aspect-ratio: 4 / 5; }
.portrait::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 10%; aspect-ratio: 1; border-radius: 50%;
  background-image: var(--bild, none); background-size: 160%; background-position: center 45%;
  box-shadow: inset 0 0 0 1px rgba(5, 40, 44, .1);
}
.portrait img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; }
.portrait::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, transparent, var(--hintergrund, var(--papier))); }

.autorin__bilder img { border-radius: var(--rund); box-shadow: var(--schatten); }
.autorin--lang { align-items: start; }
@media (min-width: 840px) { .autorin--lang .autorin__bilder { position: sticky; top: 6rem; } }
.autorin--buch { align-items: center; }
@media (min-width: 840px) { .autorin--buch { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.autorin--buch > img { width: 100%; max-width: 26rem; border: 4px solid #fff; border-radius: 12px; box-shadow: var(--schatten); transform: rotate(-2deg); }
.signatur { width: 200px; margin: 1.6rem 0 .4rem; }

.galerie { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 620px) { .galerie { grid-template-columns: repeat(3, 1fr); } .galerie--zwei { grid-template-columns: repeat(2, minmax(0, 20rem)); } }
.galerie img { width: 100%; border-radius: var(--rund); }

/* --------------------------------------------- Kopf der Unterseiten
   Wie der Held: Rauch, abgedunkelt, Nebel, Schriftzug. */
.seitenkopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.8rem, 8vw, 5.2rem);
  background-color: var(--tiefe);
  background-image: linear-gradient(90deg, rgba(5, 40, 44, .94) 0%, rgba(5, 40, 44, .78) 55%, rgba(5, 40, 44, .45) 100%), var(--rauch-klein, var(--rauch, none));
  background-size: cover; background-position: center 40%;
  color: var(--hell-2);
}
@media (min-width: 800px) { .seitenkopf { background-image: linear-gradient(90deg, rgba(5, 40, 44, .95) 0%, rgba(5, 40, 44, .75) 50%, rgba(5, 40, 44, .25) 100%), var(--rauch, none); } }
.seitenkopf--flach { padding-block: clamp(2.2rem, 6vw, 3.8rem); }
.seitenkopf h1 { color: #fff; max-width: 20ch; margin-bottom: .3em; }
.seitenkopf__logo { width: min(100%, 440px); margin-bottom: 1.4rem; }
.seitenkopf__frage { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.38; color: var(--hell); max-width: 34ch; margin: 0; }

/* --------------------------------------------------------------- Fließtext */
.prosa p { font-size: 1.06rem; }
.prosa > :first-child { margin-top: 0; }
.prosa--breit p { max-width: 70ch; }
.prosa--recht h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-top: 2.2rem; }
.prosa--recht h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.prosa--recht p { font-size: .98rem; }
.zwischentitel { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-top: 2.4rem; }

/* -------------------------------------------------------------------- Blog */
.beitraege { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
.beitraege > li { border-bottom: 1px solid var(--linie); padding: 1.9rem 0; }
.beitraege--knapp > li { padding: 1rem 0; }
.anriss__datum { font-size: .82rem; color: var(--text-2); margin: 0 0 .4rem; max-width: none; }
.anriss__titel { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin-bottom: .45em; }
.beitraege--knapp .anriss__titel { font-size: 1.2rem; margin: 0; }
.anriss__titel a { color: var(--text); text-decoration: none; }
.anriss__titel a:hover { color: var(--tuerkis); text-decoration: underline; }
.anriss p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Klappentext-Seite */
.buchseite { display: grid; gap: 2.6rem; align-items: start; }
@media (min-width: 900px) { .buchseite { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 3.8rem; } }

.video {
  position: relative; aspect-ratio: 4 / 5; max-height: 32rem; width: 100%;
  border-radius: var(--rund); overflow: hidden; margin-bottom: .8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  padding: 1.4rem; text-align: center;
  background-color: var(--tiefe);
  background-image: linear-gradient(180deg, rgba(5, 40, 44, .35), rgba(5, 40, 44, .85)), var(--bild, none);
  background-size: cover; background-position: center;
  box-shadow: var(--schatten);
}
.video__logo { width: min(80%, 280px); }
.video[data-laeuft="true"] { padding: 0; background: #000; }
.video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.buchseite .profil { margin-top: 1.4rem; }

/* --------------------------------------------------------------- Newsletter
   Der Rauch als Hintergrund, darauf eine helle Karte. */
.abschnitt--rauch {
  background-color: var(--papier);
  background-image: linear-gradient(180deg, rgba(251, 252, 252, .35), rgba(251, 252, 252, .1)), var(--bild, none);
  background-size: cover; background-position: center 45%;
}
.notiz {
  position: relative;
  background: rgba(251, 252, 252, .94);
  border: 1px solid var(--linie); border-radius: 20px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  display: grid; gap: 1.4rem;
  box-shadow: var(--schatten);
  max-width: 64rem; margin-inline: auto;
}
@media (min-width: 820px) { .notiz { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 2.6rem; align-items: start; } }
.notiz h2 { font-size: clamp(1.45rem, 4vw, 1.95rem); }
.notiz p { font-size: .96rem; }
.notiz .klein, .prosa .klein, .kaufweg .klein { font-size: .8rem; }

.formkasten { background: var(--papier); color: var(--text); border-radius: var(--rund); padding: clamp(1.2rem, 4vw, 1.8rem); box-shadow: var(--schatten); }
.abschnitt--tiefe .formkasten p, .abschnitt--tiefe .formkasten .klein { color: var(--text-2); }
.abschnitt--tiefe .formkasten a { color: var(--tuerkis); }
.abschnitt--tiefe .formkasten .knopf--tiefe { background: var(--tuerkis); border-color: var(--tuerkis); color: #fff; }
.abschnitt--tiefe .formkasten .knopf--tiefe:hover { background: var(--tiefe); border-color: var(--tiefe); }
.formkasten .klein:last-child { margin: 1rem 0 0; }

.vorteile { list-style: none; padding: 0; margin: 0; max-width: 30rem; }
.vorteile li { padding: .7rem 0 .7rem 1.7rem; border-bottom: 1px solid var(--linie-tief); position: relative; color: var(--hell); }
.vorteile li::before { content: ''; position: absolute; left: 0; top: 1.2rem; width: .8rem; height: .8rem; border-radius: 50%; background: linear-gradient(135deg, var(--tuerkis-hell), var(--flieder)); }
.willkommen__logo { width: min(80%, 340px); margin: 0 auto 1.6rem; }

/* ---------------------------------------------------------------- Formular */
.formular { max-width: 36rem; }
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-size: .86rem; margin-bottom: .3rem; color: var(--text-2); }
.feld input[type="text"], .feld input[type="email"], .feld textarea {
  width: 100%; padding: .78rem .9rem; font-family: var(--font-text); font-size: 1rem; line-height: 1.5;
  background: #fff; color: var(--text); border: 1.5px solid rgba(5, 40, 44, .35); border-radius: 10px;
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input::placeholder { color: #8aa0a2; }
.feld input:focus, .feld textarea:focus { outline: 3px solid rgba(0, 99, 99, .35); outline-offset: 1px; border-color: var(--tuerkis); }
.feld .klein { margin: .35rem 0 0; }

.zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--text-2); margin-bottom: 1rem; line-height: 1.5; }
.zustimmung input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--tuerkis); flex: none; }

.captcha { margin: 0 0 1rem; }
.captcha .g-recaptcha { transform-origin: 0 0; }
@media (max-width: 400px) { .captcha .g-recaptcha { transform: scale(.86); } }

.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.klein { font-size: .8rem; color: var(--text-2); }
.abschnitt--tiefe .klein { color: var(--hell-2); }
form .klein { margin-top: .8rem; }

.meldung { padding: .8rem .95rem; margin-bottom: 1rem; font-size: .92rem; border: 1px solid; border-radius: 10px; }
.meldung--gut { border-color: #2f7d5b; color: #1d5a40; background: #dcefe6; }
.meldung--schlecht { border-color: #b3261e; color: #8c1d18; background: #fbe6e3; }
.meldung--hinweis { border-color: var(--linie); color: var(--text); background: var(--nebel); }
.erfolg { background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--tuerkis); border-radius: 10px; padding: 1.2rem 1.3rem; color: var(--text); }
.erfolg h2, .erfolg h3 { color: var(--tuerkis); font-size: 1.35rem; }
.erfolg p { color: var(--text); }
.erfolg p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- FAQ */
.faq { margin-top: 2.8rem; border-top: 1px solid var(--linie); max-width: 50rem; }
.faq--knapp { margin-top: 1.6rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 500; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--violett); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 1rem; font-size: .96rem; margin: 0; }

/* --------------------------------------------------------------------- Fuß */
.fuss {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tiefe); color: var(--hell-2); padding-block: 3.4rem 1.4rem;
}
.fuss__logo { width: min(100%, 300px); margin-bottom: 1rem; }
/* Das Monogramm ist weiß auf Schwarz. Mit screen verschwindet das Schwarz. */
.fuss__mono { position: absolute; right: -3rem; bottom: -4rem; width: 24rem; opacity: .07; z-index: -1; mix-blend-mode: screen; pointer-events: none; }
.fuss a { color: var(--hell-2); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__innen { width: min(100% - 2.4rem, var(--breit)); margin-inline: auto; display: grid; gap: 2rem; }
@media (min-width: 620px) { .fuss__innen { grid-template-columns: repeat(2, 1fr); } .fuss__innen > :first-child { grid-column: 1 / -1; } }
@media (min-width: 980px) { .fuss__innen { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.6rem; } .fuss__innen > :first-child { grid-column: auto; } }
.fuss__marke { font-size: .95rem; letter-spacing: .32em; text-transform: uppercase; color: var(--hell); margin-bottom: .6rem; }
.fuss__titel { color: var(--hell); font-weight: 500; font-size: .9rem; margin-bottom: .5rem; }
.fuss__text { font-size: .9rem; max-width: 34ch; }
.fuss__spalte a { display: block; padding: .3rem 0; font-size: .9rem; }
.fuss__spalte .knopf { display: inline-flex; margin-top: .6rem; padding: .55rem 1rem; }
.fuss__spalte .knopf:hover { text-decoration: none; }
.fuss__linkknopf { background: none; border: 0; color: var(--hell-2); font-family: var(--font-text); font-size: .9rem; padding: .3rem 0; cursor: pointer; display: block; text-align: left; }
.fuss__linkknopf--inline { display: inline; text-decoration: underline; padding: 0; color: inherit; font-size: inherit; }
.fuss__linkknopf:hover { color: #fff; text-decoration: underline; }
.prosa .fuss__linkknopf--inline { color: var(--tuerkis); }
.fuss__zeile { width: min(100% - 2.4rem, var(--breit)); margin: 2.4rem auto 0; padding-top: 1rem; border-top: 1px solid var(--linie-tief); font-size: .78rem; color: var(--hell-2); max-width: none; }
.fuss--kompakt { padding-block: 1.8rem 1.4rem; }
.fuss--kompakt .fuss__zeile { margin-top: 0; padding-top: 0; border-top: 0; text-align: center; }
@media (max-width: 1099px) { body:has(.sticky) .fuss { padding-bottom: 5.4rem; } }

/* ------------------------------------------------------------ Sticky-Leiste */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: .5rem; padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(5, 40, 44, .97); border-top: 1px solid var(--linie-tief);
  transform: translateY(115%); transition: transform .2s ease;
}
.sticky[data-sichtbar="true"] { transform: translateY(0); }
.sticky .knopf { flex: 1; padding: .75rem .5rem; font-size: .9rem; }
.sticky .knopf--linie { border-color: rgba(241, 247, 246, .7); color: var(--hell); }
.sticky__neben { flex: 0 1 auto !important; padding-inline: .9rem !important; }
@media (min-width: 1100px) { .sticky { display: none; } }

/* ---------------------------------------------------------------- Consent */
.consent { position: fixed; inset: auto 0 0 0; z-index: 120; padding: .7rem; display: flex; justify-content: center; }
.consent__box {
  width: min(100%, 640px); background: #fff; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: 0 24px 60px -20px rgba(3, 25, 28, .6);
  padding: 1.2rem; max-height: 82vh; overflow-y: auto;
}
.consent__titel { font-size: 1.3rem; margin-bottom: .4rem; }
.consent__text { font-size: .9rem; margin-bottom: .9rem; }
.consent__optionen { display: grid; gap: .7rem; margin-bottom: 1rem; }
.consent__option { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--text-2); }
.consent__option input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--tuerkis); flex: none; }
.consent__option strong { display: block; color: var(--text); font-weight: 500; }
.consent__option--fest { opacity: .7; }
.consent__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.consent__knoepfe .knopf { flex: 1 1 auto; min-width: 145px; padding: .7rem 1rem; }
.consent .knopf--tiefe { background: var(--tiefe); border-color: var(--tiefe); }
.consent__mehr { background: none; border: 0; color: var(--text-2); text-decoration: underline; font-family: var(--font-text); font-size: .88rem; cursor: pointer; padding: .5rem; }
.consent__klein { font-size: .76rem; color: var(--text-2); margin: .8rem 0 0; }

/* ------------------------------------------------------------- Hilfsmittel */
.mitte { text-align: center; }
.mitte p, .mitte .vermerk { margin-inline: auto; }
.abstand-oben { margin-top: 2rem; }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===========================================================================
   Landingpage (change.php) – Bausteine nach dem Muster der LYRV-27-LP
   =========================================================================== */

/* Vertrauenszeile über dem Titel: Sterne und Kindle Unlimited */
.held__vertrauen { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: 0 0 .7rem; font-size: .8rem; max-width: none; }
.held__sterne { color: #fff; font-weight: 500; }
.held__sterne > span { color: #f1b84b; letter-spacing: .06em; margin-right: .2rem; }
.held__ku { border: 1px solid rgba(241, 247, 246, .45); border-radius: 999px; padding: .1rem .6rem; color: var(--hell); font-size: .74rem; letter-spacing: .02em; }
@media (min-width: 560px) { .held__vertrauen { font-size: .9rem; } }

/* Hinweis auf den neuen Band, wie das „Neu als Hörbuch“-Schild */
.held__neu {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: .2rem 0 0; padding: .45rem .8rem .45rem .45rem;
  border: 1px solid rgba(211, 189, 226, .45); border-radius: 14px;
  background: rgba(102, 74, 116, .35);
  color: var(--hell) !important; text-decoration: none; font-size: .86rem; line-height: 1.3;
}
.held__neu:hover { background: rgba(102, 74, 116, .6); color: #fff !important; }
.held__neu-schild { background: var(--flieder); color: var(--tiefe); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; }

/* Preise wie bei Amazon nebeneinander */
.preise { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.preise li { display: flex; align-items: baseline; gap: .35rem; }
.preise__wert { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.preise__was { font-size: .82rem; color: var(--text-2); }
.held .preise__wert { color: #fff; }
.held .preise__was { color: var(--hell-2); }
.held--lp .knopfreihe--haupt .knopf { min-width: min(100%, 20rem); }

.held__zitat { margin: 1.4rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--linie-tief); max-width: 34rem; }
.held__zitat p { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--hell); margin: 0 0 .3rem; }
.held__zitat cite { font-style: normal; font-size: .78rem; color: var(--hell-2); }

/* Drei Gründe */
.gruende { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .gruende { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.grund { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.4rem 1.3rem 1.2rem; box-shadow: 0 18px 36px -30px rgba(3, 25, 28, .5); }
.grund__zeichen { display: inline-block; font-family: var(--font-display); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--violett); margin-bottom: .6rem; }
.grund h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.grund p { font-size: .95rem; margin: 0; color: var(--text-2); }

/* Die Reihe */
.reihe { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .reihe { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.band {
  display: grid; grid-template-columns: 36% minmax(0, 1fr); grid-template-areas: "bild text" "knopf knopf";
  gap: 1rem 1.1rem; align-items: start;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.1rem; box-shadow: 0 18px 36px -28px rgba(3, 25, 28, .55);
}
@media (min-width: 900px) {
  .band { grid-template-columns: 1fr; grid-template-areas: "bild" "text" "knopf"; grid-template-rows: auto 1fr auto; padding: 1.3rem; }
}
.band__bild { grid-area: bild; position: relative; display: flex; justify-content: center; align-items: flex-end; background: var(--nebel); border-radius: 12px; padding: .9rem .6rem .6rem; aspect-ratio: 3 / 4; }
@media (min-width: 900px) { .band__bild { aspect-ratio: 4 / 3; padding: 1.2rem 1rem .8rem; } }
.band__bild img { max-height: 100%; width: auto; object-fit: contain; }
.band__schild { position: absolute; top: .5rem; left: .5rem; z-index: 1; background: var(--tuerkis); color: #fff; font-size: .68rem; font-weight: 500; letter-spacing: .03em; padding: .2rem .55rem; border-radius: 999px; }
.band--bald .band__schild { background: var(--violett); }
/* Gesetztes Cover, solange für Band 3 kein Bild da ist */
.band__gesetzt {
  height: 100%; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(5, 40, 44, .15), rgba(5, 40, 44, .75)), var(--bild, none);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem .6rem; text-align: center;
}
.band__gesetzt-reihe { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hell); }
.band__gesetzt-titel { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #fff; line-height: 1.1; }
.band__text { grid-area: text; }
.band__nr { font-size: .74rem; color: var(--tuerkis); font-weight: 500; margin: 0 0 .15rem; letter-spacing: .02em; }
.band__titel { font-size: 1.45rem; margin: 0 0 .25rem; }
.band__zusatz { font-family: var(--font-display); font-style: italic; font-size: .98rem; line-height: 1.35; color: var(--violett); margin: 0 0 .5rem; }
.band__info { font-size: .88rem; color: var(--text-2); margin: 0 0 .6rem; }
.band__daten { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; font-size: .82rem; margin: 0; color: var(--text-2); }
.band__sterne { color: var(--text); font-weight: 500; }
.band__sterne > span:first-child { color: #a8690f; }
.band__anzahl { color: var(--text-2); font-weight: 400; }
.band__ku { border: 1px solid var(--linie); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; }
.band__preis { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.band__knopf { grid-area: knopf; }
@media (max-width: 899px) { .band__info { display: none; } }

/* Signiert */
.signiert { display: grid; gap: 1.6rem; align-items: center; background: var(--papier); border: 1px solid var(--linie); border-radius: 20px; padding: clamp(1.2rem, 4vw, 2.2rem); box-shadow: var(--schatten); }
@media (min-width: 840px) { .signiert { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 3rem; } }
.signiert__bild { background: var(--nebel); border-radius: var(--rund); padding: 1rem; display: flex; justify-content: center; }
.signiert__bild img { max-height: 340px; width: auto; }
.signiert h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.signiert__liste { list-style: none; padding: 0; margin: 0 0 .4rem; border-top: 1px solid var(--linie); }
.signiert__liste li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.signiert__liste b { font-weight: 500; }
.signiert__preis { font-family: var(--font-display); font-size: 1.2rem; white-space: nowrap; }

/* Schluss */
.schluss__logo { width: min(80%, 380px); margin: 0 auto 1rem; }
.schluss__frage { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 3.4vw, 1.7rem); color: var(--hell) !important; margin: 0 auto .4rem; }
.schluss__preise { font-size: .82rem; margin: .4rem auto 0; }
.klapp h2 + .klapp__auftakt { font-size: clamp(1.12rem, 2.4vw, 1.35rem); color: var(--text-2); }
@media (min-width: 900px) { .band__text { display: flex; flex-direction: column; height: 100%; } .band__daten { margin-top: auto; } }

/* LP: Vertrauenszeile als eigene Zeile unter dem Schriftzug */
.held--lp .held__vertrauen { grid-area: vertrauen; margin: 0; }
.held--lp .held__gitter { grid-template-areas: "logo logo" "vertrauen vertrauen" "bild kopf" "rest rest"; }
@media (min-width: 840px) {
  .held--lp .held__gitter { grid-template-areas: "logo bild" "vertrauen bild" "kopf bild" "rest bild"; }
}

/* ---------------------------------------- Rauchtafel mit Ice' Karte
   Die Charakterkarte liegt schräg auf dem Rauch, das Profil schiebt sich
   ein Stück darüber. Im Fluss statt absolut, damit es in jeder Spalten-
   breite passt. */
.rauchtafel.rauchtafel--karte { padding-top: clamp(1rem, 3vw, 1.6rem); }
.rauchtafel__karte {
  position: relative; z-index: 0; display: block;
  width: min(58%, 15rem); margin: 0 auto -2.4rem;
  transform: rotate(-4deg);
  border-radius: 12px; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .75);
  transition: transform .25s ease;
}
.rauchtafel__karte:hover { transform: rotate(-1.5deg) translateY(-4px); }
.rauchtafel__karte img { width: 100%; }
.rauchtafel--karte .profil { position: relative; z-index: 1; }

/* Auf der Seite einer Figur: die Handzeichnung unter der Karte */
.talent__zeichnung { margin-top: 1.6rem; text-align: center; }
.talent__karte .talent__zeichnung img { width: min(100%, 300px); margin: 0 auto .4rem; mix-blend-mode: multiply; box-shadow: none; border-radius: 0; }
.talent__zeichnung p { font-size: .8rem; color: var(--text-2); margin: 0 auto; }

/* Die drei Zeichnungen als Gruppe, leicht aufgefächert */
.zeichnungen__kopf { max-width: 40rem; margin: 0 auto 1.6rem; text-align: center; }
.zeichnungen__kopf p { margin-inline: auto; }
.zeichnungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 56rem; margin: 0 auto 1rem; align-items: end; }
@media (min-width: 700px) { .zeichnungen { gap: 1.6rem; } }
.zeichnung { margin: 0; text-align: center; mix-blend-mode: multiply; }  /* am gedrehten Element selbst, sonst wirkt multiply nicht */
.zeichnung img { width: 100%; }
.zeichnung figcaption { font-family: var(--font-display); font-style: italic; font-size: clamp(.95rem, 2.4vw, 1.2rem); color: var(--violett); margin-top: .3rem; }
.zeichnung--links { transform: rotate(-2deg); }
.zeichnung--rechts { transform: rotate(2deg); }
/* Flaches Cover (Band 3) wie ein Buch auf den Tisch gelegt */
.band__bild--flach img { border-radius: 3px; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .15); }

/* Fotos der Autorin: gerahmt wie das Foto im Held */
.fotokarte { margin: 0 auto; width: min(100%, 21rem); }
.fotokarte img { width: 100%; border: 4px solid #fff; border-radius: 12px; box-shadow: var(--schatten); transform: rotate(-2deg); }
.fotokarte--quer { width: min(100%, 26rem); margin-top: 2.6rem; text-align: center; }
.fotokarte--quer img { transform: rotate(1.5deg); }
.fotokarte figcaption { font-size: .8rem; color: var(--text-2); margin-top: .9rem; }