/* wp-bridge.css - die einzige handgeschriebene CSS-Datei im Theme.
   ==========================================================================

   theme.css und mobile.css sind wortgleiche Kopien der statischen Seite und
   werden nie angefasst. Sie kennen aber die Klassen nicht, die WordPress um
   jeden Core-Block legt - und die bringen eigene Abstaende, Rahmen und
   Layoutregeln mit.

   Diese Datei macht genau das rueckgaengig. Jede Regel hier zielt
   ausschliesslich auf .wp-block-* oder .is-layout-*. Sie greift nie in das
   Design ein, sondern raeumt nur weg, was WordPress zusaetzlich mitbringt.

   Geladen als letzte der drei Dateien.
   ========================================================================== */


/* --- Layout-Abstaende ------------------------------------------------------
   Core gibt Flow-Containern normalerweise 24 px zwischen den Kindern. Das
   schaltet bereits theme.json ab (settings.spacing.blockGap: null und
   styles.spacing.blockGap: "0px") - geprueft am ausgelieferten
   global-styles-inline-css, dort steht keine "* + *"-Regel mehr.

   Hier steht deshalb bewusst KEINE pauschale Regel wie
   ".is-layout-flow > * { margin-block: 0 }". Sie wuerde auch die gewollten
   Abstaende des Designs treffen: .about hat 3 px margin-top, .refs -3 px,
   .ikigai 1 px - genau damit die Sektionen auf ihren Pixelpositionen sitzen.
   Neutralisiert wird stattdessen gezielt pro Block, weiter unten.

   Flex- und Grid-Container bekommen von Core 0.5em Luecke. Die betrifft nur
   Bloecke, die wir als solche einsetzen (Galerie), und wird dort gesetzt. */

/* Core beschraenkt Kinder eines constrained-Containers auf contentSize und
   zentriert sie. Unsere Sektionen sind absolut positioniert oder volle
   Breite - beides vertraegt keine Auto-Margins. */
.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
  max-width: none;
  margin-inline: 0;
}

/* --- Bilder ----------------------------------------------------------------
   core/image liefert <figure class="wp-block-image"><img>. Die figure traegt
   von Haus aus Abstand nach unten und eine eigene Ausrichtung. Sie soll sich
   wie ein blankes <img> verhalten, damit die Positionen aus theme.css greifen. */
.wp-block-image {
  margin: 0;
  display: block;
}
/* Hier steht bewusst KEIN max-width und KEIN height.

   theme.css setzt im Reset "img { max-width: 100%; height: auto }" und nimmt
   das an einzelnen Stellen gezielt wieder zurueck: das Kontaktfoto ist
   654 px breit in einem 395 px schmalen Rahmen, absichtlich, damit der
   Ausschnitt stimmt. Eine Regel ".wp-block-image img { max-width: 100% }"
   hat dieselbe Spezifitaet wie ".contact__photo img { max-width: none }" -
   und diese Datei laedt spaeter, also gewinnt sie. Das Foto wurde dadurch
   auf 395 x 263 gequetscht statt 654 x 436.

   Dasselbe gilt fuer height: .works__thumb img braucht height: 100%. */
.wp-block-image img {
  display: block;
}
/* Bildunterschriften kommen im Design nicht vor. Sichtbar wuerden sie das
   Layout verschieben - die Redaktion soll sie trotzdem eintragen koennen
   (sie landen als alt-naher Text in der Mediathek), nur eben nicht gerendert. */
.wp-block-image figcaption {
  display: none;
}

/* --- Video -----------------------------------------------------------------
   In den beiden Beitragskarten darf statt eines Bildes auch ein Video
   stehen. core/video liefert <figure class="wp-block-video"><video>. Die
   figure soll sich wie die Bild-figure verhalten; Groesse und Beschnitt des
   <video> stehen in theme.css neben denen des <img>.

   Nur hochgeladene Dateien, keine Einbettung: ein YouTube-Embed waere ein
   externer Request und wuerde die Aussage der Datenschutzerklaerung kippen.
   core/embed steht deshalb nicht auf der Whitelist. */
.wp-block-video {
  margin: 0;
  display: block;
}
.wp-block-video figcaption {
  display: none;
}

/* --- Button ohne Ziel ------------------------------------------------------
   Der Knopf im Beitragsblock bekommt sein Ziel von der Redaktion. Solange
   keines gesetzt ist, erzeugt core/button ein <a> ohne href - ein Knopf, der
   nirgendwohin fuehrt. Der soll gar nicht erst erscheinen. */
.post-main__cta .wp-block-button__link:not([href]),
.post-main__cta .wp-block-button__link[href=""] {
  display: none;
}

/* --- Galerie ---------------------------------------------------------------
   Das Logo-Band ist eine core/gallery. Core macht daraus ein Flex-Grid mit
   eigener Luecke und prozentualen Breiten; die Marquee-Regeln in theme.css
   brauchen eine schlichte Liste. */
.wp-block-gallery {
  margin: 0;
  gap: 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  width: auto;
  flex-grow: 0;
  margin: 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: auto;
  flex: none;
}

/* --- Seitentitel -----------------------------------------------------------
   core/post-title bringt word-break: break-word mit. Das trennt lange Woerter
   mitten durch, ohne Trennstrich: aus DATENSCHUTZERKLAERUNG wurde
   "DATENSCHUTZERKLAE" / "RUNG", und die Seite war 70 px hoeher als die
   statische Fassung. Dort laeuft die Ueberschrift stattdessen ueber den
   760-px-Satzspiegel hinaus - das ist der Referenzstand. */
