/* ============================================================================
   Dr. Lorenz – Layout der Abschnitte
   ----------------------------------------------------------------------------
   Was theme.json nicht abdeckt: Seitenrand, Raster, Karten, Kopf, Fuß und
   die Sonderformen einzelner Abschnitte. Werte 1:1 aus comp/css/main.css.

   Grundregel: keine Inline-Styles in den Patterns, alles über Klassen und
   Blockstile. Sonst zerschießt der Kunde beim Bearbeiten das Layout.

   Breakpoints wie im Entwurf: 1200 (Burger-Menü), 1023 (Spalten brechen),
   767 (Raster einspaltig), 599 (enge Ränder)
   ========================================================================== */

/* ---------------------------------------------------------------- Basis --- */

:root {
  --lz-rand: var(--wp--custom--rand);
  --lz-abschnitt: var(--wp--custom--abschnitt);
  --lz-abschnitt-gross: var(--wp--custom--abschnitt-gross);
  --lz-spalten: var(--wp--custom--spaltenabstand);
  --lz-kopfhoehe: 96px;
}

@media (max-width: 1023px) {
  :root { --lz-rand: 40px; }
}

@media (max-width: 599px) {
  :root { --lz-rand: 20px; }
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 112px;
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background: var(--wp--preset--color--akzent);
  color: var(--wp--preset--color--hintergrund);
}

:focus-visible {
  outline: 3px solid var(--wp--preset--color--akzent);
  outline-offset: 3px;
}

p,
li,
h1,
h2,
h3,
blockquote {
  overflow-wrap: break-word;
}

/* Kopf, Hauptteil, Fuß und die Abschnitte stoßen direkt aneinander.
   WordPress setzt sonst den Blockabstand (16px) als Außenabstand dazwischen,
   dann blitzt zwischen zwei Flächen ein Streifen Seitenhintergrund durch. */
.wp-site-blocks > *,
.lz-main > *,
:root .lz-inhalt > * {
  margin-block: 0;
}

/* WordPress-eigener Sprunglink "Zum Inhalt springen" im Look des Entwurfs. */
.skip-link.screen-reader-text:focus {
  left: 16px;
  top: 16px;
  padding: 12px 20px;
  background: var(--wp--preset--color--ueberschrift);
  color: var(--wp--preset--color--hintergrund);
  font-weight: 700;
  text-decoration: none;
}

/* ----------------------------------------------------------- Abschnitte --- */

/* Jeder Abschnitt setzt seinen Seitenrand selbst. Der Inhalt ist innen auf
   1312px begrenzt (theme.json), das entspricht dem 1440er-Container des
   Entwurfs abzüglich 2 × 64px Rand. Die Fläche läuft bis an den Rand. */
.lz-section {
  padding-inline: var(--lz-rand);
  padding-block: var(--lz-abschnitt);
}

.lz-section--gross {
  padding-block: var(--lz-abschnitt-gross);
}

/* Seitenkopf (FAQ, Impulse, Kontakt, Impressum): oben etwas weniger, unten 64. */
.lz-section--kopf {
  padding-block: clamp(48px, 40px + 2vw, 80px) 64px;
}

/* ------------------------------------------------------------ Typografie --- */

.is-style-dachzeile,
.wp-block-post-terms.is-style-dachzeile {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--16);
  line-height: 1.5;
  color: var(--wp--preset--color--akzent);
}

.is-style-label,
.wp-block-post-terms.is-style-label {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--14);
  line-height: 1.3;
  color: var(--wp--preset--color--akzent);
}

.is-style-label.has-16-font-size {
  font-size: var(--wp--preset--font-size--16);
}

.wp-block-post-terms.is-style-label,
.wp-block-post-terms.is-style-dachzeile {
  text-transform: uppercase;
}

.wp-block-post-terms a {
  color: inherit;
}

.is-style-hervorgehoben {
  font-weight: 700;
  line-height: 1.4;
}

.is-style-aussage {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--35);
  line-height: 1.4;
  color: var(--wp--preset--color--ueberschrift);
}

/* H1 mit enger Zeilenhöhe (Kontakt). */
.lz-h1-eng {
  line-height: 1.2 !important;
}

