/* ==========================================================================
   Maremma Geheimtipp – WordPress-Blöcke im Designsystem
   Die Seiten bestehen aus normalen Blöcken (Gruppe, Überschrift, Absatz,
   Liste, Bild, Galerie, Buttons, Details, Tabelle, Zitat). Hier bekommen sie
   die Gestalt der Komponenten aus main.css.
   ========================================================================== */

/* Abstände kommen aus dem Design, nicht aus WordPress' Standard-Lücken */
.mg-content .is-layout-flow > *,
.mg-content .is-layout-constrained > * { margin-block-start: 0; }
.mg-content .wp-block-group { box-sizing: border-box; }
.mg-content .wp-block-image { margin: 0; }
.mg-content .wp-block-image img { height: auto; }
.mg-content .wp-block-image figcaption,
.mg-content .wp-element-caption { margin: var(--s-3) 0 0; text-align: left; font-family: var(--font-hand); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--ink-soft); }
.mg-content .wp-block-list { margin-top: 0; }
.mg-content .mb-7 { margin-bottom: var(--s-7); }
.mg-content .steps-note { margin-top: var(--s-7); max-width: 40rem; }

/* Buttons */
.mg-content .wp-block-buttons.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.mg-content .wp-block-button { margin: 0; }
.mg-content .wp-block-button__link.btn { border-radius: var(--radius-pill); }
.facts .wp-block-buttons { margin-top: 0; }
.facts .wp-block-button { width: 100%; }
.facts .wp-block-button__link { width: 100%; }

/* Bildrahmen: Klassen „frame“, „arch“ direkt am Bild-Block */
.wp-block-image.frame, .wp-block-image.arch { overflow: hidden; }
.wp-block-image.frame img, .wp-block-image.arch img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.arch:has(figcaption), .wp-block-image.frame:has(figcaption) { overflow: visible; aspect-ratio: auto; border: 0; background: none; border-radius: 0; }
.wp-block-image.arch:has(figcaption) img {
  aspect-ratio: 3 / 4; border: var(--stroke-bold);
  border-radius: 50% 50% var(--radius-m) var(--radius-m) / 37.5% 37.5% var(--radius-m) var(--radius-m);
}
.wp-block-image.frame:has(figcaption) img { border-radius: var(--radius-m); }
.wp-block-image.frame--32:has(figcaption) img { aspect-ratio: 3 / 2; }
.wp-block-image.frame--43:has(figcaption) img { aspect-ratio: 4 / 3; }
.split > .wp-block-image.arch { max-width: 26rem; justify-self: center; width: 100%; }
.frame--portrait { aspect-ratio: 2 / 3; max-width: 24rem; border: var(--stroke-bold); justify-self: center; width: 100%; box-shadow: 0 6px 0 var(--ink); }
.offer-major__media .wp-block-image.frame { border: var(--stroke-bold); }

/* Startseite: Headerbild mit Kreisfoto */
.hero--photo > .wp-block-image.hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero--photo > .wp-block-image.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 90%; }
.hero--photo > .hero__note { position: absolute; z-index: 2; max-width: none; }
.hero__portrait {
  position: absolute; z-index: 2; margin: 0;
  left: max(var(--gutter), calc((100% - var(--max)) / 2 + 1rem)); top: 11rem;
  width: clamp(9rem, 16vw, 15rem); aspect-ratio: 1;
  border: var(--stroke-bold); border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 0 var(--ink); transform: rotate(-3deg); background: var(--white);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 56rem) {
  .hero__portrait { top: 1.25rem; left: var(--gutter); width: 7rem; }
}
@media (max-width: 40rem) {
  .hero--photo .hero__grid { padding-bottom: 9rem; }
}

/* Seitenkopf der Angebotsseiten */
.page-hero .breadcrumb { margin-bottom: var(--s-6); }
.page-hero__text > :last-child { margin-bottom: 0; }
.page-hero__grid > .wp-block-image { align-self: center; }
@media (min-width: 56rem) { .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); } }

