/* =========================================================================
   Wissen (wissen.html) – FAQ + Glossar mit gemeinsamer Suche (brand.md §16.10, §17.8)
   Redesign 10/2026 (brand.md §22, components.md §15). Owner: Wissen.
   Nur Blöcke mit Präfix .wissen-, nur Tokens (keine Hex-Werte). Globale Komponenten
   (.page-hero, .accordion, .glossary, .chip, .note, .stk …) werden nicht umdefiniert,
   sondern über Zusatzklassen erweitert.

   Gestaltungsidee
   · Hero: Suchkarte als große runde Karte, die vier Feld-Sticker schweben darum,
     unten läuft ein Band mit Fachbegriffen („Finanzdeutsch“) mit dem Scrollen mit.
     Das ist die einzige Bewegung der Seite – Listen, Suche und Filter bleiben ruhig.
   · Häufige Fragen: jede Themengruppe ist eine große weiße Karte, der Kopf mit
     Sticker (feste Bedeutung) klebt links, die Fragen stehen als Eis-Pillen rechts.
   · Glossar: die Steuerung (Buchstaben + Feld-Filter) ist eine tiefe Petrol-Karte,
     die Begriffe liegen als weiße Karteikarten mit Fuge neben einer Buchstaben-Kachel.
   ========================================================================= */

/* Abstand unter Header + Unternavigation für alle sticky Köpfe
   (--header-offset setzt main.js nur, wenn der Header umbricht) */
.wissen-faq,
.wissen-glossar {
  --wissen-sticky-top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + var(--space-5));
}


/* =========================================================================
   1 · Page-Hero: Sticker in der H1, Suchkarte, Laufband
   (Eyebrow mit Viertel-Punkt kommt global: .page-hero__text > .eyebrow)
   ========================================================================= */
.wissen-hero { padding-bottom: clamp(var(--space-7), 2rem + 3vw, var(--space-8)); }
.wissen-hero__stk { --s: 0.76em; margin: 0 0.04em 0 0.12em; vertical-align: 0.02em; }

/* Die Suche funktioniert nur mit JavaScript – ohne JS entfällt die Karte samt Deko,
   alle Inhalte bleiben vollständig lesbar (Unternavigation führt zu FAQ und Glossar). */
.wissen-finder {
  display: none;
  position: relative;
  padding: clamp(var(--space-5), 0.9rem + 1.8vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.05), var(--shadow-lg);
  color: var(--c-ink);
}
.js .wissen-finder { display: block; }
.wissen-finder__search {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
}

.wissen-finder__label {
  max-width: 14em;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--heading);
  text-wrap: balance;
}

.wissen-finder__field {
  position: relative;
  margin-top: var(--space-2);
}
.wissen-finder__icon {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  color: var(--c-blue-700);
  stroke-width: 2;
  pointer-events: none;
}
.wissen-finder__input {
  min-height: 3.75rem;
  padding-left: calc(1.25rem + var(--icon) + var(--space-3));
  padding-right: calc(var(--tap) + var(--space-3));
  border-radius: var(--r-pill);
  background: var(--c-ice-50);
  font-size: 1.125rem;
}
.wissen-finder__input:hover { background: var(--c-white); }
.wissen-finder__input:focus-visible { background: var(--c-white); }
.wissen-finder__input::-webkit-search-decoration { -webkit-appearance: none; }
.wissen-finder__clear {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--c-ice-100);
  color: var(--c-blue-700);
  transform: translateY(-50%);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.wissen-finder__clear .icon { width: 20px; height: 20px; stroke-width: 2; }
.wissen-finder__clear:hover { background: var(--c-blue-700); color: var(--c-white); }