/* Einleitungstext unter dem Seitenkopf nicht über 800px laufen lassen.
   Im Abschnitt zentriert WordPress schmalere Blöcke automatisch. Diese hier
   sollen aber linksbündig an der Inhaltskante stehen, auch auf Bildschirmen
   breiter als 1440px. */
.lz-einleitung,
.lz-fliesstext {
  max-width: 800px;
}

:root .lz-section > :is(.lz-einleitung, .lz-fliesstext) {
  margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------------- Knöpfe --- */

.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  border-color: var(--wp--preset--color--akzent-dunkel);
}

/* Sekundärknopf: dunkler Umriss, beim Überfahren gefüllt. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  padding: 14px 24px;
  border: 3px solid var(--wp--preset--color--ueberschrift);
  background: transparent;
  color: var(--wp--preset--color--ueberschrift);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--ueberschrift);
  border-color: var(--wp--preset--color--ueberschrift);
  color: var(--wp--preset--color--hintergrund);
}

.wp-block-buttons {
  gap: 16px;
}

/* Knopfstil "Textlink": ohne Fläche und Rahmen, rot, beim Überfahren
   unterstrichen. Wie "Jetzt anfordern" in den Fokuspublikationen. */
.wp-block-button.is-style-textlink > .wp-block-button__link {
  padding: 12px 20px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--akzent);
  font-size: var(--wp--preset--font-size--14);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-out;
}

.wp-block-button.is-style-textlink > .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--akzent);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- Karten --- */

.is-style-karte,
.is-style-karte-kompakt,
.is-style-karte-gross {
  padding: 32px;
}

.is-style-karte-kompakt {
  padding: 24px;
}

.is-style-karte-gross {
  padding: clamp(24px, 16px + 1.7vw, 40px);
}

/* Karten ohne gewählte Farbe bekommen die Fläche. */
:where(.is-style-karte, .is-style-karte-kompakt, .is-style-karte-gross):not(.has-background) {
  background: var(--wp--preset--color--flaeche);
}

.lz-min-160 { min-height: 160px; }
.lz-min-240 { min-height: 240px; }
.lz-min-280 { min-height: 280px; }

@media (max-width: 599px) {
  .is-style-karte,
  .is-style-karte-gross {
    padding: 24px;
  }

  .lz-min-160,
  .lz-min-240,
  .lz-min-280 {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- Raster --- */

.is-style-raster-2,
.is-style-raster-3,
.lz-raster {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.is-style-raster-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lz-abstand-24 {
  gap: 24px;
}

/* Rasterzellen dürfen keinen Blockabstand von WordPress erben, sonst stehen
   sie versetzt. */
:root :is(.is-style-raster-2, .is-style-raster-3, .lz-raster) > * {
  margin: 0;
}

/* Der Beitragsliste (Query Loop) die Listenpunkte nehmen. */
.lz-raster.wp-block-post-template {
  list-style: none;
  padding: 0;
}

@media (max-width: 1023px) {
  .is-style-raster-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .is-style-raster-2,
  .is-style-raster-3,
  .lz-raster {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --------------------------------------------------- Zwei Spalten (Split) --- */

.wp-block-columns.lz-split {
  gap: var(--lz-spalten);
  margin: 0;
}

.wp-block-columns.lz-split > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Untereinanderliegende Karten rücken am Handy enger zusammen (Entwurf: 16px). */
@media (max-width: 767px) {
  :root .lz-kartenspalte > * + * {
    margin-block-start: 16px;
  }
}

@media (max-width: 1023px) {
  .wp-block-columns.lz-split {
    flex-direction: column;
    align-items: stretch !important;
  }

  .wp-block-columns.lz-split > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }
}

/* ------------------------------------------------------------ Bilder ------ */

.lz-bild {
  margin: 0;
}

.lz-bild img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Bildausschnitt: im Editor am Bild wählbar (Bedienfeld "Bildausschnitt"). */
  object-position: var(--lz-fokus, center);
}

/* ------------------------------------------------------------ Kopfbereich --- */

/* Sticky am Template-Part selbst: nur der hat die ganze Seite als Eltern.
   Die Admin-Leiste von WordPress schiebt den Kopf nach unten. */
.lz-kopf {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  background: var(--wp--preset--color--hintergrund);
  transition: box-shadow 0.25s ease-out;
}

.lz-kopf.is-scrolled {
  box-shadow: 0 1px 0 rgba(36, 51, 66, 0.04), 0 6px 18px -10px rgba(36, 51, 66, 0.14);
}

.lz-header {
  position: relative;
  max-width: calc(1312px + 2 * var(--lz-rand));
  min-height: var(--lz-kopfhoehe);
  margin-inline: auto;
  padding: 24px var(--lz-rand);
  gap: 32px;
}

.lz-marke,
.lz-marke a {
  white-space: nowrap;
  text-decoration: none;
}

/* Hauptmenü: Menüpunkte fett, Aktiv und Hover rot. */
.lz-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--fliesstext);
  white-space: nowrap;
  transition: color 0.15s ease-out;
}

.lz-nav .wp-block-navigation-item__content:hover,
.lz-nav .current-menu-item > .wp-block-navigation-item__content,
.lz-footer__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--akzent);
}

