/* ==========================================================================
   Mini Donuts — brand token overrides
   Loaded after main.css / responsive.css, only when brand = mini-donuts.
   ========================================================================== */

:root {
  /* Fonts */
  --font-heading: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Core color tokens (override Mojito Lemon values) */
  --color-green-dark: #2B1032;
  /* headings, primary text, dark buttons */
  --color-black: #2B1032;
  /* body text */
  --color-green-hero: #FAEFF5;
  /* hero / events / sortiment background */
  --color-green-accent: #FE316D;
  /* overlines, accent elements */
  --color-yellow: #FCE888;
  /* footer background, timeline bubbles */
  --color-cream: #F5F2EA;
  /* card backgrounds */

  /* Semantic aliases (derived from tokens above — no manual duplication) */
  --color-bg-page: #ffffff;
  --color-bg-hero: #FAEFF5;
  --color-bg-card: #F5F2EA;
  --color-bg-cta: #FCE888;

  /* Mini Donuts–specific tokens */
  --color-primary: #FE316D;
  /* primary pink — buttons, CTAs, icons */
  --color-accent-red: #CA0A17;
  /* numbered elements (Einsatzbereiche) */

  /* Colour of the checked data-protection consent checkbox */
  --consent-check-color: var(--color-primary);

  /* Body text: 16.5px (overrides 15px default) */
  --text-body-sm: 1.03125rem;

  /* Overlines: violet/purple (section subtitles across all blocks) */
  --color-text-overline: #6B21A8;

  /* Header: white at top, brand pink when sticky */
  --color-header-bg: #ffffff;
  --color-header-sticky-bg: #ffffff;
}

/* -------------------------------------------------------------------------
   Fonts: make sure body + headings pick up the overridden font tokens
   (main.css already uses var(--font-*), so this is belt-and-suspenders)
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
}

/* -------------------------------------------------------------------------
   Buttons: primary = pink (not dark purple)
   ------------------------------------------------------------------------- */
.cp-btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cp-btn--primary:hover,
.cp-btn--primary:focus-visible {
  background-color: #d4235a;
  border-color: #d4235a;
  color: #fff;
}

/* CTA banner desc uses --text-body (18px) in main.css — override to 16.5px */
.cp-cta-banner__desc {
  font-size: var(--text-body-sm);
}

/* -------------------------------------------------------------------------
   Logo: match footer logo height (6rem); stays at 6rem when pinned
   Spin animation plays only while hovering over the respective <header>.
   ------------------------------------------------------------------------- */
@keyframes md-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.logo img {
  height: 4.5rem;
  width: auto;
  display: block;
}

header:hover .logo img {
  animation: md-logo-spin 10s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  header:hover .logo img {
    animation: none;
  }
}

/* Globe: Tabler icon sizing (replaces SVG img approach) */
.icon-globe.ti {
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-black);
}

/* -------------------------------------------------------------------------
   Mobile/tablet (≤1439px): frosted-glass nav dropdown panel
   ------------------------------------------------------------------------- */
@media (max-width: 1439px) {

  /* Mobile nav dropdown panel: same milk-glass look as the pinned sticky
     header (rgba white + backdrop blur), instead of an opaque white panel. */
  .site-header nav[aria-label="Hauptnavigation"] {
    background-color: rgba(255, 255, 255, 0.70);
    background-image: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Top padding matches bottom (1.5rem each) */
  .site-header nav ul {
    padding-top: 1.5rem;
  }
}

/* Language switcher: visible on all screen sizes for Mini-Donuts */
@media (max-width: 767px) {
  .language-switcher {
    display: flex;
  }
}

/* -------------------------------------------------------------------------
   Header: white background + symmetric vertical padding, no shadow
   main-subpages.css sets only padding-top: 1.875rem — add matching bottom here
   ------------------------------------------------------------------------- */
/* Header-inner: match hero max-width and side inset (hero: max-width 1750px, padding 1.25rem) */
.site-header .header-inner {
  max-width: 1750px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.site-header {
  background-color: var(--color-header-bg);
  background-image: none;
  padding-bottom: 1.875rem;
  --site-header-shadow: none;
}

.site-header--sticky-after-hero:not(.site-header--is-pinned) {
  background-color: var(--color-header-bg);
}

/* -------------------------------------------------------------------------
   Sticky header: brand pink, no image unless Panel sets --header-sticky-bg
   Overrides custom.css which uses var(--color-bg-hero) — already correct,
   but the background-image fallback needs to be explicit none here.
   ------------------------------------------------------------------------- */
.site-header--sticky-after-hero.site-header--is-pinned {
  /* Frosted-glass effect like Belfrit, tinted light for this brand */
  background-color: rgba(255, 255, 255, 0.70);
  background-image: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Slimmer sticky bar — less bulky than the top header */
  padding-block: 0.75rem;
}

/* -------------------------------------------------------------------------
   Hero — 2-tile layout
   Left tile: pink card (inset), right tile: full-bleed image
   #hero.md-hero wins over #hero in main-subpages.css (specificity 1,1,0 > 1,0,0)

   The Kirby layout wrapper also receives id="hero" from the Panel, creating a
   second element that matches the main-subpages.css #hero rule (pink bg,
   min-height 820px, overflow hidden). Reset all of those on the wrapper so they
   don't bleed through the hero grid's margins.
   ------------------------------------------------------------------------- */
#hero:not(.md-hero) {
  background-color: transparent;
  background-image: none;
  min-height: 0;
  overflow: visible;
  position: static;
}

#hero.md-hero,
.md-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*
   * Tiles are always square: proof via aspect-ratio 2/1 with padding P and gap G=2P:
   * cell_width  = (W - 2P - G) / 2 = (W - 4P) / 2
   * cell_height = H - 2P = W/2 - 2P = (W - 4P) / 2  →  cell_width = cell_height ✓
   * Using P=1.25rem, G=2.5rem → tiles are 835×835px at Full HD (1750px container)
   */
  max-width: 1750px;
  width: 100%;
  /* margin-top offsets the absolute-positioned header (main.css: .site-header { position: absolute }).
     On desktop the JS spacer stays at height 0; on mobile it's overridden below (spacer handles it). */
  margin-top: var(--site-header-height, 4.5rem);
  margin-left: auto;
  margin-right: auto;
  /* Square tiles as a MINIMUM, not a fixed height: min-height keeps the grid
     square (50vw = the square-tile height, capped once max-width 1750px is hit),
     but lets it GROW when a long heading / button labels make the content taller.
     Both tiles stretch to the grid height, so they always stay equal — unlike a
     fixed aspect-ratio, which either clamps (overflow) or leaves one tile short. */
  aspect-ratio: auto;
  /* Square tiles (50vw, capped at 875px once max-width 1750px is reached) but
     never taller than the viewport minus the header — so on Full-HD / short
     screens the tiles shrink to fit instead of being cut off at the fold. It's a
     MINIMUM, so a long heading / button labels still grow the grid (no clipped
     content); both tiles stretch to the grid height, so they stay equal. */
  min-height: min(50vw, 875px, calc(100svh - var(--site-header-height, 4.5rem) - 2rem));
  max-height: none;
  /* Breathing room to the next section (the grid now hugs its content) */
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: 1.25rem;
  gap: 2.5rem;
  background-color: #ffffff;
  background-image: none;
  background-size: unset;
  background-position: unset;
  overflow: visible;
}

