/* Darum Ostern – ergänzende Styles zu theme.json
   Gestaltung nach dem DarumOstern-Profil des Heukelbach Design Systems:
   Papier, Anthrazit, Petrol, Safran, Pfirsich, Mint · Playfair Display (Thesen, Versalien) · Lato (Zeilen, Text).
   Keine Schatten, keine dekorativen Verläufe, keine Kästen mit Rahmen um Karten; Bewegung 200 ms ruhig.
   Farben/Abstände nur über Tokens (var(--wp--preset--…), var(--wp--custom--…)). */

/* Kopf, Inhalt und Fuß ohne Lücke aneinander (Papier-Band läuft vom Kopf in den Seitenkopf) */
.wp-site-blocks > * { margin-block-start: 0; }

:root {
  --dmo-ease: var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
  --dmo-linie: var(--wp--custom--linie);
}

/* ---------- Gesperrte Zeile (Unterzeile in Versalien) ---------- */
.dmo-zeile,
.wp-block-post-terms.dmo-zeile a,
.wp-block-post-date.dmo-zeile {
  font-family: var(--wp--preset--font-family--lato);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--zeile);
  color: var(--wp--preset--color--petrol-tief);
  text-decoration: none;
  margin-block: 0;
}

/* ---------- Kopfbereich ---------- */
.dmo-header { padding-block: 1rem; }
.dmo-header__leiste { align-items: center; min-height: 64px; }
.dmo-header__spacer { width: 76px; flex: 0 0 76px; }
.dmo-logo { display: block; flex: 0 0 76px; line-height: 0; }
.dmo-logo img { width: 76px; height: auto; }
.dmo-nav .wp-block-navigation__container { gap: clamp(1.25rem, 3.6vw, 3.25rem); }
.dmo-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--dunkel);
  text-decoration: none;
  padding-block: 0.4em;
  box-shadow: inset 0 0 0 var(--wp--preset--color--gelb);
  transition: box-shadow var(--dmo-ease);
}
.dmo-nav .wp-block-navigation-item__content:hover,
.dmo-nav .current-menu-item > .wp-block-navigation-item__content,
.dmo-nav [aria-current="page"] {
  text-decoration: none;
  box-shadow: inset 0 calc(-1 * var(--dmo-linie)) 0 var(--wp--preset--color--gelb);
}
.dmo-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--creme) !important;
  z-index: 100000;
}
.dmo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: center;
  gap: 1.5rem;
  padding-top: 4rem;
  font-size: 1rem;
}
@media (max-width: 599px) {
  .dmo-header__spacer { display: none; }
  .dmo-header__leiste { flex-direction: row-reverse; }
  .dmo-logo, .dmo-logo img { width: 60px; flex-basis: 60px; }
}

/* ---------- Seitenkopf (Papier-Band mit These) ---------- */
.dmo-hero {
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem) !important;
  text-align: center;
}
.dmo-hero > * + * { margin-top: 0.9rem; }
.dmo-title {
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto !important;
}
.dmo-title::after {
  content: "";
  display: block;
  width: 4rem;
  height: var(--dmo-linie);
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  background: var(--wp--preset--color--gelb);
}
.dmo-main { padding-bottom: var(--wp--preset--spacing--60); }
.dmo-main > .dmo-inhalt { margin-top: var(--wp--preset--spacing--50); }
.dmo-main--ohne-titel > .dmo-inhalt { margin-top: 0; }

/* ---------- Inhalt ---------- */
/* Textbreite wie die Blogartikel auf heukelbach.org (mwh-website: 946 px, bis 1024 px Fensterbreite 770 px);
   die 946 px stehen in theme.json (layout.contentSize). */
@media (max-width: 1024px) {
  :root { --wp--style--global--content-size: 770px; }
}
.dmo-inhalt > * + h2,
.dmo-inhalt > * + h3 { margin-top: 3rem; }
.dmo-inhalt a:not(.wp-element-button):not(.wp-block-button__link) {
  text-decoration-color: var(--wp--preset--color--petrol);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dmo-ease);
}
.dmo-inhalt a:not(.wp-element-button):not(.wp-block-button__link):hover {
  text-decoration-color: var(--wp--preset--color--gelb);
}
/* Petrol als Textfarbe ist zu hell (2,5 : 1) – Text in der tiefen Petrol-Stufe, Flächen bleiben Petrol */
body .has-petrol-color.has-text-color { color: var(--wp--preset--color--petrol-tief) !important; }
body .has-gelb-color.has-text-color:not([class*="-background-color"]) { color: var(--wp--preset--color--dunkel) !important; }
.wp-block-image img { height: auto; }
.wp-block-embed iframe { width: 100%; }
em, i { font-style: italic; }