/* Der Mailknopf hält 32px Abstand zum letzten Menüpunkt (Menüpunkte: 40px). */
.lz-nav .lz-nav__knopf {
  margin-left: -8px;
}

/* Burger-Knopf: runder Umriss wie im Entwurf. Der Navigationsblock steht auf
   "Menü immer als Overlay", ab 1201px wird das Overlay unten wieder zur
   normalen Menüzeile gemacht. So liegt der Umbruch bei 1200px statt bei den
   600px, die WordPress fest vorgibt. */
.lz-nav .wp-block-navigation__responsive-container-open,
.lz-nav .wp-block-navigation__responsive-container-close {
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--wp--preset--color--ueberschrift);
  border-radius: 1000px;
  color: var(--wp--preset--color--ueberschrift);
}

.lz-nav .wp-block-navigation__responsive-container-open svg,
.lz-nav .wp-block-navigation__responsive-container-close svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1201px) {
  .lz-nav .wp-block-navigation__responsive-container-open {
    display: none;
  }

  .lz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
    position: relative;
    width: 100%;
    z-index: auto;
    background-color: inherit;
  }

  .lz-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .lz-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    gap: 40px;
  }

  .lz-nav .wp-block-navigation__responsive-container-content {
    gap: 40px;
  }
}

@media (max-width: 1200px) {
  /* Das Overlay klappt als Panel unter dem Kopf auf, statt den ganzen
     Bildschirm zu füllen. Bezugsrahmen ist der Kopf (.lz-header). */
  .lz-nav.wp-block-navigation,
  .lz-nav .wp-block-navigation__responsive-dialog {
    position: static;
  }

  .lz-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute;
    inset: 100% 0 auto 0;
    height: auto;
    padding: 24px var(--lz-rand) 32px;
    overflow: visible;
    background: var(--wp--preset--color--hintergrund);
    color: var(--wp--preset--color--fliesstext);
    border-top: 1px solid var(--wp--preset--color--flaeche-dunkel);
    box-shadow: 0 18px 32px -14px rgba(36, 51, 66, 0.22);
    animation: lz-panel 0.2s ease-out;
  }

  /* Der Schließen-Knopf liegt genau dort, wo der Burger-Knopf sitzt. */
  .lz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex;
    top: calc(-1 * var(--lz-kopfhoehe) + 24px - 1px);
    right: var(--lz-rand);
    background: var(--wp--preset--color--hintergrund);
  }

  .lz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    gap: 32px;
    padding-top: 0;
  }

  .lz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start;
    gap: 24px;
  }

  .lz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--20);
    padding: 0;
  }

  .lz-nav .wp-block-navigation__responsive-container.is-menu-open .lz-nav__knopf {
    margin-left: 0;
  }

  /* WordPress sperrt beim offenen Menü das Scrollen. Beim Panel ist das
     unnötig, der Kopf bleibt ohnehin oben stehen. */
  html.has-modal-open {
    overflow: auto;
  }
}

@keyframes lz-panel {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-nav .wp-block-navigation__responsive-container.is-menu-open {
    animation: none;
  }
}

@media (max-width: 599px) {
  .lz-header .lz-marke {
    font-size: 1.0625rem;
  }
}

/* Unter dem kleinsten Entwurfsmaß (390px): enger, damit nichts überläuft. */
@media (max-width: 400px) {
  .lz-header {
    gap: 12px;
  }

  .lz-header .lz-marke {
    font-size: 0.9375rem;
  }
}