#hero.md-hero--no-image,
.md-hero--no-image {
  grid-template-columns: 1fr;
}

.md-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-bg-hero);
  border-radius: 2.5rem;
  margin: 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}

.md-hero--no-image .md-hero__content {
  margin: 0 auto;
  max-width: 52rem;
}

/* Overline pills */
.md-hero__overlines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.md-hero__overline {
  display: inline-block;
  background-color: #ffffff;
  color: var(--color-green-dark);
  border-radius: 999px;
  padding: 0.25rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-green-dark);
  margin-bottom: 1.5rem;
}

.md-hero__highlight {
  color: var(--color-primary);
}

.md-hero__description {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-green-dark);
  max-width: 36rem;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.md-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* Dark (secondary) hero button: full black, white text */
.md-hero .cp-btn--outline {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: #ffffff;
}

.md-hero .cp-btn--outline:hover,
.md-hero .cp-btn--outline:focus-visible {
  background-color: #1a0b1e;
  border-color: #1a0b1e;
  color: #ffffff;
}

.md-hero__image {
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
}

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

/* Video file: fills the image tile (same as img) */
.md-hero__image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mux player: fills the image tile (custom props control internal video sizing) */
.md-hero__image mux-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  --controls: none;
  --media-object-fit: cover;
  --media-object-position: center center;
}

/* Tablet / mobile: section becomes the tile (border-radius + overflow:hidden).
   Image fills the full section at low opacity; pink shows only through the photo.
   margin-top clears the header; padding gives equal spacing on all sides. */
@media (max-width: 991px) {

  #hero.md-hero,
  .md-hero {
    position: relative;
    grid-template-columns: 1fr;
    aspect-ratio: unset;
    max-width: unset;
    min-height: auto;
    padding: 1.5rem;
    gap: 0;
    margin-top: var(--site-header-height, 4.5rem);
    /* gap below header, same as desktop */
    background-color: var(--color-bg-hero);
    border-radius: 2.5rem;
    /* section IS the tile */
    overflow: hidden;
    /* clip image to rounded corners */
  }

  .md-hero__content {
    position: relative;
    z-index: 1;
    background-color: transparent;
    border-radius: 0;
    margin: 0;
    padding: 1rem 0 0.5rem;
  }

  /* Image/video fills the full section area; section clips it to the tile shape */
  .md-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }

  .md-hero__image img,
  .md-hero__image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
}

/* Phone: hide description to save space */
@media (max-width: 767px) {
  .md-hero__description {
    display: none;
  }

  .md-hero__overline {
    font-size: 0.625rem;
    /* 10px */
  }

  /* Inset the hero tile 1.25rem each side so it matches the 100-banner and the
     other blocks instead of running full-bleed to the screen edges. The desktop
     auto margins still centre it. */
  #hero.md-hero,
  .md-hero {
    width: calc(100% - 2.5rem);
  }
}

/* Mobile/tablet: MUX media tile appears below text in normal flow
   (self-hosted image/video use the overlay approach above). */
