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

   Look: calm, warm, crafted - a good needlework magazine, not a price portal.
   Colours from the logo: pincushion sage/petrol, handwriting grey, linen paper.

   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).

   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 (header navigation wraps instead);
     - icons are inline SVG coloured through currentColor, never <use> + classes;
     - nothing may run out of its box: header checked at 320-1440px with the
       scrollWidth/clientWidth logic of _tr_kopf_ueberlauf.mjs.

   CONTRAST (WCAG 2.x, relative luminance, computed 26.09.2026)
     text        #394044 on white 10.55:1   on linen #F6F2EC  9.46:1
     ink         #23292B on white 14.75:1   on linen 13.23:1
     muted       #687075 on white  5.04:1   on linen  4.52:1   (AA small text)
     primary     #3E7D72 on white  4.79:1   on linen  4.30:1 !
                 -> links and small accents in primary only on WHITE; every linen
                    surface switches --uf-link to primary-dark (see section 1)
     primary-dk  #2C5F57 on white  7.29:1   on linen  6.53:1
     white on primary #3E7D72 4.79:1, on primary-dark 7.29:1, on #234C45 9.58:1
     white on cta     #C4553F 4.45:1 !      -> below 4.5 for normal text. Buy
                 buttons therefore set 1.1875rem (19px) bold = WCAG "large text"
                 (>= 14pt bold = 18.67px), where 3:1 applies. Hover #A34431 6.13:1.
     ink on badge #F0C35A 8.89:1 ("Unsere Empfehlung"); white on badge 1.66:1 - never.
     line-ui #80878B (input borders, 1.4.11 non-text >= 3:1): white 3.65:1, linen 3.27:1
     warn    #9A5B13 (note "achtung"): white 5.41:1, linen 4.85:1
     line    #E4DDD3 is decoration only (1.35:1), never the only boundary of a control.
   ========================================================================== */

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

:root{
  /* Brand (build spec section 6) */
  --wb-ink: #23292B;
  --wb-text: #394044;
  --wb-muted: #687075;
  --wb-bg: #FFFFFF;
  --wb-bg-soft: #F6F2EC;          /* linen */
  --wb-line: #E4DDD3;
  --wb-primary: #3E7D72;          /* sage/petrol: links, accents */
  --wb-primary-dark: #2C5F57;
  --wb-cta: #C4553F;              /* terracotta: buy buttons only */
  --wb-cta-dark: #A34431;
  --wb-badge: #F0C35A;            /* mustard: "Unsere Empfehlung" */
  --wb-radius: 12px;
  --wb-maxw: 1200px;
  --wb-textw: 720px;

  /* Supporting tokens (derived, contrast see header) */
  --wb-widew: 1000px;             /* wide elements inside articles */
  --wb-primary-deep: #234C45;     /* hover of petrol buttons */
  --wb-line-ui: #80878B;          /* borders of inputs */
  --wb-warn: #9A5B13;             /* note "achtung" */
  --wb-linen-deep: #EDE6DB;       /* hover on linen, placeholder pictures */
  --wb-shadow: 0 1px 2px rgba(35,41,43,.05), 0 10px 28px -12px rgba(35,41,43,.22);
  --wb-fs-beitrag: 1.125rem;      /* 18px body text in posts */
  --wb-lh-beitrag: 1.7;
  --wb-stich: linear-gradient(90deg, var(--wb-primary) 0 58%, transparent 58% 100%) 0 0 / 12px 3px repeat-x;

  /* Mapping onto uf-basis */
  --uf-ink: var(--wb-ink);
  --uf-body: var(--wb-text);
  --uf-mut: var(--wb-muted);
  --uf-bg: var(--wb-bg);
  --uf-line: var(--wb-line);
  --uf-line-ui: var(--wb-line-ui);
  --uf-link: var(--wb-primary);
  --uf-link-hover: var(--wb-primary-dark);
  --uf-link-rule: rgba(62,125,114,.5);
  --uf-focus: var(--wb-primary-dark);
  --uf-maxw: var(--wb-maxw);
  --uf-radius: var(--wb-radius);
  --uf-pad-x: 24px;
  --uf-pad-x-sm: 16px;

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

/* Linen surfaces: primary would fall to 4.30:1 - links switch to primary-dark.
   Custom properties inherit, so every link inside picks it up. */
.wb-band, .wb-hero, .wb-fuss, .uf-toc, .uf-hinweis, .uf-autor, .wb-autorin,
.wb-abschnitt--arbeitsweise, .wb-kommentare .comment-respond{
  --uf-link: var(--wb-primary-dark);
  --uf-link-hover: var(--wb-primary-deep);
  --uf-link-rule: rgba(44,95,87,.55);
}

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

body{ color: var(--wb-text); }

h1, h2, h3, h4{ letter-spacing: -.015em; }
h1{ letter-spacing: -.022em; line-height: 1.15; }

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

::selection{ background: rgba(62,125,114,.18); }

.uf-titel{ color: var(--wb-ink); }

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

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

.uf-inhalt{ min-height: 45vh; padding-block: 2rem 4.5rem; }
.uf-inhalt--start,
.uf-inhalt--hub,
.uf-inhalt--autor{ padding-top: 0; }
.uf-inhalt--start{ padding-bottom: 0; }

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

/* Linen band under the header (hub and author head) */
.wb-band{
  background: var(--wb-bg-soft);
  border-bottom: 1px solid var(--wb-line);
  padding-block: 1.75rem 2.25rem;
  margin-bottom: 2.5rem;
}

/* Section heads (start page, hub, search, 404): title with a running stitch */
.wb-abschnitt__kopf{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: 0 0 1.5rem;
}
.wb-abschnitt__titel{
  margin: 0;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--wb-ink);
}
.wb-abschnitt__titel::after,
.uf-verwandt__titel::after{
  content: "";
  display: block;
  width: 3.75rem;
  height: 3px;
  margin-top: .625rem;
  background: var(--wb-stich);
}
.wb-abschnitt__mehr{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--uf-touch);
  font-weight: 700;
  color: var(--wb-primary-dark);
  text-decoration: none;
}
.wb-abschnitt__mehr .wb-icon{ width: 18px; height: 18px; transition: transform .15s ease; }
.wb-abschnitt__mehr:hover{ color: var(--wb-primary-deep); text-decoration: underline; }
.wb-abschnitt__mehr:hover .wb-icon{ transform: translateX(2px); }

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

