/*
Theme Name: momentvoll
Description: Editorial photography theme for momentvoll.
Version: 0.17.4
Text Domain: momentvoll
License: GPL-2.0-or-later
*/

/* -------------------------------------------------------------------- */
/* Base                                                                  */
/* -------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Standard WordPress accessibility helper for skip links etc. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--paper);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3);
  clip: auto !important;
  clip-path: none;
  color: var(--wp--preset--color--ink);
  display: block;
  font-size: .875rem;
  font-weight: 600;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: .75rem 1.2rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

a,
a:visited {
  color: var(--wp--preset--color--ink);
  text-decoration-color: currentColor;
  text-underline-offset: .18em;
}

a:hover { opacity: .72; }

.wp-block-navigation a,
.wp-block-navigation a:visited {
  color: var(--wp--preset--color--ink) !important;
  text-decoration: none;
}

.wp-block-button__link,
.wp-block-button__link:visited {
  color: var(--wp--preset--color--ink) !important;
  background: transparent;
}

/* -------------------------------------------------------------------- */
/* Shared text/brand utilities                                          */
/* -------------------------------------------------------------------- */

.mv-wordmark {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.mv-wordmark .wp-block-site-logo img { display: block; }

.mv-wordmark .wp-block-site-title,
.mv-footer-brand .wp-block-site-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
}

.mv-wordmark .wp-block-site-title a,
.mv-footer-brand .wp-block-site-title a {
  letter-spacing: .075em;
  text-transform: lowercase;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.mv-eyebrow {
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem !important;
}

.mv-display {
  letter-spacing: -.025em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

/* Eine Breite und ein Rand für die ganze Website: Inhalt 1180 px, links und
   rechts der Rand --mv-gutter. --mv-page ist die Breite einer Gruppe mit diesem
   Rand (border-box). Hero-Text und alle Abschnitte benutzen dasselbe, damit
   ihre linke Kante bei JEDER Fensterbreite gleich liegt. */
:root {
  --mv-gutter: clamp(2rem, 7vw, 7rem);
  --mv-page: calc(1180px + 2 * var(--mv-gutter));
}

/* greige gibt es nicht mehr. Blöcke, die noch als "greige" gespeichert sind
   (z. B. die Box "Neu bei momentvoll" auf einer schon angelegten Seite),
   erscheinen im Mischton "mist-soft". */
.has-greige-background-color { background-color: var(--wp--preset--color--mist-soft); }
/* Ausnahme: Die Überlagerung des Cover-Blocks (Startseite, "Bereit für eure
   Geschichte?") ist ein Band und bekommt mist, nicht den helleren Mischton. */
.wp-block-cover__background.has-greige-background-color { background-color: var(--wp--preset--color--mist); }

.mv-button {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink) !important;
  padding: .72rem 1.05rem;
  text-decoration: none;
  font-size: .88rem;
}

/* -------------------------------------------------------------------- */
/* Navigation                                                            */
/* -------------------------------------------------------------------- */

.mv-nav .wp-block-navigation-item:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin: 0 .75rem;
  color: var(--wp--preset--color--muted);
}

.mv-nav .wp-block-navigation__container { gap: 0 !important; }

.mv-nav .wp-block-navigation-item__content {
  text-transform: lowercase;
  letter-spacing: .015em;
}

/* Aufgeklapptes Menü auf dem Smartphone. WordPress nimmt den Innenabstand
   dafür aus Theme-Einstellungen, die wir nicht gesetzt haben — dadurch
   klebten Menüpunkte und Schließen-Button am Rand. Hier: 1.5rem rundum
   (wie die übrigen Abschnitte auf dem Handy), Papierton statt
   WordPress-Weiß, und keine "·"-Trennpunkte (die gehören zur waagerechten
   Leiste) — stattdessen etwas Abstand zwischen den Punkten. */
.wp-block-navigation.mv-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 1.5rem !important;
  background-color: var(--wp--preset--color--paper) !important;
  color: var(--wp--preset--color--ink) !important;
}

.wp-block-navigation.mv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(:last-child)::after {
  content: none;
}

.wp-block-navigation.mv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 1.25rem !important;
}

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

/* Image now comes from a real wp:cover block (editable in the editor);
   this class only handles sizing/overlay, no background-image anymore.
   Core's Cover block defaults to white text (color:#fff), assuming a
   dark photo — our photo is light, so force the theme's ink color back. */
.mv-hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  color: var(--wp--preset--color--ink) !important;
}

.mv-hero__veil {
  position: absolute;
  inset: 0;
  /* Mobile: fade top-to-bottom so the copy stays readable over the photo.
     Text is bottom-anchored and its top line (the eyebrow) starts around
     the vertical middle of the box, not near the very bottom — the
     lightening now ramps up earlier/stronger so it actually covers that
     whole area, not just the last sliver near the bottom edge. */
  background: linear-gradient(
    180deg,
    rgba(247,246,243,.12) 0%,
    rgba(247,246,243,.55) 45%,
    rgba(247,246,243,.85) 100%
  );
}

/* Cover is a flex column that centers .wp-block-cover__inner-container on
   the vertical axis (justify-content:center) instead of stretching it —
   inner-container's height shrinks to its content (the text block), not
   the full image. .mv-hero__veil, positioned absolute/inset:0 *inside*
   inner-container, was inheriting that too-small box instead of the
   image's real height. Forcing inner-container to 100% height fixes the
   veil without touching its own positioning rules. */
.mv-hero .wp-block-cover__inner-container { height: 100%; }

/* Cover also applies its own default padding to .wp-block-cover /
   inner-container. The background <img> sits one level up (a sibling of
   inner-container, direct child of .wp-block-cover) and never sees that
   padding — but .mv-hero__veil, one level down inside inner-container,
   does, and inset:0 then falls short of the image's actual edges.
   Zeroed out here specifically for .mv-hero, not globally, since another
   Cover block elsewhere might still want its own default padding. */
.mv-hero.wp-block-cover,
.mv-hero .wp-block-cover__inner-container {
  padding: 0 !important;
}

/* .mv-hero__content deliberately gets the EXACT same max-width + centering
   as .mv-intro .wp-block-columns (1180px, margin-inline:auto), instead of
   relying on the Cover block's own layout mechanics — two independent
   WordPress layout systems (Cover's default "constrained" vs. an
   alignwide column inside a constrained parent) don't actually resolve
   to identical pixel positions, which was the earlier mismatch. Using
   the identical rule as .mv-intro guarantees identical left edges.
   No left padding: .mv-intro's first column has no left padding either
   (only padding-right as the gutter to the second column), so its text
   starts flush at the 1180px box's left edge — ours must too. */
.mv-hero__content {
  position: relative;
  z-index: 2;
  min-height: 72vh;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) clamp(2rem, 6vw, 6rem) 0 0;
  box-sizing: border-box;
}

.mv-hero__copy {
  max-width: 900px;
}

/* Group blocks default to a large theme block-gap (≈2em, computed against
   each child's OWN font-size) between children — harmless for body text,
   but between an .mv-eyebrow and the much larger .mv-hero__title heading
   that translated into a huge, clearly-too-large gap. Fixed rem values
   instead, independent of each child's font-size. */
.mv-hero__copy > * { margin-top: 0; }
.mv-hero__copy > *:not(:first-child) { margin-top: 0.6rem; }

.mv-hero__title {
  /* Mobile-first default. Floor raised to 3rem so it's reliably at
     least as large as the section headings (.mv-story h2 etc., whose
     own mobile floor is 2.8rem via the shared clamp further below) —
     h1 should never end up visually smaller than an h2. */
  font-size: clamp(3rem, 9vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
}

.mv-hero__caption {
  margin-top: 1.1rem !important;
  max-width: 30rem;
  font-size: 1rem !important;
}

@media (min-width: 782px) {
  .mv-hero {
    min-height: clamp(500px, 40vw, 700px);
  }

  .mv-hero__veil {
    /* Desktop: fade left-to-right instead, matching the copy column. */
    background: linear-gradient(
      90deg,
      rgba(247,246,243,.72) 0%,
      rgba(247,246,243,.46) 24%,
      rgba(247,246,243,.10) 55%,
      rgba(247,246,243,0) 75%
    );
  }

  .mv-hero__content {
    min-height: clamp(500px, 40vw, 700px);
    /* Gleicher Rand wie die Abschnitte (siehe --mv-page): Vorher war der Hero-
       Text bei Fenstern unter ca. 1380 px nicht bündig mit den Abschnitten, unter
       ca. 1180 px klebte er am Fensterrand. */
    max-width: var(--mv-page);
    padding-left: var(--mv-gutter);
  }

  .mv-hero__title {
    font-size: clamp(4.8rem, 5.0vw, 5.8rem);
  }
}

@media (max-width: 781px) {
  /* Text sits at the bottom of the box instead of near the top — on
     this particular photo the dark heading was overlapping the groom's
     dark hair higher up; near the bottom it sits over the lighter sand
     instead, and it's also generally easier to read against a mostly
     open-sky photo. */
  .mv-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: clamp(2rem, 6vh, 3.5rem);
  }

  /* The <br> forces "Wir halten fest," / "was bleiben soll." onto two
     lines by design on desktop; on mobile that forced break is dropped
     so the heading wraps naturally at whatever width is available. */
  .mv-hero__break { display: none; }

  /* Only on the narrow/tall mobile crop does a centered object-position
     cut off the couple (they stand on the right side of the photo, not
     the middle) — desktop's wider crop already shows them fine with the
     default center position, so this is scoped to mobile only. Shifted
     up a bit too, since the text now claims the bottom of the box. */
  .mv-hero .wp-block-cover__image-background {
    object-position: 78% 35%;
  }
}

/* -------------------------------------------------------------------- */
/* Intro ("Augenblicke")                                                 */
/* -------------------------------------------------------------------- */

.mv-intro {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
}

.mv-intro .wp-block-columns { max-width: 1180px; margin-inline: auto; }

.mv-intro .wp-block-column:first-child {
  padding-right: clamp(2rem, 7vw, 7rem);
}

.mv-intro .has-lead-font-size {
  font-size: 1.25rem !important;
  line-height: 1.45;
}

