/* Mediaplan Base – neutrale Defaults; Farben kommen aus dem Customizer */

/* Schriften liegen im Theme, nicht bei Google: keine Verbindung zu einem
   Drittanbieter, kein Einwilligungsbedarf, gleiche Optik auf jedem Geraet.
   Beide Familien stehen unter der SIL Open Font License (siehe assets/fonts/). */
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --sky: #3d7ea6;
  --sky-deep: #2f6285;
  --sky-deeper: #2f6285;
  --sky-bright: #5a96b8;
  --sky-soft: #a8c5d6;
  --sky-mist: #eef5f9;
  --sky-wash: #dceaf2;
  --blush: #f3eee9;
  --ink: #2a3a45;
  --ink-soft: #5a6d7a;
  --paper: #fbfcfe;
  --surface: #ffffff;
  --line: #d5e3ec;
  --accent: #3d7ea6;
  --font-body: "Mulish", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --shell: 1120px;
  --radius: 1.5rem;
  --radius-sm: 1rem;
  --radius-lg: 2rem;
  --header-h: 4.75rem;
  --shadow: 0 14px 40px rgba(43, 135, 218, 0.14);
  --shadow-soft: 0 8px 28px rgba(46, 163, 242, 0.1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(46, 163, 242, 0.12), transparent 50%),
    radial-gradient(80% 50% at 0% 100%, rgba(247, 233, 239, 0.55), transparent 45%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--sky-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5em;
  color: var(--sky-deep);
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
.muted { color: var(--ink-soft); }

.shell {
  width: min(100% - 2rem, var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--sky);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  z-index: 1000;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Von WordPress und vielen Plugins vorausgesetzt. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 0.6rem 1.1rem;
  background: var(--sky);
  color: #fff;
  border-radius: 999px;
  z-index: 1000;
}

/* Ausrichtung, Bildunterschriften, angeheftete Beitraege und Galerien: Klassen,
   die der Editor vergibt und die WordPress von jedem Theme erwartet. */
.alignleft {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}
.alignright {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}
.wp-caption img { display: block; }
.wp-caption-text,
.gallery-caption,
.wp-element-caption {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  text-align: center;
}
.sticky .post-card__title::before,
.post-card.sticky .post-card__title::before {
  content: "★";
  color: var(--sky);
  margin-right: 0.4rem;
}
.bypostauthor > .comment-body { border-left: 3px solid var(--sky); padding-left: 1rem; }
.entry__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.entry__pages a { text-decoration: none; }

.preview-banner {
  background: linear-gradient(90deg, var(--sky-deep), var(--sky));
  color: #eef7ff;
  font-size: 0.82rem;
  text-align: center;
  padding: 0.55rem 1rem;
}
.preview-banner a { color: #fff; font-weight: 700; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  position: relative;
}

.site-brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.site-brand__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.site-brand__text {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.15;
}
.site-brand__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sky);
  font-style: italic;
}
.site-brand__tag {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--sky-deep);
  background: var(--sky-mist);
}

/* Zweite Menüebene.
   header.php lässt zwei Ebenen zu, gestaltet war nur eine - ein Untermenü stand
   deshalb als sichtbare Aufzählung im Kopf und schob die Kopfzeile auf.

   Aufgeklappt wird über :hover und :focus-within, nicht über JavaScript. Das
   :focus-within ist der Grund: Wer mit der Tabulatortaste durch die Seite geht,
   käme sonst in Einträge, die er nicht sieht. Mit Fokus im Zweig klappt derselbe
   Zweig auf, ohne dass dafür Code laufen muss. */
.nav-list {
  position: relative;
}
.nav-list .menu-item-has-children {
  position: relative;
}
.nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: max(12rem, 100%);
  display: grid;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  /* Nicht display:none, sondern unsichtbar: So bleibt eine Überblendung möglich,
     und der Abstand von 0.35rem verhindert, dass das Menü zuklappt, während die
     Maus die Lücke zwischen Eintrag und Klappe überquert. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-list .menu-item-has-children:hover > .sub-menu,
.nav-list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-list .sub-menu a {
  display: block;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* Ein Hinweis, dass es weitergeht. Ohne ihn ist ein Zweig nicht von einem
   normalen Eintrag zu unterscheiden, und niemand fährt darüber. */
.nav-list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  margin-left: 0.45rem;
  vertical-align: 0.12em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  color: var(--sky-deep);
}

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-soft);
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0.35rem; }

  /* Auf dem Handy keine Klappe: Das aufgeklappte Menü ist hier schon eine eigene
     Fläche, eine zweite darüber wäre nicht zu treffen. Die zweite Ebene steht
     deshalb eingerückt untereinander und ist immer sichtbar. Damit ist auch jeder
     Eintrag mit einem Fingertipp erreichbar - ein Zweig, der erst antippbar wird,
     nachdem man ihn geöffnet hat, kostet auf einem Telefon regelmäßig Besucher. */
  .nav-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
    border: 0;
    background: none;
    padding: 0.15rem 0 0.15rem 1rem;
    border-left: 2px solid var(--line);
    margin: 0.15rem 0 0.35rem 0.95rem;
    min-width: 0;
  }
  .nav-list .sub-menu a { white-space: normal; }
  .nav-list .menu-item-has-children > a::after { display: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); color: inherit; }
