/* ==========================================================
   Robert R. Brock – Autorenseite
   Schriften liegen lokal in /fonts (kein Google-Fonts-Abruf → DSGVO-freundlich)
   ========================================================== */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --schwarz: #000;
  --balken: #2e2723;          /* Navigationsleiste */
  --pergament: #e4dcd2;       /* Haupttext, Name */
  --stein: #b9ada0;           /* Nebentext */
  --glut: #d8b27a;            /* Links, Hover, Bokeh-Ton */
  --rahmen: #3d332c;

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --text: "Alegreya", Georgia, "Times New Roman", serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--pergament);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  min-height: 100vh;
}

#bokeh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.topbar, main, .fuss { position: relative; z-index: 1; }

a { color: var(--glut); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pergament); }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 4px; border-radius: 2px; }

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

/* ---------- Navigation ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem clamp(1rem, 6vw, 5rem);
  background: color-mix(in srgb, var(--balken) 92%, transparent);
  backdrop-filter: blur(6px);
}
.topbar__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.topbar__nav a {
  color: var(--pergament);
  text-decoration: none;
  font-size: 1.15rem;
}
.topbar__nav a:hover { color: var(--glut); }

/* Runde Profil-Symbole (Monogramme) */
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.social a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--pergament);
  color: var(--balken);
  font-family: var(--text);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s;
}
.social a:hover { background: var(--glut); color: var(--schwarz); }
.social--gross a { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }

/* Amazon und Facebook: Kreis mit ausgestanztem Logo, die Farbe kommt aus background-color */
.social a.social__icon {
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.social__icon--amazon   { --icon: url("../images/icons/amazon.png"); }
.social__icon--facebook { --icon: url("../images/icons/facebook.png"); }
/* LovelyBooks: Schrift in Hintergrundfarbe, damit sie wie ausgestanzt wirkt */
.autor__text .social a { color: var(--schwarz); }

/* ---------- Kopfbereich ---------- */
.hero {
  text-align: center;
  padding: clamp(3rem, 9vw, 6rem) 1rem clamp(2rem, 6vw, 4rem);
}
.hero__tagline {
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  color: var(--stein);
  letter-spacing: .02em;
}
.hero__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 10.5vw, 8.5rem);
  line-height: 1;
  letter-spacing: .01em;
  /* leicht geprägte, steinerne Wirkung wie eingemeißelt */
  background: linear-gradient(180deg, #f3ece4 0%, #d4c9bd 55%, #a99c8e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(216,178,122,.15));
}

/* ---------- Abschnittstitel ---------- */
.abschnitt-titel {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 clamp(2rem, 6vw, 4.5rem);
  color: var(--pergament);
}
.abschnitt-titel--links { text-align: left; margin-bottom: 1rem; }

/* ---------- Bücher ---------- */
.buecher { padding: 2rem clamp(1rem, 5vw, 4rem) 5rem; }

.regal {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.titel { text-align: center; }
.titel h3 {
  margin: 1.75rem 0 .25rem;
  font-family: var(--text);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
}
.titel p { margin: 0; color: var(--stein); font-size: 1rem; line-height: 1.45; }

/* 3D-Buch aus einem flachen Cover */
.buch {
  --dicke: 22px;
  display: block;
  width: min(15rem, 100%);
  margin: 0 auto;
  perspective: 1400px;
}
.buch__koerper {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform: rotateY(-14deg);
  transition: transform .5s ease;
}
.buch:hover .buch__koerper,
.buch:focus-visible .buch__koerper { transform: rotateY(-26deg); }

.buch__koerper img {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 1px 3px 3px 1px;
  /* warmer Lichtschein wie in der Vorlage */
  box-shadow:
    0 0 28px 6px rgba(216, 178, 122, .22),
    0 18px 40px rgba(0, 0, 0, .9);
}
/* Falz-Schatten am Buchrücken */
.buch__koerper::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10%;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.25) 40%, transparent);
  pointer-events: none;
}
/* Papierkante rechts */
.buch__seiten {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 100%;
  width: var(--dicke);
  transform-origin: left center;
  transform: rotateY(90deg);
  background:
    repeating-linear-gradient(90deg, #f3efe8 0 1px, #d9d3c9 1px 2px),
    #eee;
  box-shadow: inset 0 0 6px rgba(0,0,0,.35);
}

/* Variante für bereits fertig gerenderte 3D-Cover */
.buch--fertig { perspective: none; }
.buch--fertig .buch__koerper,
.buch--fertig:hover .buch__koerper { transform: none; }
.buch--fertig .buch__koerper::before,
.buch--fertig .buch__seiten { display: none; }
.buch--fertig .buch__koerper img {
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 0 22px rgba(216, 178, 122, .25));
}