.mv-intro h2,
.mv-services h2,
.mv-contact h2,
.mv-story h2,
.mv-about-story h2,
.mv-about-values h2 {
  font-size: clamp(2.8rem, 4.5vw, 4.8rem) !important;
  line-height: .96 !important;
}

/* -------------------------------------------------------------------- */
/* Story ("Geschichten")                                                 */
/* -------------------------------------------------------------------- */

.mv-story {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
}

.mv-story > .wp-block-group {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  /* One flat grid for the two image groups (row 2). The text block
     (row 1) is no longer tied to this grid's column widths — see the
     comment on .mv-story-intro below. */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
}

.mv-story .has-lead-font-size {
  font-size: 1.25rem !important;
  line-height: 1.45;
}

/* Spans the full row (both grid tracks) instead of sitting in the narrow
   .65fr image column — its width is now its own (max-width below), not
   dictated by the image grid. margin-left:auto still pushes it flush
   against the row's right edge, which happens to be the exact same edge
   the .65fr image column ends at, so the right-alignment look is kept
   even though the two are no longer coupled. */
.mv-story > .wp-block-group > .mv-story-intro {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  text-align: right;
}

.mv-story > .wp-block-group > .mv-story-intro * { text-align: right; }

.mv-story > .wp-block-group > .mv-portfolio-main {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3.5rem;
}

.mv-story > .wp-block-group > .mv-portfolio-side {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3.5rem;
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-top: 7rem;
}

/* .mv-image-placeholder sits on the wp:image figure. Until a real photo
   is chosen in the editor it shows the bundled placeholder graphic; the
   min-height rules below (per breakpoint) control the box size, the
   image itself is absolutely positioned to fill and crop into it. */
.mv-image-placeholder {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.mv-image-placeholder img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-portfolio-main .mv-image-placeholder { min-height: 600px; }
.mv-portfolio-side .mv-image-placeholder { min-height: 270px; }

.mv-story-link {
  grid-column: 1;
  grid-row: 3;
  text-align: left;
  margin-top: 2.5rem;
}

@media (max-width: 781px) {
  .mv-story > .wp-block-group {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .mv-story > .wp-block-group > .mv-story-intro {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .mv-story > .wp-block-group > .mv-story-intro * { text-align: left; }

  .mv-story > .wp-block-group > .mv-portfolio-main {
    grid-column: 1;
    grid-row: 2;
  }

  .mv-story > .wp-block-group > .mv-portfolio-side {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
    margin-top: clamp(1rem, 2.5vw, 2.5rem);
  }

  .mv-story-link { grid-row: 4; }

  .mv-portfolio-main .mv-image-placeholder { min-height: 70vw; }
}

@media (max-width: 520px) {
  .mv-portfolio-side { grid-template-columns: 1fr; }
  .mv-portfolio-side .mv-image-placeholder { min-height: 60vw; }
}

/* -------------------------------------------------------------------- */
/* Services ("Was euch erwartet")                                       */
/* -------------------------------------------------------------------- */

.mv-services {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
}
.mv-services .wp-block-columns { max-width: 1180px; margin-inline: auto; }
.mv-services .wp-block-column:last-child > p:last-child { margin-top: 2rem; }

.mv-services .wp-block-column:first-child,
.mv-about-values .wp-block-column:first-child {
  padding-right: clamp(2rem, 7vw, 7rem);
}

.mv-service {
  padding: 1.5rem 0;
  border-top: 1px solid var(--wp--preset--color--line);
}

/* :last-of-type statt :last-child, damit die Linie auch mit dem Button darunter bleibt */
.mv-service:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }

.mv-service h3 { font-size: 1.55rem !important; }

/* .mv-service is now a real wp:group (needed valid block markup); its
   default blockGap would add margin-top equal to 2x the heading's OWN
   font-size (theme default blockGap ≈ 2em), producing an oversized gap.
   Fixed rem-based spacing instead. */
.mv-service > * + * { margin-top: 0.5rem; }

/* -------------------------------------------------------------------- */
/* Contact ("Kontakt")                                                   */
/* -------------------------------------------------------------------- */

/* Cover defaults to white text (assumes a dark cover photo) and its own
   default padding on the block/inner-container — same two issues as
   .mv-hero, same fix: force the theme's ink color back, and zero out
   Cover's own padding since .mv-contact__inner carries the real spacing. */
.mv-contact {
  color: var(--wp--preset--color--ink) !important;
}

.mv-contact.wp-block-cover,
.mv-contact .wp-block-cover__inner-container {
  padding: 0 !important;
}

.mv-contact__inner {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(4.5rem, 7vw, 6.5rem) clamp(2rem, 7vw, 7rem);
}

.mv-contact .has-lead-font-size { font-size: 1.2rem !important; }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

.mv-footer .wp-block-columns { align-items: flex-start; }

.mv-footer-brand { flex-basis: 50% !important; }
.mv-footer-links { flex-basis: 25% !important; }
.mv-footer-legal { flex-basis: 25% !important; }

.mv-footer-links p,
.mv-footer-legal p { margin-top: 0; }

.mv-social-placeholder { margin-top: 1.5rem !important; }

/* -------------------------------------------------------------------- */
/* Portfolio-Seite (Gallery-Block)                                      */
/* -------------------------------------------------------------------- */

.mv-portfolio-gallery {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* -------------------------------------------------------------------- */
/* Über uns                                                              */
/* -------------------------------------------------------------------- */

/* Geschichte: text left, image collage right (reuses .mv-portfolio-grid
   from the homepage's Geschichten section verbatim, just inside a
   narrower column here instead of full page width). */
.mv-about-story {
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem);
}

/* Same reasoning as .mv-intro .wp-block-columns: a plain alignwide
   column would use core's 1440px wideSize, not this theme's 1180px
   content width — capped/centered explicitly to match every other
   section. */
.mv-about-story .wp-block-columns { max-width: 1180px; margin-inline: auto; }

.mv-about-story .has-lead-font-size {
  font-size: 1.25rem !important;
  line-height: 1.45;
}

/* Short horizontal rule used as a recurring motif (team cards, werte
   heading). Centered by default; .mv-divider--left for left-aligned
   text contexts. */
.mv-divider {
  width: 48px;
  height: 1px;
  background: var(--wp--preset--color--line);
  margin: 1.1rem auto;
}

.mv-divider--left { margin-left: 0; margin-right: auto; }

/* Kein Trennstrich unter der Überschrift im Hero (wie bei allen anderen Heroes).
   Das Kontakt-Muster enthält ihn nicht mehr; auf schon angelegten Seiten blendet
   diese Regel ihn aus. Das Abschlussband (.mv-hero--band) behält seinen Strich. */
.mv-hero:not(.mv-hero--band) .mv-divider { display: none; }

/* Polaroid-style single photo + decorative line-art branch, replacing
   the three-photo collage from 0.9.0 per the new reference. */
.mv-about-polaroid-wrap {
  position: relative;
  margin-inline: auto;
}

/* Seit 0.17.0 ein ganz normales Bild: gerade, ohne Rand und Schatten, so breit
   wie die Spalte (vorher 420 px inkl. Rand und um 4° gedreht). Klassenname
   bleibt, damit schon eingefügte Seiten die Änderung sofort übernehmen. */
.mv-about-polaroid {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  margin: 0;
}

.mv-about-polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Currently unused (no markup references this class) — the decorative
   leaf ornament was removed until a real vector graphic is available.
   Left in place, ready to use: add a positioned element with this class
   inside .mv-about-polaroid-wrap once there's artwork for it. */
.mv-about-polaroid-leaf {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -16%;
  width: 54px;
  height: 72px;
  color: var(--wp--preset--color--muted);
  opacity: .5;
}

.mv-about-polaroid-leaf svg { width: 100%; height: 100%; display: block; }

/* Team: flexible for 1–2 cards side by side (see PHP doc comment on
   momentvoll_section_about_team for how to drop to a single person). */
.mv-about-team {
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 7vw, 7rem) clamp(3.5rem, 6vw, 5rem);
}

.mv-about-team .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
  gap: clamp(2rem, 5vw, 4rem);
}

.mv-team-card__photo {
  width: 400px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0; /* quadratisch statt rund (0.17.0) */
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

.mv-team-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-team-card__name { margin-top: 0 !important; margin-bottom: .2rem !important; }
.mv-team-card__role { margin-bottom: 0 !important; }

/* Werte ("Was uns wichtig ist"): full-bleed section (same "mist"
   background as the homepage's Geschichten section), photo + text with
   a faint oversized wordmark behind the heading as a decorative touch. */
.mv-about-values {
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem);
}

.mv-about-values > .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
}

.mv-about-values__photo {
  aspect-ratio: 4 / 3;
  /* Kein Schwarz-Weiß-Filter mehr: Bilder erscheinen so, wie sie hochgeladen
     werden. Schwarz-Weiß entscheidest du über das Bild selbst. */
}

.mv-about-values__text {
  position: relative;
  z-index: 0;
}

/* Approximation of a script-font watermark — no script typeface is
   loaded in this theme, so italic Cormorant Garamond stands in. Swap
   the font-family here if a real script Google Font gets added later. */
.mv-about-values__watermark {
  position: absolute;
  z-index: -1;
  top: -4rem;
  right: 0;
  line-height: 1;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--wp--preset--color--ink);
  opacity: .08;
  white-space: nowrap;
  pointer-events: none;
}

/* Abschluss: centered quote + photo. Not wrapped in its own full-bleed
   group (no background change needed here per the design) — just an
   alignwide row, so it needs the same 1180px cap as every other wide
   row on the site. */
.mv-about-closing {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-about-closing__text { padding-right: clamp(2rem, 6vw, 5rem); }

.mv-about-closing__quote {
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1.2 !important;
}

.mv-about-closing__signature {
  margin-top: 1.5rem !important;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--wp--preset--color--muted);
}

