/* ==========================================================================
   Ausrüstungs-Kompass 1.0.0 (petriangeln-uf, 17.10.2026) - prefix ufk-
   ==========================================================================
   Portal-neutral: every colour comes from the uf-basis tokens, with the
   petriangeln values as fallback. Orange (--pa-cta) only on buy links, as in
   marke.css. Loaded after marke.css; no !important.

   Modules: .ufk-blick (facts), .ufk-finder (2 questions -> pick), .ufk-sets
   (set panels: drawing, shop switch, list per shop, total, Amazon cart),
   .ufk-angebote (all offers, filter + sort), .ufk-quellen.
   Without JavaScript everything is visible (all picks, all rigs).
   ========================================================================== */

.ufk{
  --ufk-ink: var(--uf-ink, #1F2A24);
  --ufk-text: var(--uf-body, #34403A);
  --ufk-mut: var(--uf-mut, #5E6A64);
  --ufk-grund: var(--uf-bg, #FFFFFF);
  --ufk-flaeche: var(--uf-surface, #F1F5EF);
  --ufk-flaeche-tief: var(--pa-linen-deep, #E3ECE0);
  --ufk-linie: var(--uf-line, #DCE5D9);
  --ufk-linie-ui: var(--uf-line-ui, #7E8A84);
  --ufk-akzent: var(--uf-accent, #2F6B48);
  --ufk-akzent-dunkel: var(--uf-cta-bg, #245739);
  --ufk-akzent-tief: var(--uf-cta-bg-hover, #1E4A31);
  --ufk-kauf: var(--pa-cta, #C2410C);
  --ufk-kauf-dunkel: var(--pa-cta-dark, #A8380A);
  --ufk-marke: var(--pa-badge, #F2C14E);
  --ufk-radius: var(--uf-radius, 12px);
  --ufk-schatten: var(--pa-shadow, 0 1px 2px rgba(31,42,36,.05), 0 10px 28px -12px rgba(31,42,36,.22));
  margin: 2.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ufk-text);
}
.ufk *, .ufk *::before, .ufk *::after{ box-sizing: border-box; }
.ufk :where(h2){ margin-top: 0; }
.ufk :where(p){ margin: 0; }
.ufk :where(ul, ol){ margin: 0; padding: 0; }
.ufk :where(li){ margin: 0; padding: 0; }
.ufk img{ display: block; max-width: 100%; height: auto; }
.ufk-intro{ margin: 0 0 1.25rem; color: var(--ufk-mut); font-size: 1.0625rem; }
.ufk-vh{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ufk :focus-visible{ outline: 3px solid var(--ufk-akzent-dunkel); outline-offset: 2px; }
.ufk sup{ font-size: .7em; line-height: 0; }
.ufk sup a{ text-decoration: none; color: var(--ufk-akzent-dunkel); padding: 0 .1em; }

/* Wide modules on pages (marke.css does this only for posts) */
@media (min-width: 1080px){
  .pa-seite__inhalt > .ufk--breit,
  .pa-beitrag__inhalt > .ufk--breit{
    margin-inline: calc((var(--pa-textw, 720px) - var(--pa-widew, 1000px)) / 2);
  }
}

/* Shared bits ------------------------------------------------------------ */
.ufk-fakten{ display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--ufk-mut); font-size: .9375rem; }
.ufk-fakten span:not(:last-child)::after{ content: "·"; margin-left: .5rem; color: var(--ufk-linie-ui); }
.ufk-preis{ font-size: 1.5rem; font-weight: 800; color: var(--ufk-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ufk-stueck{ font-weight: 700; color: var(--ufk-akzent-dunkel); font-variant-numeric: tabular-nums; }

.ufk-kauf{
  display: inline-block; text-align: center; text-wrap: balance;
  min-height: 44px; padding: .75rem 1.125rem;
  border-radius: 10px; background: var(--ufk-kauf); color: #fff;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
}
.ufk-kauf:hover, .ufk-kauf:focus-visible{ background: var(--ufk-kauf-dunkel); color: #fff; }
.ufk-knopf{
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: 44px; padding: .5rem 1rem;
  border: 2px solid var(--ufk-akzent-dunkel); border-radius: 10px;
  background: var(--ufk-grund); color: var(--ufk-akzent-dunkel);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.ufk-knopf:hover, .ufk-knopf:focus-visible{ background: var(--ufk-akzent-dunkel); color: #fff; }
.ufk-knopf svg{ width: 18px; height: 18px; flex: none; }

/* 1. Auf einen Blick ------------------------------------------------------ */
.ufk-blick{
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 1.25rem 1.125rem;
  border-radius: var(--ufk-radius);
  background: var(--ufk-flaeche);
}
.ufk-blick__titel{ margin-bottom: .625rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ufk-akzent-dunkel); }
.ufk-blick__fakten{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; }
.ufk-blick__fakten div{ display: flex; flex-direction: column; gap: .125rem; }
.ufk-blick__fakten dt{ font-size: .8125rem; color: var(--ufk-mut); }
.ufk-blick__fakten dd{ margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--ufk-ink); font-variant-numeric: tabular-nums; }
.ufk-blick__links{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.ufk-blick__links a{
  display: inline-flex; align-items: center; gap: .375rem; min-height: 40px; padding: .375rem .875rem;
  border-radius: 999px; background: var(--ufk-grund); border: 1px solid var(--ufk-linie-ui);
  color: var(--ufk-akzent-dunkel); font-weight: 700; font-size: .9375rem; text-decoration: none;
}
.ufk-blick__links a:hover, .ufk-blick__links a:focus-visible{ border-color: var(--ufk-akzent-dunkel); background: var(--ufk-akzent-dunkel); color: #fff; }
.ufk-blick__stand{ margin-top: .625rem; font-size: .8125rem; color: var(--ufk-mut); }
@media (max-width: 599px){
  .ufk-blick__fakten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2. Finder --------------------------------------------------------------- */
.ufk-frage{ margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.ufk-frage legend{ display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: 0; font-weight: 700; font-size: 1.0625rem; color: var(--ufk-ink); }
.ufk-schritt{
  display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; flex: none;
  border-radius: 50%; background: var(--ufk-akzent-dunkel); color: #fff; font-size: .875rem; font-weight: 800;
}
.ufk-kacheln{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; }
.ufk-kachel{
  position: relative; display: flex; flex-direction: column; gap: .25rem;
  padding: .875rem .875rem 1rem; border: 1px solid var(--ufk-linie-ui); border-radius: var(--ufk-radius);
  background: var(--ufk-grund); cursor: pointer;
}
.ufk-kachel input, .ufk-chip input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.ufk-kachel svg{ width: 32px; height: 32px; margin-bottom: .25rem; color: var(--ufk-akzent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ufk-kachel__titel{ font-weight: 700; color: var(--ufk-ink); line-height: 1.25; }
.ufk-kachel__unter{ font-size: .875rem; color: var(--ufk-mut); line-height: 1.35; }
.ufk-kachel:hover{ border-color: var(--ufk-akzent-dunkel); }
.ufk-kachel:has(input:checked){ border-color: var(--ufk-akzent-dunkel); box-shadow: inset 0 0 0 1px var(--ufk-akzent-dunkel); background: var(--ufk-flaeche); }
.ufk-kachel:has(input:checked)::after{
  content: ""; position: absolute; top: .625rem; right: .625rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--ufk-akzent-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ufk-kachel:has(input:focus-visible), .ufk-chip:has(input:focus-visible){ outline: 3px solid var(--ufk-akzent-dunkel); outline-offset: 2px; }
.ufk-chips{ display: flex; flex-wrap: wrap; gap: .5rem; }
.ufk-chip{ position: relative; cursor: pointer; }
.ufk-chip span{
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--ufk-linie-ui); border-radius: 999px; background: var(--ufk-grund);
  font-weight: 600; color: var(--ufk-ink); line-height: 1.25;
}
.ufk-chip:hover span{ border-color: var(--ufk-akzent-dunkel); }
.ufk-chip input:checked + span{ background: var(--ufk-akzent-dunkel); border-color: var(--ufk-akzent-dunkel); color: #fff; }
@media (max-width: 719px){
  .ufk-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ufk-ergebnisse{ display: grid; gap: 1rem; }
.ufk-ergebnis{
  padding: 1.25rem; border: 1px solid var(--ufk-linie); border-radius: var(--ufk-radius);
  background: var(--ufk-grund); box-shadow: var(--ufk-schatten);
}
.ufk-ergebnis__badge{
  display: inline-block; margin-bottom: .875rem; padding: .25rem .625rem; border-radius: 6px;
  background: var(--ufk-marke); color: var(--ufk-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.ufk-ergebnis__kern{ display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(13rem, 15rem); gap: 1.25rem; align-items: start; }
.ufk-ergebnis__bild{ border-radius: 10px; background: #fff; border: 1px solid var(--ufk-linie); aspect-ratio: 1; object-fit: contain; width: 132px; height: 132px; }
.ufk-ergebnis__name{ margin: 0 0 .375rem; font-size: 1.25rem; line-height: 1.3; color: var(--ufk-ink); text-wrap: balance; }
.ufk-ergebnis__marke{ display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ufk-mut); }
.ufk-warum{ display: grid; gap: .375rem; margin-top: .75rem; list-style: none; }
.ufk-warum li{ position: relative; padding-left: 1.5rem; font-size: .9375rem; }
.ufk-warum li::before{
  content: ""; position: absolute; left: 0; top: .3em; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--ufk-flaeche-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245739' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ufk-kaufbox{ display: flex; flex-direction: column; gap: .5rem; }
.ufk-ergebnis__weiter{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--ufk-linie); }
.ufk-ergebnis__weiter span{ font-size: .875rem; color: var(--ufk-mut); }
@media (max-width: 799px){
  .ufk-ergebnis__kern{ grid-template-columns: 88px minmax(0, 1fr); gap: .875rem 1rem; }
  .ufk-ergebnis__bild{ width: 88px; height: 88px; }
  .ufk-kaufbox{ grid-column: 1 / -1; }
}

/* Shared: price line, shop list, empty picture ---------------------------- */
.ufk-preiszeile{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; }
.ufk-preis__ab{ font-size: .875rem; font-weight: 600; color: var(--ufk-mut); }
.ufk-preiszeile__ohne{ font-size: .9375rem; font-weight: 600; color: var(--ufk-mut); }
.ufk-shopliste{ list-style: none; display: grid; gap: .25rem; }
.ufk-shopliste a{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; align-items: baseline;
  padding: .4375rem .625rem; border: 1px solid var(--ufk-linie); border-radius: 8px; text-decoration: none; color: var(--ufk-text); background: var(--ufk-grund);
}
.ufk-shopliste a:hover, .ufk-shopliste a:focus-visible{ border-color: var(--ufk-kauf); }
.ufk-shopliste li:first-child a{ border-color: var(--ufk-kauf); box-shadow: inset 0 0 0 1px var(--ufk-kauf); }
.ufk-shopliste__shop{ font-weight: 700; color: var(--ufk-kauf-dunkel); }
.ufk-shopliste__preis{ font-weight: 800; color: var(--ufk-ink); font-variant-numeric: tabular-nums; text-align: right; }
.ufk-shopliste__ohne{ font-size: .8125rem; color: var(--ufk-mut); text-align: right; }
.ufk-shopliste__vs{ grid-column: 1 / -1; font-size: .75rem; color: var(--ufk-mut); }
.ufk-bild-leer{ display: grid; place-items: center; background: var(--ufk-flaeche); color: var(--ufk-akzent); border-radius: 8px; }
.ufk-bild-leer svg{ width: 45%; height: 45%; max-width: 40px; max-height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 3. Sets ------------------------------------------------------------------ */
.ufk-tabs{ display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.ufk-tabs button{
  min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--ufk-linie-ui); border-radius: 999px;
  background: var(--ufk-grund); color: var(--ufk-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.ufk-tabs button:hover{ border-color: var(--ufk-akzent-dunkel); }
.ufk-tabs button[aria-selected="true"]{ background: var(--ufk-akzent-dunkel); border-color: var(--ufk-akzent-dunkel); color: #fff; }
.ufk-panel + .ufk-panel{ margin-top: 2.5rem; }
.ufk-panel__titel{ margin: 0 0 .75rem; font-size: 1.25rem; color: var(--ufk-ink); }
.ufk-js [data-ufk-tabs]:not([hidden]) ~ .ufk-panel .ufk-panel__titel{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ufk-panel__raster{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.25rem; align-items: start; }
.ufk-panel__raster--ohne{ grid-template-columns: minmax(0, 1fr); }
.ufk-zeichnung{ margin: 0; padding: .75rem; border-radius: var(--ufk-radius); background: var(--ufk-flaeche); position: sticky; top: 1rem; }
.ufk-zeichnung figcaption{ margin-top: .5rem; font-size: .8125rem; color: var(--ufk-mut); }
.ufk-schalter{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.ufk-schalter legend{ float: left; margin-right: .25rem; padding: 0; font-weight: 700; color: var(--ufk-ink); }
@media (max-width: 799px){
  .ufk-panel__raster{ grid-template-columns: minmax(0, 1fr); }
  .ufk-zeichnung{ position: static; }
}

/* Shop switch */
.ufk-shops{ display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .75rem; }
.ufk-shops__label{ margin-right: .25rem; font-weight: 700; color: var(--ufk-ink); }
.ufk-shops button{
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 44px; padding: .3125rem .875rem;
  border: 1px solid var(--ufk-linie-ui); border-radius: 10px; background: var(--ufk-grund); color: var(--ufk-ink);
  font: inherit; line-height: 1.2; text-align: left; cursor: pointer;
}
.ufk-shops button:hover{ border-color: var(--ufk-akzent-dunkel); }
.ufk-shops__name{ font-weight: 700; font-size: .9375rem; }
.ufk-shops__wert{ font-size: .8125rem; color: var(--ufk-mut); font-variant-numeric: tabular-nums; }
.ufk-shops button[aria-pressed="true"]{ background: var(--ufk-akzent-dunkel); border-color: var(--ufk-akzent-dunkel); color: #fff; }
.ufk-shops button[aria-pressed="true"] .ufk-shops__wert{ color: #D7E9D3; }

/* Rig drawing */
.ufk-rig{ display: block; width: 100%; height: auto; overflow: visible; }
.ufk-r-wasser{ fill: #E7F0EC; }
.ufk-r-luft{ fill: #F6F9F7; }
.ufk-r-oberflaeche{ fill: none; stroke: #8FB3A3; stroke-width: 1.5; }
.ufk-r-grund{ fill: #E6DDC6; }
.ufk-r-kiesel{ fill: #CFC3A6; }
.ufk-r-notiz{ font-size: 9px; fill: #5E6A64; }
.ufk-r-text{ font-size: 10px; fill: #5E6A64; }
.ufk-r-schnur{ fill: none; stroke: #34403A; stroke-width: 1.6; stroke-linecap: round; }
.ufk-r-schnur--geflochten{ stroke: #2F6B48; stroke-width: 1.8; stroke-dasharray: 4 2; }
.ufk-r-vorfach{ fill: none; stroke: #5E6A64; stroke-width: 1.3; stroke-linecap: round; }
.ufk-r-vorfach--geflochten{ stroke: #3D5A45; stroke-width: 2; stroke-dasharray: 3 2; }
.ufk-r-stahlvorfach{ fill: none; stroke: #7C8682; stroke-width: 2.2; stroke-linecap: round; }
.ufk-r-rohr{ fill: none; stroke: #26302B; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ufk-r-schlauch{ fill: none; stroke: #5B6B3A; stroke-width: 5.5; stroke-linecap: round; }
.ufk-r-stahl{ fill: none; stroke: #59625E; stroke-width: 6; stroke-linecap: round; }
.ufk-r-stahl-licht{ fill: none; stroke: #B8C0BC; stroke-width: 1.2; stroke-linecap: round; }
.ufk-r-snap{ fill: none; stroke: #59625E; stroke-width: 1.6; stroke-linecap: round; }
.ufk-r-korb{ fill: rgba(47,107,72,.14); stroke: #245739; stroke-width: 1.8; }
.ufk-r-korb-kappe{ fill: #245739; }
.ufk-r-korb-gitter{ fill: none; stroke: #245739; stroke-width: 1; opacity: .7; }
.ufk-r-blei{ fill: #8C939A; stroke: #5E6470; stroke-width: 1.4; }
.ufk-r-krallen{ fill: none; stroke: #5E6470; stroke-width: 1.4; stroke-linecap: round; }
.ufk-r-clip{ fill: #4F5A32; stroke: #3B4426; stroke-width: 1; }
.ufk-r-perle{ fill: #D9822B; stroke: #A8580F; stroke-width: 1; }
.ufk-r-stopper{ fill: #3B4426; }
.ufk-r-pose{ fill: #F4F1E8; stroke: #26302B; stroke-width: 1.4; }
.ufk-r-pose-antenne{ fill: none; stroke: #26302B; stroke-width: 2.2; stroke-linecap: round; }
.ufk-r-pose-spitze{ fill: none; stroke: #C2410C; stroke-width: 3; stroke-linecap: round; }
.ufk-r-wirbel{ fill: none; stroke: #26302B; stroke-width: 1.6; }
.ufk-r-wirbel-koerper{ fill: #26302B; }
.ufk-r-haken{ fill: none; stroke: #26302B; stroke-width: 2; stroke-linecap: round; }
.ufk-r-koeder{ fill: #F3E6C8; stroke: #B9A57A; stroke-width: .8; }
.ufk-r-wurm{ fill: none; stroke: #B86A6A; stroke-width: 3; stroke-linecap: round; }
.ufk-r-boilie{ fill: #D9A066; stroke: #A8743F; stroke-width: 1.2; }
.ufk-r-wobbler{ fill: #E3B341; stroke: #8A6516; stroke-width: 1.4; }
.ufk-r-koeder-lippe{ fill: rgba(255,255,255,.7); stroke: #5E6A64; stroke-width: 1; }
.ufk-r-auge{ fill: #1F2A24; }
.ufk-r-teil{ transition: opacity .15s ease; }
.ufk-rig.hat-fokus .ufk-r-teil{ opacity: .35; }
.ufk-rig.hat-fokus .ufk-r-teil.ist-aktiv{ opacity: 1; filter: drop-shadow(0 0 3px #F2C14E) drop-shadow(0 0 2px #F2C14E); }
.ufk-marke{ cursor: pointer; }
.ufk-marke circle{ fill: #245739; stroke: #fff; stroke-width: 2; }
.ufk-marke text{ fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.ufk-marke:hover circle, .ufk-marke.ist-aktiv circle{ fill: #F2C14E; stroke: #1F2A24; }
.ufk-marke:hover text, .ufk-marke.ist-aktiv text{ fill: #1F2A24; }
.ufk-marke:focus{ outline: none; }
.ufk-marke:focus-visible circle{ stroke: #1F2A24; stroke-width: 3; }
.ufk-rig [data-ufk-nur].ist-aus{ display: none; }

/* Shopping list */
.ufk-liste{ list-style: none; display: grid; gap: .5rem; }
.ufk-teil{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; align-items: center;
  padding: .75rem .875rem; border: 1px solid var(--ufk-linie); border-radius: 10px; background: var(--ufk-grund);
  transition: border-color .15s ease, background-color .15s ease;
}
.ufk-teil__varianten{ min-width: 0; }
.ufk-variante{ display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .25rem .875rem; align-items: center; }
.ufk-variante--hinweis, .ufk-variante--fehlt{ grid-template-columns: 56px minmax(0, 1fr); }
.ufk-teil.ist-aktiv{ border-color: var(--ufk-akzent-dunkel); box-shadow: inset 0 0 0 1px var(--ufk-akzent-dunkel); }
.ufk-teil.ist-erledigt{ background: var(--ufk-flaeche); }
.ufk-teil.ist-erledigt :is(.ufk-teil__bild, .ufk-teil__produkt, .ufk-teil__kauf){ opacity: .45; }
.ufk-teil.ist-erledigt .ufk-teil__preis{ text-decoration: line-through; }
.ufk-teil.ist-aus{ background: var(--ufk-flaeche); border-style: dashed; }
.ufk-teil.ist-aus :is(.ufk-teil__bild, .ufk-teil__produkt, .ufk-teil__variante, .ufk-teil__kauf, .ufk-hab){ display: none; }
.ufk-teil.ist-aus .ufk-variante{ grid-template-columns: minmax(0, 1fr); }
.ufk-teil__aushinweis{ display: none; font-size: .875rem; color: var(--ufk-mut); }
.ufk-teil.ist-aus .ufk-teil__aushinweis{ display: block; }
.ufk-teil.ist-aus .ufk-teil__nr{ background: var(--ufk-linie-ui); }
.ufk-teil__nr{
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ufk-akzent-dunkel); color: #fff; font-weight: 800; font-size: .875rem; cursor: pointer;
}
.ufk-teil.ist-aktiv .ufk-teil__nr{ background: var(--ufk-marke); color: var(--ufk-ink); }
.ufk-teil__bild{ width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--ufk-linie); background: #fff; }
.ufk-teil__bild.ufk-bild-leer{ background: var(--ufk-flaeche); }
.ufk-teil__rolle{ font-weight: 700; color: var(--ufk-ink); line-height: 1.3; }
.ufk-teil__produkt, .ufk-teil__variante{ font-size: .875rem; color: var(--ufk-mut); line-height: 1.35; }
.ufk-variante--fehlt .ufk-teil__variante{ color: var(--ufk-text); }
.ufk-teil__info{ font-size: .875rem; font-weight: 600; }
.ufk-teil__kauf{ display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; text-align: right; }
.ufk-teil__preis{ font-weight: 800; color: var(--ufk-ink); font-variant-numeric: tabular-nums; }
.ufk-teil__ohne{ font-size: .8125rem; color: var(--ufk-mut); }
.ufk-link-kauf{ font-size: .875rem; font-weight: 700; color: var(--ufk-kauf-dunkel); }
.ufk-link-kauf:hover, .ufk-link-kauf:focus-visible{ color: var(--ufk-kauf); }
.ufk-hab{ grid-column: 2; display: inline-flex; align-items: center; gap: .5rem; width: fit-content; min-height: 32px; padding-left: calc(56px + .875rem); font-size: .875rem; color: var(--ufk-mut); cursor: pointer; }
.ufk-hab input{ width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ufk-akzent-dunkel); }
@media (max-width: 479px){
  .ufk-variante{ grid-template-columns: 48px minmax(0, 1fr); }
  .ufk-teil__bild{ width: 48px; height: 48px; }
  .ufk-teil__kauf{ grid-column: 2; flex-direction: row; align-items: baseline; gap: .75rem; }
  .ufk-hab{ padding-left: calc(48px + .875rem); }
}

.ufk-summe{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: end;
  margin-top: .75rem; padding: 1rem 1.125rem; border-radius: 10px; background: var(--ufk-akzent-dunkel); color: #fff;
}
.ufk-summe__zeile{ font-size: .9375rem; }
.ufk-summe__betrag{ grid-row: span 2; align-self: center; font-size: 1.625rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ufk-summe__info{ font-size: .8125rem; color: #D7E9D3; }
.ufk-summe__aktion{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }
.ufk-summe .ufk-knopf{ border-color: #fff; background: transparent; color: #fff; }
.ufk-summe .ufk-knopf:hover, .ufk-summe .ufk-knopf:focus-visible{ background: #fff; color: var(--ufk-akzent-dunkel); }
.ufk-summe :focus-visible{ outline-color: #fff; }
.ufk-kopiert{ font-size: .875rem; font-weight: 700; color: var(--ufk-marke); }
.ufk-listetext{ grid-column: 1 / -1; width: 100%; font: inherit; font-size: .875rem; color: var(--ufk-ink); }
.ufk-amazon{ display: grid; gap: .5rem; margin-top: .75rem; padding: 1rem 1.125rem; border: 2px solid var(--ufk-kauf); border-radius: 10px; background: #FFF7F2; }
.ufk-amazon__titel{ font-weight: 800; color: var(--ufk-ink); }
.ufk-amazon__info{ font-size: .8125rem; color: var(--ufk-mut); }
.ufk-amazon.ist-haupt{ background: var(--ufk-kauf); border-color: var(--ufk-kauf); }
.ufk-amazon.ist-haupt .ufk-amazon__titel, .ufk-amazon.ist-haupt .ufk-amazon__info{ color: #fff; }
.ufk-amazon.ist-haupt .ufk-kauf{ background: #fff; color: var(--ufk-kauf-dunkel); }
.ufk-kauf--amazon{ justify-self: start; }

.ufk-panel__unten{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.25rem; margin-top: 1.25rem; }
.ufk-panel__unten--eins{ grid-template-columns: minmax(0, 1fr); }
.ufk-schritte h4, .ufk-dazu__titel{ margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; color: var(--ufk-ink); }
.ufk-schritte ol{ display: grid; gap: .5rem; padding-left: 0; list-style: none; counter-reset: ufk-schritt; }
.ufk-schritte li{ position: relative; padding-left: 2.25rem; counter-increment: ufk-schritt; }
.ufk-schritte li::before{
  content: counter(ufk-schritt); position: absolute; left: 0; top: .05em;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 6px;
  background: var(--ufk-flaeche-tief); color: var(--ufk-akzent-dunkel); font-weight: 800; font-size: .8125rem;
}
.ufk-quellenzeile{ margin-top: .625rem; font-size: .8125rem; color: var(--ufk-mut); }
.ufk-quellenzeile a{ color: var(--ufk-mut); }
.ufk-dazu{ align-self: start; padding: 1rem; border: 1px dashed var(--ufk-linie-ui); border-radius: var(--ufk-radius); }
.ufk-dazu__kern{ display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .875rem; align-items: start; }
.ufk-dazu__kern > img, .ufk-dazu__kern > .ufk-bild-leer{ width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--ufk-linie); }
.ufk-dazu__kern > div{ display: grid; gap: .375rem; }
.ufk-dazu__text{ font-size: .9375rem; }
.ufk-dazu__produkt{ font-weight: 700; color: var(--ufk-ink); }
@media (max-width: 799px){
  .ufk-panel__unten{ grid-template-columns: minmax(0, 1fr); }
}


/* 4. Typen ---------------------------------------------------------------- */
.ufk-tabelle{ overflow-x: auto; border: 1px solid var(--ufk-linie); border-radius: var(--ufk-radius); }
.ufk-tabelle table{ width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.ufk-tabelle :is(th, td){ padding: .75rem .875rem; border-bottom: 1px solid var(--ufk-linie); text-align: left; vertical-align: top; }
.ufk-tabelle thead th{ white-space: nowrap; background: var(--ufk-flaeche); color: var(--ufk-ink); font-size: .8125rem; letter-spacing: .03em; text-transform: uppercase; }
.ufk-tabelle tbody tr:last-child > *{ border-bottom: 0; }
.ufk-tabelle tbody th{ color: var(--ufk-ink); }
.ufk-typ{ display: flex; align-items: center; gap: .625rem; }
.ufk-typ svg{ width: 40px; height: 40px; flex: none; color: var(--ufk-ink); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ufk-tabelle td.ufk-zahl{ white-space: nowrap; font-weight: 800; color: var(--ufk-akzent-dunkel); font-variant-numeric: tabular-nums; }
@media (max-width: 639px){
  .ufk-tabelle{ border: 0; overflow: visible; }
  .ufk-tabelle table, .ufk-tabelle tbody, .ufk-tabelle tr, .ufk-tabelle :is(th, td){ display: block; }
  .ufk-tabelle thead{ display: none; }
  .ufk-tabelle tbody{ display: grid; gap: .625rem; }
  .ufk-tabelle tr{ padding: .75rem .875rem; border: 1px solid var(--ufk-linie); border-radius: 10px; }
  .ufk-tabelle :is(th, td){ padding: .25rem 0; border: 0; }
  .ufk-tabelle td::before{ content: attr(data-label) ": "; font-weight: 700; color: var(--ufk-ink); }
}

/* 5. Angebote ------------------------------------------------------------- */
.ufk-werkzeug{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.ufk-filter{ display: flex; flex-wrap: wrap; gap: .375rem; }
.ufk-filter button{
  min-height: 40px; padding: .375rem .875rem; border: 1px solid var(--ufk-linie-ui); border-radius: 999px;
  background: var(--ufk-grund); color: var(--ufk-ink); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.ufk-filter button[aria-pressed="true"]{ background: var(--ufk-akzent-dunkel); border-color: var(--ufk-akzent-dunkel); color: #fff; }
.ufk-sort{ display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--ufk-ink); }
.ufk-sort select{ min-height: 40px; padding: .375rem 2rem .375rem .75rem; border: 1px solid var(--ufk-linie-ui); border-radius: 8px; background-color: var(--ufk-grund); color: var(--ufk-ink); font: inherit; }
.ufk-karten{ list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .875rem; }
.ufk-karte{
  display: flex; flex-direction: column; gap: .375rem;
  padding: 1rem; border: 1px solid var(--ufk-linie); border-radius: var(--ufk-radius); background: var(--ufk-grund);
}
.ufk-karte__bild{ width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 200px; object-fit: contain; margin-bottom: .375rem; border-radius: 8px; background: #fff; }
.ufk-karte__typ{ font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ufk-akzent); }
.ufk-karte__name{ margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--ufk-ink); }
.ufk-karte__kurz{ font-size: .875rem; color: var(--ufk-mut); }
.ufk-karte__preise{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; margin-top: auto; padding-top: .5rem; }
.ufk-karte__preise .ufk-preis{ font-size: 1.375rem; }
.ufk-karte__haendler{ font-size: .8125rem; color: var(--ufk-mut); }
.ufk-karte .ufk-kauf{ margin-top: .5rem; }
.ufk-karte--amazon{ background: var(--ufk-flaeche); border-style: dashed; justify-content: center; }
.ufk-karte--amazon .ufk-kauf{ background: var(--ufk-grund); color: var(--ufk-kauf-dunkel); border: 2px solid var(--ufk-kauf); }
.ufk-karte--amazon .ufk-kauf:hover, .ufk-karte--amazon .ufk-kauf:focus-visible{ background: var(--ufk-kauf); color: #fff; }
.ufk-leer{ padding: 1rem; border-radius: 10px; background: var(--ufk-flaeche); }
.ufk-fussnote{ margin-top: 1rem; font-size: .8125rem; color: var(--ufk-mut); }

/* 6. Quellen -------------------------------------------------------------- */
.ufk-quellen{ padding: 1rem 1.25rem; border-radius: var(--ufk-radius); background: var(--ufk-flaeche); font-size: .875rem; }
.ufk-quellen h2.ufk-quellen__titel{ margin: 0 0 .5rem; font-size: 1rem; letter-spacing: 0; }
.ufk-quellen ol{ padding-left: 1.5rem; display: grid; gap: .25rem; }
.ufk-quellen li{ padding-left: .25rem; }
.ufk-quellen li:target{ background: var(--ufk-marke); border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  .ufk *, .ufk *::before, .ufk *::after{ transition: none; }
}

/* Offer cards: shop comparison ---------------------------------------------- */
.ufk-karte .ufk-preiszeile{ margin-top: auto; padding-top: .5rem; }
.ufk-karte .ufk-preis{ font-size: 1.375rem; }
.ufk-karte__shops{ font-size: .875rem; }
.ufk-karte__shops summary{ cursor: pointer; font-weight: 700; color: var(--ufk-akzent-dunkel); padding: .25rem 0; }
.ufk-karte__shops .ufk-shopliste{ margin-top: .375rem; }
.ufk-karte__bild.ufk-bild-leer{ aspect-ratio: 4 / 3; max-height: 200px; }
.ufk-kauf--rand{ background: var(--ufk-grund); color: var(--ufk-kauf-dunkel); border: 2px solid var(--ufk-kauf); }
.ufk-kauf--rand:hover, .ufk-kauf--rand:focus-visible{ background: var(--ufk-kauf); color: #fff; }