/* Größerer Fließtext (aus den alten Artikeln) */
.is-style-gross { font-size: var(--wp--preset--font-size--large); line-height: 1.6; }

/* Thesenkarte: Papierweiße Fläche, breiter Petrol-Rahmen, These in Serifen-Versalien */
body .is-style-zitat.is-style-zitat {
  background: var(--wp--preset--color--creme);
  border: var(--wp--custom--rahmen) solid var(--wp--preset--color--petrol);
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) !important;
  margin-block: 2.5rem !important;
  font-family: var(--wp--preset--font-family--playfair);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--wp--preset--color--dunkel) !important;
}

/* Zitate (Bibelstellen, Autorenzitate): dieselbe Karte, aber in der Textschrift statt in
   Serifen-Versalien. Lange Zitate in Playfair-Versalien sind kaum lesbar, und Playfair fett
   kursiv gibt es nicht (der Browser schrägt die Schrift künstlich). In den Artikeln ist eine
   Thesenkarte mit Kursivtext ein Zitat, die direkt folgende ohne Kursivtext seine Quelle;
   beide stehen zusammen in einer Karte. Der Zitat-Block (core/quote, theme.json) sieht genauso aus. */
body .is-style-zitat.is-style-zitat:has(em),
.dmo-inhalt .wp-block-quote {
  font-family: var(--wp--preset--font-family--lato);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.6;
  text-transform: none;
  text-align: left;
  text-wrap: pretty;
}
.dmo-inhalt .wp-block-quote p { font-style: italic; }
body .is-style-zitat.is-style-zitat:has(em):has(+ .is-style-zitat) {
  margin-bottom: 0 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 0;
}
body .is-style-zitat.is-style-zitat:has(em) + .is-style-zitat:not(:has(em)) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0;
}
/* Quelle als gesperrte Petrol-Zeile */
body .is-style-zitat.is-style-zitat:has(em) + .is-style-zitat:not(:has(em)),
.dmo-inhalt .wp-block-quote cite {
  display: block;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--knopf);
  text-align: left;
  color: var(--wp--preset--color--petrol-tief) !important;
}
.dmo-inhalt .wp-block-quote cite { margin-top: 0.75rem; }

/* Text zum Teilen */
.is-style-teiltext {
  background: var(--wp--preset--color--creme);
  border-left: var(--dmo-linie) solid var(--wp--preset--color--petrol);
  padding: 1rem 1.25rem;
  font-size: var(--wp--preset--font-size--small);
}

/* Farbige Inhaltsflächen (sanfte Flächen, ohne Rahmen/Schatten) */
.wp-block-group.is-style-karte.has-background { padding: clamp(1.25rem, 3vw, 2rem) !important; }
.wp-block-group.is-style-karte > :first-child { margin-top: 0; }
.has-background:not(.dmo-header):not(.dmo-footer):not(.dmo-hero):not(.wp-block-button__link):not(.is-style-karte):not(.is-style-zitat):not(.is-style-teiltext) {
  padding-block: var(--wp--preset--spacing--50);
}

/* Inhaltsverzeichnis/„Inhalt:“-Zeilen und kleine Zwischenzeilen */
.wp-block-heading + .wp-block-heading { margin-top: 0.5rem; }

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
  transition: padding var(--dmo-ease), background-color var(--dmo-ease), color var(--dmo-ease);
}
/* Hover wächst (2 px mehr Innenabstand), färbt nicht um – nicht auf der Seite „Teilen“
   und nicht bei den Warenkorb-Buttons (die färben um, siehe Shop).
   :where() hält die Spezifität wie ohne Ausnahme. Body-Klasse: functions.php. */