.mv-about-closing__photo { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------- */
/* Leistungen                                                            */
/* -------------------------------------------------------------------- */

.mv-services-packages {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Smaller than the shared h2 preset (clamp(2.8rem,4.5vw,4.8rem)) used
   by every other section heading — scoped to this one heading only via
   its own class, so the other sections stay untouched. */
.mv-services-packages__title {
  font-size: clamp(2rem, 3vw, 2.6rem) !important;
}

.mv-services-packages > .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
  margin-top: 2.5rem;
}

.mv-package-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
}

.mv-package-card__photo { aspect-ratio: 4 / 5; margin: 0; } /* Hochformat 4:5 (0.17.0), 3:4 in 0.17.2, wieder 4:5 seit 0.17.3; die Alternative wäre 4 / 3 */

.mv-package-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mv-package-card__icon {
  width: 26px;
  height: 26px;
  margin: 0 auto .85rem;
  color: var(--wp--preset--color--ink);
}

.mv-package-card__icon svg { width: 100%; height: 100%; display: block; }

.mv-package-card__body h3 { text-align: center; }

.mv-package-card__meta { margin-top: .6rem !important; text-align: center; }

.mv-package-card__body p:not(.mv-package-card__meta):not(.mv-package-card__price) {
  flex: 1;
}

.mv-package-card .mv-divider { margin-top: 1.5rem; }

.mv-package-card__price {
  font-size: 1.4rem !important;
  margin-top: .75rem !important;
}

/* In jedem Angebot enthalten */
.mv-services-included {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
}
/* Beschreibungstexte dunkel statt gedämpft (wie "Was euch erwartet"). */
.mv-services-included .wp-block-column p { color: var(--wp--preset--color--ink) !important; }

.mv-services-included > .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
  margin-top: 2.5rem;
}

.mv-services-included > .wp-block-columns > .wp-block-column {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.mv-services-included > .wp-block-columns > .wp-block-column:not(:first-child) {
  border-left: 1px solid var(--wp--preset--color--line);
}

.mv-included-item__icon {
  width: 26px;
  height: 26px;
  margin: 0 auto .85rem;
  color: var(--wp--preset--color--ink);
}

.mv-included-item__icon svg { width: 100%; height: 100%; display: block; }

.mv-included-item h3 {
  font-size: 1.05rem !important;
  margin-bottom: .35rem !important;
}

.mv-included-item p { font-size: .92rem; color: var(--wp--preset--color--muted); }

/* Was zusätzlich möglich ist */
.mv-services-addons {
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
}

.mv-services-addons > .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
  margin-top: 2rem;
}

/* .mv-addons-grid is a plain wp:group, not wp:columns — wp:columns
   always lays its children out in a single row regardless of count,
   which was the actual bug (4 columns squeezed into one row instead of
   a 2x2 grid). Real CSS grid instead, which wraps naturally. */
.mv-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 2.5rem;
}

/* .mv-addons-grid is still a "default"-layout group, so WordPress's own
   blockGap rule (margin-top on every child except the first) still
   applies underneath our grid — invisible on a single column, but on a
   2-column grid it only hits every *second* item (not the first column
   of each row), nudging just those down relative to their row partner.
   Zeroed out since spacing here comes from the grid's own row-gap. */
.mv-addons-grid > .mv-addon { margin-top: 0 !important; }

/* Image on top (full card width) instead of a small square beside the
   text — side-by-side squeezed the text into a very narrow column,
   throwing off the image/text balance. */
.mv-addon {
  display: flex;
  flex-direction: column;
}

.mv-addon__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 1rem;
}

.mv-addon__body h3 {
  font-size: 1.1rem !important;
  margin-top: 0 !important;
  margin-bottom: .35rem !important;
}

.mv-addon__body p { font-size: 1rem; }

.mv-services-callout {
  height: 100%;
  box-sizing: border-box;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.mv-services-callout h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: .5rem;
}

.mv-services-callout__pill,
.mv-services-callout__note {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--line);
}

/* Same recurring blockGap issue as elsewhere: these are still
   "default"-layout groups, so their second child (the text/paragraph)
   gets an automatic margin-top — which, inside a flex row, shifts that
   child down and throws off align-items:center against the icon.
   Neutralized so centering is based on actual content height only. */
.mv-services-callout__pill > *,
.mv-services-callout__note > * {
  margin-top: 0 !important;
}

.mv-services-callout__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--wp--preset--color--ink);
}

.mv-services-callout__icon svg { width: 100%; height: 100%; display: block; }

.mv-services-callout__note p { margin-top: .15rem !important; }

/* Einführungspreise und Anfahrt in Textgröße statt klein (0.17.0). */
.mv-services-callout__pill p,
.mv-services-callout__note p:not(.mv-eyebrow) { font-size: 1rem !important; }

/* Abschluss-Hinweis */
.mv-services-note {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: 0 var(--mv-gutter) clamp(2.5rem, 5vw, 4rem);
}

/* Die Signatur "momentvoll" entfällt (0.17.0); auf schon angelegten Seiten
   wird sie ausgeblendet. */
.mv-services-note__signature { display: none; }

/* -------------------------------------------------------------------- */
/* Portfolio (Übersicht, Query Loop)                                     */
/* -------------------------------------------------------------------- */

