/*
Theme Name:   Polar Publishing
Theme URI:    https://polar-publishing.com
Description:  Child-Theme für Kadence. Design-System für Polar Publishing: Polarnacht, Aurora, Polarstern.
Author:       Polar Publishing
Author URI:   https://polar-publishing.com
Template:     kadence
Version:      1.6.2
Text Domain:  polar-publishing
*/

/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
  /* Farben aus dem Logo */
  --pp-polarnacht:   #001E3D;
  --pp-tiefblau:     #002443;
  --pp-stahlblau:    #4F748D;
  --pp-aurora:       #70D0E0;
  --pp-aurora-tief:  #3888A0;
  --pp-eisweiss:     #F4F7FA;
  --pp-weiss:        #FFFFFF;

  /* Abgeleitete Töne */
  --pp-nacht-tief:   #00152C;
  --pp-linie:        rgba(244, 247, 250, 0.14);
  --pp-linie-hell:   rgba(0, 30, 61, 0.12);
  --pp-text-hell:    rgba(244, 247, 250, 0.82);

  /* Lichtschein im Hero und hinter dem Cover */
  --pp-glanz-a:      rgba(112, 208, 224, 0.22);
  --pp-glanz-b:      rgba(56, 136, 160, 0.28);
  --pp-glanz-cover:  rgba(112, 208, 224, 0.45);

  /* Typografie */
  --pp-font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --pp-font-text:    "Literata", Georgia, "Times New Roman", serif;

  --pp-scale-xs:  0.833rem;
  --pp-scale-s:   0.94rem;
  --pp-scale-m:   1.0625rem;
  --pp-scale-l:   1.333rem;
  --pp-scale-xl:  1.777rem;
  --pp-scale-2xl: 2.369rem;
  --pp-scale-3xl: 3.157rem;
  --pp-scale-4xl: 4.209rem;

  /* Raster */
  --pp-mass:       1.5rem;
  --pp-sektion:    clamp(3.5rem, 8vw, 7rem);
  --pp-breite:     72rem;
  --pp-lesebreite: 34rem;
  --pp-radius:     4px;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

body {
  font-family: var(--pp-font-text);
  font-size: var(--pp-scale-m);
  line-height: 1.7;
  color: var(--pp-polarnacht);
  background-color: var(--pp-weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.pp-display {
  font-family: var(--pp-font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--pp-polarnacht);
  text-wrap: balance;
}

h1 { font-size: clamp(var(--pp-scale-2xl), 5.5vw, var(--pp-scale-4xl)); }
h2 { font-size: clamp(var(--pp-scale-xl), 4vw, var(--pp-scale-3xl)); }
h3 { font-size: var(--pp-scale-xl); }
h4 { font-size: var(--pp-scale-l); }

p, li { max-width: 68ch; }

a {
  color: var(--pp-stahlblau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--pp-aurora-tief); }

:focus-visible {
  outline: 2px solid var(--pp-aurora);
  outline-offset: 3px;
}

/* ==========================================================================
   3. Flächen
   --------------------------------------------------------------------------
   Jede Klasse funktioniert auf zwei Wegen: als eigene CSS-Klasse (pp-…)
   oder als Blockstil aus dem Editor (is-style-pp-…).
   ========================================================================== */

.pp-nacht,
.is-style-pp-nacht {
  background-color: var(--pp-polarnacht);
  color: var(--pp-text-hell);
}

.pp-nacht :is(h1, h2, h3, h4),
.is-style-pp-nacht :is(h1, h2, h3, h4) { color: var(--pp-eisweiss); }

.pp-nacht a,
.is-style-pp-nacht a { color: var(--pp-aurora); }

.pp-eis {
  background-color: var(--pp-eisweiss);
  color: var(--pp-polarnacht);
}

.pp-sektion {
  padding-block: var(--pp-sektion);
}

.pp-innen {
  max-width: var(--pp-breite);
  margin-inline: auto;
  padding-inline: var(--pp-mass);
}

.pp-lesetext {
  max-width: var(--pp-lesebreite);
}

/* ==========================================================================
   4. Hero — Polarnacht mit Aurora und Sternenfeld
   ========================================================================== */

.pp-hero,
.is-style-pp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 8%, var(--pp-glanz-a) 0%, transparent 55%),
    radial-gradient(80% 70% at 78% 0%, var(--pp-glanz-b) 0%, transparent 60%),
    linear-gradient(178deg, var(--pp-nacht-tief) 0%, var(--pp-polarnacht) 62%, var(--pp-tiefblau) 100%);
  color: var(--pp-eisweiss);
  padding-block: clamp(5rem, 14vw, 10rem);
}