.btn--primary {
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(46, 163, 242, 0.35);
}
.btn--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--sky-bright) 0%, var(--sky) 100%);
}
.btn--ghost {
  background: rgba(255,255,255,.85);
  border-color: color-mix(in srgb, var(--sky) 45%, white);
  color: var(--sky-deep);
}
.btn--ghost:hover {
  border-color: var(--sky);
  background: var(--sky-mist);
  color: var(--sky-deep);
}
.btn--light {
  background: #fff;
  color: var(--sky-deep);
}
.text-link {
  font-weight: 700;
  text-decoration: none;
  color: var(--sky);
  border-bottom: 1px solid color-mix(in srgb, var(--sky) 45%, transparent);
}
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.75rem;
}

/* Hero */
.hero {
  position: relative;
  padding: clamp(2.75rem, 7vw, 5rem) 0;
  overflow: hidden;
  background:
    linear-gradient(125deg, rgba(46,163,242,.16) 0%, rgba(255,255,255,.9) 45%, rgba(247,233,239,.45) 100%),
    radial-gradient(90% 80% at 95% 0%, rgba(46,163,242,.28), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(168,216,248,.4), transparent 50%),
    var(--sky-mist);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  z-index: 1;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}
.hero__title {
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  margin-bottom: 0.75rem;
  color: var(--sky);
  font-style: italic;
  animation: rise 0.7s ease both;
}
.hero__lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 36ch;
  animation: rise 0.7s ease 0.08s both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  animation: rise 0.7s ease 0.16s both;
}
.hero__media {
  position: relative;
  animation: fade 1s ease both;
}
.hero__img,
.hero__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 5px solid rgba(255,255,255,.85);
  background: linear-gradient(145deg, var(--sky-soft), var(--sky-wash));
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: auto -10% -10% auto;
  width: 48%;
  height: 48%;
  background: radial-gradient(circle, rgba(46,163,242,.35), transparent 70%);
  z-index: -1;
  border-radius: 50%;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page hero */
.page-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4rem) 0 2.75rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 52%, var(--sky-bright) 100%);
  color: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  mix-blend-mode: soft-light;
}
.page-hero .shell { position: relative; z-index: 1; }
.page-hero .eyebrow { color: rgba(255,255,255,.88); }
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  max-width: 16ch;
  font-style: italic;
}
.page-hero p {
  color: rgba(255,255,255,.92);
  max-width: 52ch;
  font-size: 1.1rem;
}
.page-hero__text { color: rgba(255,255,255,.92); max-width: 52ch; font-size: 1.1rem; }

/* Auszeichnung über der Überschrift.
   Bewusst als Marke gestaltet und nicht als Kennzeile: Sie erscheint nur, wenn
   sie etwas sagt, das die Überschrift nicht sagt - etwa dass hier ein Gutschein
   eingelöst wird. Wer sie wie eine Kennzeile aussehen lässt, verleitet dazu, sie
   überall als Schmuck zu setzen. */
/* Bild im Kopfbereich, etwa das Motiv eines Gutscheins.
   Es steht neben dem Text und nicht darunter: Ein Gutschein soll auf einen Blick
   wiedererkannt werden, und unter drei Zeilen Text liegt er schon halb unter der
   Bildkante. Das Raster gilt nur für den Kopf mit Bild, damit sich an jeder
   anderen Seite nichts ändert.
   Erst ab 62rem zwei Spalten: Eine Bildspalte neben einer Überschrift, die selbst
   16 Zeichen breit sein darf, ergibt darunter zwei zu schmale Spalten. */
.page-hero--mit-bild .shell {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .page-hero--mit-bild .shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }
  /* Zwei Motive nebeneinander brauchen mehr Platz. Ohne diese Zeile wäre jede
     Karte 10rem breit - schmaler als eine Handfläche und damit wertlos für den
     einen Zweck, den sie hat: wiedererkannt zu werden. */
  .page-hero--mehrere-bilder .shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  }
}
.page-hero__bild {
  margin: 0;
  max-width: 26rem;
}
/* Mehrere Motive stehen nebeneinander und nicht übereinander: Untereinander
   wäre der Kopfbereich am Rechner höher als der Bildschirm, und die Karten
   liegen dann nicht mehr im Blick des Satzes, der sie erklärt. */
.page-hero__bild--mehrere {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 32rem;
}
/* Der Schatten ist kein Schmuck: Ein Motiv liegt auf dem farbigen Kopfbereich,
   und trägt es selbst hellere Töne derselben Farbe - eine Karte im Blau der
   Marke etwa -, verschwimmt seine Kante mit dem Hintergrund. Dann sieht man
   nicht mehr, dass dort ein Stück Papier abgebildet ist, und genau darum geht
   es an dieser Stelle. */
.page-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.1);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
/* Ein Rückfall für Dateien, deren Maße niemand kennt - eine Adresse von einem
   fremden Server etwa. Bringt das Bild seine Maße mit, gilt sein eigenes
   Verhältnis; ein festes würde ein Motiv sonst mit leeren Streifen umgeben.
   Reserviert wird der Platz in beiden Fällen, sonst springt die Seite beim
   Nachladen. */