@media (max-width: 991px) {
  .md-hero--has-video {
    overflow: visible;
    height: calc(100svh - var(--site-header-height, 4.5rem));
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
  }

  /* Top-align content so visual gap above text = hero padding (1.5rem),
     matching the 1.5rem gap below the video. Default justify-content:center
     would add extra space above the overline pill. */
  .md-hero--has-video .md-hero__content {
    padding-top: 0;
    justify-content: flex-start;
  }

  .md-hero--has-video .md-hero__image {
    position: static;
    z-index: auto;
    inset: auto;
    aspect-ratio: unset;
    border-radius: 1.25rem;
    margin-top: 0;
    overflow: hidden;
    align-self: stretch;
  }

  .md-hero--has-video .md-hero__image mux-player {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
  }
}

/* Very small phones (≤400px): hide video tile, revert to text-only layout. */
@media (max-width: 400px) {
  .md-hero--has-video {
    height: auto;
    grid-template-rows: auto;
    gap: 0;
  }

  .md-hero--has-video .md-hero__content {
    padding-top: 1rem;
  }

  .md-hero--has-video .md-hero__image {
    display: none;
  }
}

/* ==========================================================================
   Slider navigation buttons – light pink instead of yellow
   ========================================================================== */

.cp-carousel__btn {
  background-color: var(--color-primary);
  /* #FE316D */
}

.cp-carousel__btn-icon {
  filter: brightness(0) invert(1);
  /* white arrow on pink button */
}

/* ==========================================================================
   Slider nav arrows — visibility (mirrors the Mojito / Belfrit rules; overrides
   the shared main-subpages.css / responsive.css defaults, which show the arrows
   across all touch + desktop widths). Mini-donuts-scoped via this stylesheet.

   • Feature-cards (#angebot) + Einsatzbereiche (#einsatzbereiche):
       – Phones & tablets (≤1024px): no arrows — swipe / drag only.
       – PC (1025–1439px, where the slider is mounted): arrows fade in only
         while the slider is hovered or keyboard-focused. At ≥1440px the slider
         becomes a static grid, so the base `display: none` keeps them hidden.
   • Events (#md-events): no arrows at any width — swipe / drag only.
   ========================================================================== */

/* Feature-cards + Einsatzbereiche: hide arrows on phones & tablets */
@media (max-width: 1024px) {
  .cp-angebot-slider .cp-carousel__btn,
  .cp-einsatz-slider .cp-carousel__btn {
    display: none;
  }
}

/* Feature-cards + Einsatzbereiche: reveal on hover / focus (PC, slider range) */
@media (min-width: 1025px) and (max-width: 1439px) {
  .cp-angebot-slider .cp-carousel__btn,
  .cp-einsatz-slider .cp-carousel__btn {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* Keep the arrows inside the slider edges. The slider now runs full hero
     width (1.25rem viewport gap), so the default −1.3125rem outset would push
     past the viewport. The arrows are hover-only, so overlapping the outer
     cards is fine — the layout width must not depend on them. */
  .cp-angebot-slider .cp-carousel__btn--prev,
  .cp-einsatz-slider .cp-carousel__btn--prev {
    left: 0;
  }

  .cp-angebot-slider .cp-carousel__btn--next,
  .cp-einsatz-slider .cp-carousel__btn--next {
    right: 0;
  }

  .cp-angebot-slider:hover .cp-carousel__btn,
  .cp-angebot-slider:focus-within .cp-carousel__btn,
  .cp-einsatz-slider:hover .cp-carousel__btn,
  .cp-einsatz-slider:focus-within .cp-carousel__btn {
    opacity: 1;
  }
}

/* Events: remove the nav arrows entirely, every viewport (ID beats the shared
   [data-events-splide]…is-overflow rule regardless of source order). */
#md-events .cp-carousel__btn {
  display: none;
}

/* ==========================================================================
   Angebot – Feature Cards
   ========================================================================== */

.md-angebot__description {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-green-dark);
  max-width: 42rem;
  margin: 0.75rem auto 0;
  opacity: 0.8;
  text-align: center;
}

/* Feature card: cream background (overrides main.css --color-bg-card which is mojito cream) */
.md-angebot .cp-feature-card {
  background-color: var(--color-bg-card);
  /* #F5F2EA mini-donuts cream */
}

/* Badge: pink starburst instead of mojito yellow */
.md-angebot .cp-badge {
  background-image: url('../img/mini-donuts/feature-cards/mini-donuts-pink-star.svg');
}

/* Feature cards (#angebot) + Einsatzbereiche (#einsatzbereiche) behave identically.
   Each section sits in its own `.container`, so `:has(#…)` targets just that block. */

/* 1025–1439px (small PC / laptop): the feature-cards and einsatzbereiche sliders
   span the same width as the hero and the #md-events card — a 1.25rem side gap,
   so their outer edge lines up with the hero's inner tile. The hover-reveal nav
   arrows (below) sit inside the slider rather than in a side lane: they only
   appear on hover, so overlapping the outer cards then is acceptable and must
   never widen the layout. The contact form (#md-contact) keeps its own narrower
   inset. */
