/* ==========================================================================
   PVBB - Anpassung der WordPress-Standardblöcke

   design-system.css und bausteine.css stammen aus der Design-Vorschau und
   kennen WordPress nicht. Diese Datei schlägt die Brücke: Sie bringt die
   Blöcke, die WordPress selbst mitbringt, auf dasselbe Aussehen.

   Warum überhaupt Standardblöcke, wo doch eigene Bausteine vorliegen?
   Weil der Vorstand sie bedienen können soll. Das Menü etwa ist der
   Navigations-Block von WordPress - dadurch lässt es sich im Editor pflegen,
   ist von Haus aus tastaturbedienbar und bringt seine eigene Mobilfassung
   mit. Ein nachgebautes Menü müsste all das selbst können und selbst
   gepflegt werden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kopfzeile und Menü
   -------------------------------------------------------------------------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopfzeile .wp-block-site-logo img,
.kopfzeile .kopfzeile__logo img {
  display: block;
  width: clamp(9.5rem, 7rem + 6vw, 13rem);
  height: auto;
}

/* Navigations-Block ------------------------------------------------------ */

.kopfzeile .wp-block-navigation {
  --navigation-layout-justification-setting: flex-end;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-menue);
  font-weight: 600;
}

.kopfzeile .wp-block-navigation .wp-block-navigation-item__content {
  padding: 0.55em 0.75em;
  color: var(--blau-800);
  text-decoration: none;
  border-radius: var(--rund-m);
  transition: background var(--uebergang), color var(--uebergang);
}

.kopfzeile .wp-block-navigation .wp-block-navigation-item__content:hover,
.kopfzeile .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  background: var(--blau-50);
  color: var(--blau-700);
}

/* Aktuelle Rubrik: WordPress vergibt current-menu-item selbst. */
.kopfzeile .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.kopfzeile .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--blau-700);
  box-shadow: inset 0 -3px 0 var(--akzent);
  border-radius: var(--rund-s) var(--rund-s) 0 0;
}

/* Untermenü -------------------------------------------------------------- */

.kopfzeile .wp-block-navigation__submenu-container {
  min-width: 15rem;
  padding: var(--raum-2);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  box-shadow: var(--schatten-l);
}

.kopfzeile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.5em 0.7em;
  font-weight: 500;
}

/* Der Trennstrich, den WordPress zwischen Untermenüpunkte setzt, passt nicht
   zum ruhigen Aufbau der Kopfzeile. */
.kopfzeile .wp-block-navigation__submenu-container li {
  margin-bottom: 0;
  border: 0;
}

/* Mobilfassung ----------------------------------------------------------- */

.kopfzeile .wp-block-navigation__responsive-container-open,
.kopfzeile .wp-block-navigation__responsive-container-close {
  padding: 0.4em;
  color: var(--blau-800);
  border-radius: var(--rund-m);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--raum-6) var(--rand) var(--raum-8);
  background: var(--weiss);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding: 0.6em 0;
  font-size: var(--gr-h4);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  padding: 0 0 0 var(--raum-4);
  border: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Schaltflächen

   Der Knopf-Block von WordPress bekommt dasselbe Aussehen wie .knopf aus
   bausteine.css. Die Umrandungs-Variante von WordPress (is-style-outline)
   entspricht .knopf--rand.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: 0.8em 1.5em;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--rund-voll);
  transition: background var(--uebergang), color var(--uebergang),
    border-color var(--uebergang), transform var(--uebergang);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--akzent);
  color: var(--blau-900);
  border: 2px solid var(--akzent);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--akzent-hell);
  border-color: var(--akzent-hell);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--blau-800);
  border: 2px solid var(--linie-kraeftig);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--blau-800);
  background: var(--blau-50);
}

/* Auf dunklem Grund. Ohne diese Regeln steht ein dunkelblauer Knopf auf
   dunkelblauem Grund - genau der Fehler, der in der Vorschau auffiel. */
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.aufruf .wp-block-button.is-style-outline .wp-block-button__link,
.abschnitt--blau .wp-block-button.is-style-outline .wp-block-button__link,
.has-blau-800-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-blau-900-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--weiss);
  border-color: rgb(255 255 255 / 0.45);
}