/* „Auf einen Blick“ als Tabelle */
.facts-table { margin: 0 0 var(--s-5); }
.facts-table table { border-collapse: collapse; width: 100%; border: 0; }
.facts-table td { border: 0; padding: var(--s-2) 0; vertical-align: top; font-weight: 750; }
.facts-table td:first-child { font-size: var(--step--1); font-weight: 400; color: var(--ink-soft); padding-right: var(--s-5); padding-top: 0.6rem; white-space: nowrap; width: 1%; }

/* Galerie-Leiste */
.gallery .wp-block-gallery.gallery__track { display: grid; flex-wrap: nowrap; margin: 0; }
.gallery .wp-block-gallery.has-nested-images.gallery__track figure.wp-block-image:not(#individual-image) {
  width: auto; max-width: none; margin: 0; flex: none;
  aspect-ratio: 4 / 5; border: var(--stroke-bold); border-radius: var(--radius-m); overflow: hidden; background: var(--azzurro-soft);
}
.gallery .wp-block-gallery.has-nested-images.gallery__track figure.wp-block-image:nth-child(3n+1) {
  border-radius: 50% 50% var(--radius-m) var(--radius-m) / 40% 40% var(--radius-m) var(--radius-m);
}
.gallery .wp-block-gallery.has-nested-images.gallery__track figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.gallery .wp-block-gallery.has-nested-images.gallery__track figure.wp-block-image figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem var(--s-4) var(--s-3);
  background: linear-gradient(transparent, rgba(28,36,48,.75)); color: var(--white); font-size: 1.25rem; text-align: left;
}

/* Kacheln mit Bild und Link */
.tile > .wp-block-image { position: absolute; inset: 0; margin: 0; }
.tile > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.tile__text a { color: inherit; text-decoration: none; }
.tile__text a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tile:has(a:focus-visible) { box-shadow: var(--focus); }
.tile--plain:nth-of-type(even) { background-color: var(--azzurro); }

/* Kleine Angebote */
.offer-minor { position: relative; }
.offer-minor > .wp-block-image.frame { aspect-ratio: 1; border-radius: 50%; border: var(--stroke-bold); transition: transform 400ms var(--ease); }
.offer-minor:hover > .wp-block-image.frame { transform: rotate(-6deg) scale(1.03); }
.offer-minor h3 a { text-decoration: none; }
.offer-minor h3 a::after { content: ""; position: absolute; inset: 0; }
.offer-minor:hover h3 a { text-decoration: underline; text-decoration-color: var(--prato); text-decoration-thickness: 3px; }

/* Versprechen (3er-Boxen) */
.promise.wp-block-list { list-style: none; padding: 0; }
.promise li > strong { display: block; }
.promise--row { margin-top: 0; }
@media (min-width: 48rem) { .promise--row { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.promise--row li { font-size: var(--step-0); }

/* Kontaktliste mit Symbolen */
.contact-list.wp-block-list { list-style: none; padding: 0; }
.contact-list li > a { position: relative; display: block; padding: var(--s-4) var(--s-5) var(--s-4) 4rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; }
.contact-list li > a strong { font-size: var(--step-0); color: var(--ink); }
.contact-list li > a::before {
  content: ""; position: absolute; left: var(--s-5); top: 50%; width: 1.5rem; height: 1.5rem; transform: translateY(-50%);
  background: var(--azzurro-deep);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3.5 6l8.5 7 8.5-7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}
.contact-list li > a[href*="wa.me"]::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1.2-3.6A8 8 0 1 1 8 19z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.contact-list li > a[href^="tel:"]::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5l3 3-2 2.5a11 11 0 0 0 7.5 7.5l2.5-2 3 3-2 3C11 20 4 13 3.5 5.5z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.split .contact-list { margin-top: var(--s-6); }
.page-hero__grid > .contact-list { margin-top: 0; }

/* Ablauf in Schritten (Gruppen statt Liste) */
.steps.wp-block-group { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .steps.wp-block-group { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-7); } }
.steps > .step { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--s-4); align-content: start; }
.steps > .step > * { grid-column: 2; min-width: 0; }
.steps > .step::before {
  content: counter(step); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 1.5rem;
  background: var(--prato); border: var(--stroke); border-radius: 50%;
}
.steps > .step:nth-child(even)::before { background: var(--azzurro); }