@media (min-width: 1025px) and (max-width: 1439px) {

  .container:has(#angebot),
  .container:has(#einsatzbereiche) {
    padding-inline: 1.25rem;
  }

  .container:has(#md-contact) {
    padding-inline: clamp(1.5rem, 5vw, 3rem);
  }
}

/* Drop the shared 2.5rem button-lane padding (responsive.css) across the whole
   mobile/tablet/laptop range so the slide track fills the slider edge-to-edge
   and the cards reach the full block width. No lane is ever needed for
   mini-donuts: the arrows are hidden ≤1024px and, at 1025–1439px, hover-only and
   positioned inside the slider edges (see the arrow rules above). */
@media (max-width: 1439px) {
  .cp-angebot-slider,
  .cp-einsatz-slider {
    padding-inline: 0;
  }
}

/* ≥1440px: halve the L/R padding (≈50% of the default inset
   clamp(1.25rem, 15.87vw, 18.75rem)) so the cards sit wider. */
@media (min-width: 1440px) {

  .container:has(#angebot),
  .container:has(#einsatzbereiche),
  .container:has(#md-contact) {
    padding-inline: clamp(0.625rem, 7.94vw, 9.375rem);
  }
}

/* ==========================================================================
   Einsatzbereiche
   ========================================================================== */

.md-einsatzbereiche__description {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-green-dark);
  max-width: 42rem;
  margin: 0.75rem auto 0;
  opacity: 0.8;
  text-align: center;
}

/* ==========================================================================
   Qualität – Foto & Vorteile
   ========================================================================== */

/* Benefit badge: violet starburst instead of mojito yellow */
.md-qualitaet .cp-badge {
  background-image: url('../img/mini-donuts/image-bulletpoints/mini-donuts-violet-star.svg');
}

/* Quote card: brand pink, wider, flex-centred — mirrors mojito-lemon.css layout */
.md-qualitaet .cp-quote-card {
  background-color: var(--color-primary);
  width: clamp(15rem, 72%, 18rem);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
}

/* Desktop: left edge at the image's horizontal midline (mirrors mojito / belfrit) */
@media (min-width: 1025px) {
  .md-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    transform: none;
  }
}

/* 992–1024px: horizontally centred in image column */
@media (min-width: 992px) and (max-width: 1024px) {
  .md-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1rem;
    width: calc(100% - 2rem);
    transform: translateX(-50%);
  }
}

/* Mobile/tablet: centred in image */
@media (max-width: 991.9px) {
  .md-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.md-qualitaet .cp-quote-card p {
  color: #ffffff;
  text-align: center;
  margin-bottom: 0;
}

/* Phones (≤767px): the shared rule (responsive.css) shrinks the stacked photo to
   width:auto + max-height:50vh; let it fill the block instead, cropped to the
   portrait ratio. Above 767px (tablets) the shared 50vh cap stays so the portrait
   photo does not get very tall — mirrors mojito / belfrit. */
@media (max-width: 767px) {
  .md-qualitaet .cp-media-block__image img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    aspect-ratio: 540 / 655;
    object-fit: cover;
  }
}

@media (min-width: 992px) {
  #qualitaet.md-qualitaet {
    scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 4rem);
  }

  .md-qualitaet .cp-media-block__image {
    position: sticky;
    top: calc(var(--site-header-height, 4.5rem) + 3rem);
  }

  /* .md-qualitaet .cp-media-block {
    min-height: 1200px;
  } */

  .md-qualitaet .cp-media-block__content {
    padding-top: 0;
  }
}


/* ==========================================================================
   Sortiment – Tabs & Produkte
   ========================================================================== */

/* Header: centered (no tabs → single lead column) */
.md-sortiment .sortiment-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.md-sortiment .sortiment-header__desc {
  max-width: 36rem;
}

/* Card: light pink background, square tiles */
.md-sortiment .cp-product-card {
  background-color: var(--color-bg-hero);
  /* #FAEFF5 */
  aspect-ratio: 1 / 1;
  /* iOS Safari/WebKit ignores `aspect-ratio` on a flex/grid child that is
     stretched on the cross axis (align-items:stretch — the default in both the
     Splide flex row and the desktop grid). The card then inflates to its image's
     intrinsic height, and because the donut sits at `object-position: bottom`,
     the extra height becomes empty space ABOVE the image. Opting out of the
     stretch lets aspect-ratio drive the height instead; cards stay equal-height
     because they share the same width + ratio. No-op in Chromium. */
  align-self: start;
}

/* Image area: fills remaining height above the info bar */
.md-sortiment .cp-product-card__image {
  flex: 1;
  padding: 8% 12%;
  overflow: hidden;
  min-height: 0;
  margin-bottom: 0;
}

/* Image fits fully inside the padded container — no cropping */
.md-sortiment .cp-product-card__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  object-fit: contain;
  object-position: center bottom;
}

/* Info bar: fixed size so image gets all remaining space */
.md-sortiment .cp-product-card__info {
  flex: 0 0 auto;
}

/* Small PC / laptop (1025–1439px): the 3-up grid shrinks each card, and the
   square ratio + the (roughly fixed-height) info bar leave the donut tiny. Give
   the card a taller ratio and less image padding — same idea as the tablet
   treatment — so the product image reads large across this range. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .md-sortiment .cp-product-card {
    aspect-ratio: 4 / 5;
  }

  .md-sortiment .cp-product-card__image {
    padding: 4% 8%;
  }
}

/* Tablet (≤1023px): less padding → bigger image */
@media (max-width: 1023px) {
  .md-sortiment .cp-product-card__image {
    padding: 4% 8%;
  }
}

/* Mobile (≤767px): minimal padding + taller card for maximum image size */
@media (max-width: 767px) {
  .md-sortiment .cp-product-card {
    aspect-ratio: 4 / 5;
  }

  .md-sortiment .cp-product-card__image {
    padding: 3% 6%;
  }
}