.wissen-finder__status {
  min-height: 1.5em;
  max-width: none;
  padding-inline: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.wissen-finder__status strong { color: var(--text); }
.wissen-finder__status,
.wissen-result__text,
.wissen-empty p,
.wissen-glossar__count { hyphens: manual; }

.wissen-finder__suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--c-ice-300);
}
.wissen-finder__suggest-label {
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.wissen-finder__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wissen-finder__suggestion {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--c-ice-300);
  border-radius: var(--r-pill);
  background: var(--c-ice-50);
  color: var(--c-blue-700);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  hyphens: manual;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
.wissen-finder__suggestion:hover {
  background: var(--c-blue-700);
  border-color: var(--c-blue-700);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* Schwebende Feld-Sticker um die Suchkarte (Deko; motion.js bewegt den Wrapper,
   der Sticker selbst ploppt beim Laden auf und behält seine Drehung) */
.wissen-finder__deko {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}
.wissen-finder__deko--a { top: -30px; right: -18px; }
.wissen-finder__deko--b { bottom: -26px; right: 20%; }
.wissen-finder__deko--c { top: 26%; left: -20px; }
@media (max-width: 1023.98px) {
  .wissen-finder__deko--a { top: -28px; right: 10px; }
  .wissen-finder__deko--a .stk { --s: 56px; }
  .wissen-finder__deko--b { bottom: -20px; right: 22%; }
  .wissen-finder__deko--b .stk { --s: 44px; }
  .wissen-finder__deko--c { display: none; }
  .wissen-finder__label { padding-right: 3.5rem; }
}

/* Laufband „Finanzdeutsch“: ohne Bewegung ein ruhiger, gerader Streifen (eine Zeile, Ränder
   blenden aus); mit Bewegung leicht schräg und an die Scrollposition gekoppelt (motion.js) */
.wissen-tape {
  position: relative;
  margin-top: clamp(var(--space-7), 1.5rem + 4vw, var(--space-9));
  padding-block: clamp(0.75rem, 0.55rem + 0.8vw, 1.25rem);
  background: var(--c-blue-700);
  color: var(--c-white);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-blue-950) 6%, var(--c-blue-950) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--c-blue-950) 6%, var(--c-blue-950) 94%, transparent 100%);
}
.wissen-tape .marquee__list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left: var(--gutter);
}
.wissen-tape li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-right: 0.75em;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.7rem + 1.35vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wissen-tape li::after {
  content: "";
  flex: none;
  width: 0.48em;
  height: 0.48em;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-300);
}
.wissen-tape li:nth-child(even)::after { border-radius: 0 100% 0 0; background: var(--c-ice-300); }
.mo .wissen-tape {
  margin-inline: -3vw;
  rotate: -2deg;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 24px 44px -26px rgba(var(--shadow-c), 0.75);
}
.mo .wissen-tape .marquee__list { padding-left: 0; }


/* =========================================================================
   2 · Suchergebnis-Zeile und Leerzustand (nur während einer Suche sichtbar)
   ========================================================================= */