/* --------------------------------------------------------------------------
   4. Header
   Narrow: [logo] [search switch] [menu switch] / search panel / menu panel.
   Wide (>= 960px): [logo] ....... [search form] / navigation along the bottom
   edge, current hub marked by a bar that sits on the header's border.
   -------------------------------------------------------------------------- */

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

.wb-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: .375rem;
  padding-block: .5rem;
}

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

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

.wb-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: 10px;
  color: var(--wb-ink);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wb-kopf__knopf::-webkit-details-marker{ display: none; }
.wb-kopf__knopf::marker{ content: ""; }
.wb-kopf__knopf:hover{ background: var(--wb-bg-soft); }
.wb-kopf__schalter[open] > .wb-kopf__knopf{ background: var(--wb-bg-soft); color: var(--wb-primary-dark); }

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

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

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

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

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

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

@media (min-width: 960px){
  .wb-kopf__band{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "marke suche"
      "nav nav";
    column-gap: 2.5rem;
    padding-block: 1.25rem 0;
  }
  .wb-kopf__schalter{ display: none; }
  .wb-kopf__suche{
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 24rem;
    padding: 0;
  }
  .wb-nav{
    display: block;
    margin-top: 1rem;
    border-top: 0;
  }
  .wb-nav__liste{
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: 0;
  }
  .wb-nav__liste > li{ border-bottom: 0; }
  .wb-nav__liste a{
    min-height: 52px;
    padding: 0;
    font-size: 1rem;
  }
  .wb-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;
  }
  .wb-nav__liste a:hover::after{ background: var(--wb-line); }
  .wb-nav__liste a[aria-current]::after,
  .wb-nav__liste .current-menu-item > a::after,
  .wb-nav__liste .current-menu-ancestor > a::after,
  .wb-nav__liste .current-post-ancestor > a::after,
  .wb-nav__liste .current-category-ancestor > a::after{ background: var(--wb-primary); }
}

/* --------------------------------------------------------------------------
   5. Search form (parent searchform.php: .uf-suchform > label.uf-vh, input, button)
   flex-wrap is accessibility: below ~12rem 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;
}
/* min-width:0 is right here (an input scrolls its text, it is no bar of labels):
   without it the field's automatic minimum from size="20" (~244px at 17px) pushed
   the button onto a second line at 375px. The 11rem basis keeps the wrap for
   really narrow space (320px at 200 % zoom). */