.pp-hero::before,
.is-style-pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 61% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 83% 52%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 46% 88%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.6), transparent);
  pointer-events: none;
}

.pp-hero > *,
.is-style-pp-hero > * { position: relative; z-index: 1; }

.pp-hero :is(h1, h2),
.is-style-pp-hero :is(h1, h2) { color: var(--pp-eisweiss); }

.pp-hero__intro {
  font-size: var(--pp-scale-l);
  line-height: 1.55;
  color: var(--pp-text-hell);
  max-width: 42ch;
  margin-top: 1.4rem;
}

/* Startseite: Nordlicht mit Logo.
   Das Logo steht mittig im Bild, Überschrift, Text und Knopf sitzen
   zentriert darunter auf dem Eis. --pp-bild-h ist die Bildhöhe:
   bei voller Breite 44 % der Breite (Bild 1890 × 832), auf dem Handy
   fest 340 px, dann werden die Seiten des Bildes beschnitten. */
.pp-hero.pp-hero--bild {
  --pp-bild-h: 44vw;
  --pp-bild-verlauf: linear-gradient(180deg, transparent calc(var(--pp-bild-h) * 0.78), var(--pp-polarnacht) var(--pp-bild-h));
  padding-top: calc(var(--pp-bild-h) * 0.8);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  background:
    var(--pp-bild-verlauf),
    url("https://polar-publishing.com/wp-content/uploads/2026/09/startseite-nordlicht-1890.webp") center top / 100% auto no-repeat,
    var(--pp-polarnacht);
}

.pp-hero.pp-hero--bild::before { content: none; }

.pp-hero--bild h1 { font-size: clamp(var(--pp-scale-xl), 4.4vw, var(--pp-scale-3xl)); }

.pp-hero--bild .pp-hero__intro { margin-inline: auto; }

.pp-hero--bild .wp-block-buttons { justify-content: center; }

@media (max-width: 1024px) {
  .pp-hero.pp-hero--bild {
    background-image:
      var(--pp-bild-verlauf),
      url("https://polar-publishing.com/wp-content/uploads/2026/09/startseite-nordlicht-1024.webp");
  }
}

@media (max-width: 700px) {
  .pp-hero.pp-hero--bild {
    --pp-bild-h: 340px;
    background-size: auto, auto var(--pp-bild-h);
  }
}

/* ==========================================================================
   5. Polarstern als Leitmotiv
   ========================================================================== */

.pp-stern {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url("assets/img/polarstern.svg") center / contain no-repeat;
  mask: url("assets/img/polarstern.svg") center / contain no-repeat;
}

.pp-trenner,
.is-style-pp-trenner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-block: var(--pp-mass);
  color: var(--pp-aurora-tief);
}

.pp-trenner::before,
.pp-trenner::after,
.is-style-pp-trenner::before,
.is-style-pp-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.4;
}

.pp-trenner .pp-stern { font-size: 1.25rem; }

/* Sternchen statt Listenpunkt */
.pp-sternliste,
.is-style-pp-sternliste {
  list-style: none;
  padding-left: 0;
}

.pp-sternliste li,
.is-style-pp-sternliste li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.65rem;
}

.pp-sternliste li::before,
.is-style-pp-sternliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85em;
  height: 0.85em;
  background-color: var(--pp-aurora-tief);
  -webkit-mask: url("assets/img/polarstern.svg") center / contain no-repeat;
  mask: url("assets/img/polarstern.svg") center / contain no-repeat;
}

/* ==========================================================================
   6. Buttons
   --------------------------------------------------------------------------
   Der Stil sitzt nur am Link, nie am umgebenden Block.
   Helle Flächen: Polarnacht mit Eisweiß (Kontrast ca. 16:1).
   Dunkle Flächen: Aurora mit Nachtblau (Kontrast ca. 10:1).
   ========================================================================== */