:where(body:not(.dmo-seite-teilen)) .wp-block-button__link:where(:not(.add_to_cart_button, .single_add_to_cart_button, .wc-block-components-button)):hover,
:where(body:not(.dmo-seite-teilen)) .wp-element-button:where(:not(.add_to_cart_button, .single_add_to_cart_button, .wc-block-components-button)):hover {
  padding: calc(1em + 2px) calc(1.9em + 2px) !important;
  margin: -2px;
}
/* Auch der „Video abspielen“-Knopf (darumostern-core/assets/core.css) wächst dort nicht. */
.dmo-seite-teilen .dmo-yt__play:hover { padding: 1em 1.6em; }
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--dunkel);
  border-color: var(--wp--preset--color--petrol);
}
.wp-block-button.is-style-dunkel > .wp-block-button__link {
  background: var(--wp--preset--color--dunkel);
  border-color: var(--wp--preset--color--dunkel);
  color: var(--wp--preset--color--creme);
}
.wp-block-button.is-style-download > .wp-block-button__link { font-size: 0.8125rem; }
/* „Zurück zum Indizienboard“ nur, wenn man vom Indizienboard (Startseite) kommt – siehe darumostern-core */
#zurück { display: none; }
.dmo-vom-board #zurück { display: block; }
.dmo-vom-board #indizien { display: none; }

/* ---------- Karten (Archiv, Raster): kein Kasten – Bild, Zeile, Titel, Text ---------- */
.dmo-card { background: none; }
.dmo-card .wp-block-post-featured-image { margin-bottom: 0.5rem; }
.dmo-card__titel, .dmo-card .wp-block-post-title {
  font-size: 1.375rem;
  margin: 0;
}
.dmo-card .wp-block-post-title a { color: var(--wp--preset--color--dunkel); text-decoration: none; }
.dmo-card .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gelb); }

/* Ausklappbare Fragen (FAQ) */
.wp-block-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--wp--preset--color--dunkel);
  list-style-position: outside;
}
.wp-block-details[open] summary { margin-bottom: 0.75rem; }

/* Social-Links: einfarbig Anthrazit */
.wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--wp--preset--color--dunkel); }
.wp-block-social-links.is-style-logos-only .wp-social-link svg { width: 1.75rem; height: 1.75rem; }

/* ---------- Kontakt ---------- */
.dmo-kontakt {
  margin-top: var(--wp--preset--spacing--60) !important;
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--petrol);
}
.dmo-kontakt > .wp-block-heading { margin-top: 0.5rem; margin-bottom: 1.75rem; }
.alignfull.has-background + .dmo-kontakt { border-top: 0; }

/* Kontaktformular (darumostern-core) */
.dmo-form { display: grid; gap: 1.1rem; }
.dmo-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--knopf);
}
.dmo-form input[type=text], .dmo-form input[type=email], .dmo-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--wp--preset--color--dunkel);
  border-radius: 0;
  background: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--dunkel);
  font: inherit;
  font-size: 1rem;
}
.dmo-form textarea { min-height: 8rem; resize: vertical; }
.dmo-form input:focus-visible, .dmo-form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--petrol-tief);
  outline-offset: 2px;
}
.dmo-form .dmo-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dmo-form button {
  justify-self: center;
  border: 2px solid var(--wp--preset--color--gelb);
  background: var(--wp--preset--color--gelb);
  color: var(--wp--preset--color--dunkel);
  padding: 1em 1.9em;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--knopf);
  cursor: pointer;
  transition: padding var(--dmo-ease);
}
.dmo-form button:hover { padding: calc(1em + 2px) calc(1.9em + 2px); margin: -2px; }
.dmo-form button:focus-visible { outline: 2px solid var(--wp--preset--color--dunkel); outline-offset: 3px; }
.dmo-form__privacy { font-size: 0.8125rem; }
.dmo-form__notice { padding: 0.9rem 1.1rem; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--dunkel); }
.dmo-form__notice.is-error { background: var(--wp--preset--color--pfirsich); }

