/* ========================================================
   Startseite: Diagnose („Wir kennen das selbst.“), DE und EN
   Sechs Flip-Karten: vorn die Sorge mit kleiner Szene, hinten die
   Lösung in Navy, dieselbe Szene im gelösten Zustand. pains.js
   dreht die Karten und zählt mit. Ohne Skript stehen Vorder- und
   Rückseite untereinander, alles bleibt lesbar.
   ======================================================== */

.pn {
  --pn-face: var(--surface);
  --pn-vis: #EEF1F4;
  --pn-paper: #FFFFFF;
  --pn-line: var(--border);
  --pn-skel: rgba(15, 44, 71, 0.13);
  --pn-cell: rgba(15, 44, 71, 0.05);
  --pn-accent: var(--brand-dark);
  --pn-navy: #0F2C47;
  --pn-late: #8F3D24;
  --pn-late-bg: #F6E4DB;
  --pn-ok: #2F6A2B;
  --pn-ok-bg: #E5EFE2;
  --pn-strike: #A0442A;
  --pn-bar: #6F93B4;
  --pn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pn-flip: cubic-bezier(0.32, 0.72, 0.18, 1);
}
html[data-theme="dark"] .pn {
  --pn-vis: #22262B;
  --pn-paper: #2A2E34;
  --pn-skel: rgba(242, 242, 240, 0.15);
  --pn-cell: rgba(242, 242, 240, 0.06);
  --pn-navy: #0D2236;
  --pn-late: #E39A7C;
  --pn-late-bg: #3A2A26;
  --pn-ok: #7BBF74;
  --pn-ok-bg: #24332A;
  --pn-strike: #E39A7C;
}
.pn [hidden] { display: none !important; }
.pn-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopf ---------- */
.pn-head h2 { margin-top: 14px; }
.pn-lede { margin-top: 18px; max-width: 40ch; font-size: 17px; line-height: 1.55; color: var(--ink-60); }
.pn-link { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pn-link:hover { color: var(--ink); }
.pn-link:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; border-radius: 3px; }
.pn-prompt { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 16px; font-weight: 500; color: var(--ink); }
.pn-prompt-ic svg, .pn-hint svg {
  display: block; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pn-prompt-ic { color: var(--pn-accent); }
@media (min-width: 981px) {
  .pn-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .pn-head-title h2 { font-size: clamp(40px, 4.6vw, 64px); }
  .pn-intro { padding-bottom: 6px; }
  .pn-intro .pn-lede { margin-top: 0; }
}

/* ---------- Raster ---------- */
.pn-grid {
  list-style: none;
  margin: clamp(32px, 4.5vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .pn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .pn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Karte und ihre zwei Seiten ---------- */
.pn-card { position: relative; display: grid; min-width: 0; }
.pn-inner { display: grid; gap: 8px; min-width: 0; }
.pn-face { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; }
.pn-front { background: var(--pn-face); border: 1px solid var(--pn-line); }
.pn-back { background: var(--pn-navy); border: 1px solid var(--pn-navy); color: #F7F7F5; --pn-vis: rgba(247, 247, 245, 0.08); }
.pn-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px; }
.pn-tag { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--pn-accent); }
.pn-num { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-60); }
.pn-mark {
  flex: none; width: 16px; height: 14px;
  background: currentColor;
  -webkit-mask: url("mateeria-mark.svg") center / contain no-repeat;
          mask: url("mateeria-mark.svg") center / contain no-repeat;
}
.pn-front .pn-mark { margin-left: auto; opacity: 0.45; }
.pn-back .pn-tag { color: #D8CDBF; }
.pn-back .pn-mark { color: #F7F7F5; }
.pn-card h3, .pn-sol {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 1.9vw, 25px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.pn-card h3 { color: var(--ink); }
.pn-sol { color: #F7F7F5; }
.pn-text { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-60); }
.pn-back .pn-text { color: rgba(247, 247, 245, 0.76); }
.pn-hint { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500; color: var(--pn-accent); }
.pn-back .pn-hint { color: #D8CDBF; }
.pn-hint svg { transition: transform 420ms var(--pn-ease); }

/* Der Knopf liegt unsichtbar über der ganzen Karte */
.pn-flip {
  position: absolute; inset: 0; z-index: 2;
  margin: 0; padding: 0;
  border: 0; border-radius: 24px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pn-flip:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; }

/* Mit Skript: eine Karte, zwei Seiten, Drehung um die senkrechte Achse */
.pn.is-live .pn-card { perspective: 1600px; transition: transform 160ms var(--pn-ease); }
.pn.is-live .pn-inner { gap: 0; transform-style: preserve-3d; transition: transform 680ms var(--pn-flip); }
.pn.is-live .pn-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pn.is-live .pn-back { transform: rotateY(180deg); }
.pn.is-live .pn-card.is-flipped .pn-inner { transform: rotateY(180deg); }
.pn.is-live .pn-card:active { transform: scale(0.985); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .pn.is-live .pn-card:hover .pn-front { border-color: var(--border-strong); }
  .pn.is-live .pn-card:hover .pn-hint svg { transform: rotate(-40deg); }
}

/* ---------- Szenen (rein bildlich, aria-hidden) ---------- */
.pn-vis {
  position: relative;
  display: grid;
  place-items: center;
  height: 164px;
  margin: 7px 7px 0;
  padding: 12px;
  border-radius: 18px;
  background: var(--pn-vis);
  overflow: hidden;
  container-type: inline-size;
  user-select: none;
}
.pn-vis > * { font-size: 12px; font-size: clamp(10.5px, 3.9cqw, 13px); }
.v-paper {
  background: var(--pn-paper);
  border-radius: 0.9em;
  padding: 0.9em 1.1em;
  color: var(--ink-80);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(15, 44, 71, 0.06), 0 0.9em 1.8em -1.1em rgba(15, 44, 71, 0.28);
}
html[data-theme="dark"] .pn .v-paper { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.pn-back .v-paper { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0.9em 1.8em -1.1em rgba(0, 0, 0, 0.5); }
.v-head { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 0.55em; font-weight: 600; color: var(--ink); }
.v-head small { font-size: 0.85em; font-weight: 500; color: var(--ink-60); }
.v-swap { display: grid; }
.v-swap > em { grid-area: 1 / 1; font-style: normal; transition: opacity 260ms var(--pn-ease), transform 320ms var(--pn-ease); }
.v-chip { justify-self: end; align-self: start; font-size: 0.82em; font-weight: 600; padding: 0.28em 0.7em; border-radius: 999px; white-space: nowrap; }
.v-late { color: var(--pn-late); background: var(--pn-late-bg); }
.v-ok { color: var(--pn-ok); background: var(--pn-ok-bg); }
.v-swap > .v-ok { opacity: 0; transform: translateY(0.45em); }
.is-solved .v-swap > :is(.v-late, .v-q) { opacity: 0; transform: translateY(-0.45em); }
.is-solved .v-swap > .v-ok { opacity: 1; transform: none; }

/* 01 Zeit: To-do-Liste, Marketing rutscht nach hinten */
.v-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; width: 17.5em; }
.v-todo li { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.v-cb { position: relative; flex: none; width: 1.1em; height: 1.1em; border: 1.5px solid var(--ink-40); border-radius: 0.3em; }
.v-todo .is-done { color: var(--ink-60); text-decoration: line-through; text-decoration-color: var(--ink-40); }
.v-todo .is-done .v-cb { background: var(--ink-60); border-color: transparent; }
.v-todo .is-done .v-cb::after {
  content: ""; position: absolute; left: 0.34em; top: 0.12em; width: 0.28em; height: 0.55em;
  border: solid var(--pn-paper); border-width: 0 0.13em 0.13em 0; transform: rotate(45deg);
}
.v-todo .v-swap { margin-left: auto; }

/* 02 Kanäle: ein Thema, vier Werkzeuge, drei davon leer */
.v-wins { display: grid; grid-template-columns: repeat(2, 10em); gap: 0.6em; }
.v-win { padding: 0.5em 0.7em 0.6em; border-radius: 0.75em; }
.v-wh { display: flex; align-items: center; gap: 0.45em; margin: 0; font-size: 0.8em; font-weight: 600; line-height: 1.3; color: var(--ink-60); }
.v-wh b { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--c, var(--pn-bar)); }
.c-blog { --c: var(--ch-blog); } .c-pin { --c: var(--ch-pinterest); } .c-nl { --c: var(--ch-newsletter); } .c-ig { --c: var(--ch-instagram); }
.v-wt { margin: 0.3em 0 0; font-size: 0.86em; font-weight: 600; color: var(--ink); white-space: nowrap; }
.v-sk { position: relative; display: grid; gap: 0.32em; margin-top: 0.45em; }
.v-sk i { display: block; height: 0.36em; border-radius: 1em; background: var(--pn-skel); transform-origin: left center; transition: transform 460ms var(--pn-ease); }
.v-sk i:nth-child(2) { width: 84%; }
.v-win:not(.is-full) .v-sk i { transform: scaleX(0); }
.is-solved .v-win .v-sk i { transform: none; }
.v-cur { position: absolute; left: 0; top: -0.25em; width: 1.5px; height: 1.05em; background: var(--ink); animation: pn-blink 1.1s steps(1) 8; }
.is-solved .v-cur { display: none; }
@keyframes pn-blink { 50% { opacity: 0; } }

/* 03 Bilder: ein Produktfoto, drei Formate fehlen */
.v-img { display: flex; align-items: center; gap: 0.6em; }
.v-photo, .v-fill { background: linear-gradient(165deg, #EDE5DA 0%, #DCCFBF 100%); }
.v-photo { display: grid; place-items: end center; width: 5em; height: 6.6em; border-radius: 0.6em; overflow: hidden; box-shadow: 0 0.6em 1.2em -0.8em rgba(15, 44, 71, 0.4); }
.v-photo svg { width: 76%; height: auto; margin-bottom: 0.35em; }
.v-arrow { width: 1.1em; height: 1.1em; fill: none; stroke: var(--ink-60); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-back .v-arrow { stroke: rgba(247, 247, 245, 0.7); }
.v-frames { display: flex; align-items: center; gap: 0.45em; }
.v-frame {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 6.6em; padding-bottom: 0.45em;
  border: 1.5px dashed var(--ink-40); border-radius: 0.55em; overflow: hidden;
}
.f-pin { width: 4.4em; } .f-story, .f-reel { width: 3.7em; }
.v-lbl { position: relative; z-index: 1; font-size: 0.78em; font-weight: 600; color: var(--ink-80); }
.v-miss { position: relative; z-index: 1; margin-top: 0.1em; font-size: 0.72em; font-weight: 600; color: var(--pn-late); }
.v-fill {
  position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 0.5em;
  opacity: 0; transform: scale(1.08);
  transition: opacity 320ms var(--pn-ease), transform 420ms var(--pn-ease);
}
.v-fill svg { width: auto; height: 3.2em; }
.f-story .v-fill { padding-top: 1.3em; }
.f-story .v-fill svg { height: 2.6em; }
.f-story .v-fill::before {
  content: ""; position: absolute; left: 20%; right: 20%; top: 0.5em; height: 0.28em; border-radius: 1em;
  background: rgba(59, 49, 40, 0.55); box-shadow: 0 0.55em 0 rgba(59, 49, 40, 0.35);
}
.v-fill .v-play { position: absolute; top: 0.4em; right: 0.35em; width: 1em; height: 1em; fill: #3B3128; opacity: 0.8; }
.is-solved .v-frame { border-color: transparent; }
.is-solved .v-fill { opacity: 1; transform: none; }
.is-solved .v-lbl { color: #3B3128; }
.is-solved .v-miss { visibility: hidden; }
html[data-theme="dark"] .pn :is(.v-photo, .v-fill) { filter: brightness(0.9); }

/* 04 Markenton: Floskeln werden gestrichen */
.v-tone { width: 19em; }
.v-copy { margin: 0; font-family: var(--serif); font-size: 1.04em; line-height: 1.4; color: var(--ink-80); }
.v-copy s {
  text-decoration: none;
  background: linear-gradient(var(--pn-strike), var(--pn-strike)) no-repeat 0 56% / 100% 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 520ms var(--pn-ease);
}
.v-tone .v-swap { margin-top: 0.7em; }
.v-tone .v-chip { justify-self: start; }
.v-mine { color: var(--ink); font-weight: 600; font-size: 0.9em; line-height: 1.35; }
.v-mine b { display: inline-block; margin-right: 0.45em; padding: 0.15em 0.55em; border-radius: 999px; font-size: 0.86em; color: var(--pn-ok); background: var(--pn-ok-bg); }
.v-tone .v-swap > .v-ok { background: none; }

/* 05 Daten: Zahlen ohne nächsten Schritt */
.v-dash { width: 18.5em; }
.v-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.38em; }
.v-rows li { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: 0.9em; color: var(--ink-80); }
.v-bars { display: flex; align-items: flex-end; gap: 0.22em; height: 1.35em; }
.v-bars b { width: 0.5em; border-radius: 0.12em; background: var(--pn-bar); transform-origin: bottom; transition: transform 520ms var(--pn-ease); }
.v-bars b:nth-child(1) { height: var(--h1); } .v-bars b:nth-child(2) { height: var(--h2); }
.v-bars b:nth-child(3) { height: var(--h3); } .v-bars b:nth-child(4) { height: var(--h4); }
.v-bars b:nth-child(5) { height: var(--h5); } .v-bars b:nth-child(6) { height: var(--h6); }
.v-up { --h1: 30%; --h2: 38%; --h3: 46%; --h4: 58%; --h5: 74%; --h6: 92%; }
.v-flat { --h1: 52%; --h2: 46%; --h3: 55%; --h4: 48%; --h5: 51%; --h6: 47%; }
.v-down { --h1: 90%; --h2: 78%; --h3: 66%; --h4: 54%; --h5: 44%; --h6: 34%; }
.v-next { margin: 0.75em 0 0; padding-top: 0.6em; border-top: 1px solid var(--pn-line); }
.v-next-k { display: block; margin-bottom: 0.35em; font-size: 0.8em; font-weight: 600; color: var(--ink-60); }
.v-q { display: block; padding: 0.3em 0.7em; border: 1.5px dashed var(--ink-40); border-radius: 0.5em; font-size: 0.85em; font-weight: 600; color: var(--ink-60); }
.v-dash .v-ok { justify-self: start; }

/* 06 Planung: Monat in Schüben, gelöst im festen Takt */
.v-cal { width: 17.6em; }
.v-week, .v-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3em; }
.v-week { margin-bottom: 0.3em; }
.v-week span { text-align: center; font-size: 0.75em; font-weight: 600; color: var(--ink-60); }
.v-month i { position: relative; height: 1.3em; border-radius: 0.35em; background: var(--pn-cell); }
.v-month i::before, .v-month i::after { content: ""; position: absolute; inset: 0; transition: opacity 260ms var(--pn-ease), transform 320ms var(--pn-ease); }
.v-month .a3::before {
  background:
    radial-gradient(circle, var(--pn-late) 0.2em, transparent 0.23em) 22% 50% / 0.5em 0.5em no-repeat,
    radial-gradient(circle, var(--pn-late) 0.2em, transparent 0.23em) 50% 50% / 0.5em 0.5em no-repeat,
    radial-gradient(circle, var(--pn-late) 0.2em, transparent 0.23em) 78% 50% / 0.5em 0.5em no-repeat;
}
.v-month .a1::before { background: radial-gradient(circle, var(--pn-late) 0.2em, transparent 0.23em) 50% 50% / 0.5em 0.5em no-repeat; }
.v-month .p::after {
  background: radial-gradient(circle, var(--pn-accent) 0.22em, transparent 0.25em) 50% 50% / 0.55em 0.55em no-repeat;
  opacity: 0; transform: scale(0.4); transition-delay: calc(var(--i, 0) * 45ms);
}
.is-solved .v-month :is(.a3, .a1)::before { opacity: 0; }
.is-solved .v-month .p::after { opacity: 1; transform: none; }

/* Bewegung: die Vorderseite spielt ihr Problem einmal an, die Rückseite
   verwandelt sich erst, während die Karte sich dreht */
@media (prefers-reduced-motion: no-preference) {
  .pn.is-live .pn-card:not(.is-seen) .pn-front .v-late { opacity: 0; transform: translateY(0.45em); }
  .pn.is-live .pn-front .v-todo li:nth-child(4) .v-late { transition-delay: 160ms; }
  .pn.is-live .pn-card:not(.is-seen) .pn-front .v-copy s { background-size: 0 0.12em; }
  .pn.is-live .pn-front .v-copy s + s { transition-delay: 220ms; }
  .pn.is-live .pn-card:not(.is-seen) .pn-front .v-bars b { transform: scaleY(0.2); }
  .pn.is-live .pn-card:not(.is-seen) .pn-front .v-month :is(.a3, .a1)::before { opacity: 0; transform: scale(0.4); }

  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-swap > .v-ok { opacity: 0; transform: translateY(0.45em); }
  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-swap > :is(.v-late, .v-q) { opacity: 1; transform: none; }
  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-win:not(.is-full) .v-sk i { transform: scaleX(0); }
  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-fill { opacity: 0; transform: scale(1.08); }
  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-month .p::after { opacity: 0; transform: scale(0.4); }
  .pn.is-live .pn-card:not(.is-flipped) .is-solved .v-month :is(.a3, .a1)::before { opacity: 1; }
  .pn.is-live .pn-card.is-flipped .is-solved :is(.v-swap > em, .v-sk i, .v-fill) { transition-delay: 380ms; }
  .pn.is-live .pn-card.is-flipped .is-solved .v-month .p::after { transition-delay: calc(380ms + var(--i, 0) * 45ms); }
  .pn.is-live .pn-card.is-flipped .is-solved .v-win:nth-child(3) .v-sk i { transition-delay: 460ms; }
  .pn.is-live .pn-card.is-flipped .is-solved .v-win:nth-child(4) .v-sk i { transition-delay: 540ms; }
  .pn.is-live .pn-card.is-flipped .is-solved .f-story .v-fill { transition-delay: 460ms; }
  .pn.is-live .pn-card.is-flipped .is-solved .f-reel .v-fill { transition-delay: 540ms; }
}

/* ---------- Ergebnis und CTA ---------- */
.pn-result {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: var(--pn-navy);
  color: #F7F7F5;
}
@media (min-width: 760px) { .pn-result { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; } }
.pn-meter { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pn-meter li { width: 26px; height: 5px; border-radius: 3px; background: rgba(247, 247, 245, 0.22); transition: background-color 280ms var(--pn-ease); }
.pn-meter li.is-on { background: #F7F7F5; }
.pn-res-title { margin-top: 6px; font-size: 17px; line-height: 1.45; color: rgba(247, 247, 245, 0.76); }
.pn-res-count, .pn-result[data-n="0"] .pn-res-title {
  margin-top: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #F7F7F5;
  text-wrap: balance;
}
.pn-cta {
  display: inline-flex; align-items: center; justify-self: start; gap: 8px;
  padding: 16px 24px;
  border-radius: 14px;
  background: #F7F7F5;
  color: #0F2C47;
  font: 500 16px/1.2 var(--sans);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 180ms var(--pn-ease), transform 160ms var(--pn-ease);
}
.pn-cta:hover { background: #FFFFFF; color: #0F2C47; }
.pn-cta:active { transform: scale(0.97); transition-duration: 80ms; }
.pn-cta:focus-visible { outline: 2px solid #F7F7F5; outline-offset: 3px; }
.pn-cta .arrow { transition: transform 260ms var(--pn-ease); }
.pn-cta:hover .arrow { transform: translateX(3px); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 639px) {
  .pn-grid { gap: 12px; }
  .pn-vis { height: 150px; margin: 6px 6px 0; padding: 10px; }
  .pn-body { padding: 16px 18px; }
  .pn-card h3, .pn-sol { font-size: 22px; }
  .pn-hint { padding-top: 14px; }
}

/* ---------- Bewegung reduziert: Überblenden statt Drehen ---------- */
@media (prefers-reduced-motion: reduce) {
  .pn *, .pn *::before, .pn *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .pn.is-live .pn-inner { transform: none !important; }
  .pn.is-live .pn-back { transform: none; opacity: 0; }
  .pn.is-live .pn-card.is-flipped .pn-back { opacity: 1; }
  .pn.is-live .pn-card.is-flipped .pn-front { opacity: 0; }
  .pn.is-live .pn-face { transition: opacity 220ms ease !important; }
  .pn.is-live .pn-card:active { transform: none; }
}
@media (prefers-contrast: more) {
  .pn-front { border-color: var(--border-strong); }
}
@media print {
  .pn-flip, .pn-prompt, .pn-meter, .pn-hint { display: none !important; }
}