.mv-portfolio-list {
  /* Bildgröße der Teaser an einer Stelle einstellbar:
     Breite = Anteil an der Zeile, Format = Breite / Höhe.
     60 % und 2/1 → rund 708 × 354 px bei voller Breite. Mit 50/50 wirkte
     die Zeile zu symmetrisch; 60/40 gibt dem Bild Gewicht. Das breite
     Format hält die Höhe niedrig. Unter 1000 px Breite (siehe unten)
     bleibt für den Text genug Platz mit 50 % und 16/9. */
  --mv-teaser-image-width: 60%;
  --mv-teaser-image-ratio: 2 / 1;

  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-portfolio-teaser {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Schmaleres Fenster (Tablet, kleiner Laptop): sonst bliebe dem Text zu
   wenig Breite neben dem Bild. */
@media (min-width: 782px) and (max-width: 1000px) {
  .mv-portfolio-list {
    --mv-teaser-image-width: 50%;
    --mv-teaser-image-ratio: 16 / 9;
  }
}

/* The Query Loop wraps every entry in its own <li class="wp-block-post">
   — .mv-portfolio-teaser is always that <li>'s only child, so it can
   never itself be an ":nth-child(even)". Both the spacing and the
   zigzag below target the <li> wrapper instead. */
.mv-portfolio-list .wp-block-post + .wp-block-post {
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* Zigzag: image/text swap sides on every second story — pure CSS, no JS.
   Desktop only: this selector is more specific than the mobile stacking
   rule further down, so left unscoped it also won on phones (even
   entries stayed side by side). */
@media (min-width: 782px) {
  .mv-portfolio-list .wp-block-post:nth-child(even) .mv-portfolio-teaser {
    flex-direction: row-reverse;
  }

  /* Bei geraden Einträgen steht der Text links und das Bild rechts. Mit
     linksbündigem Text klafft bei wenig Text eine Lücke zwischen beiden und
     der Text wirkt verloren. Rechtsbündig setzt er sich ans Bild, genau
     wie bei den ungeraden Einträgen (Bild links, Text direkt daneben). */
  .mv-portfolio-list .wp-block-post:nth-child(even) .mv-portfolio-teaser__body {
    text-align: right;
  }

  /* Die Laufweite (letter-spacing) hängt auch hinter dem letzten Buchstaben
     einen Abstand an; ausgleichen, damit "HOCHZEIT" bündig mit dem Titel
     abschließt. */
  .mv-portfolio-list .wp-block-post:nth-child(even) .mv-portfolio-teaser__body .mv-eyebrow {
    margin-right: -.16em;
  }
}

/* Post Featured Image renders nothing at all (no <img>, no visible
   box) when a post has no thumbnail set yet — background-color here
   makes that state visible (a plain grey box) instead of silently
   leaving blank space, so it's obvious a photo is still missing.
   Invisible once a real photo is set, since the image covers it.
   Size: see --mv-teaser-image-width / --mv-teaser-image-ratio on
   .mv-portfolio-list above. */
.mv-portfolio-teaser__image {
  flex: 0 0 var(--mv-teaser-image-width);
  width: var(--mv-teaser-image-width);
  aspect-ratio: var(--mv-teaser-image-ratio);
  margin: 0;
  background-color: var(--wp--preset--color--mist);
}

.mv-portfolio-teaser__body { flex: 1; }

.mv-portfolio-teaser__body h3 {
  margin-top: .4rem !important;
  font-size: 1.75rem;
  line-height: 1.15;
}

.mv-portfolio-teaser .wp-block-post-terms { font-size: .88rem !important; }

.mv-portfolio-teaser__body .wp-block-post-excerpt {
  margin-top: .5rem !important;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Per-story link: same outlined button as .mv-button everywhere else.
   Styled on the block's own class (not via .mv-button in the markup), so
   already-inserted lists pick it up too — only the label text differs
   until the pattern is re-inserted or the label is edited by hand. */
.mv-portfolio-teaser__arrow.wp-block-read-more {
  display: inline-block;
  margin-top: 1.25rem;
  border: 1px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink) !important;
  padding: .72rem 1.05rem;
  text-decoration: none;
  font-size: .88rem;
}

/* Category label ("HOCHZEIT"): WordPress outputs terms as links, which
   the global link style underlines and turns ink-colored. The design
   shows plain eyebrow text — no underline, same muted color as the
   other eyebrows. */
.mv-portfolio-teaser .wp-block-post-terms a,
.mv-auftrag-intro .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

.mv-portfolio-pagination {
  margin-top: clamp(3rem, 6vw, 5rem);
  justify-content: center;
}

/* Matches .mv-button exactly — the pagination "next" link should look
   like every other outline button on the site, not a plain text link. */
.mv-portfolio-pagination .wp-block-query-pagination-next {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink) !important;
  padding: .72rem 1.05rem;
  text-decoration: none;
  font-size: .82rem;
}

/* -------------------------------------------------------------------- */
/* Geschichte / Auftrag (Ebene 2)                                        */
/* -------------------------------------------------------------------- */

.mv-back-link {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: 0 clamp(2rem, 7vw, 7rem) 1.5rem;
}

.mv-back-link a { color: var(--wp--preset--color--muted); font-size: .92rem; }

.mv-auftrag-intro {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: 0 clamp(2rem, 7vw, 7rem);
}

.mv-auftrag__photo { aspect-ratio: 4 / 3; background-color: var(--wp--preset--color--mist); }

.mv-auftrag-intro .mv-eyebrow { margin-top: 0; }
.mv-auftrag-intro h1 { margin-top: .4rem !important; }

.mv-auftrag-gallery {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-auftrag-gallery__grid { margin-top: 1.5rem !important; }

.mv-auftrag-gallery__link { margin-top: 2rem !important; }

/* -------------------------------------------------------------------- */
/* Galerie (Ebene 3, eigene Seite)                                       */
/* -------------------------------------------------------------------- */

.mv-story-gallery { margin-top: 1.5rem !important; }

/* Zwei Spalten gleicher Breite, Bilder ungeschnitten (die Höhe passt sich
   an), dichte Anordnung ohne Zeilen. Reine CSS-Spalten: die Reihenfolge
   läuft erst die linke Spalte hinunter, dann die rechte (in der
   Großansicht blättert man trotzdem 1, 2, 3 …). Die Gallery-Block-Regeln
   von WordPress stehen mit hoher Gewichtung (:not(#individual-image))
   und müssen deshalb mit !important überstimmt werden. Greift auch bei
   schon angelegten Galerien, die noch "4 Spalten, zugeschnitten" sind. */
.mv-story-gallery.wp-block-gallery {
  display: block !important;
  column-count: 2;
  column-gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-left: 0;
  margin-right: 0;
}

.mv-story-gallery.wp-block-gallery figure.wp-block-image {
  display: block !important;
  width: 100% !important;
  margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem) !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Bewusst KEIN "aspect-ratio" und KEIN "object-fit" überschreiben: Die
   Höhe ergibt sich aus Breite + dem Seitenverhältnis, das WordPress über
   die width/height-Attribute am Bild mitliefert. WordPress lädt alle
   Bilder ab dem vierten verzögert (loading="lazy", sizes="auto, …"); für
   solche Bilder kennt der Browser vor dem Laden nur dieses Verhältnis.
   Mit "aspect-ratio: auto !important" ging es verloren und die Bilder
   wurden stark in die Höhe gezogen (0.12.0). */
.mv-story-gallery.wp-block-gallery figure.wp-block-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Same look as the template's "← Zurück zu den Geschichten" link on
   Ebene 2, but without that one's side padding (this one lives inside
   the already padded gallery page). */
.mv-back-link-inline a { color: var(--wp--preset--color--muted); font-size: .92rem; }

/* The gallery page had no top or side spacing at all, so on narrower
   screens the images would sit against the edge. Spacing sits on the
   template (templates/geschichte-galerie.html), so it also applies to
   gallery pages that already exist. */
.mv-gallery-page {
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-gallery-page .alignwide {
  max-width: 1180px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------- */
/* Kontakt                                                               */
/* -------------------------------------------------------------------- */

/* --- Formularbereich: Foto links, Formular rechts ---------------------- */
.mv-kontakt-form {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-kontakt-form__cols.wp-block-columns {
  --mv-kontakt-gap: clamp(2rem, 5vw, 4.5rem);
  gap: var(--mv-kontakt-gap);
  align-items: stretch;
  margin-bottom: 0;
}

/* Die Gesamtbreite bleibt wie auf den anderen Seiten; das Foto bekommt
   davon 48 % (vorher 41 %), das Formular den Rest. Gerechnet wird vom
   Platz ohne den Abstand zwischen den Spalten, damit beide Spalten sicher
   nebeneinander passen. !important, weil WordPress die Breite der Spalte
   als flex-basis direkt ans Element schreibt; so gilt es auch für schon
   eingefügte Bereiche. */
@media (min-width: 782px) {
  .mv-kontakt-form__photo-col.wp-block-column {
    flex: 0 0 calc((100% - var(--mv-kontakt-gap)) * .48) !important;
  }

  .mv-kontakt-form__form-col.wp-block-column {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* Das Foto behält das hohe Format des Entwurfs (371 : 716) und bleibt beim
   Scrollen am oberen Rand stehen, solange die Formularspalte daneben
   länger ist. Auf die volle Formularhöhe gestreckt (rund 1080 px) würde
   es zu einem sehr schmalen Streifen, und ein Porträt verlöre seitlich
   weit über ein Drittel. Die Bildspalte selbst streckt sich mit der Zeile,
   damit "sticky" innerhalb der Zeile arbeiten kann. */
.mv-kontakt-form__photo {
  position: sticky;
  top: 2rem;
  margin: 0;
  aspect-ratio: 371 / 716;
  /* Nie höher als das Fenster, damit das mitlaufende Foto auch auf kleinen
     Bildschirmen ganz zu sehen ist (es wird dann mittig zugeschnitten). */
  max-height: calc(100vh - 4rem);
  background-color: var(--wp--preset--color--mist);
}

.mv-kontakt-form__photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.mv-kontakt-form__form-col > .mv-eyebrow {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.mv-kontakt-form__placeholder { margin-top: 0; }

/* --- FAQ-Streifen -------------------------------------------------------- */
.mv-faq-strip {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 7vw, 7rem) 0;
}

/* Seit 0.17.4: volle Inhaltsbreite, Inhalt zentriert (Eyebrow, Text, darunter der
   Button). Vorher stand der Text links und der Button ganz rechts, so
   passten die Kanten im Inneren zu nichts im Raster darüber. */
.mv-faq-strip__box {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background-color: var(--wp--preset--color--mist-soft);
}

/* Flex-Container: der Block-Abstand von WordPress zwischen Kindern
   (margin-block-start) würde sonst die Ausrichtung verschieben. */
.mv-faq-strip__box > * { margin-block: 0 !important; }

/* Seit 0.17.2 ohne Bild. Auf schon angelegten Seiten blendet diese Regel das
   frühere kleine Bild aus. */
.mv-faq-strip__image { display: none; }

.mv-faq-strip__text { flex: none; padding: 0; }
.mv-faq-strip__text > * { margin-block: 0 !important; }
.mv-faq-strip__text .mv-eyebrow { margin-bottom: .45rem !important; }

.mv-faq-strip__title {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.25;
  font-weight: 400;
  text-wrap: balance;
}

/* Der Link ist jetzt ein Button wie überall (ohne Trennstrich davor). Ältere
   Seiten haben dort noch den einfachen Textlink in Versalien; er bekommt
   dasselbe Aussehen. */
.mv-faq-strip__link { flex: 0 0 auto; padding: 0; border: 0; }
.mv-faq-strip__link p { margin: 0; font-size: .88rem; letter-spacing: normal; text-transform: none; white-space: nowrap; }

.mv-faq-strip__link a:not(.mv-button) {
  display: inline-block;
  padding: .72rem 1.05rem;
  border: 1px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* --- Abschlussband: dieselbe Hero-Technik, nur niedriger ---------------- */
.mv-hero.mv-hero--band {
  min-height: clamp(14.5rem, 27vw, 26rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.mv-hero--band .mv-hero__content {
  min-height: clamp(14.5rem, 27vw, 26rem);
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
}

.mv-hero--band .mv-hero__title {
  font-size: clamp(2.8rem, 4vw, 3.8rem);
}

/* --- Formular (Plugin "Fluent Forms") ------------------------------------
   Das Plugin bringt ein eigenes Aussehen mit (Rahmenfelder, blauer Button).
   Das wird hier auf unseren Stil umgestellt: Linienfelder, kleine Beschrif-
   tungen, eigene Auswahlkreise, gefüllter Button. Alles hängt am Spalten-
   Wrapper .mv-kontakt-form__form-col, damit nichts andere Formulare auf
   der Seite berührt. Klassennamen laut Fluent-Forms-Dokumentation; sie
   gehören zum Plugin und können sich mit Updates ändern.

   Die Selektoren sind absichtlich länger als die des Plugins
   (.fluentform .frm-fluent-form …) und teils mit !important, weil das
   Plugin seine Regeln mit hoher Gewichtung setzt. */
.mv-kontakt-form__form-col {
  --mv-error: #9a3b34;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-group {
  margin-bottom: 1.7rem;
}

/* Zusammengesetzte Felder (z. B. "Name" mit Teilfeldern) enthalten selbst
   Feldgruppen; deren Abstand nach unten würde sich sonst zum Abstand der
   äußeren Gruppe addieren. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content .ff-el-group {
  margin-bottom: 0;
}

/* Beschriftung */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--label label {
  margin-bottom: .1rem;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--ink);
}

/* Leere Beschriftungen (z. B. ein Teilfeld im Namensfeld ohne Text) würden
   sonst trotzdem eine Zeile Platz belegen und das Eingabefeld nach unten
   schieben. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--label:has(> label:empty) {
  display: none !important;
}

/* Pflichtstern in Muted statt Rot */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-is-required.asterisk-left label::before {
  color: var(--wp--preset--color--muted) !important;
}

/* Felder: nur eine Linie unten */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-form-control {
  padding: .55rem 0 .65rem !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 1;
}

/* Fokus: Linie wird dunkel und etwas kräftiger (bleibt als Fokusanzeige sichtbar) */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-bottom-color: var(--wp--preset--color--ink) !important;
  box-shadow: 0 1px 0 0 var(--wp--preset--color--ink) !important;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form textarea.ff-el-form-control {
  min-height: 6rem;
  resize: vertical;
}

/* Auswahlfeld mit eigenem Pfeil */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form select.ff-el-form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.8rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2330302E' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: .8rem;
  cursor: pointer;
}

/* Solange im Auswahlfeld noch nichts gewählt ist ("– Gewünschte Dauer wählen –"),
   erscheint der Text wie ein Platzhalter in Muted, passend zu den Textfeldern.
   Als Platzhalter gilt der ERSTE Eintrag der Liste, egal welchen Wert er hat:
   Legt man die Optionen von Hand an, bekommt der erste Eintrag meist seine
   Beschriftung als Wert (nicht "leer"), und eine Regel auf den leeren Wert
   (0.13.3) griff dann nicht. Hat ein Auswahlfeld keinen Platzhalter, sondern
   eine vorausgewählte echte Option als ersten Eintrag, würde diese gedämpft;
   dann einen Platzhalter-Eintrag davorsetzen. Die Einträge in der
   aufgeklappten Liste bleiben in Ink. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form select.ff-el-form-control:has(option:first-child:checked),
.mv-kontakt-form__form-col .fluentform .frm-fluent-form select.ff-el-form-control:has(option[value=""]:checked) {
  color: var(--wp--preset--color--muted);
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form select.ff-el-form-control option {
  color: var(--wp--preset--color--ink);
}

/* Datumsfeld (Kalender-Auswahl des Plugins) mit kleinem Kalender-Symbol */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-datepicker {
  padding-right: 1.9rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2330302E' stroke-width='1'%3E%3Crect x='2' y='3' width='12' height='11' rx='.5'/%3E%3Cpath d='M2 6.5h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: 1rem;
}

/* Auswahlkreise (Radio) und Kästchen (Checkbox): alle Gruppen laufen
   nebeneinander und brechen bei Platzmangel um (im Entwurf 3 + 2),
   unabhängig davon, ob das Plugin sie untereinander oder in Spalten
   anordnet (Spalten-Layout je Feld, feste Breiten, Listen-Abstände).
   Fehlermeldung und Hinweistext in der Gruppe bekommen eine eigene Zeile. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.9rem;
  row-gap: .6rem;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content .ff-el-form-check {
  display: block !important;
  flex: 0 0 auto;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check) > .error,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check) > .ff-el-help-message {
  flex: 0 0 100%;
}

/* Ab vier Optionen: drei Spalten, Zeile für Zeile bündig untereinander
   (nicht versetzt wie im Entwurf). Gruppen mit bis zu drei Optionen
   (z. B. Ja / Nein) bleiben in einer Zeile.
   Die Spaltenbreite richtet sich nach der längsten Beschriftung der Spalte
   (auto, linksbündig statt gleichmäßig aufgeteilt): bei drei gleich breiten
   Spalten bräche "Paare & Verlobung" in der schmalen Formularspalte um.
   Wird es zu eng, geben die Spalten zuerst nach (Umbruch in der längsten). */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: center;
  column-gap: 1.9rem;
  row-gap: .6rem;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check:nth-child(4)) > .error,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check:nth-child(4)) > .ff-el-help-message {
  grid-column: 1 / -1;
}

/* Einzelne Zustimmung (Datenschutz) liegt nicht in einer Gruppe: eigener Abstand */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-tc.ff-el-form-check {
  margin: 0 0 .6rem;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  font-weight: 400;
  cursor: pointer;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="radio"],
.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--wp--preset--color--muted);
  cursor: pointer;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="radio"] {
  border-radius: 50%;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="radio"]:checked {
  border-color: var(--wp--preset--color--ink);
  background-image: radial-gradient(circle, var(--wp--preset--color--ink) 0 38%, transparent 42%);
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="checkbox"] {
  border-radius: 0;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input[type="checkbox"]:checked {
  border-color: var(--wp--preset--color--ink);
  background-size: .75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2330302E' stroke-width='1.4'%3E%3Cpath d='M2 6.5l3 3 5-6.5'/%3E%3C/svg%3E");
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form input.ff-el-form-check-input:focus-visible {
  outline: 1px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

/* Hinweistext unter dem Feld ("Optional – …") */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-help-message {
  margin-top: .4rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
}

/* Zwei Felder nebeneinander (Container mit 2 Spalten) */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-t-container {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-t-container > .ff-t-cell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 !important;
}

/* Bricht eine Beschriftung auf zwei Zeilen um ("Bei Hochzeiten: gewünschte
   Begleitdauer"), säße das Feld dort tiefer als das Feld daneben. Darum
   füllt der Beschriftungsbereich jeder Zelle den freien Platz und setzt
   die Beschriftung unten an das Feld: Die Eingabelinien liegen auf einer
   Linie, und es gibt trotzdem keine feste Mindesthöhe (die hätte 0.13.0
   und 0.13.1 auch im Namensfeld einen Abstand beschert, weil das Plugin
   denselben Container dort im Inneren benutzt). Gilt, solange die Felder
   daneben gleich lange oder keine Hinweistexte unter dem Feld haben. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-t-container > .ff-t-cell > .ff-el-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-t-container > .ff-t-cell > .ff-el-group > .ff-el-input--label {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
}

/* Datenschutz-Zustimmung */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff_t_c,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff_tc_label {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff_t_c a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Reiner Hinweistext im Formular, z. B. der Verweis auf die Datenschutz-
   erklärung ohne Checkbox. Im Plugin als Feld "Custom HTML" anlegen und bei
   "Container Class" mv-form-note eintragen. Gleiche Größe wie die frühere
   Zustimmungszeile. */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .mv-form-note {
  margin-bottom: 1.2rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--wp--preset--color--ink);
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .mv-form-note p {
  margin: 0;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .mv-form-note a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Absenden: gefüllter Button, rechts */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff_submit_btn_wrapper {
  margin-top: .5rem;
  text-align: right !important;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-btn-submit {
  min-width: 0;
  padding: .72rem 1.05rem !important;
  background-color: transparent !important;
  border: 1px solid var(--wp--preset--color--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--wp--preset--color--ink) !important;
  cursor: pointer;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-btn-submit:hover,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-btn-submit:focus-visible {
  outline: 1px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

/* Fehlermeldungen: gedämpftes Rot, nur Text und Linie */
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-bottom-color: var(--mv-error) !important;
}

.mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-is-error .text-danger,
.mv-kontakt-form__form-col .fluentform .frm-fluent-form .error.text-danger {
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--mv-error) !important;
}

/* Erfolgsmeldung nach dem Absenden */
.mv-kontakt-form__form-col .fluentform .ff-message-success {
  padding: 1.1rem 0 1.1rem 1.25rem !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--wp--preset--color--ink) !important;
  box-shadow: none !important;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink) !important;
}

/* -------------------------------------------------------------------- */
/* Rechtstexte (Vorlage "Rechtstext": Impressum, Datenschutz, AGB …)     */
/* -------------------------------------------------------------------- */

/* --- Hero, niedrige Variante --------------------------------------------
   Maße aus den Entwürfen (Datenschutz und Impressum), im VERHÄLTNIS zur
   Breite gemessen: Das Band ist dort 25–27 % so hoch wie die Seite breit
   (die anderen Heroes ca. 40 %), also rund 390 px bei 1440 px Breite, auf dem
   Handy rund 230 px. Die Überschrift ist etwa so groß wie die H1 der anderen
   Heroes (auf dem Desktop knapp die Hälfte der Seitenbreite), der Text sitzt
   im unteren Teil des Bands. 0.14.0 hatte das Band nach der Pixelhöhe der
   Entwurfsgrafik (≈ 200 px) gebaut, die Karte ist aber nur 750 px breit
   gezeichnet, das Band war dadurch 216 statt rund 390 px hoch. */
.mv-hero.mv-hero--compact {
  min-height: clamp(14.5rem, 27vw, 26rem);
}

.mv-hero--compact .mv-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(14.5rem, 27vw, 26rem);
  padding-top: 0;
  padding-bottom: clamp(1.75rem, 3.4vw, 3rem);
}

/* Desktop: Der Text beginnt oben, mit demselben Abstand wie bei den großen
   Heroes (clamp(3rem, 9vh, 6rem)); vorher saß er bei den schmalen unten. Auf
   dem Handy bleibt er bei beiden Arten unten. Die erhöhte Gewichtung
   (.mv-hero.…) schlägt auch .mv-faq-hero .mv-hero__content weiter unten. */
@media (min-width: 782px) {
  .mv-hero.mv-hero--compact .mv-hero__content {
    display: block;
    padding-top: clamp(3rem, 9vh, 6rem);
    /* Luft nach unten für den Fall, dass ein längerer Text das Band über die
       Mindesthöhe wachsen lässt (FAQ bei schmalem Fenster). */
    padding-bottom: clamp(1.75rem, 3.4vw, 3rem);
  }
}

.mv-hero--compact .mv-hero__title {
  /* Schmal (z. B. Galaxy S24, 360 px): "Datenschutzerklärung" ist ein langes
     Wort und muss mit Rand in die Zeile passen (bei 360 px: 36 px Schrift,
     rund 293 von 312 px). Notfalls wird getrennt. */
  font-size: clamp(2.2rem, 10vw, 2.6rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (min-width: 782px) {
  .mv-hero--compact .mv-hero__title {
    font-size: clamp(4.8rem, 5vw, 5.8rem);
  }
}

/* Die Fokusverschiebung der Startseiten-Heroes (Paar rechts im Bild) gilt
   nur dort. */
.mv-hero--compact .wp-block-cover__image-background { object-position: center; }

.mv-legal-hero__sub {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .08em;
}

/* --- Zweispaltiges Layout: Verzeichnis links, Text rechts --------------- */
.mv-legal {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem) 0;
}

/* Zwei Spalten nur, wenn das Skript das Verzeichnis gebaut hat (.has-toc);
   ohne Skript liegt der Text einspaltig in voller Breite. */
@media (min-width: 901px) {
  .mv-legal.has-toc {
    display: grid;
    grid-template-columns: minmax(11rem, 21%) minmax(0, 1fr);
    align-items: start;
  }

  /* Flex-/Grid-Kinder: der Block-Abstand von WordPress würde den Text nach unten schieben. */
  .mv-legal.has-toc > * { margin-block: 0 !important; }

  .mv-legal.has-toc .mv-legal__toc {
    position: sticky;
    top: 2rem;
    padding-right: 1.75rem;
  }

  .mv-legal.has-toc .mv-legal__content {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    border-left: 1px solid var(--wp--preset--color--line);
  }

  .mv-legal__toc-toggle { display: none; }
}

/* --- Verzeichnis ----------------------------------------------------------- */
.mv-legal__toc { display: none; }
.mv-legal__toc.is-ready { display: block; }

.mv-legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mv-toc;
}

.mv-legal__toc-list li {
  margin: 0 0 .85rem;
  counter-increment: mv-toc;
}

.mv-legal__toc-list a {
  display: flex;
  gap: .95rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  opacity: .72;
  transition: opacity .15s ease;
}

.mv-legal__toc-list a::before {
  content: counter(mv-toc, decimal-leading-zero);
  flex: 0 0 1.5rem;
  padding-top: .12em;
  font-size: .78rem;
  color: var(--wp--preset--color--muted);
}

.mv-legal__toc-list a:hover,
.mv-legal__toc-list a:focus-visible,
.mv-legal__toc-list a[aria-current="true"] { opacity: 1; }

.mv-legal__toc-list a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: .28em;
}

/* --- Text ------------------------------------------------------------------- */
.mv-legal__content {
  --mv-legal-indent: 3.4rem; /* Breite von Nummer + Abstand: der Text steht unter der Überschrift, nicht unter der Nummer */
  counter-reset: mv-section;
}

.mv-legal__content .wp-block-post-content > * { margin-block: 0; }

.mv-legal__content a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.mv-legal__content .mv-eyebrow { margin: 0 0 1.1rem; }

/* Mit .mv-legal__content davor: Die Regel "…post-content > * { margin-block: 0 }"
   weiter oben hat sonst die höhere Gewichtung und schluckt diese Abstände. */
.mv-legal__content .mv-legal__lead {
  margin: 0 0 1.5rem;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.mv-legal__content .mv-legal__intro {
  max-width: 44rem;
  margin: 0 0 2.75rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* Abschnitt: Trennlinie, Nummer (Zähler) und Überschrift in einer Zeile */
.mv-legal__content h2:not(.mv-legal__lead) {
  counter-increment: mv-section;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: 2.25rem 0 0;
  padding-top: 2.25rem;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  scroll-margin-top: 2rem;
}

.mv-legal__content h2:not(.mv-legal__lead)::before {
  content: counter(mv-section, decimal-leading-zero);
  flex: 0 0 2.3rem;
  font-weight: 300;
  color: var(--wp--preset--color--muted);
}

.mv-legal__content .wp-block-post-content > p:not(.mv-eyebrow):not(.mv-legal__intro),
.mv-legal__content .wp-block-post-content > :is(ul, ol) {
  max-width: 44rem;
  margin: 1rem 0 0;
  padding-left: var(--mv-legal-indent);
  font-size: .92rem;
  line-height: 1.65;
}

.mv-legal__content .wp-block-post-content > :is(ul, ol) { padding-left: calc(var(--mv-legal-indent) + 1.2rem); }

/* Zwischenüberschriften (H3): nicht im Verzeichnis, nicht nummeriert */
.mv-legal__content h3 {
  margin: 1.75rem 0 0;
  padding-left: var(--mv-legal-indent);
  font-size: 1.15rem;
  font-weight: 500;
}

/* --- Tablet und Handy: Verzeichnis zugeklappt ---------------------------- */
@media (max-width: 900px) {
  .mv-legal__toc.is-ready {
    margin-bottom: 2.25rem;
    background-color: var(--wp--preset--color--mist-soft);
  }

  .mv-legal__toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .9rem 1.1rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: .86rem;
    text-align: left;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
  }

  .mv-legal__toc-toggle svg { transition: transform .2s ease; }
  .mv-legal__toc.is-open .mv-legal__toc-toggle svg { transform: rotate(180deg); }

  .mv-legal__toc:not(.is-open) .mv-legal__toc-list { display: none; }
  .mv-legal__toc-list { padding: .35rem 1.1rem .65rem; }
}

/* Schmales Handy: die Nummer steht über der Überschrift, kein Einzug */
@media (max-width: 560px) {
  .mv-legal__content { --mv-legal-indent: 0rem; }

  .mv-legal__content h2:not(.mv-legal__lead) {
    display: block;
    gap: 0;
  }

  .mv-legal__content h2:not(.mv-legal__lead)::before {
    display: block;
    margin-bottom: .25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-legal__toc-toggle svg,
  .mv-legal__toc-list a { transition: none; }
}

/* -------------------------------------------------------------------- */
/* Weitere Leistungen (Seite /weitere-leistungen/) + Teaser auf Leistungen */
/* -------------------------------------------------------------------- */

/* Alle Buttons sind umrandet und haben den Pfeil. Die frühere Klasse
   .mv-button--filled (0.15.0) hat keine Wirkung mehr; in schon eingefügten
   Seiten bleibt sie harmlos im Markup stehen. */

/* Rücklink ganz oben, direkt unter dem Header */
.mv-back-link--top { padding-top: 1.25rem; }

/* Überschriften dieser Seite: kleiner als die großen Abschnittsüberschriften
   (Token "h2"), wie im Entwurf. */
.mv-wl-h2 {
  margin: 0;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.mv-wl-h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.9vw, 1.65rem);
  font-weight: 500;
  line-height: 1.15;
}

.mv-wl-h3--small { font-size: 1.15rem; }

/* --- Hero: unser Standard-Hero, nur der lange Titel braucht Luft -------- */
.mv-wl-hero .mv-hero__title { text-wrap: pretty; }

/* --- Einleitung: Überschrift | Linie | Text ------------------------------ */
.mv-wl-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem) 0;
}

/* Grid-Kinder: der Block-Abstand von WordPress würde die Ausrichtung verschieben. */
.mv-wl-intro > * { margin-block: 0 !important; }
.mv-wl-intro__head > * { margin-block: 0; }
.mv-wl-intro__head .mv-eyebrow { margin-bottom: .75rem; }

/* Die kurze Linie zwischen Überschrift und Text entfällt (sie lief bis in den
   Text hinein). Das Muster enthält sie nicht mehr; in schon eingefügten Seiten
   blendet diese Regel sie aus, ohne dass etwas neu eingefügt werden muss. */
.mv-wl-intro__line { display: none; }

.mv-wl-intro__text {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* --- Vier Leistungen: Schachbrett ----------------------------------------
   Zwei Spalten; in jeder Zelle Bild und Text nebeneinander. Zelle 2 und 3
   sind gespiegelt (Text links, Bild rechts), dazwischen eine senkrechte
   Linie, in beiden Zeilen (im Entwurf nur in der ersten). Im HTML steht das
   Bild immer vor dem Text, so liegt es auf dem Handy oben. */
.mv-wl-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-wl-services > * { margin-block: 0 !important; }

.mv-wl-cell {
  display: flex;
  align-items: flex-start; /* Text oben bündig mit dem Bild (vorher mittig, dadurch versetzt) */
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.mv-wl-cell > * { margin-block: 0 !important; }

.mv-wl-cell:nth-child(odd) {
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid var(--wp--preset--color--line);
}

.mv-wl-cell:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.mv-wl-cell--reverse { flex-direction: row-reverse; }

/* Ein festes Format für alle vier Bilder (die Entwurfsbilder waren zwischen
   1,08 und 1,35 uneinheitlich). */
.mv-wl-cell__image {
  flex: 0 0 46%;
  margin: 0;
  aspect-ratio: 4 / 5; /* Hochformat (0.17.3); vorher 4:3 */
  background-color: var(--wp--preset--color--mist);
}

.mv-wl-cell__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-wl-cell__text { flex: 1; min-width: 0; }
.mv-wl-cell__text > * { margin-block: 0 !important; }
.mv-wl-cell__text .mv-eyebrow { margin-bottom: .55rem !important; }
.mv-wl-cell__text .mv-wl-h3 { margin-bottom: .7rem !important; }

.mv-wl-cell__text p:not(.mv-eyebrow) {
  font-size: .92rem;
  line-height: 1.65;
}

/* --- Preise: graues Band, zwei Karten ----------------------------------- */
.mv-wl-prices {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem);
}

.mv-wl-prices__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr);
  align-items: center;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1180px;
  margin-inline: auto;
}

.mv-wl-prices__inner > * { margin-block: 0 !important; }
.mv-wl-prices__intro > * { margin-block: 0; }
.mv-wl-prices__intro .mv-eyebrow { margin-bottom: .8rem; }
.mv-wl-prices__intro .mv-wl-h2 { margin-bottom: 1rem; }
.mv-wl-prices__intro p:not(.mv-eyebrow) { font-size: .92rem; line-height: 1.65; }

.mv-wl-prices__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.mv-wl-prices__cards > * { margin-block: 0 !important; }

/* Kartenfläche = unser Papierton (im Entwurf gemessen praktisch identisch) */
.mv-wl-card {
  padding: 1.6rem 1.75rem 1.2rem;
  background-color: var(--wp--preset--color--paper);
}

.mv-wl-card > * { margin-block: 0 !important; }

.mv-wl-card__sub {
  margin-top: .55rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.mv-wl-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
}

.mv-wl-price > * { margin-block: 0 !important; }
.mv-wl-price + .mv-wl-price { border-top: 1px solid var(--wp--preset--color--line); }
.mv-wl-price__label > * { margin: 0; }
.mv-wl-price__name { font-size: 1rem; }
.mv-wl-price__note { font-size: .82rem; color: var(--wp--preset--color--muted); }

/* Preis in der Display-Schrift mit den Mediävalziffern, wie auf den Paketkarten */
.mv-wl-price__amount {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.35rem;
  white-space: nowrap;
}

/* --- Was euch erwartet: 4 Spalten, linksbündig, auf Papier -------------- */
.mv-wl-expect {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-wl-expect > .mv-eyebrow { margin: 0 0 1.5rem; }
.mv-wl-expect__cols.wp-block-columns { gap: 0; margin: 0; }
.mv-wl-expect__cols > .wp-block-column { padding: 0 1.5rem; }
.mv-wl-expect__cols > .wp-block-column:first-child { padding-left: 0; }
.mv-wl-expect__cols > .wp-block-column:not(:first-child) { border-left: 1px solid var(--wp--preset--color--line); }

.mv-wl-expect-item > * { margin-block: 0; }

.mv-wl-expect-item__icon {
  width: 26px;
  height: 26px;
  margin-bottom: .85rem;
  color: var(--wp--preset--color--ink);
}

.mv-wl-expect-item__icon svg { display: block; width: 100%; height: 100%; }
.mv-wl-expect-item .mv-wl-h3 { margin-bottom: .4rem; }
.mv-wl-expect-item p { font-size: .92rem; line-height: 1.65; }

/* --- Zusätzlich möglich: graues Band, Text | Bild | Text + Button ------- */
.mv-wl-extra {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem);
}

.mv-wl-extra__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1180px;
  margin-inline: auto;
}

.mv-wl-extra__inner > * { margin-block: 0 !important; }
.mv-wl-extra__intro > *, .mv-wl-extra__side > * { margin-block: 0; }
.mv-wl-extra__intro .mv-eyebrow { margin-bottom: .8rem; }
.mv-wl-extra__intro .mv-wl-h2 { margin-bottom: 1rem; }
.mv-wl-extra__intro p:not(.mv-eyebrow),
.mv-wl-extra__side p { font-size: .92rem; line-height: 1.65; }
.mv-wl-extra__side .mv-wl-h3 { margin-bottom: .8rem; }
.mv-wl-extra__side p + p { margin-top: 1.4rem; }

.mv-wl-extra__image {
  margin: 0;
  aspect-ratio: 5 / 3;
  background-color: var(--wp--preset--color--mist);
}

.mv-wl-extra__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Schlussband mit Button (Hero-Technik, niedrig) ------------------------ */
.mv-hero--cta .mv-hero__content { padding-bottom: clamp(2.5rem, 6vh, 3.5rem); }
.mv-hero--cta .mv-hero__action p { margin: 0; }

@media (min-width: 782px) {
  /* Button unten rechts: auf der Höhe der letzten Textzeile und bündig mit der
     rechten Inhaltskante der anderen Abschnitte (nicht mittig und um den
     rechten Innenabstand des Heroes eingerückt, wie im Entwurf). */
  .mv-hero--cta .mv-hero__content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    padding-right: var(--mv-gutter);
  }

  .mv-hero--cta .mv-hero__copy { flex: 0 1 36rem; }
  .mv-hero--cta .mv-hero__action { flex: none; margin: 0 !important; }
}

/* --- Teaser auf der Leistungen-Seite, direkt über dem Footer ---------------
   Bild links, Text rechts auf einer Fläche wie der FAQ-Streifen; ohne das
   Ornament des Entwurfs. */
.mv-teaser {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-teaser__box {
  display: flex;
  align-items: stretch;
  background-color: var(--wp--preset--color--mist-soft);
}

.mv-teaser__box > * { margin-block: 0 !important; }

/* Das Bild liegt absolut im Rahmen und füllt nur den vorhandenen Platz. Sonst
   bestimmte das Seitenverhältnis des Fotos die Höhe des ganzen Teasers (ein
   Hochformat-Foto machte ihn mehrere hundert Pixel höher). Die Höhe ergibt sich
   aus Textfläche und Mindesthöhe. */
.mv-teaser__image {
  position: relative;
  flex: 0 0 54%;
  margin: 0;
  min-height: clamp(16rem, 24vw, 22rem);
  overflow: hidden;
  background-color: var(--wp--preset--color--mist);
}

.mv-teaser__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-teaser__text {
  flex: 1;
  align-self: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.mv-teaser__text > * { margin-block: 0; }
.mv-teaser__text .mv-eyebrow { margin-bottom: .8rem; }
.mv-teaser .mv-wl-h2 { font-size: clamp(1.9rem, 2.7vw, 2.6rem); margin-bottom: 1rem; }
.mv-teaser__text p:not(.mv-eyebrow) { font-size: 1rem; line-height: 1.65; }
.mv-teaser__text p:last-child { margin-top: 1.6rem; }

/* Inhaltsbreite wie auf der Leistungen-Seite: Der Inhalt läuft auf 1180 px,
   bündig mit dem Text im Hero (die Bänder "Preise" und "Zusätzlich möglich"
   taten das schon). Die Container sind Gruppen mit Innenabstand
   (border-box), deshalb wird der Abstand zur Maximalbreite addiert. Ohne das
   waren Einleitung, vier Leistungen, "Was euch erwartet" und Teaser mit
   dem Innenabstand (bis 7 rem) gegenüber dem Hero-Text eingerückt. Muss
   NACH den Einzelregeln der Abschnitte stehen. */
.mv-wl-intro,
.mv-wl-services,
.mv-wl-expect,
.mv-teaser {
  max-width: var(--mv-page);
}

/* --- Handy / schmale Fenster --------------------------------------------- */
@media (max-width: 781px) {
  .mv-wl-intro { grid-template-columns: 1fr; row-gap: 1.25rem; }

  .mv-wl-services { grid-template-columns: 1fr; row-gap: 2.5rem; }

  .mv-wl-cell,
  .mv-wl-cell--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
  }

  .mv-wl-cell:nth-child(odd),
  .mv-wl-cell:nth-child(even) {
    padding: 0;
    border-right: 0;
  }

  .mv-wl-cell__image { flex: none; width: 100%; }

  .mv-wl-prices__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .mv-wl-prices__cards { grid-template-columns: 1fr; }

  .mv-wl-expect__cols > .wp-block-column,
  .mv-wl-expect__cols > .wp-block-column:first-child { padding: 1.4rem 0; }

  .mv-wl-expect__cols > .wp-block-column:not(:first-child) {
    border-left: 0;
    border-top: 1px solid var(--wp--preset--color--line);
  }

  .mv-wl-extra__inner { grid-template-columns: 1fr; row-gap: 1.75rem; }

  .mv-teaser__box { flex-direction: column; }
  .mv-teaser__image { flex: none; width: 100%; min-height: 14rem; }
}

/* -------------------------------------------------------------------- */
/* FAQ (Seite /faq/): Gruppen mit ausklappbaren Fragen                    */
/* -------------------------------------------------------------------- */

/* Hero: das niedrige Format der Rechtstext-Seiten (.mv-hero--compact). Hier
   steht ein längerer Einleitungstext statt der einzeiligen Unterzeile, er darf
   das Band bei Bedarf (schmales Handy) etwas höher machen. */
/* Der längere Text kann das Band auf dem schmalen Handy höher machen als die
   Mindesthöhe; dann soll das "FAQ" nicht am Bildrand kleben. */
.mv-faq-hero .mv-hero__content { padding-top: 1.75rem; }

.mv-faq-hero .mv-hero__caption {
  margin-top: .85rem !important;
  max-width: 36rem;
  font-size: 1rem !important;
  line-height: 1.65;
}

/* Inhaltsbreite wie auf der Leistungen-Seite (bündig mit dem Hero-Text) */
.mv-faq {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 7vw, 7rem) 0;
}

.mv-faq > * { margin-block: 0; }

/* Gruppe: links das Label mit senkrechter Linie, rechts Überschrift,
   Einführung und Fragen. Die großen Zahlen des Entwurfs entfallen. */
.mv-faq-group {
  display: grid;
  grid-template-columns: minmax(8rem, 15%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(2rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--wp--preset--color--line);
}

.mv-faq-group:first-child { padding-top: 0; border-top: 0; }
.mv-faq-group > * { margin-block: 0 !important; }

.mv-faq-group__label {
  padding-right: 1.25rem;
  border-right: 1px solid var(--wp--preset--color--line);
}

.mv-faq-group__label > * { margin: 0; }
.mv-faq-group__label .mv-eyebrow { padding-top: .55rem; line-height: 1.5; }

.mv-faq-group__body > * { margin-block: 0; }

.mv-faq-h2 {
  margin: 0;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

.mv-faq-group__intro {
  max-width: 40rem;
  margin: .65rem 0 1.6rem !important;
  font-size: .92rem;
  line-height: 1.65;
}

/* Frage = Details-Block. Zeile mit Trennlinie, Plus/Minus rechts (aus CSS, kein
   Bild), Frage in der Display-Schrift. */
.mv-faq-item {
  margin: 0;
  border-top: 1px solid var(--wp--preset--color--line);
}

.mv-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }

.mv-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem 1rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.mv-faq-item > summary::-webkit-details-marker { display: none; }

.mv-faq-item > summary::after {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}

.mv-faq-item[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.mv-faq-item > summary:hover { opacity: .75; }

.mv-faq-item > summary:focus-visible {
  outline: 1px solid var(--wp--preset--color--ink);
  outline-offset: -1px;
}

/* Antwort: Absätze eingerückt unter der Frage */
.mv-faq-item > :not(summary) {
  max-width: 46rem;
  margin: 0;
  padding: 0 2.75rem .85rem 1rem;
  font-size: .92rem;
  line-height: 1.65;
}

.mv-faq-item > :not(summary) + :not(summary) { padding-top: 0; margin-top: -.2rem; }
.mv-faq-item > summary + * { padding-top: .1rem; }

/* Schlussband „Noch Fragen?": der Teaser der Leistungen-Seite, gespiegelt
   (Text links, Bild rechts). */
.mv-teaser--reverse .mv-teaser__box { flex-direction: row-reverse; }
.mv-teaser--reverse .mv-teaser__image { flex-basis: 46%; }

@media (max-width: 781px) {
  .mv-faq { padding-left: 1.5rem; padding-right: 1.5rem; }

  .mv-faq-group {
    grid-template-columns: 1fr;
    row-gap: .75rem;
  }

  .mv-faq-group__label {
    padding-right: 0;
    border-right: 0;
  }

  .mv-faq-group__label .mv-eyebrow { padding-top: 0; }

  .mv-faq-item > summary { padding: .95rem .25rem; }
  .mv-faq-item > :not(summary) { padding-left: .25rem; padding-right: 1.25rem; }

  .mv-teaser--reverse .mv-teaser__box { flex-direction: column; }
  .mv-teaser--reverse .mv-teaser__image { flex-basis: auto; }
}

/* -------------------------------------------------------------------- */
/* Leistungen: Box "Neu bei momentvoll" und Zusatzleistungen (0.17.0)    */
/* -------------------------------------------------------------------- */

/* Die Box steht jetzt unter "In jedem Angebot enthalten" über die volle
   Inhaltsbreite (vorher als Spalte neben den Zusatzleistungen). Fläche =
   Mischton "mist-soft". Ein Hintergrundbild lässt sich am Gruppen-Block setzen,
   ein Schleier im Mischton hält den Text lesbar. */
.mv-services-box { padding: clamp(2rem, 4vw, 3.5rem) var(--mv-gutter); }

/* Eigene Breitenregel (nicht nur die "constrained"-Layoutregel von WordPress):
   Inhalt höchstens 1180 px, zentriert, wie überall. */
.mv-services-box > *,
.mv-services-addons--wide > * { max-width: 1180px; margin-inline: auto; }

.mv-services-callout {
  position: relative;
  isolation: isolate;
}

.mv-services-callout[style*="background-image"],
.mv-faq-strip__box[style*="background-image"],
.mv-contact-strip__box[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

.mv-services-callout[style*="background-image"]::before,
.mv-faq-strip__box[style*="background-image"]::before,
.mv-contact-strip__box[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--mist-soft);
  opacity: .9;
}

.mv-services-callout--wide {
  height: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
}

.mv-services-callout--wide > .wp-block-columns {
  gap: clamp(2rem, 5vw, 4rem);
  margin: 0;
}

.mv-services-callout--wide h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.mv-services-callout--wide p:not(.mv-eyebrow) { font-size: 1rem; }

/* Rechts: drei Zeilen mit Icon; die erste ohne Trennlinie darüber. */
.mv-services-callout--wide .wp-block-column:last-child > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Zusatzleistungen über die volle Breite: vier nebeneinander (Bild oben,
   Text darunter), auf dem Tablet zwei, auf dem Handy eine. */
.mv-addons-grid--wide { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 782px) and (max-width: 1000px) {
  .mv-addons-grid--wide { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
  .mv-addons-grid--wide { grid-template-columns: 1fr; }
  .mv-services-callout--wide { padding: 1.75rem 1.5rem; }
  .mv-services-callout--wide > .wp-block-columns { gap: 1.5rem; }
  .mv-services-box { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* -------------------------------------------------------------------- */
/* Kontaktstreifen am Ende der Geschichten (Ebene 2 und 3)               */
/* -------------------------------------------------------------------- */
.mv-contact-strip {
  max-width: var(--mv-page);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--mv-gutter) 0;
}

/* Die Galerieseite hat den Seitenrand schon an der Vorlage. */
.mv-gallery-page .mv-contact-strip {
  max-width: 1180px;
  padding-left: 0;
  padding-right: 0;
}

.mv-contact-strip__box {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
  background-color: var(--wp--preset--color--mist-soft);
}

.mv-contact-strip__box > * { margin-block: 0 !important; }
.mv-contact-strip__text > * { margin-block: 0; }
.mv-contact-strip__text .mv-eyebrow { margin-bottom: .5rem; }
.mv-contact-strip__text .mv-wl-h3 { margin-bottom: .35rem; }
.mv-contact-strip__text p:not(.mv-eyebrow) { font-size: 1rem; }
.mv-contact-strip__action p { margin: 0; }

@media (max-width: 781px) {
  .mv-contact-strip { padding-left: 1.5rem; padding-right: 1.5rem; }
  .mv-gallery-page .mv-contact-strip { padding-left: 0; padding-right: 0; }
  .mv-contact-strip__box { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------- */
/* Footer: Links ohne Unterstreichung, Icons für Instagram und Facebook  */
/* -------------------------------------------------------------------- */
.mv-footer a { text-decoration: none; }

.mv-footer a:hover,
.mv-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.mv-footer-links p,
.mv-footer-legal p { line-height: 2; }

.mv-footer-social.wp-block-social-links {
  gap: 1rem;
  margin-top: 1rem;
  font-size: 22px;
}

/* Alle Icons einfarbig in der Textfarbe (ink), nie in den Markenfarben von
   WordPress; !important, weil WordPress die Farben je Dienst selbst setzt. */
.mv-footer-social .wp-social-link,
.mv-footer-social .wp-social-link a {
  padding: 0;
  color: var(--wp--preset--color--ink) !important;
  text-decoration: none;
}

.mv-footer-social .wp-social-link svg { fill: currentColor !important; }

.mv-footer-social .wp-social-link a:hover,
.mv-footer-social .wp-social-link a:focus-visible { opacity: .6; }

/* -------------------------------------------------------------------- */
/* Großansicht für Galerien (assets/js/lightbox.js)                      */
/* -------------------------------------------------------------------- */

.mv-auftrag-gallery__grid img,
.mv-story-gallery img,
.mv-lightbox img { cursor: zoom-in; }

html.mv-lightbox-open { overflow: hidden; }

.mv-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  /* Fast schwarz, leicht durchscheinend. */
  background: rgba(10, 10, 10, .92);
  /* Seite dahinter leicht weichzeichnen, damit sie nicht vom Foto
     ablenkt (Browser ohne Unterstützung zeigen einfach nur das Schwarz). */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}

.mv-lightbox-overlay[hidden] { display: none; }
.mv-lightbox-overlay.is-open { opacity: 1; }

.mv-lightbox-stage {
  position: absolute;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(3.5rem, 9vh, 5rem) clamp(1rem, 8vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  transition: opacity .15s ease;
}

.mv-lightbox-img.is-loading { opacity: 0; }

.mv-lightbox-btn {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #f3f1ec;
  opacity: .8;
  cursor: pointer;
}

.mv-lightbox-btn[hidden] { display: none; }
.mv-lightbox-btn:hover,
.mv-lightbox-btn:focus-visible { opacity: 1; }
.mv-lightbox-btn:focus-visible { outline: 1px solid rgba(243, 241, 236, .7); outline-offset: 2px; }

.mv-lightbox-close { top: 1rem; right: 1rem; }
.mv-lightbox-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.mv-lightbox-next { right: .5rem; top: 50%; transform: translateY(-50%); }

.mv-lightbox-counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  text-align: center;
  color: rgba(243, 241, 236, .75);
  font-size: .82rem;
  letter-spacing: .08em;
}

/* Smartphone: Bild fast randlos (Fotos sollen groß sein), Pfeile liegen
   dafür auf dem Bild und bekommen einen halbtransparenten dunklen Kreis,
   damit sie auch auf hellen Fotos sichtbar bleiben. Wischen geht ebenfalls. */
@media (max-width: 781px) {
  .mv-lightbox-stage { padding-left: .5rem; padding-right: .5rem; }

  .mv-lightbox-prev,
  .mv-lightbox-next {
    width: 40px;
    height: 40px;
    background: rgba(10, 10, 10, .45);
    border-radius: 50%;
    opacity: .9;
  }

  .mv-lightbox-prev { left: .75rem; }
  .mv-lightbox-next { right: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-lightbox-overlay,
  .mv-lightbox-img { transition: none; }
}

/* -------------------------------------------------------------------- */
/* Responsive: shared section padding + footer stacking                 */
/* -------------------------------------------------------------------- */

@media (max-width: 781px) {
  .mv-intro,
  .mv-story,
  .mv-services,
  .mv-contact__inner,
  .mv-about-story,
  .mv-about-team,
  .mv-about-values,
  .mv-about-closing {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .mv-intro .wp-block-column:first-child,
  .mv-services .wp-block-column:first-child,
  .mv-about-values .wp-block-column:first-child {
    padding-right: 0;
  }

  .mv-about-closing__text { padding-right: 0; }

  .mv-about-polaroid-wrap { margin-top: 2rem; }

  .mv-about-team .wp-block-columns > .wp-block-column:not(:first-child) {
    margin-top: 3rem;
  }

  .mv-services-packages,
  .mv-services-included,
  .mv-services-addons,
  .mv-services-note {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .mv-services-packages .wp-block-columns > .wp-block-column:not(:first-child),
  .mv-services-included .wp-block-columns > .wp-block-column:not(:first-child) {
    margin-top: 2.5rem;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
  }

  .mv-services-addons .wp-block-column:not(:first-child) {
    margin-top: 2.5rem;
  }

  .mv-addons-grid { grid-template-columns: 1fr; }

  /* Portfolio list: image above text for every entry. (The desktop
     zigzag is scoped to min-width: 782px, so nothing to undo here.) */
  .mv-portfolio-list .wp-block-post .mv-portfolio-teaser {
    flex-direction: column;
    align-items: stretch;
  }

  .mv-portfolio-teaser__image {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3; /* mobil unverändert, nur Desktop ist breiter */
  }

  /* Same 1.5rem side gutter as the hero text and every other section;
     these used the desktop clamp (2rem on phones), 0.5rem further in. */
  .mv-portfolio-list,
  .mv-back-link,
  .mv-auftrag-intro,
  .mv-auftrag-gallery,
  .mv-gallery-page,
  .mv-kontakt-form,
  .mv-faq-strip,
  .mv-legal,
  .mv-wl-intro,
  .mv-wl-services,
  .mv-wl-prices,
  .mv-wl-expect,
  .mv-wl-extra,
  .mv-teaser {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Kontakt: Das Foto neben dem Formular entfällt auf dem Handy. */
  .mv-kontakt-form__photo-col { display: none; }

  /* FAQ-Streifen: wie auf dem Desktop zentriert, Text über dem Button. */

  /* Auswahlgruppen mit vielen Optionen: auf dem Handy zwei Spalten statt drei,
     sonst brechen lange Beschriftungen ("Paare & Verlobung") um. */
  .mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-el-input--content:has(.ff-el-form-check:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  /* Formular: Zweier-Reihe untereinander, Button über die ganze Breite. */
  .mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-t-container {
    flex-direction: column;
    gap: 0;
  }

  .mv-kontakt-form__form-col .fluentform .frm-fluent-form .ff-btn-submit {
    width: 100%;
    min-width: 0;
  }

  /* Abschlussband: etwas Luft über dem Text, Foto bleibt sichtbar. */
  .mv-hero.mv-hero--band { min-height: 22rem; }
  .mv-hero--band .mv-hero__content { min-height: 22rem; }

  .mv-footer-brand,
  .mv-footer-links,
  .mv-footer-legal {
    flex-basis: 100% !important;
  }
}