/* ----------------------------------------------------------- Fußbereich --- */

/* Der Fuß nimmt automatisch die Gegenfarbe zum letzten Abschnitt der Seite:
   endet die Seite auf der Fläche, steht er auf Hintergrund und umgekehrt. */
.lz-fuss {
  background: var(--wp--preset--color--flaeche);
}

body:has(.lz-inhalt > .has-flaeche-background-color:last-child) .lz-fuss,
body:has(.lz-main > .has-flaeche-background-color:last-child) .lz-fuss {
  background: var(--wp--preset--color--hintergrund);
}

.lz-footer__innen {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(1312px + 2 * var(--lz-rand));
  margin-inline: auto;
  padding: 64px var(--lz-rand);
  font-weight: 700;
  line-height: 1.2;
}

:root .lz-footer__innen > * {
  margin: 0;
}

.lz-footer__innen p {
  line-height: 1.2;
}

.lz-footer__innen .lz-marke {
  margin-right: clamp(0px, 53.1vw - 536px, 229px);
  font-size: clamp(1.0625rem, 0.6rem + 0.75vw, 1.25rem);
}

.lz-footer__nav .wp-block-navigation__container {
  flex-wrap: nowrap;
  gap: clamp(20px, 3.8vw - 15px, 40px);
}

.lz-footer__nav .wp-block-navigation-item__content,
.lz-footer__recht a {
  color: var(--wp--preset--color--fliesstext);
  font-size: var(--wp--preset--font-size--16);
  white-space: nowrap;
  transition: color 0.15s ease-out;
}

.lz-footer__recht a:hover {
  color: var(--wp--preset--color--akzent);
}

.lz-footer__recht {
  margin-left: auto !important;
  text-align: right;
}

@media (max-width: 1023px) {
  .lz-footer__innen {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-block: 48px;
  }

  .lz-footer__innen .lz-marke {
    margin-right: 0;
  }

  .lz-footer__nav .wp-block-navigation__container {
    gap: 28px;
  }

  .lz-footer__recht {
    margin-left: 0 !important;
    text-align: left;
  }
}

@media (max-width: 599px) {
  .lz-footer__innen .lz-marke {
    font-size: 1.0625rem;
  }

  .lz-footer__nav .wp-block-navigation__container {
    gap: clamp(10px, 4.6vw - 2px, 20px);
  }

  .lz-footer__nav .wp-block-navigation-item__content {
    font-size: clamp(0.8125rem, 3.4vw + 0.1rem, 0.9375rem);
  }
}

/* ---------------------------------------------------- Handlungsaufruf (CTA) --- */

.lz-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

:root .lz-cta > *,
:root .lz-cta__kopf > *,
:root .lz-cta__mehr > * {
  margin: 0;
}

.lz-cta-teil {
  margin: 0;
}

.lz-cta__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 823px;
  text-align: center;
}

.lz-cta__linie.wp-block-separator {
  width: 100%;
  height: 2px;
  border: 0;
  background: var(--wp--preset--color--flaeche-dunkel);
  opacity: 1;
}

.lz-cta__mehr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lz-cta__label {
  font-weight: 700;
  line-height: 1.2;
}

.lz-iconreihe {
  gap: 16px;
}

.lz-iconreihe .wp-block-image,
.lz-iconreihe .wp-block-image a {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0;
}

.lz-iconreihe img {
  width: 54px;
  height: 54px;
  transition: opacity 0.15s ease-out;
}

.lz-iconreihe a:hover img {
  opacity: 0.7;
}

@media (max-width: 599px) {
  .lz-cta {
    gap: 48px;
  }
}

/* ------------------------------------------------------ Startseite: Hero --- */

.lz-hero-home {
  overflow: clip;
  padding-inline: var(--lz-rand);
}

.lz-hero-home__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(542px, 42%);
  align-items: stretch;
  max-width: 1312px;
  margin-inline: auto;
}

:root .lz-hero-home__raster > * {
  margin: 0;
}

.lz-hero-home__inhalt {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-block: 60px 61px;
  --frei: calc(100% - min(542px, 42%));
}

.lz-hero-home__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: min(839px, calc(var(--frei) + 69px));
}