/* Phones: widen the sortiment cards to the full block width by dropping the
   shared 2.5rem button-lane padding and hiding the carousel nav arrows
   (swipe-only, matching the other mini-donuts sliders on phones). */
@media (max-width: 767px) {
  .cp-sortiment-slider {
    padding-inline: 0;
  }

  .cp-sortiment-slider .cp-carousel__btn {
    display: none;
  }
}

/* Add (+) button: hidden — not currently used. The button is already removed
   from the mini-donuts-sortiment block markup; this also covers the shared
   sections/sortiment.php render path (#sortiment without .md-sortiment). Scoped
   to #sortiment and safe because this stylesheet only loads on mini-donuts pages.
   Re-enable by removing this rule. */
#sortiment .cp-product-card__add {
  display: none;
}

/* Add button: brand pink (kept for when the button is re-enabled) */
.md-sortiment .cp-product-card__add {
  background-color: var(--color-primary);
}

.md-sortiment .cp-product-card__add:hover {
  background-color: #d4235a;
}

/* ==========================================================================
   Quote – Claim & Bilder
   ========================================================================== */

#quote.md-quote {
  position: relative;
  padding-top: calc(2 * var(--space-2xl));
  /* 2× normal padding; the extra space also contains img 3 (absolutely positioned) */
  padding-bottom: calc(2 * var(--space-2xl));
}

/* Large claim text, in front of the photos */
.md-quote__text {
  font-family: var(--font-heading);
  font-size: clamp(3.75rem, 8vw, 7.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-black);
  /* Rounded white outline via multi-shadow ring at radius 3px */
  text-shadow:
    -3px 0 0 #fff, 3px 0 0 #fff,
    0 -3px 0 #fff, 0 3px 0 #fff,
    -2px -2px 0 #fff, 2px -2px 0 #fff,
    -2px 2px 0 #fff, 2px 2px 0 #fff,
    -3px -1px 0 #fff, 3px -1px 0 #fff,
    -3px 1px 0 #fff, 3px 1px 0 #fff;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0;
}

/* Shared image styles — ~10% smaller than original */
.md-quote__img {
  position: absolute;
  width: clamp(8rem, 12.5vw, 11.75rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.5rem;
  z-index: 1;
  pointer-events: none;
}

/* Position 1 – towards centre from left */
.md-quote__img--1 {
  top: 12%;
  left: 18%;
  transform: rotate(-9deg);
}

/* Position 2 – towards centre from right */
.md-quote__img--2 {
  top: 8%;
  right: 18%;
  transform: rotate(11deg);
}

/* Position 3 – sits in the extra bottom padding, no overflow */
.md-quote__img--3 {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-30%) rotate(-5deg);
}

/* Float: continuous levitation with slight drift.
   Uses the CSS Transforms Level 2 'translate' property so it composes
   on top of the existing 'transform' (rotate / translateX) without conflict. */
@keyframes md-quote-float {
  0% {
    translate: 0 0;
  }

  25% {
    translate: 4px -10px;
  }

  50% {
    translate: 0 -14px;
  }

  75% {
    translate: -4px -10px;
  }

  100% {
    translate: 0 0;
  }
}

/* Scroll-driven fade: opacity 0→1 as image enters viewport, 1→0 as it exits */
@keyframes md-quote-scroll-fade {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.md-quote__img {
  animation-name: md-quote-float, md-quote-scroll-fade;
  animation-duration: 4s, auto;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, both;
  animation-timeline: auto, view();
}

/* Stagger float so the three images are never in sync */
.md-quote__img--1 {
  animation-delay: 0s, 0s;
}

.md-quote__img--2 {
  animation-delay: -1.4s, 0s;
}

.md-quote__img--3 {
  animation-delay: -2.8s, 0s;
}

/* Tablet / mobile: upper images flush to the outer section edges */
@media (max-width: 991px) {
  .md-quote__img--1 {
    left: 0;
  }

  .md-quote__img--2 {
    right: 0;
  }
}

/* ==========================================================================
   Events – Kartenübersicht
   ========================================================================== */

#md-events {
  padding-block: var(--space-2xl);
}

/* Break out of .container so the card can match the hero's full width */
.container #md-events {
  margin-inline: calc(-1 * clamp(1.25rem, 15.87vw, 18.75rem));
}

/* Light-pink rounded card — same width logic as the hero (max 1750px, 1.25rem side gap) */
.md-events__card {
  width: calc(100% - 2 * 1.25rem);
  max-width: 1750px;
  margin-inline: auto;
  background-color: var(--color-bg-hero);
  /* #FAEFF5 */
  border-radius: var(--radius-card);
  /* 30px */
  padding: 9rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Event grid: constrain to ~Mojito-Lemon container width; flex parent centers it */
#md-events .cp-event-grid {
  width: 100%;
  max-width: 980px;
}

#md-events .cp-event-card__desc-fade {
  --cp-event-card-desc-fade-color: #FAEFF5;
}