.page-hero__bild img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
}

.page-hero__marke {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pillars – Bildkacheln, Text steht in den Abschnitten darunter */
.pillars {
  display: grid;
  gap: 1.25rem;
  padding: 2rem 0 3rem;
}
@media (min-width: 800px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.65rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar--visual {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.85rem 1.25rem;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.pillar h2 { font-size: 1.45rem; color: var(--sky); margin: 0.35rem 0.35rem 0.25rem; }
.pillar p { color: var(--ink-soft); }
.pillar--visual .text-link { margin: 0.15rem 0.35rem 0; }
/* Alle Kacheln gleiche Fläche wie Bücher-Bild (quer, vollständig sichtbar) */
.pillar__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-sm);
  margin-bottom: 0.65rem;
  background: #e8f4fc;
  padding: 0.5rem;
}
.pillar__thumb--placeholder {
  min-height: 10rem;
}
#vortraege,
#buecher,
#seelsorge,
#ueber-mich {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Cards */
.latest { padding-bottom: 4rem; }
.latest__head { margin-bottom: 1.75rem; max-width: 40rem; }
.latest__more { margin-top: 2rem; }

.post-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.post-card__link { display: block; text-decoration: none; height: 100%; }
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sky-wash);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card__media-fill {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 50%),
    linear-gradient(135deg, var(--sky-soft), var(--sky));
}
.post-card__media-fill--audio {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
}
/* Plakette nach rechts: Auf einem Video-Standbild steht der Titel fast immer
   links oben – dort verdeckte sie das erste Wort. */
.post-card__badge {
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  background: var(--sky);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.post-card__body { padding: 1.2rem 1.25rem 1.35rem; }
.post-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 0.4rem;
}
.post-card__title { font-size: 1.2rem; margin: 0 0 0.45rem; }
.post-card__excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.75rem; }
.post-card__meta { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }

/* Bücher */
.books-intro {
  padding: 2.5rem 0 1rem;
}
.books-intro__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .books-intro__grid { grid-template-columns: 1fr 1fr; }
}
.books-intro__img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 4px solid #fff;
}

/* Pflichtangaben nach der Produktsicherheitsverordnung. Sie gehören ins Angebot,
   dürfen es aber nicht überstrahlen: kleiner Satz, ruhige Fläche, klare Kante. */
.produktangaben {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--line);
  background: var(--sky-wash, #eef5f9);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
}
.produktangaben__titel {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.produktangaben p {
  margin: 0 0 0.35rem;
  line-height: 1.55;
}
.produktangaben p:last-child {
  margin-bottom: 0;
}
.produktangaben__hinweis {
  color: var(--ink-soft);
}

/* Bücher-Katalog: eine Zeile pro Titel, voller Text (wie Live-Seite) */
.book-grid,
.book-list {
  display: grid;
  gap: 1.5rem;
  padding: 1rem 0 4rem;
}

.book-row {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 720px) {
  .book-row {
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    padding: 1.75rem 2rem;
  }
}
.book-row__cover {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, var(--sky-mist), var(--blush));
  border-radius: var(--radius-sm);
  padding: 1rem 0.85rem;
}
.book-row__cover img {
  width: 140px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 14px 28px rgba(43, 135, 218, 0.22);
}
.book-row__title {
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  margin: 0 0 0.35rem;
  color: var(--sky);
}
.book-row__subtitle {
  font-size: 0.95rem;
  color: var(--sky-deep);
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.book-row__text {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  max-width: 62ch;
}
.book-row__actions { margin-top: 0.25rem; }

/* Core-Block „Button“ in der Themefarbe. Die Editor-Ansicht zeigte ihn längst
   blau, die Website lieferte den schwarzen WordPress-Standard – wer eine Seite
   mit Blöcken baut, sah also etwas anderes als seine Besucher. Buttons mit
   eigener Farbwahl (.has-background) bleiben unangetastet. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: #fff;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
  background: linear-gradient(135deg, var(--sky-bright) 0%, var(--sky) 100%);
  color: #fff;
}
.wp-block-button > .wp-block-button__link {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  border: 2px solid var(--sky);
  color: var(--sky);
}

/* Gutenberg-Bücherseite: Pattern „Buch-Eintrag“
   Die Editor-Variante bringt mit wp-block-columns ihr eigenes Spaltenraster
   mit. Bliebe das Grid von oben aktiv, landete dieser eine Kindblock in der
   schmalen Coverspalte und der Text stünde einen Buchstaben breit. */
.wp-block-group.book-row {
  display: block;
}
/* Fließtext liest sich schmal besser, eine Liste aus Cover und Text braucht
   dagegen die volle Breite – sonst steht rechts die halbe Seite leer. Doppelte
   Klasse, weil .entry-content weiter unten steht und sonst gewinnt. */
.entry-content.entry-content--books,
.entry-content.entry-content--wide {
  max-width: none;
}
.entry-content--books > .book-row,
.entry-content--books > .wp-block-group.book-row {
  margin: 0 0 1.5rem;
}
.entry-content--books .book-row .wp-block-columns {
  gap: 2rem !important;
  align-items: start;
}
.entry-content--books .book-row .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 14px 28px rgba(43, 135, 218, 0.22);
}
.entry-content--books .book-row__title { color: var(--sky); }
.entry-content--books .book-row__subtitle {
  color: var(--sky-deep);
  font-weight: 600;
}
.entry-content--books .book-row__text { color: var(--ink-soft); max-width: 62ch; }
.talk-sections .talk-block + .talk-block { margin-top: 1.5rem; }
.talk-sections .post-grid { margin-top: 1rem; }