/* ---------- Shop (WooCommerce-Blöcke) ---------- */
.wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: 1rem !important;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--wp--preset--color--dunkel);
}
.wp-block-woocommerce-product-collection .wp-block-post-title a,
.woocommerce-loop-product__link { color: var(--wp--preset--color--dunkel); text-decoration: none; }
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img { background: var(--wp--preset--color--creme); }
.wp-block-woocommerce-product-price,
.wc-block-components-product-price { font-family: var(--wp--preset--font-family--lato); color: var(--wp--preset--color--petrol-tief); }
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border-radius: 0 !important;
  border-color: var(--wp--preset--color--dunkel) !important;
}
.wc-block-components-button:not(.is-link) {
  background: var(--wp--preset--color--gelb) !important;
  color: var(--wp--preset--color--dunkel) !important;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--knopf);
}
/* Warenkorb-Buttons („In den Warenkorb“, Warenkorb/Kasse): wachsen beim Hover nicht,
   sondern färben um – Anthrazit mit Papier-Schrift. */
.add_to_cart_button,
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
  transition: background-color var(--dmo-ease), border-color var(--dmo-ease), color var(--dmo-ease);
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--wp--preset--color--dunkel) !important;
  border-color: var(--wp--preset--color--dunkel) !important;
  color: var(--wp--preset--color--creme) !important;
}
.wp-block-woocommerce-breadcrumbs { font-size: 0.8125rem; }

/* ---------- Fußbereich ---------- */
.dmo-footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); margin-top: 0 !important; }
.dmo-footer-nav .wp-block-navigation__container { gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem); justify-content: center; }
.dmo-footer-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--dunkel);
  font-size: 0.8125rem;
  text-decoration: none;
}
.dmo-footer-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gelb); text-decoration-thickness: 2px; }
.dmo-absender { margin-top: 1.5rem; font-size: 0.8125rem; }
.dmo-absender a { color: var(--wp--preset--color--dunkel); text-decoration-color: var(--wp--preset--color--petrol); }

/* ---------- Cookie-Banner (Finsweet, wie auf der Startseite) im DarumOstern-Stil ---------- */
.fs-cc-banner_component-3 {
  background: var(--wp--preset--color--creme);
  border-top: 0;
  border-bottom: var(--dmo-linie) solid var(--wp--preset--color--gelb);
  color: var(--wp--preset--color--dunkel);
}
.fs-cc-banner_text-3 { color: var(--wp--preset--color--dunkel); font-size: 0.875rem; line-height: 1.6; }
.fs-cc-banner_text-3 a { color: var(--wp--preset--color--dunkel); text-decoration-color: var(--wp--preset--color--petrol); }
.fs-cc-banner_button-3 {
  border-radius: 0;
  border: 2px solid var(--wp--preset--color--gelb);
  background: var(--wp--preset--color--gelb);
  color: var(--wp--preset--color--dunkel);
  font-family: var(--wp--preset--font-family--lato);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--knopf);
  cursor: pointer;
}
.fs-cc-banner_button-3.fs-cc-button-alt {
  background: transparent;
  color: var(--wp--preset--color--dunkel);
  border-color: var(--wp--preset--color--dunkel);
}
.fs-cc-banner_close-3 { box-shadow: none; background: transparent; color: var(--wp--preset--color--dunkel); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 1.5rem; }

/* Shop-Übersicht */
.dmo-shop-leiste { margin-bottom: 1.5rem; font-size: var(--wp--preset--font-size--small); }
.dmo-shop-leiste select { border: 1.5px solid var(--wp--preset--color--dunkel); border-radius: 0; padding: 0.4rem 0.6rem; font: inherit; background: var(--wp--preset--color--weiss); }
/* Produktbilder ohne gerundete Ecken (Fläche statt Karte) */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img,
.wp-block-woocommerce-product-image-gallery img { border-radius: 0 !important; }
.wc-block-grid__product-image img { border-radius: 0 !important; }
.dmo-inhalt a.wc-block-grid__product-link { text-decoration: none; }
/* Das Magazin-Bild (1Heft-bestellen.png) hat runde weiße Ecken in der Datei selbst.
   1,5 % Rand abschneiden und auf die Ausgangsgröße zurückskalieren, damit es
   eckig ist wie die übrigen Produktbilder (Shop, Produktseite, Zoom, Warenkorb). */
img[src*="/1Heft-bestellen"] { clip-path: inset(1.5%); transform: scale(1.031); }