/* Häufige Fragen (Details-Block) */
.faq .wp-block-details { margin: 0; padding: 0; }
.faq .wp-block-details > :not(summary) { padding: 0 var(--s-5); color: var(--ink-soft); }
.faq .wp-block-details > :last-child { padding-bottom: var(--s-3); }

/* Bewertungen */
.reviews { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.reviews .wp-block-quote.review {
  margin: 0; padding: var(--s-6); background: var(--white); border: var(--stroke-bold); border-radius: var(--radius-m);
  box-shadow: 0 6px 0 var(--ink); position: relative;
}
.reviews .wp-block-quote.review::before {
  content: "★★★★★"; display: block; letter-spacing: 0.15em; color: var(--prato-deep); font-size: 1.1rem; margin-bottom: var(--s-3);
}
.reviews .wp-block-quote.review p { font-size: var(--step-0); line-height: 1.6; max-width: none; }
.reviews .wp-block-quote.review cite { display: block; font-style: normal; font-family: var(--font-hand); font-weight: 600; font-size: 1.35rem; color: var(--azzurro-deep); margin-top: var(--s-2); }
.reviews .wp-block-quote.review:nth-child(4n+2), .reviews .wp-block-quote.review:nth-child(4n+3) { background: var(--prato-soft); }

/* Person (Dozentin) */
.person > .wp-block-image.frame { aspect-ratio: 1; border-radius: 50%; border: var(--stroke-bold); max-width: 12rem; }

/* Formular-Kasten auf den Angebotsseiten */
.form.form--wpforms { display: block; }
.form.form--wpforms .form-inner { display: grid; gap: var(--s-4); }

/* Brotkrumen + dezente Suche in Artikeln */
.page-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.page-hero__top .breadcrumb { margin: 0; }
.mg-search-mini { position: relative; display: flex; align-items: center; margin: 0; width: min(100%, 17rem); }
.mg-search-mini input {
  width: 100%; min-height: 2.5rem; padding: 0.4rem 2.6rem 0.4rem 1rem; font: inherit; font-size: var(--step--1);
  background: color-mix(in srgb, var(--white) 70%, transparent); border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: var(--radius-pill);
}
.mg-search-mini input:focus { background: var(--white); border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--azzurro); }
.mg-search-mini button { position: absolute; right: 0.35rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 50%; }
.mg-search-mini svg { width: 1.1rem; height: 1.1rem; }

/* Artikelseiten ohne Seitenleiste (z. B. Weinseminar) */
.article-layout--wide { grid-template-columns: minmax(0, 52rem) !important; justify-content: start; }

/* Galerien in Artikeln: wie im Original (Spalten aus dem Block), Bilder groß und mit runden Ecken */
.article-body .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: var(--s-3); grid-template-columns: none; }
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: auto; border-radius: var(--radius-m); }
.article-body .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img { height: 100%; object-fit: cover; }
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image { border-radius: var(--radius-m); overflow: hidden; }
.article-body .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.article-body .gallery img { aspect-ratio: 4 / 3; border-radius: var(--radius-m); }

/* Lesezeit in Karten */
.mg-card__meta { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
.note a { grid-template-columns: 5.5rem 1fr; }
@media (min-width: 48rem) { .note a { grid-template-columns: 7rem 1fr; } }
.contact-list li > a strong + br { display: none; }
.mg-content .page-hero__grid { align-items: center; }
@media (max-width: 56rem) {
  .hero--photo:has(.hero__portrait) { padding-top: 10rem; }
  .hero__portrait { top: 1.5rem; }
}
/* Kreisfoto füllt den Kreis */
.mg-content .hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Galerien in Artikeln: Spalten wie im Block eingestellt, Bilder im Querformat mit runden Ecken */
.article-body .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - var(--s-3)) / 2); aspect-ratio: 4 / 3; height: auto; margin: 0; border-radius: var(--radius-m); overflow: hidden; }
@media (min-width: 40rem) {
  .article-body .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
  .article-body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { width: calc((100% - 2 * var(--s-3)) / 3); }
  .article-body .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { width: calc((100% - 3 * var(--s-3)) / 4); }
  .article-body .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { width: 100%; }
}
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--radius-m); }