.wp-block-button.pp-cta,
.wp-block-button.is-style-pp-cta {
  background: none;
  border: 0;
  padding: 0;
}

a.pp-cta,
.wp-block-button__link.pp-cta,
.wp-block-button.pp-cta .wp-block-button__link,
.wp-block-button.is-style-pp-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-m);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  padding: 0.8em 1.8em;
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-polarnacht);
  background-color: var(--pp-polarnacht);
  color: var(--pp-eisweiss);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

a.pp-cta:is(:hover, :focus-visible),
.wp-block-button__link.pp-cta:is(:hover, :focus-visible),
.wp-block-button.pp-cta .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button.is-style-pp-cta .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: var(--pp-aurora);
  border-color: var(--pp-aurora);
  color: var(--pp-nacht-tief);
}

/* Auf Polarnacht und im Hero */
:is(.pp-nacht, .pp-hero, .is-style-pp-nacht, .is-style-pp-hero) :is(a.pp-cta, .wp-block-button__link.pp-cta, .wp-block-button.pp-cta .wp-block-button__link, .wp-block-button.is-style-pp-cta .wp-block-button__link) {
  background-color: var(--pp-aurora);
  border-color: var(--pp-aurora);
  color: var(--pp-nacht-tief);
}

:is(.pp-nacht, .pp-hero, .is-style-pp-nacht, .is-style-pp-hero) :is(a.pp-cta, .wp-block-button__link.pp-cta, .wp-block-button.pp-cta .wp-block-button__link, .wp-block-button.is-style-pp-cta .wp-block-button__link):is(:hover, :focus-visible) {
  background-color: var(--pp-eisweiss);
  border-color: var(--pp-eisweiss);
  color: var(--pp-nacht-tief);
}

/* Zweitbutton mit Rahmen, z. B. „Leseprobe“ */
a.pp-cta--linie,
.wp-block-button__link.pp-cta--linie,
.wp-block-button.pp-cta--linie .wp-block-button__link {
  background-color: transparent;
  border-color: var(--pp-polarnacht);
  color: var(--pp-polarnacht);
}

:is(.pp-nacht, .pp-hero, .is-style-pp-nacht, .is-style-pp-hero) :is(a.pp-cta--linie, .wp-block-button__link.pp-cta--linie, .wp-block-button.pp-cta--linie .wp-block-button__link) {
  background-color: transparent;
  border-color: var(--pp-eisweiss);
  color: var(--pp-eisweiss);
}

/* ==========================================================================
   7. Bücher — Cover trägt die Seite, kein Kartenkasten
   --------------------------------------------------------------------------
   Cover werden nie beschnitten. Jedes Cover steht in einem Rahmen im
   Format 2:3 unten bündig, wie Bücher im Regal. So liegen die Titel
   darunter auf einer Linie, auch wenn die Formate verschieden sind.
   ========================================================================== */

.pp-buchraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(2.2rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 2.5rem;
}

/* Bei bis zu drei Büchern die Karten nicht auf die volle Breite ziehen. */
@media (min-width: 641px) {
  .pp-buchraster:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(auto-fill, minmax(170px, 260px));
  }
}



.pp-buch__bild {
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 1.1rem;
}

.pp-buch__bild a {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pp-buch__bild img,
.pp-buch__cover {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 2px;
  box-shadow: 0 16px 32px -16px rgba(0, 21, 44, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pp-buch:hover :is(.pp-buch__bild img, .pp-buch__cover) {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px -16px rgba(0, 21, 44, 0.65);
}

.pp-buch__titel {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-m);
  font-weight: 500;
  line-height: 1.25;
  margin: 0.15rem 0 0.2rem;
}

.pp-buch__autor {
  font-size: var(--pp-scale-xs);
  color: var(--pp-stahlblau);
  margin: 0;
}

/* Stahlblau statt Aurora-tief: auf Weiß nötig für lesbaren kleinen Text */
.pp-buch__reihe {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-stahlblau);
  margin: 0 0 0.2rem;
}

.pp-buch__link {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-xs);
  margin-top: 0.6rem;
}

.pp-buch__link a {
  color: var(--pp-polarnacht);
  text-decoration-color: var(--pp-aurora-tief);
}

.pp-buch__link a:hover { color: var(--pp-aurora-tief); }