/* Button: centred below the event grid on all viewports */
.md-events__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (max-width: 1024px) {

  /* Cancel full-bleed: clamp resolves too large at tablet to fit the viewport */
  .container #md-events {
    margin-inline: 0;
  }

  .md-events__card {
    /* Break-out is cancelled here, so the section already carries the
       .container inset; calc(100% - 2.5rem) would inset the card a second time
       (narrower than the other blocks). Fill the section width instead. */
    width: 100%;
    /* Wider side padding than mobile so the prev/next buttons have a pink lane
       to sit in, clear of the card content (see the tablet-only arrow rule). */
    padding: 3.5rem 4rem;
    /* Let the slider fill the card width instead of shrink-to-content centring. */
    align-items: center;
  }

  /* Once the card is no longer full-bleed, the shrink-to-content slider would
     hit .cp-event-grid's 980px max-width and overflow the narrower card. Make
     the slider fill the card so Splide sizes slides from the card width. */
  #md-events .cp-events-slider {
    width: 100%;
    /* Flex item under align-items: stretch defaults to min-width: auto
       (= min-content), so it can't shrink below the slides' width and overflows
       the card. Allow it to shrink so width:100% + the track's overflow:hidden win. */
    min-width: 0;
  }

  /* Clip the slides on the track only — NOT the slider. The prev/next buttons
     are children of the slider positioned with a negative offset, so clipping
     the slider would swallow them (they'd render as slivers behind the cards). */
  #md-events .splide__track {
    width: 100%;
    overflow: hidden;
  }

  /* Remove max-width constraint — Splide controls list width via inline styles */
  #md-events .cp-event-grid {
    max-width: none;
  }
}

/* Tablet only: sit the arrows out in the card's 4rem side padding, clear of the
   card content so they never cover a title. Mobile keeps its edge-to-edge card +
   arrow positions; desktop pushes the arrows into the wider full-bleed margin. */
@media (min-width: 768px) and (max-width: 1024px) {
  #md-events .cp-carousel__btn--prev {
    left: -3.5rem;
  }

  #md-events .cp-carousel__btn--next {
    right: -3.5rem;
  }
}

@media (max-width: 767px) {
  .md-events__card {
    /* Fill the full section width (same as Mojito-Lemon's slider width = 335px at 390px
       viewport), so track/slide dimensions and button positions match exactly. */
    width: 100%;
    padding: 2.5rem 0;
  }

  #md-events .section-heading,
  .md-events__cta {
    padding-inline: 1.25rem;
  }
}

/* ==========================================================================
   Ablauf – Timeline
   ========================================================================== */

#ablauf.md-ablauf {
  padding-block: var(--space-2xl);
}

/* Break out of .container — matches the hero/events full-bleed width */
.container #ablauf.md-ablauf {
  margin-inline: calc(-1 * clamp(1.25rem, 15.87vw, 18.75rem));
}

@media (max-width: 1024px) {

  /* Cancel full-bleed: clamp resolves too large at tablet to fit the viewport */
  .container #ablauf.md-ablauf {
    margin-inline: 0;
  }
}

/* Inner card — same dimensions as .md-events__card so they match visually */
.md-ablauf__card {
  background-color: var(--color-bg-hero);
  border-radius: var(--radius-card);
  padding: var(--space-2xl) 2rem;
  width: calc(100% - 2 * 1.25rem);
  max-width: 1750px;
  margin-inline: auto;
  overflow: hidden;
  /* clip content to rounded card shape */
}

/* ≤1024px the section break-out is cancelled (see above), so it already carries
   the .container inset. The card's calc(100% - 2.5rem) would then inset it a
   second time (too narrow vs. the 100-banner) — fill the section width instead. */
@media (max-width: 1024px) {
  .md-ablauf__card {
    width: 100%;
  }
}

.md-ablauf__desc {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-green-dark);
  max-width: 42rem;
  margin: 0.75rem auto 0;
  opacity: 0.8;
  text-align: center;
}

/* ---- Horizontal slider: all breakpoints ---- */

.md-ablauf__slider {
  position: relative;
  margin-top: 3rem;
}

/* Nav arrows: hidden on phones & tablets (≤1024px) — swipe / drag only. On PC /
   laptop (≥1025px) they fade in only while the slider is hovered or keyboard-
   focused. Mirrors the angebot / einsatz slider behaviour. The ablauf slider
   stays mounted at every width, so there is no upper cutoff (unlike angebot /
   einsatz, which become a static grid at ≥1440px). */
@media (max-width: 1024px) {
  .md-ablauf__slider .cp-carousel__btn {
    display: none;
  }
}

@media (min-width: 1025px) {
  .md-ablauf__slider .cp-carousel__btn {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .md-ablauf__slider:hover .cp-carousel__btn,
  .md-ablauf__slider:focus-within .cp-carousel__btn {
    opacity: 1;
  }
}

.md-ablauf__slider .splide__track {
  overflow: hidden;
}

.md-ablauf__slide {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.375rem;
  /* prevent circle from being clipped by track overflow:hidden */
}

/* Bubble: in-flow SVG sets height, content overlaid absolutely.
   inset bottom 0.5rem accounts for the downward tail of the SVG (7px / 170px). */
.md-ablauf__bubble {
  position: relative;
  max-width: 20rem;
  /* cap at ~320px — natural SVG size is 352px, smaller looks better at 3-up */
  margin-inline: auto;
}

.md-ablauf__bubble-bg {
  display: block;
  width: 100%;
  height: auto;
}

.md-ablauf__bubble-content {
  position: absolute;
  inset: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.5rem;
  text-align: center;
}

.md-ablauf__bubble-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-green-dark);
  margin: 0 0 0.375rem;
}

