/* ==========================================================================
   mamiundpapi.de - brand layer (child theme mamiundpapi-uf)
   ==========================================================================

   Look: warm, friendly, tidy and trustworthy - a good parenting magazine, not a
   shop and not a price portal. Colours from the header wordmark (petrol #103840,
   lilac #9858c0) and the article design of the old site (lilac head band,
   raspberry product accents, blue-grey text). Headings in Nunito (rounded, calm,
   friendly - matches the rounded wordmark), body text in the system font.

   LOAD ORDER
     uf-basis basis.css (priority 1) -> magazin.css (priority 2) -> this file
     (priority 55, dependencies uf-basis + uf-magazin). Equal specificity: this
     file wins. No !important anywhere (the only exception, [hidden], is in
     basis.css). The calculator (rechner.css, agent M3) is styled there, with the
     same --mup-* tokens; this file does not touch .mup-rechner*.

   RULES FROM PAST FAILURES (CLAUDE.md)
     - flex containers with mixed content always carry a gap;
     - a property set in basis/magazin that must go is overridden explicitly here
       (specificity decides per property, not per rule);
     - no min-width:0 on a bar of labels (the header navigation wraps instead);
     - icons are inline SVG coloured through currentColor, never <use> + classes;
     - opacity/transform create stacking contexts - hover lifts use box-shadow
       and border colour only;
     - prose rules sit in :where() so every component class wins without fights.

   CONTRAST (WCAG 2.x relative luminance, computed 16.10.2026 with a script)
     token / pair                                  ratio   use
     ink        #103840 on #FFFFFF                 12.64   headings
                #103840 on bg-soft #F7F3FA         11.53
                #103840 on bg-warm #FBF7F2         11.85
     text       #2E3B44 on #FFFFFF                 11.51   body text
                #2E3B44 on #F7F3FA                 10.49
                #2E3B44 on #FBF7F2                 10.79
                #2E3B44 on primary-soft #EFE6F7     9.50
     muted      #5E6B73 on #FFFFFF                  5.49   meta lines
                #5E6B73 on #F7F3FA                  5.01
                #5E6B73 on #FBF7F2                  5.15
                #5E6B73 on #EFE6F7                  4.53   (AA, small text)
     primary    #7A45A8 on #FFFFFF                  6.47   links, accents
                #7A45A8 on #F7F3FA                  5.90
                #7A45A8 on #FBF7F2                  6.07
                #7A45A8 on #EFE6F7                  5.34
     primary-dk #5E3388 on #EFE6F7                  7.52   hover, active chips
     white on   #7A45A8                             6.47   lilac buttons
     white on   cta #C2345F                         5.32   buy buttons (AA normal text)
     white on   cta-dark #A32A50                    6.99   buy button hover
     white on   ink #103840                        12.64   petrol buttons, band
     white on   #0B2B31                            14.96   petrol hover
     accent     #C2345F on #FFFFFF                  5.32   badges, small accents
     #D9CCE6 on #103840                             8.26   intro text on petrol band
     ok-text    #246B4C on ok-soft #EAF4EE          5.69   "Was uns gefällt"
     ok         #2E7D5B on #FFFFFF                  5.00   check icons (>= 3:1)
     warn-text  #8E3F22 on warn-soft #FBEEE8        6.41   "Was uns nicht gefällt"
     warn       #B5532F on #FFFFFF                  4.95   note "achtung", icons
     line-ui    #857B91 on #FFFFFF                  4.01   input borders (1.4.11 >= 3:1)
     line       #E6DFEA on #FFFFFF                  1.30   decoration only, never the
                                                           only boundary of a control
     tile icons (1.4.11, >= 3:1 on their tint):
       #7A45A8/#EFE6F7 5.34  #C2345F/#FBE7EE 4.50  #2F5F8F/#E6EFF8 5.73
       #9A5B13/#FCF1DC 4.83  #2E7D5B/#E3F2EA 4.32  #103840/#E2EEEF 10.66
   The wordmark (#103840 + #9858c0) is a logotype and exempt (1.4.3); its lilac
   is not used for text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Heading font - Nunito, SIL Open Font License 1.1, latin subset, variable
      weight 600-800, 39 KB, self-hosted (no request to Google). The fallback face
      carries Nunito's metrics, so the swap does not move the layout (CLS):
      size-adjust 97.1 % (average advance width Nunito 700 / Arial Bold over a
      German sample), ascent 1011/0.971, descent 353/0.971, line gap 0.
   -------------------------------------------------------------------------- */

@font-face{
  font-family: "Nunito";
  src: url("fonts/nunito-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Nunito Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-style: normal;
  font-weight: 600 800;
  size-adjust: 97.1%;
  ascent-override: 104.1%;
  descent-override: 36.4%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root{
  /* Brand (build spec section 6) */
  --mup-ink: #103840;
  --mup-text: #2E3B44;
  --mup-muted: #5E6B73;
  --mup-bg: #FFFFFF;
  --mup-bg-soft: #F7F3FA;          /* lilac breath: head bands, notes */
  --mup-bg-warm: #FBF7F2;          /* warm surfaces: footer, Kaufberatung band */
  --mup-line: #E6DFEA;
  --mup-primary: #7A45A8;          /* lilac, darkened from #9858c0 for AA on white */
  --mup-primary-soft: #EFE6F7;
  --mup-accent: #C2345F;           /* raspberry - sparingly: badges, highlights */
  --mup-cta: #C2345F;              /* buy buttons, white text */
  --mup-ok: #2E7D5B;
  --mup-warn: #B5532F;
  --mup-radius: 14px;
  --mup-maxw: 1200px;
  --mup-textw: 720px;

  /* Supporting tokens (derived, contrast see header) */
  --mup-primary-dark: #5E3388;
  --mup-accent-soft: #FBE7EE;
  --mup-cta-dark: #A32A50;
  --mup-petrol-deep: #0B2B31;
  --mup-petrol-soft: #EEF4F5;
  --mup-line-ui: #857B91;
  --mup-ok-soft: #EAF4EE;
  --mup-ok-text: #246B4C;
  --mup-warn-soft: #FBEEE8;
  --mup-warn-text: #8E3F22;
  --mup-widew: 1000px;
  --mup-radius-s: 10px;
  --mup-radius-l: 20px;
  --mup-shadow: 0 1px 2px rgba(16,56,64,.05), 0 12px 32px -14px rgba(16,56,64,.24);
  --mup-shadow-s: 0 1px 2px rgba(16,56,64,.06), 0 4px 14px -8px rgba(16,56,64,.18);
  --mup-font-head: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mup-fs-beitrag: 1.125rem;      /* 18px body text in articles */
  --mup-lh-beitrag: 1.75;

  /* Tints of tiles and icons */
  --mup-ton-flieder: #EFE6F7;  --mup-ton-flieder-fg: #7A45A8;
  --mup-ton-rose: #FBE7EE;     --mup-ton-rose-fg: #C2345F;
  --mup-ton-himmel: #E6EFF8;   --mup-ton-himmel-fg: #2F5F8F;
  --mup-ton-sonne: #FCF1DC;    --mup-ton-sonne-fg: #9A5B13;
  --mup-ton-minze: #E3F2EA;    --mup-ton-minze-fg: #2E7D5B;
  --mup-ton-petrol: #E2EEEF;   --mup-ton-petrol-fg: #103840;

  /* Mapping onto uf-basis */
  --uf-ink: var(--mup-ink);
  --uf-body: var(--mup-text);
  --uf-mut: var(--mup-muted);
  --uf-bg: var(--mup-bg);
  --uf-line: var(--mup-line);
  --uf-line-ui: var(--mup-line-ui);
  --uf-link: var(--mup-primary);
  --uf-link-hover: var(--mup-primary-dark);
  --uf-link-rule: rgba(122,69,168,.45);
  --uf-focus: var(--mup-primary-dark);
  --uf-focus-halo: rgba(255,255,255,.95);
  --uf-maxw: var(--mup-maxw);
  --uf-radius: var(--mup-radius);
  --uf-pad-x: 24px;
  --uf-pad-x-sm: 16px;

  /* Mapping onto magazin.css */
  --uf-surface: var(--mup-bg-soft);
  --uf-accent: var(--mup-primary);
  --uf-cta-bg: var(--mup-ink);               /* non-sponsored primary button */
  --uf-cta-bg-hover: var(--mup-petrol-deep);
  --uf-cta-fg: #fff;
  --uf-note-tip: var(--mup-primary);
  --uf-note-info: var(--mup-ink);
  --uf-note-warn: var(--mup-warn);
  --uf-video-bg: var(--mup-ink);
  --uf-gap: 1.5rem;
  --uf-card-ratio: 3 / 2;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

body{ color: var(--mup-text); background: var(--mup-bg); }

h1, h2, h3, h4, h5, h6,
.uf-titel{
  font-family: var(--mup-font-head);
  color: var(--mup-ink);
  font-weight: 800;
  letter-spacing: -.012em;
}
h3, h4, h5, h6{ font-weight: 700; letter-spacing: -.005em; }
/* German hyphenation only for long words: "El-tern" or "Einschlafri-tuale" in a card
   title read badly; compound words of 10+ letters still break instead of overflowing. */
h1, h2, h3, h4, h5, h6, .uf-karte__titel, .mup-kachel__titel{
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
h1{ line-height: 1.12; letter-spacing: -.02em; }

a{ text-underline-offset: .18em; }

::selection{ background: rgba(122,69,168,.18); color: inherit; }

/* Icons (inline SVG from mup_icon()) */
.mup-icon{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   3. Frame
   -------------------------------------------------------------------------- */

.uf-inhalt{ min-height: 45vh; padding-block: 0 4.5rem; }
.uf-inhalt--start{ padding-bottom: 0; }

/* Text column: articles and pages */
.mup-spalte{ max-width: var(--mup-textw); margin-inline: auto; }

/* Lilac head band (article, page, hub, author, search, 404) */
.mup-kopfband{
  position: relative;
  overflow: hidden;
  margin-bottom: 2.5rem;
  padding-block: 1.75rem 2.5rem;
  background:
    radial-gradient(38rem 20rem at 100% 0%, rgba(239,230,247,.95), rgba(239,230,247,0) 70%),
    radial-gradient(30rem 16rem at 0% 100%, rgba(251,231,238,.55), rgba(251,231,238,0) 70%),
    var(--mup-bg-soft);
  border-bottom: 1px solid var(--mup-line);
}
.mup-kopfband--mit-bild{
  margin-bottom: 0;
  padding-bottom: clamp(4.5rem, 2.5rem + 8vw, 8.5rem);
  border-bottom: 0;
}

/* Small label above an H1 */
.mup-kicker{
  margin: 0 0 .5rem;
  font-family: var(--mup-font-head);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-primary);
}

/* Section heads (start page, hubs, search, 404) */
.mup-abschnitt__kopf{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin: 0 0 1.75rem;
}
.mup-abschnitt__kopftext{ max-width: 46rem; }
.mup-abschnitt__titel{
  margin: 0;
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--mup-ink);
}
.mup-abschnitt__titel::after,
.uf-verwandt__titel::after{
  content: "";
  display: block;
  width: 2.75rem;
  height: 4px;
  margin-top: .625rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mup-primary) 0 62%, var(--mup-accent) 62% 100%);
}
.mup-abschnitt__einleitung{
  margin: .875rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mup-text);
}
.mup-abschnitt__mehr{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--uf-touch);
  font-family: var(--mup-font-head);
  font-weight: 800;
  color: var(--mup-primary-dark);
  text-decoration: none;
}
.mup-abschnitt__mehr .mup-icon{ width: 18px; height: 18px; transition: transform .15s ease; }
.mup-abschnitt__mehr:hover{ color: var(--mup-primary-dark); text-decoration: underline; }
.mup-abschnitt__mehr:hover .mup-icon{ transform: translateX(3px); }

