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

   Look: calm and outdoorsy - a well-kept angling guide, not a tackle shop.
   Colours from the logo and the old site: forest green band (#2F6B48, close to
   the #38754F of the Neve years), reed-light surfaces, an orange float tip for
   buy buttons only. Built 17.10.2026 from the wasbasteln-uf brand layer: same
   structure and class names with the prefix pa- instead of wb-.

   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.

   CONTRAST (WCAG 2.x, relative luminance, computed 17.10.2026)
     text        #34403A on white 10.82:1   on reed #F1F5EF  9.82:1
     ink         #1F2A24 on white >14:1
     muted       #5E6A64 on white  5.64:1   on reed  5.12:1
     primary     #2F6B48 on white  6.33:1   on reed  5.74:1
                 -> unlike wasbasteln no switch on the light surfaces is needed
     primary-dk  #245739 on white  8.41:1   on reed  7.63:1
     white on header band #2F6B48 6.33:1, on #245739 8.41:1, on #1E4A31 10.10:1
     light green #C9E3C5 on the band 4.61:1 (small labels in the header)
     white on cta #C2410C 5.18:1 (AA for normal text), hover #A8380A 6.49:1
     ink on badge #F2C14E 8.84:1; the badge is also the active-tab bar on the band
     line-ui #7E8A84 (input borders, 1.4.11 non-text >= 3:1): white 3.59:1
     warn    #9A5B13 (note "achtung"): white 5.41:1
     line    #DCE5D9 is decoration only, never the only boundary of a control.
   ========================================================================== */

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

:root{
  /* Brand */
  --pa-ink: #1F2A24;
  --pa-text: #34403A;
  --pa-muted: #5E6A64;
  --pa-bg: #FFFFFF;
  --pa-bg-soft: #F1F5EF;          /* reed light */
  --pa-line: #DCE5D9;
  --pa-primary: #2F6B48;          /* forest green: links, accents */
  --pa-primary-dark: #245739;
  --pa-cta: #C2410C;              /* float orange: buy buttons only */
  --pa-cta-dark: #A8380A;
  --pa-badge: #F2C14E;            /* sun yellow: badges, active tab on the band */
  --pa-radius: 12px;
  --pa-maxw: 1200px;
  --pa-textw: 720px;

  /* Header band */
  --pa-band-bg: #2F6B48;
  --pa-band-deep: #245739;
  --pa-band-text: #FFFFFF;
  --pa-band-soft: #C9E3C5;
  --pa-band-line: rgba(255,255,255,.18);

  /* Supporting tokens (derived, contrast see header) */
  --pa-widew: 1000px;             /* wide elements inside articles */
  --pa-primary-deep: #1E4A31;     /* hover of green buttons */
  --pa-line-ui: #7E8A84;          /* borders of inputs */
  --pa-warn: #9A5B13;             /* note "achtung" */
  --pa-linen-deep: #E3ECE0;       /* hover on reed, placeholder pictures */
  --pa-shadow: 0 1px 2px rgba(31,42,36,.05), 0 10px 28px -12px rgba(31,42,36,.22);
  --pa-fs-beitrag: 1.125rem;      /* 18px body text in posts */
  --pa-lh-beitrag: 1.7;
  /* A fishing line with a float: dashed line used under section titles */
  --pa-stich: linear-gradient(90deg, var(--pa-primary) 0 58%, transparent 58% 100%) 0 0 / 12px 3px repeat-x;

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

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

/* Light surfaces: links switch to primary-dark (7.63:1 instead of 5.74:1) - not
   needed for AA, kept for the same calm look as on the other magazines. */
.pa-band, .pa-hero, .pa-fuss, .uf-toc, .uf-hinweis, .uf-autor, .pa-autorin,
.pa-abschnitt--arbeitsweise, .pa-kommentare .comment-respond{
  --uf-link: var(--pa-primary-dark);
  --uf-link-hover: var(--pa-primary-deep);
  --uf-link-rule: rgba(36,87,57,.55);
}

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

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

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

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

::selection{ background: rgba(47,107,72,.18); }

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

/* Icons (inline SVG from petriangeln_icon()) */
.pa-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 */
.pa-spalte{ max-width: var(--pa-textw); margin-inline: auto; }

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

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

.pa-leer{ color: var(--pa-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 yellow bar that sits on the band's edge.
   The band is forest green: the logo has white lettering ("Angeln") and was
   made for the green header of the old site.
   -------------------------------------------------------------------------- */

.pa-kopf{
  position: relative;
  background: var(--pa-band-bg);
  border-bottom: 1px solid var(--pa-band-deep);
  color: var(--pa-band-text);
  --uf-focus: #FFFFFF;
}

.pa-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;
}

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

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

.pa-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(--pa-band-text);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pa-kopf__knopf::-webkit-details-marker{ display: none; }
.pa-kopf__knopf::marker{ content: ""; }
.pa-kopf__knopf:hover{ background: rgba(255,255,255,.12); }
.pa-kopf__schalter[open] > .pa-kopf__knopf{ background: var(--pa-band-deep); color: var(--pa-band-text); }

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

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

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

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

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

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

@media (min-width: 960px){
  .pa-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;
  }
  .pa-kopf__schalter{ display: none; }
  .pa-kopf__suche{
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 24rem;
    padding: 0;
  }
  .pa-nav{
    display: block;
    margin-top: 1rem;
    border-top: 0;
  }
  .pa-nav__liste{
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: 0;
  }
  .pa-nav__liste > li{ border-bottom: 0; }
  .pa-nav__liste a{
    min-height: 52px;
    padding: 0;
    font-size: 1rem;
  }
  .pa-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;
  }
  .pa-nav__liste a{ text-decoration: none; }
  .pa-nav__liste a:hover::after{ background: rgba(255,255,255,.4); }
  .pa-nav__liste a[aria-current]::after,
  .pa-nav__liste .current-menu-item > a::after,
  .pa-nav__liste .current-menu-ancestor > a::after,
  .pa-nav__liste .current-post-ancestor > a::after,
  .pa-nav__liste .current-category-ancestor > a::after{ background: var(--pa-badge); }
}

/* --------------------------------------------------------------------------
   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(--pa-line-ui);
  border-radius: 10px;
  background: var(--pa-bg);
  color: var(--pa-ink);
  font-size: 1rem;
}
.uf-suchform input[type="search"]:focus-visible{ border-color: var(--pa-primary-dark); }
.uf-suchform button{
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background: var(--pa-primary-dark);
  color: #fff;
  font-weight: 700;
}
.uf-suchform button:hover{ background: var(--pa-primary-deep); }

@media (min-width: 960px){
  .pa-kopf__suche .uf-suchform input[type="search"],
  .pa-kopf__suche .uf-suchform button{ min-height: 44px; }
  .pa-kopf__suche .uf-suchform input[type="search"]{ border-color: transparent; }
}

/* On the green band: white field, white button with green text (white on the band
   6.33:1 as boundary, green text on white 8.41:1). */
.pa-kopf .uf-suchform input[type="search"]{ border-color: transparent; }
.pa-kopf .uf-suchform button{ background: #FFFFFF; color: var(--pa-primary-dark); }
.pa-kopf .uf-suchform button:hover{ background: var(--pa-band-soft); color: var(--pa-primary-deep); }

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

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

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

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

/* Float drawing (inc/startseite.php) - from 960px, beside the text */
.pa-hero__bild{ display: none; }
@media (min-width: 960px){
  .pa-hero__innen{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 27vw, 22rem);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .pa-hero__bild{
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }
}
.pa-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(--pa-ink);
}
.pa-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(--pa-text);
}
.pa-hero__suche{ max-width: 34rem; }
.pa-hero__suche .uf-suchform input[type="search"]{
  min-height: 56px;
  padding-inline: 1.25rem;
  font-size: 1.0625rem;
  box-shadow: 0 1px 2px rgba(31,42,36,.06);
}
.pa-hero__suche .uf-suchform button{ min-height: 56px; padding: 0 1.5rem; font-size: 1.0625rem; }

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

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

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