.uf-suchform input[type="search"]{
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 48px;
  padding: .625rem 1rem;
  border: 1px solid var(--wb-line-ui);
  border-radius: 10px;
  background: var(--wb-bg);
  color: var(--wb-ink);
  font-size: 1rem;
}
.uf-suchform input[type="search"]:focus-visible{ border-color: var(--wb-primary-dark); }
.uf-suchform button{
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background: var(--wb-primary-dark);
  color: #fff;
  font-weight: 700;
}
.uf-suchform button:hover{ background: var(--wb-primary-deep); }

@media (min-width: 960px){
  .wb-kopf__suche .uf-suchform input[type="search"],
  .wb-kopf__suche .uf-suchform button{ min-height: 44px; }
  .wb-kopf__suche .uf-suchform input[type="search"]{ background: var(--wb-bg-soft); border-color: var(--wb-line-ui); }
}

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

.wb-fuss{
  background: var(--wb-bg-soft);
  border-top: 1px solid var(--wb-line);
  color: var(--wb-text);
}
.wb-fuss__spalten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem 2.5rem;
  padding-block: 3rem 2.5rem;
}
.wb-fuss__spalte{ min-width: 0; }
.wb-fuss__titel{
  margin: 0 0 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wb-muted);
}
.wb-fuss__liste{ list-style: none; margin: 0; padding: 0; }
.wb-fuss__liste li{ margin: 0; }
.wb-fuss__liste a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--wb-text);
  text-decoration: none;
}
.wb-fuss__liste a:hover{ color: var(--wb-primary-dark); text-decoration: underline; }
.wb-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(--wb-line);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--wb-muted);
}
.wb-fuss__hinweis{ flex: 1 1 32rem; max-width: 46rem; margin: 0; }
.wb-fuss__hinweis strong{ color: var(--wb-text); }
.wb-fuss__copy{ flex: 0 0 auto; margin: 0; }

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

.wb-hero{
  position: relative;
  overflow: hidden;
  background: var(--wb-bg-soft);
  border-bottom: 1px solid var(--wb-line);
}
.wb-hero__innen{
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2.75rem, 1.75rem + 5vw, 5.25rem);
}
.wb-hero__text{ min-width: 0; }

/* Pincushion drawing (inc/startseite.php) - from 960px, beside the text */
.wb-hero__bild{ display: none; }
@media (min-width: 960px){
  .wb-hero__innen{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 27vw, 22rem);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .wb-hero__bild{
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }
}
.wb-hero__titel{
  max-width: 21ch;
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.375rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--wb-ink);
}
.wb-hero__zeile{
  max-width: 38rem;
  margin: 1.25rem 0 2rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--wb-text);
}
.wb-hero__suche{ max-width: 34rem; }
.wb-hero__suche .uf-suchform input[type="search"]{
  min-height: 56px;
  padding-inline: 1.25rem;
  font-size: 1.0625rem;
  box-shadow: 0 1px 2px rgba(35,41,43,.06);
}
.wb-hero__suche .uf-suchform button{ min-height: 56px; padding: 0 1.5rem; font-size: 1.0625rem; }