.mup-leer{ color: var(--mup-muted); }

/* --------------------------------------------------------------------------
   4. Header
   Narrow: [logo] [search switch] [menu switch] / search panel / menu panel.
   Wide (>= 1024px): [logo] ....... [search form] / navigation along the bottom
   edge, current section marked by a bar on the header's border. Kaufberatung
   and Rechner (service part) are set apart by a thin divider.
   -------------------------------------------------------------------------- */

.mup-kopf{
  position: relative;
  background: var(--mup-bg);
  border-bottom: 1px solid var(--mup-line);
}

.mup-kopf__band{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "marke suchknopf menueknopf"
    "suche suche suche"
    "nav nav nav";
  align-items: center;
  column-gap: .25rem;
  padding-block: .625rem;
}

.mup-kopf__marke{
  grid-area: marke;
  justify-self: start;
  display: flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--uf-touch);
  border-radius: 8px;
}
.mup-kopf__logo{
  display: block;
  width: 186px;
  max-width: 100%;
  height: auto;
}

.mup-kopf__schalter--suche{ grid-area: suchknopf; }
.mup-kopf__schalter--menue{ grid-area: menueknopf; }

.mup-kopf__knopf{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: var(--uf-touch);
  min-height: var(--uf-touch);
  padding: 0 .625rem;
  border-radius: 12px;
  color: var(--mup-ink);
  font-family: var(--mup-font-head);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mup-kopf__knopf::-webkit-details-marker{ display: none; }
.mup-kopf__knopf::marker{ content: ""; }
.mup-kopf__knopf:hover{ background: var(--mup-bg-soft); }
.mup-kopf__schalter[open] > .mup-kopf__knopf{ background: var(--mup-primary-soft); color: var(--mup-primary-dark); }

.mup-kopf__knopf .mup-icon--schliessen{ display: none; }
.mup-kopf__schalter[open] > .mup-kopf__knopf .mup-icon--schliessen{ display: block; }
.mup-kopf__schalter[open] > .mup-kopf__knopf .mup-icon--suche,
.mup-kopf__schalter[open] > .mup-kopf__knopf .mup-icon--menue{ display: none; }

/* Label stays in the accessible name; visible from 600px */
.mup-kopf__knopftext{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Search panel */
.mup-kopf__suche{
  grid-area: suche;
  display: none;
  padding-block: .75rem .375rem;
}
.mup-kopf__schalter--suche[open] ~ .mup-kopf__suche{ display: block; }

/* Navigation */
.mup-nav{
  grid-area: nav;
  display: none;
  margin-top: .5rem;
  border-top: 1px solid var(--mup-line);
}
.mup-kopf__schalter--menue[open] ~ .mup-nav{ display: block; }

.mup-nav__liste{
  list-style: none;
  margin: 0;
  padding: .25rem 0 .5rem;
}
.mup-nav__liste > li{ margin: 0; border-bottom: 1px solid var(--mup-line); }
.mup-nav__liste > li:last-child{ border-bottom: 0; }
.mup-nav__liste a{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem .25rem;
  color: var(--mup-ink);
  font-family: var(--mup-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}
.mup-nav__liste a:hover{ color: var(--mup-primary-dark); }
.mup-nav__liste a[aria-current],
.mup-nav__liste .current-menu-item > a,
.mup-nav__liste .current-menu-ancestor > a,
.mup-nav__liste .current-post-ancestor > a,
.mup-nav__liste .current-category-ancestor > a{ color: var(--mup-primary-dark); }
.mup-nav__liste > li.mup-nav__trenner{ border-top: 2px solid var(--mup-line); }

@media (min-width: 600px){
  .mup-kopf__logo{ width: 206px; }
  .mup-kopf__knopftext{
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font-size: .9375rem;
  }
  .mup-kopf__knopf{ padding: 0 .875rem; }
}

@media (min-width: 1024px){
  .mup-kopf__band{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "marke suche"
      "nav nav";
    column-gap: 2.5rem;
    padding-block: 1.125rem 0;
  }
  .mup-kopf__schalter{ display: none; }
  .mup-kopf__suche{
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 27rem;
    padding: 0;
  }
  .mup-nav{
    display: block;
    margin-top: .75rem;
    border-top: 0;
  }
  .mup-nav__liste{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.375rem;
    padding: 0;
  }
  .mup-nav__liste > li{ border-bottom: 0; }
  .mup-nav__liste > li.mup-nav__trenner{
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 1.375rem;
  }
  .mup-nav__liste > li.mup-nav__trenner::before{
    content: "";
    width: 1px;
    height: 1.25rem;
    background: var(--mup-line-ui);
    opacity: .5;
  }
  .mup-nav__liste a{
    min-height: 50px;
    padding: 0;
    font-size: .96875rem;
  }
  .mup-nav__liste a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background-color .15s ease;
  }
  .mup-nav__liste a:hover::after{ background: var(--mup-line); }
  .mup-nav__liste a[aria-current]::after,
  .mup-nav__liste .current-menu-item > a::after,
  .mup-nav__liste .current-menu-ancestor > a::after,
  .mup-nav__liste .current-post-ancestor > a::after,
  .mup-nav__liste .current-category-ancestor > a::after{ background: var(--mup-primary); }
}
@media (min-width: 1200px){
  .mup-nav__liste,
  .mup-nav__liste > li.mup-nav__trenner{ column-gap: 2rem; }
  .mup-nav__liste a{ font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   5. Search form (parent searchform.php: .uf-suchform > label.uf-vh, input, button)
   flex-wrap is accessibility: in very narrow space the button drops to its own
   line instead of pushing the page sideways (320px at 200 % zoom).
   -------------------------------------------------------------------------- */

.uf-suchform{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
}
.uf-suchform input[type="search"]{
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 48px;
  padding: .625rem 1rem;
  border: 1px solid var(--mup-line-ui);
  border-radius: 12px;
  background: var(--mup-bg);
  color: var(--mup-ink);
  font-size: 1rem;
}
.uf-suchform input[type="search"]:focus-visible{ border-color: var(--mup-primary-dark); }
.uf-suchform button{
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 12px;
  background: var(--mup-ink);
  color: #fff;
  font-family: var(--mup-font-head);
  font-weight: 800;
}
.uf-suchform button:hover{ background: var(--mup-petrol-deep); }

@media (min-width: 1024px){
  .mup-kopf__suche .uf-suchform input[type="search"],
  .mup-kopf__suche .uf-suchform button{ min-height: 44px; }
  .mup-kopf__suche .uf-suchform input[type="search"]{ background: var(--mup-bg-soft); }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.mup-fuss{
  background: var(--mup-bg-warm);
  border-top: 1px solid var(--mup-line);
  color: var(--mup-text);
}
.mup-fuss__oben{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  padding-block: 3.25rem 2.5rem;
}
.mup-fuss__marke{ max-width: 22rem; }
.mup-fuss__logo-link{ display: inline-flex; border-radius: 8px; }
.mup-fuss__logo{ display: block; width: 165px; height: auto; }
.mup-fuss__claim{ margin: .875rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--mup-text); }
.mup-fuss__gruppe{ margin: .5rem 0 0; font-size: .875rem; line-height: 1.5; font-weight: 700; color: var(--mup-ink); }
.mup-fuss__gruppe a{ color: inherit; text-decoration: underline; text-decoration-color: var(--mup-primary); text-underline-offset: .18em; }
.mup-fuss__gruppe a:hover{ color: var(--mup-primary-dark); }
.mup-fuss__spalten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 2rem 2rem;
}
.mup-fuss__spalte{ min-width: 0; }
.mup-fuss__titel{
  margin: 0 0 .75rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-muted);
}
.mup-fuss__liste{ list-style: none; margin: 0; padding: 0; }
.mup-fuss__liste li{ margin: 0 0 .125rem; }
.mup-fuss__liste a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-block: .25rem;
  color: var(--mup-text);
  line-height: 1.35;
  text-decoration: none;
}
.mup-fuss__liste a:hover{ color: var(--mup-primary-dark); text-decoration: underline; }
.mup-fuss__unten{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2.5rem;
  padding-block: 1.5rem 2.25rem;
  border-top: 1px solid var(--mup-line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--mup-muted);
}
.mup-fuss__hinweis{ flex: 1 1 32rem; max-width: 48rem; margin: 0; }
.mup-fuss__hinweis strong{ color: var(--mup-text); }
.mup-fuss__copy{ flex: 0 0 auto; margin: 0; }

@media (min-width: 1024px){
  .mup-fuss__oben{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 4fr); gap: 3rem; }
  .mup-fuss__spalten{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   7. Start page
   -------------------------------------------------------------------------- */

.mup-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40rem 26rem at 88% 8%, rgba(239,230,247,1), rgba(239,230,247,0) 70%),
    radial-gradient(34rem 22rem at 4% 100%, rgba(251,231,238,.75), rgba(251,231,238,0) 70%),
    var(--mup-bg-soft);
  border-bottom: 1px solid var(--mup-line);
}
.mup-hero__innen{
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2.75rem, 1.75rem + 5vw, 5.25rem);
}
.mup-hero__text{ min-width: 0; }
.mup-hero__deko{ display: none; }
@media (min-width: 960px){
  .mup-hero__innen{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 30vw, 25rem);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
  .mup-hero__deko{ display: block; }
  .mup-hero__bild{ display: block; width: 100%; height: auto; overflow: visible; }
}
.mup-hero__titel{
  max-width: 21ch;
  margin: 0;
  font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.028em;
  color: var(--mup-ink);
}
.mup-hero__zeile{
  max-width: 39rem;
  margin: 1.25rem 0 1.875rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--mup-text);
}
.mup-hero__suche{ max-width: 35rem; }
.mup-hero__suche .uf-suchform input[type="search"]{
  min-height: 58px;
  padding-inline: 1.25rem;
  border-color: var(--mup-line-ui);
  font-size: 1.0625rem;
  box-shadow: var(--mup-shadow-s);
}
.mup-hero__suche .uf-suchform button{ min-height: 58px; padding: 0 1.625rem; font-size: 1.0625rem; }