.wissen-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.wissen-result__text {
  max-width: none;
  font-size: var(--fs-small);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.wissen-result__reset { padding-inline: var(--space-4); }
.wissen-empty { margin-bottom: var(--space-5); border-radius: var(--r-lg); }
.wissen-faq .wissen-empty { background: var(--c-white); box-shadow: var(--shadow-sm); }
.wissen-glossar .wissen-empty { margin-bottom: var(--space-7); }
.wissen-empty .note__body > p:last-child { margin-top: var(--space-3); }
.wissen-empty .btn--ghost { padding-inline: 0; }
@media (max-width: 479.98px) {
  .wissen-result { border-radius: var(--r-lg); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
}


/* =========================================================================
   3 · Häufige Fragen – jede Themengruppe eine große weiße Karte
   ========================================================================= */
.wissen-faq__groups {
  display: grid;
  gap: clamp(var(--space-4), 0.6rem + 1.2vw, var(--space-5));
}
.wissen-faq__group {
  --card-bg: var(--c-ice-50);   /* Fragen als Eis-Pillen auf der weißen Karte */
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-4), 0.4rem + 2.4vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
/* Rhythmus wie auf der Startseite: weiße und eisblaue Karten im Wechsel */
.wissen-faq__group:nth-child(even) {
  --card-bg: var(--c-white);
  background: var(--c-ice-200);
  box-shadow: none;
}
.wissen-faq__group:nth-child(even) .wissen-faq__count { background: var(--c-white); }
.wissen-faq__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}
.wissen-faq__stk { grid-row: 1 / span 2; }
.wissen-faq__title {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.wissen-faq__count {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 1.9em;
  max-width: 100%;
  padding: 0 0.85em;
  border-radius: var(--r-pill);
  background: var(--c-ice-100);
  color: var(--c-ink-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

.wissen-faq__list .accordion__item[open] {
  background: var(--c-white);
  box-shadow: inset 0 0 0 1.5px var(--c-ice-200), var(--shadow-md);
}
.wissen-faq__item { position: relative; }
.wissen-faq__more { padding-top: var(--space-1); }

/* Fünf Schritte in der Antwort „Wie geht es weiter?“ – Nummern als Pillen */
.wissen-steps {
  display: grid;
  gap: var(--space-3);
  counter-reset: wissen-step;
}
.wissen-steps > li {
  position: relative;
  max-width: var(--measure);
  padding-left: 3rem;
  counter-increment: wissen-step;
}
.wissen-steps > li::before {
  content: counter(wissen-step, decimal-leading-zero);
  position: absolute;
  top: 0.2em;
  left: 0;
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 1.6rem;
  border-radius: var(--r-pill);
  background: var(--c-ice-200);
  color: var(--c-blue-900);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 599.98px) {
  /* schmale Karte: Fragen nutzen die Breite, Kopf bleibt kompakt */
  .wissen-faq__list .accordion__summary { padding-left: var(--space-4); padding-right: var(--space-3); }
  .wissen-faq__list .accordion__panel { padding-inline: var(--space-4); }
}
@media (min-width: 1024px) {
  .wissen-faq__group {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--grid-gap) * 1.5);
    align-items: start;
  }
  .wissen-faq__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    row-gap: var(--space-4);
    position: sticky;
    top: var(--wissen-sticky-top);
  }
  .wissen-faq__stk { grid-row: auto; margin-bottom: var(--space-2); }
}


/* =========================================================================
   4 · Glossar – Steuerung als tiefe Petrol-Karte, Begriffe als Karteikarten
   ========================================================================= */
.wissen-glossar__tools {
  display: grid;
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-7), 1.5rem + 3vw, var(--space-8));
  padding: clamp(var(--space-5), 0.8rem + 2.4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--gradient-deep);
  box-shadow: var(--shadow-lg);
}

/* Buchstabenleiste: helle Kacheln (Setzkasten), Buchstaben ohne Einträge nur als Umriss */
.wissen-alphabet__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr));
  gap: 6px;
}
.wissen-alphabet__list > li { display: flex; }
.wissen-alphabet__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  border-radius: var(--r-sm);
  background: var(--gloss-sticker-light);
  box-shadow: inset 0 1px 0 var(--c-white), 0 10px 18px -12px rgba(var(--shadow-c), 0.9);
  color: var(--c-blue-700);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
a.wissen-alphabet__item[href]:hover {
  background: var(--c-white);
  color: var(--c-blue-900);
  transform: translateY(-3px);
}
.wissen-alphabet__item:focus-visible {
  position: relative;
  z-index: 1;
}
.wissen-alphabet__item--empty,
.wissen-alphabet__item.is-disabled,
.wissen-alphabet__item--empty:hover,
.wissen-alphabet__item.is-disabled:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
  color: var(--text-muted);
  opacity: 0.55;
  transform: none;
  cursor: default;
}
@media (min-width: 768px) {
  .wissen-alphabet__list { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: var(--fuge); }
  .wissen-alphabet__item { min-height: 3.25rem; font-size: 1.375rem; }
}