:root .lz-hero-home__intro > *,
:root .lz-hero-home__inhalt > * {
  margin: 0;
}

.lz-hero-home__lead {
  max-width: min(591px, 100%);
}

.lz-hero-home__inhalt > .wp-block-buttons {
  margin-top: 40px;
}

.lz-hero-home__karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 50px !important;
  max-width: min(735px, calc(var(--frei) - 32px));
}

:root .lz-hero-home__karten > * {
  margin: 0;
}

.lz-hero-home__bild {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  margin: 0;
}

/* Freigestelltes Portrait: nie beschneiden, sondern unten rechts auf die
   Sektionskante stellen. Bei schmaler Spalte wird es kleiner statt enger. */
.lz-hero-home__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 1023px) {
  .lz-hero-home__raster {
    grid-template-columns: 1fr;
  }

  .lz-hero-home__inhalt,
  .lz-hero-home__bild {
    grid-column: 1;
    grid-row: auto;
  }

  .lz-hero-home__inhalt {
    padding-bottom: 48px;
    --frei: 100%;
  }

  .lz-hero-home__intro {
    max-width: 839px;
  }

  .lz-hero-home__karten {
    max-width: 735px;
  }

  .lz-hero-home__bild {
    justify-self: end;
    width: min(100%, 460px);
  }

  .lz-hero-home__bild img {
    height: auto;
  }
}

/* Tablet: Einleitung volle Breite, darunter Karten links und Portrait rechts,
   damit neben dem Bild keine leere Fläche entsteht. */
@media (min-width: 600px) and (max-width: 1023px) {
  .lz-hero-home__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding-top: 60px;
  }

  .lz-hero-home__inhalt {
    display: contents;
  }

  .lz-hero-home__intro,
  .lz-hero-home__inhalt > .wp-block-buttons {
    grid-column: 1 / -1;
  }

  .lz-hero-home__karten {
    grid-column: 1;
    grid-template-columns: 1fr;
    align-self: start;
    margin-bottom: 48px !important;
  }

  .lz-hero-home__bild {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .lz-hero-home__karten {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------ Startseite: Zitat + Auszeichnungen --- */

.lz-zitat-auszeichnungen.wp-block-columns {
  gap: 80px;
  margin: 0;
}

.lz-zitat-auszeichnungen > .wp-block-column:last-child {
  flex: 0 0 418px;
}

.lz-auszeichnungen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:root .lz-auszeichnungen > * {
  margin: 0;
}

@media (max-width: 1023px) {
  .lz-zitat-auszeichnungen.wp-block-columns {
    flex-direction: column;
    gap: 48px;
  }

  .lz-zitat-auszeichnungen > .wp-block-column:last-child {
    flex-basis: auto;
    width: 100%;
  }
}

/* Zitat: die Quelle steht im Entwurf als rote Dachzeile ÜBER dem Zitat. */
.wp-block-quote.lz-zitat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

:root .wp-block-quote.lz-zitat > * {
  margin: 0;
}

.wp-block-quote.lz-zitat p {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--wp--preset--font-size--35);
  line-height: 1.6;
  color: var(--wp--preset--color--ueberschrift);
}

.wp-block-quote.lz-zitat cite {
  order: -1;
  font-style: normal;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--16);
  line-height: 1.5;
  color: var(--wp--preset--color--akzent);
}

.wp-block-quote.lz-zitat--mitte {
  align-items: center;
  text-align: center;
}

/* ------------------------------------------------------------ Über mich --- */

.lz-hero-ueber {
  padding-block: clamp(48px, 40px + 2vw, 80px);
}

.lz-hero-ueber .wp-block-column:last-child {
  flex: 0 0 550px;
}

.lz-hero-ueber .lz-bild img {
  aspect-ratio: 550 / 507;
  object-position: var(--lz-fokus, 19% center);
}

@media (max-width: 1023px) {
  .lz-hero-ueber .wp-block-column:last-child {
    max-width: 550px;
  }
}

