/**
 * CÍRCULO ORIGEM · Haltung, Origem, Wer wir sind
 * © Marco Duarte
 *
 * Als letzte CSS-Datei einbinden, nach wordmark.css. Auf der Live-Seite im Browser
 * ausprobiert (1440 px). Prüfen: Baut cms.js das Fenster #wer-wir-sind neu auf,
 * muss die Bildspalte dort eingesetzt werden, nicht in index.html.
 *
 * Dazu in ProcessWire:
 *   haltung.meta   «Von Hand gelesen<br>In der Region gepresst<br>Kleine Mengen»
 *   origem.body    Satz zum Salz entfernen (gehört ins Datenblatt Salz)
 * Dazu im HTML (index.html), im Knopf .wer-btn nach den beiden Bildern:
 *   <span class="wer-label">Wer wir sind</span>
 */

/* Ein Kreismass für beide: «Nur einmal pro Saison» und den Stempel «Wer wir sind» */
:root { --circle: 140px; }
@media (max-width: 768px) { :root { --circle: 112px; } }

/* ── Haltung ─────────────────────────────────────────────── */

#haltung .ground-circle { width: var(--circle); height: var(--circle); }

/* Meta ohne Zwangsumbruch, eine Angabe pro Zeile */
#haltung .ground-meta { max-width: none; }

/* Kreis auf die Textkante, Zweig und Kreis auf eine gemeinsame Unterkante */
#haltung .ground-circle {
  justify-self: start;
  align-self: end;
  margin-top: 3rem;
}
#haltung .zweig {
  align-self: end;
  margin-top: 3rem;
}

/* ── Origem ──────────────────────────────────────────────── */

/* Ortszeile nie umbrechen («Beira / Litoral») */
#origem .origem-head .edition-kicker {
  max-width: none;
  white-space: nowrap;
}

/* Stempel allein, 44px (Label nur noch aria-label / Menü) */
.wer-btn {
  --wer-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wer-size);
  height: var(--wer-size);
  padding: 0;
  overflow: visible;
  border-radius: 50%;
}
/* Ein Slot für beide Motive: sonst stapelt Flex schwarz + weiss untereinander */
.wer-btn .wer-btn-mark-wrap {
  position: relative;
  display: block;
  width: var(--wer-size);
  height: var(--wer-size);
  flex-shrink: 0;
}
.wer-btn .wer-btn-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wer-btn .wer-btn-mark--schwarz {
  display: block;
}
.wer-btn .wer-btn-mark--weiss {
  display: none !important;
}
:root[data-theme="dark"] .wer-btn .wer-btn-mark--schwarz {
  display: none !important;
}
:root[data-theme="dark"] .wer-btn .wer-btn-mark--weiss {
  display: block !important;
}
#origem .wer-btn {
  position: relative;
  margin-top: 3rem;
}
.wer-btn img { transition: transform 0.8s var(--ease); }
.wer-btn:hover img,
.wer-btn:focus-visible img { transform: rotate(-12deg); }
.wer-btn .wer-label {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wer-btn img { transition: none; }
}

/* ── Wer wir sind (Fenster) ──────────────────────────────── */
/* Im Fenster #wer-wir-sind, in .datenblatt-layout nach .datenblatt-copy:

   <figure class="wer-media">
     <img src="https://backend.circuloorigem.com/site/assets/files/1016/olivenhain-2880x3840-1.1920x0-w80.jpg"
          srcset="https://backend.circuloorigem.com/site/assets/files/1016/olivenhain-2880x3840-1.1280x0-w80.jpg 1280w,
                  https://backend.circuloorigem.com/site/assets/files/1016/olivenhain-2880x3840-1.1920x0-w80.jpg 1920w"
          sizes="(min-width: 769px) 40vw, 100vw"
          alt="Olivenbäume in einer Blumenwiese, Vale de Todos" loading="lazy" decoding="async">
     <figcaption>Vale de Todos</figcaption>
   </figure>

   Besser über ProcessWire: Bildfeld auf der Seite «Wer wir sind», cms.js setzt es ein. */

#wer-wir-sind .datenblatt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
#wer-wir-sind .wer-media { margin: 0; padding-top: 5.5rem; }
#wer-wir-sind .wer-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
#wer-wir-sind .wer-media figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
#wer-wir-sind .herkunft-panel-inner { height: auto; min-height: 0; }

@media (max-width: 768px) {
  #wer-wir-sind .datenblatt-layout { grid-template-columns: 1fr; row-gap: 2rem; }
  #wer-wir-sind .wer-media { padding-top: 0; }
  #origem .origem-head .edition-kicker { white-space: normal; }
}