/* ==========================================================================
   Anpassungen für die umgewandelten Inhalte
   --------------------------------------------------------------------------
   Die Seiten bestehen in WordPress aus Kernblöcken. Deren Markup weicht an
   ein paar Stellen von der statischen Fassung ab, und genau diese Stellen
   werden hier nachgezogen. Alles andere kommt unverändert aus style.css.

   Der Grundsatz dabei: Was in der statischen Fassung ein dekoratives SVG war,
   zeichnet hier CSS. Eine Grafik mitten im Satz ist im Editor ein Hindernis —
   sie lässt sich versehentlich löschen, und beim Schreiben steht sie im Weg.
   Als ::before gehört sie zur Gestaltung und nicht zum Text.
   ========================================================================== */

/* --- Häkchen in Aufzählungen ---------------------------------------------
   Vorher: <span class="tick"><svg …></span> vor jedem Punkt.
   Jetzt: dieselbe Scheibe, gezeichnet von CSS.                             */
:root {
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E");
}

.checklist li::before,
.checks li::before,
.hero__checks li::before {
  content: "";
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: .12rem;
  border-radius: var(--r-pill);
  background: var(--tanne) var(--haken) center / .72rem .72rem no-repeat;
}

.checks--warn li::before { background-color: var(--rot); }

/* --- Das Schweizerkreuz in der Auszeichnung ------------------------------
   Nur dort, wo es vorher auch stand: Die flache Pille («Rechtliches»,
   «Fehler 404») trug nie eines.                                           */
.pill:not(.pill--flat)::before {
  content: "";
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  background: var(--cross) center / contain no-repeat;
}

/* --- Knöpfe ---------------------------------------------------------------
   Bei core/button sitzt die Klasse am Rahmen, nicht am Link. Die Regeln aus
   style.css treffen dadurch beide. Der Rahmen soll nichts davon abbekommen —
   sonst steht um jeden Geisterknopf ein zweiter Rahmen.                    */
.wp-block-button[class*="btn--"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}

/* --- Begriffslisten als Tabelle ------------------------------------------
   dt und dd kennt der Blockeditor nicht. Aus jedem Paar ist eine Tabellen-
   zeile geworden: zwei Spalten, im Editor bearbeitbar wie jede Tabelle.
   Aussehen und Verhalten bleiben wie bei der Definitionsliste.             */
.deflist.wp-block-table { margin: 0; }
.deflist.wp-block-table table { width: 100%; border-collapse: collapse; }
.deflist.wp-block-table td {
  padding: .8rem 0;
  border: 0;
  border-bottom: 2px solid var(--hairline);
  font-size: var(--t-small);
  vertical-align: top;
}
.deflist.wp-block-table tr:last-child td { border-bottom: 0; }
.deflist.wp-block-table td:first-child { color: var(--schiefer); width: 11rem; }
.deflist.wp-block-table td:last-child { font-weight: 600; padding-left: 1.5rem; }

@media (max-width: 639px) {
  .deflist.wp-block-table td { display: block; border-bottom: 0; padding: .1rem 0; }
  .deflist.wp-block-table td:first-child { width: auto; padding-top: .8rem; }
  .deflist.wp-block-table td:last-child { padding: 0 0 .8rem; border-bottom: 2px solid var(--hairline); }
  .deflist.wp-block-table tr:last-child td:last-child { border-bottom: 0; }
}

/* --- Frage und Antwort als Ausklappblock ---------------------------------
   Vorher ein Kasten mit Überschrift und Absatz, jetzt ein <details>. Das ist
   im Editor ein einziger Block mit anklickbarer Frage — und für den Besucher
   eine Verbesserung: Die Antworten sind zugeklappt und die Seite kürzer.   */
details.qa { padding: 0; }
details.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::after {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: auto;
  margin-top: .2rem;
  background: currentColor;
  clip-path: polygon(50% 72%, 8% 26%, 20% 16%, 50% 48%, 80% 16%, 92% 26%);
  transition: transform var(--fast);
}
details.qa[open] > summary::after { transform: rotate(180deg); }
details.qa > summary:focus-visible { outline: 3px solid var(--tanne); outline-offset: -3px; }
details.qa > *:not(summary) {
  margin: 0;
  padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.6rem);
}
details.qa p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--schiefer);
  max-width: 70ch;
}

/* --- Galerien -------------------------------------------------------------
   Aus <div class="gal"> mit <a class="gal__it"> ist core/gallery geworden.
   Dessen Kinder sind einzelne Bildblöcke; die bekommen hier die Form, die
   vorher die Kacheln hatten.                                              */
.gal.wp-block-gallery {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}
.gal.wp-block-gallery .wp-block-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--r-s);
  background: var(--stahl-hell);
  transition: transform var(--med), box-shadow var(--med);
}
.gal.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal.wp-block-gallery .wp-block-image:hover { transform: translateY(-2px); box-shadow: var(--float); }