/* Feld-Filter + Zähler */
.wissen-glossar__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.wissen-fields { display: none; min-width: 0; }
.js .wissen-fields { display: block; }
.wissen-fields__legend {
  margin-bottom: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.wissen-fields__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Chips auf Petrol: transparente Pillen, gewählt = weiß (Haken folgt der Schriftfarbe) */
.wissen-fields__chip .chip__label {
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0 1.125rem 0 0.4rem;
  border-color: var(--line-on-dark);
  background: rgba(var(--shadow-c), 0.35);
  color: var(--c-on-dark);
}
.wissen-fields__chip:hover .chip__label {
  border-color: var(--c-on-dark-2);
  background: rgba(var(--shadow-c), 0.55);
}
.wissen-fields__chip .chip__input:checked + .chip__label {
  border-color: var(--c-white);
  background: var(--c-white);
  color: var(--c-blue-900);
}
.wissen-fields__chip .chip__label::before {
  order: 3;
  background: currentColor;
  -webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  margin-left: 0;
  margin-right: calc(-1 * var(--space-2));
}
.wissen-fields__chip .chip__input:checked + .chip__label::before { margin-right: 0; }
.wissen-fields__stk { --s: 2.125rem; margin: 0; vertical-align: middle; }
.wissen-fields__stk > svg { stroke-width: 1.9; }

.wissen-glossar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--tap);
}
.wissen-glossar__count {
  max-width: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.wissen-glossar__count strong { color: var(--text); }

/* Register: Buchstaben-Kachel + Karteikarten mit Fuge */
.wissen-glossar__list {
  display: grid;
  gap: clamp(var(--space-6), 1.2rem + 2.4vw, var(--space-8));
}
.wissen-letter {
  display: grid;
  gap: var(--space-4);
}
.wissen-letter__title {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-md);
  background: var(--c-blue-700);
  box-shadow: inset 0 1px 0 var(--c-blue-500), 0 14px 26px -16px rgba(var(--shadow-c), 0.8);
  color: var(--c-white);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  rotate: -4deg;
}
.wissen-letter:nth-child(even) .wissen-letter__title { rotate: 3deg; background: var(--c-blue-900); }
.wissen-letter__entries { gap: var(--fuge); }

.wissen-entry {
  position: relative;
  padding: clamp(var(--space-5), 0.9rem + 1.4vw, 2.25rem);
  border-top: 0;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.wissen-entry dt {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-3);
}
.wissen-entry__term { display: block; max-width: 100%; }
.wissen-entry__field {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 100%;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--c-ice-50);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  hyphens: manual;
}
.wissen-entry__quad { width: 16px; height: 16px; margin-top: -1px; }
.wissen-entry dd > * + * { margin-top: var(--space-3); }
.wissen-entry__tool { font-size: var(--fs-small); }
.wissen-entry__tool .link-arrow { padding-block: var(--space-1); }

@media (min-width: 768px) {
  .wissen-letter {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: clamp(var(--space-4), 2vw, var(--space-6));
    align-items: start;
  }
  .wissen-letter__title {
    position: sticky;
    top: var(--wissen-sticky-top);
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--r-lg);
    font-size: 2.25rem;
  }
}
@media (min-width: 1024px) {
  .wissen-letter { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .wissen-letter__title { width: 5.5rem; height: 5.5rem; font-size: 2.75rem; }
  .wissen-entry.glossary__entry { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--grid-gap) * 1.5); }
}
/* Kleine Viewport-Höhe (Zoom, Tablet quer): Header und Subnav scrollen dann mit (global),
   die Köpfe und Kacheln kleben deshalb auch nicht */
@media (max-height: 500px) {
  .wissen-faq__head,
  .wissen-letter__title { position: static; }
}


/* =========================================================================
   5 · Sprungziel markieren (Glossar-Begriff oder FAQ per Anker)
   Ring in Petrol + einmaliges, kurzes Aufhellen der Karte.
   ========================================================================= */