/* Optionales Kontaktformular (Pattern / Shortcode) */
.sp-contact {
  margin: 1.5rem 0;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  max-width: 40rem;
}
.sp-contact__title {
  color: var(--sky);
  margin-top: 0;
}
.sp-contact__field {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
}
.sp-contact__field label {
  font-weight: 600;
  font-size: 0.92rem;
}
.sp-contact__field input,
.sp-contact__field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.sp-contact__field textarea {
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 8rem;
}
.sp-contact__field input:focus,
.sp-contact__field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--sky) 45%, white);
  border-color: var(--sky);
}
.sp-contact__hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.sp-contact__consent {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
/* Kein Grid: Der Hinweis enthält einen Link, und im Grid würde jeder Textteil
   zu einer eigenen Zelle – der Satz risse mitten im Wort um. */
.sp-contact__consent label {
  display: block;
  position: relative;
  padding-left: 1.8rem;
  line-height: 1.5;
}
.sp-contact__consent input {
  position: absolute;
  left: 0;
  top: 0.2rem;
}
.sp-contact__actions { margin: 1.25rem 0 0.5rem; }
.sp-contact__actions .btn {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.sp-contact__notice {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0 0 1.25rem;
}
.sp-contact__notice--ok {
  background: #e8f7ef;
  color: #1a5c38;
}
.sp-contact__notice--error {
  background: #fdebec;
  color: #8a1c1c;
}
.sp-contact__hint { font-size: 0.85rem; margin: 0; }

/* Zwei kurze Felder nebeneinander – Postleitzahl und Ort gehören zusammen und
   sähen als zwei volle Zeilen unnötig auseinandergerissen aus. */
.sp-contact__row {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
}
@media (max-width: 599px) {
  .sp-contact__row { grid-template-columns: 1fr; }
}

/* Eine Gruppe von Auswahlkästchen. Ohne diese Regeln erbt das Kästchen die
   volle Breite und die runde Form der Textfelder – es wird zum Balken. */
fieldset.sp-contact__field {
  border: 0;
  padding: 0;
  min-width: 0;
}
fieldset.sp-contact__field legend {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0;
  margin-bottom: 0.35rem;
}
.sp-contact__field .wpcf7-list-item {
  display: block;
  margin: 0 0 0.4rem;
}
.sp-contact__field .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;
}
.sp-contact__field input[type="checkbox"],
.sp-contact__field input[type="radio"] {
  width: auto;
  padding: 0;
  border-radius: 0;
  accent-color: var(--sky);
  flex: none;
}

/* Formular-Plugins bringen eigenes Markup mit und sähen sonst wie rohe
   Browser-Felder aus. Bewusst über eine Liste bekannter Klassen statt über
   allgemeine Selektoren: WooCommerce hat eigene Stile und bliebe sonst nicht
   verschont. */
.wpcf7-form,
.wpforms-form,
.forminator-custom-form,
.nf-form-cont,
.gform_wrapper form,
.frm_forms form,
.mc4wp-form {
  max-width: 40rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.gform_wrapper form input[type="text"],
.gform_wrapper form input[type="email"],
.frm_forms form input[type="text"],
.frm_forms form input[type="email"],
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.wpcf7-form textarea,
.wpforms-form textarea,
.forminator-custom-form textarea,
.nf-form-cont textarea,
.gform_wrapper form textarea,
.frm_forms form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 8rem;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.forminator-custom-form input:focus,
.nf-form-cont input:focus,
.gform_wrapper form input:focus,
.frm_forms form input:focus,
.mc4wp-form input:focus {
  outline: 2px solid color-mix(in srgb, var(--sky) 45%, white);
  border-color: var(--sky);
}
.wpcf7-form label,
.wpforms-form label,
.nf-form-cont label,
.frm_forms form label {
  font-weight: 600;
  font-size: 0.92rem;
}
.wpcf7-form p { margin: 0 0 1rem; }

/* Der Honigtopf: ein Feld, das niemand sieht und das nur Bots ausfüllen.
   Aus dem Bild geschoben statt mit display:none - ein Skript, das das Stylesheet
   liest, würde ein verstecktes Feld sonst überspringen. Es steht außerdem nicht in
   der Tastaturreihenfolge (tabindex) und nicht in der Vorlesereihenfolge
   (aria-hidden), damit es niemanden aufhält, der ohne Blick auf den Bildschirm
   arbeitet. */
.sp-formularschutz {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sp-turnstile {
  margin: 0 0 1rem;
}
.wpcf7-form input[type="submit"],
.wpforms-form button[type="submit"],
.forminator-custom-form button[type="submit"],
.nf-form-cont input[type="button"],
.gform_wrapper form input[type="submit"],
.frm_forms form input[type="submit"],
.mc4wp-form input[type="submit"] {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--sky);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover,
.wpforms-form button[type="submit"]:hover,
.forminator-custom-form button[type="submit"]:hover,
.gform_wrapper form input[type="submit"]:hover,
.frm_forms form input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover {
  filter: brightness(0.95);
}
.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label {
  font-weight: 400;
  font-size: 0.9rem;
}
.wpcf7-not-valid-tip { color: #8a1c1c; font-size: 0.85rem; }
.wpcf7-response-output {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 1rem 0 0;
}

/* Legacy compact cards (falls noch genutzt) */
.book-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Home sections */
.home-section {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
}
.home-section__head {
  margin-bottom: 1.5rem;
  max-width: 48rem;
}
.home-section__head--narrow { max-width: 42rem; }
.home-section__more { margin-top: 1.5rem; }
.home-section--books { border-top: 0; padding-top: 1rem; }

/* Talks */
.talk-sections { padding: 2rem 0 4rem; display: grid; gap: 1.25rem; }
.talk-sections--home { padding: 0; }
.talk-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.talk-block h2 { font-size: 1.35rem; color: var(--sky); margin-bottom: 0.85rem; }
.talk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.talk-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--ink-soft);
  padding: 0.7rem 0.9rem;
  background: var(--sky-mist);
  border-radius: 999px;
  line-height: 1.45;
}
.talk-item__dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--sky);
}