/* Demnächst: Vorankündigungen auf der Startseite, sechs in einer Reihe */
.pp-buchraster.pp-buchraster--demnaechst { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .pp-buchraster.pp-buchraster--demnaechst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pp-buchraster.pp-buchraster--demnaechst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pp-buch__termin {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-xs);
  letter-spacing: 0.04em;
  color: var(--pp-aurora-tief);
}

.pp-buch.pp-buch > .pp-buch__termin { margin-top: 0.6rem; }

:is(.pp-nacht, .pp-hero) .pp-buch__termin { color: var(--pp-aurora); }

/* Platzhalter, solange es noch kein Cover gibt: Polarstern im Nachthimmel */
.pp-buch__bild.pp-buch__platzhalter {
  align-items: center;
  position: relative;
  border: 1px solid var(--pp-linie);
  border-radius: 2px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--pp-glanz-a), transparent 70%),
    var(--pp-nacht-tief);
}

.pp-buch__platzhalter::before {
  content: "";
  width: 28%;
  aspect-ratio: 1;
  background-color: var(--pp-aurora);
  opacity: 0.85;
  -webkit-mask: url("assets/img/polarstern.svg") center / contain no-repeat;
  mask: url("assets/img/polarstern.svg") center / contain no-repeat;
}

.pp-buch__platzhalter > p {
  position: absolute;
  margin: 0;
}

.pp-buch__titel a {
  color: inherit;
  text-decoration: none;
}

.pp-buch__titel a:is(:hover, :focus-visible) {
  color: var(--pp-aurora-tief);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Kadence setzt über .single-content eigene Abstände auf Absätze,
   Überschriften und Bilder. Die doppelte Klasse sticht sie aus. */
.pp-buch.pp-buch > * { margin-block: 0; }
.pp-buch.pp-buch > .pp-buch__bild { margin-bottom: 1.1rem; }
.pp-buch.pp-buch > .pp-buch__titel { margin-block: 0.15rem 0.2rem; }
.pp-buch.pp-buch > .pp-buch__link { margin-top: 0.6rem; }

/* Auf dunklem Grund reicht Aurora-tief nicht für kleinen Text */
:is(.pp-nacht, .pp-hero, .is-style-pp-nacht, .is-style-pp-hero) :is(.pp-buch__autor, .pp-buch__reihe, .pp-buch__link a) {
  color: var(--pp-aurora);
}

:is(.pp-nacht, .pp-hero, .is-style-pp-nacht, .is-style-pp-hero) .pp-buch__titel { color: var(--pp-eisweiss); }

/* ==========================================================================
   7b. Programm — Genres der Startseite
   ========================================================================== */

.pp-programm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  margin-top: 2.5rem;
}

.pp-programm > * { margin-block: 0; }

.pp-programm h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--pp-scale-l);
  margin: 0 0 0.5rem;
}

.pp-programm h3::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  background-color: var(--pp-aurora-tief);
  -webkit-mask: url("assets/img/polarstern.svg") center / contain no-repeat;
  mask: url("assets/img/polarstern.svg") center / contain no-repeat;
}

.pp-programm p { margin: 0; }

/* Abschnittsköpfe */
.pp-innen > :first-child { margin-top: 0; }

.pp-sektion__intro {
  font-size: var(--pp-scale-l);
  line-height: 1.55;
  max-width: 44ch;
  margin-top: 0.8rem;
}

.pp-nacht .pp-sektion__intro,
.is-style-pp-nacht .pp-sektion__intro { color: var(--pp-text-hell); }

/* ==========================================================================
   8. Buch-Hero — Titel links, Cover rechts
   --------------------------------------------------------------------------
   Gehört zur Block-Vorlage „Buch-Hero mit Cover“.
   ========================================================================== */

.pp-buchhero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 320px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.pp-buchhero__text > :first-child { margin-top: 0; }