/* Farb- und Folienmuster tragen eine Bildunterschrift und dürfen nicht
   beschnitten werden — sie sind das Argument der Seite, nicht Beiwerk. */
.gal--cap.wp-block-gallery .wp-block-image { aspect-ratio: auto; background: none; }
.gal--cap.wp-block-gallery figcaption {
  margin-top: .4rem;
  font-size: var(--t-small);
  text-align: center;
}

/* --- Bilder in Karten und Zweispaltern ------------------------------------
   core/image bringt <figure> mit eigenen Abständen mit; die Klassen der
   statischen Fassung sollen dennoch greifen.                              */
.wp-block-image.fig,
.wp-block-image.stagecard__img { margin: 0; }
.wp-block-image.fig img { display: block; width: 100%; }

/* --- Spalten ---------------------------------------------------------------
   Aus .split und .grid sind core/columns geworden. Die Rasterangaben aus
   style.css gelten für Grid-Container; core/columns ist ein Flex-Container.
   Darum hier die Entsprechung.                                            */
.wp-block-columns.split,
.wp-block-columns.grid,
.wp-block-columns.grid-3,
.wp-block-columns.hero__grid { align-items: flex-start; }

@media (max-width: 781px) {
  .wp-block-columns.split,
  .wp-block-columns.hero__grid { gap: var(--s50); }
}

/* --- Die Wortmarke --------------------------------------------------------
   Nicht core/site-title, sondern zwei gewöhnliche Absätze. Grund: Der
   Websitename lautet «architektur-und-design.ch» und gehört so in den
   Seitentitel für Google — im Kopf steht aber seit je «architektur und
   design». Mit dem längeren Namen ragen die Knöpfe rechts aus der Leiste.
   Als Absätze sind beide Zeilen im Website-Editor anklickbar und änderbar. */
.brand__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.025em;
  white-space: nowrap;
  line-height: 1.1;
}
.brand__name a { color: inherit; text-decoration: none; }

.brand__claim {
  margin: 0;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .613em;
  margin-right: -.613em;
  text-transform: uppercase;
  color: var(--schiefer);
  line-height: 1.1;
}

@media (max-width: 519px) {
  .brand__name { font-size: .88rem; white-space: normal; }
  .brand__claim { display: none; }
}

/* --- Umschaltpunkt der Navigation ----------------------------------------
   WordPress klappt sein Menü ab 600 px auf, die Website erst ab 1440 px —
   vorher passen sieben Einträge nicht nebeneinander. Ohne diese Regel steht
   der Menüknopf auch am Desktop da, nimmt 45 px weg, und die Knöpfe rechts
   ragen aus der Leiste.                                                    */
@media (max-width: 1439px) {
  .nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .nav .wp-block-navigation__responsive-container-open { display: grid; }

  /* Der Menüknopf gehört neben Suche, Warenkorb und Anfrage — nicht in die
     Mitte der Leiste. In der statischen Fassung steht er in derselben
     Gruppe; hier bringt ihn der Navigationsblock mit, also müssen die
     beiden aneinandergerückt werden. Sonst teilen sie sich den freien
     Platz und der Knopf schwebt zwischen Wortmarke und Knöpfen. */
  .hdr__in > .wp-block-navigation.nav { margin-inline: auto 0; }
  .hdr__in { gap: .4rem; }
  .hdr__in .hdr__act { margin-left: 0; }
}

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

/* Der Navigationsblock bringt eigene Abstände mit. Sie sind hier schon auf
   die Werte der statischen Fassung gesetzt; wichtig ist, dass die Liste
   nachgibt statt zu drängeln — sonst schiebt sie Suche, Warenkorb und
   Anfrage-Knopf aus der Leiste. */
.nav .wp-block-navigation__container { min-width: 0; flex-wrap: nowrap; }
.nav .wp-block-navigation-item__content { padding: .6em .72em; }

/* Der Anfrage-Knopf in der Kopfleiste darf nicht umbrechen — «Anfra/ge»
   über zwei Zeilen sieht aus wie ein Fehler, und Platz ist genug da. */
.hdr__cta .wp-block-button__link { white-space: nowrap; }

/* --- Karten, die als Ganzes verlinkt waren --------------------------------
   In der statischen Fassung umschliesst ein Link die ganze Kachel: Bild,
   Überschrift, Text. Ein Link mit Blockinhalt lässt sich im Editor nicht
   bearbeiten, darum ist daraus eine Gruppe geworden und der Verweis sitzt an
   der Überschrift. Damit trotzdem die ganze Kachel anklickbar bleibt, deckt
   der Link sie unsichtbar ab — das ist der übliche Weg und ändert nichts an
   der Bedienbarkeit mit der Tastatur. */
.ist-karte { position: relative; }
.ist-karte h2 a,
.ist-karte h3 a,
.ist-karte h4 a { color: inherit; text-decoration: none; }
.ist-karte h2 a::after,
.ist-karte h3 a::after,
.ist-karte h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ist-karte a:focus-visible::after { outline: 3px solid var(--tanne); outline-offset: 3px; }