/* Running stitch - decoration only (aria-hidden) */
.wb-hero__naht{
  position: absolute;
  right: -3rem;
  bottom: -1.75rem;
  width: 46%;
  max-width: 600px;
  height: auto;
  fill: none;
  stroke: var(--wb-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 11 10;
  opacity: .38;
  pointer-events: none;
}
@media (max-width: 959px){ .wb-hero__naht{ display: none; } }

.wb-abschnitt{ padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0; }
.wb-abschnitt:last-child{ padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

/* Hub tiles - narrow: compact rows; wide: pictures on top */
.wb-kacheln{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
.wb-kachel{ margin: 0; min-width: 0; }
.wb-kachel__link{
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas:
    "bild titel"
    "bild zeile";
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 1rem;
  row-gap: .125rem;
  height: 100%;
  padding: .625rem;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wb-kachel__link:hover{ border-color: var(--wb-primary); box-shadow: var(--wb-shadow); }
.wb-kachel__bild{
  grid-area: bild;
  display: block;
  width: 5.5rem;
  height: 4.25rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--wb-bg-soft);
}
.wb-kachel__bild--leer{ background: linear-gradient(135deg, var(--wb-bg-soft), var(--wb-linen-deep)); }
.wb-kachel__titel{
  grid-area: titel;
  align-self: end;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wb-ink);
}
.wb-kachel__zeile{
  grid-area: zeile;
  align-self: start;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--wb-muted);
}
.wb-kachel__link:hover .wb-kachel__titel{ color: var(--wb-primary-dark); }

@media (min-width: 600px){
  .wb-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px){
  .wb-kacheln{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .wb-kachel__link{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "bild"
      "titel"
      "zeile";
    grid-template-rows: auto auto 1fr;
    align-content: start;
    row-gap: .25rem;
    padding: 0;
    overflow: hidden;
  }
  .wb-kachel__bild{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    transition: transform .3s ease;
  }
  .wb-kachel__link:hover .wb-kachel__bild{ transform: scale(1.03); }
  .wb-kachel__titel{ padding: 1rem 1.25rem 0; font-size: 1.25rem; letter-spacing: -.01em; }
  .wb-kachel__zeile{ padding: 0 1.25rem 1.25rem; font-size: .9375rem; }
}

/* "So arbeiten wir" + author */
.wb-abschnitt--arbeitsweise .uf-wrap{ max-width: var(--wb-maxw); }
.wb-arbeitsweise{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  border-radius: calc(var(--wb-radius) + 4px);
  background: var(--wb-bg-soft);
}
.wb-arbeitsweise__text .wb-abschnitt__titel{ margin-bottom: 1.25rem; }
.wb-arbeitsweise__text p{ max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; }
.wb-arbeitsweise__link{ margin-top: 1.5rem; }
@media (min-width: 900px){
  .wb-arbeitsweise{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  .wb-arbeitsweise--ohne-autorin{ grid-template-columns: minmax(0, 1fr); }
}

.wb-autorin{
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-bg);
  --uf-link: var(--wb-primary);
}
.wb-autorin__bild{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px;
}
.wb-autorin__inhalt{ flex: 1 1 auto; min-width: 0; }
.wb-autorin__label,
.uf-autor__label{
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wb-muted);
}
.wb-autorin__name{ margin: .25rem 0 .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--wb-ink); }
.wb-autorin__text{ margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.6; }
.wb-autorin__link{ margin: 0; font-size: .9375rem; font-weight: 600; }

/* Rows of four hand-picked cards (start page) and the four related posts: fixed
   column counts - auto-fill gave 3 + 1 between 960 and 1080px. Six cards of
   "Neu und überarbeitet" run in three columns. */
@media (min-width: 560px){
  .wb-abschnitt--ratgeber .uf-karten,
  .wb-abschnitt--kaufberatung .uf-karten,
  .uf-verwandt .uf-karten,
  .wb-abschnitt--neu .uf-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px){
  .wb-abschnitt--neu .uf-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .wb-abschnitt--ratgeber .uf-karten,
  .wb-abschnitt--kaufberatung .uf-karten{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1080px){
  .uf-verwandt .uf-karten{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

.uf-karten{ gap: 1.5rem; margin: 0; }
.uf-karte__link{
  gap: .375rem;
  border-color: var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-bg);
}
.uf-karte__link:hover,
.uf-karte__link:focus-visible{
  border-color: var(--wb-primary);
  box-shadow: var(--wb-shadow);
}
.uf-karte__bild{ background: var(--wb-bg-soft); }
.uf-karte__bild--leer{ background: linear-gradient(135deg, var(--wb-bg-soft) 0%, var(--wb-linen-deep) 100%); }
.uf-karte__datum{
  display: block;
  margin: .75rem 1.125rem 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--wb-muted);
}
.uf-karte__titel{
  margin: .625rem 1.125rem 0;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--wb-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(--wb-primary-dark); text-decoration: none; }
.uf-karte__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 1.125rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--wb-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 (round 1) left ~47px of dead space in
   every card - Chrome sized the flexible row from the picture minus the first row
   only (measured: rows 20.8 / 43.4 / 47.2px). */
@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 .75rem .625rem calc(6.25rem + 1.5rem);
  }
  .uf-karte__bild{
    position: absolute;
    left: .625rem;
    top: .625rem;
    width: 6.25rem;
    height: 4.75rem;
    aspect-ratio: auto;
    border-radius: 8px;
  }
  .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; }
}

/* --------------------------------------------------------------------------
   9. Post
   -------------------------------------------------------------------------- */

.wb-beitrag__kopf{ margin-bottom: 1.75rem; }
.wb-beitrag__titel,
.wb-seite__titel{
  margin: .25rem 0 1rem;
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.wb-beitragsbild{ margin: 0 0 2.25rem; }
.wb-beitragsbild__bild{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wb-radius);
  background: var(--wb-bg-soft);
}