.pp-buchhero__text .pp-buch__reihe {
  font-size: var(--pp-scale-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.pp-buchhero__text :is(h1, h2) { margin-top: 0; }

.pp-buchhero .wp-block-buttons {
  margin-top: 2.2rem;
  gap: 0.8rem;
}

.pp-buchhero__cover {
  margin: 0;
  width: 100%;
}

.pp-buchhero__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 34px 60px -28px rgba(0, 0, 0, 0.8),
    0 0 90px -30px var(--pp-glanz-cover),
    0 0 0 1px rgba(244, 247, 250, 0.08);
}

@media (max-width: 782px) {
  .pp-buchhero__raster {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .pp-buchhero__cover {
    order: -1;
    max-width: 210px;
  }
}

/* Untertitel und Autorzeile unter dem Buchtitel.
   Der Elternselektor sticht die Absatzabstände von Kadence aus. */
.pp-buchhero__text > .pp-buchhero__zusatz {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-l);
  line-height: 1.35;
  color: var(--pp-eisweiss);
  max-width: 34ch;
  margin: 0.9rem 0 0;
}

.pp-buchhero__text > .pp-buchhero__autor {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-m);
  color: var(--pp-text-hell);
  margin: 0.6rem 0 0;
}

.pp-buchhero__text > .pp-buchhero__autor a {
  color: var(--pp-aurora);
  text-underline-offset: 0.2em;
}

.pp-buchhero__text > .pp-hero__intro { margin-top: 1.6rem; }

/* Angaben zum Buch: Beschriftung links, Wert rechts */
.pp-angaben {
  max-width: 40rem;
  margin-top: 2rem;
}

.pp-angaben.pp-angaben > p {
  margin: 0;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--pp-linie-hell);
}

.pp-angaben.pp-angaben > p:first-child { border-top: 1px solid var(--pp-linie-hell); }

.pp-angaben strong {
  display: inline-block;
  width: 10.5rem;
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-stahlblau);
}

.pp-angaben + .wp-block-buttons,
.pp-baende + .wp-block-buttons { margin-top: 2.2rem; }

@media (max-width: 640px) {
  .pp-angaben strong {
    display: block;
    width: auto;
    margin-bottom: 0.15rem;
  }
}

.pp-kleingedruckt {
  font-size: var(--pp-scale-xs);
  color: var(--pp-stahlblau);
}

/* ==========================================================================
   9. Autorinnen und Autoren
   ========================================================================== */

.pp-autorenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.pp-autor__portrait {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.1rem;
}

.pp-autor__name {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-l);
  margin: 0 0 0.35rem;
}

.pp-autor__rolle {
  font-size: var(--pp-scale-xs);
  color: var(--pp-stahlblau);
  margin: 0 0 0.9rem;
}

/* Doppelte Klasse sticht die Absatzabstände von Kadence aus */
.pp-autor.pp-autor > * { margin-block: 0; }
.pp-autor.pp-autor > .pp-autor__rolle { margin: 0.3rem 0 0.8rem; }
.pp-autor.pp-autor > .pp-buch__link { margin-top: 0.8rem; }
.pp-autor.pp-autor > .pp-autor__cover { margin: 0 0 1.3rem; }

/* Cover über dem Namen, alle gleich hoch und unten bündig */
.pp-autor__cover a { display: inline-block; }

.pp-autor__cover img {
  display: block;
  width: auto;
  height: 180px;
  border-radius: 2px;
  box-shadow: 0 16px 32px -16px rgba(0, 21, 44, 0.6);
  transition: transform 0.2s ease;
}

.pp-autor:hover .pp-autor__cover img { transform: translateY(-4px); }

.pp-autor__name a {
  color: inherit;
  text-decoration: none;
}

.pp-autor__name a:is(:hover, :focus-visible) {
  color: var(--pp-aurora-tief);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   10. Blog
   ========================================================================== */

.pp-beitrag {
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--pp-linie-hell);
}

.pp-beitrag__meta {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-xs);
  color: var(--pp-stahlblau);
  margin-bottom: 0.5rem;
}

.pp-beitrag__titel {
  font-size: var(--pp-scale-xl);
  margin: 0 0 0.6rem;
}

.pp-beitrag__titel a { color: inherit; text-decoration: none; }
.pp-beitrag__titel a:hover { color: var(--pp-aurora-tief); }

.entry-content > * { margin-block: 1.15em; }

/* Flächige Abschnitte stoßen ohne Lücke aneinander */
.entry-content > :is(.pp-hero, .pp-sektion, .pp-nacht, .pp-eis, .is-style-pp-hero, .is-style-pp-nacht) {
  margin-block: 0;
}