.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.aufruf .wp-block-button.is-style-outline .wp-block-button__link:hover,
.abschnitt--blau .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-blau-800-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-blau-900-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: var(--weiss);
}

/* --------------------------------------------------------------------------
   3. Meldungen (Abfrage-Schleife)
   -------------------------------------------------------------------------- */

.meldungsraster .wp-block-post-template {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.meldungsraster .wp-block-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  box-shadow: var(--schatten-s);
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}

.meldungsraster .wp-block-post:hover {
  box-shadow: var(--schatten-m);
  transform: translateY(-2px);
}

.meldungsraster .wp-block-post-featured-image {
  margin: 0;
  aspect-ratio: 16 / 9;
}

.meldungsraster .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meldungsraster .wp-block-post-date {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.meldungsraster .wp-block-post-title {
  font-size: var(--gr-h4);
  line-height: var(--zeile-eng);
}

.meldungsraster .wp-block-post-title a {
  color: var(--blau-800);
  text-decoration: none;
}

.meldungsraster .wp-block-post-title a:hover {
  color: var(--blau-600);
}

.meldungsraster .wp-block-post-excerpt__excerpt {
  color: var(--text-leise);
}

.meldungsraster .wp-block-post-excerpt__more-link,
.meldungsraster .wp-block-read-more {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  color: var(--blau-700);
  text-decoration: none;
}

/* Innenabstand für alles außer dem Bild */
.meldungsraster .wp-block-post > :not(.wp-block-post-featured-image) {
  margin-left: var(--raum-5);
  margin-right: var(--raum-5);
}

.meldungsraster .wp-block-post > :not(.wp-block-post-featured-image):first-child {
  margin-top: var(--raum-5);
}

.meldungsraster .wp-block-post > :last-child {
  margin-bottom: var(--raum-5);
}

/* Blätterung -------------------------------------------------------------- */

.wp-block-query-pagination {
  gap: var(--raum-3);
  margin-top: var(--raum-8);
  font-family: var(--schrift-ueberschrift);
  font-weight: 600;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
  padding: 0.45em 0.85em;
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  text-decoration: none;
}

.wp-block-query-pagination .current {
  background: var(--blau-800);
  border-color: var(--blau-800);
  color: var(--weiss);
}

/* --------------------------------------------------------------------------
   4. Einzelbeitrag
   -------------------------------------------------------------------------- */

.beitrag__kopf {
  padding-block: var(--raum-9) var(--raum-7);
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.beitrag__inhalt > * {
  max-width: var(--breite-text);
  margin-inline: auto;
}

/* Breite und volle Ausrichtung dürfen ausbrechen */
.beitrag__inhalt > .alignwide {
  max-width: var(--breite-inhalt);
}

.beitrag__inhalt > .alignfull {
  max-width: none;
}

.beitrag__inhalt figure img {
  border-radius: var(--rund-l);
}

/* --------------------------------------------------------------------------
   5. Fußzeile
   -------------------------------------------------------------------------- */

.fusszeile .wp-block-navigation {
  font-size: var(--gr-s);
}

.fusszeile .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--blau-300);
  text-decoration: none;
}

.fusszeile .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--weiss);
}

/* --------------------------------------------------------------------------
   6. Kleinigkeiten
   -------------------------------------------------------------------------- */

/* WordPress setzt bei Gruppen mit Hintergrundfarbe keinen Innenabstand. Ohne
   ihn klebt der Text an der Kante der Farbfläche. */
.wp-block-group.has-background:not(.aufruf):not(.karte--blau) {
  padding: var(--raum-6);
}

/* Bilder in Inhalten sollen nie über den Rand hinauslaufen */
.wp-block-image img {
  height: auto;
}

/* Der Editor stellt Abstände sonst über dem ersten Block nochmals dar */
.editor-styles-wrapper .wp-site-blocks > *:first-child {
  margin-top: 0;
}