/* Über mich */
.about {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 800px) {
  /* Die Stichpunkte sind meist kuerzer als die Fotos. Oben ausgerichtet bliebe
     darunter eine leere Ecke, deshalb steht die kuerzere Spalte mittig. */
  .about { grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; }
}
.about__facts {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}
.about__facts li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
/* Drei Fotos: links eine hohe Kachel, rechts zwei liegende uebereinander.
   Die hohe Kachel gehoert einem Hochformat - ein Querformat wird darin auf
   einen schmalen Streifen beschnitten.

   Die Kacheln geben die Form vor, nicht die Bilder: Im Editor stehen sie in
   einer <figure>, in der Customizer-Fassung als blankes <img> direkt im Raster.
   Deshalb sprechen die Regeln die Kinder des Rasters an und nicht die Bilder. */
.about__gallery {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.85rem;
}
.about__gallery > *:not(:first-child) {
  aspect-ratio: 4 / 3;
}
.about__gallery > *:first-child {
  grid-row: span 2;
  min-height: 280px;
  height: 100%;
}
.about__gallery img {
  /* Wer ein Bild im Editor am Griff anfasst, bekommt dessen Breite fest
     angeschrieben. Das schlaegt jede Regel hier und liess das Foto zuletzt
     schmal in seiner Kachel stehen. */
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 4px solid #fff;
  box-shadow: var(--shadow);
  background: var(--sky-wash);
}
.about__gallery > *:first-child,
.about__gallery > *:first-child img {
  border-radius: var(--radius-lg);
}

/* Entry / media */
.entry { padding: 2.5rem 0 4rem; }
.entry__header { margin-bottom: 1.5rem; max-width: 40rem; }
.entry__title { font-size: clamp(2rem, 4.5vw, 3rem); font-style: italic; }
.entry__meta { color: var(--ink-soft); font-size: 0.92rem; }
.entry-content { max-width: 720px; }
.entry-content > * + * { margin-top: 1rem; }