/* ==========================================================================
   11. Formulare
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: var(--pp-font-text);
  font-size: var(--pp-scale-m);
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid var(--pp-linie-hell);
  border-radius: var(--pp-radius);
  background-color: var(--pp-weiss);
  color: var(--pp-polarnacht);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--pp-aurora-tief);
  outline: 2px solid rgba(112, 208, 224, 0.35);
  outline-offset: 1px;
}

label {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-s);
  display: block;
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   12. Kopf und Fuß
   ========================================================================== */

.site-header .site-title,
.site-branding .site-title {
  font-family: var(--pp-font-display);
  letter-spacing: 0.04em;
}

.site-footer,
.pp-fuss {
  background-color: var(--pp-nacht-tief);
  color: var(--pp-text-hell);
  padding-block: 4rem 2.5rem;
}

.pp-fuss a { color: var(--pp-eisweiss); text-decoration: none; }
.pp-fuss a:hover { color: var(--pp-aurora); text-decoration: underline; }

/* Kadence-Fußzeile: Copyright links, Rechtslinks rechts.
   Kadence färbt die Links über #colophon, daher die ID im Selektor. */
.site-footer { padding-block: 1rem; }

.site-footer .site-footer-row { align-items: center; }

.site-footer .footer-html {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-s);
  color: var(--pp-text-hell);
}

#colophon.site-footer .footer-navigation .footer-menu-container > ul > li > a {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-s);
  color: var(--pp-text-hell);
  text-decoration: none;
}

#colophon.site-footer .footer-navigation .footer-menu-container > ul > li > a:is(:hover, :focus-visible) {
  color: var(--pp-aurora);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pp-fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
}

.pp-fuss__titel {
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-s);
  color: var(--pp-eisweiss);
  margin: 0 0 0.9rem;
}

.pp-fuss ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--pp-scale-s);
  line-height: 2;
}

.pp-fuss__recht {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pp-linie);
  font-size: var(--pp-scale-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

/* Sprachumschalter im Kopf (Shortcode [pp_sprachen], Polylang) */
.pp-sprachwahl {
  position: relative;
  font-family: var(--pp-font-display);
  font-size: var(--pp-scale-s);
  line-height: 1.2;
}

.pp-sprachwahl > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.65em;
  border: 1px solid var(--pp-linie-hell);
  border-radius: var(--pp-radius);
  color: var(--pp-polarnacht);
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.pp-sprachwahl > summary::-webkit-details-marker { display: none; }

.pp-sprachwahl > summary::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.1em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.pp-sprachwahl[open] > summary::after { transform: translateY(0.12em) rotate(225deg); }

.pp-sprachwahl > summary:hover,
.pp-sprachwahl[open] > summary { border-color: var(--pp-aurora-tief); }

.pp-sprachwahl__globus { flex: none; }

.pp-sprachwahl .pp-sprachwahl__liste {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 1000;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background-color: var(--pp-polarnacht);
  border: 1px solid rgba(112, 208, 224, 0.3);
  border-radius: var(--pp-radius);
  box-shadow: 0 12px 32px rgba(0, 21, 44, 0.28);
}

.pp-sprachwahl .pp-sprachwahl__liste li { margin: 0; }

.pp-sprachwahl .pp-sprachwahl__liste a {
  display: block;
  padding: 0.5rem 1.1rem;
  color: var(--pp-eisweiss);
  text-decoration: none;
}

.pp-sprachwahl .pp-sprachwahl__liste a:is(:hover, :focus-visible) {
  background-color: rgba(112, 208, 224, 0.12);
  color: var(--pp-aurora);
}

.pp-sprachwahl .pp-sprachwahl__liste a[aria-current] { color: var(--pp-aurora); }

/* ==========================================================================
   13. Landingpages — Haken für buchspezifische Farben
   ==========================================================================
   Jede Buch- und Reihenseite bekommt die Body-Klasse buch-{Titelform}
   und überschreibt nur die Tokens, und zwar nur im Inhaltsbereich
   (#primary). Kopf, Menü und Fuß bleiben im Verlagsblau.
   Farben sind aus dem jeweiligen Cover abgenommen.
   ========================================================================== */

.pp-buchseite {
  --pp-sektion: clamp(4rem, 9vw, 8rem);
}

/* Das Land zwischen uns: Pergament, Ochsenblut, Andalusien */
:is(.buch-das-land-zwischen-uns-band-1, .buch-das-land-zwischen-uns) #primary {
  --pp-nacht-tief:  #1C1310;
  --pp-polarnacht:  #2E1E17;
  --pp-tiefblau:    #3F2A1F;
  --pp-aurora:      #E3C99A;
  --pp-aurora-tief: #8A3324;
  --pp-stahlblau:   #6B5747;
  --pp-eisweiss:    #F4EEE3;
  --pp-text-hell:   rgba(244, 238, 227, 0.84);
  --pp-linie-hell:  rgba(46, 30, 23, 0.14);
  --pp-glanz-a:     rgba(227, 201, 154, 0.20);
  --pp-glanz-b:     rgba(138, 51, 36, 0.35);
  --pp-glanz-cover: rgba(227, 201, 154, 0.35);
}