.md-ablauf__bubble-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-green-dark);
  margin: 0;
  opacity: 0.85;
}

/* Footer: horizontal line through the circle node.
   Grid: left-line | node | right-line — visually continuous across slides. */
.md-ablauf__slide-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 1.25rem;
}

.md-ablauf__slide-footer::before,
.md-ablauf__slide-footer::after {
  content: '';
  height: 2px;
  background-color: rgba(43, 16, 50, 0.18);
}

.md-ablauf__slide-footer::before {
  margin-right: 0.75rem;
}

.md-ablauf__slide-footer::after {
  margin-left: 0.75rem;
}

/* Node: pink circle with number overlay */
.md-ablauf__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-ablauf__circle {
  width: 2.6875rem;
  height: 2.6875rem;
  display: block;
}

.md-ablauf__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

/* On tablet/mobile (1-up view): shrink the bubble text. The nav arrows are
   hidden below 1025px (swipe / drag only), so no arrow positioning is needed. */
@media (max-width: 860px) {
  .md-ablauf__bubble-title {
    font-size: 1rem;
    /* 16px */
  }

  .md-ablauf__bubble-text {
    font-size: 0.8125rem;
    /* 13px */
  }
}

/* ========================================================================== */
/* Banner – 100% mit Ticker
   ========================================================================== */

#md-banner {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background-color: #ffffff;
}

/* Break out of .container padding so the banner renders full-bleed like the hero.
   Mirrors the hero's max-width (1750px) and side padding (1.25rem). */
.container #md-banner {
  margin-inline: calc(-1 * clamp(1.25rem, 15.87vw, 18.75rem));
}

#md-banner .banner-100__frame {
  padding-inline: 1.25rem;
  max-width: 1750px;
}

/* Box: white fallback — eliminates the dark-green (#152a00) anti-aliasing artefact
   visible at the border-radius corners in the mini-donuts brand context */
#md-banner .banner-100__box {
  background-color: #ffffff;
}

/* Ticker strip: slightly narrower than the banner frame */
.md-banner__ticker-wrap {
  margin-inline: 2.5rem;
}

/* ---- Responsive: mirrors responsive.css #banner-100 rules ---- */

@media (max-width: 1024px) {

  /* Cancel full-bleed: container padding is 1.25rem on mobile/tablet,
     but the negative margin clamp resolves to far more → section goes off-screen left */
  .container #md-banner {
    margin-inline: 0;
  }

  #md-banner .banner-100__frame {
    padding-inline: 0;
    max-width: none;
  }

  #md-banner {
    padding-block: 5rem;
  }

  #md-banner .banner-100__box {
    aspect-ratio: auto;
    min-height: 28rem;
  }

  #md-banner .banner-100__number {
    top: 3rem;
    bottom: auto;
  }

  #md-banner .banner-100__content {
    left: 1.5rem;
    right: 1.5rem;
    top: auto;
    bottom: 1.5rem;
    width: auto;
  }
}

@media (max-width: 767px) {
  #md-banner {
    padding-block: 3.5rem;
    padding-bottom: 2rem;
  }

  #md-banner .banner-100__box {
    min-height: 22rem;
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  #md-banner .banner-100__bg {
    border-radius: var(--radius-card);
  }

  #md-banner .banner-100__content .cp-btn--primary {
    position: absolute;
    top: calc(100% + 3rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* Push ticker below the floating button (button extends ~3rem below content div) */
  #md-banner .md-banner__ticker-wrap {
    margin-top: 7rem;
    /* Full-bleed the endless ticker to the screen edges on phones. The calc
       pulls the strip out past the container padding (1.25rem) + its own
       2.5rem inset to span the full viewport width. overflow:hidden (base rule)
       keeps the scrolling content clipped, so no horizontal page scroll. */
    margin-inline: calc(50% - 50vw);
    width: 100vw;
  }

  /* Match the divider bar to the now full-bleed ticker so the strip reads as
     one full-width band. max-width override beats the global img max-width:100%
     that would otherwise cap the bar at the container width. */
  #md-banner .md-banner__divider {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
  }
}

/* Ticker strip */
.md-banner__ticker-wrap {
  overflow: hidden;
  padding-block: 1.125rem;
  margin-top: 1.5rem;
}

/* Divider bar image below the ticker */
.md-banner__divider {
  display: block;
  width: 100%;
  height: auto;
}

.md-banner__ticker {
  display: flex;
  width: max-content;
  animation: md-ticker-scroll 35s linear infinite;
}

.md-banner__ticker-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-banner__ticker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-green-dark);
  white-space: nowrap;
}

.md-banner__ticker-sep {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@keyframes md-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.md-banner__ticker-wrap:hover .md-banner__ticker {
  animation-play-state: paused;
}

/* =========================================================================
   Contact block
   ========================================================================= */
#md-contact {
  padding-block: var(--space-2xl);
}

/* Contact-form inline links (e.g. the Datenschutzerklärung link) in brand colour */
.contact-form a {
  color: #fe316d;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.md-contact__heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-green-dark);
  margin-bottom: 1.25rem;
}

.md-contact__desc {
  color: var(--color-green-dark);
  margin-bottom: 1.75rem;
}

.md-contact__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.md-contact__bullet {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-green-dark);
  font-weight: 500;
}