.wb-beitrag__inhalt,
.wb-seite__inhalt{
  font-size: var(--wb-fs-beitrag);
  line-height: var(--wb-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. Measured failure of round 1: with
   ".wb-beitrag__inhalt ol" (0,1,1) the TOC numbers turned bold petrol and the
   product-card list shifted 25px to the right. */
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) > p{ margin: 0 0 1.25em; }
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) :is(h2, h3, h4){ color: var(--wb-ink); }
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) h2{
  margin: 2.75rem 0 .875rem;
  font-size: clamp(1.4375rem, 1.25rem + .8vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -.02em;
}
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) h3{ margin: 2.25rem 0 .625rem; font-size: 1.25rem; line-height: 1.3; }
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) h4{ margin: 1.75rem 0 .5rem; font-size: 1.0625rem; }
:where(.wb-beitrag__inhalt, .wb-seite__inhalt) > :first-child{ margin-top: 0; }

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

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

:where(.wb-beitrag__inhalt, .wb-seite__inhalt) blockquote{
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--wb-primary);
  color: var(--wb-text);
  font-size: 1.1875rem;
  font-style: italic;
}
:where(.wb-beitrag__inhalt) hr{ margin: 2.5rem auto; width: 6rem; height: 3px; background: var(--wb-stich); }

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