/* Wer trägt Deutschland?: Schwarz, Rot, Gold */
.buch-wer-traegt-deutschland #primary {
  --pp-nacht-tief:  #0E0E0F;
  --pp-polarnacht:  #1A1A1C;
  --pp-tiefblau:    #262427;
  --pp-aurora:      #E9B949;
  --pp-aurora-tief: #A91E1B;
  --pp-stahlblau:   #5C5C60;
  --pp-eisweiss:    #F5F3EF;
  --pp-text-hell:   rgba(245, 243, 239, 0.84);
  --pp-linie-hell:  rgba(26, 26, 28, 0.14);
  --pp-glanz-a:     rgba(233, 185, 73, 0.16);
  --pp-glanz-b:     rgba(169, 30, 27, 0.30);
  --pp-glanz-cover: rgba(233, 185, 73, 0.30);
}

/* Der Alltag darf leichter werden: Abendsonne, Sand, Olivgrün */
.buch-der-alltag-darf-leichter-werden #primary {
  --pp-nacht-tief:  #141F33;
  --pp-polarnacht:  #1C2A44;
  --pp-tiefblau:    #2B3A52;
  --pp-aurora:      #F1CD93;
  --pp-aurora-tief: #5B6B33;
  --pp-stahlblau:   #5A6473;
  --pp-eisweiss:    #F7EFE3;
  --pp-text-hell:   rgba(247, 239, 227, 0.84);
  --pp-glanz-a:     rgba(241, 205, 147, 0.24);
  --pp-glanz-b:     rgba(91, 107, 51, 0.30);
  --pp-glanz-cover: rgba(241, 205, 147, 0.35);
}

/* Der Clown, der das Lachen vergaß: Pflaume, Pfirsich, Kirschblüte */
.buch-der-clown-der-das-lachen-vergass #primary {
  --pp-nacht-tief:  #1F1219;
  --pp-polarnacht:  #2F1B26;
  --pp-tiefblau:    #412634;
  --pp-aurora:      #F2C4A8;
  --pp-aurora-tief: #8C3B55;
  --pp-stahlblau:   #6E5A63;
  --pp-eisweiss:    #F8EFE9;
  --pp-text-hell:   rgba(248, 239, 233, 0.84);
  --pp-linie-hell:  rgba(47, 27, 38, 0.14);
  --pp-glanz-a:     rgba(242, 196, 168, 0.24);
  --pp-glanz-b:     rgba(140, 59, 85, 0.32);
  --pp-glanz-cover: rgba(242, 196, 168, 0.35);
}

/* Der Krankenhaus-Kompass / Vertriebs-Kompass: Klinikblau, Kompassnadel */
:is(.buch-der-krankenhaus-kompass, .buch-vertriebs-kompass) #primary {
  --pp-nacht-tief:  #0B1B33;
  --pp-polarnacht:  #12284A;
  --pp-tiefblau:    #1D3A63;
  --pp-aurora:      #8EC5F0;
  --pp-aurora-tief: #2F6EA6;
  --pp-stahlblau:   #52667D;
  --pp-eisweiss:    #F2F6FA;
  --pp-text-hell:   rgba(242, 246, 250, 0.84);
  --pp-glanz-a:     rgba(142, 197, 240, 0.22);
  --pp-glanz-b:     rgba(47, 110, 166, 0.30);
  --pp-glanz-cover: rgba(142, 197, 240, 0.40);
}