@media (prefers-reduced-motion: reduce) {
  .buch__koerper { transition: none; }
}

/* ---------- Über den Autor ---------- */
.autor {
  max-width: 68rem;
  margin: 0 auto;
  padding: 3rem clamp(1rem, 5vw, 4rem) 5rem;
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}
.autor__foto {
  width: 100%;
  border: 5px solid var(--rahmen);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.autor__text { max-width: 44rem; }
.autor__text p { margin: 0 0 1rem; color: var(--pergament); font-size: 1.05rem; line-height: 1.65; }
.autor__text .social { margin-top: .5rem; }

/* ---------- Newsletter ---------- */
.newsletter {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 5vw, 4rem) 5rem;
  text-align: center;
}
.newsletter__text { margin: 0 0 1.5rem; color: var(--pergament); font-size: 1.05rem; line-height: 1.65; }
.newsletter__formular { display: flex; justify-content: center; }
/* Einwilligungstext im EmailOctopus-Formular ist sonst dunkelgrau auf Schwarz */
.newsletter__formular .emailoctopus-form-row-consent label { color: var(--stein) !important; font-size: .9rem !important; line-height: 1.5 !important; }

/* ---------- Fußzeile ---------- */
.fuss {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  font-size: .9rem;
  color: var(--stein);
  font-variant: small-caps;
  letter-spacing: .04em;
}
.fuss p { margin: 0; }
.fuss a { color: var(--stein); }
.fuss a:hover { color: var(--pergament); }
.trenner { margin: 0 .6em; color: var(--glut); font-variant: normal; }

.reihe-info { max-width: 44rem; margin: 3.5rem auto 0; text-align: center; }
.reihe-info p { margin: 0 0 1rem; color: var(--pergament); font-size: 1.05rem; line-height: 1.65; }
.reihe-info p:last-child { margin-bottom: 0; }
.reihe-info .reihe-info__auftakt { margin-bottom: .35rem; color: var(--glut); font-weight: 700; font-size: 1.2rem; }
.reihe-info p + .reihe-info__auftakt { margin-top: 2rem; }

.alle-buecher { text-align: center; margin: 3.5rem 0 0; font-size: 1.2rem; }

/* Fertige 3D-Cover etwas breiter, da das PNG Rand und Buchkante enthält */
.buch.buch--fertig { width: min(17.5rem, 100%); }