/* Tables of the content in their scroll wrapper (functions.php) */
.uf-tabelle-rolle{
  margin: 2rem 0;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-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 (seen at 375px). */
.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(--wb-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(--wb-bg-soft); color: var(--wb-ink); }
.uf-tabelle-rolle.ist-scrollbar{ box-shadow: inset -12px 0 12px -12px rgba(35,41,43,.25); }

/* 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){
  .wb-beitrag__inhalt > .uf-produkte,
  .wb-beitrag__inhalt > .uf-raster,
  .wb-beitrag__inhalt > .uf-tabelle-rolle,
  .wb-beitrag__inhalt > .alignwide,
  .wb-beitrag__inhalt > .alignfull,
  .wb-beitrag > .uf-verwandt{
    margin-inline: calc((var(--wb-textw) - var(--wb-widew)) / 2);
  }
}

/* Old floated pictures: centred on narrow screens instead of squeezing the text */
@media (max-width: 559px){
  :where(.wb-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: 600;
}

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

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

/* --------------------------------------------------------------------------
   10. Table of contents
   -------------------------------------------------------------------------- */

.uf-toc{ margin: 2rem 0 2.5rem; font-size: 1rem; line-height: 1.5; }
.uf-toc__details{
  border: 0;
  border-radius: var(--wb-radius);
  background: var(--wb-bg-soft);
}
.uf-toc__details > summary{
  min-height: 52px;
  padding: .75rem 1.25rem;
  font-size: 1.0625rem;
  color: var(--wb-ink);
}
.uf-toc__details > summary:hover{ color: var(--wb-primary-dark); }
.uf-toc__liste{ padding: 0 1.25rem 1.25rem 2.75rem; }
.uf-toc__eintrag{ margin: 0 0 .5rem; }
.uf-toc__eintrag::marker{ color: var(--wb-muted); font-weight: 600; }
.uf-toc__link{ color: var(--wb-primary-dark); }
.uf-toc__link:hover{ color: var(--wb-primary-deep); }

/* --------------------------------------------------------------------------
   11. Notes  [uf_hinweis typ="tipp|info|achtung"]
   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{
  --wb-hinweis: var(--wb-muted);
  --wb-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: 3px var(--wb-radius) var(--wb-radius) 3px;
  background: var(--wb-bg-soft);
  box-shadow: inset 4px 0 0 var(--wb-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(--wb-hinweis);
  -webkit-mask: var(--wb-hinweis-icon) center / contain no-repeat;
  mask: var(--wb-hinweis-icon) center / contain no-repeat;
}
.uf-hinweis--tipp{
  --wb-hinweis: var(--wb-primary);
  --wb-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{
  --wb-hinweis: var(--wb-warn);
  --wb-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-size: 1.0625rem; color: var(--wb-ink); }
.uf-hinweis > :last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Buttons  [uf_button], product CTAs
   Petrol for everything that is not a purchase. Terracotta 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: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.uf-button--primaer{ background: var(--wb-primary-dark); color: #fff; }
.uf-button--primaer:hover,
.uf-button--primaer:focus-visible{ background: var(--wb-primary-deep); color: #fff; }

/* Buy button: 19px bold = large text, white on #C4553F 4.45:1 >= 3:1 (see header) */
.uf-button--primaer[rel~="sponsored"]{
  background: var(--wb-cta);
  color: #fff;
  font-size: 1.1875rem;
  padding: .625rem 1.5rem;
}
.uf-button--primaer[rel~="sponsored"]:hover,
.uf-button--primaer[rel~="sponsored"]:focus-visible{ background: var(--wb-cta-dark); color: #fff; }

/* A second shop in the same CTA bar steps back: outline instead of a second
   filled terracotta button. #A34431 on white 6.13:1, on #FBF0ED 5.48:1;
   border #C4553F on white 4.45:1 (non-text, >= 3:1). */
.uf-produkt__cta .uf-button--primaer[rel~="sponsored"] ~ .uf-button--primaer[rel~="sponsored"]{
  background: var(--wb-bg);
  color: var(--wb-cta-dark);
  border-color: var(--wb-cta);
}
.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: #FBF0ED;
  color: var(--wb-cta-dark);
  border-color: var(--wb-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(--wb-bg);
  color: var(--wb-primary-dark);
  border-color: var(--wb-primary);
}
.uf-button--sekundaer:hover,
.uf-button--sekundaer:focus-visible{
  background: var(--wb-bg-soft);
  color: var(--wb-primary-deep);
  border-color: var(--wb-primary-dark);
}

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

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

.uf-affiliate-hinweis{
  margin: 3rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--wb-line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--wb-muted);
}
/* Right after the FAQ its last rule already separates - no second line. */
.uf-faq + .uf-affiliate-hinweis{ margin-top: 1.5rem; padding-top: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   13. Video facade  [uf_video]
   Without a local picture the frame is a petrol "patch" with a stitched seam;
   the seam goes as soon as the video plays (magazin.js sets uf-video--aktiv).
   -------------------------------------------------------------------------- */

.uf-video{ margin: 2.25rem 0; }
.uf-video__rahmen{
  border-radius: var(--wb-radius);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    var(--wb-primary-dark);
}
.uf-video__rahmen::after{
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255,255,255,.3);
  border-radius: 7px;
  pointer-events: none;
}
.uf-video--aktiv .uf-video__rahmen::after{ display: none; }
.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,.14); }
.uf-video__icon{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.uf-video__icon::before{
  margin-left: .3rem;
  border-width: .7rem 0 .7rem 1.15rem;
  border-color: transparent transparent transparent var(--wb-primary-dark);
}
.uf-video__aktion{ font-size: 1.0625rem; }
.uf-video__titel{ font-size: .9375rem; opacity: .92; }
.uf-video__hinweis{ margin-top: .625rem; font-size: .8125rem; color: var(--wb-muted); }

/* --------------------------------------------------------------------------
   14. FAQ  <section class="uf-faq"> <details class="uf-faq__eintrag">
   -------------------------------------------------------------------------- */

.uf-faq{ margin: 3.25rem 0 2.5rem; }
.uf-faq > h2{ margin-bottom: 1.25rem; }
.uf-faq__eintrag,
.uf-faq__eintrag:first-of-type{ border-color: var(--wb-line); }
.uf-faq__eintrag > summary{
  gap: 1.25rem;
  padding: 1.125rem .25rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--wb-ink);
}
.uf-faq__eintrag > summary:hover{ color: var(--wb-primary-dark); }
.uf-faq__eintrag > summary::after{ color: var(--wb-primary); margin-top: .3rem; }
.uf-faq__antwort{
  padding: 0 2.5rem 1.375rem .25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* <details> fallback of orphaned [su_spoiler] (functions.php) - and the class-less <details>
   the shortcode migration wrote into post content (_wb_shortcode_migration.php, su_spoiler) */
.wb-aufklapper,
.wb-beitrag__inhalt details:not([class]),
.wb-seite__inhalt details:not([class]){ margin: 1.5rem 0; border-block: 1px solid var(--wb-line); }
.wb-aufklapper > summary,
.wb-beitrag__inhalt details:not([class]) > summary,
.wb-seite__inhalt details:not([class]) > summary{ min-height: var(--uf-touch); padding: .75rem 0; font-weight: 700; color: var(--wb-ink); cursor: pointer; }
.wb-aufklapper__inhalt{ padding: 0 0 1rem; }
.wb-beitrag__inhalt details:not([class])[open],
.wb-seite__inhalt details:not([class])[open]{ padding-bottom: 1rem; }

/* --------------------------------------------------------------------------
   15. 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(--wb-radius);
  background: var(--wb-bg-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.uf-autor__bild{ border-radius: 999px; }
.uf-autor__name{ margin: .25rem 0 .5rem; font-size: 1.25rem; line-height: 1.25; color: var(--wb-ink); }
.uf-autor__text{ margin: 0 0 .75rem; font-size: 1rem; }
.uf-autor__mehr{ font-weight: 600; }

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

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

.uf-produkt{
  position: relative;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  background: var(--wb-bg);
  box-shadow: 0 1px 2px rgba(35,41,43,.04);
  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(--wb-badge);
  color: var(--wb-ink);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.uf-produkt__label::before{
  content: "";
  width: .8125rem;
  height: .8125rem;
  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 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%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 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uf-produkt:has(> .uf-produkt__label){ padding-top: 1.875rem; }

.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(--wb-bg);
}
.uf-produkt__name{
  margin: 0 0 .875rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--wb-ink);
}
.uf-produkt__marke{
  display: block;
  margin-bottom: .125rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wb-muted);
}
.uf-produkt__merkmale{ list-style: none; margin: 0 0 1.25rem; padding: 0; }
.uf-produkt__merkmale li{
  position: relative;
  margin: 0 0 .4375rem;
  padding-left: 1.625rem;
}
.uf-produkt__merkmale li::before{
  content: "";
  position: absolute;
  left: .3rem;
  top: .3em;
  width: .4rem;
  height: .75rem;
  border: solid var(--wb-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.uf-produkt__ersatz{
  margin: -.25rem 0 1rem;
  font-size: .875rem;
  font-style: italic;
  color: var(--wb-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, so a tall
   picture never pulls name, features and button apart. */
@media (min-width: 560px){
  .uf-produkt--box{
    display: grid;
    grid-template-columns: 10.5rem 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__bild{
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
  }
  .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__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-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-ink);
}
/* auto-fit, not auto-fill: three cards in 1000px take the whole row instead of
   leaving an empty fourth track (round 1: 230px cards, buy button in two lines). */
.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,
.uf-karte{ padding: 0; }   /* list items inside the prose would inherit .2em */
.uf-produktkarten__eintrag{ display: flex; margin: 0; min-width: 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; }

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

.uf-produkte--tabelle{ overflow-x: auto; }
.uf-vergleich{
  width: 100%;
  margin: 0;
  border: 1px solid var(--wb-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--wb-radius);
  background: var(--wb-bg);
  font-size: 1rem;
  line-height: 1.5;
}
.uf-vergleich__titel{
  caption-side: top;
  padding: 0 0 1rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-ink);
}
.uf-vergleich th,
.uf-vergleich td{ border-bottom: 1px solid var(--wb-line); }
.uf-vergleich thead th{
  padding: .75rem 1.25rem;
  background: var(--wb-bg-soft);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wb-text);
}
.uf-vergleich thead th:first-child{ border-top-left-radius: calc(var(--wb-radius) - 1px); }
.uf-vergleich thead th:last-child{ border-top-right-radius: calc(var(--wb-radius) - 1px); }
.uf-vergleich td{ padding: 1.125rem 1.25rem; vertical-align: middle; }
.uf-vergleich tbody tr:last-child td{ border-bottom: 0; }
.uf-vergleich__produkt{ width: 36%; }
.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;
}
.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%; }
/* Button(s) stacked, "Anzeige" right-aligned below them. */
.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(--wb-line);
    border-radius: var(--wb-radius);
    background: var(--wb-bg);
  }
  .uf-vergleich td,
  .uf-vergleich tbody tr:last-child td{ padding: 0; border: 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: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wb-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; }
}