.wissen-entry:target,
.wissen-faq__item:target {
  box-shadow: 0 0 0 2px var(--c-blue-500), var(--shadow-md);
  animation: wissen-flash 1.6s var(--ease-out) 1;
}
@keyframes wissen-flash {
  from { background-color: var(--c-ice-200); }
}
/* Fokus nach „Enter“ in der Suche (Eintrag bekommt kurz tabindex="-1") */
.wissen-entry:focus-visible { outline-offset: var(--space-1); border-radius: var(--r-lg); }


/* =========================================================================
   6 · Frieda-Tipp – weiße Karte, Kopf als gekippte Kachel, Pfoten-Sticker
   ========================================================================= */
.wissen-frieda__note {
  position: relative;
  max-width: 50rem;
  margin-inline: auto;
  rotate: -1deg;
  gap: clamp(var(--space-4), 0.6rem + 1.8vw, var(--space-6));
  padding: clamp(var(--space-5), 0.8rem + 2.2vw, 2.75rem);
  border-radius: var(--r-xl);
}
/* Frieda füllt im Originalbild nur einen kleinen Teil – die Kachel zeigt
   deshalb einen engeren Ausschnitt um den Kopf (Bild bleibt unverändert). */
.wissen-frieda__portrait {
  flex: none;
  width: clamp(64px, 3.2rem + 2.4vw, 96px);
  height: clamp(64px, 3.2rem + 2.4vw, 96px);
  overflow: hidden;
  border: 3px solid var(--c-white);
  border-radius: var(--r-md);
  background: var(--c-ice-100);
  box-shadow: 0 0 0 1px var(--c-ice-200), var(--shadow-md);
  rotate: -6deg;
}
.wissen-frieda__portrait .wissen-frieda__img {   /* schlägt .note--frieda .avatar (56px, ohne Zoom) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.9);
  transform-origin: 40% 50%;
}
.wissen-frieda__text {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--heading);
  hyphens: manual;
  text-wrap: pretty;
}
.wissen-frieda__paw {
  position: absolute;
  top: -22px;
  right: clamp(20px, 4vw, 44px);
}
@media (max-width: 479.98px) {
  .wissen-frieda__note { align-items: flex-start; }
  .wissen-frieda__paw { --s: 44px; top: -18px; }
}


/* =========================================================================
   7 · Druck: Suche, Band, Leisten und Filter weg, Karten flach, nichts sticky
   ========================================================================= */
@media print {
  /* Suchkarte (inkl. Deko), Laufband, Buchstabenleiste und Filter tragen data-no-print (global ausgeblendet) */
  .wissen-faq__group,
  .wissen-faq__group:nth-child(even),
  .wissen-entry {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .wissen-faq__groups { gap: 8mm; }
  .wissen-faq__group { display: block; }
  .wissen-faq__head { position: static; display: flex; align-items: center; gap: 3mm; margin-bottom: 3mm; }
  .wissen-faq__stk,
  .wissen-hero__stk,
  .wissen-frieda__paw { display: none; }
  .wissen-faq__count { background: none; padding: 0; }
  .wissen-letter { display: block; }
  .wissen-letter:nth-child(n) .wissen-letter__title {
    position: static;
    width: auto;
    height: auto;
    display: block;
    margin-bottom: 2mm;
    background: none;
    box-shadow: none;
    rotate: none;
    color: var(--c-blue-700);
    font-size: 18pt;
  }
  .wissen-letter__entries { gap: 0; }
  .wissen-entry { padding-block: 3mm; border-top: 1px solid var(--c-ice-300); break-inside: avoid; }
  .wissen-entry__field { padding: 0; background: none; }
  .wissen-entry:target,
  .wissen-faq__item:target { animation: none; box-shadow: none; }
  .wissen-steps > li::before { background: none; }
  .wissen-frieda__note,
  .wissen-frieda__portrait { rotate: none; box-shadow: none; }
  /* Geschlossene Antworten druckt die globale Regel (auch über ::details-content) –
     der Auf-/Zu-Pfeil ist auf Papier ohne Funktion */
  .wissen-faq__item .accordion__icon { display: none; }
}