/* Ehemalige Tätigkeiten: Kopf links fest, Text rechts. */
.lz-stationen {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:root .lz-stationen > * {
  margin: 0;
}

.lz-station.wp-block-columns {
  gap: 40px;
  margin: 0;
  flex-wrap: nowrap;
}

.lz-station > .wp-block-column:first-child {
  flex: 0 0 454px;
}

.lz-station > .wp-block-column:last-child {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1023px) {
  .lz-station > .wp-block-column:first-child {
    flex-basis: 40%;
  }
}

@media (max-width: 767px) {
  .lz-station.wp-block-columns {
    flex-direction: column;
    gap: 16px;
  }

  .lz-station > .wp-block-column:first-child {
    flex-basis: auto;
  }
}

/* --------------------------------------------------------------- Lehre --- */

.lz-hero-lehre {
  padding-block: clamp(64px, 50px + 3.8vw, 112px) var(--lz-abschnitt);
}

.lz-hero-lehre .lz-bild img {
  aspect-ratio: 602 / 380;
}

/* ----------------------------------------------------------------- FAQ --- */

.lz-faq {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 40px var(--lz-abschnitt);
}

/* Flex-Kinder mit automatischem Rand schrumpfen sonst auf Textbreite. */
:root .lz-faq > * {
  width: 100%;
  margin-block: 0;
}

.lz-faq .wp-block-details {
  padding: 0 0 12px;
  background: var(--wp--preset--color--flaeche);
}

.lz-faq .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 24px 12px;
  list-style: none;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--20);
  line-height: 1.3;
  color: var(--wp--preset--color--ueberschrift);
  cursor: pointer;
}

.lz-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.lz-faq .wp-block-details summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--18);
  line-height: 1;
  color: var(--wp--preset--color--akzent);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lz-faq .wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

.lz-faq .wp-block-details summary:focus-visible {
  outline-offset: -3px;
}

.lz-faq .wp-block-details > :not(summary) {
  margin: 0;
  padding: 0 24px 12px;
  font-size: var(--wp--preset--font-size--15);
}

/* Weiches Auf- und Zuklappen in Browsern, die das schon können. Ältere
   Browser klappen einfach ohne Übergang. */
@supports (interpolate-size: allow-keywords) {
  .lz-faq {
    interpolate-size: allow-keywords;
  }

  .lz-faq .wp-block-details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease-out, content-visibility 0.32s allow-discrete;
  }

  .lz-faq .wp-block-details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lz-faq .wp-block-details::details-content,
  .lz-faq .wp-block-details summary::after {
    transition: none;
  }
}

/* -------------------------------------------------------------- Kontakt --- */

.lz-kontakt__kopf {
  margin-bottom: clamp(48px, 36px + 3vw, 80px) !important;
}

.lz-kontakt.wp-block-columns {
  gap: 24px;
  margin: 0;
}

.lz-kontakt .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:root .lz-kontakt .wp-block-column:first-child > * {
  margin: 0;
}

.lz-kontakt .lz-bild img {
  aspect-ratio: 640 / 474;
}

.lz-kontakt__meta {
  font-weight: 500;
  line-height: 1.2;
  color: var(--wp--preset--color--akzent);
}

.lz-kontakt__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-kontakt__details a:hover {
  color: var(--wp--preset--color--akzent);
}

.lz-kontakt .wp-block-buttons {
  gap: 16px 8px;
}

@media (max-width: 1023px) {
  .lz-kontakt.wp-block-columns {
    flex-direction: column;
  }

  .lz-kontakt.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }
}

/* -------------------------------------------------------------- Impulse --- */

/* Textlink "Jetzt anfordern" in den Fokuspublikationen. */
.lz-textlink {
  align-self: flex-start;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--14);
  line-height: 1.2;
}