/* --------------------------------------------------------------------------
   18. Layout blocks of the shortcode migration
   -------------------------------------------------------------------------- */

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

.uf-favoriten{
  margin: 2.25rem 0;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--wb-line);
  border-radius: 3px var(--wb-radius) var(--wb-radius) 3px;
  background: var(--wb-bg);
  box-shadow: inset 4px 0 0 var(--wb-badge);
}
.uf-favoriten__titel{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: 1.125rem;
  color: var(--wb-ink);
}
.uf-favoriten__titel::before{
  content: "";
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--wb-warn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%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 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uf-favoriten > p{ margin: 0 0 .625rem; }

/* --------------------------------------------------------------------------
   19. Hub, author, search, 404, pagination
   -------------------------------------------------------------------------- */

.wb-hub__titel,
.wb-profil__name{
  margin: .25rem 0 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.028em;
}
.wb-hub__seite{ font-weight: 400; color: var(--wb-muted); }
.wb-hub__einleitung{
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.7;
}
.wb-hub__einleitung > :last-child{ margin-bottom: 0; }
.wb-hub__auswahl{ margin-bottom: 3.5rem; }

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

.wb-suchseite__kopf,
.wb-fehlerseite__kopf{ max-width: var(--wb-textw); margin-bottom: 2.5rem; }
.wb-suchseite__titel,
.wb-fehlerseite__titel{
  margin: 0 0 .75rem;
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.625rem);
  line-height: 1.12;
}
.wb-suchseite__zahl{ margin-bottom: 1.25rem; }
.wb-suchseite__leer,
.wb-fehlerseite__text{ margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.65; }
.wb-suchseite__form,
.wb-fehlerseite__form{ max-width: 34rem; }
.wb-fehlerseite__code{
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wb-primary-dark);
}
.wb-fehlerseite__start{ margin: 1.25rem 0 0; font-weight: 600; }
.wb-themenblock{ margin-top: 3.5rem; }