.mup-schnell{ margin-top: 1.5rem; }
.mup-schnell__titel{
  margin: 0 0 .625rem;
  font-family: var(--mup-font-head);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-muted);
}
.mup-schnell__liste{
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mup-schnell__liste li{ margin: 0; }
.mup-schnell__link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.125rem .5rem .875rem;
  border: 1px solid var(--mup-line);
  border-radius: 999px;
  background: var(--mup-bg);
  color: var(--mup-ink);
  font-family: var(--mup-font-head);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,56,64,.05);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mup-schnell__link .mup-icon{ width: 20px; height: 20px; color: var(--mup-primary); }
.mup-schnell__link:hover{ border-color: var(--mup-primary); color: var(--mup-primary-dark); box-shadow: var(--mup-shadow-s); }

/* Sections */
.mup-abschnitt{ padding-block: clamp(3rem, 2rem + 3vw, 4.75rem) 0; }
.mup-abschnitt:last-child{ padding-bottom: clamp(3.25rem, 2rem + 3vw, 5rem); }

/* Calculator band */
.mup-abschnitt--rechner{
  margin-top: clamp(3rem, 2rem + 3vw, 4.75rem);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  background:
    radial-gradient(36rem 20rem at 100% 0%, rgba(122,69,168,.35), rgba(122,69,168,0) 70%),
    var(--mup-ink);
  color: #fff;
  --uf-focus: #FFFFFF;
  --uf-focus-halo: rgba(16,56,64,.9);
}
.mup-abschnitt--rechner .mup-abschnitt__titel{ color: #fff; }
.mup-abschnitt--rechner .mup-abschnitt__titel::after{ background: linear-gradient(90deg, #D9CCE6 0 62%, #F2A5BC 62% 100%); }
.mup-abschnitt--rechner .mup-abschnitt__einleitung{ color: #D9CCE6; }
.mup-abschnitt--rechner .mup-abschnitt__mehr{ color: #fff; }
.mup-abschnitt--rechner .mup-abschnitt__mehr:hover{ color: #fff; }
.mup-abschnitt--rechner + .mup-abschnitt{ padding-top: clamp(3rem, 2rem + 3vw, 4.75rem); }

.mup-rechnerkarten{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mup-rechnerkarte{ margin: 0; min-width: 0; }
.mup-rechnerkarte__link{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon titel"
    "icon zeile"
    "icon aktion";
  column-gap: 1rem;
  row-gap: .25rem;
  height: 100%;
  padding: 1.25rem 1.375rem;
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
  color: var(--mup-text);
  text-decoration: none;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
  transition: box-shadow .15s ease;
}
.mup-rechnerkarte__link:hover{ box-shadow: 0 0 0 3px #D9CCE6, 0 14px 34px -14px rgba(0,0,0,.55); }
.mup-rechnerkarte__icon{
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  background: var(--mup-primary-soft);
  color: var(--mup-primary);
}
.mup-rechnerkarte__icon .mup-icon{ width: 26px; height: 26px; }
.mup-rechnerkarte__titel{
  grid-area: titel;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--mup-ink);
}
.mup-rechnerkarte__zeile{ grid-area: zeile; font-size: .9375rem; line-height: 1.5; color: var(--mup-muted); }
.mup-rechnerkarte__aktion{
  grid-area: aktion;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  font-family: var(--mup-font-head);
  font-weight: 800;
  color: var(--mup-primary);
}
.mup-rechnerkarte__aktion .mup-icon{ width: 18px; height: 18px; transition: transform .15s ease; }
.mup-rechnerkarte__link:hover .mup-rechnerkarte__aktion{ color: var(--mup-primary-dark); }
.mup-rechnerkarte__link:hover .mup-rechnerkarte__aktion .mup-icon{ transform: translateX(3px); }
@media (min-width: 600px){
  .mup-rechnerkarten{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1100px){
  .mup-rechnerkarten{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mup-rechnerkarten:has(> li:nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mup-rechnerkarte__link{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "titel"
      "zeile"
      "aktion";
    grid-template-rows: auto auto 1fr auto;
    row-gap: .375rem;
    padding: 1.5rem;
  }
  .mup-rechnerkarte__icon{ margin-bottom: .625rem; }
}

/* Kaufberatung band */
.mup-abschnitt--kaufberatung{
  margin-top: clamp(3rem, 2rem + 3vw, 4.75rem);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  background: var(--mup-bg-warm);
  border-block: 1px solid var(--mup-line);
}
.mup-abschnitt--kaufberatung + .mup-abschnitt{ padding-top: clamp(3rem, 2rem + 3vw, 4.75rem); }
.mup-abschnitt--kaufberatung .mup-chips{ margin: -.25rem 0 2rem; }

/* "So arbeiten wir" + Redaktion */
.mup-arbeitsweise{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: calc(var(--mup-radius-l) + 4px);
  background:
    radial-gradient(30rem 18rem at 100% 100%, rgba(251,231,238,.7), rgba(251,231,238,0) 70%),
    var(--mup-bg-soft);
}
.mup-arbeitsweise__text .mup-abschnitt__titel{ margin-bottom: 1.25rem; }
.mup-arbeitsweise__text > p{ max-width: 42rem; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; }
.mup-arbeitsweise__text > .mup-arbeitsweise__link{ margin: 1.75rem 0 0; }
@media (min-width: 900px){
  .mup-arbeitsweise{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  .mup-arbeitsweise--ohne-redaktion{ grid-template-columns: minmax(0, 1fr); }
}

.mup-prinzipien{
  display: grid;
  gap: .875rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.mup-prinzip{
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin: 0;
}
.mup-prinzip__icon{
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--mup-bg);
  color: var(--mup-primary);
  box-shadow: var(--mup-shadow-s);
}
.mup-prinzip__icon .mup-icon{ width: 21px; height: 21px; }
.mup-prinzip__text{ min-width: 0; padding-top: .125rem; line-height: 1.55; }
.mup-prinzip__titel{ display: block; font-family: var(--mup-font-head); font-weight: 800; color: var(--mup-ink); }
/* Points without an explanation line (the default): a compact 2 x 2 grid. */
.mup-prinzip:not(:has(.mup-prinzip__zeile)){ align-items: center; }
.mup-prinzip:not(:has(.mup-prinzip__zeile)) .mup-prinzip__text{ padding-top: 0; }
@media (min-width: 600px){
  .mup-prinzipien:not(:has(.mup-prinzip__zeile)){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1.5rem; }
}
.mup-prinzip__zeile{ color: var(--mup-text); font-size: .9688rem; }

.mup-redaktion{
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
  box-shadow: var(--mup-shadow-s);
}
.mup-redaktion__bild{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 999px;
}
.mup-redaktion__bild--marke,
.mup-profil__bild--marke{
  display: grid;
  place-items: center;
  background: var(--mup-accent-soft);
  color: var(--mup-accent);
}
.mup-redaktion__bild--marke .mup-icon{ width: 28px; height: 28px; }
.mup-redaktion__inhalt{ flex: 1 1 auto; min-width: 0; }
.mup-redaktion__label,
.uf-autor__label{
  margin: 0;
  font-family: var(--mup-font-head);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-muted);
}
.mup-redaktion__name{ margin: .25rem 0 .5rem; font-family: var(--mup-font-head); font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--mup-ink); }
.mup-redaktion__text{ margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.6; }
.mup-redaktion__link{ margin: 0; font-size: .9375rem; font-weight: 700; }
@media (max-width: 559px){
  .mup-redaktion{ flex-direction: column; gap: .75rem; }
  .mup-arbeitsweise{ padding: 1.375rem 1.125rem; }
}

/* Card grids of the start page and related posts: fixed column counts */
@media (min-width: 560px){
  .mup-abschnitt .uf-karten,
  .mup-hub__auswahl .uf-karten,
  .uf-verwandt .uf-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px){
  .mup-abschnitt .uf-karten,
  .mup-hub__auswahl .uf-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px){
  .uf-verwandt .uf-karten,
  .mup-abschnitt .uf-karten:has(> li:nth-child(8):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mup-hub__auswahl .uf-karten:has(> li:nth-child(4):last-child),
  .mup-hub__auswahl .uf-karten:has(> li:nth-child(8):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   8. Tiles (hubs, product areas) and chips
   -------------------------------------------------------------------------- */

.mup-kacheln{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mup-kachel{ margin: 0; min-width: 0; }
.mup-kachel__link{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon titel"
    "icon zeile"
    "icon zahl";
  align-content: center;
  column-gap: 1rem;
  row-gap: .125rem;
  height: 100%;
  padding: 1rem 1.125rem;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mup-kachel__link:hover{ border-color: var(--mup-ton-fg, var(--mup-primary)); box-shadow: var(--mup-shadow); }
.mup-kachel__icon{
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  background: var(--mup-ton-bg, var(--mup-primary-soft));
  color: var(--mup-ton-fg, var(--mup-primary));
}
.mup-kachel__icon .mup-icon{ width: 26px; height: 26px; }
.mup-kachel__titel{
  grid-area: titel;
  align-self: end;
  margin: 0;
  font-family: var(--mup-font-head);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--mup-ink);
}
.mup-kachel__zeile{
  grid-area: zeile;
  align-self: start;
  font-size: .9063rem;
  line-height: 1.45;
  color: var(--mup-muted);
}
.mup-kachel__zahl{
  grid-area: zahl;
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mup-ton-fg, var(--mup-primary));
}
.mup-kachel__link:hover .mup-kachel__titel{ color: var(--mup-primary-dark); }

.mup-ton--flieder{ --mup-ton-bg: var(--mup-ton-flieder); --mup-ton-fg: var(--mup-ton-flieder-fg); }
.mup-ton--rose{ --mup-ton-bg: var(--mup-ton-rose); --mup-ton-fg: var(--mup-ton-rose-fg); }
.mup-ton--himmel{ --mup-ton-bg: var(--mup-ton-himmel); --mup-ton-fg: var(--mup-ton-himmel-fg); }
.mup-ton--sonne{ --mup-ton-bg: var(--mup-ton-sonne); --mup-ton-fg: var(--mup-ton-sonne-fg); }
.mup-ton--minze{ --mup-ton-bg: var(--mup-ton-minze); --mup-ton-fg: var(--mup-ton-minze-fg); }
.mup-ton--petrol{ --mup-ton-bg: var(--mup-ton-petrol); --mup-ton-fg: var(--mup-ton-petrol-fg); }

@media (min-width: 600px){
  .mup-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px){
  .mup-kacheln--themen{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .mup-kacheln--themen .mup-kachel__link{ padding: 1.375rem 1.5rem; column-gap: 1.125rem; }
  .mup-kacheln--themen .mup-kachel__icon{ width: 3.75rem; height: 3.75rem; border-radius: 18px; }
  .mup-kacheln--themen .mup-kachel__icon .mup-icon{ width: 30px; height: 30px; }
  .mup-kacheln--themen .mup-kachel__titel{ font-size: 1.25rem; }
  .mup-kacheln--bereiche{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .mup-kacheln--kompakt{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  /* Four product areas per row: icon on top, so long titles get the full width. */
  .mup-kacheln--bereiche{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mup-kacheln--bereiche .mup-kachel__link{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "icon"
      "titel"
      "zeile"
      "zahl";
    align-content: start;
    row-gap: .375rem;
    padding: 1.375rem 1.375rem 1.25rem;
  }
  .mup-kacheln--bereiche .mup-kachel__icon{ align-self: start; margin-bottom: .5rem; }
  .mup-kacheln--kompakt{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Compact tiles (other hubs): icon and title only */
.mup-kacheln--kompakt .mup-kachel__link{ grid-template-areas: "icon titel"; padding: .75rem 1rem; }
.mup-kacheln--kompakt .mup-kachel__titel{ align-self: center; font-size: 1rem; }
.mup-kacheln--kompakt .mup-kachel__icon{ width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.mup-kacheln--kompakt .mup-kachel__icon .mup-icon{ width: 21px; height: 21px; }

/* Chips */
.mup-chips{ margin: 1.5rem 0 0; }
.mup-chips__liste{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mup-chips__liste li{ margin: 0; max-width: 100%; }
.mup-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  min-height: 44px;
  padding: .4375rem 1rem .4375rem .8125rem;
  border: 1px solid var(--mup-line);
  border-radius: 999px;
  background: var(--mup-bg);
  color: var(--mup-ink);
  font-family: var(--mup-font-head);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mup-chip .mup-icon{ width: 19px; height: 19px; color: var(--mup-primary); }
/* Narrow: one swipeable row instead of seven stacked chips. The row may scroll, the
   page may not (the bleed equals the 16px gutter of .uf-wrap). Every chip is a link,
   so keyboard focus scrolls the row as well. */
@media (max-width: 599px){
  .mup-chips__liste{
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--uf-pad-x-sm));
    padding: .25rem var(--uf-pad-x-sm) .5rem;
    scroll-padding-inline: var(--uf-pad-x-sm);
    scrollbar-width: none;
  }
  .mup-chips__liste::-webkit-scrollbar{ display: none; }
  .mup-chips__liste li{ flex: 0 0 auto; max-width: none; }
  .mup-chip{ max-width: none; white-space: nowrap; }
}
.mup-chip:hover{ border-color: var(--mup-primary); color: var(--mup-primary-dark); }
.mup-chip.is-aktiv{ border-color: var(--mup-primary-soft); background: var(--mup-primary-soft); color: var(--mup-primary-dark); }

/* --------------------------------------------------------------------------
   9. Cards (magazine module: .uf-karten > .uf-karte > a.uf-karte__link)
   -------------------------------------------------------------------------- */

.uf-karten{ gap: 1.5rem; margin: 0; }
.uf-karte{ padding: 0; }
.uf-karte__link{
  gap: .375rem;
  border-color: var(--mup-line);
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
}
.uf-karte__link:hover,
.uf-karte__link:focus-visible{
  border-color: #D9CCE6;
  box-shadow: var(--mup-shadow);
}
.uf-karte__bild{ background: var(--mup-bg-soft); }
/* Post without any picture: a quiet lilac area with the heart of the brand, so the
   grid stays even and the card does not look broken. */
.uf-karte__bild--leer{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D9CCE6' d='M12 20s-7.5-4.6-7.5-10.2A4.1 4.1 0 0 1 12 7.4a4.1 4.1 0 0 1 7.5 2.4C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / 3.25rem no-repeat,
    radial-gradient(60% 80% at 80% 20%, rgba(251,231,238,.9), rgba(251,231,238,0) 70%),
    linear-gradient(135deg, var(--mup-bg-soft) 0%, var(--mup-primary-soft) 100%);
}
.uf-karte__datum{
  display: block;
  margin: .875rem 1.25rem 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--mup-muted);
}
.uf-karte__titel{
  margin: .75rem 1.25rem 0;
  font-family: var(--mup-font-head);
  font-size: 1.125rem;
  text-wrap: pretty;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--mup-ink);
}
.uf-karte__datum + .uf-karte__titel{ margin-top: .125rem; }
.uf-karte__titel:last-child{ margin-bottom: 1.25rem; }
.uf-karte__link:hover .uf-karte__titel{ color: var(--mup-primary-dark); text-decoration: none; }
.uf-karte__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 1.25rem 1.375rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--mup-muted);
}

/* Narrow: compact rows - picture left, text right. Picture positioned absolutely,
   text in normal flow: the card is as high as the larger of both (a grid with a 1fr
   row left dead space on wasbasteln, round 1). */
@media (max-width: 559px){
  .uf-karten{ gap: .75rem; }
  .uf-karte__link{
    display: block;
    position: relative;
    min-height: calc(4.75rem + 1.25rem + 2px);
    padding: .625rem .875rem .625rem calc(7rem + 1.5rem);
    border-radius: var(--mup-radius);
  }
  .uf-karte__bild{
    position: absolute;
    left: .625rem;
    top: .625rem;
    width: 7rem;
    height: 4.75rem;
    aspect-ratio: auto;
    border-radius: 10px;
  }
  .uf-karte__datum,
  .uf-karte__titel,
  .uf-karte__text{ margin: 0; }
  .uf-karte__titel{ font-size: 1rem; }
  .uf-karte__titel:last-child{ margin-bottom: 0; }
  .uf-karte__datum + .uf-karte__titel{ margin-top: .125rem; }
  .uf-karte__titel + .uf-karte__text{ margin-top: .25rem; }
  .uf-karte__text{ -webkit-line-clamp: 2; font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   10. Article (post, Kaufberatung) and page
   -------------------------------------------------------------------------- */

.mup-beitrag__titel,
.mup-seite__titel{
  margin: .25rem 0 1rem;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.mup-seite__titel{ margin-bottom: 0; }

.mup-beitragsbild{
  position: relative;
  margin: calc(-1 * clamp(3.5rem, 2rem + 6.5vw, 7.25rem)) 0 2.25rem;
}
/* One calm format for every featured image (old uploads are 4:3, 16:9, 5:3 ...):
   16:9, cropped centrally - the width/height attributes still reserve the space. */
.mup-beitragsbild__bild{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg-soft);
  box-shadow: var(--mup-shadow);
}

/* Transparency note in the head band of a Kaufberatung */
.mup-transparenz{
  display: inline-flex;
  align-items: flex-start;
  gap: .5rem;
  max-width: 100%;
  margin: .25rem 0 0;
  padding: .5rem .875rem .5rem .75rem;
  border: 1px solid var(--mup-line);
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--mup-text);
}
.mup-transparenz .mup-icon{ width: 19px; height: 19px; margin-top: .0625rem; color: var(--mup-ok); }
.mup-transparenz a{ color: var(--mup-primary-dark); font-weight: 700; }

.mup-beitrag__inhalt,
.mup-seite__inhalt{
  font-size: var(--mup-fs-beitrag);
  line-height: var(--mup-lh-beitrag);
  overflow-wrap: break-word;
}

/* Prose rules sit in :where() - specificity of a bare element selector. Every
   component with its own class (TOC list, feature list, product cards, FAQ)
   therefore wins without further overrides. */
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) > p{ margin: 0 0 1.25em; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) :is(h2, h3, h4, h5, h6){ color: var(--mup-ink); }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) h2{
  margin: 3rem 0 1rem;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
}
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) h3{ margin: 2.25rem 0 .75rem; font-size: 1.3125rem; line-height: 1.3; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) h4{ margin: 1.875rem 0 .5rem; font-size: 1.125rem; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) :is(h5, h6){ margin: 1.5rem 0 .375rem; font-size: 1.0625rem; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) > :first-child{ margin-top: 0; }

:where(.mup-beitrag__inhalt, .mup-seite__inhalt) :is(ul, ol){ margin: 0 0 1.35em; padding-left: 1.4em; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) li{ margin: 0 0 .45em; padding-left: .2em; }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) ul > li::marker{ color: var(--mup-primary); }
:where(.mup-beitrag__inhalt, .mup-seite__inhalt) ol > li::marker{ color: var(--mup-primary-dark); font-weight: 700; }

:where(.mup-beitrag__inhalt, .mup-seite__inhalt) a{ text-decoration-thickness: 1px; }
:where(.mup-beitrag__inhalt) strong{ color: var(--mup-ink); }

:where(.mup-beitrag__inhalt, .mup-seite__inhalt) blockquote{
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 4px solid var(--mup-primary-soft);
  color: var(--mup-text);
  font-size: 1.1875rem;
  font-style: italic;
}
:where(.mup-beitrag__inhalt) hr{
  width: 5rem;
  height: 4px;
  margin: 2.75rem auto;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mup-primary) 0 62%, var(--mup-accent) 62% 100%);
}

:where(.mup-beitrag__inhalt) img{ border-radius: 12px; }
:where(.mup-beitrag__inhalt) :is(figure, .wp-caption){ max-width: 100%; margin: 2rem 0; }
:where(.mup-beitrag__inhalt) :is(figcaption, .wp-caption-text){
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--mup-muted);
}
:where(.mup-beitrag__inhalt) .alignright{ float: right; margin: .35rem 0 1.25rem 1.75rem; }
:where(.mup-beitrag__inhalt) .alignleft{ float: left; margin: .35rem 1.75rem 1.25rem 0; }
:where(.mup-beitrag__inhalt) .aligncenter{ margin-inline: auto; }

/* Wide elements: up to 1000px from a viewport where the room is guaranteed.
   1080px - 17px scrollbar - 2 x 24px padding = 1015px >= 1000px. */
@media (min-width: 1080px){
  .mup-beitrag__inhalt > .uf-produkte,
  .mup-beitrag__inhalt > .uf-tabelle-rolle:has(tr > :nth-child(3)),
  .mup-beitrag__inhalt > .mup-beitraege,
  .mup-beitrag__inhalt > .alignwide,
  .mup-beitrag__inhalt > .alignfull,
  .mup-beitrag .uf-verwandt{
    margin-inline: calc((var(--mup-textw) - var(--mup-widew)) / 2);
  }
}

/* Old floated pictures: centred on narrow screens instead of squeezing the text */
@media (max-width: 559px){
  :where(.mup-beitrag__inhalt) :is(.alignright, .alignleft){ float: none; margin: 1.5rem auto; }
}

.uf-seitenteile{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 2rem 0 0;
  font-weight: 700;
}

/* Breadcrumb and meta line */
.uf-krume{
  margin: 0 0 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--mup-muted);
}
.uf-krume a{ color: var(--mup-muted); text-decoration: none; }
.uf-krume a:hover{ color: var(--mup-primary-dark); text-decoration: underline; }
.uf-krume-liste{ gap: .375rem .5rem; }
.uf-krume-teil{ gap: .5rem; }
.uf-krume-trenner{ color: var(--mup-line-ui); }
.uf-krume [aria-current],
.uf-krume .breadcrumb_last{ color: var(--mup-text); }

.uf-meta{ gap: .375rem .625rem; margin: 0 0 .75rem; font-size: .9375rem; color: var(--mup-muted); }
.uf-meta__link{ color: var(--mup-text); font-weight: 700; text-decoration: none; }
.uf-meta__link:hover{ color: var(--mup-primary-dark); text-decoration: underline; }
.uf-meta__trenner{ color: var(--mup-line-ui); }

/* --------------------------------------------------------------------------
   11. Tables of the content (scroll wrapper from inc/kompat.php)
   -------------------------------------------------------------------------- */

.uf-tabelle-rolle{
  margin: 2rem 0;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius);
  background: var(--mup-bg);
}
.uf-tabelle-rolle > table{ margin: 0; font-size: 1rem; line-height: 1.5; }
/* Three or more columns keep a readable minimum width and scroll inside the
   wrapper instead of breaking every cell into single words. */
.uf-tabelle-rolle > table:has(tr > :nth-child(3)){ min-width: 34rem; }
.uf-tabelle-rolle th,
.uf-tabelle-rolle td{ padding: .75rem 1rem; border-bottom: 1px solid var(--mup-line); }
.uf-tabelle-rolle tr:last-child > td{ border-bottom: 0; }
.uf-tabelle-rolle thead th,
.uf-tabelle-rolle tr:first-child > th{
  background: var(--mup-bg-soft);
  font-family: var(--mup-font-head);
  font-weight: 800;
  color: var(--mup-ink);
}
.uf-tabelle-rolle tbody tr:nth-child(even) > td{ background: var(--mup-bg-warm); }
.uf-tabelle-rolle td > strong:only-child{ color: var(--mup-ink); }
.uf-tabelle-rolle img{ display: inline-block; max-height: 8rem; width: auto; border-radius: 6px; }
.uf-tabelle-rolle.ist-scrollbar{ box-shadow: inset -14px 0 14px -14px rgba(16,56,64,.3); }

/* --------------------------------------------------------------------------
   12. Table of contents
   -------------------------------------------------------------------------- */

.uf-toc{ margin: 2rem 0 2.5rem; font-size: 1rem; line-height: 1.5; }
.uf-toc__details{
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg-soft);
}
.uf-toc__details > summary{
  justify-content: flex-start;
  min-height: 56px;
  padding: .875rem 1.375rem;
  border-radius: var(--mup-radius-l);
  font-family: var(--mup-font-head);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mup-ink);
}
.uf-toc__details > summary::before{
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--mup-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='4.5' cy='6.5' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='17.5' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='4.5' cy='6.5' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='17.5' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uf-toc__details > summary::after{ margin-left: auto; color: var(--mup-primary); }
.uf-toc__details > summary:hover{ color: var(--mup-primary-dark); }
.uf-toc__liste{ padding: 0 1.375rem 1.25rem 3rem; }
.uf-toc__eintrag{ margin: 0 0 .5rem; padding-left: .25rem; }
.uf-toc__eintrag::marker{ color: var(--mup-primary); font-weight: 800; }
.uf-toc__link{ color: var(--mup-ink); text-decoration: none; }
.uf-toc__link:hover,
.uf-toc__link:focus-visible{ color: var(--mup-primary-dark); text-decoration: underline; }
@media (min-width: 720px){
  .uf-toc__liste:has(> li:nth-child(7)){ columns: 2; column-gap: 2.5rem; }
  .uf-toc__liste:has(> li:nth-child(7)) > li{ break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   13. Notes [uf_hinweis typ="tipp|info|achtung"] and pro/contra
   Accent as an inset shadow (follows the radius), icon as a CSS mask in the
   accent colour - no generated text, so the aria-label is not read twice.
   -------------------------------------------------------------------------- */

.uf-hinweis{
  --mup-hinweis: var(--mup-ink);
  --mup-hinweis-bg: var(--mup-petrol-soft);
  --mup-hinweis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  position: relative;
  margin: 2rem 0;
  padding: 1.125rem 1.375rem 1.125rem 3.5rem;
  border: 0;
  border-radius: 4px var(--mup-radius) var(--mup-radius) 4px;
  background: var(--mup-hinweis-bg);
  box-shadow: inset 4px 0 0 var(--mup-hinweis);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.uf-hinweis::before{
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--mup-hinweis);
  -webkit-mask: var(--mup-hinweis-icon) center / contain no-repeat;
  mask: var(--mup-hinweis-icon) center / contain no-repeat;
}
.uf-hinweis--tipp{
  --mup-hinweis: var(--mup-primary);
  --mup-hinweis-bg: var(--mup-bg-soft);
  --mup-hinweis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1V16h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.uf-hinweis--achtung{
  --mup-hinweis: var(--mup-warn);
  --mup-hinweis-bg: var(--mup-warn-soft);
  --mup-hinweis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 2.8 19.8h18.4z'/%3E%3Cpath d='M12 10v4.4M12 17.2v.1'/%3E%3C/svg%3E");
}
.uf-hinweis > p{ margin: 0 0 .75em; }
.uf-hinweis > .uf-hinweis__titel{ margin: 0 0 .125rem; font-family: var(--mup-font-head); font-size: 1.0625rem; font-weight: 800; color: var(--mup-ink); }
.uf-hinweis > :last-child{ margin-bottom: 0; }
.uf-hinweis--achtung > .uf-hinweis__titel{ color: var(--mup-warn-text); }

/* Pro / contra - migration target of the old "Was uns gefällt / nicht gefällt"
   columns: <div class="uf-raster uf-raster--2"><aside class="uf-hinweis
   uf-hinweis--pro">…</aside><aside class="uf-hinweis uf-hinweis--contra">…</aside> */
.uf-hinweis--pro,
.uf-hinweis--contra{
  padding: 1.25rem 1.375rem 1.25rem 1.375rem;
  border-radius: var(--mup-radius);
  box-shadow: inset 0 4px 0 var(--mup-hinweis);
  font-size: 1rem;
  line-height: 1.6;
}
.uf-hinweis--pro{
  --mup-hinweis: var(--mup-ok);
  --mup-hinweis-bg: var(--mup-ok-soft);
  --mup-hinweis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.uf-hinweis--contra{
  --mup-hinweis: var(--mup-warn);
  --mup-hinweis-bg: var(--mup-warn-soft);
  --mup-hinweis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.uf-hinweis--pro::before,
.uf-hinweis--contra::before{ display: none; }
/* Heading of the column: the first bold line ("Was uns gefällt:") */
.uf-hinweis--pro > :first-child:not(ul, ol),
.uf-hinweis--contra > :first-child:not(ul, ol){
  margin: 0 0 .625rem;
  font-family: var(--mup-font-head);
  font-size: 1.0625rem;
  font-weight: 800;
}
.uf-hinweis--pro > :first-child:not(ul, ol),
.uf-hinweis--pro > :first-child:not(ul, ol) strong{ color: var(--mup-ok-text); }
.uf-hinweis--contra > :first-child:not(ul, ol),
.uf-hinweis--contra > :first-child:not(ul, ol) strong{ color: var(--mup-warn-text); }
.uf-hinweis--pro ul,
.uf-hinweis--contra ul{ list-style: none; margin: 0; padding: 0; }
.uf-hinweis--pro li,
.uf-hinweis--contra li{ position: relative; margin: 0 0 .375rem; padding-left: 1.75rem; }
.uf-hinweis--pro li::before,
.uf-hinweis--contra li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  background-color: var(--mup-hinweis);
  -webkit-mask: var(--mup-hinweis-icon) center / contain no-repeat;
  mask: var(--mup-hinweis-icon) center / contain no-repeat;
}
.uf-hinweis--pro > p:not(:first-child),
.uf-hinweis--contra > p:not(:first-child){ color: var(--mup-text); }

/* --------------------------------------------------------------------------
   14. Buttons [uf_button], product CTAs, "Anzeige", affiliate notice
   Petrol for everything that is not a purchase. Raspberry ONLY for buy links -
   recognised by rel="sponsored", which every affiliate button carries.
   -------------------------------------------------------------------------- */

.uf-button{
  gap: .5rem;
  min-height: 48px;
  padding: .625rem 1.375rem;
  border-radius: 12px;
  font-family: var(--mup-font-head);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}
.uf-button--primaer{ background: var(--mup-ink); color: #fff; }
.uf-button--primaer:hover,
.uf-button--primaer:focus-visible{ background: var(--mup-petrol-deep); color: #fff; }

/* Buy button: white on #C2345F 5.32:1 (AA for normal text) */
.uf-button--primaer[rel~="sponsored"]{
  background: var(--mup-cta);
  color: #fff;
  font-size: 1.0625rem;
  padding: .625rem 1.5rem;
  box-shadow: 0 6px 16px -10px rgba(194,52,95,.8);
}
.uf-button--primaer[rel~="sponsored"]:hover,
.uf-button--primaer[rel~="sponsored"]:focus-visible{ background: var(--mup-cta-dark); color: #fff; }

/* A second shop in the same CTA bar steps back: outline instead of a second filled
   button. #A32A50 on white 6.99:1; border #C2345F 5.32:1 (non-text >= 3:1). */
.uf-produkt__cta .uf-button--primaer[rel~="sponsored"] ~ .uf-button--primaer[rel~="sponsored"]{
  background: var(--mup-bg);
  color: var(--mup-cta-dark);
  border-color: var(--mup-cta);
  box-shadow: none;
}
.uf-produkt__cta .uf-button--primaer[rel~="sponsored"] ~ .uf-button--primaer[rel~="sponsored"]:hover,
.uf-produkt__cta .uf-button--primaer[rel~="sponsored"] ~ .uf-button--primaer[rel~="sponsored"]:focus-visible{
  background: var(--mup-accent-soft);
  color: var(--mup-cta-dark);
  border-color: var(--mup-cta-dark);
}
.uf-button[target="_blank"]::after{
  content: "";
  flex: 0 0 auto;
  width: .8em;
  height: .8em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.uf-button--sekundaer{
  background: var(--mup-bg);
  color: var(--mup-primary-dark);
  border-color: var(--mup-primary);
}
.uf-button--sekundaer:hover,
.uf-button--sekundaer:focus-visible{
  background: var(--mup-primary-soft);
  color: var(--mup-primary-dark);
  border-color: var(--mup-primary-dark);
}

.uf-button-zeile{ gap: .625rem 1rem; margin: 1.5rem 0; }

.uf-anzeige{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mup-muted);
}

.uf-affiliate-hinweis{
  margin: 3rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--mup-radius);
  background: var(--mup-bg-warm);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--mup-muted);
}

/* --------------------------------------------------------------------------
   15. Video facade [uf_video]
   -------------------------------------------------------------------------- */

.uf-video{ margin: 2.25rem 0; }
.uf-video__rahmen{
  border-radius: var(--mup-radius-l);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(152,88,192,.45), rgba(152,88,192,0) 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(194,52,95,.25), rgba(194,52,95,0) 60%),
    var(--mup-ink);
}
.uf-video__rahmen:not(:has(.uf-video__bild)) .uf-video__start{ background: transparent; text-shadow: none; }
.uf-video__rahmen:not(:has(.uf-video__bild)) .uf-video__start:hover{ background: rgba(0,0,0,.12); }
.uf-video__icon{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.uf-video__icon::before{
  margin-left: .3rem;
  border-width: .7rem 0 .7rem 1.15rem;
  border-color: transparent transparent transparent var(--mup-primary);
}
.uf-video__aktion{ font-family: var(--mup-font-head); font-size: 1.125rem; font-weight: 800; }
.uf-video__titel{ font-size: .9375rem; }
.uf-video__hinweis{ margin-top: .625rem; font-size: .8125rem; color: var(--mup-muted); }

/* --------------------------------------------------------------------------
   16. FAQ <section class="uf-faq"> <details class="uf-faq__eintrag">
       and the plain <details> of the shortcode migration
   -------------------------------------------------------------------------- */

.uf-faq{ margin: 3.5rem 0 2.5rem; }
.uf-faq > h2{ margin-bottom: 1.25rem; }
.uf-faq__eintrag,
.uf-faq__eintrag:first-of-type{
  margin: 0 0 .75rem;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius);
  background: var(--mup-bg);
}
.uf-faq__eintrag[open]{ border-color: #D9CCE6; box-shadow: var(--mup-shadow-s); }
.uf-faq__eintrag > summary{
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--mup-radius);
  font-family: var(--mup-font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--mup-ink);
}
.uf-faq__eintrag > summary:hover{ color: var(--mup-primary-dark); }
.uf-faq__eintrag > summary::after{ color: var(--mup-primary); margin-top: .3rem; }
.uf-faq__antwort{
  padding: 0 1.25rem 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.mup-aufklapper,
.mup-beitrag__inhalt details:not([class]),
.mup-seite__inhalt details:not([class]){
  margin: 1.5rem 0;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius);
}
.mup-aufklapper > summary,
.mup-beitrag__inhalt details:not([class]) > summary,
.mup-seite__inhalt details:not([class]) > summary{
  min-height: var(--uf-touch);
  padding: .75rem 1.25rem;
  font-family: var(--mup-font-head);
  font-weight: 800;
  color: var(--mup-ink);
  cursor: pointer;
}
.mup-aufklapper__inhalt,
.mup-beitrag__inhalt details:not([class]) > :not(summary){ padding: 0 1.25rem; }
.mup-aufklapper__inhalt{ padding-bottom: 1rem; }

/* --------------------------------------------------------------------------
   17. Author box and related posts
   -------------------------------------------------------------------------- */

.uf-autor{
  gap: 1.25rem;
  margin: 3.25rem 0 0;
  padding: 1.5rem 1.625rem;
  border: 0;
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg-warm);
  font-size: 1rem;
  line-height: 1.6;
}
.uf-autor__bild{ border-radius: 999px; }
/* Without a profile picture: the brand heart instead of an empty gap - never a
   Gravatar request. Decoration only (generated content without text). */
.uf-autor:not(:has(.uf-autor__bild))::before{
  content: "";
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2345F' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.1 4.1 0 0 1 12 7.4a4.1 4.1 0 0 1 7.5 2.4C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / 1.625rem no-repeat,
    var(--mup-accent-soft);
}
.uf-autor__name{ margin: .25rem 0 .5rem; font-family: var(--mup-font-head); font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--mup-ink); }
.uf-autor__text{ margin: 0 0 .75rem; font-size: 1rem; }
.uf-autor__mehr{ font-weight: 700; }

.uf-verwandt{
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--mup-line);
}
.uf-verwandt__titel{ margin: 0 0 1.5rem; font-size: clamp(1.375rem, 1.25rem + .5vw, 1.75rem); }

/* --------------------------------------------------------------------------
   18. Product box [uf_produkt] (markup from inc/produkte.php) - no prices
   -------------------------------------------------------------------------- */

.uf-produkt{
  position: relative;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
  box-shadow: var(--mup-shadow-s);
  font-size: 1rem;
  line-height: 1.55;
}
.uf-produkt__label{
  position: absolute;
  top: 0;
  left: 1.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .875rem;
  border-radius: 999px;
  background: var(--mup-accent);
  color: #fff;
  font-family: var(--mup-font-head);
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.uf-produkt__label::before{
  content: "";
  width: .875rem;
  height: .875rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.4A4.6 4.6 0 0 1 12 6.9a4.6 4.6 0 0 1 8.5 2.7C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.4A4.6 4.6 0 0 1 12 6.9a4.6 4.6 0 0 1 8.5 2.7C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uf-produkt:has(> .uf-produkt__label){ padding-top: 2rem; border-color: #F2C3D2; }

.uf-produkt__bild{
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto 1.25rem;
  border-radius: 0;
  background: var(--mup-bg);
}
.uf-produkt__name{
  margin: 0 0 .875rem;
  font-family: var(--mup-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--mup-ink);
}
.uf-produkt__marke{
  display: block;
  margin-bottom: .125rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-accent);
}
.uf-produkt__merkmale{ list-style: none; margin: 0 0 1.25rem; padding: 0; }
.uf-produkt__merkmale li{
  position: relative;
  margin: 0 0 .5rem;
  padding-left: 1.75rem;
}
.uf-produkt__merkmale li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A45A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-8'/%3E%3C/svg%3E") center / 80% no-repeat,
    var(--mup-primary-soft);
}
.uf-produkt__ersatz{
  margin: -.25rem 0 1rem;
  font-size: .875rem;
  font-style: italic;
  color: var(--mup-muted);
}
.uf-produkt__cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem 1rem;
}

/* Box: picture left from 560px. The last row takes the spare height. */
@media (min-width: 560px){
  .uf-produkt--box{
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.75rem;
    align-items: start;
  }
  .uf-produkt--box > *{ grid-column: 2; }
  .uf-produkt--box > .uf-produkt__label{ grid-column: auto; }
  .uf-produkt--box > .uf-produkt__bild{
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--mup-line);
    border-radius: var(--mup-radius);
  }
  .uf-produkt--box:not(:has(> .uf-produkt__bild)){ grid-template-columns: minmax(0, 1fr); }
  .uf-produkt--box:not(:has(> .uf-produkt__bild)) > *{ grid-column: 1; }
}

/* Compact (single, not in a card list): small picture left from 480px */
.uf-produkt--kompakt{ padding: 1.25rem; }
.uf-produkt--kompakt .uf-produkt__name{ font-size: 1.125rem; }
.uf-produkt--kompakt .uf-produkt__bild{ max-width: 7rem; }
@media (min-width: 480px){
  .uf-produkt--kompakt:not(.uf-produkt--karte){
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }
  .uf-produkt--kompakt:not(.uf-produkt--karte) > *{ grid-column: 2; }
  .uf-produkt--kompakt:not(.uf-produkt--karte) > .uf-produkt__label{ grid-column: auto; }
  .uf-produkt--kompakt:not(.uf-produkt--karte) > .uf-produkt__bild{
    grid-column: 1;
    grid-row: 1 / span 4;
    margin: 0;
  }
}

/* Product cards [uf_produkte layout="karten"] */
.uf-produkte{ margin: 2.5rem 0; }
.uf-produkte__titel{
  margin: 0 0 1.25rem;
  font-family: var(--mup-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--mup-ink);
}
.uf-produktkarten{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
  gap: 1.25rem;
}
.uf-produktkarten__eintrag{ display: flex; margin: 0; min-width: 0; padding: 0; }
.uf-produkt--karte{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 1.25rem;
}
.uf-produkt--karte .uf-produkt__bild{ max-width: 9.5rem; margin: 0 auto 1rem; }
.uf-produkt--karte .uf-produkt__name{ font-size: 1.0625rem; }
.uf-produkt--karte .uf-produkt__merkmale{ font-size: .9375rem; }
.uf-produkt--karte .uf-produkt__cta{ margin-top: auto; }
.uf-produkt--karte .uf-button--primaer[rel~="sponsored"]{ flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   19. Comparison table [uf_produkte layout="tabelle"]
   Wide: a real table. Below 640px: every row a card, cells labelled by
   data-label (the head row stays for screen readers, visually hidden).
   -------------------------------------------------------------------------- */

.uf-produkte--tabelle{ overflow-x: auto; }
.uf-vergleich{
  width: 100%;
  margin: 0;
  border: 1px solid var(--mup-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--mup-radius-l);
  background: var(--mup-bg);
  font-size: 1rem;
  line-height: 1.5;
}
.uf-vergleich__titel{
  caption-side: top;
  padding: 0 0 1rem;
  text-align: left;
  font-family: var(--mup-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--mup-ink);
}
.uf-vergleich th,
.uf-vergleich td{ border-bottom: 1px solid var(--mup-line); }
.uf-vergleich thead th{
  padding: .75rem 1.25rem;
  background: var(--mup-bg-soft);
  font-family: var(--mup-font-head);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-text);
}
.uf-vergleich thead th:first-child{ border-top-left-radius: calc(var(--mup-radius-l) - 1px); }
.uf-vergleich thead th:last-child{ border-top-right-radius: calc(var(--mup-radius-l) - 1px); }
.uf-vergleich td{ padding: 1.125rem 1.25rem; vertical-align: middle; }
.uf-vergleich tbody tr:nth-child(even) > td{ background: #FDFBF8; }
.uf-vergleich tbody tr:last-child td{ border-bottom: 0; }
.uf-vergleich tbody tr:last-child td:first-child{ border-bottom-left-radius: calc(var(--mup-radius-l) - 1px); }
.uf-vergleich tbody tr:last-child td:last-child{ border-bottom-right-radius: calc(var(--mup-radius-l) - 1px); }
.uf-vergleich__produkt{ width: 38%; }
.uf-vergleich__produkt::after{ content: ""; display: table; clear: both; }
.uf-vergleich__produkt .uf-produkt__bild{
  float: left;
  width: 4.5rem;
  height: 4.5rem;
  max-width: none;
  margin: 0 1rem 0 0;
  background: transparent;
}
.uf-vergleich__produkt .uf-produkt__name{ margin: 0; font-size: 1.0625rem; }
.uf-vergleich__produkt .uf-produkt__ersatz{ margin: .375rem 0 0; }
.uf-vergleich__merkmale .uf-produkt__merkmale{ margin: 0; font-size: .9375rem; }
.uf-vergleich__merkmale .uf-produkt__merkmale li{ margin-bottom: .25rem; }
.uf-vergleich__cta{ width: 1%; }
.uf-vergleich__cta .uf-produkt__cta{
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: .375rem;
}
.uf-vergleich__cta .uf-button{ white-space: nowrap; }

@media (max-width: 639px){
  .uf-produkte--tabelle{ overflow-x: visible; }
  .uf-vergleich,
  .uf-vergleich tbody,
  .uf-vergleich tr,
  .uf-vergleich td{ display: block; width: auto; }
  .uf-vergleich{ border: 0; border-radius: 0; background: transparent; }
  .uf-vergleich__titel{ display: block; }
  .uf-vergleich thead{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .uf-vergleich__zeile{
    margin: 0 0 1rem;
    padding: 1.125rem;
    border: 1px solid var(--mup-line);
    border-radius: var(--mup-radius);
    background: var(--mup-bg);
  }
  .uf-vergleich tbody tr:nth-child(even) > td{ background: transparent; }
  .uf-vergleich td,
  .uf-vergleich tbody tr:last-child td{ padding: 0; border: 0; border-radius: 0; }
  .uf-vergleich td + td{ margin-top: .875rem; }
  .uf-vergleich td[data-label]::before{
    content: attr(data-label);
    display: block;
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mup-muted);
  }
  .uf-vergleich td.uf-vergleich__produkt::before{ display: none; }
  .uf-vergleich__cta .uf-produkt__cta{ flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .uf-vergleich__cta .uf-button{ white-space: normal; }
}

/* --------------------------------------------------------------------------
   20. Layout blocks of the shortcode migration, favourites, [uf_beitraege]
   -------------------------------------------------------------------------- */

.uf-raster{ gap: 1.25rem 1.5rem; margin: 2rem 0; }
.uf-raster > .uf-hinweis{ margin: 0; }

.uf-favoriten{
  position: relative;
  margin: 2.5rem 0;
  padding: 1.5rem 1.625rem 1.375rem;
  border: 1px solid #DCCCEA;
  border-radius: var(--mup-radius-l);
  background:
    radial-gradient(26rem 12rem at 100% 0%, rgba(251,231,238,.8), rgba(251,231,238,0) 70%),
    var(--mup-bg-soft);
  box-shadow: var(--mup-shadow-s);
}
.uf-favoriten__titel{
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1rem;
  font-family: var(--mup-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mup-ink);
}
.uf-favoriten__titel::before{
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 20s-7.5-4.6-7.5-10.2A4.1 4.1 0 0 1 12 7.4a4.1 4.1 0 0 1 7.5 2.4C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / 62% no-repeat,
    var(--mup-accent);
}
.uf-favoriten > p{ margin: 0 0 .75rem; }
.uf-favoriten > :last-child{ margin-bottom: 0; }
.uf-favoriten ul,
.uf-favoriten ol{ list-style: none; margin: 0 0 .75rem; padding: 0; counter-reset: mup-fav; }
.uf-favoriten li{
  position: relative;
  margin: 0 0 .5rem;
  padding: .625rem .875rem .625rem 3rem;
  border-radius: 12px;
  background: var(--mup-bg);
  counter-increment: mup-fav;
}
.uf-favoriten li::before{
  content: counter(mup-fav);
  position: absolute;
  left: .75rem;
  top: .875rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--mup-primary-soft);
  color: var(--mup-primary-dark);
  font-family: var(--mup-font-head);
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1;
}
.uf-favoriten .uf-produkt{ margin: 1.25rem 0; }

.mup-beitraege{ margin: 2rem 0; }
@media (min-width: 560px){
  .mup-beitraege .uf-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px){
  .mup-beitraege .uf-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   21. Hub, Kaufberatung hub, author, search, 404, pagination
   -------------------------------------------------------------------------- */

.mup-hub__titel,
.mup-profil__name{
  margin: 0;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}
.mup-hub__seite{ font-weight: 600; color: var(--mup-muted); }
.mup-hub__einleitung{
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.7;
}
.mup-hub__einleitung > :last-child{ margin-bottom: 0; }
.mup-hub__kopf .mup-transparenz{ margin-top: 1.25rem; }
.mup-hub__bereiche,
.mup-hub__auswahl{ margin-bottom: 3.5rem; }

.mup-weiter{ margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--mup-line); }
.mup-weiter__titel{
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  line-height: 1.3;
}
.mup-weiter .mup-chips{ margin: 0; }

.mup-profil__innen{ display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
.mup-profil__bild{
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 999px;
  border: 4px solid var(--mup-bg);
  box-shadow: var(--mup-shadow);
}
.mup-profil__bild--marke .mup-icon{ width: 48px; height: 48px; }
.mup-profil__text{ flex: 1 1 22rem; min-width: 0; }
.mup-profil__bio{ max-width: 44rem; margin-top: .875rem; font-size: 1.0625rem; line-height: 1.7; }
.mup-profil__bio > :last-child{ margin-bottom: 0; }
.mup-profil__web{ margin: .75rem 0 0; font-weight: 700; }

.mup-suchseite__titel,
.mup-fehlerseite__titel{
  margin: 0 0 .75rem;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.12;
}
.mup-suchseite__zahl{ margin: 0 0 1.25rem; color: var(--mup-muted); }
.mup-suchseite__leer,
.mup-fehlerseite__text{ max-width: 42rem; margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.65; }
.mup-suchseite__form,
.mup-fehlerseite__form{ max-width: 35rem; }
.mup-fehlerseite__start{ margin: 1.25rem 0 0; font-weight: 700; }
.mup-themenblock{ margin-top: 3.5rem; }
.mup-themenblock:first-child{ margin-top: 0; }

.mup-blaetterung{ margin: 2.75rem 0 0; }
.mup-blaetterung .nav-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.mup-blaetterung .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .875rem;
  border: 1px solid var(--mup-line);
  border-radius: 12px;
  background: var(--mup-bg);
  color: var(--mup-ink);
  font-family: var(--mup-font-head);
  font-weight: 800;
  text-decoration: none;
}
.mup-blaetterung a.page-numbers:hover{ border-color: var(--mup-primary); color: var(--mup-primary-dark); }
.mup-blaetterung .page-numbers.current{ background: var(--mup-ink); border-color: var(--mup-ink); color: #fff; }
.mup-blaetterung .page-numbers.dots{ min-width: 0; padding: 0 .25rem; border: 0; background: none; }
/* Narrow: numbers on the first row, "Zurück" and "Weiter" together on the second. */
@media (max-width: 559px){
  .mup-blaetterung .nav-links::after{ content: ""; order: 1; flex-basis: 100%; height: 0; }
  .mup-blaetterung .prev{ order: 2; }
  .mup-blaetterung .next{ order: 3; }
}

/* --------------------------------------------------------------------------
   22. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px){
  .uf-wrap{ padding-inline: var(--uf-pad-x-sm); }
  .uf-inhalt{ padding-bottom: 3.5rem; }
  .mup-kopfband{ padding-block: 1.25rem 1.75rem; margin-bottom: 2rem; }
  .mup-kopfband--mit-bild{ margin-bottom: 0; padding-bottom: 4.5rem; }
  .mup-beitragsbild{ margin-top: -3.25rem; margin-bottom: 1.75rem; }
  .mup-beitragsbild__bild{ border-radius: var(--mup-radius); }
  .uf-produkt{ padding: 1.25rem; }
  .uf-produkt:has(> .uf-produkt__label){ padding-top: 1.875rem; }
  .uf-produkt--box .uf-produkt__bild{ max-width: 9rem; }
  .uf-produkt--karte .uf-produkt__bild{ max-width: 7.5rem; }
  .uf-hinweis{ padding: 1rem 1.125rem 1rem 3.125rem; }
  .uf-hinweis::before{ left: 1rem; top: 1.125rem; }
  .uf-hinweis--pro,
  .uf-hinweis--contra{ padding: 1.125rem; }
  .uf-autor{ padding: 1.25rem; }
  .mup-redaktion{ padding: 1.25rem; }
  .uf-faq__eintrag > summary{ padding: .875rem 1rem; }
  .uf-faq__antwort{ padding: 0 1rem 1rem; }
  .uf-favoriten{ padding: 1.25rem 1.125rem 1.125rem; }
  .mup-fuss__oben{ padding-block: 2.5rem 1.75rem; }
  .uf-button--primaer[rel~="sponsored"]{ padding-inline: 1.25rem; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print{
  .mup-kopf__schalter,
  .mup-kopf__suche,
  .mup-hero__deko,
  .mup-fuss__spalten,
  .uf-produkt__cta,
  .uf-verwandt{ display: none; }
  .mup-kopf, .mup-fuss, .mup-kopfband, .mup-hero, .mup-abschnitt--rechner{ background: none; border: 0; color: #000; }
  .mup-beitragsbild{ margin-top: 0; }
}

/* ==========================================================================
   Fine-tuning after the staging acceptance (16.10.2026)
   ========================================================================== */

/* Front page: the hero has its own search. The header search keeps its place in the grid (no
   jump of the header) but is not shown twice. Phones only have the search button anyway. */
@media (min-width: 1024px){
  .uf-start .mup-kopf__suche{ visibility: hidden; }
}

/* Lead paragraph of the trust pages (Über uns, So arbeiten wir, Redaktion, Kontakt). */
.mup-lead{
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--mup-ink);
}

/* Magazine cover in the hero (desktop, 16.10.2026). Pure HTML/CSS, the photo is a real article
   image of this site. Says "Online-Magazin": there is no printed issue. */
.mup-cover{
  position: relative;
  width: min(100%, 17.5rem);
  aspect-ratio: 3 / 4;
  margin: 1rem auto;
}
.mup-cover__blatt{
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 22px 44px rgba(16, 56, 64, .16), 0 3px 8px rgba(16, 56, 64, .10);
}
.mup-cover__blatt--hinten{
  background: var(--mup-primary-soft);
  transform: rotate(5deg) translate(.9rem, .4rem);
}
.mup-cover__blatt--vorne{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: rotate(-2.5deg);
}
.mup-cover__kopf{ padding: .8rem .9rem .55rem; background: #fff; }
.mup-cover__logo{ display: block; width: 100%; height: auto; }
.mup-cover__dach{
  margin: .3rem 0 0;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mup-primary);
}
.mup-cover__foto{ position: relative; flex: 1 1 auto; min-height: 0; background: var(--mup-petrol-soft); }
.mup-cover__bild{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mup-cover__zeilen{
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 2.75rem .9rem .8rem;
  list-style: none;
  background: linear-gradient(to top, rgba(11, 43, 49, .9), rgba(11, 43, 49, 0));
  color: #fff;
}
.mup-cover__zeile{ margin: .4rem 0 0; font-size: .75rem; line-height: 1.25; }
.mup-cover__zeile strong{ display: block; font-size: .9375rem; font-weight: 800; }
.mup-cover__stoerer{
  position: absolute;
  top: .7rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  padding: .5rem;
  border-radius: 50%;
  background: var(--mup-cta);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transform: rotate(9deg);
  box-shadow: 0 6px 14px rgba(194, 52, 95, .35);
}
.mup-cover__fuss{
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  padding: .4rem .9rem;
  background: #fff;
  font-size: .5625rem;
  font-weight: 700;
  color: var(--mup-muted);
}

/* "Entwickelt in Deutschland" (original graphic of the old site) in the footer brand block. */
.mup-fuss__siegel{ display: block; width: 7.5rem; height: auto; margin-top: 1rem; }

/* Magazine cover miniature at the right end of the header band (user 16.10.2026, like the old
   layout). From 1100 px: measured nav widths 868 px (< 1200) and 961 px (>= 1200) still fit on
   one line next to it (scripts/_mup_kopf_mass.mjs). Below that the header stays as it was. The
   cover is rendered at full size and scaled down, so text and logo stay crisp. */
.mup-kopf__cover{ display: none; }
@media (min-width: 1100px){
  .mup-kopf__band{
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "marke suche cover"
      "nav nav cover";
  }
  /* The header lies above the page band, so the cover can rest on its lower edge like a
     magazine placed on the page (second version, user 16.10.2026: the first one sat cramped
     inside the band). */
  .mup-kopf{ z-index: 10; }
  .mup-kopf__cover{
    display: block;
    grid-area: cover;
    align-self: start;
    position: relative;
    width: 7rem;
    height: 5.5rem;              /* layout box only - the cover hangs out below the band */
    margin-top: -.375rem;
    pointer-events: none;
  }
  .mup-kopf__cover .mup-cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 17.5rem;
    margin: 0;
    transform: scale(.4) rotate(3deg);
    transform-origin: 0 0;
  }
}

/* ==========================================================================
   36. Price block (uf-basis 1.3, inc/preise.php): replaces the CTA bar of a box,
   table row or card when a current price exists - otherwise the CTA bar stays.
   Amazon first, then the other merchants by price; every row is ONE link with
   merchant, price, button and its own stand (date, time, shipping).
   ========================================================================== */
.uf-preise{ display: grid; gap: .625rem; }
.uf-preise__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.uf-preise__zeile{ margin: 0; padding: 0; }
.uf-preise__link{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "h w" "i k";
  align-items: center;
  gap: .25rem .875rem;
  padding: .625rem .75rem .625rem 1rem;
  border: 1px solid var(--mup-line);
  border-radius: var(--mup-radius-s);
  background: var(--mup-bg);
  color: var(--mup-ink);
  text-decoration: none;
}
.uf-preise__link:hover,
.uf-preise__link:focus-visible{ border-color: var(--mup-cta); background: var(--mup-accent-soft); color: var(--mup-ink); }
.uf-preise__haendler{ grid-area: h; font-weight: 700; overflow-wrap: break-word; }
.uf-preise__wert{
  grid-area: w;
  justify-self: end;
  font-family: var(--mup-font-head);
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.uf-preise__zeile--ohne .uf-preise__wert{ font-family: inherit; font-size: .9375rem; font-weight: 600; color: var(--mup-muted); }
.uf-preise__info{ grid-area: i; font-size: .8125rem; line-height: 1.4; color: var(--mup-muted); }
.uf-preise__knopf{
  grid-area: k;
  justify-self: end;
  padding: .375rem .875rem;
  border-radius: 999px;
  background: var(--mup-cta);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.uf-preise__link:hover .uf-preise__knopf,
.uf-preise__link:focus-visible .uf-preise__knopf{ background: var(--mup-cta-dark); }
/* further merchants step back, as the second CTA button does: outline instead of fill */
.uf-preise__zeile + .uf-preise__zeile .uf-preise__knopf{ background: var(--mup-bg); color: var(--mup-cta-dark); box-shadow: inset 0 0 0 1.5px var(--mup-cta); }
.uf-preise__fuss{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.uf-preise__hinweis{ flex: 1 1 16rem; margin: 0; font-size: .75rem; line-height: 1.45; color: var(--mup-muted); }
/* wide boxes: merchant | price | button in one line, the stand below */
@media (min-width: 720px){
  .uf-preise--box .uf-preise__link{
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "h w k" "i i i";
  }
}
@media print{ .uf-preise{ display: none; } }

/* --------------------------------------------------------------------------
   36b. Price block v2 (uf-basis 1.3, option uf_preise_layout = v2, preview ?ufp=v2):
   ONE main button carrying the price, its stand below, further merchants as
   compact text links, notices behind "Details zum Preis". Works from the
   235px card up to the wide box without breaking words.
   -------------------------------------------------------------------------- */
.uf-preise2{ display: grid; gap: .5rem; justify-items: start; }
.uf-preise2__haupt{ max-width: 100%; white-space: normal; text-align: left; align-items: center; flex-wrap: wrap; column-gap: .375rem; }
.uf-preise2__wert{ font-size: 1.125em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uf-preise2__bei{ font-weight: 700; white-space: nowrap; }
.uf-preise2--kompakt,
.uf-preise2--tabelle{ justify-items: stretch; }
.uf-preise2--kompakt .uf-preise2__haupt,
.uf-preise2--tabelle .uf-preise2__haupt{ justify-content: center; text-align: center; padding-inline: 1rem; }
.uf-preise2__stand{ margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--mup-muted); }
.uf-preise2__titel{ margin: .375rem 0 0; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mup-muted); }
.uf-preise2__weitere{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; width: 100%; }
.uf-preise2__weitere > li{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; }
.uf-preise2__alt{ display: inline-flex; flex-wrap: wrap; gap: 0 .375rem; font-weight: 700; color: var(--mup-ink); text-decoration: underline; text-decoration-color: var(--mup-cta); text-underline-offset: .2em; }
.uf-preise2__alt:hover,
.uf-preise2__alt:focus-visible{ color: var(--mup-cta-dark); }
.uf-preise2__p{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.uf-preise2__badge{ padding: .0625rem .5rem; border-radius: 999px; background: var(--mup-ok-soft); color: var(--mup-ok-text); font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.uf-preise2__info{ flex-basis: 100%; font-size: .75rem; line-height: 1.4; color: var(--mup-muted); }
.uf-preise2__fuss{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; width: 100%; }
.uf-preise2__details{ flex: 1 1 12rem; font-size: .75rem; line-height: 1.45; color: var(--mup-muted); }
.uf-preise2__details > summary{ cursor: pointer; width: max-content; text-decoration: underline; text-underline-offset: .2em; }
.uf-preise2__details > p{ margin: .375rem 0 0; }
@media print{ .uf-preise2{ display: none; } }
/* v2 in cards and tables: block sits at the bottom like the CTA bar, one-line button without the
   arrow (it pushed "ansehen" and the arrow onto extra lines in 235px cards), one "Auch bei" line */
.uf-produkt--karte .uf-preise2{ margin-top: auto; }
.uf-preise2--kompakt .uf-preise2__haupt,
.uf-preise2--tabelle .uf-preise2__haupt{ min-height: 44px; padding: .5rem .75rem; font-size: .9375rem; }
.uf-preise2--kompakt .uf-preise2__haupt::after,
.uf-preise2--tabelle .uf-preise2__haupt::after{ display: none; }
.uf-preise2__auch{ margin: 0; font-size: .875rem; line-height: 1.45; color: var(--mup-text); }
.uf-preise2__auch .uf-preise2__info{ font-size: .75rem; color: var(--mup-muted); }
/* v2 page (body.uf-preise-v2): cards and table rows WITHOUT a current price get the same compact
   full-width button, so a card row looks the same with and without prices */
.uf-preise-v2 .uf-produkt--karte .uf-produkt__cta .uf-button,
.uf-preise-v2 .uf-vergleich__cta .uf-produkt__cta .uf-button{ flex: 1 1 100%; justify-content: center; min-height: 44px; padding: .5rem .75rem; font-size: .9375rem; }
.uf-preise-v2 .uf-produkt--karte .uf-produkt__cta .uf-button::after,
.uf-preise-v2 .uf-vergleich__cta .uf-produkt__cta .uf-button::after{ display: none; }
.uf-preise2--kompakt .uf-preise2__details > summary,
.uf-preise2--tabelle .uf-preise2__details > summary{ width: auto; }
.uf-preise2--kompakt .uf-preise2__details,
.uf-preise2--tabelle .uf-preise2__details{ flex: 0 1 auto; }