/*
 * Handy (bis 600 px): weniger Leerraum, alles auf derselben Mittelachse wie der Text.
 * Wird nur mit media="screen and (max-width: 600px)" geladen. Styleguide docs/DESIGN.md:
 * monochrom, Manrope, Pillen-Knöpfe; hier nur Masse und Ausrichtung.
 */

/* Abstände der Abschnitte: dieselben Stufen, kleiner. */
body {
  --wp--preset--spacing--30: 0.75rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.25rem;
  --wp--preset--spacing--60: 1.5rem;
  --wp--preset--spacing--70: 1.75rem;
  --wp--preset--spacing--80: 2rem;
  --er-rand: var(--wp--style--root--padding-left, 20px);
}

/* Kopf: Fuchs und Titel nebeneinander, gemeinsam zentriert, ohne die 84 px Innenrand des Titels. */
header.wp-block-template-part .wp-block-group:has(> .er-header-logo) {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px;
  padding-top: 14px !important; padding-bottom: 14px !important;
}
header.wp-block-template-part .er-header-logo { margin: 0 !important; flex: 0 0 auto; }
header.wp-block-template-part .er-header-logo img { width: 56px; }
header.wp-block-template-part .wp-block-site-title {
  flex: 0 1 auto; width: auto; max-width: none; margin: 0 !important; padding: 0 !important;
  background: transparent !important; text-align: left;
  font-size: clamp(1.25rem, 6.4vw, 1.6rem) !important; line-height: 1.12; font-weight: 600;
}
header.wp-block-template-part .wp-block-site-title a { display: inline; }

/* Bilder in Spalten: volle Textbreite, keine versetzten oder überlappenden Ränder. */
.wp-block-column > figure.wp-block-image.is-resized,
.wp-block-column > .wp-block-group > figure.wp-block-image.is-resized {
  float: none; width: 100%; margin: 0 0 10px !important;
}
.wp-block-column > figure.wp-block-image.is-resized img,
.wp-block-column > .wp-block-group > figure.wp-block-image.is-resized img {
  width: 100% !important; height: auto; aspect-ratio: 3 / 2 !important; object-fit: cover; display: block;
}
.wp-block-column > .wp-block-group { margin-top: 0 !important; }
/* Spalten tragen auf dem Desktop eigenen Seitenrand; auf dem Handy stehen sie bündig mit dem Text. */
.wp-block-columns > .wp-block-column { padding-left: 0 !important; padding-right: 0 !important; }
.wp-block-columns { gap: 1rem !important; }

/* Knöpfe: Gruppen mit mehreren Knöpfen als Raster, zwei je Zeile, gleich breit. */
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important;
}
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button { width: 100%; margin: 0; }
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link { width: 100%; box-sizing: border-box; }
.wp-block-buttons .wp-block-button__link {
  text-align: center; padding: 10px 14px !important; font-size: 0.9rem; line-height: 1.25;
}
/* Alle Knöpfe einer Leiste gleich gross: gleiche Zeilenhöhe im Raster, Text mittig, Schrift fest klein;
   ein einzelner letzter Knopf (ungerade Anzahl) geht über beide Spalten. */
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) { grid-auto-rows: 1fr; }
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button { display: flex; }
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link {
  display: flex !important; align-items: center; justify-content: center; height: auto; min-height: 52px;
  font-size: 0.85rem !important; line-height: 1.2; padding: 8px 10px !important;
}
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Knopfleisten, die auf dem Desktop bis an den Rand reichen (Abschnitt ohne Seitenrand): gleicher Rand wie der Text. */
.wp-block-group[style*="padding-left:0"] > .wp-block-buttons {
  padding-left: var(--er-rand); padding-right: var(--er-rand); box-sizing: border-box;
}

/* Text: Überschriften und Listen kompakter. */
main h2.wp-block-heading { font-size: clamp(1.6rem, 8vw, 2.1rem); margin-top: 1.25rem; }
main ul.wp-block-list, main .wp-block-list { padding-left: 1.2em; }
main .wp-block-list li { margin-bottom: 0.35em; }
main .is-style-text-subtitle { font-size: 1.15rem !important; line-height: 1.45; }

/* Projekte und ähnliche Abschnitte: Steht in einer Spalte zuerst ein Titel (Überschrift oder grosser
   Titelabsatz) und daneben ein Foto, kommt auf dem Handy der Titel zuerst und das Foto darunter. */
.wp-block-columns:has(> .wp-block-column > :is(h2.wp-block-heading, h3.wp-block-heading, p.has-xx-large-font-size):first-child)
  > .wp-block-column:has(> figure.wp-block-image) { order: 2; }

/* Abschnitte mit Mindesthöhe (z. B. «Laufende Projekte», 360 px, Inhalt mittig): Auf dem Computer passt die Höhe
   zum Bild daneben, auf dem Handy steht das Bild darunter und es bliebe leerer Raum oben und unten. */
.wp-block-group[style*="min-height:360px"] { min-height: 0 !important; }
/* Knopf unter einer Liste: gleicher Abstand wie zwischen den Absätzen, Abstand zum Bild darunter etwas grösser. */
.wp-block-column > .wp-block-buttons:last-child { margin-top: 20px !important; }
.wp-block-columns > .wp-block-column:has(> .wp-block-buttons:last-child) { margin-bottom: 12px; }
/* Einzelner Knopf nach Text (z. B. Protokoll unter «News und Termine»): nicht 58 px abgesetzt, sondern wie ein
   Absatz; langer Text bricht ausgewogen um und bleibt mit Innenrand in der Pille. */
.wp-block-spacer[style*="height:0px"] { display: none; }
/* Der Abschnitt setzt selbst schon rund 19 px Blockabstand; zusammen etwa 24 px. */
:is(p, ul, ol, .wp-block-spacer) + .wp-block-buttons { margin-top: 6px !important; }
.wp-block-buttons:not(:has(> .wp-block-button + .wp-block-button)) .wp-block-button__link {
  display: block; padding: 12px 24px !important; text-align: center !important; text-wrap: balance; overflow-wrap: anywhere;
}