.wp-block-post-title {
  word-break: normal;
}

/* --- Listen ----------------------------------------------------------------
   Der Reset in theme.css trifft "ul" (Spezifitaet 0,0,1), Core trifft
   ".wp-block-list" (0,1,0) und gewinnt damit. Nur die Rechtstextseiten nutzen
   Listen, dort sollen sie aussehen wie im statischen Impressum. */
.wp-block-list {
  margin: 0;
  padding-inline-start: 1.25em;
  list-style: disc;
}

/* --- Zitat -----------------------------------------------------------------
   Das Kritikerzitat ist ein core/quote. Core gibt ihm Rahmen links und
   Abstand; die Gestaltung steht in theme.css unter .refs__quote blockquote. */
.wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
}
.wp-block-quote cite {
  font-style: normal;
}

/* --- Buttons ---------------------------------------------------------------
   Core bringt fuer .wp-block-button__link eine vollstaendige Optik mit
   (Farbe, Radius, Polsterung). Die Buttons im Design haengen an .btn. */
.wp-block-buttons {
  gap: 0;
  margin: 0;
}
.wp-block-button,
.wp-block-button__link {
  margin: 0;
}
.wp-block-button__link {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

/* --- Gruppen und Inhaltscontainer ------------------------------------------
   Hier steht bewusst KEINE pauschale Regel auf .wp-block-group.

   Fast jedes Element dieses Designs ist eine core/group: die Sektionen, die
   Bildrahmen, .legal, .legal__inner. Eine Regel auf .wp-block-group trifft
   deshalb nicht WordPress, sondern das eigene Layout - und sie gewinnt, weil
   diese Datei zuletzt geladen wird und beide Selektoren dieselbe Spezifitaet
   haben. Zweimal beim Nachmessen aufgefallen:

     max-width: none  ->  .legal__inner verlor seine 760 px, der Rechtstext
                          lief ueber die volle Breite, das Impressum war
                          512 px kuerzer.
     padding: 0       ->  .legal verlor 80 px oben und 120 px unten.

   Core gibt Gruppen von sich aus weder Polsterung noch Breite. Noetig ist
   nur, was WordPress zusaetzlich aufschlaegt - und das steht unten. */

/* Core faerbt den Rumpf ueber .has-background ein und gibt ihm dabei
   Polsterung. Im Design traegt jede Sektion ihre Flaeche selbst. */
.wp-block-group.has-background {
  padding: 0;
}

/* --- Werke-Karussell -------------------------------------------------------
   Auf der Seite baut main.js das Karussell: es blendet Seiten und Baende ein
   und aus und fuellt Cover-Rahmen und Miniaturenreihe aus den Baendern. Im
   Editor laeuft dieses Skript nicht - dort wuerde also nur der erste Band
   der ersten Serie sichtbar sein, und genau das war der Fall: die
   Klappentexte der Baende 2 bis 4 liessen sich gar nicht aufrufen.

   Deshalb zeigt der Editor diese eine Sektion bewusst anders als die Seite:
   als einfache Liste aller Baende beider Serien, Deko ausgeblendet. Ein
   Karussell laesst sich auf einer Leinwand nicht abbilden; eine Liste, in
   der alles erreichbar ist, nuetzt mehr als ein huebsches Standbild, in dem
   die Haelfte fehlt. Wie es wirklich aussieht, zeigt die Vorschau. */
.editor-styles-wrapper .works {
  height: auto;
  padding-block: calc(24 * var(--u));
}
.editor-styles-wrapper .works__strip,
.editor-styles-wrapper .works__cover,
.editor-styles-wrapper .works__thumbs,
.editor-styles-wrapper .works__timer,
.editor-styles-wrapper .works .carousel-arrow,
.editor-styles-wrapper .works__dots {
  display: none;
}
.editor-styles-wrapper .works__slide,
.editor-styles-wrapper .works__body,
.editor-styles-wrapper .works__actions {
  position: static;
  width: auto;
}
/* Beide Serien zeigen. Auf der Seite haelt diese Regel die zweite Seite
   zurueck, bis main.js sie uebernimmt - im Editor laeuft es nie, und Green
   Garden waere unerreichbar. */
.editor-styles-wrapper .works .works__slide ~ .works__slide {
  display: block;
}
.editor-styles-wrapper .works__body .works__volume,
.editor-styles-wrapper .works__body .works__volume ~ .works__volume {
  display: block;
  position: relative;
  min-height: 0;
  margin-bottom: calc(48 * var(--u));
  padding-left: calc(170 * var(--u));
}
/* Das Cover des Bandes - auf der Seite unsichtbar, hier die Stelle zum
   Austauschen. */
.editor-styles-wrapper .works__volume .works__cover-src {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(140 * var(--u));
}
.editor-styles-wrapper .works__volume .works__cover-src img {
  width: 100%;
  height: auto;
}
.editor-styles-wrapper .works__actions {
  margin-top: calc(18 * var(--u));
}

/* --- Ausrichtung -----------------------------------------------------------
   alignfull sprengt sonst aus .page heraus. Innerhalb des 1440er Containers
   ist "voll" immer genau die Containerbreite. */
.alignfull,
.alignwide {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}