.wb-blaetterung{ margin: 2.75rem 0 0; }
.wb-blaetterung .nav-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.wb-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(--wb-line);
  border-radius: 10px;
  background: var(--wb-bg);
  color: var(--wb-ink);
  font-weight: 600;
  text-decoration: none;
}
.wb-blaetterung a.page-numbers:hover{ border-color: var(--wb-primary); color: var(--wb-primary-dark); }
.wb-blaetterung .page-numbers.current{ background: var(--wb-primary-dark); border-color: var(--wb-primary-dark); color: #fff; }
.wb-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 -
   instead of one word dropping onto a line of its own. */
@media (max-width: 559px){
  .wb-blaetterung .nav-links::after{ content: ""; order: 1; flex-basis: 100%; height: 0; }
  .wb-blaetterung .prev{ order: 2; }
  .wb-blaetterung .next{ order: 3; }
}

/* --------------------------------------------------------------------------
   20. Comments
   -------------------------------------------------------------------------- */

.wb-kommentare{ margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--wb-line); }
.wb-kommentare__titel{ margin: 0 0 1.25rem; font-size: 1.375rem; }
.wb-kommentare__liste,
.wb-kommentare__liste .children{ list-style: none; margin: 0; padding: 0; }
.wb-kommentare__liste .children{ margin-left: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--wb-line); }
.wb-kommentare__liste .comment-body{ margin: 0 0 1.25rem; padding: 1.125rem 1.25rem; border-radius: var(--wb-radius); background: var(--wb-bg-soft); }
.wb-kommentare__liste .comment-meta{ display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .5rem; font-size: .875rem; color: var(--wb-muted); }
.wb-kommentare__liste .comment-author{ font-weight: 700; color: var(--wb-ink); }
.wb-kommentare__liste .says{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wb-kommentare__liste .comment-metadata a{ color: var(--wb-muted); text-decoration: none; }
.wb-kommentare__liste .reply{ font-size: .875rem; font-weight: 600; }
.wb-kommentare .comment-respond{ margin-top: 2rem; padding: 1.5rem; border-radius: var(--wb-radius); background: var(--wb-bg-soft); }
.wb-kommentare .comment-form p{ margin: 0 0 1rem; }
.wb-kommentare .comment-form label{ display: block; margin-bottom: .25rem; font-weight: 600; }
.wb-kommentare .comment-form input[type="text"],
.wb-kommentare .comment-form input[type="email"],
.wb-kommentare .comment-form input[type="url"],
.wb-kommentare .comment-form textarea{ width: 100%; }
.wb-kommentare .comment-form-cookies-consent{ display: flex; gap: .5rem; align-items: flex-start; }
.wb-kommentare .comment-form-cookies-consent label{ display: inline; font-weight: 400; }
.wb-kommentare__zu{ color: var(--wb-muted); }

/* --------------------------------------------------------------------------
   21. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px){
  .uf-wrap{ padding-inline: var(--uf-pad-x-sm); }
  .uf-inhalt{ padding-block: 1.25rem 3.5rem; }
  .wb-band{ padding-block: 1.25rem 1.75rem; margin-bottom: 2rem; }
  .wb-beitragsbild{ margin-bottom: 1.75rem; }
  .uf-produkt{ padding: 1.25rem; }
  .uf-produkt:has(> .uf-produkt__label){ padding-top: 1.75rem; }
  .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-autor{ padding: 1.25rem; }
  .wb-autorin{ padding: 1.25rem; }
  .uf-faq__antwort{ padding-right: 0; }
  .wb-fuss__spalten{ padding-block: 2.5rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */

@media print{
  .wb-kopf__schalter,
  .wb-kopf__suche,
  .wb-hero__naht,
  .wb-fuss__spalten,
  .uf-produkt__cta,
  .uf-verwandt{ display: none; }
  .wb-kopf, .wb-fuss, .wb-band, .wb-hero{ background: none; border: 0; }
}