.md-contact__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-image: url('../img/mini-donuts/feature-cards/mini-donuts-pink-star.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* Form card */
.md-contact__form-wrap {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}

.md-contact__form-wrap .contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.md-contact .alert.contact-form__success,
.md-contact .alert.contact-form__success p {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 1.125rem !important;
  /* 18px */
  color: var(--color-green-dark) !important;
  text-align: center;
  padding: 0;
  margin: 0;
}

.md-contact__form-wrap .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-green-dark);
  margin-bottom: 0.375rem;
}

.md-contact__form-wrap .row {
  row-gap: 1.25rem;
}

.md-contact__form-wrap .form-control,
.md-contact__form-wrap .form-select {
  border-radius: 9999px;
  border: 1.5px solid rgba(43, 16, 50, 0.06);
  background-color: #fff;
  color: var(--color-green-dark);
  font-family: var(--font-body);
  padding-inline: 1.125rem;
}

/* textarea: recognisable multi-line field */
.md-contact__form-wrap textarea.form-control {
  border-radius: 1rem !important;
  height: 7rem !important;
  resize: vertical;
  border-color: rgba(43, 16, 50, 0.06) !important;
}

.md-contact__form-wrap .form-control:focus,
.md-contact__form-wrap .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(254, 49, 109, 0.15);
  outline: none;
}

.md-contact__form-wrap .form-control::placeholder,
.md-contact__form-wrap .form-select::placeholder {
  color: rgba(43, 16, 50, 0.4);
}

.md-contact__submit {
  margin-top: 2.5rem !important;
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: var(--font-heading);
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s linear, box-shadow 0.15s linear;
}

.md-contact__submit:hover,
.md-contact__submit:focus-visible {
  background-color: #1a0b1e;
  border-color: #1a0b1e;
  transform: translate3d(-4px, -4px, 0);
  box-shadow: 4px 4px 0 0 #000;
}

/* Responsive */
@media (max-width: 991px) {
  .md-contact__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 767px) {
  .md-contact__form-wrap {
    padding: 1.5rem;
  }
}

/* =========================================================================
   Mini-Donuts Footer
   ========================================================================= */

.md-footer {
  padding-bottom: 2rem;
  background-color: transparent;
  /* page bg shows between footer and viewport edge */
}

/* Align the footer card to the 100-banner box width. Above 1024px the banner
   breaks out of .container and caps its frame at 1750px / 1.25rem inset (see
   `#md-banner .banner-100__frame`), while the footer stays in the narrow default
   .container inset — leaving the card ~200px inset from the banner on each side.
   Mirror the banner frame geometry here so the card lines up 1:1. Below 1025px
   the banner cancels its break-out and both already share the .container width. */
@media (min-width: 1025px) {
  .md-footer .container {
    max-width: 1750px;
    padding-inline: 1.25rem;
  }
}

.md-footer__card {
  background-color: var(--color-yellow);
  border-radius: var(--radius-card);
  padding: 2.5rem 3rem;
}

/* Main row: logo | nav | social */
.md-footer__main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.md-footer__social {
  justify-self: end;
}

.md-footer__logo-link {
  flex-shrink: 0;
}

.md-footer__logo {
  display: block;
  height: 6rem;
  width: auto;
}

footer:hover .md-footer__logo {
  animation: md-logo-spin 10s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  footer:hover .md-footer__logo {
    animation: none;
  }
}

/* Nav: horizontal list with donut separators */
.md-footer__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.md-footer__nav-item+.md-footer__nav-item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('../img/mini-donuts/universal/mini-donuts-header-footer-seperator-pink.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-inline: 0.75rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Override main.css header nav separator with donut icon */
.site-header nav li:not(:last-child)::after {
  background-color: transparent;
  border-radius: 0;
  width: 14px;
  height: 14px;
  background-image: url('../img/mini-donuts/universal/mini-donuts-header-footer-seperator-pink.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.md-footer__nav-list a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-green-dark);
  text-decoration: none;
  transition: opacity 0.15s;
}

.md-footer__nav-list a:hover {
  opacity: 0.7;
}

/* Social icons in white pill buttons */
.md-footer__social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.md-footer__social-btn {
  display: inline-flex;
  transition: opacity 0.15s;
}

.md-footer__social-btn:hover {
  opacity: 0.8;
}

.md-footer__social-btn img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

/* Facebook blob fills ~95% of its 44×44 viewBox vs ~73% for the others — scale down to match */
.md-footer__social-btn--facebook img {
  width: 2.25rem;
  height: 2.25rem;
}

/* Divider */
.md-footer__divider {
  border: none;
  border-top: 1px solid rgba(43, 16, 50, 0.15);
  margin-block: 1.5rem;
}

/* Bottom row */
.md-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-footer__copy {
  font-size: 0.875rem;
  color: var(--color-green-dark);
  opacity: 0.7;
  margin: 0;
}

.md-footer__top-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-green-dark);
  text-decoration: none;
  transition: opacity 0.15s;
}

.md-footer__top-link:hover {
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 767px) {
  .md-footer__card {
    padding: 2rem 1.5rem;
  }

  .md-footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  /* Nav stacks vertically, centred — no donut separators between items. */
  .md-footer__nav-list {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .md-footer__nav-item+.md-footer__nav-item::before {
    display: none;
  }

  /* Bottom row stacks: copyright above the "Go to Top" link. */
  .md-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
  }
}