/* ---------- Bücherseite ---------- */
.seitenkopf { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem 1rem; }
.seitenkopf__titel {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1;
  background: linear-gradient(180deg, #f3ece4 0%, #d4c9bd 55%, #a99c8e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.genre-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; font-size: 1.15rem; }
.genre-nav a { color: var(--stein); text-decoration: none; }
.genre-nav a:hover { color: var(--glut); }
.topbar__nav a[aria-current="page"] { color: var(--glut); }

.genre { padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 4rem) 1rem; }
.genre .abschnitt-titel { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

.cover-raster {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem clamp(1.25rem, 4vw, 3rem);
}
.cover { text-align: center; }
.cover a { display: block; }
.cover img {
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 24px 4px rgba(216, 178, 122, .16), 0 14px 32px rgba(0, 0, 0, .85);
}
.cover a:hover img { box-shadow: 0 0 30px 8px rgba(216, 178, 122, .32), 0 14px 32px rgba(0, 0, 0, .85); }
.cover h3, .cover h4 { margin: 1.25rem 0 .2rem; font-weight: 400; font-size: 1.3rem; line-height: 1.25; }

/* Pseudonyme: Name + Genre über dem jeweiligen Cover-Raster */
.pseudonym + .pseudonym { margin-top: clamp(3.5rem, 8vw, 6rem); }
.pseudonym__name { margin: 0; text-align: center; font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.2; color: var(--glut); }
.pseudonym__genre { margin: .25rem 0 clamp(1.5rem, 4vw, 2.5rem); text-align: center; color: var(--stein); font-size: 1.1rem; }
.cover p { margin: 0; color: var(--stein); font-size: 1rem; }

/* ---------- Buchkarte (Popup, js/buchkarte.js) ---------- */
html:has(.karte[open]) { overflow: hidden; }
.karte {
  width: min(52rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  background: var(--balken);
  color: var(--pergament);
  box-shadow: 0 0 40px 6px rgba(216, 178, 122, .18), 0 24px 60px rgba(0, 0, 0, .9);
}
.karte::backdrop { background: rgba(0, 0, 0, .92); }
.karte__rahmen {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 1.75rem;
  align-items: start;
}
.karte__zu {
  position: absolute;
  z-index: 1;
  top: .5rem;
  right: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--balken) 85%, transparent);
  color: var(--stein);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.karte__zu:hover, .karte__zu:focus-visible { color: var(--glut); }
.karte__cover {
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .7);
}
.karte__titel { margin: 0 2rem .2rem 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
.karte__reihe { margin: 0 0 1.25rem; color: var(--stein); font-size: 1rem; }
.karte__inhalt p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.65; }
.karte__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.knopf {
  display: inline-block;
  padding: .65rem 1.25rem;
  border: 1px solid var(--glut);
  border-radius: 3px;
  background: var(--glut);
  color: var(--schwarz);
  font-family: var(--text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.knopf:hover { background: transparent; color: var(--glut); }
.knopf:disabled, .knopf:disabled:hover {
  border-color: var(--rahmen);
  background: var(--rahmen);
  color: var(--stein);
  opacity: .6;
  cursor: not-allowed;
}
@media (max-width: 40rem) {
  .karte__rahmen { grid-template-columns: 1fr; gap: 1.25rem; }
  .karte__cover { max-width: 10rem; margin: 0 auto; }
  .karte__titel { margin-right: 0; text-align: center; }
  .karte__reihe { text-align: center; }
  .karte__knoepfe .knopf { flex: 1 1 100%; text-align: center; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.textseite {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.textseite h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1.5rem; }
.textseite h2 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; margin: 2rem 0 .5rem; }

/* ---------- Responsiv ----------
   Tablet: bis 52rem (832px) · Handy: bis 40rem (640px) · kleines Handy: bis 22rem (352px) */
@media (max-width: 52rem) {
  .regal { gap: 2.5rem 1.25rem; }
  .titel h3 { font-size: 1.25rem; margin-top: 1.25rem; }
  .autor { grid-template-columns: minmax(9rem, 11rem) 1fr; }
  .cover-raster { gap: 2.5rem 1.5rem; }
}
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }

  /* Kopfleiste einzeilig: Menü links, Symbole rechts */
  .topbar { padding: .55rem 1rem; gap: .75rem; }
  .topbar__nav { gap: .25rem .9rem; }
  .topbar__nav a { font-size: 1rem; }
  .topbar .social { gap: .35rem; flex-wrap: nowrap; }
  .topbar .social a { width: 1.75rem; height: 1.75rem; font-size: .85rem; }

  .hero { padding: 2.5rem 1rem 1.5rem; }
  .abschnitt-titel { margin-bottom: 2rem; }

  .buecher { padding: 1.5rem 1rem 4rem; }
  .regal { grid-template-columns: 1fr; max-width: 15rem; gap: 3rem; }
  .reihe-info { margin-top: 3rem; }
  .reihe-info p:not(.reihe-info__auftakt) { text-align: left; }

  .autor { grid-template-columns: 1fr; justify-items: center; padding: 2rem 1rem 4rem; }
  .autor__foto { max-width: 12rem; }
  .abschnitt-titel--links { text-align: center; }
  .autor__text .social { justify-content: center; }

  .newsletter { padding: 0 1rem 4rem; }

  .genre { padding: 3rem 1rem .5rem; }
  .genre-nav { gap: .35rem 1.25rem; font-size: 1.05rem; }
  .cover-raster { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .cover h3, .cover h4 { margin-top: .9rem; font-size: 1.1rem; }
  .cover p { font-size: .9rem; line-height: 1.4; }

  /* Fußzeile: Copyright oben, Links darunter */
  .fuss #jahr + .trenner { display: block; height: .35rem; overflow: hidden; color: transparent; }
}
@media (max-width: 22rem) {
  .topbar { flex-direction: column; gap: .4rem; }
  .topbar__nav { justify-content: center; }
}