/* Das Schweigen der Zikaden / Lorenzo Vitale: Nacht, Bronze, Zikadenflügel */
:is(.buch-das-schweigen-der-zikaden, .buch-lorenzo-vitale) #primary {
  --pp-nacht-tief:  #050607;
  --pp-polarnacht:  #111315;
  --pp-tiefblau:    #1C1B18;
  --pp-aurora:      #D9BF8E;
  --pp-aurora-tief: #85652F;
  --pp-stahlblau:   #635B4F;
  --pp-eisweiss:    #F3EEE5;
  --pp-text-hell:   rgba(243, 238, 229, 0.82);
  --pp-linie-hell:  rgba(17, 19, 21, 0.14);
  --pp-glanz-a:     rgba(217, 191, 142, 0.14);
  --pp-glanz-b:     rgba(133, 101, 47, 0.28);
  --pp-glanz-cover: rgba(217, 191, 142, 0.28);
}

/* ==========================================================================
   14. Barrierefreiheit und Reduktion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .pp-buch:hover .pp-buch__cover { transform: none; }
}

.pp-nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  :root { --pp-mass: 1.15rem; }
  .pp-buchraster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   14. Sternenhimmel auf blauen Flächen
   --------------------------------------------------------------------------
   Rechts ein dichteres Sternenfeld, das nach links ausblendet, damit der
   Text ruhig bleibt, dazu der Polarstern oben rechts. Auf Buchseiten steht
   das Cover rechts im Kopfbereich, dort gibt es nur die Sterne.
   ========================================================================== */

:is(.pp-nacht, .is-style-pp-nacht, .pp-hero, .is-style-pp-hero):not(.pp-hero--bild) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(.pp-nacht, .is-style-pp-nacht, .pp-hero, .is-style-pp-hero):not(.pp-hero--bild)::before {
  content: "";
  position: absolute;
  inset: 0 0 0 36%;
  z-index: -1;
  pointer-events: none;
  background: url("https://polar-publishing.com/wp-content/uploads/2026/10/sternenhimmel.webp") right top / 1000px 1000px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}

:is(.pp-nacht, .is-style-pp-nacht, .pp-hero, .is-style-pp-hero):not(.pp-hero--bild, .pp-buchhero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: clamp(0.5rem, 3vw, 3rem);
  right: clamp(1rem, 7vw, 7rem);
  width: clamp(110px, 17vw, 240px);
  aspect-ratio: 1;
  background:
    url("https://polar-publishing.com/wp-content/uploads/2026/10/polarstern.webp") center / contain no-repeat,
    radial-gradient(circle closest-side, rgba(112, 208, 224, 0.26), transparent) center / 100% 100% no-repeat;
  background:
    url("https://polar-publishing.com/wp-content/uploads/2026/10/polarstern.webp") center / contain no-repeat,
    radial-gradient(circle closest-side, color-mix(in srgb, var(--pp-aurora) 30%, transparent), transparent) center / 100% 100% no-repeat;
}

@media (max-width: 700px) {
  :is(.pp-nacht, .is-style-pp-nacht, .pp-hero, .is-style-pp-hero):not(.pp-hero--bild)::before {
    inset: 0;
    opacity: 0.6;
  }

  :is(.pp-nacht, .is-style-pp-nacht, .pp-hero, .is-style-pp-hero):not(.pp-hero--bild, .pp-buchhero)::after {
    width: 100px;
    top: 0.25rem;
    right: 0.25rem;
  }
}

/* ==========================================================================
   15. Blogbeiträge
   --------------------------------------------------------------------------
   Überschriften in Beiträgen kleiner als auf den Seiten, damit Fließtext
   und Gliederung zueinander passen.
   ========================================================================== */

.single-post .entry-title {
  font-size: clamp(var(--pp-scale-xl), 4.2vw, var(--pp-scale-2xl));
  line-height: 1.18;
}

.single-post .entry-content h2 {
  font-size: clamp(var(--pp-scale-l), 3vw, var(--pp-scale-xl));
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.single-post .entry-content h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}

.single-post .entry-content p,
.single-post .entry-content li {
  line-height: 1.75;
}

.single-post .entry-content .wp-block-buttons { margin-top: 2rem; }