@media (min-width: 600px){
  .pa-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px){
  .pa-kacheln{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .pa-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;
  }
  .pa-kachel__bild{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    transition: transform .3s ease;
  }
  .pa-kachel__link:hover .pa-kachel__bild{ transform: scale(1.03); }
  .pa-kachel__titel{ padding: 1rem 1.25rem 0; font-size: 1.25rem; letter-spacing: -.01em; }
  .pa-kachel__zeile{ padding: 0 1.25rem 1.25rem; font-size: .9375rem; }
}

/* "So arbeiten wir" + author */
.pa-abschnitt--arbeitsweise .uf-wrap{ max-width: var(--pa-maxw); }
.pa-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(--pa-radius) + 4px);
  background: var(--pa-bg-soft);
}
.pa-arbeitsweise__text .pa-abschnitt__titel{ margin-bottom: 1.25rem; }
.pa-arbeitsweise__text p{ max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; }
.pa-arbeitsweise__link{ margin-top: 1.5rem; }
@media (min-width: 900px){
  .pa-arbeitsweise{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  .pa-arbeitsweise--ohne-autorin{ grid-template-columns: minmax(0, 1fr); }
}

.pa-autorin{
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-bg);
  --uf-link: var(--pa-primary);
}
.pa-autorin__bild{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px;
}
.pa-autorin__inhalt{ flex: 1 1 auto; min-width: 0; }
.pa-autorin__label,
.uf-autor__label{
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pa-muted);
}
.pa-autorin__name{ margin: .25rem 0 .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--pa-ink); }
.pa-autorin__text{ margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.6; }
.pa-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){
  .pa-abschnitt--ratgeber .uf-karten,
  .pa-abschnitt--kaufberatung .uf-karten,
  .uf-verwandt .uf-karten,
  .pa-abschnitt--neu .uf-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px){
  .pa-abschnitt--neu .uf-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .pa-abschnitt--ratgeber .uf-karten,
  .pa-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(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-bg);
}
.uf-karte__link:hover,
.uf-karte__link:focus-visible{
  border-color: var(--pa-primary);
  box-shadow: var(--pa-shadow);
}
.uf-karte__bild{ background: var(--pa-bg-soft); }
.uf-karte__bild--leer{ background: linear-gradient(135deg, var(--pa-bg-soft) 0%, var(--pa-linen-deep) 100%); }
.uf-karte__datum{
  display: block;
  margin: .75rem 1.125rem 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--pa-muted);
}
.uf-karte__titel{
  margin: .625rem 1.125rem 0;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--pa-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(--pa-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(--pa-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
   -------------------------------------------------------------------------- */

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

.pa-beitrag__inhalt,
.pa-seite__inhalt{
  font-size: var(--pa-fs-beitrag);
  line-height: var(--pa-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
   ".pa-beitrag__inhalt ol" (0,1,1) the TOC numbers turned bold petrol and the
   product-card list shifted 25px to the right. */
:where(.pa-beitrag__inhalt, .pa-seite__inhalt) > p{ margin: 0 0 1.25em; }
:where(.pa-beitrag__inhalt, .pa-seite__inhalt) :is(h2, h3, h4){ color: var(--pa-ink); }
:where(.pa-beitrag__inhalt, .pa-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(.pa-beitrag__inhalt, .pa-seite__inhalt) h3{ margin: 2.25rem 0 .625rem; font-size: 1.25rem; line-height: 1.3; }
:where(.pa-beitrag__inhalt, .pa-seite__inhalt) h4{ margin: 1.75rem 0 .5rem; font-size: 1.0625rem; }
:where(.pa-beitrag__inhalt, .pa-seite__inhalt) > :first-child{ margin-top: 0; }

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

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

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

:where(.pa-beitrag__inhalt) img{ border-radius: 8px; }
:where(.pa-beitrag__inhalt) :is(figure, .wp-caption){ margin: 2rem 0; }
:where(.pa-beitrag__inhalt) :is(figcaption, .wp-caption-text){
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--pa-muted);
}
:where(.pa-beitrag__inhalt) .alignright{ float: right; margin: .35rem 0 1.25rem 1.75rem; }
:where(.pa-beitrag__inhalt) .alignleft{ float: left; margin: .35rem 1.75rem 1.25rem 0; }
:where(.pa-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(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-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(--pa-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(--pa-bg-soft); color: var(--pa-ink); }
.uf-tabelle-rolle.ist-scrollbar{ box-shadow: inset -12px 0 12px -12px rgba(31,42,36,.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){
  .pa-beitrag__inhalt > .uf-produkte,
  .pa-beitrag__inhalt > .uf-raster,
  .pa-beitrag__inhalt > .uf-tabelle-rolle,
  .pa-beitrag__inhalt > .alignwide,
  .pa-beitrag__inhalt > .alignfull,
  .pa-beitrag > .uf-verwandt{
    margin-inline: calc((var(--pa-textw) - var(--pa-widew)) / 2);
  }
}

/* Old floated pictures: centred on narrow screens instead of squeezing the text */
@media (max-width: 559px){
  :where(.pa-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(--pa-muted);
}
.uf-krume a{ color: var(--pa-muted); text-decoration: none; }
.uf-krume a:hover{ color: var(--pa-primary-dark); text-decoration: underline; }
.uf-krume-liste{ gap: .375rem .5rem; }
.uf-krume-teil{ gap: .5rem; }
.uf-krume-trenner{ color: var(--pa-line-ui); }
.uf-krume [aria-current],
.uf-krume .breadcrumb_last{ color: var(--pa-text); }

.uf-meta{ gap: .375rem .625rem; font-size: .9375rem; color: var(--pa-muted); }
.uf-meta__link{ color: var(--pa-text); font-weight: 600; text-decoration: none; }
.uf-meta__link:hover{ color: var(--pa-primary-dark); text-decoration: underline; }
.uf-meta__trenner{ color: var(--pa-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(--pa-radius);
  background: var(--pa-bg-soft);
}
.uf-toc__details > summary{
  min-height: 52px;
  padding: .75rem 1.25rem;
  font-size: 1.0625rem;
  color: var(--pa-ink);
}
.uf-toc__details > summary:hover{ color: var(--pa-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(--pa-muted); font-weight: 600; }
.uf-toc__link{ color: var(--pa-primary-dark); }
.uf-toc__link:hover{ color: var(--pa-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{
  --pa-hinweis: var(--pa-muted);
  --pa-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(--pa-radius) var(--pa-radius) 3px;
  background: var(--pa-bg-soft);
  box-shadow: inset 4px 0 0 var(--pa-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(--pa-hinweis);
  -webkit-mask: var(--pa-hinweis-icon) center / contain no-repeat;
  mask: var(--pa-hinweis-icon) center / contain no-repeat;
}
.uf-hinweis--tipp{
  --pa-hinweis: var(--pa-primary);
  --pa-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{
  --pa-hinweis: var(--pa-warn);
  --pa-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(--pa-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(--pa-primary-dark); color: #fff; }
.uf-button--primaer:hover,
.uf-button--primaer:focus-visible{ background: var(--pa-primary-deep); color: #fff; }

/* Buy button: white on #C2410C 5.18:1 (AA for every size, see header) */
.uf-button--primaer[rel~="sponsored"]{
  background: var(--pa-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(--pa-cta-dark); color: #fff; }

/* A second shop in the same CTA bar steps back: outline instead of a second
   filled orange button. #A8380A on white 6.49:1, on #FBEFE9 5.8:1;
   border #C2410C on white 5.18:1 (non-text, >= 3:1). */
.uf-produkt__cta .uf-button--primaer[rel~="sponsored"] ~ .uf-button--primaer[rel~="sponsored"]{
  background: var(--pa-bg);
  color: var(--pa-cta-dark);
  border-color: var(--pa-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: #FBEFE9;
  color: var(--pa-cta-dark);
  border-color: var(--pa-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(--pa-bg);
  color: var(--pa-primary-dark);
  border-color: var(--pa-primary);
}
.uf-button--sekundaer:hover,
.uf-button--sekundaer:focus-visible{
  background: var(--pa-bg-soft);
  color: var(--pa-primary-deep);
  border-color: var(--pa-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(--pa-muted);
}

.uf-affiliate-hinweis{
  margin: 3rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--pa-line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--pa-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(--pa-radius);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    var(--pa-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(--pa-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(--pa-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(--pa-line); }
.uf-faq__eintrag > summary{
  gap: 1.25rem;
  padding: 1.125rem .25rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--pa-ink);
}
.uf-faq__eintrag > summary:hover{ color: var(--pa-primary-dark); }
.uf-faq__eintrag > summary::after{ color: var(--pa-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) */
.pa-aufklapper,
.pa-beitrag__inhalt details:not([class]),
.pa-seite__inhalt details:not([class]){ margin: 1.5rem 0; border-block: 1px solid var(--pa-line); }
.pa-aufklapper > summary,
.pa-beitrag__inhalt details:not([class]) > summary,
.pa-seite__inhalt details:not([class]) > summary{ min-height: var(--uf-touch); padding: .75rem 0; font-weight: 700; color: var(--pa-ink); cursor: pointer; }
.pa-aufklapper__inhalt{ padding: 0 0 1rem; }
.pa-beitrag__inhalt details:not([class])[open],
.pa-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(--pa-radius);
  background: var(--pa-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(--pa-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(--pa-line);
}
.uf-verwandt__titel{ margin: 0 0 1.5rem; font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem); }

/* --------------------------------------------------------------------------
   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(--pa-line);
  border-radius: 3px var(--pa-radius) var(--pa-radius) 3px;
  background: var(--pa-bg);
  box-shadow: inset 4px 0 0 var(--pa-badge);
}
.uf-favoriten__titel{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: 1.125rem;
  color: var(--pa-ink);
}
.uf-favoriten__titel::before{
  content: "";
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--pa-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
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   21a. petriangeln: hubs, page tree, shop box, ads (17.10.2026)
   -------------------------------------------------------------------------- */

/* Eight hubs: four columns on wide screens (3 + 3 + 2 looked unfinished) */
@media (min-width: 1100px){
  .pa-abschnitt--themen .pa-kacheln,
  .pa-themenblock .pa-kacheln{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Child pages (page tree and the start page section "Angelausrüstung"): tiles with
   the title only - narrow: picture + title in one row; wide: four columns */
.pa-kacheln--seiten .pa-kachel__titel{ grid-row: 1 / span 2; align-self: center; }
@media (min-width: 960px){
  .pa-kacheln--seiten{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .pa-kacheln--seiten .pa-kachel__titel{ grid-row: auto; align-self: start; padding: .75rem 1rem 1rem; font-size: 1.0625rem; }
}

.pa-unterseiten{ margin-top: 3.5rem; }

/* "Mehr aus {Bereich}" below a topic page */
.pa-geschwister{
  margin: 3rem 0 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-bg-soft);
}
.pa-geschwister__titel{ margin: 0 0 .75rem; font-size: 1.125rem; line-height: 1.3; color: var(--pa-ink); }
.pa-geschwister__liste{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pa-geschwister__liste li{ margin: 0; }
.pa-geschwister__liste a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .25rem .875rem;
  border: 1px solid var(--pa-line);
  border-radius: 999px;
  background: var(--pa-bg);
  color: var(--pa-primary-dark);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.pa-geschwister__liste a:hover{ border-color: var(--pa-primary); color: var(--pa-primary-deep); }
.pa-geschwister__zurueck{ margin: 1rem 0 0; }
.pa-geschwister__zurueck a{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--uf-touch);
  font-weight: 700;
  text-decoration: none;
}
.pa-geschwister__zurueck a:hover{ text-decoration: underline; }
.pa-geschwister__zurueck .pa-icon{ width: 18px; height: 18px; }

/* Search box that replaces the old product boxes (inc/altinhalt.php) */
.pa-shop{
  margin: 2rem 0;
  padding: 1.25rem 1.25rem 1.375rem;
  border: 1px solid var(--pa-line);
  border-left: 4px solid var(--pa-cta);
  border-radius: var(--pa-radius);
  background: var(--pa-bg);
  box-shadow: 0 1px 2px rgba(31,42,36,.05);
}
.pa-shop__titel{
  margin: 0 0 .25rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa-muted);
}
.pa-shop__text{ margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--pa-text); }
.pa-shop__cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin: 0;
}
.pa-dkb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.pa-dkb__text{ flex: 1 1 14rem; font-size: .9375rem; color: var(--pa-muted); }

/* AdSense in-article unit (inc/werbung.php). Label and space only once Google has filled
   the unit (data-ad-status="filled") - without consent, with an ad blocker or without an
   ad there is no lonely "Anzeige" above an empty gap. */
.pa-werbung{ margin: 0; }
.pa-werbung:has(ins[data-ad-status="filled"]){ margin: 2.25rem 0; }
.pa-werbung__label{ display: none; }
.pa-werbung:has(ins[data-ad-status="filled"]) .pa-werbung__label{ display: block; }
.pa-werbung__label{
  margin: 0 0 .375rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa-muted);
}

/* --------------------------------------------------------------------------
   21b. Old content (Thesis/Neve years, inventory 16.10.2026)
   -------------------------------------------------------------------------- */

/* Image tiles "div.alignleft.dr" (picture 187x105 + caption link, 30+ pages): they
   floated in the old theme and broke the text flow. Now inline tiles that wrap,
   two per row on narrow screens. */
.pa-seite__inhalt .dr,
.pa-beitrag__inhalt .dr{
  float: none;
  display: inline-block;
  vertical-align: top;
  width: calc(50% - .5rem);
  max-width: 187px;
  margin: 0 .5rem 1rem 0;
  font-size: .9375rem;
  line-height: 1.35;
  text-align: center;
}
.pa-seite__inhalt .dr img,
.pa-beitrag__inhalt .dr img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 .375rem;
  border-radius: 8px;
}
.pa-seite__inhalt .dr a,
.pa-beitrag__inhalt .dr a{ font-weight: 600; }
@media (min-width: 600px){
  .pa-seite__inhalt .dr,
  .pa-beitrag__inhalt .dr{ width: 187px; margin-right: .75rem; }
}
.pa-seite__inhalt br.clear,
.pa-beitrag__inhalt br.clear{ display: block; clear: both; content: ""; line-height: 0; }

/* "Tipp:" in red, used in old blockquotes. #B42318 on white 6.5:1 */
.pa-seite__inhalt .rot,
.pa-beitrag__inhalt .rot{ color: #B42318; }

/* Old [caption] boxes carry an inline width (187px) - never wider than the column */
.pa-seite__inhalt .wp-caption,
.pa-beitrag__inhalt .wp-caption{ max-width: 100%; }

/* TOC of headings that carry their own numbers (inc/altinhalt.php section 7) */
.uf-toc__liste.pa-toc-nummeriert,
.pa-toc-nummeriert .uf-toc__unterliste{ list-style: none; padding-left: 1rem; }

/* "Bild folgt demnächst" placeholders become a quiet empty area (section 8) */
.pa-ohne-bild{
  display: block;
  width: 100%;
  aspect-ratio: 187 / 105;
  margin: 0 0 .375rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pa-bg-soft), var(--pa-linen-deep));
}

/* Pro/contra icons replacing the missing icon/fam/add.png and delete.png (altinhalt section 11):
   green plus 5.74:1, brown minus 5.41:1 on white (non-text >= 3:1) */
.pa-pc-icon{
  display: inline-block;
  position: relative;
  width: 1.05em;
  height: 1.05em;
  margin-right: .25em;
  vertical-align: -.15em;
  border-radius: 50%;
  background: var(--pa-primary);
}
.pa-pc-icon--minus{ background: var(--pa-warn); }
.pa-pc-icon::before,
.pa-pc-icon--plus::after{
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 1px;
  background: #fff;
}
.pa-pc-icon--plus::after{ transform: rotate(90deg); }

/* VG Wort pixels (1x1) must not leave a gap at the end of the text */
.pa-seite__inhalt img[width="1"][height="1"],
.pa-beitrag__inhalt img[width="1"][height="1"]{ position: absolute; width: 1px; height: 1px; margin: 0; }

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

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