.sp-audio {
  margin: 1.25rem 0;
  padding: 1.1rem;
  background: linear-gradient(180deg, #fff, var(--sky-mist));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sp-audio audio { width: 100%; }

.sp-video-facade {
  position: relative;
  margin: 1.25rem 0;
  aspect-ratio: 16 / 9;
  background: var(--sky-deeper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.sp-video-facade__button {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: #fff;
}
.sp-video-facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.sp-video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.4rem;
  height: 4.4rem;
  margin: -2.2rem 0 0 -2.2rem;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 10px 30px rgba(46, 163, 242, 0.45);
}
.sp-video-facade__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent #fff;
}
.sp-video-facade__note {
  position: absolute;
  left: 0.85rem;
  max-width: calc(100% - 1.7rem);
  bottom: 0.85rem;
  font-size: 0.8rem;
  text-align: left;
  background: rgba(31, 111, 184, .6);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}
.sp-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sp-video-facade.is-active .sp-video-facade__button { display: none; }

/* WordPress legt bei Video-Einbettungen einen Platzhalter im Seitenverhaeltnis
   an und schiebt das iframe absolut darueber. Unsere Fassade ist kein iframe,
   blieb also im Textfluss stehen: Platzhalter und Vorschaubild standen
   untereinander, dazwischen klaffte eine halbe Bildschirmhoehe. */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .sp-video-facade {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Social-Media-Symbole (Fußzeile) */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.social-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-link:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.social-icon { display: block; }

/* Kanal-Hinweis über der Beitragsübersicht */
.channel-teaser {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--sky-mist), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.channel-teaser__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  flex: none;
}
.channel-teaser__text { flex: 1 1 16rem; }
.channel-teaser__text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--sky-deep);
}
.channel-teaser__text p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* „Weiter in dieser Reihe“ unter dem Einzelbeitrag */
.related {
  padding: 1rem 0 4rem;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.related__title {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  margin: 2rem 0 1.25rem;
}
.related__more { margin-top: 1.25rem; }

/* Abfrage-Block („Query Loop“): Wer sich eine Uebersicht selbst zusammenstellt,
   soll dieselben Karten bekommen wie die automatischen Archive – sonst wirkt die
   eigene Seite wie ein Fremdkoerper im Theme. */
.wp-block-query .wp-block-post-template {
  gap: 1.25rem;
  padding: 0;
  margin: 0;
}
.wp-block-post-template > li.wp-block-post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding-bottom: 1.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-post-template > li.wp-block-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.wp-block-post-template > li.wp-block-post > * {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image {
  margin: 0 0 1rem;
  aspect-ratio: 16 / 9;
  background: var(--sky-wash);
  overflow: hidden;
}
.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image.post-card__media-fill {
  height: auto;
}
.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-block-post-template .wp-block-post-title {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.35rem;
}
.wp-block-post-template .wp-block-post-title a { text-decoration: none; }
.wp-block-post-template .wp-block-post-date {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}
.wp-block-query-title,
.entry-content .wp-block-heading.query-heading {
  margin-top: 2.5rem;
}

/* Breite Bloecke im Editor: ohne das bleibt „weite Breite“ wirkungslos. */
.entry-content .alignwide {
  width: min(100vw - 2rem, var(--shell));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.entry-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.edit-hint {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--sky-mist);
  border: 1px dashed var(--sky);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--sky-deeper);
}
.edit-hint code {
  background: rgba(255,255,255,.75);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.85em;
}

/* Kommentare */
/* Die Lesebreite gilt für den Inhalt, nicht für den Container – sonst
   rutscht der Kommentarbereich gegenüber dem Beitrag nach rechts. */
.comments { padding: 0 0 3rem; }
.comments > * { max-width: 760px; }
.comments__title { font-size: 1.4rem; }
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.comment-list .children { margin: 1rem 0 0 1.5rem; }
.comment-list .comment-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}
.comment-list .comment-meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.comment-list .avatar { border-radius: 999px; float: left; margin-right: 0.75rem; }
.comment-form { display: grid; gap: 0.75rem; }
.comment-form label { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 0.25rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.comments__closed { color: var(--ink-soft); font-size: 0.92rem; }

/* Footer */
.site-footer {
  background: linear-gradient(160deg, var(--sky-deeper) 0%, var(--sky-deep) 48%, var(--sky) 100%);
  color: #eef7ff;
  padding: 3rem 0 1.75rem;
  margin-top: 2rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.site-footer a { color: inherit; }
/* Auf einer Seite aus vollbreiten Abschnitten stösst der Fuss unmittelbar an den
   letzten Abschnitt. Abstand und runde Ecken zeigen dort den hellen
   Seitenhintergrund als Streifen zwischen zwei farbigen Flächen - das sieht nach
   Fehler aus und nicht nach Absicht. Auf gewöhnlichen Seiten bleibt der Fuss die
   abgesetzte Fläche, die er ist: Dort steht darüber weisser Textbereich, und der
   Abstand trennt sinnvoll. */
.site-main--leinwand + .site-footer {
  margin-top: 0;
  border-radius: 0;
}
.site-footer__inner {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
/* Die Marke steht links am Rand, die Links enden rechts am Rand. Vorher stand
   die Linkspalte irgendwo in der Mitte und liess rechts eine Luecke stehen. */
@media (min-width: 800px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 3rem;
  }
  .site-footer__nav { justify-self: end; }
  /* Ab fuenf Eintraegen zweispaltig, sonst kippt die Fusszeile nach rechts unten. */
  .footer-list:has(li:nth-child(5)) {
    grid-template-columns: repeat(2, auto);
    column-gap: 2.75rem;
  }
  /* Mit Widgets wird aus zwei Spalten eine dritte – sonst bliebe unter der
     Marke eine breite Leerflaeche stehen. */
  .site-footer__inner:has(.site-footer__widgets) {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}
/* Name, Beschreibung und Symbole stehen untereinander. Als Reihe nebeneinander
   (so war es vorher) ergab die Marke eine einzige lange Zeile, waehrend rechts
   drei Zeilen Links standen – die Fusszeile wirkte dadurch schief. */
.site-footer__brand {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.35rem;
}
.site-footer__brand > strong { font-size: 1.05rem; }
.site-footer__brand .social-links { margin-top: 0.65rem; }
.site-footer__brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.site-footer__brand p { color: rgba(238,247,255,.75); margin: 0; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.site-footer__widgets { display: grid; gap: 1.25rem; }
.footer-widget__title { color: #fff; font-size: 1rem; margin: 0 0 0.5rem; }
.site-footer__widgets ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.site-footer__widgets a { color: rgba(238,247,255,.9); }
.site-footer__bottom {
  padding-top: 1rem;
  font-size: 0.85rem;
  color: rgba(238,247,255,.68);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer__credit a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__credit a:hover { text-decoration: none; }

/* Schaltflaeche fuer die Privatsphaere-Einstellungen, unten links.
   Nimmt die Projektfarben, damit sie nicht wie ein Fremdkoerper wirkt. */
.privacy-badge {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sky-deep, #2f6285);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 91, 119, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.privacy-badge:hover,
.privacy-badge:focus-visible {
  background: var(--sky-bright, #5a96b8);
  transform: translateY(-2px);
}
@media (max-width: 599px) {
  .privacy-badge { left: 14px; bottom: 14px; width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-badge { transition: none; }
  .privacy-badge:hover { transform: none; }
}
@media print {
  .privacy-badge { display: none; }
}

/* ---------- Mitlaufende Elemente ---------- */
/* Fortschrittsbalken und Schaltfläche erscheinen erst nach einem Stück
   Scrollen; die Klasse dafür setzt main.js. Ohne JavaScript steht der Balken
   auf null und die Schaltfläche unterhalb des Bildrands – sichtbar ist also
   nur, was auch reagiert. Beide sind ab Werk aus (siehe inc/beim-scrollen.php).
   Farben kommen aus den Projektvariablen, damit jedes Child sie ohne eigene
   Regel trifft. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--sky), var(--sky-bright) 55%, var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

.float-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--float-cta-bg, var(--accent));
  color: var(--float-cta-fg, #fff);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease, background .2s ease;
}
.float-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.float-cta:hover,
.float-cta:focus-visible {
  background: var(--float-cta-bg-hover, var(--sky-deep));
  color: var(--float-cta-fg-hover, #fff);
}
.float-cta svg { width: 20px; height: 20px; }

/* Schmale Bildschirme: nur das Symbol. Die Beschriftung steht als aria-label
   am Link, sie geht für Vorleseprogramme also nicht verloren. */
@media (max-width: 420px) {
  .float-cta { padding: 15px; }
  .float-cta .txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  .float-cta { transition: opacity .2s ease; transform: none; }
  .float-cta.is-visible { transform: none; }
  /* Das Untermenü erscheint dann ohne Bewegung. Es darf nicht komplett ohne
     Übergang sein: Die Sichtbarkeit muss verzögert umschalten, sonst ist die
     Klappe weg, bevor die Maus sie erreicht. */
  .nav-list .sub-menu { transform: none; transition: opacity .12s ease, visibility .12s; }
  .nav-list .menu-item-has-children:hover > .sub-menu,
  .nav-list .menu-item-has-children:focus-within > .sub-menu { transform: none; }
}
@media print {
  .scroll-progress,
  .float-cta { display: none; }
}

/* Widerruf / Kündigung – müssen von jeder Seite aus erreichbar sein. */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site-footer__legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.site-footer__legal-btn:hover {
  background: rgba(255,255,255,.14);
  border-color: #fff;
  color: #fff;
}
.site-footer__legal-hint {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Startseite aus Blöcken                                              */
/* Die Abschnitte kommen aus den Block-Vorlagen und bringen ihren      */
/* Abstand selbst mit – die Leinwand hält sich deshalb heraus und      */
/* begrenzt nichts, sonst könnten Abschnitte nicht randlos laufen.     */
/* ------------------------------------------------------------------ */
.site-main--leinwand { display: block; }

.sp-section {
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
}
.sp-section + .sp-section { padding-top: clamp(2.5rem, 5vw, 4rem); }

.sp-section--hero {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(180deg, var(--sky-mist), var(--paper));
  text-align: center;
}
.sp-section--hero .wp-block-buttons { justify-content: center; }

.sp-section--soft { background: var(--sky-mist); }

/* Ein dunkler Abschnitt, damit eine lange Startseite beim Scrollen nicht jede
   Gliederung verliert. Die Farben werden hier lokal umgestellt statt Regel für
   Regel überschrieben - so färbt sich auch mit, was der Redakteur später
   hineinsetzt, und nicht nur, was die Vorlage vorgesehen hat. */
.sp-section--dark {
  background: var(--sky-deep);
  color: #fff;
}
.sp-section--dark :is(h2, h3, h4) { color: #fff; }
.sp-section--dark .sp-eyebrow { color: var(--sky-soft); }
.sp-section--dark :is(p, li) { color: rgba(255, 255, 255, 0.9); }
.sp-section--dark .sp-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.sp-eyebrow {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.sp-section__head { margin-bottom: 2.5rem; }
.sp-section__head h2 { margin: 0 0 0.6rem; }
.sp-section__title { margin: 0 0 0.8rem; }
.sp-section__lead { font-size: 1.15rem; color: var(--ink-soft); }
.sp-section__note { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }

/* Karten und Schritte teilen sich dasselbe Raster: Es füllt die Breite
   selbstständig auf und braucht keine Spaltenzahl im Editor. */
.sp-cards,
.sp-steps {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.sp-card,
.sp-step {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.sp-card h3,
.sp-step h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.sp-card p,
.sp-step p { margin: 0 0 0.75rem; color: var(--ink-soft); }
.sp-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.sp-card li + li { margin-top: 0.3rem; }

.sp-step__num {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sky-soft);
}

/* Kennzahlen: schmalere Spalten als bei Karten, weil hier nur eine Zahl und eine
   Zeile darunter stehen. Ohne eigenen Wert stünden vier Zahlen auf einem Tablet
   in zwei Reihen, obwohl sie in eine passen. */
.sp-kpis {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  text-align: center;
}
/* Zahl und Beschriftung sind zwei Absätze und nicht einer mit Auszeichnung: So
   lässt sich beides im Editor einzeln anklicken. */
.sp-kpi__wert {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--sky-deep);
}
.sp-kpi__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.sp-section--dark .sp-kpi__wert { color: #fff; }

/* Angebote: dasselbe Raster wie Karten, aber oben ausgerichtet. Ohne das würden
   drei Pakete mit unterschiedlich langen Listen mittig zueinander stehen, und die
   Preise lägen auf verschiedenen Höhen - genau die Zeile, die man vergleichen will. */
.sp-plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}
.sp-plan__preis {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sky-deep);
}
/* Die Kleingedruckten-Zeile gehört zum Preis und nicht in den Fließtext: Ohne
   „einmalig“ oder „zzgl. MwSt.“ ist eine Zahl auf einer Firmenseite angreifbar. */
.sp-plan__hinweis {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
/* Hervorgehobenes Paket: nur Rahmen und Schatten, kein Hochskalieren. Ein
   vergrößerter Kasten schiebt im selbstfüllenden Raster die Nachbarn um. */
.sp-plan--stark {
  border-color: var(--sky);
  box-shadow: var(--shadow);
}
.sp-plan .wp-block-buttons { margin-top: 1.25rem; }

/* Fragen: der Aufklapper des Kerns, nur ruhiger gerahmt. */
.sp-faq .wp-block-details {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.sp-faq .wp-block-details + .wp-block-details { margin-top: 0.75rem; }
.sp-faq summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.sp-faq .wp-block-details[open] summary { margin-bottom: 0.6rem; }
.sp-faq p { color: var(--ink-soft); }

/* Logowand: Logos kommen in allen Größen und Farben, deshalb einheitliche
   Höhe und etwas Zurückhaltung, bis jemand mit der Maus darüberfährt. */
.sp-logos.wp-block-gallery { align-items: center; }
.sp-logos.wp-block-gallery figure.wp-block-image img {
  max-height: 3.25rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.sp-logos.wp-block-gallery figure.wp-block-image img:hover {
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Bildstarke Abschnitte als Blöcke                                     */
/* Hero, Kacheln, Bild-Text und „Über mich“ gab es lange nur aus dem    */
/* Customizer. Dieselben Klassen tragen jetzt auch die Block-Vorlagen.  */
/* Zwei Unterschiede muss der Editor dafür ausgleichen: Er packt jedes  */
/* Bild in ein <figure> und setzt Abstände zwischen alle Geschwister.   */
/* Beides steht hier – die Gestaltung selbst bleibt oben, ungeteilt.    */
/* ------------------------------------------------------------------ */
.hero__grid > *,
.hero__copy > *,
.pillars > *,
.pillar > *,
.books-intro__grid > *,
.books-intro__grid .wp-block-group > *,
.about > *,
.about__copy > *,
.about__gallery > * {
  margin-block-start: 0;
}

.hero__media .wp-block-image {
  margin: 0;
}
.hero__media .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 5px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(145deg, var(--sky-soft), var(--sky-wash));
}

/* Die Schaltflächen des Editors sollen aussehen wie die des Themes:
   gefüllt für den Hauptweg, hell mit Rand für den zweiten. */
.hero__actions .wp-block-button__link,
.books-intro__grid .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}
.hero__actions .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.books-intro__grid .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: rgba(255, 255, 255, 0.85);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--sky) 45%, white);
}

.pillar .wp-block-image {
  margin: 0 0 0.65rem;
}
.pillar .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-sm);
  background: #e8f4fc;
  padding: 0.5rem;
}
.pillar .wp-block-heading {
  font-size: 1.45rem;
  color: var(--sky);
  margin: 0.35rem 0.35rem 0.25rem;
}
.pillar p {
  margin: 0.15rem 0.35rem 0;
}

.books-intro__grid .wp-block-image {
  margin: 0;
}
.books-intro__grid .wp-block-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 4px solid #fff;
}

/* Über mich: großes Foto links über beide Zeilen, zwei kleinere rechts.
   Form und Höhe stehen weiter oben bei .about__gallery; hier bleibt nur das,
   was die <figure> des Editors sonst dazwischenschiebt. */
.about__gallery .wp-block-image {
  margin: 0;
}
.about__gallery .wp-block-image img {
  aspect-ratio: auto !important;
}

/* Im Editor fehlen Kopf- und Fußbereich, die Seite steht allein im
   Inhaltsrahmen. Ohne diese Zeilen klebte der Hero am Rand. */
.editor-styles-wrapper .hero {
  border-radius: var(--radius);
}
.editor-styles-wrapper .about__gallery .wp-block-image:first-child {
  min-height: 220px;
}