.lz-textlink a {
  display: inline-flex;
  padding: 12px 20px 12px 0;
  color: var(--wp--preset--color--akzent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-out;
}

.lz-textlink a:hover {
  color: var(--wp--preset--color--akzent);
  text-decoration-color: currentColor;
}

/* Karten der Beitragsliste. */
.lz-artikel .wp-block-post-title {
  line-height: 1.4;
}

.lz-artikel .wp-block-post-title a:hover {
  color: var(--wp--preset--color--akzent);
}

.lz-artikel .wp-block-post-excerpt,
.lz-artikel .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.lz-artikel .wp-block-post-excerpt__more-text {
  display: none;
}

/* ------------------------------------------------------ Einzelner Beitrag --- */

/* Im Beitrag steht die Lesespalte mittig. Die Regel weiter oben, die
   Einleitungen und Rechtstexte linksbündig an die Inhaltskante setzt, gilt
   hier also nicht. */
:root .lz-beitrag > .lz-fliesstext {
  margin-inline: auto !important;
}

/* Kopf des Beitrags mittig: Kategorie, Titel, Datum. Der Fließtext bleibt
   linksbündig, das liest sich bei langen Artikeln deutlich ruhiger. */
.lz-beitrag > .wp-block-post-terms,
.lz-beitrag > .wp-block-post-title,
.lz-beitrag > .lz-beitrag__datum,
.lz-beitrag > .lz-beitrag__zurueck {
  text-align: center;
}

/* Bilder im Beitrag: volle Breite der Lesespalte, mittig, mit Bildunterschrift. */
.lz-beitrag .wp-block-image {
  margin-block: 40px;
  text-align: center;
}

.lz-beitrag .wp-block-image img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.lz-beitrag .wp-block-image figcaption {
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--14);
  line-height: 1.5;
  color: var(--wp--preset--color--fliesstext);
  text-align: center;
}

/* Listen im Artikeltext. */
.lz-beitrag .lz-fliesstext ul,
.lz-beitrag .lz-fliesstext ol {
  margin-block: 16px;
  padding-left: 1.25em;
}

.lz-beitrag .lz-fliesstext li + li {
  margin-top: 8px;
}


.lz-beitrag {
  padding-bottom: var(--lz-abschnitt);
}

.lz-beitrag .wp-block-post-title {
  margin-top: 16px;
}

.lz-beitrag__datum {
  margin-top: 16px;
  font-size: var(--wp--preset--font-size--14);
}

.lz-beitrag .lz-fliesstext {
  margin-top: 40px;
}

.lz-beitrag__zurueck {
  margin-top: 48px;
  font-weight: 700;
}

.lz-beitrag__zurueck a {
  color: var(--wp--preset--color--akzent);
}

/* --------------------------------------------------- Fließtext / Rechtstext --- */

.lz-fliesstext :where(h2, h3) {
  margin-top: 48px;
}

.lz-fliesstext h2 {
  font-size: var(--wp--preset--font-size--26);
}

.lz-fliesstext h3 {
  font-size: var(--wp--preset--font-size--20);
}

.lz-fliesstext a {
  color: var(--wp--preset--color--akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lz-fliesstext ul {
  padding-left: 1.25em;
}

/* ------------------------------------------------------------ Ergänzungen --- */

.lz-section--kontakt {
  padding-block: clamp(48px, 40px + 2vw, 80px) var(--lz-abschnitt);
}

.lz-hero-lehre__text {
  max-width: 591px;
}

.lz-hero-ueber .has-18-font-size {
  max-width: 680px;
}

/* Rechtstext direkt unter dem Seitenkopf: oben kein zweiter großer Abstand. */
.lz-rechtstext {
  padding-top: 0;
}

/* Nummerierte Rechtstext-Blöcke: Nummer und Titel links, Text rechts,
   dazwischen eine Trennlinie. Unter 1024px untereinander. */
:root .lz-rechtstext > .lz-rechtsblock {
  gap: var(--lz-spalten);
  margin: 0;
  padding-block: 48px;
  border-top: 2px solid var(--wp--preset--color--flaeche-dunkel);
}

:root .lz-rechtstext > .lz-rechtsblock:first-child {
  padding-top: 40px;
}

.lz-rechtsblock > .lz-rechtsblock__kopf {
  flex: 0 0 320px !important;
}

.lz-rechtsblock__kopf > * + * {
  margin-top: 12px !important;
}

.lz-rechtsblock .lz-fliesstext {
  max-width: 800px;
}

.lz-rechtsblock .lz-fliesstext h3 {
  margin-top: 32px;
}

.lz-rechtsblock .lz-fliesstext > h3:first-child {
  margin-top: 0;
}

.lz-rechtsblock .lz-fliesstext h3 + p {
  margin-top: 8px;
}

@media (max-width: 1023px) {
  :root .lz-rechtstext > .lz-rechtsblock {
    flex-direction: column;
    gap: 24px;
  }

  .lz-rechtsblock > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }
}